Ionic Framework 101: A Quickstart to Building Mobile Apps

So after a lot of thinking about it I finally dedicated some time to creating my first ever Ionic Framework course! The title of the course is Ionic Framework 101: A Quickstart to Building Mobile Apps and it can be found on the learning service Udemy.

A little background on what I hoped to accomplish in this quickstart course.

Upcoming Presentation: Silicon Valley Code Camp 2015

In case you’re interested in seeing me present on Node.js or Ionic Framework and Couchbase, I’ll be giving two talks at the free to attend Silicon Valley Code Camp in San Jose, California. It is the weekend of October 3rd to October 4th.

The title of my talks are Quick and Easy Development with Node.js and Couchbase Server and Cross Platform Storage & Sync with Couchbase and Ionic Framework. The abstracts for both these talks can be seen below.

Support iBeacons In Your Ionic Framework Mobile App

I recently picked up some Estimote iBeacons to play around with and figured I’d try to get them working in an Ionic Framework Android and iOS application.

If you’re unfamiliar with iBeacons, they are small bluetooth proximity devices. There are many different manufacturers, but Estimote appears to have the best advertised battery life and durability. iBeacons generally broadcast a signal every 100ms to 1000ms depending on the configuration or brand. The broadcast signal contains a UUID and two numeric identifiers which are a major and minor version.

Before I get into the code I’ll share a few possible use cases for iBeacons:

1. Triggering some literature or audio when your device detects that you’re near a particular iBeacon in a museum. Put one near The Statue of David in Italy and bam, you could have information about it when you approach it.
2. Tracking foot traffic in your store. Maybe you have a large store like Walmart with iBeacons in every department. You can see which department gets the most traffic.
3. Calculating how long time-wise a queue / line is for a particular ride at an amusement park based on device to beacon discovery.

There are endless other useful scenarios.

AngularJS Form Validation In Your Ionic Framework App

When developing mobile Android and iOS applications, the user experience is often more important than what your application actually offers.

A quick and very easy enhancement you can implement in your application is in the realm of form validation. Best practice says that you should always validate user inputted data via the back-end and I agree. However, by validating via the front-end as well, it can make improvements to your user experience.

Validating your Ionic Framework forms with HTML5 validators, however, is a terrible idea. It will make your user experience worse that if you had left them out. Instead, AngularJS ships with its own validators that work great in Ionic Framework mobile apps.

Using Charts In Your Ionic Framework Mobile App

I’m always trying to add more flair to the mobile applications that I develop whether it be through slick user interfaces or graphics. For a while now I’ve wanted to mess around with charts in my mobile applications, but it kept getting pushed to my development back-burner.

I decided to push myself to give it a shot. Using Ionic Framework to build mobile Android and iOS applications, you’re left with a few possibilities for adding charts because so many JavaScript libraries exist. In particular, we’re going to take a look at Chart.js and the AngularJS wrapper, Angular Chart. We’re going to look at this library because not only does it look great, but it plays nice with AngularJS which is what Ionic Framework is built upon.

Add Touch ID Authentication To Your Ionic Framework App

I recently picked up an iPad Air 2 to replace my ancient Android tablet. My first serious iOS device since my iPod Touch. A feature that I’m really growing to love on my iPad Air 2 is the touch id functionality for signing into the device and various applications.

How do we incorporate this touch id functionality into our own iOS applications? More importantly, how do we do this in Ionic Framework? It is not difficult, because we’re lucky to have an Apache Cordova plugin called cordova-plugin-touchid by Lee Crossley that does the work for us.

Using A Pin Dialog In Your Ionic Framework Mobile App

One of my Twitter followers recently asked me how to properly use a pin dialog in their Ionic Framework mobile application. Although I’ve already created a similar article regarding creating a pin unlock screen in an Ionic Framework application, I figured it might be a good idea to show how to do this with an actual dialog instead.

Using the Apache Cordova PinDialog plugin by Paldom we can use native dialogs in our application and accept passwords.