Ionic 2 - ListFeeds mobile application

By Maurizio Farina | Posted on October 2017 | DRAFT

The tutorial describe a personal journey with Ionic 2 used to realize the hybrid-mobile application for ListFeeds.com

Overview

Ionic enables web developers to build apps for all major app stores and the mobile web with a single code base with the looks and feels at home on every device.

Ionic 2 is based on Angular 2 (based on TypeScript). Typescript is a typed superset of Javascript that compiles to plain JavaScript. Ionic is based over Apache Cordova so the application will be executed within wrapper and rely on standards-compliant API bindings to access each device's capabilities (such as sensors, equipments, etc.)

From Apache Cordova documentation: Apache Cordova

The Ionic core features:

  • Free & Open Source — 100% source code on Github
  • Fully Cross-Platform — IOS, Android, Windows, Web, Desktop, PWA
  • Premier Native Plugins — Camera, Bluetooth, Push Notifications
  • First-class Documentation — Clear and Consistent

Install

Pre-requisites: Node.js 6

1
npm install -g ionic cordova

First Ionic project: ionic start command

1
ionic start [app_name] [tutorial] 

The tutorial available:

  • tabs : a simple 3 tab layout
  • sidemenu: a layout with a swipable menu on the side
  • blank: a bare starter with a single page
  • super: starter project with over 14 ready to use page designs
  • tutorial: a guided starter project

Start DoorStep application

1
2
3
ionic start doorStep
cd cutePuppyPics
ionic serve

The ionic serve command opens the browser to the url: http://localhost:8100. The web site will be update at each change.

For Android/IOS developers

Android: Install the SDK and/or Android Studio to start building apps for Android. Take a look to Cordova Android.
IOS: Follow the instructions to upgrade Xcode at Cordova iOS.

Transpiling: From TypeScript to JavaScript

The Ionic framework uses TypeScript to manage behaviour behinds UI components. So, the TypeScript code is transformed to JavaScript code;

Transpiling: transforming a code written in one language to another.

The transpiling activity is performed automatically by Ionic framework; Using TypeScript is very useful because allows to write application using an higher language and transforming it according JavaScript supported by the target browser. Basically we don't care about target JavaScript browser compatibility.

Project Structure

Folder/File Description
src folder containing all raw and uncompiled files used by Ionic building phase
src/index.html application entry point used for including all files(js, css) and where tag is defined
src/app/app.module.ts application entry point
src/app/app.component.ts component declarations. Here is declared the template for the app (app.html)
src/app/app.html application template