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



Native app



Mobile website



Hybrid 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

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.

Hybrid app

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 ionic resources



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 ionic share



Easily access the full native functionality of the device using ngCordova.



ionic build ios

ionic build android

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 doingor). 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.

Installing Node.js

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











node -v















v0.12.7







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.

Installing Git

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:











git















usage: git [--version] [--help] [-C <path>] [-c name=value]

[--exec-path[=<path>]] [--html-path] [--man-path] [--info-path]

[-p|--paginate|--no-pager] [--no-replace-objects] [--bare]

[--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>]

<command> [<args>]















add Add file contents to the index

bisect Find by binary search the change that introduced a bug

branch List, create, or delete branches

checkout Checkout a branch or paths to the working tree

clone Clone a repository into a new directory

commit Record changes to the repository

diff Show changes between commits, commit and working tree, etc

fetch Download objects and refs from another repository

grep Print lines matching a pattern

init Create an empty Git repository or reinitialize an existing one

log Show commit logs

merge Join two or more development histories together

mv Move or rename a file, a directory, or a symlink

pull Fetch from and integrate with another repository or a local branch

push Update remote refs along with associated objects

rebase Forward-port local commits to the updated upstream head

reset Reset current HEAD to the specified state

rm Remove files from the working tree and from the index

show Show various types of objects

status Show the working tree status

tag Create, list, delete or verify a tag object signed with GPG







git help -a

git help -g

git help <concept>

You should get an output similar to:The most commonly used git commands are:Also,andlist orto 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.

Installing Ionic

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











ionic -v















1.6.4















cordova -v















4.2.0















******************************************************

Upgrade warning - for the CLI to run correctly,it is highly suggested to upgrade the following: Please update your Node runtime to version >=0.12.x

******************************************************















brew update; brew upgrade node







Using Ionic CLI

ionic









> ionic _ _ (_) (_) _ ___ _ __ _ ___

| |/ _ \| '_ \| |/ __|

| | (_) | | | | | (__

|_|\___/|_| |_|_|\___| CLI v1.6.4 Usage: ionic task args







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: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.)If you runin your Terminal/Command prompt you’ll get an output similar to the one below:=======================

Available tasks: (use -help or -h for more info)











start .......... Starts a new Ionic project in the specified PATH

serve .......... Start a local development server for app dev/testing

platform ....... Add platform target for building an Ionic app

run ............ Run an Ionic project on a connected device

emulate ........ Emulate an Ionic project on a simulator or emulator

build .......... Locally build an Ionic project for a given platform

plugin ......... Add a Cordova plugin

resources ...... Automatically create icon and splash screen resources (beta)Put your images in the ./resources directory, named splash or icon. Accepted file types are .png, .ai, and .psd. Icons should be 192x192 px without rounded corners. Splashscreens should be 2208x2208 px, with the image centered in the middle. 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







Starting a project with Ionic by using the existing templates

ionic start

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











ionic start Ionic_1stTutorial sidemenu















C:\Users\Nikola\Desktop\IonicTesting>ionic start Ionic_1stTutorial sidemenu

Creating Ionic app in folder C:\Users\Nikola\Desktop\IonicTesting\Ionic_1stTutorial based on sidemenu project

Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip

[=============================] 100% 0.0s

Downloading: https://github.com/driftyco/ionic-starter-sidemenu/archive/master.zip

[=============================] 100% 0.0s

Updated the hooks directory to have execute permissions

Update Config.xml

Initializing cordova project









cd into your project: $ cd Ionic_1stTutorial



Set up this project to use Sass: ionic setup sass



Develop in the browser with live reload: ionic serve



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



Simulate your app: ionic emulate



Run your app on a device: ionic run



Package an app using Ionic package service: ionic package



Running the Ionic application

ionic start









Ionic_1stTutorial















C:\Users\Nikola\Desktop\IonicTesting>cd Ionic_1stTutorial

C:\Users\Nikola\Desktop\IonicTesting\Ionic_1stTutorial>









ionic serve - starts the app in a local web browser

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

- 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

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











ionic serve















C:\Users\Nikola\Desktop\IonicTesting\Ionic_1stTutorial>ionic serve

Running live reload server: http://localhost:35729

Watching : [ 'www/**/*', '!www/lib/**/*' ]

Running dev server: http://localhost:8100

Ionic server commands, enter:

restart or r to restart the client app from the root

goto or g and a url to have the app navigate to the given url

consolelogs or c to enable/disable console log output

serverlogs or s to enable/disable server log output

quit or q to shutdown the server and exitionic $







Additional resources



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.



Takeaway

You should see something similar to this:Your Ionic project is ready to go! Some quick tips:For more help using ionic help or ionic docs, visit the Ionic docs . You can also add push notifications to your Ionic app with Ionic Push (alpha).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 thecommand. In our case, that isIn 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: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: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.