Follow this series as we investigate steroids, appgyver and supersonic
Authors – Emile Boshoff, Stuart Jacobs, Graham Grobler
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.
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.
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.
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
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.
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
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
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.
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:
- All your module.exports = declared first.
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.