Getting Started with ngCordova

In this post, we will take a quick dip into ngCordova and Ionic Framework. We will take a look at setting up ngCordova with IonicFramework, add adding a few cordova plugins and testing it out on a device.

This post is not limited to IonicFramework. You can use the same knowledge with Onsen UI or any mobile hybrid application that is powered by Angularjs.

We are not going to build any specific app, but we will add a few plugins to a demo app and see how it works. This would be the list of plugins we would test drive

Screenshot_2015-03-08-18-52-26

You can find the complete code here. You can use this repo to submit the app we create to Phonegap Build Service.

So, let us get started.

Prerequisites

Before we proceed, you need to have a good understanding of Angularjs, IonicFramework or Onsen UI and Phonegap/Cordova.

Since we are going to work with device specific features, you would need an actual device to test your code. This setup will not run in a browser. Some of the features we are working on, may work on an emulator. Make sure you have setup everything on your machine so you can deploy the code to your device. You can refer PhoneGap 3 CLI Setup on Mac & Windows for more information.

Also, we will be using bower to add ngCordova to our project. Make sure you have git installed on your machine and run

npm install -g bower

Setup Project

Assuming that you have already done

npm install -g cordova ionic

We will scaffold a new Ionic app. Create a new folder named ionCordova. Open a new terminal/prompt here and run

ionic start ionCordova sidemenu

Then run

cd ionCordova

And then

ionic serve

This will launch the side menu template in your default browser.

Next, we will be deploying the app to the phone and testing the base project out. For that, we first need to add the respective platform. I have an Android device, so I will be building a project close to Android.

ionic platform add android

Next, we will install the side menu template on our device. Run

ionic run

Once the app is successfully deployed on to your device, you should see

Screenshot_2015-03-08-17-04-54

Debugging Hybrid apps on Android with Chrome

I highly recommend using  chrome://inspect (Remote Debugging on Android with Chrome) while working with Android devices. You can access your app inside the web-view and debug as if you were working with your app in a browser.

Here is a quick snapshot

Screen Shot 2015-03-08 at 17.08.19

ngCordova

ngCordova was built to help make app development faster and more efficient than ever before. It gives you simple AngularJS wrappers for the most popular Cordova and PhoneGap plugins available, where you can take a picture, scan a barcode, upload a file, turn on your flashlight, get your current location, and much more with just a few lines of code.

Pretty simple! As of today, there are around 63 plugins in the ngCordova arsenal. These wrapper make interacting with device specific features pretty easy.

Setup ngCordova

To setup ngCordova, we will be using bower. Run

bower install ngCordova --save

Next, we will add a reference to it in our index.html. Open www/index.html and update it as below

Notice line 21. ngCordova should be after ionic bundle and before cordova.js reference. This is very very important.

Test ngCordova Setup

To  test the setup, we will print the basic device information on the screen. For that, we will be using the org.apache.cordova.device plugin. This is installed by default if you scaffold an Ionic app.

If you want to explicitly add it, run

cordova plugin add org.apache.cordova.device

First we will inject ngCordova as a dependency to our app. Open www/js/app.js and update

angular.module('starter', ['ionic', 'starter.controllers'])

to

angular.module('starter', ['ionic', 'starter.controllers', 'ngCordova'])

And then, we will update our UI to show the device information. Open www/templates/playlists.html and update it as below

Finally, we will update the PlaylistsCtrl you can ignore the names for now, we will clean up later on. Open www/js/controllers.js and update it as below

Things to notice :

We have removed all the code that we are not going to use.

Line 5 : We have injected $ionicPlatform, $scope and $cordovaDevice as dependencies

Line 6 : This is very important. All your ngCordova code SHOULD be written inside  $ionicPlatform.ready(). Else you will see a lot of undefined errors.

Line 7 : This is only a precaution. There are many instance, when the $scope does not update, so we are wrapping our  $cordovaDevice features inside a  $scope.$apply() so that Angular forces a model update.

Line 11 : We get the device object from $cordovaDevice.getDevice() and from that we extract the information needed as shown from lines 13 to 17 and add it to scope.

That is it!

Save all the files and execute

ionic run

And you should see

Screenshot_2015-03-08-17-25-43

Simple and easy!

Refactor Code

Since we would be working with a set of cordova plugins, we will refactor this template.

