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. Don't be afraid to mess up or experiment, you'll learn more.  Let's get started!

learn the Command line

First, we will use the command line to navigate the computers files and directories.  Follow the steps below:

  1. Open the Terminal application.
  2. To Navigate to your STEM user directory, use the cd (change directory) command: cd stem2016/files/MyApp
  3. Press Enter
  4. Verify the directory changed with the pwd (print working directory) command: pwd
  5. Press Enter
  6. The path to the current directory prints to the screen.  It should end with MyApp.

BUILD THE APP

Now we build our app with the steps below:

  1. In 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 to a GitHub Repository. 

Save code to A github repository

Follow the steps below to check in your code to a GitHub repository.  If you have not signed up for a Github account, please do so here. 

  1. In the Terminal app, verify you are in the MyApp directory (hint: pwd).
  2. Set your name in the local Git repository with the git config command: git config user.name "Git User Name"
  3. Set your email (same email you used for GitHub): git config user.email youremail@example.com
git config user.name "kellimohr"
git config user.email me@kellimohr.com

Example:

 

Now, we will set up the local repository.  

  1. Verify you are in the MyApp directory. 
  2. Use the git init command to initialize the Git repo: git init
  3. Execute the command: git status
  4. 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 .
  5. Commit the directory with this command: git commit -m "Initial App commit"
  6. Now let's push our changes to our repository on GitHub: git push
  7. Open GitHub to verify your changes were added.

Develop an app with html And css

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 in the www directory in the MyApp directory.
  3. In between the <h1> and </h1> tags, replace Apache Cordova with My First App.
  4. Save the index.html file.
  5. Run the emulator command for either Android or iOS (hint: cordova emulate ios).
  6. Notice the app was changed in the emulator.

Let's remove some pre-loaded HTML elements from our app.  

  1. In Sublime, open the index.html file and remove all the lines of code between the <body> and </body> tags, except the <script> tags (see below).
  2. Save the file and run the emulator.
  3. You will now see a blank gray screen.
    <body>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>

Let's add headings, paragraph, and a square to our app.  There are six heading sizes available.  Heading 1 (h1) is the largest size.  Add the following lines of code between the <body> and </body> tag before the <script> tags.

    <h1>Shapes Game</h1>
    <h4>Square</h4>
    <p> A shape with 4 sides of the same length and 4 right angles.</p>
    <div style="width:50px;height:50px;border:2px solid #000;">
    </div>

Run the emulator to see your results.  We see the new elements that we added, but they do not look that great.  We can use Cascading Style Sheets (CSS) to make our app look better.  In Sublime, navigate to the css directory and open the index.css file.

  1. First, we need to push down the SHAPES GAME heading.  Look for h1 in the index.css file. 
  2. Within h1, update margin:0px; to margin:50px;.
  3. Within body, update padding to 10px;
  4. Save the file and run the emulator to see the changes.
  5. Under the h1 css element, let's add a new p css element to adjust the right side padding and change the font color to blue.
  6. Run the emulator again.
    p {
        padding-right: 10px;
        color: blue;
    }

Great!  Our app looks much better.  Now let's create a new square css element.  Right now, our css we use to draw the square is inline in our html.index file.  It will be a lot easier to find and update in our css.index file in the future.

  1. Open index.html and find the <div> tag in the <body> section.
  2. Remove style="width:50px;height:50px;border:2px solid #000;" from the div and add id="square".
  3. Save the index.html file.
    <div id="square">
    </div>

Add a new css element for the square id.

  1. Open css.index.
  2. At the end of the file create a new element named #square.
  3. Add the style elements from the original square we made to the new square css element.
    #square {
        width:50px;
        height:50px;
        border:2px solid #000;
    }

Now that we've built our square and the code works, it's a good time to check it into GitHub.  Open your terminal to check in you files.  

    git add .
    git commit -m "Checking in code to create a square."
    git push

Let's add a circle.  Unfortunately, there is no easy way to make a circle in HTML so we need to build it off of our code we used for the square.

  1. Open index.html.
  2. Create a new heading 4 titled Circle.
  3. Create a new paragraph with the following text: A shape with an edge equidistant from a center point.
  4. Create a new div with an id of circle.
  5. Save the file.
    <h4>Circle</h4>
    <p>A shape with an edge equidistant from a center point.</p>
    <div id="circle">
    </div>

We will also need to add a new css element for the circle.  

  1. Open the css.index file.
  2. At the end of the file, create a new element called #circle.
  3. Copy the style properties from the #square element.
  4. Add a new style property: border-radius: 50%; Border-radius rounds the corners of the square or shape.
  5. Color in the circle with black: background: black;
  6. Save the file.
  7. Run the emulator to draw the circle in the app.
    #circle {
        width: 50px;
        height: 50px;
        border:2px solid #000;
        border-radius: 50%;
        background: black;
    }

Now that we have another piece of working code.  Let's check it in!

    git add .
    git commit -m "Checking in code to create a circle."
    git push

Challenge

Create a new Div to create a triangle.  Hint:  Experiment with the borders.  Feel free to Google or check out these links: