Mobile Application Development with Cordova and HTML

Welcome to the Mobile Application Development STEM summer camp.  I hope you find this fun, engaging, and rewarding. Let's get started!

 

Create a GITHUB Repository

Follow the steps below to create a GitHub repository.  If you have not signed up for an account, please do so here. 

  1. Log into GitHub
  2. In the upper right corner, select the + sign.
  3. Click New Repository
  4. In the text box under repository name, type: MyApp
  5. Check Initialize this repository with a README
  6. Click Create repository button.
  7. Click Clone or download button.
  8. Click the Copy to Clipboard button next to the repository URL (see image below).

Create myapp Repository on your local machine

Next, clone the MyApp repository to your computer so we can start building our app!  Use the steps below:

  1. On your computer, open the Terminal application (aka CMD line).

  2. Create a new folder with your first and last name with the mkdir command.

  3. Change directories to the new folder created in step 2 with the cd command.

  4. Set up your local git identity with the git config command.

  5. Clone your repository to the with the git clone command, then paste your github URL after the command.

  6. Your repository will be cloned to the computer in your directory.  When it's complete change directories to MyApp using the cd command. 

$ mkdir kellimohr
$ cd kellimohr/
$ git config user.name "Your Name"
$ git config user.email yourname@example.com
$ git clone https://github.com/kellimohr/MyApp.git
Cloning into 'MyApp'...
remote: Counting objects: 3, done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), done.
$ cd MyApp

Your terminal window should look like the section below when you are complete:

build myapp mobile application

Now we are ready to start building our application.  Follow the steps below:

  1. Open the Terminal application.
  2. Execute the following command to create the app: cordova create MyApp
  3. Change directories to MyApp: cd MyApp 
  4. Show the files of the directory: ls

Next, we need to set the name of our app.  Use a text editor to open the config.xml file in the MyApp directory.  Follow the steps below to set the app name:

  1. Find the <name> tag.
  2. In between <name> and </name> replace HelloCordova with MyApp
  3. Save the file.

We've successfully updated the app name.  Now let's see where the app content is stored.  Use the steps below:

  1. Navigate to the www directory: cd www
  2. Show the files in the directory: ls

We will develop our application by editing the index.html file.  This is a great place to save our work. Let's do our first GitHub commit and push.  Follow the steps below:

  1. Change directories back to our repository root: cd ~/<your name>/MyApp
  2. Execute the command: git status
  3. Git status command will return the current state of files in the local repository.  At this time the MyApp app directory should be untracked.  Add the directory to git with this command: git add .
  4. Commit the directory with this command: git commit -m "Added the cordova framework"
  5. Now let's push our changes to our repository on GitHub: git push
  6. Open GitHub to verify your changes were added.
$ cordova create MyApp
Creating a new cordova project.
$ cd MyApp/
$ ls
config.xml    hooks        platforms    plugins        www
$cd www
$ ls
css        img        index.html    js
$ git status
# On branch master
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#
#    MyApp/
nothing added to commit but untracked files present (use "git add" to track)
$ git add .
$ git commit -m "Added the cordova framework"
[master e9b417f] Added the cordova framework
 6 files changed, 264 insertions(+)
 create mode 100644 MyApp/config.xml
 create mode 100644 MyApp/hooks/README.md
 create mode 100644 MyApp/www/css/index.css
 create mode 100644 MyApp/www/img/logo.png
 create mode 100644 MyApp/www/index.html
 create mode 100644 MyApp/www/js/index.js
 $ git push
 sername for 'https://github.com': kellimohr
Password for 'https://kellimohr@github.com':
Counting objects: 15, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (10/10), done.
Writing objects: 100% (14/14), 26.18 KiB, done.
Total 14 (delta 1), reused 0 (delta 0)
To https://github.com/kellimohr/MyApp.git
   6c2b287..e9b417f  master -> master

Terminal commands for adding the Cordova framework: 

Add platforms to the app

Now we add the platforms our app will run on.  In our case, it will be iOS, Android, or both.  Follow the steps below:

  1. Open the Terminal application.
  2. Navigate to the MyApp folder for cordova: cd MyApp
  3. Add the iOS platform: cordova platform add ios --save
  4. Add the Android platform: cordova platform add android --save
  5. Check your current platforms: cordova platform ls
$ cordova platform add ios --save
Adding ios project...
iOS project created with cordova-ios@4.1.1
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Fetching plugin "cordova-plugin-whitelist@1" via npm
Installing "cordova-plugin-whitelist" for ios
Saved plugin info for "cordova-plugin-whitelist" to config.xml
--save flag or autosave detected
Saving ios@~4.1.1 into config.xml file ...
Kellis-MBP:MyApp kelli$ cordova platform add android --save
Adding android project...
Creating Cordova project for the Android platform:
    Path: platforms/android
    Package: io.cordova.hellocordova
    Name: HelloCordova
    Activity: MainActivity
    Android target: android-23
Android project created with cordova-android@5.1.1
Installing "cordova-plugin-whitelist" for android

               This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.

--save flag or autosave detected
Saving android@~5.1.1 into config.xml file ...
$ cordova platform ls
Installed platforms:
  android 5.1.1
  ios 4.1.1
Available platforms:
  amazon-fireos ~3.6.3 (deprecated)
  blackberry10 ~3.8.0
  browser ~4.1.0
  firefoxos ~3.6.3
  osx ~4.0.1
  webos ~3.7.0

Your terminal window should look like this:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

BUILD the app

Now we build our app with the steps below:

  1. Open the Terminal app.
  2. Execute the build command: cordova build
  3. Once you see ** BUILD SUCEEDED ** run the emulate command for the specific platform, start with iOS: cordova emulate ios
  4. The emulator opens to display the app. 
  5. Run the emulator for Android: cordova emulate android
  6. If everything builds and runs, it's a great time to check in our code. Use the following commands in the terminal:
git add .
git commit -m "Successful app build"
git push

Develop the app with html

Now we are going to use HTML to change the look of the front page of our app.

  1. Open Sublime Text text editor.
  2. From Sublime open the index.html file.
  3. Notice the structure of the html file.
<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <!--
        Customize this policy to fit your own app's needs. For more guidance, see:
            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
        Some notes:
            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>My First App</title>
    </head>
    <body>
        <div class="app">
            <h1>My First App</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>
  1. In between the <title> and </title> tags, replace the text with My First App.
  2.