Creating a mobile app from a simple HTML site
This article is a simple tutorial designed to teach you some fundamental skills for creating cross platform web applications. You will build a sample School Plan app, which will provide a dynamic “app-like” experience across many different platforms and work offline. It will use Apache Cordova and Mozilla’s Brick web components.
The story behind the app, written by Piotr
I’ve got two kids and I’m always forgetting their school plan, as are they. Certainly I could copy the HTML to JSFiddle and load the plan as a Firefox app. Unfortunately this would not load offline, and currently would not work on iOS. Instead I would like to create an app that could be used by everyone in our family, regardless of the device they choose to use.
We will build
A mobile application which will:
Prerequisite knowledge
- You should understand the basics of HTML, CSS and JavaScript before getting started.
- Please also read the instructions on how to load any stage in this tutorial.
- The Cordova documentation would also be a good thing to read, although we’ll explain the bits you need to know below.
- You could also read up on Mozilla Brick components to find out what they do.
Preparation
Before building up the sample app, you need to prepare your environment.
Installing Cordova
We’ve decided to use Apache Cordova for this project as it’s currently the best free tool for delivering HTML apps to many different platforms. You can build up your app using web technologies and then get Cordova to automatically port the app over to the different native platforms. Let’s get it installed first.
- First install NodeJS: Cordova is a NodeJS package.
- Next, install Cordova globally using the npm package manager:
Note: On Linux or OS X, you may need to have root access.
Installing the latest Firefox
If you haven’t updated Firefox for a while, you should install the latest version to make sure you have all the tools you need.
Installing Brick
Mozilla Brick is a tool built for app developers. It’s a set of ready-to-use web components that allow you to build up and use common UI components very quickly.
- To install Brick we will need to use the Bower package manager. Install this, again using npm :
bower install mozbrick/brickGetting some sample HTML
Now you should find some sample HTML to use in the project — copy your own children’s online school plans for this purpose, or use our sample if you don’t have any but still want to follow along. Save your markup in a safe place for now.
Stage 1: Setting up the basic HTML project
In this part of the tutorial we will set up the basic project, and display the school plans in plain HTML. See the stage 1 code on Github if you want to see what the code should look like at the end of this section.
- Start by setting up a plain Cordova project. On your command line, go to the directory in which you want to create your app project, and enter the following command:
cordova create school-plan com.example.schoolplan SchoolPlanAngelica
Monday Tuesday Wednesday Thursday Friday 1. Art English .table < width: 100%; border-collapse: collapse; font-size: 10px; >th < font-size: 12px; font-weight: normal; color: #039; padding: 10px 8px; >td < color: #669; padding: 8px; >tbody tr:nth-child(odd)cordova platform add firefoxos cordova prepare
The last step is needed every time you want to check the changes.
Open the App Manager in the Firefox browser. Press the [Add Packaged App] button and navigate to the prepared firefoxos app directory, which should be available in school-plan/platforms/firefoxos/www . Note: If you are running Firefox Aurora or Nightly, you can do these tasks using our new WebIDE tool, which has a similar but slightly different workflow to the App Manager. Press the [Start Simulator] button then [Update] and you will see the app running in a Firefox OS simulator. You can inspect, debug and profile it using the App Manager — read Using the App Manager for more details. Now let’s export the app as a native Android APK so we can see it working on that platform. Add the platform and get Cordova to build the apk file with the following two commands: cordova platform add android cordova build androidStage 2
In Stage 2 of our app implementation, we will look at using Brick to improve the user experience of our app. Instead of having to potentially scroll through a lot of lesson plans to find the one you want, we’ll implement a Brick custom element that allows us to display different plans in the same place.
You can see the finished Stage 2 code on Github.
We will be using the brick-deck component. This provides a “deck of cards” type interface that displays one brick-card while hiding the others
First, run the following command in www directory to install the needed entire Brick codebase into the app/bower_components .
bower install mozbrick/brick
