Bypass CORS Errors When Testing APIs Locally

Anyone who has worked with a RESTful API using JavaScript knows that testing can be a complete pain if the API owner hasn’t enabled CORS on their server.  So what is CORS?  According to Wikipedia, it is the following:

Cross-origin resource sharing (CORS) is a mechanism that allows many resources (e.g., fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain the resource originated from.

Often API owners will leave CORS disabled even though their API is open to the public.  In my opinion it doesn’t feel public if the API owner is not allowing requests from all angles.

Here are a few tricks I’ve picked up in regards to bypassing the awful CORS errors you receive in your browser when testing.


Internationalization and Localization with IonicFramework and Angular Translate

There are roughly seven billion people in the world (7,000,000,000) and roughly 6,500 languages.  Lucky for us, Android and iOS does not support all 6,500 of these languages.  However, many are supported and this means that when you make an application in your native language, chances are your audience is only going to be a fraction of these people.

Recently I discovered Angular Tranlate, a JavaScript library for AngularJS.  It allows you to create translation tables in your web application to quickly switch between depending on the language you desire.  When you pair this with IonicFramework, which supports AngularJS, you have a great way of adding internationalization and localization into your mobile application.


Using An Oauth 2.0 Service With IonicFramework

Many APIs such as Google, Twitter, and Facebook require Oauth in order to use.  This can get tricky when it comes to mobile because authorization must happen externally in a web browser.  To our advantage, we can handle Oauth 2.0 using the InAppBrowser plugin for Apache Cordova.

Basic instructions on using the InAppBrowser with IonicFramework can be found in one of my earlier blog posts.  If you’re looking to use Oauth in an Ionic 2 application, visit here, otherwise proceed with Ionic Framework 1.


Launch External URLs with IonicFramework

I recently found myself needing to launch external URLs with IonicFramework.  I needed to let my users contact me via my personal website or visit my Twitter page.  This is not a task that ends well when trying to execute from an Ionic view.  Luckily, with a little help from the Apache Cordova plugin InAppBrowser, I was able to accomplish the task with very little effort.  The best part is that it works for iOS and Android with the same code set.

If you’re using Ionic 2, a special version of this article can be found here.  Otherwise enjoy this writeup for Ionic Framework 1.


Using Google Analytics With IonicFramework

Apple and Google don’t offer much in terms of analytics after an app has been downloaded.  Google will take it a step further than Apple and show how many devices have the app installed rather than just downloads, but nothing in terms of usage.  To use Google Analytics with IonicFramework, not much is required.

There is a convenient plugin created for Apache Cordova by Dan Wilson called simply Google Analytics Plugin.  With a bit of adjusting we can easily use it with AngularJS.


Using Admob With IonicFramework

Having your mobile application generate some kind of revenue is usually critical.  Not many people want to spend endless hours slaving over an app without some kind of profit.  Luckily, using IonicFramework with Apache Cordova device APIs in addition to a nifty and easy to use Admob plugin, you can take full advantage of Google Admob in your cross platform application.

To use Admob with IonicFramework we will be using the floatinghotpot Cordova plugin.

If you’re using Ionic 2, you should visit the revised tutorial I wrote to accommodate the Angular 2 differences.  Otherwise, continue for Ionic Framework 1 and AngularJS.


Check Network Connection With IonicFramework

When creating a mobile app, specifically one that makes heavy use of the internet, it is often necessary to make sure an internet connection exists at launch and possibly display a message or perform an action if one does not exist.

The following is for an Ionic Framework 1 application.  If you’re using Ionic 2, you will want to check here.

The following chunk of example code is typically found in your IonicFramework project’s js/app.js file.  It demonstrates how to check if a network connection exists on application load and how to display an Ionic popup that is nicely styled in comparison to a JavaScript alert dialog.