Skip to content
  • Services
    Our Approach
    Personalized, in-depth technical guidance on a global scale that helps organizations achieve their digital transformation goals.
    Learn more
    • Our Approach
    • Development
    • Design
    • Digital Experience Platform
    • Data & Analytics
    • Cloud & DevOps
    • Support
  • Work
    Our Work
    Through our expertise in strategy, design, and engineering, we help clients deliver digital transformation at scale.
    Learn more
    • Our Work
    • Healthcare
    • Finance
    • Manufacturing
    • Agriculture
    • Education
  • About
    About us
    For over 20 years, we’ve partnered with companies of all sizes and industries to solve their most complex business problems.
    Learn more
    • About us
    • Leadership
    • Locations
    • Events
    • News
  • Careers
    Join our Team
    Take your career to the next level. We offer exciting opportunities across every stage of the software development life cycle.
    Learn more
    • Join our Team
    • Open Positions
    • Application Process
    • Benefits
    • Learning & Development
  • Insights
    Our Insights
    Read our latest blogs, watch our recent videos, and browse our library of e-books — all full of insights from our experts.
    Learn more
    • Our Insights
    • Blog
    • Videos
    • Downloads
  • Contact
Menu

What is ionic – Getting started guide for beginners

Learn about Ionic – a platform, or a cluster of platforms used for building hybrid apps using javascript writing.

Annika Hey

Annika Hey

Design Principal

Atanas Atanasov

Atanas Atanasov

Software Development Manager – Agile Frameworks

Björn Stansvik

Founder & Chief Executive Officer

Daniela Nazim

Daniela Nazim

MentorMate Alumni

Dimitar Dobrev

Dimitar Dobrev

MentorMate Alumni

Craig Knighton

Chief Operating Officer

Eleonora Georgieva

Global VP, Delivery

Georgi Dormishev

George Dormishev

System Administration Manager

Ivaylo Kostadinov

Director, Software Engineering - .NET

Jamie Bolseth profile picture

Jamie Bolseth

MentorMate Alumni

Jay Miller

President

Jeni Kyuchukova

Director, Quality Engineering

Jessica Anderson

VP of Finance and Administration

Liz Spolyar

Global Director, Continuation Engineering

Nick Curran

Nick Curran

Technical Architect

Nikolay Lyubchev

Global Director, Talent Acquisition, MentorMate

Stefan Tsvyatkov

Director, Software Engineering - Mobile

Stefan Tzanev

Chief Financial Officer

Vesselin Dobrev

Vesselin Dobrev

General Manager (Bulgaria)

Sylvia Vassileva

Sylvia Vassileva

Software Development Manager - Spok

Filip Gajtanovski

Software Development Manager - Storyworks

Krasimir K. Nikolov

VP of Technology

Katherine Kelly

Director of Operations (USA)

Carrie Siewert

Strategic Account Manager

Brady Swanson

Global Director, Marketing

Eve Poeschl

MentorMate Alumni

Ryan Peña

MentorMate Alumni

Vassil Vassilev

Software Development Manager - .NET

Pavel Petrov

Director, Software Engineering - LAMP&FE

Ivan Peev

Senior Technology Manager

Bob Reuss

MentorMate Alumni

Vera Kasapova

QA Manager

Greta Yamacheva

QA Manager

Robert Samuelsson

General Manager (Sweden)

Kyle Simmons

Solutions Architect

Robin Thomas

Solutions Architect

Nataliya Naydenova

MentorMate Alumni

Adam Malone

Alexander Dimitrov

Enterprise Architect

Andrea Kates

CEO, LaunchPad Central

Andrew Eklund

CEO, Ciceron

Andrew Marinov

Angel Nikolov

MentorMate Alumni

Anurag Shukla

Aron Wolde

MentorMate Alumni

Ashley Goodridge

Office Assistant

Benjamin Gramlich

MentorMate Alumni

Chris Black

MentorMate Alumni

Christa Haeg

MentorMate Alumni

Colin Lee

MentorMate Alumni

Deyan Stoynov

MentorMate Alumni

Dimitar Danailov

MentorMate Alumni

Dobrinka Tabakova

Doug Leatherman

Emily Genco

MentorMate Alumni

Fanka Vassileva

Gabriela Zagarova

MentorMate Alumni

Gary Conkright

CEO, physIQ

Gary Fingerhut

Executive Director, Cleveland Clinic Innovations

Gavin Finden

MentorMate Alumni

Georgi

Graham Klang

Hyusein Hyuseinov

