Hello readers! Today we’re going to dig a little bit into Ionic(or Ionic 2 in this case). We'll learn about Ionic by building a simple Markdown App which can give user preview of Markdown text on-the-go on their mobile device. We’ll build this app keeping Android platform in mind.
So, first of all “What is Ionic?” you ask.
From its official website, “Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.” With Ionic, you can build mobile apps using the technologies you already know. That’s right! It’s all HTML, CSS and JavaScript.
Yes yes, I hear you asking “why do we need Ionic when we already have frameworks like Phonegap?” The answer is, frameworks like Phonegap are build systems using Cordova (they’re fairly synonymous), whereas Ionic is an AngularJS based app development platform with Google’s Material Design UI that uses Cordova to package itself for mobile platforms. Apart from using AngularJS in it’s core, Ionic also facilitates..
- Features to build the progressive web apps
- Live Reload which compile and redeploy your app at every step of development is for chumps
- AoT Compiling which makes an ionic app loads lightning fast
In this tutorial, we are going to make our Markdown App using Ionic 2 which is using Angular 2 in its core. To build an Ionic app locally, all you need is recent version of Node.js installed on your computer, a latest browser(preferably Chrome) and a text editor of your choice. Sounds exciting? Let’s get started with it.
Installing Ionic
Ionic 2 apps are created and developed primarily through the Ionic command line utility (the “CLI”), and use Cordova to build and deploy as a native app. This means we need to install a few utilities to get developing.
Ionic CLI and Cordova
To create Ionic 2 apps, you’ll need to install the latest version of the Ionic CLI and Cordova. Install the Ionic CLI and Cordova for native app development:
$ npm install -g ionic cordova
This will take some time to be installed and ready to use.
You may need to add “sudo” in front of these commands to install the utilities globally or in case of Windows, you need to open Command Prompt in Administrator mode. You may get error while installing
_Ionic_in flaky networks but hold onto it and you'll surely end up installing it.
Once both ionic and cordova installed, we can generate a basic Ionic app using following command:
$ ionic start ionic-markdownify --v2
Notice here that we have added — v2 because we want to build our app using Ionic 2. In case, you want to build app using Ionic 1, omit — v2.
This will generate a folder called ionic-markdownify with following folder structure:
pages dir contains all the pages that our app is going to use. In our app, we’ll only deal with home dir.
To run our app, cd into the directory that was created and then run the ionic serve command to test your app right in the browser!
$ cd ionic-markdownify$ ionic serve
This will start our app and we can see our app in action over http://localhost:8100. It’s a basic Tab based application and would look like below:
Next, In order to make our Markdown app, we will first modify our file src/pages/home/home.html. We will replace the content within <ion-content></ion-content> to following:
Notice, we have used
_Ionic_'s inbuilt textarea component_<ion-textarea>_which gives the native touch to the textarea in specific OS environment(in our case it's Android). We have also bind the_ion-textarea_using_[(ngModel)]="plainText"_which will help us getting it's value in_class HomePage_in_src/pages/home/home.ts_
Next, we’ll add a toggle button which we’ll use to toggle between Textarea and Markdown Preview. Let’s add it.
After this, we will add another <ion-content></ion-content> after the existing one which we'll use to hold the HTML preview of the Markdown. We'll add [hidden]="!toggleVal" in this component in order to show only in case if state of the toggle changes. We have done same with <ion-item> in which <ion-textarea> lies. After wiring down all these src/pages/home/home.html will look like this:
To make our <ion-textarea> full height we will add following piece of CSS in src/pages/home/home.scss:
After this, we will add [(ngModel)]="toggleVal" to the <ion-toggle> to track the value of the same and will also add (ionChange)="convert()" to track the changes of the toggle.
At this point our app’s Home tab would look like below:
We will then add convert() function into home.ts as follows:
Notice this function will check the toggle’s current state and based on that it will convert the Markdown to releveant HTML. Also notice that we have maintained the state of the toggle based on the textarea’s value.
To convert Markdown to HTML, we’ll use marked library. To install it fire the below command in CLI:
This will install marked into our project. To use it in our app, let's add now the following line on top of the src/pages/home/home.ts
import marked from 'marked';
Apart from this, to use the reference of the <div [innerHtml]="content"></div> we'll add Angular's [ViewChild](https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html) from @angular/core
import { Component, ViewChild, Input } from '@angular/core';
And will add it class HomePage as follows:
@ViewChild(Content) content: Content;
After adding all these our src/pages/home/home.ts would look like below at this point:
This basically sums up our whole app. Now, head towards the http://localhost:8100 in your browser and you’ll see our pretty little app in action!
You can also check the whole codebase of this app over here.
The whole idea of this tutorial is to get you up and running with Ionic 2 by building a real world app and to understand some of the concepts of Ionic 2. You can improve this particular app. Some improvements as..
- Implementing swipe gesture to get rid of toggle so that user just need to swipe left in order to get preview.
- Implementing Markdown’s editing tools such as bold, italic, underline, code and so forth.
- Implementing a text editor in place of textarea.
You can also package your newly created app for any platform(Android, iOS, Windows Phone OS) of your like using Ionic Package and distribute the same.
For more information upon Ionic 2 you can follow this documentation and tweak your way through a whole lot of Ionic 2 components.
Thanks for reading.
Happy hacking!