Step 1 : Open www/templates/menu.html and update it as below

We have removed the old menu items and added a few of the plugins which we are going to test drive here.

Step 2 : Open www/js/app.js  and update it as below

Added routes for each plugin template.

Step 3 : Open www/js/controllers.js  and update it as below

Step 4 : Rename www/templates/playlists.html to device.html

Step 5 : Delete

  • www/templates/browse.html
  • www/templates/login.html
  • www/templates/playlist.html
  • www/templates/search.html

Step 6 : Create

  • www/templates/battery.html
  • www/templates/camera.html
  • www/templates/motion.html
  • www/templates/notification.html
  • www/templates/network.html
  • www/templates/pin.html
  • www/templates/share.html
  • www/templates/sqlite.html
  • www/templates/toast.html
  • www/templates/vibrate.html

And add the following code into all of them

Save all the files and execute

ionic run

The app should be deployed to your device and there should not be any change in the output. Instead, you should see the update menu

Screenshot_2015-03-08-18-52-26

Since we have already implemented the Device API, we will move on to the Battery API

Battery Plugin

Service : $cordovaBatteryStatus

The BatteryStatus plugin provides an API for the current battery status.

Add battery status Plugin

cordova plugin add org.apache.cordova.battery-status

Open www/js/controllers.js and add the below code

As always we wait for the $ionicPlatform.ready(). Then we register  status event on  $cordovaBatteryStatus. When the value changes, the callback will be called, where we set the  batteryLevel and  isPluggedIn values in scope.

But for some reason the above code does not work. The callback never gets called. But If I use the commented code, it works fine. The same code is used in Loved One Notifier.

Next, open www/templates/battery.html and update it as below

The output when you execute  ionic run,

Screenshot_2015-03-08-19-30-00

As mentioned, the battery status is never invoked.

Camera Plugin

Service : $cordovaCamera

This service makes it easy to use the org.apache.cordova.camera plugin to take pictures and video from a device.

Add Camera Plugin

cordova plugin add org.apache.cordova.camera

Open www/js/controllers.js and add the below code

We define a set of options on which the image would be captured. And when the takePicture() is called, we take a picture and once the user accepts, we show a preview on the page.

Next, open www/templates/camera.html and update it as below

The output when you execute  ionic run,

Screenshot_2015-03-08-19-41-07Once the image is captured after clicking Take a Picture button, the same image preview will appear below.

Screenshot_2015-03-08-19-43-06

Device Motion Plugin

Service : $cordovaDeviceMotion

This plugin provides access to the device’s accelerometer. The accelerometer is a motion sensor that detects the change (delta) in movement relative to the current device orientation, in three dimensions along the x, y, and z axis.

Add Device Motion Plugin

cordova plugin add org.apache.cordova.device-motion

Open www/js/controllers.js and add the below code

The logic is pretty straight forward. On line 4, we get the Acceleration at that moment. And on line 21, we keep watching the acceleration params and update the UI accordingly.

Next, open www/templates/motion.html and update it as below

The output when you execute  ionic run,

Screenshot_2015-03-08-19-57-59

Notification Plugin

Service : $cordovaLocalNotification

The essential purpose of local notifications is to enable an application to inform its users that it has something for them — for example, a message or an upcoming appointment — when the application isn’t running in the foreground. They are scheduled by an application and delivered on the same device.

Add Notification Plugin

cordova plugin add de.appplant.cordova.plugin.local-notification

Open www/js/controllers.js and add the below code

A new notification can be triggered using the  $cordovaLocalNotification.add(). And the rest is taken care by cordova!

Next, open www/templates/notification.html and update it as below

The output when you execute  ionic run,

Screenshot_2015-03-08-20-15-49

And when the  notification is fired (observe the notification bar)

Screenshot_2015-03-08-20-15-58

And finally in the notification panel

Screenshot_2015-03-08-20-16-08

Network Plugin

Service : $cordovaNetwork

The essential purpose of local notifications is to enable an application to inform its users that it has something for them — for example, a message or an upcoming appointment — when the application isn’t running in the foreground. They are scheduled by an application and delivered on the same device.

Add Network Plugin

cordova plugin add org.apache.cordova.network-information

Open www/js/controllers.js and add the below code

Next, open www/templates/network.html and update it as below

The output when you execute  ionic run,

