Part I: Getting Started

Let’s dive right in.

  1. Ensure all the required tools and files are available or have been downloaded.

    There are only three requirements for this tutorial. The following list includes links to locations where the required tools may be downloaded:

    1. GIT - download and install git
    2. Python - download and install python. It is our recommended local web server.
    3. Tutorial Project - clone and setup the tutorial project

    When cloning the applicant-tutorial repository, make sure follow the README instructions to initialize the FOAM submodule, or else the rest of the tutorial won’t work properly. After the submodule has been initialized within the tutorial project, a sub-directory foam2 will be created that holds all the code for FOAM as well as numerous demos and test pages.

  2. Within the tutorial repository you will find the $PROJECT/index.html file with the following contents:

     <html>
       <head>
         <script src="foam2/src/foam.js"></script>
         <script src="foam_powered.js"></script>
       </head>
       <body>
         <script>
           document.write(FOAM_POWERED);
         </script>
       </body>
     </html>
     
 TThe FOAM library is split across many files, but you only need to include this one JS file in your HTML document: `foam2/src/foam.js`.

  1. Launch your local web server and direct your browser to this file. Using Python, launching the local web server will look like either of the following commands depending on which version of python you have installed:

    python -m SimpleHTTPServer # Python 2

    python -m http.server # Python 3

    To check which version of python you have, simply run python --version

    This will serve as the current directory on port 8000: http://localhost:8000/.

  2. Load the page in your local web browser. It should display the “FOAM Powered” text.

    If that’s what you’re seeing, then congratulations! You’ve got FOAM running and you’re ready to move on to the next stage in this tutorial: Core Concepts.

NEXT: Part II - Core Concepts

Tutorial Menu:

  1. Getting Started
  2. Core Concepts
  3. Applied Learning: Build a Basic App with FOAM