SlideShare a Scribd company logo
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

More Related Content

What's hot (20)

PPTX
Untangling spring week8
Derek Jacoby
 
PPTX
Untangling spring week10
Derek Jacoby
 
PPTX
Untangling spring week9
Derek Jacoby
 
PPTX
Untangling spring week2
Derek Jacoby
 
PPTX
Untangling the web week1
Derek Jacoby
 
PPTX
Untangling spring week6
Derek Jacoby
 
PPTX
Untangling - fall2017 - week6
Derek Jacoby
 
PPTX
Untangling - fall2017 - week5
Derek Jacoby
 
PDF
Building mobile applications with DrupalGap
Alex S
 
PPTX
Untangling the web week 2 - SEO
Derek Jacoby
 
PPTX
Building a PWA - For Everyone Who Is Scared To
Raymond Camden
 
PDF
SocketStream
Paul Jensen
 
PDF
Javascript and jQuery PennApps Tech Talk, Fall 2014
Kathy Zhou
 
PDF
Don't make me wait! or Building High-Performance Web Applications
Stoyan Stefanov
 
PDF
Managing a Project the Drupal Way - Drupal Open Days Ireland
Emma Jane Hogbin Westby
 
PPTX
Don't Over-React - just use Vue!
Raymond Camden
 
PDF
Theming in WordPress - Where do I Start?
Edmund Turbin
 
PDF
WP-CLI For The Win
Micah Wood
 
PDF
Build your application in seconds and optimize workflow as much as you can us...
Alex S
 
PDF
learning react
Eueung Mulyana
 
Untangling spring week8
Derek Jacoby
 
Untangling spring week10
Derek Jacoby
 
Untangling spring week9
Derek Jacoby
 
Untangling spring week2
Derek Jacoby
 
Untangling the web week1
Derek Jacoby
 
Untangling spring week6
Derek Jacoby
 
Untangling - fall2017 - week6
Derek Jacoby
 
Untangling - fall2017 - week5
Derek Jacoby
 
Building mobile applications with DrupalGap
Alex S
 
Untangling the web week 2 - SEO
Derek Jacoby
 
Building a PWA - For Everyone Who Is Scared To
Raymond Camden
 
SocketStream
Paul Jensen
 
Javascript and jQuery PennApps Tech Talk, Fall 2014
Kathy Zhou
 
Don't make me wait! or Building High-Performance Web Applications
Stoyan Stefanov
 
Managing a Project the Drupal Way - Drupal Open Days Ireland
Emma Jane Hogbin Westby
 
Don't Over-React - just use Vue!
Raymond Camden
 
Theming in WordPress - Where do I Start?
Edmund Turbin
 
WP-CLI For The Win
Micah Wood
 
Build your application in seconds and optimize workflow as much as you can us...
Alex S
 
learning react
Eueung Mulyana
 

Viewers also liked (13)

PPTX
Untangling spring week3
Derek Jacoby
 
PPTX
Untangling spring week4
Derek Jacoby
 
PPTX
Untangling the web - week 3
Derek Jacoby
 
PPTX
Untangling spring week5
Derek Jacoby
 
PPTX
Biohacking
Derek Jacoby
 
PDF
Beyond the Gig Economy
Jon Lieber
 
PDF
Recovery: Job Growth and Education Requirements Through 2020
CEW Georgetown
 
PPTX
3 hard facts shaping higher education thinking and behavior
Grant Thornton LLP
 
PDF
African Americans: College Majors and Earnings
CEW Georgetown
 
PDF
The Online College Labor Market
CEW Georgetown
 
PDF
Game Based Learning for Language Learners
Shelly Sanchez Terrell
 
PDF
What's Trending in Talent and Learning for 2016?
Skillsoft
 
PDF
SXSW 2016 takeaways
Havas
 
Untangling spring week3
Derek Jacoby
 
Untangling spring week4
Derek Jacoby
 
Untangling the web - week 3
Derek Jacoby
 
Untangling spring week5
Derek Jacoby
 
Biohacking
Derek Jacoby
 
Beyond the Gig Economy
Jon Lieber
 
Recovery: Job Growth and Education Requirements Through 2020
CEW Georgetown
 
3 hard facts shaping higher education thinking and behavior
Grant Thornton LLP
 
African Americans: College Majors and Earnings
CEW Georgetown
 
The Online College Labor Market
CEW Georgetown
 
Game Based Learning for Language Learners
Shelly Sanchez Terrell
 
What's Trending in Talent and Learning for 2016?
Skillsoft
 
SXSW 2016 takeaways
Havas
 
Ad

Similar to Untangling the web9 (20)

PPTX
Untangling - fall2017 - week 9
Derek Jacoby
 
PPTX
Untangling - fall2017 - week 8
Derek Jacoby
 
PDF
Getting MEAN with Mongo Express Angular and Node 1st Edition Simon Holmes
nqaoylllvg977
 
