How to get started with Ionic framework on Mac and Windows

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:

• Native app


• Mobile website


• Hybrid app

Native app

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.

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.

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

You should get an output similar to:

v0.12.7

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

You should get an output similar to:

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

The most commonly used git commands are:

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

Also, 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.

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

You should get an output similar to:

1.6.4

To verify that you've installed Cordova correctly on your Windows/Mac machine, run the following command in your Command prompt/Terminal:

cordova -v

You should get an output similar to:

4.2.0

If you had Node.js installed before (and haven't used it much since), you may get a notification like this:

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

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

brew update; brew upgrade node

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

> ionic _             _ (_)           (_) _  ___  _ __  _  ___ | |/ _ \| '_ \| |/ __| | | (_) | | | | | (__ |_|\___/|_| |_|_|\___|  CLI v1.6.4 Usage: ionic task args

=======================

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

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:

ionic start Ionic_1stTutorial sidemenu

You should see something similar to this:

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

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

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

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

Ionic_1stTutorial

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

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:

ionic serve

You should see the following similar output:

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 $

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.

Additional resources

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.

Takeaway

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.