UNTANGLING THE WEBCLASS 10 – DATABASES AND SERVERS

AGENDA

Homework and project 2 status Project 3 discussion Javascript on the client and server IBM Bluemix demo Callbacks Databases

SQL vs. noSQL Local databases vs. database services

Homework 8 Extra homework

HOMEWORKS

Most of you are doing OK, some are still not turning things in though 2 homeworks left If you’ll count, you’ll see that makes 9 homeworks rather than the 11 on the syllabus So the original goal of 5% per homework doesn’t work out anymore Will average for the two missing homeworks If you would prefer to do an additional homework instead of using the average, one is

provided at the end of this week’s slides (it will be worth 10% to replace both missing homeworks if you choose to do it)

PROJECT 2 FEEDBACK

Only got a couple groups handing in their sketches. This is worrisome. The goal was to have a chance for some feedback on which portions of the front end are

expected to be implemented. I expect at least one working page, styled and functional. This does not mean that the

entire page must be functional, but enough to script a demo to make it appear to be working is needed.

This at a minimum means that there must be a place to enter data and view results which actually works.

PROJECT 3 DETAILS

Along with the front end in project 2, the project 3 back-end is also due in a couple weeks. This can be a minimal back end, for instance one or more of the following:

A database of items An authentication system Set up a server to host your website

PROJECT 2 AND 3 GRADING

30% total Presentation 5% Site design and styling 5% Front-end functionality 10% Back-end functionality 10%

So by showing a mockup you can get half marks pretty easily, but full marks will require a working site

You do not need to use anything we have not covered in class, but you are welcome to

THE ALMOST-SERVERLESS DESIGN

I had intended to require the site be hosted somewhere permanent (ie. not jsfiddle or repl.it)

This is still the ideal, but if you host your database somewhere like mlab or firebase and choose to use a playground site to host that is only going to cost you a few points

If you host on github pages with a database backend, and do it well, you can achieve full marks

Of course, hosting on Bluemix or Digital Ocean or one of the other hosts mentioned in class is better

JAVASCRIPT ON THE SERVER

JS used to be only a client language Node.js changes this On the server, javascript can do more than on the client but can still manipulate the DOM

when needed This is something that cannot be done on the jsfiddle and repl.it type of sites because it

requires a server We will go through an example on IBM Bluemix

BACK TO THE COMMAND LINE AND GITHUB

This next section is essentially optional for the course, but useful if you want to develop efficiently

Back in class 4 we failed spectacularly with many of you in configuring this and I did not enforce learning the command line

When doing server deployments it really is necessary, though

CLOUD FOUNDRY

IBM Bluemix is an example of a Platform as a Service, or PaaS It is based on cloud foundry, which is a set of tools that make deployment easier Heroku is another example of a managed PaaS hosting site This saves a lot of administrative hassle over building a host of your own on a virtual

private server, but is more expensive (once you exceed the free-tier) Install the cloud foundry command line tools from

https://github.com/cloudfoundry/cli/releases

GIT BASH