PDF
Getting MEAN with Mongo Express Angular and Node 1st Edition Simon Holmes
sherajqublan
 
KEY
20120306 dublin js
Richard Rodger
 
ODP
The Full Stack Web Development
Sam Dias
 
KEY
20120802 timisoara
Richard Rodger
 
PDF
Web dev syllabus
Adithcheshan
 
PPTX
fsd2ejhwgufgu ewgwuehguhef heguhgefduhg.pptx
nikhilkjoshua
 
PDF
NEW BACKEND.pdf
Shreejit Sanjay Jadhav
 
PDF
2.1 Web Dev Syllabus.pdf.pdf
BdBangladesh
 
PDF
Web Dev Syllabus web site and web application development tehnonogies
jeetsonawaneofficial
 
PDF
Learn backend java script
Tsuyoshi Maeda
 
PPTX
Untangling fall2017 week1
Derek Jacoby
 
PPTX
Full-Stack-Presentation-Slide(Longsaar_Francis).pptx
longsaarmuknaan
 
PDF
Creating Sentiment Line Chart with Watson
Dev_Events
 
PDF
Download full ebook of Learning Node Shelley Powers instant download pdf
zeitsloyerqy
 
PDF
Full Stack Developer Course | Infinite Graphix Technologies
Infinite Graphix Technologies
 
PPTX
Untangling spring week11
Derek Jacoby
 
PDF
Web+Dev+Syllabus.pdf
MohammadAhmad589157
 
Untangling - fall2017 - week 9
Derek Jacoby
 
Untangling - fall2017 - week 8
Derek Jacoby
 
Getting MEAN with Mongo Express Angular and Node 1st Edition Simon Holmes
nqaoylllvg977
 
Getting MEAN with Mongo Express Angular and Node 1st Edition Simon Holmes
sherajqublan
 
20120306 dublin js
Richard Rodger
 
The Full Stack Web Development
Sam Dias
 
20120802 timisoara
Richard Rodger
 
Web dev syllabus
Adithcheshan
 
fsd2ejhwgufgu ewgwuehguhef heguhgefduhg.pptx
nikhilkjoshua
 
NEW BACKEND.pdf
Shreejit Sanjay Jadhav
 
2.1 Web Dev Syllabus.pdf.pdf
BdBangladesh
 
Web Dev Syllabus web site and web application development tehnonogies
jeetsonawaneofficial
 
Learn backend java script
Tsuyoshi Maeda
 
Untangling fall2017 week1
Derek Jacoby
 
Full-Stack-Presentation-Slide(Longsaar_Francis).pptx
longsaarmuknaan
 
Creating Sentiment Line Chart with Watson
Dev_Events
 
Download full ebook of Learning Node Shelley Powers instant download pdf
zeitsloyerqy
 
Full Stack Developer Course | Infinite Graphix Technologies
Infinite Graphix Technologies
 
Untangling spring week11
Derek Jacoby
 
Web+Dev+Syllabus.pdf
MohammadAhmad589157
 
Ad

More from Derek Jacoby (8)

PPTX
Untangling11
Derek Jacoby
 
PPTX
Untangling - fall2017 - week 10
Derek Jacoby
 
PPTX
Untangling - fall2017 - week 7
Derek Jacoby
 
PPTX
Untangling the web - fall2017 - class 4
Derek Jacoby
 
PPTX
Untangling the web fall2017 class 3
Derek Jacoby
 
PPTX
Untangling fall2017 week2_try2
Derek Jacoby
 
PPTX
Untangling fall2017 week2
Derek Jacoby
 
PPTX
Untangling spring week12
Derek Jacoby
 
Untangling11
Derek Jacoby
 
Untangling - fall2017 - week 10
Derek Jacoby
 
Untangling - fall2017 - week 7
Derek Jacoby
 
Untangling the web - fall2017 - class 4
Derek Jacoby
 
Untangling the web fall2017 class 3
Derek Jacoby
 
Untangling fall2017 week2_try2
Derek Jacoby
 
Untangling fall2017 week2
Derek Jacoby
 
Untangling spring week12
Derek Jacoby
 

Recently uploaded (20)

PDF
Antianginal agents, Definition, Classification, MOA.pdf
Prerana Jadhav
 
PDF
TOP 10 AI TOOLS YOU MUST LEARN TO SURVIVE IN 2025 AND ABOVE
digilearnings.com
 
PPTX
TOP 10 AI TOOLS YOU MUST LEARN TO SURVIVE IN 2025 AND ABOVE
digilearnings.com
 
PPTX
Translation_ Definition, Scope & Historical Development.pptx
DhatriParmar
 
PPTX
Artificial Intelligence in Gastroentrology: Advancements and Future Presprec...
AyanHossain
 