Senior Automation QA

Ian Good

Global VP, Operations

Iva

Jack Cosentino

James Williams

John Byrne

Kaloyan Stoilkov

MentorMate Alumni

Kosta Hristov

Krasimir Gatev

Senior Android Developer

Lazar Petrakiev

Lyubomir Dobrev

Senior .NET Developer

Lubomir Velkov

Marin Yotovski

Mark Smith

MentorMate Alumni

Martin Dimitrov

MentorMate Alumni

Martin Kalyonski

Mike Hagan

MentorMate Alumni

Nikolay Andonov

Nikolay Arhangelov

Riley Panko

Guest Contributor

Roger Ferguson

MentorMate Alumni

Ryan Sysko

Chairman, WellDoc

Ryan Blake

MentorMate Alumnus

Sarah Rockholt

MentorMate Alumni

Sean McDevitt

CEO, Sensei

Siyana Slavova

Stanislas Walden

MentorMate Alumni

Stanislav Atanasov

Stanislava Bogdanova

MentorMate Alumni

Stefanie Trimble

MentorMate Alumnus

Stephen Fluin

Stoyan Stoyanov

MentorMate Alumnus

Tessa Cacek

Staffing Manager

Tom Clemens

MentorMate Alumnus

V8 JavaScript Engine

Viktor Mitev

Yolanda Petkova

Marketing Design Lead

Pete Anderson

Lead Product Owner, Target

MentorMate Software Development Lead Vasil Nonchev

Vasil Nonchev

Java Software Development Manager

Dilyana Totseva

QA Manager

Stanimir Nikolov profile picture

Stanimir Nikolov

Software Development Lead - iOS, MentorMate

Rosen Kolev

Technology Principal

Dimitar Mihaylov

MentorMate Alumni

Nikola Genov

Software Architect - .NET

Neli Todorova

Software Development Manager - LAMP

Yavor Dimitrov

MentorMate Alumni

Georgi Karanedyalkov

Software Development Lead - Android, MentorMate

Denislav Ganchev

Technology Principal

Stefan Shopov

QA Manager

Konstantin Rusev

Java Developer

Borislav Dimitrov profile picture

Borislav Dimitrov

Senior Android Developer, MentorMate

Tsvetelina Lazarova

MentorMate Alumni

Dimitar Gadzhev

Developer

Plamen Stoev

Software Development Manager - Front-end

Jake Nelsen

Senior Experience Designer

Zlati Pehlivanov

Zlati Pehlivanov

Senior Software Engineer II

Kate Tolmie, MentorMate Senior UX Designer

Kate Tolmie

Senior Experience Designer

Martin Angelov

Director, Software Engineering - LAMP&FE, MentorMate

Dimitar Zhelev

Senior .NET Developer

Joel Swenson, MentorMate Content Writer

Joel Swenson

Content Manager

Kiril Ivanov

Quality Assurance Analyst

Viktor Hristoskov profile picture

Viktor Hristoskov

Software Development Lead - iOS, MentorMate

Violeta Nikolcheva

Database Developer

Biliana Kadakevlieva

Senior Quality Assurance Analyst

Chris McLeod

Senior Solutions Consultant

Antonii Georgiev

Junior .NET Developer

Alexander Rusev

Front-End Developer

Matt Erickson, MentorMate PR and Social Media Manager

Matt Erickson

MentorMate Alumni

Brian Buchkosky

Global Director, PMO

David Tran, MentorMate VP of Solutions

David Tran

MentorMate Alumni

Kristin Krueger

MentorMate Alumni

Magdalena Chervenkova

Business Analyst

Denny Royal

Chief Design Officer

MentorMate Technical Account Strategist Joe Bodell

Joe Bodell

MentorMate Alumni

Viktoriya Chuchumisheva - MentorMate HR Manager

Viktoria Chuchumisheva

HR Manager

Kalina Tekelieva Headshot

Kalina Tekelieva

Senior Content Marketing Artist

Daniel Rankov profile picture

Daniel Rankov

MentorMate Alumni

MentorMate Senior Business Analyst Alexander Alexandrov

Alexander Alexandrov

BA Lead

MentorMate

Clint Rowles

VP, Business Development

Nikola Donev - SysAdmin

Nikola Donev

SysOps & DevOps Lead

Tseko Tsolov

Frontend Developer

Denislav Lefterov

Automation QA Analyst

MentorMate Content Writer Dilyana Kodjamanova

Dilyana Kodjamanova

MentorMate Alumni

