Creating professional multi-page hybrid mobile applications

Follow this series as we investigate steroids, appgyver and supersonic

Authors – Emile Boshoff, Stuart Jacobs, Graham Grobler

Introduction

Follow this series as we investigate new emerging mobile technologies.

In the last 15 years, mobile phones have taken over the market and so have the technology used to build software. Android have taken the lion’s share of the market followed by IOS and smaller coverage on blackberry and windows based phones.

Period	Android	iOS	Win	BB	Others
2015	78.0%	18.3%	2.7%	0.3%	0.7%
2014	81.2%	15.2%	2.5%	0.5%	0.7%
2013	75.5%	16.9%	3.2%	2.9%	1.5%
2012	59.2%	22.9%	2.0%	6.3%	9.5%

The problems we face as developers are:

• • Time, resources and consistency to create native apps for each of the operating systems.
  • Hybrid application performance and cross-platform compatibility issues.
  • Steep learning curve and ongoing development support.

In 2009, Angular emerged as a very promising javascript framework for web based applications and finally the speed of web applications increased dramatically with the ability to add server-side logic in the front end.

Combining Angular with PhoneGap and Ionic acts as a wrapper for Android and IOS Apps. This works great as a single page mobile application but as we all strive for perfection the response time and complexity with larger applications quickly become substandard to native build applications.

So with this in mind we are going to have a look at creating a hybrid app for Android and IOS with true native capabilities and a restructured approach of multi-page applications

The technologies we are going to use are:

• • • Appgyver (wrapper with 3-way data binding)
    • Supersonic (Cordova / Ionic fork with native capabilities)
    • Node js, grunt, bower
    • Steroids (build engine)

Let’s get started

We will begin to create a standard steroids seed project in this blog and compare the project structure with that of a plain angular and ionic seed, then proceed to build a professional mobile app with some nice bells and whistles with the rest of the series.

Assumption

The assumption is that you have experience with javascript and angular, or at least some knowledge of the technologies mentioned above.

If you have not installed nodejs or Git yet please do so – Nodejs; Git.

Start by installing steroids globally

For this tutorial, I will install steroids on my root directory.

Open your terminal as admin and go to your c:\ drive

cd/

Install steroids globally

npm install -g steroids

Create your project

Scaffold the steroids seed project by running the following command:
[I have called it symapp for the purpose of this tutorial]

Install steroids globally

steroids create symapp --save

This will create a directory and scaffold a seed project.

When the scaffolding tools prompt what you want to create, select multi-page application.

When prompted javaScript or coffeeScript, select javascript.

Login to Appgyver service

If your are running the project for the 1st time you will need login to the appgyver service, this will give you access to the build service and ability to deploy your app to each framework for secure ad-hoc distribution or public cloud distribution. You will need to create a free account on the appgyver website.

Run the following command and login when the browser opens

steroids login

If you get an error message stating that steroids is not a recognised command run the following again in the directory, you installed the seed project.

npm install steroids -g

Developer preview

Once you have connected to the appgyver service you can start to develop your app while watching live changes on your phone.

Run the following

steroids connect --livereload

This will open the following browser page with a QR code to scan.

Download Appgyver Scanner

You can get it from both the app store and google play store.

When you have installed the scanner open the app and scan the QR code created in your browser. This will download and open your app.

Play around with the tabs and buttons to get a feel of the native capabilities.

Structure comparison between a normal Angular project and a Steroids project

There is a difference in the way steroids structures its files from the normal Angular projects you might be used to,
We have created a simple Angular project using Yeoman, here is a link on how to create an Angular project using Yeoman http://yeoman.io/codelab/scaffold-app.html.

This is how our symapp structure looks compared to the mytodo we created with Yeoman.

Index.html vs common folder layout.html

In the mytodo app under C:\mytodo\app\index.html you will find the file which contains the main layout of the HTML pages to be declared in your Angular project. This is where you bootstrap your application with the necessary scripts and CSS files you will require in your application.

The equivalent to the index.htm is the layout.html file in the common folder in your steroids project C:\symapp\app\common\views\layout.html. The key difference between the two files is that layout.html is declared under a common folder in steroids which contain the index.js, assets, native stylesheets, stylesheets and layout.html. The layout.html fills the same role as the index.html file.

app.js vs app.coffee

In the mytodo app under C:\mytodo\app\scripts\app.js the app.js file serves as the main module for the application declaring all the applications AngularJS dependencies.

The equivalent in the Steroids project is the app.coffee file to be found under C:\symapp\config\app.coffee. In a Steroids project there is a config folder holding the app.coffee and structure.coffee files which declares the modules and a host of other functions unique to supersonic which is the native functionality
provider in a Steroids project such as Drawers, initial views, tabs, preloads and a host of others.

structure.coffee

In our steroids project under C:\symapp\config\structure.coffee the structure.coffee file is responsible for how supersonic works in your application, navigation and
preloads. Coffee script and the structure.coffee file in particular need to have it’s functions declared in a particular order otherwise you will receive an error when performing a Steroids connect as the following:

Here is an order to declare the basic functions in your structure.coffee file to avoid these errors:

1. All your module.exports = declared first.
2. preloads:
3. initialView:
4. tabs:

Summary

Thanks for reading this blog, if you found this informative please share this blog and like us on facebook to get notifications when the next articles are published.

In the next article, we will have a look at adding some nice bells and whistles to your steroids and supersonic seed project.

Read more about the Mobile App Development service offered by Symbiotics.