Ionic Framework, Angularjs & PhoneGap Build- The Awesome Threesome!

http://thejackalofjavascript.com/ionic-angularjs-and-phonegap-build/

This is a getting started post on Ionic Framework & deploying the starter template to PhoneGap Build.

A more advance post on this topic can be found here.

When I read this article, I was pretty convinced that jQuery mobile is really killing PhoneGap & its abilities. jQuery mobile is actually awesome with its cross browser support & loading pages via Ajax, yada yada yada. But yes this is an overkill for a mobile app. We know what we are dealing with when we develop a hybrid app for a mobile. So why not use a user interface framework that will have only patches wrt mobile browsers!?

Yes, thats where Ionic fits in! Ionic is a

beautiful, open source front-end framework for developing hybrid mobile apps with HTML5.

The only reason I continued exploring Ionic was

1. Its Performance obsessed
2. Its has a built in support for AngularJS (- The mother of all SPA frameworks)
3. Most importantly its Native focused

I was sold!! And then I started diving in. And this post as mentioned earlier is a quick hands on.

Contents

• Introductions
• Set up Ionic
• Scaffold our First Ionic app
• Build & Test locally
• PhoneGap Build the app
• Troubleshooting

Introductions

This post will be oriented more towards Ionic. So let me introduce you to its counterparts.

First its Angularjs. Angularjs is a

structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly.

Angular’s data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.

You can read more here.

Next, we have PhoneGap build. PhoneGap build provides

a way for users to create mobile applications using technologies such as HTML, CSS, and Javascript.

You can read this to know more about PhoneGap, Cordova & PhoneGap Build.

Now, lets see where they fit in the big picture.

Ionic + Angular = Our web development Framework [Our Web app]

Our Web app + PhoneGap Build = Hybrid Mobile App

Set up Ionic

Ionic is setup using the node package manager. Know more about node here. Lets create a new folder called myIonicApp. Then open a terminal/prompt here & run

Windows	Mac/*nix
npm install -g ionic	sudo npm install -g ionic

Next we need to install Cordova (PhoneGap)

Windows	Mac/*nix
npm install -g cordova	sudo npm install -g cordova

Thats it!! We are all set to scaffold our first Ionic App.

Scaffold our First Ionic App

Now, we will scaffold a hello world app. This is provided by the Ionic team itself. And the app is awesome!

So back to prompt & run  ionic start myFirstIonicApp. This setup will download a repo from Github & save it to your current folder. If you face issues, you can download the same fromhere.

Once the app is downloaded, it will install a couple of plugins. And finally your folder structure should be

If you are familiar with PhoneGap or Cordova, you must have recognized the folder structure.

Build & Test App locally

If you are not familiar with how PhoneGap build works, I recommend reading this. If you have an idea of PhoneGap, Then for you, Ionic CLI (Command Line Interface) is same as the Cordova’s CLI minus all the not required cordova functionalities. Ionic CLI provides another wrapper around Cordova CLI to make things pretty easy for us.

So, we will use the ionic syntax to add a new platform to our app. Back to terminal/prompt, run

  ionic platform add ios (if you face any issues, refer this)

In case you are looking for a android based development environment, run

ionic platform add android  (if you face any issues, refer this or this)

If you are on a Mac & have setup your Xcode with ios-sim ( sudo npm install -g ios-sim), you can run

ionic emulate ios

Wait for a moment & your emulator should launch. You can click through the app & it will be something like this

   

And if you are on Windows/Mac & want to use the ADT for build, you can run

ionic emulate android 

If you run into issues, you can always open up ADT, Import as a new project and run. More info here or here. Your output should be something like

 

 

The app looks fine. No issues. Lets push this to PhoneGap Build & make a Hybrid app out of it.

PhoneGap Build the app

To do that we need a Github repo. You can find a tutorial on GitHub here. And this a quick start tutorial on how to build a PhoneGap app using PhoneGap Build.

So, lets create a new repo and call it myFirstIonicApp. Next lets clone the repo to local. Navigate to myIonicApp folder (parent of myFirstIonicApp) & create a new folder called repo. Then CD into repo folder and run   git clone << repo url>>  (the link on the bottom right hand corner or the center of the page in case there are no files in the repo). For me it would be

git clone https://github.com/arvindr21/myFirstIonicApp.git

Next, lets copy all the files from myFirstIonicApp to repo. If you are following this tutorial & using a Mac OS, then you can run

ditto ../myFirstIonicApp/ ./myFirstIonicApp/

This will copy all the files from our source folder, where we scaffolded the project to the github folder. The only reason we did not do this first is because, I wanted to keep the focus on Ionic than on the ripples around it.

PS: Instead of copying, you can also scaffold your project here and continue (since we have not made any changes to the code).

Now, we will push the files to GitHub repo. Run

git add .

git commit -a -m "Initial Commit"

git push origin master

Now, head back to the GitHub repo & refresh the page. You should see the newly added files. Copy the repo url from the the bottom right hand side of the page.

Next lets head to PhoneGap Build. Create a new app

paste the Git repo url here. After a few moments of processing, you will see a screen like

Click on Ready to Build. Once the build is completed. you can download the device specific installer and install your app & test it.

Hope this tutorial helped you in gaining some perspective on building a hybrid app with Ionic & PhoneGap Build.

You can expect a post on Getting started with Ionic soon.

TroubleShooting

I have faced some issues while deploying the app. If you are too, you can follow this.

---

Thanks for reading! Do comment.
@arvindr21