How to Build a Data-Driven Hybrid Mobile App with HTML, CSS, Javacript, jQuery Mobile, AppGyver and Parse.

1. Set Up AppGyver Steroids on Your Development Machine

Go to www.appgyver.com, click the Get Started button, and follow the steps to set up your environment. If you’re developing on Windows, you’ll need to install Git, Python, and Node.js which are all very easy and quick to do with the installers. You’ll then install Steroids by running the command

npm install steroids -g

When done, create a Steroids account at www.appgyver.com, log in, and then set up the Steroids login by running the command

steroids login

Steroids should tell you that your login was successful.

logo-steroids-8613d13ce018ffad1cffe9570a8bc050

2. Create a Steroids Project

Open a command prompt and CD to a folder where you want to create your app, e.g.

cd c:myapps

In that folder, run the following command including the name of your app, e.g. helloworld

C:myapps>steroids create helloworld

This will set up the Steroids project in a folder called “helloworld”.

3. Connect to Steroids to Preview Your App

If you’re testing on an Android device, you can have Steroids update your app on your physical device. Run the following commands

C:myapps> cd helloworld

C:myappshelloworld> steroids connect –watch

Steroids will open a browser window showing a QR code. Download the AppGyver Scanner app to your Android device and scan the code. Whenever Steroids detects a file change, it will update your app on your device so you can test it directly on your device.

4. Develop Your Mobile App

jQuery Mobile is super easy to use. You can learn about it at http://jquerymobile.com/ but if you already know jQuery, I have found the tutorials at http://www.w3schools.com/jquerymobile/to be much easier to follow with live previews of many features.

jquery-mobile-logo_positive

With jQuery Mobile, you create a Single Page App (SPA) so all you really need to edit is index.html in the www folder of your Steroids project.

steroids

 

You can do most of your initial development in your web browser and then push updates to your Android device via Steroids to test on your physical device.

5. Use Parse for Your App’s Database

Many apps are data-driven. I have found Parse to be one of the more popular and easy to use ones. It also handles user accounts and session management very easily. Learn more about integrating Parse as your data backend using the Parse Javascript API.

5. Deploy to App Stores

When you’re ready to deploy your apps to the app stores, you can request a build from cloud.appgyver.com where you can specify build settings. When the build is complete, you can download it for uploading to the app stores.