(888) 685-3101 ext. 2

Introduction

Ionic is an HTML5 SDK for mobile applications using Apache Cordova, allowing developers to code in HTML, Javascript and CSS. Ionic provides out of the box components for an even faster development.

Environment Setup

For this setup, we will be configuring a Mac so we can create an Ionic project and install it in an iPhone.

Install Node JS

Using brew, we can call this command

sudo brew install node

Install Cordova and Ionic

sudo npm install -g cordova
Sudo npm install -g ionic

Test Installation

Create an Ionic template and run it by doing the code below.

cd ~
mkdir workspace
cd workspace
ionic start exampleApp tabs
cd exampleApp
ionic platform add ios
ionic serve

After you run the “serve” command, you should see something like this

ionic serve

Just point your browser to the dev URL and you should be good to go.

IDE – Sublime Text – configuring build

Once you get the need to deploy your application to your IOS device, you can do this simple configuration in Sublime to avoid you the hassle of typing in the build command for IOS.

sublime1

Go to Tools > Build System > New Build System. This will open a new pane for you to create a command to run when you invoke build in Sublime.

{
        "shell_cmd": "/Users/<MacUser>/ionic.sh"
}

This will execute the shell script ionic.sh to do the build. Your ionic.sh will look like this.

#!/bin/bash -x
cd /Users/MacUser/workspace/exampleApp;
/usr/local/bin/node /usr/local/bin/ionic build ios;

Now hit F7 and see if the build works.

Next

In the next installment Ionic Development – Part 2: Integrating Google Maps, we’ll show how to add Google Maps to your application.

Share This