Screenshot_2015-03-08-20-31-47

Pin Dialog Plugin

Service : $cordovaPinDialog

PhoneGap numeric password dialog plugin for Android and iOS.

Add Pin Dialog Plugin

cordova plugin add https://github.com/Paldom/PinDialog.git

Open www/js/controllers.js and add the below code

When the page loads, we show a pin dialog. The user enters a Pin to access the app. Here you can grant access or reject access to the screen based on this logic. For this demo, once the user enters a pin, we show it to the user in a dialog and then print it on the screen.

Next, open www/templates/pin.html and update it as below

The output when you execute  ionic run,

Screenshot_2015-03-08-20-48-05

Screenshot_2015-03-08-20-48-23Social Sharing Plugin

Service : $cordovaSocialSharing

Share images, text, messages via Facebook, Twitter, Email, SMS, WhatsApp, etc using this plugin.

Support

Screen Shot 2015-03-08 at 21.18.17

Add Social Share Plugin

cordova plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git

Open www/js/controllers.js and add the below code

The nativeShare()  invokes the  $cordovaSocialSharing.share() which triggers the native share sheet. When the user selects an app to share the code with, the message, subject and link will be passed on based on the selected app.

Next, open www/templates/share.html and update it as below

The output when you execute  ionic run,

Screenshot_2015-03-08-21-25-46 Screenshot_2015-03-08-21-25-56 Screenshot_2015-03-08-21-26-14

SQLite Plugin

Service : $cordovaSQLite

Native interface to sqlite in a Cordova/PhoneGap plugin for Android/iOS/WP(8), with HTML5 Web SQL API

Add SQLite Plugin

cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin.git

Open www/js/controllers.js and add the below code

You can know more on how to work with SQLite here. The above code is a excerpt of the same. It creates a new table and adds some data.

Next, open www/templates/sqlite.html and update it as below

The output when you execute  ionic run,

Screenshot_2015-03-08-21-58-27Toast Plugin

Service : $cordovaToast

This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It’s great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.

Add Toast Plugin

cordova plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git

Open www/js/controllers.js and add the below code

Simple API to show toasts, with duration and position.

Next, open www/templates/toast.html and update it as below

The output when you execute  ionic run,

Screenshot_2015-03-08-22-06-34 Screenshot_2015-03-08-22-06-48Vibrate Plugin

Service : $cordovaVibration

Vibrate the device programatically.

Add Vibrate Plugin

cordova plugin add org.apache.cordova.vibration

Open www/js/controllers.js and add the below code

Using the $cordovaVibration.vibrate()  we show a simple vibration pattern.

Next, open www/templates/vibrate.html and update it as below

The output when you execute  ionic run,

Screenshot_2015-03-08-22-17-28Don’t ask how the above image proves that the device vibrates when clicked on the button. You have to take my word for it!

With this, we have test driven a few ngCordova plugins and seen how they can be used. The ngCordova docs are pretty good. You can rely on them quite well for results.

If you are facing issue, do post a comment, but before that please check this guide. Hope this post gave you a decent idea on how to work with ngCordova.


Thanks for reading! Do comment.
@arvindr21

Getting Started with Phonegap Desktop App (v0.1.1 Beta)

In this post, we will take a look at building Mobile Hybrid application using the new Phonegaps’s Desktop App. We will download the installer, setup a hello world project and deploy it to our mobile and test it.

A quick sneak peek on how the Phonegap Desktop App works

So, let us get started.

Why Phonegap Desktop App?

Because it is easy to use.

The PhoneGap Desktop App is the easiest way to get started with PhoneGap. It’s an alternative to the PhoneGap CLI, yet it uses the same libraries under-the-hood.

There’s no complicated installation. You don’t need git, npm, or even node.js. We include all of the important parts for you, so that you can focus on creating your next app!

With this, you can focus on the actual app development and not worry about the environment.

We will look at a 5 step process on how to start working with Phonegap Desktop app.

Step 1 : Download App

The app can be downloaded from the Phonegap Desktop app Github repo. As of today version v0.1.1 beta is the stable release and v0.1.2 beta is the pre-release. You can download the zip file for your OS (Windows/Mac) from here.

Unzip the OS specific zip file and you will find the .app file incase of Mac and .exe incase of Windows. Launch the app by double clicking on the executable.