MentorMate Project Manager Emma Jorstad

Emma Jorstad

Project Manager, Lead

Georgi Georgiev profile picture

Georgi Georgiev

Software Development Lead - LAMP, MentorMate

Martin Panayotov profile picture

Martin Panayotov

Senior iOS Developer, MentorMate

John Blake

John Blake

Senior Account Manager

Tyler Compton

Tyler Compton

Solutions Architect

MentorMate Software Developer Nikola Peevsk

Nikola Peevski

Software Developer — Lamp & Front-End

Aaron Whitney

Director of Client Strategy

MentorMate Senior Cloud Engineer Veliko Ivanov

Veliko Ivanov

Senior Cloud Engineer

MentorMate Senior Project Manager Suzanne O'Brien

Suzanne O’Brien

Senior Project Manager

Svetlin Stanchev profile picture

Svetlin Stanchev

Software Development Lead - Front-end, MentorMate

MentorMate Senior Cloud Engineer Todor Todorov

Todor Todorov

Senior Cloud Engineer

MentorMate Senior QA Analyst Kate Stamatova

Kate Stamatova

Senior QA Analyst

Frank Anselmo profile pic

Frank Anselmo

Global Director, Project Management

Gyuner Zeki Headshot

Gyuner Zeki

Solutions Architect

Galin Stanchev

QA Analyst

Sarah Hoops

Business Development Manager

Brenden Diehl

Business Development Manager

Anna Krivova profile picture

Anna Krivova

Software Development Lead - Front-end, MentorMate

Ivelina Kavalova profile picture

Ivelina Kavalova

Senior Business Analyst, MentorMate

Paul Sanders

MentorMate Alumni

Jim Cikanek

Senior Client Strategist

Samuil Yanovski profile picture

Samuil Yanovski

Software Development Manager - Android, MentorMate

Krasimir Gatev profile picture

Krasimir Gatev

Senior Android Developer, MentorMate

Kristina Goryalova headshot

Kristina Goryalova

Talent Acquisition Manager

Elena Petrova Headshot

Elena Petrova

HR Specialist

Jay Matre

Senior Business Architect, MentorMate

Lilyana Dimitrova

QA Specialist

Josh Marquart

Chief Strategy Officer

Mario Gorki

Senior Mobile Developer

Simeon Zhekov Headshot

Simeon Zhekov

Cloud Engineer

Hristo Stoyanov Headshot

Hristo Stoyanov

Cloud & DevOps Lead

Ben Wallace

Enterprise Architect

Boyan Stoyanov

Data & Dota Specialist

MentorMate Director of Software Engineering Petya Ivanova

Petya Ivanova

Director, Software Engineering - Java

Sebastian Ortiz-Chamorro

VP of Engineering, Latin America

Consuelo Merino profile pic

Consuelo Merino

Director of Operations

Welcome to the 21st century, where you can write javascript to create not only web pages, but also mobile applications. In this guide I will present the growing in popularity tool ionic and how to use it’s CLI to build your app.

blog-header-rev2

architecture

Ionic is a platform, or I should say, a cluster of platforms for building hybrid apps. Ionic is built on top of Angular.js. It contains some features that are 3rd party modules for Angular.js such as ui-router. It also encompasses some directives that facilitate the mobile interface development and is dependent on cordova and Angular.js. There are some strictly ionic plugins connected with the native part of the hybrid app such as the keyboard plugin. There is already a number of strictly ionic front-end only plugins/directives. Ionic makes it easy to develop an app for ios and android, as it has included default themes with native look. (We will look at material design later, the current Android native look is based on Android 4+) Ionic has also a CLI tool coupled with Cordova CLI.

overview

Requirements

To create or edit an ionic application you will need to install a certain number of additional software and CLI tools. We need to start with installing node.js and npm. Cordova also migrated to npm as well most of its plugins. Assuming we are building an Android application we will need to install Java and Android SDK. We can proceed with installing globally Cordova CLI with the command:

npm install cordova -g

The same way we install ionic CLI:

npm install ionic -g

I use standard freeware editors to create and edit my ionic applications, such as brackets, Atom, Sublime and other. Netbeans has support for Cordova apps, but I haven’t tried it yet. Another possibility is to use the Android IDE, based on Webstorm. Brackets and Sublime have additional plugins for Angular and ionic intellisense.

Initial Setup

Creating a new project can be done by running one of next commands in the console:

ionic start myApp blank – creates a sample empty application
ionic start myApp tabs – creates a sample app based on tabs navigation
ionic start myApp sidemenu – creates a sample app base on side menu navigation

