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 even faster development.
Environment Setup
For this setup, we will be configuring a Mac so we can create an Ionic project and install it on 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
Just point your browser to the dev URL and you should be good to go.
IDE – Sublime Text – configuring build
Once you get need to deploy your application to your IOS device, you can do this simple configuration in Sublime to avoid the hassle of typing in the build command for IOS.
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.