Series: Ionic 2 App, Part 2: Set-up, Configuration, and Tabs Overview

In part 1 we learned a little bit about the basics of a mobile hybrid app.  Now let’s get to the details of how to set up our environment.  You can also follow this link:

http://ionicframework.com/docs/v2/getting-started/installation/

Some prerequisities:

  • Mac or ubuntu (you can use brew if you are using a mac)
  • npm installed
npm install -g ionic@beta
npm install -g phonegap [for phonegap]
npm install -g cordova@latest [for phonegap

Note that Ionic is still in beta, so some of the cli auto generation doesn’t come out quite correctly.

To start off run

ionic serve

//which outputs
Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.22
Ionic App Lib Version: 2.0.0-beta.12
OS: Distributor ID: Ubuntu Description: Ubuntu 14.04.3 LTS 
Node Version: v5.4.1

ionic serve is useful when you need to submit a bug via github or ask for help on the Ionic Slack Forums.

Create a project by running

ionic start tutorial --v2

and then run

ionic serve

On your browser you should now be able to see:
Capture

Let’s take a look at the project structure:

Capture

  • Root – the root folder is tutorial and there is config.xml.  That will be important later for testing on your phone and deploys
  • app.js – This is where the app starts initializing
  • providers folder – this doesn’t exist yet, but will be where your data mappings will be
  • pages folder – This is where all of your pages will live.

Before that, let’s take a look at the main file app.js

 

import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';


@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  static get parameters() {
    return [[Platform]];
  }

  constructor(platform) {
    this.rootPage = TabsPage;

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

There is a lot going on here, so let us break things into sections

Tabs and Imports

  • Lines 1-3 the import lines import the class so you can use it the current class.  If you have coded Java before, this may seem very familiar to you.  You can read more from this blog.
  • In particular let us focus on line 3 which states
    import {TabsPage} from './pages/tabs/tabs';

What this is saying is it is importing the ‘TabsPage’ class from the location ‘pages/tabs/tabs’.  Even though it doesn’t state it, it is implicilty referring to tabs.js

If you open up tabs.js you will see

export class TabsPage

Notice that the import ‘TabsPage’ matches the name of the import.

Root Page

Now if you take a look at line 16, this is setting the rootPage of your app to the TabsPage.  Note that it can be any arbitrary page.

Tabs Page.js

import {Page} from 'ionic-angular';
import {Page1} from '../page1/page1';
import {Page2} from '../page2/page2';
import {Page3} from '../page3/page3';


@Page({
  templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
  constructor() {
    // this tells the tabs component which Pages
    // should be each tab's root Page
    this.tab1Root = Page1;
    this.tab2Root = Page2;
    this.tab3Root = Page3;
  }
}

  • In the tabs.js you will note a bunch of new imports.
  • In line one, you have an import from a core class
  • In lines 2-4, you have imports for other pages
  • And if you notice in lines 14-16 variable instances on the TabsPage are being set to the pages.

Tabs.html


<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="chatbubbles"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Tab 3" tabIcon="cog"></ion-tab>
</ion-tabs>

Here you see that in the ion-tabs element, it is being set to ‘tab1Root’.  tab1Root is mapped to ‘Page1’ so when you click on the ‘Tab 1’ page it loads.

Here ionic defines special ‘ion-tabs’ tags (which is described on the api here).

Review:

Capture

  • When ‘ionic serve’ is run app.js loads
  • In this scenario, TabsPage is instantiated (e.g. new TabsPage() )
  • When the constructor runs in TabsPage, any class variables are set
  • In the tabs.html, those variables are implicitly available without references ‘this.’

To Do:

  • Open page1.html and change some text
  • Open page2.html and change some text
  • Open tabs.html and change the ‘tabTitle’

Get a feel of what is changing

Next Post:

  • Stay tuned for a post of how to render data and use providers.

Extras:

Subscribe to our newsletter to get notified of new articles in the Ionic 2/Tutorial Series!

[mc4wp_form id=”47″]

Series: Creating Hybrid Mobile Apps, Part 1: Introduction

In 2o16, you have many options of creating mobile apps.  To me there pretty much are only two options:

  • Native (xcode/swift/java)
  • Hybrid Mobile Apps (write once, cross deploy)

Making a native app makes sense if you are doing something fairly custom with UI or creating a game.  But hybrid mobile apps might make more sense if you are doing something simple like consuming data and displaying it.  Note that I am not an expert in this field, so I’ll try to do the best to convey what I’ve learned from research and recently making an app.

For this tutorial series, we will use Ionic 2 Beta which uses Angular 2 Beta.  Things aren’t quite 100% with Ionic 2, but it is actually good enough to launch a production app.

Another reason I think Ionic 2 is good is their extensive component UI.  This means I don’t need to build tabs, cards, menus, etc.  Check out their offerings at their components page.

Before starting we assume you are familiar with:

  • HTML
  • CSS
  • Consuming APIs
  • Experience in at least one programming language.

Simulator Screen Shot Mar 2, 2016, 4.59.43 PM
In this snapshot example, Ionic comes out of the bat with support of tabs, and cards.

 

What is a hybrid mobile app?
s1-2

At a high level, instead of coding with a native language, you code mainly in html, css, javascript, and configuration files.  There is a compilation process that takes place (which can be local or remote, but we’ll get into that later) which gives you two assets:

  • Android apk.  You can use this and install it directly on your device and then upload it to the Google Play Store.
  • IOS .ipa file.  You can install the .ipa to your iPhone or iPad on iTunes for testing then upload it via ‘Application Coder’ on the mac.

 

Platform Requirements:
s1-3

When developing, you have two options:

Mac
I think a mac is probably the best options.  The reason is that you can generate the apk and ipa locally and run emulation to test the apps.

PC
If you have Windows, I recommend that you run Ubuntu to run your development.  From there, what you can do is use Phonegap to remotely compile your code.  From there you can download your .apk and .ipa.

Note that if you have a PC, you do need a Mac to take screen snapshots for each platform and submit your .ipa via ‘Application Loader’.  If you don’t have a Mac available, you could use mac in cloud.

Development

Developing a hybrid app is a little bit different than doing a full stack like Ruby on Rails.

s1-4a

  • Text Editor – All your work starts off with your standard text editor.  You could use anything like Eclipse, but for this example I have been using Sublime .
  • Compile and test on browser – Similar to running ‘rails s’, you can run ‘ionic serve’.  What this does is transplies (not compilation as it doesn’t go into a vm) and binds port 8100 to a webserver.  What you can now do is test your app in the browser.  However you won’t have access to native features such as the camera, uuid, etc.
  • Emulator – If you are running on a Mac, you can run ‘ionic emulate ios’ which launches an emulator.  This is a little better than running it in a browser, but still misses some native functionality.
  • Build – Here you actually generate the .ipa or .apk to load on your native device.  You can build it locally or use Phonegap.

When developing, my advice is to not wait until the very last minute to test your app on an iPhone and android device.  There are often weird things that happen and you don’t want to get hit last minute with weird errors.

API

s1-5

Most likely your mobile app will fall into one of two situations

  • No API Access – This is an app which is completely offline and can rely on all of the local storage (SQlite, etc).
  • API Access – This is the most common scenario where an app hits an API to get data.

For this tutorial, we will assume you have an API already that works.  My only recommendation is to have two environments for your API.  Development and production.

Here is part 2 where we will start installing the environment and create a new project.

 

 

 

Subscribe to our newsletter to get notified of new articles in the Ionic 2/Tutorial Series!

[mc4wp_form id=”47″]