joshrenner / lemonade-app

Lemonade Stand Demo App

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...