Author: Nikola Breznjak
This is the first in a series of posts that will teach you how to take advantage of your Web development knowledge in building hybrid applications for iOS and Android.
It should come as no big surprise that users now spend far more time in the apps on their phones, rather than surfing the Web with their mobile devices. Given this, it’s an opportune time to learn how to make your own apps._ _But where exactly do you start? Can you use some of your existing developer skills? Until recently, if you wanted to make an app for the two most popular mobile operating systems (iOS and Android) your only bet was to make the native application by using the respective SDKs. This, of course, meant that you needed to make two versions of your application; one for each OS. If you’re a solo developer, you may not be proficient in both.
For some time, developers were opting for either iOS or Android, whereas big firms had two developing departments, one for each platform. But now, with the Ionic Framework (and few others like PhoneGap,), OnsenUI,), Famo.us) you can create one application by using the skills you already have and then deploying this one codebase as an app to both iOS and Android stores.
Methods for making an app
There are three ways you can make an application for mobile devices:
As mentioned, you can make an app specifically for iOS and Android by using specific SDKs. If you want to build a native application for iOS you must:
Have a Mac computer. Sure, there are ways around it, but I don’t recommend them. For starters, a cheap Mac Mini will do just fine.
Download Xcode from the App Store.
Buy the Apple Developer license at $99 per year (if you want to publish to the App Store).
You can write the apps by using the Swift language or its predecessor, ObjectiveC. Swift is a great step up from the clunky ObjectiveC; If you ever decide to go native, make sure you go with Swift. You’ll get to know your way around it sooner than you would with ObjectiveC, especially if you have a background in Web development.
To build a native application for Android you must:
Have any computer.
Download the appropriate SDKs (we’ll cover this in the next section).
Buy the Google Developer license at $25 one time fee (if you want to publish to the Play Store).
One benefit of native applications is the speed and direct access to a native API (you don’t have to use any middleman wrappers, like in hybrid apps). On the downside, you need to build two or more applications, one for each desired platform.
Mobile website is a normal website that you visit with your phone’s browser, designed specifically to adapt to your phone’s screen. Developers once made specific sites just for mobile browsers but this proved difficult to maintain. A practice called responsive website design is now used, in which you have one HTML codebase, and you determine the look for specific devices (based on resolutions) by using the media queries. jQuery mobile is a great example of a mobile framework. Use it if you’re only making a mobile version of your Web application. A definite advantage of mobile websites is that you can update them as needed, without waiting for approval from Apple or Google. Disadvantages of include lower engagement, and less features.
A hybrid app is a basically a mobile application. It’s written with the same languages that you use when building websites, with the addition that it contains an isolated browser instance called WebView, which runs a Web application inside of a native app. Hybrid apps can access the mobile device and use the additional phone features like camera or GPS. Hybrid apps have the advantage of allowing you to access additional phone features via plugins. You can also do all development with the same set of skills used when developing normal Web applications. While it’s improving, the Web View has its limitations in terms of speed. So, it might not be best suited if you’re on a quest to make the next best game with full blown 3D graphics.
What is Ionic (and why is it so great?)
Ionic is so much more than just a UI framework. Ionic allows you to:
Generate icons and splash screens for all devices and device sizes with the single command
Instantly update your apps with code changes, even when running directly on your device, with
ionic run --livereload
Build and test iOS and Android versions side-by-side and see changes instantly with
ionic serve --lab
Share your Ionic apps with clients, customers, and testers all around the world without ever going through the App Store, with
Easily access the full native functionality of the device using ngCordova.
Also, Drifty (the team behind the Ionic framework) is building a full-stack back-end service and tools for your Ionic app like Deploy (for deploying a new version without going through Apple’s review process!). Ionic Command Line Interface (CLI) uses Cordova in the back-end and allows you to build apps for iOS and Android (just by doing
ionic build ios or
ionic build android). Ionic uses Angular as a front-end framework, so if you’re familiar with it, it will come as a bonus. They’re working closely with the Angular 2.0 team too.
Now, let’s install all the prerequisites and start using Ionic!
Installing prerequisites for Mac and Windows
We need to have Node.js and Git installed in order to install both Ionic and Cordova. If you already have these tools installed, you can skip this section and go straight to installing Ionic.
In order to download Node.js, visit http://nodejs.org/download/. Installation on Windows and Mac OS is simple, as you just have to download and run the appropriate installer and follow the familiar instructions. If you have
brew on your Mac, you can also install Node.js with
brew install node
In both cases, Node Package Manager (NPM) will be used to install other packages along with Node.js. To verify that you installed Node.js correctly on a Windows machine, run the following command in your Command prompt (or, even better, use Console 2):
You should get an output similar to:
To verify that you installed Node.js correctly on your Mac, run the above command in your Terminal (or use iTerm) and you should get a similar output as above.
In order to install Git, head here. Installation on Windows and Mac OS is as simple as it is for Node.js. You just download and run the appropriate installer and follow the familiar instructions. To verify that you installed Git correctly on your Windows/Mac machine, run the following command in your Command prompt/Terminal:
You should get an output similar to:
The most commonly used git commands are:
git help -a and
git help -g list or
git help <concept> to read about a specific subcommand or concept.
Don’t worry if you don’t know how to use Git since you won’t be needing it directly (NPM uses it download packages). However, if you’d like to learn, check out this interactive tutorial by CodeSchool.
If you’ve installed the prerequisites from the previous section, in order to install Ionic (both on Mac and Windows) you just have to run the following command:
npm install ionic cordova -g. Ionic uses Cordova in the background, thus the need for it. We’re using the -g flag here, in order to install ionic and cordova, globally. To verify that you’ve installed Ionic correctly on your Windows/Mac machine, run the following command in your Command prompt/Terminal: .
You should get an output similar to:
To verify that you’ve installed Cordova correctly on your Windows/Mac machine, run the following command in your Command prompt/Terminal:
You should get an output similar to:
If you had Node.js installed before (and haven’t used it much since), you may get a notification like this:
Please update your Node runtime to version >=0.12.x
To resolve this, update Node.js; either by re-downloading it (on Windows) or by executing the following command in the Terminal (on a Mac):
(Note: It’s not uncommon to have issues with these installation tasks. There always tends to be some older version of Node.js installed, or problems with cache and npm. Leave a comment and I’ll do my best to try to resolve your issue.)
Using Ionic CLI
If you run ionic in your Terminal/Command prompt you’ll get an output similar to the one below:
| |/ _ | ‘_ | |/ __|
| | (_) | | | | | (__
|_|___/|_| |_|_|___| CLI v1.6.4
Usage: ionic task args
Available tasks: (use
-h for more info)
upload ……… Upload an app to your Ionic account
share ………. Share an app with a client, co-worker, friend, or customer
lib ………… Gets Ionic library version or updates the Ionic library
setup ………. Configure the project with a build tool (beta)
io …………. Integrate your app with the ionic.io platform services (alpha)
push ……….. Upload APNS and GCM credentials to Ionic Push (alpha)
config ……… Set configuration variables for your ionic app (alpha)
browser …….. Add another browser for a platform (beta)
service …….. Add an Ionic service package and install any required plugins
add ………… Add an Ion, bower component, or addon to the project
remove ……… Remove an Ion, bower component, or addon from the project
list ……….. List Ions, bower components, or addons in the project
ions ……….. List available ions to add to your project
templates …… List available Ionic starter templates
info ……….. List information about the users runtime environment
help ……….. Provides help for a certain command
link ……….. Sets your Ionic App ID for your project
hooks ………. Manage your Ionic Cordova hooks
state ………. Saves or restores state of your Ionic Application using the package.json file
docs ……….. Opens up the documentation for Ionic
You get a nice summary of all the commands that you can run using the ionic CLI, along with their short descriptions. If you’re wondering what this CLI thing is, it’s actually an acronym from Command Line Interface, and in Ionic terms it’s actually a tool that makes it easier to start, build, run, and emulate, (and a lot more). In the following tutorials we will cover most of these commands, but let’s hold off on that for now.
Starting a project with Ionic by using the existing templates
Now that you’ve made it this far I promise you’re going to see some code! Ionic CLI allows us to start and initialize your project by using the
ionic start command. If you take a look at the official documentation for the start command, you’ll see something like the following definition: ionic start appname [template].
If you just run ionic start appname, the Ionic CLI will make a bootstrap application with all the needed parts in the appname folder, with the blank template. There are three named template starters including blank, sidemenu and tabs. Additionally, you can use Github repo starters and Codepen URL starters. For a comprehensive list of starter apps check out this post. In our example, we’ll use the sidemenu template, so execute the following command from your Terminal/Command prompt:
You should see something similar to this:
Your Ionic project is ready to go! Some quick tips:
cd into your project:
$ cd Ionic_1stTutorial
Set up this project to use Sass:
ionic setup sass
Develop in the browser with live reload:
Add a platform (ios or Android):
ionic platform add iOS [Android]
Note: iOS development requires OS X
See the Android Platform Guide for full : Android installation instructions
Build your app:
Simulate your app:
Run your app on a device:
Package an app using Ionic package service:
Running the Ionic application
Now that we’ve initialized our Ionic application based on the sidemenu template, we must run it in order to see what Ionic CLI generated for us. First, change the directory to the name of the application you gave in the
ionic start command. In our case, that is
In the following tutorials, we’ll spend most of the time in the www folder. Since Ionic is based on AngularJS framework, you’ll need at least a basic understanding of it. There are few ways in which you can get your Ionic application running:
ionic serve- starts the app in a local web browser
ionic emulate android- starts the app in an emulator (in this example Android is used; you can also use iOS if you’re on a Mac and have all the prerequisites installed)
ionic run android- starts the app on the actual device that’s plugged into your computer
ionic build android- creates an .apk file which you can physically copy to your Android device and run it (this scenario doesn’t work for iOS devices in normal circumstances; you have to go through Xcode, as we’ll describe in detail in the next tutorial)
Now, run the following command in your Terminal/Command prompt:
You should see the following similar output:
Also, you should get your local browser started up automatically, pointing to the address http://localhost:8100/#/app/playlists. The great thing about this is that you have automatically set up live reload feature, which means that as soon as you change the code in your www folder, the application will reload automatically. If you like, you can get this project on Github.
Here are some resources that proved indispensable when I was learning about Ionic:
For a quick framework reference, I’m suggesting the official documentation
If you’re in search for a good book about Ionic, try Ionic in Action: Hybrid Mobile Apps with Ionic and AngularJS
One of the best resources on for programming-related questions is StackOverflow. You can view the specific Ionic tagged questions here. However, I urge you to read the help page before posting questions especially if you’re a new user to StackOverflow.
To get started with AngluarJS, start here.
If you have any questions about Ionic framework, or had trouble following this tutorial, please share it in the comments below. You can also find me on Twitter @HitmanHR.
We’ve covered a lot here including how to make an app and running an Ionic application. You should now have a better understanding of Ionic framework and how to install it on both Mac and Windows. Stay tuned for upcoming posts in this series.
Here’s the link to second tutorial in this series.