PDF
Module 2: Public Health History [Tutorial Slides]
JonathanHallett4
 
PDF
Tips for Writing the Research Title with Examples
Thelma Villaflores
 
PPTX
I INCLUDED THIS TOPIC IS INTELLIGENCE DEFINITION, MEANING, INDIVIDUAL DIFFERE...
parmarjuli1412
 
PPTX
The Future of Artificial Intelligence Opportunities and Risks Ahead
vaghelajayendra784
 
PDF
Virat Kohli- the Pride of Indian cricket
kushpar147
 
PPTX
Basics and rules of probability with real-life uses
ravatkaran694
 
PPTX
Introduction to Probability(basic) .pptx
purohitanuj034
 
PPTX
How to Track Skills & Contracts Using Odoo 18 Employee
Celine George
 
PDF
The-Invisible-Living-World-Beyond-Our-Naked-Eye chapter 2.pdf/8th science cur...
Sandeep Swamy
 
PPTX
Electrophysiology_of_Heart. Electrophysiology studies in Cardiovascular syste...
Rajshri Ghogare
 
PDF
My Thoughts On Q&A- A Novel By Vikas Swarup
Niharika
 
PPTX
PROTIEN ENERGY MALNUTRITION: NURSING MANAGEMENT.pptx
PRADEEP ABOTHU
 
PPTX
LDP-2 UNIT 4 Presentation for practical.pptx
abhaypanchal2525
 
PPTX
Unlock the Power of Cursor AI: MuleSoft Integrations
Veera Pallapu
 
PPTX
Cybersecurity: How to Protect your Digital World from Hackers
vaidikpanda4
 
Antianginal agents, Definition, Classification, MOA.pdf
Prerana Jadhav
 
TOP 10 AI TOOLS YOU MUST LEARN TO SURVIVE IN 2025 AND ABOVE
digilearnings.com
 
TOP 10 AI TOOLS YOU MUST LEARN TO SURVIVE IN 2025 AND ABOVE
digilearnings.com
 
Translation_ Definition, Scope & Historical Development.pptx
DhatriParmar
 
Artificial Intelligence in Gastroentrology: Advancements and Future Presprec...
AyanHossain
 
Module 2: Public Health History [Tutorial Slides]
JonathanHallett4
 
Tips for Writing the Research Title with Examples
Thelma Villaflores
 
I INCLUDED THIS TOPIC IS INTELLIGENCE DEFINITION, MEANING, INDIVIDUAL DIFFERE...
parmarjuli1412
 
The Future of Artificial Intelligence Opportunities and Risks Ahead
vaghelajayendra784
 
Virat Kohli- the Pride of Indian cricket
kushpar147
 
Basics and rules of probability with real-life uses
ravatkaran694
 
Introduction to Probability(basic) .pptx
purohitanuj034
 
How to Track Skills & Contracts Using Odoo 18 Employee
Celine George
 
The-Invisible-Living-World-Beyond-Our-Naked-Eye chapter 2.pdf/8th science cur...
Sandeep Swamy
 
Electrophysiology_of_Heart. Electrophysiology studies in Cardiovascular syste...
Rajshri Ghogare
 
My Thoughts On Q&A- A Novel By Vikas Swarup
Niharika
 
PROTIEN ENERGY MALNUTRITION: NURSING MANAGEMENT.pptx
PRADEEP ABOTHU
 
LDP-2 UNIT 4 Presentation for practical.pptx
abhaypanchal2525
 
Unlock the Power of Cursor AI: MuleSoft Integrations
Veera Pallapu
 
Cybersecurity: How to Protect your Digital World from Hackers
vaidikpanda4
 

Untangling the web9

  • 1. UNTANGLING THE WEB CLASS 10 – DATABASES AND SERVERS
  • 2. 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
  • 3. 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)
  • 4. 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.
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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”)
  • 12. MAKE SURE CLOUD FOUNDRY INSTALLED PROPERLY  Open git bash  Type “cf” and press enter and you should see a list of cloud foundry options
  • 13. 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”
  • 14. 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
  • 15. 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 “> [email protected] start C:Usersdereknode-helloworld  > node server.js”  Now point a browser to http://localhost:8080  You should see “Hello World!” in the browser
  • 16. 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 [email protected] –s dev”
  • 17. 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!
  • 18. 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
  • 19. 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/
  • 21. DATABASES  SQL versus noSQL  Flavours of SQL and noSQL  Why use a database at all?  Advanced database topics  Schema design  Replication  Transactions
  • 22. 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
  • 23. LOCAL SQL EXAMPLE  https://jsfiddle.net/m5rh3a83/1/  (for more details see here: https://www.tutorialspoint.com/html5/html5_web_sql.htm)
  • 24. FIREBASE EXAMPLE  https://jsfiddle.net/gz74nds3/  And look at the database configuration at firebase.io
  • 25. 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)
  • 26. 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