Web Labs (Web apps development)

The Web is certainly one of the most exciting platforms for development. From plain web pages to desktop-quality web apps, we have done a great progress on the Web since its conception, but still keeping its core essence.

Learning Objectives

In this crash course you'll learn the basics of web development that should enable you to start your own web projects. The following main topics will be addressed:

• Javascript basics
• Node: how to set up and run a simple node server for serving REST APIs
• Heroku: hosting your server in the cloud

In class we will give you what you need to get you started. To get the best out of this course we strongly suggest you to follow up the classes with practice sessions at home.

Getting up to speed on HTML and CSS

We take HTML and CSS as prerequisites, but if you need a refresher, the best thing here is to follow the Coursera classes on html and css: They are FREE. Just select "audit"

Required for exam

This is not a programming course, so we will not do advanced programming tricks. What we want to learn here is how to set up a web applications, with its key ingredients, a client side, a server side, a DB, its overall deployment, and basic of session management and CORS. You are expected to be familiar with:

• Creating a Node server to serve REST APIs (get, post, put, delete), interacting with the appropriate JSON content and HTTP codes
• Installing modules via npm or yarn
• Organize the server code in modules
• Setting up CORS
• Structure the routing logic of your server (using express.js)
• Writing simple client-side javascript apps (from JS you should be able to read/write the DOM and interact with the server, using fetch)
• Deploying your server on the cloud using Heroku
• Connecting your Node server with a database
• Deploying the client side of your app on github pages: see info at https://pages.github.com/ (choose configuration for "project site" and "start from scratch"). You must be able to define pages for your project (repository on github)

Exercises

Basic Javascript exercises

A very good list of exercises, with solutions and online code editor (codepen) to play with, is available at: https://www.w3resource.com/javascript-exercises/javascript-basic-exercises.php

On the same site, check out also the exercises for functions and objects.

DOM manipulation exercises

check out these exercises with solution: https://www.w3resource.com/javascript-exercises/javascript-dom-exercises.php

And here some tutorials to learn DOM manipulation: https://dom-tutorials.appspot.com/static/index.html

Node.js exercises

Interesting tutorials available at: https://nodeschool.io/it/#workshoppers

Another course on Node.js with exercises is available at: http://nicholasjohnson.com/node/course/exercises/

Proposte di esercizi per la parte di Html e Javascript basics:

ASSISTENTE DI REGISTRAZIONE - Sviluppare un semplicissimo bot in javascript per guidare l'utente nel processo di identificazione e registrazione. Usare i comandi alert(), prompt(), e confirm() per dialogare con l'utente. Funzionamento:

(1) Proporre login con credenziali di accesso oppure nuova registrazione;

(2) In questo ultimo caso, chiede nome, data di nascita, username, e una password a scelta della lunghezza minima di 6 caratteri;

(3) Mostrare infine una pagina di benvenuto riepilogando le informazioni inserite.

CALCOLATRICE CLIENT ONLY - Sviluppare una applicazione web (solo lato client) per eseguire operazioni matematiche. Il funzionamento dovrebbe ricalcare quello delle classiche calcolatrici con display singolo. Definire una pagina web html e un file javascript esterno e prevedere:

(1) un campo textarea <input type="number" id="a" name="a" value="0"> per l'input dei numeri e l'output delle operazioni;

(2) Quattro bottoni <button type="button" onclick="alert('Hello World!')">Click Me!</button> per: somma(+), moltiplicazione(x), risultato(=), e reset(R). Scrivere tutta la logica implementativa nel file javascipt. E' anche posssibile prevedere un log delle operazioni svolte da mostrare sotto alla calcolatrice.

Proposte di esercizi per la parte Node.js:

CALCOLATRICE - BACK END - Sviluppare un back end in node.js, che esponga delle api per l'esecuzione di semplici operazioni aritmetiche. Rispondere a chiamate GET sul path /sum e /multiply prendento in input due valori sui quali eseguire l'operazione specificata ?x=*&y=*. Rispondere semplicemente con il risultato.