Step 2 : Creating a new Phonegap Project

Once you launch the Phonegap desktop app, the interface would look like

Screen Shot 2015-02-25 at 19.49.45The panel on the left hand side is the main menu for the app.

Click on the + icon and you should see

Screen Shot 2015-02-25 at 19.51.50

Click on Create new PhoneGap Project and you should see

Screen Shot 2015-02-25 at 19.53.58Local path is the location on your disk where the project should get created. Name would be the name of the app. ID is the unique reverse domain name, that acts as an  identifier for your app across app stores.

Once you fill it, you can click on Create Project. And now, when you head back to the location you have created the project, you can see the project created.

If you are familiar with Cordova or Phonegap development, you will recognize the folder structure.

Screen Shot 2015-02-25 at 19.57.28And when you go back to the Phonegap Desktop app, you should see

Screen Shot 2015-02-25 at 19.59.40As you can see, the server has started at the given IP address (at the bottom of the screen).

Step 3 : Install the Phonegap Developer App

Navigate to the Download section of app.phonegap.com and install the app on your device.

Step 4 : Connect Desktop App with Mobile App

Once the mobile app is installed, open the same and you should see

Screenshot_2015-02-26-13-20-07Once the app is loaded, you can enter the IP address & port from the desktop app

Screenshot_2015-02-26-13-20-35and hit connect. At this time, the mobile app will fetch the assets needed to run our Hello World app.

Screenshot_2015-02-26-13-22-19Finally the app launches

Screenshot_2015-02-26-13-22-39and the app works!

Screenshot_2015-02-26-13-25-14Simple and easy right!

Now if you go back to the Phonegap Desktop app and click on the console icon, you can see the logs

Screen Shot 2015-02-26 at 13.35.28Step 5: Develop the application

Now, the awesome part, you can make changes to the code on your desktop and the changed would reflect on the device.

Hope this post gave you an idea on how to develop Hybrid apps with Phonegap Desktop app.


Thanks for reading! Do comment.
@arvindr21

Web Speech API, Phonegap and Phonegap build – A Smart Mouth App

Imagine you are on a vacation to Paris and you do not know how to speak French! Wouldn’t that be a big bummer? What if, there was an App that can speak french on your behalf?

Sounds intriguing right?

I got this idea from Eric Bidelman’s demo on the Web Speech API

Note : The Web Speech API starts @ 30 minutes into the video

So, I wanted to replicate this idea as a hybrid mobile app. But because of the poor webview support for Web Speech API, I was looking around for a polyfill.

I found a polyfill named speech-synthesis which works awesome on browsers, but unfortunately it does not on webviews!

So I forked the repo and patched it with a fix, so it works for webviews as well.

The issue was with the audio tag, which was not working on the device. Tried a couple of hacks but nothing seemed to work. I added a patch so that the polyfill uses Cordova Media API instead of the HTML5 Audio tag and Bam!! it started working.

The patched repo is called speech-synthesis-cordova. And we are going to use the same in this post.

Below is quick peak of the app

Awesome right! Getting one more step closer to my robot butler Jarvis!

You can find the completed code here.

So let us get started.

Prerequisites

If you are new to PhoneGap and have not set up or used it before I would recommend going through the below

If you are new to Web Speech API, you can check out Getting Started with Web Speech API.

Understanding the polyfill

If the Web Speech API is available in your browser, the Web Speech API will be used to convert text to speech. Else, the polyfill will make a request to Google Translate and then play that media.

In our case, we will be playing the response from the Google Translate using Cordova’s Media API.

Setup Project

Make sure you have followed PhoneGap 3 CLI Setup on Mac & Windows and set up Phonegap on your machine.

Next, create a new folder named smartMouthApp. Open a new terminal/prompt here and run

phonegap create smartMouth       

This will create a new Phonegap project. Once the setup is done, we need to CD into the smartMouth folder. And then we will add the Media API plugin. Run

cd smartMouth

phonegap plugin add org.apache.cordova.media

This should take care of plugin dependency.

Next, we need to move the config.xml from the root of smartMouth folder to inside www folder. This is more of a Phonegap build dependency.

Once you move the config.xml into the www folder, open it up in your favorite editor. And update the essential details like

Do notice line 11. We have added the plugin dependency here.

