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.

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.

Monitor Device Battery Status Using Ionic Framework

So you’re making a mobile app using Ionic Framework and you care about the experience your users receive? Maybe you want to control the functionality of certain features based on how much battery the users device has left.

An example of this is, maybe you have your application pulling remote data while the application is open. Maybe you’ve decided that if your users battery is less than 30% you want the user to have to pull-to-refresh in order to preserve battery life.

This kind of battery monitoring can be performed through the cordova-plugin-battery-status plugin by Apache Cordova.

Override The AngularJS Exception Handler

AngularJS is one of the hottest things around right now. Maybe you’re finding yourself getting pretty deep in its greatness and you’re ready to customize how exceptions are handled by default.

Lucky for us there is a way to override the default functionality and do whatever we want when an error happens.

Use RegEx To Analyze Credit Card Numbers In JavaScript

RegEx is a powerful beast. Previously I wrote how to test password strength using JavaScript and regular expressions. This time we’ll take a look at how to check credit card providers based on the credit card number entered. No, this won’t test if a credit card number is legitimate, but it will test if it was entered correctly.

Highlight Text In A String Using JavaScript And AngularJS

Have you ever wanted to highlight text in a string on a web page using AngularJS? If your answer was no, don’t disregard, because you may one day need to. The good thing is this is not very hard to accomplish.

There are many ways to do this using JavaScript, but we’re only going to examine one of those methods.

Using AngularJS and a few regular expressions (RegEx) with JavaScript, you can find text in a string and then apply your own customizations.