Untangling the web9

UNTANGLING THE WEB
CLASS 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:Usersdereknode-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

Untangling the web9

Related slideshows

More Related Content

Untangling the web9