Building Your First Mobile Web App

Margaret Leibovic

Building Your First Mobile Web App

Basics of a web app

Publishing your app

Let's build an app!

Make your own copy of stopwatch (my demo app)

  • Create a github account if you don't have one
  • Hit the "fork" button on my stopwatch repo page
  • In Settings, Make sure you have the gh-pages branch set as the default branch
  • Try making a simple commit on the website, such as editing the README file
  • See your app in action at http://yourusername.github.com/stopwatch/

Get a local copy of stopwatch

  • You can edit files directly on github's website, but developing locally is easier if you're going to make a lot of changes
  • Make sure git is installed on your computer
  • In a terminal, navigate to where you want to keep your app files
  • Run git clone https://github.com/yourgithubusername/stopwatch.git
  • Open stopwatch/index.html in a browser to see the local copy of your app

Let's start hacking on this app!

Creating HTML to build a stopwatch

  • The HTML for the app is kept in index.html
  • Use an <h1> tag to create clock display
    • <h1 id="clock">00:00</h1>
  • Use an <button> tags to create start/stop and reset buttons
    • <button id="start-stop">Start</button>
    <button id="reset" class="danger">Reset</button>
  • Use the page inspector to debug your HTML

Adding CSS to style the stopwatch

  • The CSS for the app is kept in css/stopwatch.css
  • Load this CSS file in the HTML with a <link> tag
    • <link rel="stylesheet" href="css/stopwatch.css">
  • Try editing some style rules
    • color: red;
    background-color: black;
  • Use the style editor to debug your CSS

Use third-party CSS and fonts

  • Load an external CSS file with a <link> tag
    • <link rel="stylesheet" href="http://buildingfirefoxos.github.io/Building-Blocks/style/buttons.css">
  • Load an external font with a <link> tag
    • <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">

Adding JS to make stopwatch actually work

  • The JS for the app is kept in js/stopwatch.js
  • Load this CSS file in the HTML with a <script> tag
    • <script type="text/javascript" src="js/stopwatch.js">
  • Take a look at the setupStopwatch function to see how it works
  • Use the JS debugger to debug your JS

Making the app installable

  • Edit the mainfest.webapp file
  • Add an install button to the HTML
    • <button id="install">Install Stopwatch</button>
  • Take a look at the setupInstallButton function to see how this button works

Pushing local changes back to github

  • Run git add . to stage your changes
  • Run git commit -m "your commit message" to commit your changes
  • Run git push to push your changes
  • If you're new to git, here's a good interactive tutorial

Testing your mobile app

Make it your own!

Ideas for future stopwatch features

More resources