Proposte di esercizi per la parte REST e MongoDb:

CHAT - BACK END - Sviluppare un back end per una chat in node.js. Prevedere la possiblità di avere più stanze. Prevedere o meno un meccanismo di autenticazione. Definire le seguenti api:

• POST /user per registrarsi
• GET /user/x per i dettagli dell'utente
• PUT /user o /user/x per aggiornare l'utente
• POST /room per creare una stanza
• PUT /room per aggiornate il nome di una stanza
• GET /rooms per una lista delle stanze
• GET /msg?room=x?time=x per tutti i messaggi nella stanza specificata, dalla data speificata
• POST /msg per scrivere un messaggio

Proposte di esercizi per la parte AJAX:

CALCOLATRICE - FRONT END - Implementare un front-end per le api di calcolo remoto di cui sopra. Adattare il codice sviluppato per l'esercizio "CALCOLATRICE CLIENT ONLY".

CHAT - FRONT END - Implementare un front-end per il servizion di chat di cui sopra. Prevedere delle interfacce grafiche per ogni funzionalità offerta dal servizio. Organizzare il tutto in un unica o su più pagine pagine web.

Heroku

Heroku is a PaaS that allows you to easily deploy web apps onto the web.

Getting started

Here a step-by-step guide to start working with Heroku and Node.js apps:

1. First of all you need to register on Heroku from here https://www.heroku.com/. Click on the "Sign up" button and follow the guided procedure.
   1. Remember your credential, mail and password because we will need them later.
2. You also need to have Node.js installed locally. You can download it from here: https://nodejs.org/en/download/. It already comes with built-in node pakage manager (npm), we will use it soon. Please install the current version so that we are all working with the same version.
3. Follow the getting started tutorial available on Heroku Dev Center at https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction. Some notes:
   • Close and reopen your command shell once you have installed the Heroku CLI (as described in the "Set Up" step of the tutorial). If you do not so your shell could still be not aware of heroku have being added to the system PATH. You may also need to reboot your system.
   • Windows only users: you should be able to use either the Git Bash or the Windows Command Prompt (click win key to open the start menu and type "cmd", it should be the first result listed). Type "heroku -v" in the git bash to check if heroku works, otherwise swich to the Windows Command Prompt.
   • Windows only users: Unfortunately the "heroku login" command is not supported in the git bash, so please do it in the Windows Command Prompt and then eventually goes back to the Git Bash.

At this point you should be able to deploy, scale and open your app directly by visiting the url or from the bash by typing "heroku open".

From scratch

Now we want to develop a Node.js app from scratch and deploy it on Heroku. To create a Node.js app from scratch:

1. Create a folder "node_app_from_scratch"
2. Enter into the folder with the shell
   1. $ cd node_app_from_scratch
3. Initialize a git repository:
   1. $ git init
4. Initialize a npm application
   1. $ npm init
   2. The shell will ask for some information about the app. You can specify them or press ENTER to accept the default values.
   3. At the end it asks for confirmation, type "yes" and press ENTER.
5. Implement your application in an index.js file
   1. You can copy the HelloWorld app from https://github.com/marcorobol/is2-2017/blob/master/4-Heroku/1-HelloWorld/index.js
   2. Note that Heroku requires your app to listen to the port defined in the config variable "process.env.PORT" and to ip "0.0.0.0" (you can also leave the ip unspecified). Note also that the variable "process.env.PORT" is not defined in your local environment, so you should provide a default port by doing:
   3. "process.env.PORT || 80"
6. Create a file called Procfile with the following content:
   1. web: node index.js
7. Stage and commit all changes
   1. $ git add .
   2. $ git commit -m"hello world"
8. Create a new heroku application
   1. $ heroku create
   2. Copy the returned git url. We may need it later.