Installing platforms

$ cd myApp
$ ionic platform add android
$ ionic browser add crosswalk
$ ionic build android
$ ionic run android

and for ios

$ cd myApp
$ ionic platform add ios
$ ionic build android
$ ionic emulate ios

ionic will install statusbar plugin and keyboard by default

cordova plugin add cordova-plugin-ionic-keyboard
cordova plugin add cordova-plugin-statusbar

You can install plugins with Cordova CLI

cordova plugin add cordova-plugin-camera

The good news is that you can actually save the state with both CLI’s. The advantage of the ionic CLI is that it actually saves that you have installed crosswalk and some other stuff related to the ionic services features, like app id in ionic’s system and the crosswalk version.

Saving/Restoring state

  • The cordova way to save

cordova plugin save

and

cordova platform save

  • The cordova way to restore

cordova prepare

  • The ionic way to save

ionic state save

  • The ionic way to restore

ionic state restore

So far so good

Since our apps will be Cordova based, this means that they will work with the default webview of the OS. We all know that the default Android view is not quite the same as the browser and even more, it is far away from the performance and HTML 5 APIs support of the Chrome browser. To change this, we would like to use the so called Crosswalk project. https://crosswalk-project.org/

Crosswalk

You may ask what Crosswalk is. Well, it’s an embedded Chrome webview replacing the default one in Android 4+. Basically in Android 5 you might not needed it. So what? Having Chrome webview gives the web technologies based UI to perform a lot better and gives accessibility to edge HTML5 APIs and CSS3 features, whose usage might not be possible in older Android versions. It also gives you possibility to debug live from Desktop Chrome Dev Tools which is a big advantage in comparison with the Android IDE Logcat or Eclipse.

Apple is falling back behind, the company developed a replacement for their default UIWebView. It is called WKWebView, which has a lot better support of the HTML 5 features. There is also a developed plugin for Cordova, which we could use if we want to support modern iOS devices.
Both plugins can be found in NPM repository. So far, I’m not sure if there is a CLI command for Ionic to install WKWebview, but it can be done via Cordova CLI.

https://www.npmjs.com/package/cordova-plugin-crosswalk-webview
https://www.npmjs.com/package/cordova-plugin-wkwebview

Folder structure

Everything looks like we are set up and ready to create our ionic application. Actually, there is one issue that I noticed. I see a problem with the default provided file structure of the ionic starter apps.
https://github.com/driftyco/ionic-starter-tabs/tree/master/js

Currently you will see that all the services and all the controllers are in one file – services.js and controllers.js. After reading bunch of guidelines for structuring Angular app and seeing a need of a build process, our team agreed that we need to separate things up. First of all, the www folder is used as a source for the hybrid app. The code inside should be production ready after the build process – this include minification, concatenation and obfuscation. We create another folder called dev, where we implement folder-by-feature file structure where we build our app https://github.com/johnpapa/angular-styleguide#style-y152. In many cases there could be a difference with the suggested example – layout could be called main, or we could create folder-by-view with additional folders for common code like directives and maybe services. This is done for readability, fast navigation and code organization.

Generally I prefer placing templates and controller related to them in one folder. The classic way of declaring dependencies for the controllers, services and directives often provokes errors like missing one or more dependencies. Another way to declare the dependencies in the $inject clause per component, but this can also lead to same errors. To avoid such mistakes I use one feature that comes with the build process, I rely on our build script to inject dependencies, by just adding /* @ngInject */ before controllers, services and other dependency injectable objects. The controllers and routes will be structured with controller As ‘vm’ https://github.com/johnpapa/angular-styleguide#style-y032 and other recommended styles for Angular components from John Papa.

Prepare for build