This is what we installed back in class 4, it should still be on your system I hope If you did not get it installed, or have removed it, then just watch for the next bit (but for future reference see the class 4 slides, or for windows install from here:

https://git-scm.com/download/win And for mac from a terminal by executing “brew install git”)

MAKE SURE CLOUD FOUNDRY INSTALLED PROPERLY

Open git bash Type “cf” and press enter and you should see a list of cloud foundry options

CLONE THE HELLO WORLD PROJECT

Open a git bash window Navigate to the directory where you have been storing your class examples “git clone https://github.com/IBM-Bluemix/node-helloworld.git” You should see the files copied down from github into “node-helloworld”

INSTALL DEPENDENCIES

Change directories into the newly populated directory (“cd node-helloworld”) Type “npm install” You should see a number of dependencies download into the node_modules subdirectory

RUN LOCALLY

It’s important to be able to develop locally and then only push up to the remote site when you are ready

Type “npm start” to run the development server You should see “> bluemix-hello-node@0.0.0 start C:\Users\derek\node-helloworld > node server.js”

Now point a browser to http://localhost:8080

You should see “Hello World!” in the browser

SET UP CLOUD FOUNDRY First, tell it what service it is using, in this case bluemix, by typing “cf api

https://api.ng.bluemix.net” It will tell you it is setting the endpoint and say OK

Next, authenticate with the server. On Mac or Linux, you can type “cf login” and have it prompt you for the username and password you set up on IBM Bluemix

On Windows, there is a bug and instead use the “cf auth” command (“cf auth myusername mypassword”)

Now tell it what org and space you are developing for, by default this is your login email and “dev”, so for me it is:

“cf target –o derekja@gmail.com –s dev”

PUSHING TO THE CLOUD

The namespace is supposed to ensure uniqueness, but the manifest.yml is actually what provides your URL. Edit that. (for me, that is at the root of the project typing “code . &” which will open visual studio code on the directory)

Make the name and host something unique (for instance, I called it “hello-node-derekja”)

Type “cf push” to push the project to your server You should see some files uploaded and then a notice that it is running

Try opening it in a browser, for instance I open http://hello-node-derekja.mybluemix.net

Congrats, you’ve deployed your first web server!

STOPPING, STARTING, AND DELETING

At any time, you can stop your website by typing “cf stop APPNAME” and restart it with “cf start APPNAME” (where APPNAME is the name in the manifest.yml you edited)

“cf push” will push any new changes up When you are totally done with your site “cf delete APPNAME” and after confirming your

app will be deleted

Your one month Bluemix account has no charges, though, so feel free to leave your sites running for the free month

CALLBACKS

Particularly in server-side code, most things happen asynchronously This means that it takes time for things to happen To get around this, you often declare code in such a way that you tell it what to do when

some information comes back There are various patterns in javascript to handle this: async/await and promises are two of

the more common But we’re going to start with callbacks and callback chaining More info http://javascriptissexy.com/understand-javascript-callback-functions-and-use-

them/

CALLBACK DEMO

https://jsfiddle.net/ez7bg2ua/

DATABASES

SQL versus noSQL Flavours of SQL and noSQL Why use a database at all? Advanced database topics

Schema design Replication Transactions

SQL VERSUS NOSQL

SQL – Structured Query Language

Relational database Use when you need multiple

tables and when you need to construct queries that span those tables

More functional than flat databases, but also slower and more complex

Can exist in either client or server flavours

NoSQL databases – anything that isn’t relational!

MongoDB is a popular server-based flavor

Redis is a local memory-mapped flavor Cloudant, couchDB, etc. there are

many, many types All are good for rapid, flat table access Avoid the complexities of relational

databases while still preserving the benefits

LOCAL SQL EXAMPLE

https://jsfiddle.net/m5rh3a83/1/

(for more details see here: https://www.tutorialspoint.com/html5/html5_web_sql.htm)

FIREBASE EXAMPLE

https://jsfiddle.net/gz74nds3/

And look at the database configuration at firebase.io

HOMEWORK 8 – LOCAL CLIENT-SIDE DATABASE

Take the cars webSQL example and modify it to hold place names and latitude/longitude points in a local database

As locations are added, add them to a google map on the page Bonus problem (+1 point):

Center your map on the uvic campus Create a query which will make a list of locations within a tenth of a degree of the uvic campus in both latitude

and longitude Extra special bonus problem (+2 points):

Instead of doing this by means of degrees, use meters, allowing the user to input how far they want the list to populate from campus

(NB. This is rather tricky and you’ll want to use the haversine formula: http://www.movable-type.co.uk/scripts/latlong.html, or use the google maps APIs)

EXTRA HOMEWORK – USING IBM BLUEMIX

This is entirely optional, due on the last day of class, so 2 weeks Can ask for help at next week’s class If completed it will be worth 10% of your grade, if not completed the average of your other

homeworks will be used for this 10% Move your pizza website onto IBM Bluemix Use a database to hold the toppings

This can either be an mLab database or a bluemix database Hold the restaurant locations in the database as well Allow the user to enter new restaurant locations