Skip to content

Latest commit

 

History

History
130 lines (84 loc) · 4.35 KB

README.md

File metadata and controls

130 lines (84 loc) · 4.35 KB
Raw

Let's build an app

So you have a cool idea for an app, but don't know where to start? Sometimes you just need to a good example.

This repository contains instructions and source code for a simple web app that provides today's location of a fictitious lemonade stand business. Follow the steps to build your own version of the app. Then find out how to really make your app awesome.

Prerequisites

  1. A Mac (running OSX 10.8 or better) or a PC (running Windows 7 or better)
  2. Admin rights on your Mac or PC
  3. Install Google Chrome
  4. Install Node.js
  5. Install Sublime Text 2 (any decent text editor will do)

Steps

  1. Open a command prompt

    Mac: Run the Terminal app

    Windows: Start > Run > cmd

  2. In the command prompt, create the app directory
    NOTE: We're putting it on the Desktop just for easy access

    Mac

    cd ~/Desktop
mkdir lemonade-app
cd lemonade-app

    Windows

    cd %USERPROFILE%\Desktop
mkdir lemonade-app
cd lemonade-app

  3. Initialize the Node app

    npm init

    Accept all defaults in the wizard except entry point, which should be web.js:

    entry point: (index.js) web.js

  4. Install Express.js

    npm install [email protected] --save

  5. Install Google Spreadsheets library

    npm install [email protected] --save

  6. Run Sublime Text 2 and open the project directory

    Mac: File menu > Open... > (browse to above directory)

    Windows: File menu > Open Folder... > (browse to above directory)

  7. Create the public subdirectory for our static content

    mkdir public

  8. Create empty code files to go into the project

    Mac

    touch web.js
touch public/index.html

    Windows

    type NUL > web.js
type NUL > public\index.html

  9. Open each of the above files in Sublime and copy/paste their associated content from the following sources:

    /web.js

    /public/index.html

    IMPORTANT: Be sure to save the changes to the files (File > Save)

  10. Start your app

    node web.js

    You should see output that looks like this:

    Listening on 5001

  11. View your app in your browser

    http://localhost:5001

What's going on?

  • The web.js file is the only server-side code (running in Node.js), and it's basically serving up static client-side content out of the public directory as well as a simple API endpoint for the lemonade stand location.

  • The API endpoint is /api/location and returns the current lemonade stand location, which is obtained by consuming a published Google Spreadsheet by calling the Google Spreadsheets API via a very handy Node.js library called google-spreadsheet.

  • The published version of the Google Spreadsheet consumed by the endpoint can be seen here.

  • The public/index.html file is essentially the entire client-side app. The HTML in the page provides the layout, the <style> block provides the CSS styling. The real magic happens in <script> block that contains the client-side JavaScript.

  • When the page first loads, that JavaScript code makes an AJAX call to the API endpoint to get today's location of the stand.

  • The page then renders a Google Maps object centered on the location returned by the API and creates an associated Marker and InfoWindow to pinpoint the location of the lemonade stand.

Make it awesome!

So having your own app idea running on your laptop is great, but wouldn't it be really awesome if you could share it with the world? Check out the next chapter of this app's adventure and learn how to deploy your app to the cloud...