Next, to manage our client side dependency, we will use bower. If you have not installed bower yet, you can do so by running

npm install bower -g

Now CD into the www folder. We will init a new bower.json file. Run

bower init 

and fill it up as

Create another file at the root of www  folder and name it .bowerrc. This file consist of the bower configs. Update .bowerrc file as below

Now, we will add the dependencies to bower.json. Add the below section to the bower.json

and then run

bower install

This will download the required dependencies and save it inside the www/libs folder.

Note : DO NOT forget to remove the unwanted files before submitting the app to Phonegap build.

Now all the dependencies are set up, we will begin the actual app development.

Begin Development

The idea of the App is simple, a user will enter text and select a language. The app will go to Google Translate and then get the translated text. Once this comes back, the polyfill will read it out loud to the user.

First, open www/index.html. We will add references to the downloaded libs. The updated index.html would be

Now, we will update the js/index.js with the app logic. Open it up in your favorite editor and update it as below

Things to notice

Line 39 : Gets triggered when the device is ready.

Line 40,41 : Init the polyfill

Line 43 : When the user clicks on translate button, we check if the text is valid on line 48 and then make an Ajax call to translate.google.com to get the translation for the text.

Line 46 : In case the text is empty we warn the user.

Line 56 : Once the data is received, we eval it, parse it and get the translated text.

Line 58 : The translated text is show on the UI

Line 60fallbackSpeechSynthesisUtterance is called passing in the translated text to be read out loud along with the lang

Line 67 : Welcomes the user when the app launches.

Bam! That is it! Our app is ready!

Test the app

You can test the app on an emulator or by adding android/ios platforms.

phonegap install android

If you are facing issues on the device, I highly recommend using chrome inspect tool.

Phonegap Build

Now that the app is tested, we will issue a Phonegap build to generate installer.

Navigate to Phonegap Build and create a new app.

Screen Shot 2014-10-28 at 4.43.19 pm

You can either upload the www folder (only www folder is required for a phonegap build) or push the www folder to a git repo and then provide the details in the above screen.

Once your code is uploaded/synced successfully, you will see a Ready to Build button. Screen Shot 2014-10-28 at 4.47.36 pm

And once you click it, the build process will start.

Once the build is completed, you should see something like

Screen Shot 2014-10-28 at 4.49.32 pmYou can either QR the image or click on install to download the installer for your device.

This app may not be using much of the Web Speech API, but this can be a start. As more and more updates keep coming in, we can run Web Speech API without any polyfills and achieve the same results.


Thanks for reading! Do comment.
@arvindr21

Ionic, Twilio and Node Scheduler – A Reminder App – Part II [Client]

Ionic, Twilio and Node Scheduler – A Reminder App – Part II [Client]

This is the second part of the two part post on how to build a reminder app using Node scheduler, Twilio cloud API and Ionic Framework. If you did not already check out the first part, you can do so here : Ionic, Twilio and Node Scheduler – A Reminder App – Part I [Server].

To give a quick overview, we have gone through the required technologies, understood the architecture and how each component plugs into another. Then we have gone ahead and built the REST API using Node.js.

In this post, we will continue our journey toward the app. Quick reminder, this is where we are headed to!

Note : There is ~25 seconds gap between scheduling the call and the call arriving. The call start @ 01.06 mins into the video.

 

You can find the completed code here.

So, let us continue development.

Continue reading

Getting Started with Intel’s App Framework and XDK

Getting Started with Intel’s App Framework

First impression, “A Comprehensive Hybrid Mobile App development kit!“.

The guys at Intel have done an awesome job in packing everything we need to build a Hybrid Mobile app in most convenient workflow possible. In this post, we will take a look at the App framework, its components, theme’s and the invaluable XDK to build Hybrid mobile apps.

App Framework

App Framework is comprised of three parts

App Framework – a query selector library
UI – a UI/UX library for smartphone and tablets
Plugins – plugins built on top of App Framework

App Framework was built from the ground up to excel on mobile devices by being light and fast. It takes advantage of new browser features and supports valid W3C CSS selectors. User generated performance tests at jsperf.net have shown it to be faster than every other JavaScript* library available.

