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

Tweet about this on TwitterShare on LinkedIn1Share on Google+10Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

Ionic Framework, Angularjs & PhoneGap

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

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 from here.

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

Screen Shot 2014-03-10 at 11.26.54 PMIf 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

Screen Shot 2014-03-11 at 12.18.01 AM Screen Shot 2014-03-11 at 12.18.11 AM Screen Shot 2014-03-11 at 12.18.29 AM Screen Shot 2014-03-11 at 12.18.54 AM

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

Screen Shot 2014-03-11 at 12.31.51 AM Screen Shot 2014-03-11 at 12.32.15 AM

Screen Shot 2014-03-11 at 12.32.30 AM Screen Shot 2014-03-11 at 12.32.36 AM

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

Screen Shot 2014-03-11 at 1.01.16 AMpaste the Git repo url here. After a few moments of processing, you will see a screen like

Screen Shot 2014-03-11 at 1.03.24 AMClick 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

 

Tweet about this on TwitterShare on LinkedIn1Share on Google+10Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page
  • Akhilesh Bamhore

    Hi, Can you tell me the way to show loading spinner over splash screen using ionicframework or ng-cordova.

  • Christopher

    Great article, thanks!

  • Julien Mariethoz

    This is a nice, well structured, and well presented tutorial… that makes it easy to read follow. By the way, when the app is build and tested, how to you push it to the app stores?

  • bhavya

    hii
    mr.aravind
    i am getting an error in reading configuration file
    when i run ionic platform add android

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Hello Bhavya, You need CD into the folder where you have scaffolded the project and run

      Thanks.

  • http://www.josuevelazquez.com/ Miguel Josue Velazquez

    Very well laid out tutorial!!
    The troubleshooting link is not working though.
    Thanks! I needed an explanation like this one!

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks @migueljosuevelazquez:disqus Looks like the short link service is not working. Fixed the link.

  • http://hrsalazar.com hrsalazar

    Greate tutorial mate … Thanks

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks @hrsalazar:disqus

  • Ramasamy

    Hi i having one issue in ionic loading..it is behaving like async i want solution for this issue.http://codepen.io/anon/pen/rduBv the loading is behaving like an async call can you please suggest solution for this.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Hi Ramasamy, I did not quite get the issue with $ionicLoading loading async. Is there any specific use case you are trying to achieve?

      A realtime example of showing/hiding loading overlays can be found here: http://arvindr21.github.io/BucketListApp

      Thanks.

  • SubjectiveEffect

    Hi Arvind. Did you ever try using Ionic with Phongap Build without installing with the command line tools? It seems it should be possible with just the beta download from the Ionic site but I’m having trouble with it.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      @SubjectiveEffect:disqus Technically you would need Ionic/PhoneGap/Cordova tools if you are planning to consume native mobile features. To develop simple REST driven apps, all you need is the config.xml. And then you can push the folder with config.xml to Phonegap Build to generate native installers.

      Coming to Ionic beta (v1.0.0-beta.9), it is just a package consisting of Ionic resources. If you would want to build a REST app, you can use these resources. But if you want to consume native features like contacts, battery etc.. you would need Ionic/Phonegap/Cordova setup. And also Ionic CLI (command line tools) have a few scaffolding templates too as well as a subset of Phonegap/Cordova tools for native app development.

      Let me know, if I have answered your question.

      • SubjectiveEffect

        Thanks for replying Arvind. I already use jQuery Mobile and PhoneGap Build together so I’m familiar with the PGB config.xml and using native features.

        I think I’ve worked out where my problem was – you have to specify (with Ionic) that you are creating an ng-app or the components don’t work. And I’d rather scaffold my own apps (or use examples such as in the Ionic tutorials or Codepen).

        My problem was there is no information about building Ionic apps with the beta and PhoneGap Build anywhere. All the tutorials are aimed at using the command line and I think this is a. totally unnecessary and b. fraught with problems because (as you can see in the Ionic forums) it doesn’t go smoothly for a lot of people (myself included).

        I think the world needs a tutorial explaining how to start creating Ionic apps with PGB and no command line involvement.

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          @SubjectiveEffect:disqus understand your concerns. I will whip out a tutorial soon. Thanks.

  • http://thejackalofjavascript.com/ Arvind Ravulavaru

    Yes, that is for showing the splash screen & app icons for different devices. Incase your app doesn’t need one, you can get rid of the screens folder and update the config.xml.

    You can read more about icons and splash screens here: http://docs.phonegap.com/en/3.4.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

  • Lala

    Thanks, very much Arvind,
    that’s correct due to res folder in www size become heavier now it’s 2.4 MB.
    can you tell me when res folder is needed inside www? is it for for phonegap build right?

  • Lala

    Hi Arvind,
    It’s really helpful blog and I am done with this.

    But,what about the size of application, went through the same tutorial and ipa becomes 9.8MB, tell me if i am going wrong somewhere.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Hello Lala,

      Thanks much. Really appreciate it.

      Are you checking the size of the entire app folder? i.e. right from myFirstIonicApp?

      The only folder you need for PhoneGap build is the www folder, the remaining folders are for development only.

      Thanks,
      Arvind.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      If you did see, www/res folder will consists of icons for almost all devices. This folder alone is 7.5 MB. You can remove the icons & screens (splash screen) for devices you are not targeting. That should take care of the size issue.