Getting started with Ionic 2 by building a Markdown App

Hello readers! Today we’re going to dig a little bit into (or in this case). We'll learn about 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.jsinstalled 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 with following folder structure:

.
+-- hooks
+-- node_modules
+-- plugins
+-- resources
|   +-- android
|   +-- ios
|   +-- wp8
+-- src
|   +-- app
|   +-- assets
|   +-- pages
|       +-- about
|       +-- contact
|       +-- home
|       +-- tabs
|   +-- theme
+-- www
+-- .editorconfig
+-- .gitignore
+-- .io-config.json
+-- config.xml
+-- ionic.config.json
+-- package.json
+-- tsconfig.json
+-- tslint.json

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:

<h2>Welcome to Markdownify!</h2>
<ion-item>
  <ion-textarea rows="6" [(ngModel)]="plainText" placeholder="Strat writing your markdown below..."></ion-textarea>
</ion-item>

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.

<h2>Welcome to Markdownify!</h2>
<ion-item>
  <ion-label>Convert to Markdown</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>
<ion-item>
    <ion-textarea rows="6" placeholder="Strat writing your markdown below..."></ion-textarea>
</ion-item>

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:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Markdownify!</h2>
  <ion-item>
    <ion-label>Convert to Markdown</ion-label>
    <ion-toggle color="secondary"></ion-toggle>
  </ion-item>

  <ion-item [hidden]="toggleVal">
    <ion-textarea rows="6" placeholder="Strat writing your markdown below..."></ion-textarea>
  </ion-item>
  <ion-content [hidden]="!toggleVal">
    <div [innerHtml]="content"></div>
  </ion-content>
</ion-content>

To make our <ion-textarea> full height we will add following piece of CSS in src/pages/home/home.scss:

textarea {
  max-width: 100%;
  width: 100%;
  height: 100vh;
}

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:

convert(this) {
    if(this.toggleVal==true){
      if(this.plainText && this.plainText!=''){
        let plainText = this.plainText

        this.markdownText = marked(plainText.toString())
        this.content = this.markdownText
      }else{
        this.toggleVal=false
      }
    }
}

Notice this function will check the toggle’s current state and based on that it
will convert the Markdown to relevant 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:

    $ npm install marked --save

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 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:

import { Component, ViewChild  } from '@angular/core';
import { Content } from 'ionic-angular';

import { NavController } from 'ionic-angular';
import marked from 'marked';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild(Content) content: Content;

  constructor(public navCtrl: NavController) {
    //console.log(marked('I am using __markdown__.'));
  }

  convert(this) {
    if(this.toggleVal==true){
      if(this.plainText && this.plainText!=''){
        let plainText = this.plainText
        this.markdownText = marked(plainText.toString())
        this.content = this.markdownText
      }else{
        this.toggleVal=false
      }
    }
  }
}

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.