App Framework UI, also known as AFUI, is the only mobile framework that treats Android*, iOS*, Blackberry* and Win8* the same. In other words, AFUI does not degrade features or performance in order to resolve conflicts or bugs. For example, most frameworks consider Android* to be “broken” and ignore specific versions of that operating system or take shortcuts that perform poorly. App Framework solves these key issues to provide a clean and responsive HTML5 user interface.

Plugins are separate JavaScript libraries created to augment apps written using App Framework App Framework. Plugins provide useful features or functionality that may be outside the scope of basic applications. App Framework UI harnesses a few of the core plugins like af.scroller.js and af.css3animate.js.

Continue reading

Build Native installers using Ionic CLI from your terminal/prompt

Build Native installers using Ionic CLI

This feature has been deprecated as of Ionic CLI 1.5.5. You will not find the package option in the CLI. Refer: issuecomment-109349399

Ionic recently launched a super awesome service where you can generate native installers write from your terminal/prompt. This service is in beta phase as of Ionic version 1.1.5. In this post, we will take a quick look at how we generate native installers using this service.

We are going to use the code base from Ionic Restify MongoDB – An End to End Hybrid App post. Instead of running the final product through PhoneGap build, we will use Ionic package CLI to generate the installer.

To get started, you can get the code base from GitHub or follow the post and build it yourself. If you are fetching the code from GitHub, create a new folder named ionicPackage and download/clone the code into that folder.

Continue reading

Web Components, PhoneGap Build and WordPress – A Hybrid App for your Blog

Web Components, PhoneGap Build and WordPress

What started of as a “small experiment” ended up with me sleepless for 2 days straight.

It all started with this video

Pretty pumped up, I started off exploring the New Polymer. I used Polymer a couple of months ago and wrote a tutorial on Web Components and Polymer . Now, a lot has changed. So, super excited about the new way of developing Web Components, I quickly whipped out 3 new components (<upper-case><lower-case> and <capital-case>). Pretty basic, but gave me a decent hands on.

Then I started digging into their tutorial (a must read) and loved the way how components go hand in hand in building an actual application, yet the smaller pieces remain reusable. This got me thinking to make a Hybrid app for my blog using Web Components, PhoneGap and WordPress and this post is the on-going journey.

As of today I was not able to get the Hybrid app working on most of the devices. I was able to get it working only on an iOS emulator (did not test on iPhone/iPad device) and Android 4.4.2 (Android emulator).  but I have raised this issue with the Polymer folks.

The final app will look like

Screen Shot 2014-06-28 at 1.55.17 pm

You can take a digg at the demo here.

You can find the complete code here, the Installer source repo here and the PhoneGap installer here.

Note : I will be updating this post from time to time as things progress.

Contents

Continue reading

Onsen UI and PhoneGap – Getting Started

Onsen UI – The Answer to PhoneGap UI Development

Onsen UI – tutorial

Onsen UI – getting started

This is a getting started post on building an Onsen UI hybrid app. We will pick a simple template add a theme and then deploy the app to PhoneGap build to generate an installer.

The below screenshots are from my Samsung Galaxy Note I

Screenshots_2014-05-09-16-44-00Screenshots_2014-05-09-16-40-32Screenshots_2014-05-09-16-40-50You can download the installer from here. And if you want to submit this app to PhoneGap build, you can fork this repo.

Contents

Continue reading

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

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

Continue reading

PhoneGap 3 – Contacts API Tutorial

PhoneGap 3 – Contacts API Tutorial

This is a quick start tutorial using PhoneGap 3’s contact API. I have written another post here explaining what PhoneGap 3 is, how is to set it up & what are the key differences between PhoneGap 2.x & PhoneGap 3.x. I recommend checking that out before continuing.

Approach

  • Step 1: Create a new GitHub repo (How to? – Here).
  • Step 2: Clone the repo to local
  • Step 3: Create new PhoneGap 3 project (assuming you have completed the setup from here)
  • Step 4: Update the newly created app & test in local.
  • Step 5: Commit Changes to GitHub repo
  • Step 6: Run PhoneGap Build, Install the app & validate(How to? – Here)
  • Step 7: Make changes to our project – add jQuery Mobile Framework (Must read) & Contacts API plugin.
  • Step 8: Commit changes back to the repo
  • Step 9: Issue a PhoneGap Build & BOOOOMMM!!! Install the app & validate

So lets get started!

PS:We are going to follow Mac/Windows – Android ADT based development.

Continue reading