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

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

Steps

Open a command prompt

Mac: Run the Terminal app

Windows: Start > Run > cmd

In the command prompt, create the app directory

Mac

cd ~/Documents
mkdir lemonade-app
cd lemonade-app

Windows

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

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
```
Install Express.js
```
npm install express --save
```
Install Google Spreadsheets library
```
npm install google-spreadsheet --save
```
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)
Create the public subdirectory for our static content
```
mkdir public
```

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

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)
Start your app
```
node web.js
```
You should see output that looks like this:
```
Listening on 5001
```
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...

ReinyLegit/lemonade-app

Let's build an app

Prerequisites

Steps

What's going on?

Make it awesome!