Series: Creating Hybrid Mobile Apps, Part 1: Introduction

In 2o16, you have many options of creating mobile apps.  To me there pretty much are only two options:

  • Native (xcode/swift/java)
  • Hybrid Mobile Apps (write once, cross deploy)

Making a native app makes sense if you are doing something fairly custom with UI or creating a game.  But hybrid mobile apps might make more sense if you are doing something simple like consuming data and displaying it.  Note that I am not an expert in this field, so I’ll try to do the best to convey what I’ve learned from research and recently making an app.

For this tutorial series, we will use Ionic 2 Beta which uses Angular 2 Beta.  Things aren’t quite 100% with Ionic 2, but it is actually good enough to launch a production app.

Another reason I think Ionic 2 is good is their extensive component UI.  This means I don’t need to build tabs, cards, menus, etc.  Check out their offerings at their components page.

Before starting we assume you are familiar with:

  • HTML
  • CSS
  • Consuming APIs
  • Experience in at least one programming language.

Simulator Screen Shot Mar 2, 2016, 4.59.43 PM
In this snapshot example, Ionic comes out of the bat with support of tabs, and cards.

 

What is a hybrid mobile app?
s1-2

At a high level, instead of coding with a native language, you code mainly in html, css, javascript, and configuration files.  There is a compilation process that takes place (which can be local or remote, but we’ll get into that later) which gives you two assets:

  • Android apk.  You can use this and install it directly on your device and then upload it to the Google Play Store.
  • IOS .ipa file.  You can install the .ipa to your iPhone or iPad on iTunes for testing then upload it via ‘Application Coder’ on the mac.

 

Platform Requirements:
s1-3

When developing, you have two options:

Mac
I think a mac is probably the best options.  The reason is that you can generate the apk and ipa locally and run emulation to test the apps.

PC
If you have Windows, I recommend that you run Ubuntu to run your development.  From there, what you can do is use Phonegap to remotely compile your code.  From there you can download your .apk and .ipa.

Note that if you have a PC, you do need a Mac to take screen snapshots for each platform and submit your .ipa via ‘Application Loader’.  If you don’t have a Mac available, you could use mac in cloud.

Development

Developing a hybrid app is a little bit different than doing a full stack like Ruby on Rails.

s1-4a

  • Text Editor – All your work starts off with your standard text editor.  You could use anything like Eclipse, but for this example I have been using Sublime .
  • Compile and test on browser – Similar to running ‘rails s’, you can run ‘ionic serve’.  What this does is transplies (not compilation as it doesn’t go into a vm) and binds port 8100 to a webserver.  What you can now do is test your app in the browser.  However you won’t have access to native features such as the camera, uuid, etc.
  • Emulator – If you are running on a Mac, you can run ‘ionic emulate ios’ which launches an emulator.  This is a little better than running it in a browser, but still misses some native functionality.
  • Build – Here you actually generate the .ipa or .apk to load on your native device.  You can build it locally or use Phonegap.

When developing, my advice is to not wait until the very last minute to test your app on an iPhone and android device.  There are often weird things that happen and you don’t want to get hit last minute with weird errors.

API

s1-5

Most likely your mobile app will fall into one of two situations

  • No API Access – This is an app which is completely offline and can rely on all of the local storage (SQlite, etc).
  • API Access – This is the most common scenario where an app hits an API to get data.

For this tutorial, we will assume you have an API already that works.  My only recommendation is to have two environments for your API.  Development and production.

Here is part 2 where we will start installing the environment and create a new project.

 

 

 

Subscribe to our newsletter to get notified of new articles in the Ionic 2/Tutorial Series!

[mc4wp_form id=”47″]