Our ionic app already has a gulp build script, so we are going to use Gulp and make heavy modifications on the script. For the purpose of our build script we will use a number of gulp modules, that can be found on http://npmjs.org

  • gulp – the gulp CLI;
  • gulp-cheerio – this is a plugin for gulp which allows you to manipulate HTML and XML files using cheerio (somewhat jquery on server);
  • gulp-concat – we will use it to concat files;
  • gulp-dom-src – can create a stream of files from an HTML file, reading it’s script and/or links tags. This frequently is used when we use dependencies that don’t have scss file in the source folder and we need to manually include them in our main html file;
  • gulp-flatten – basically used to flatten your file structure, helps with fixing the relative paths when moving content to new resulted folder. It helped us to manage the fonts and the images included in the main scss file;
  • gulp-html2js – a plugin that helps you to generate Angular.js modules from html templates;
  • gulp-minify-css – as the names says, it will minify the css files from a stream;
  • gulp-ng-annotate- this plugin will look for @ngInject and injects automatically the dependencies that were mentioned in your constructor function for directives, services and controllers;
  • gulp-rename – renames files;
  • gulp-replace – replace strings in files;
  • gulp-sass or gulp-ruby-sass – You can use one of them for building the main SCSS file, you need to keep in mind that the first is C/C++ based and is not the same implementation as the ruby based, some things might not be implemented in the C/C++ version;
  • gulp-uglify – uglify and minify javascript files;
  • run-sequence – runs a sequence of gulp tasks in the specified order;
  • shelljs – we use it to check if we have the required dependencies to run ionic, more precise to check if we have Git and Android SDK installed.

I’m not going deeper in how to write the build script, this will be presented as another topic.

Preview the app in the browser

Finally, we can see the results of our work in the browser without building an executable for our phone. There is only one drawback – you can’t check if your native plugins are working.
You just need to run ionic serve, this will open a browser window or tab. With the help of the development tools you can emulate the device you want to test on.

Facebook integration on android

This was one of the challenges. Facebook and android made it especially hard to do it.
The problem is that Facebook requires a hash key of your application. As a base of the process I used those resources:
https://developers.facebook.com/docs/facebook-login/android

In the development stage you can use the default androiddebugkey. You will not need to run the build with –release flag in order to be signed. We can export this keystore by entering in the command line:

keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%.androiddebug.keystore | openssl sha1 -binary | openssl base64

The password required is the default “android”, if you haven’t changed it.
Using the non release(debug) build we will have the ability to inspect the app via chrome://inspect.

To generate a keystore you have to run this command line

keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

There are some additional step you need to make. You need to export the generated by the above command, hash key with the following command line:

keytool -exportcert -alias my-release-key -keystore %HOMEPATH%.androidmy-release-key.keystore | openssl sha1 -binary | openssl base64

The hash printed in the console is the one you need to put in the facebook application properties.

Another addition is that ionic actually changed the hybrid app build to use gradle, which uses a different format of the building properties data, required to build a signed application. In the earlier versions it was using ant. I think this change is related to how Android apps build now. You will need this key when you decide to upload your app to the Google play store. For more detailed explanation you can check ioni’s guide of publishing an app – http://ionicframework.com/docs/guide/publishing.html

so for earlier versions we had ant.properties

key.store.password=example
key.alias.password=example
key.store=C:\Users\your.name\.android\my-release-key.keystore
key.alias=my-release-key

The new gradle format requires a file release-signing.properties with the following format

storePassword=example
keyPassword=example
storeFile=C:\Users\your.name\.android\my-release-key.keystore
keyAlias=my-release-key

For more security it is better to not include the password in the release-signing.properties, you will be prompted to input one, when building. Also keep secure your keystore, do not include it in the source control repository or in the folder structure of the project.

Building for release

When we are ready to upload to Google Play we need to build the app the the following line:

ionic build android –release

It will use our generated keystore. Keep it somewhere secure! Do not include it in the source of the app or somewhere in the repository!

Eventually when we need to release to the Play store, we will need to run through the steps 3,4 and 5 from the https://developer.android.com/tools/publishing/app-signing.html guideline.

Tags
  • Mobile
  • Development
Share
  • Share on Facebook
  • Share on LinkedIn
  • Share on Twitter
Share
  • Share on Facebook
  • Share on LinkedIn
  • Share on Twitter
Sign up for our monthly newsletter.
Sign up for our monthly newsletter.

Read what's next.

Blog

How to Write Effective Technical Tasks and User Stories

Blog

Measuring the Business Value of Technology Investments

  • Twitter
  • LinkedIn
  • Instagram
  • Facebook
United States
MentorMate1350 Lagoon Ave, Suite 800
Minneapolis
, MN 55408

+1 612 823 4000
Bulgaria
67 Prof. Tsvetan Lazarov Blvd.
Sofia 1592, Bulgaria,
+359 2 862 2632
Sweden
Drottninggatan 29
411 14 Göteborg

+46 3 199 0180
Paraguay
Carlos M. Gimenez 4855
Asunción, Paraguay

+595 21 327 9463

Copyright © 2023 MentorMate, Inc.

  • Cookies
  • Privacy
  • Terms
  • Continuity Policy
This site is registered on wpml.org as a development site.