9. Verify if "heroku" remote repository has been added
   1. $ git remote -v
   2. In the case nothing is showed you need to manually add the remote
   3. $ git remote add heroku git_url_returned_from_heroku_create
   4. If something goes wrong type "git status" and verify everything is up-to-date and commited.
10. Doploy your app by pushing local changes to your remote repository "heroku"
    1. $ git push heroku master
    2. Or set a default remote origin and simply push
    3. $ git push --set-upstream heroku master
    4. $ git push
11. Scale the app so to start it
    1. $ heroku ps:scale web=1
12. Open the app
    1. $ heroku open

Overwriting an app

Now we have two apps deployed on Heroku. What if we do not want to create a new Heroku app everytime, and instead we want to push a new app to a an already existing Heroku app? Now we will deploy our newly create app "node_app_from_scratch" on the "Getting Started" Heroku app created before.

1. We need to obtain the Heroku Git URL of our "Getting Started" app (GETTING_STARTED_GIT_URL). You have two options:
   1. Go to the local folder of the "Getting Started" app with the bash and type:
      1. $ git remote -v
   2. Or go to your Heroku Dashboard at https://dashboard.heroku.com/apps, select the app, go to Setting tab and here you find the url
2. Add this remote to our app. Go to the local folder of the "node_app_from_scratch" with the bash and type:
   1. $ git remote add heroku0 GETTING_STARTED_GIT_URL
3. Now we have two remore on the same repository
   1. $ git remote -v
4. Push local repository to the newly added remote heroku0. Use the flag --force to overwrite the old repository
   1. $ git push heroku0 master --force

mLab

mLab is a Database-as-a-Service for MongoDB.

Register

1. Go to https://mlab.com/
2. Sign up for a new account
3. Create a new 'MongoDB Deployments' by clicking on the 'Create new' button
4. Select plan type 'SANDBOX' and click continue
5. Select server region and click continue
6. Specify a name and click continue
7. Submit order
8. Open the newly created database from mLab home
9. Go to tab 'Users' and click on 'Add database user'
10. Provide a username and a password and confirm
11. Retrieve the MongoDB URI on the database page
12. Replace username and password in the URI
13. Now you are ready to use it in a Node.js app!

What we have seen so far

• Javascript basic
• Node.js basic
• Heroku
• The request object and basic routing
  • https://nodejs.org/en/docs/guides/anatomy-of-an-http-transaction/
• Express
  • http://expressjs.com/it/starter/installing.html
  • http://expressjs.com/it/starter/hello-world.html
  • http://expressjs.com/it/starter/basic-routing.html
  • https://ourcodeworld.com/articles/read/261/how-to-create-an-http-server-with-express-in-node-js
  • https://scotch.io/tutorials/learn-to-use-the-new-router-in-expressjs-4
• RESTFUL APIs (with Mongoose and mLab database service)
  • http://mongoosejs.com/docs/
  • https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
  • http://justindavis.co/2015/08/31/CORS-in-Express/
  • https://scotch.io/tutorials/build-a-restful-api-using-node-and-express-4
• Fetch API
  • https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data
  • http://jamesknelson.com/grokking-es6-promises-the-four-functions-you-need-to-avoid-callback-hell/
• Bootstrap
  • http://getbootstrap.com/docs/4.0/getting-started/introduction/
• Knockout
  • http://knockoutjs.com/documentation/introduction.html
  • http://learn.knockoutjs.com/#/?tutorial=intro

What we will see in the next class

• Consuming REST APIs from Node.js
  • https://www.rapiddg.com/blog/calling-rest-api-nodejs-script
• Authentication
  • https://scotch.io/tutorials/authenticate-a-node-js-api-with-json-web-tokens
  • https://auth0.com/learn/token-based-authentication-made-easy
  • (https://stackoverflow.com/questions/319530/restful-authentication)

Course repository

Here you will find the examples and the exercises we will see in class: https://github.com/marcorobol/is2-2017