This document provides an agenda and information for moving a website project to Bluemix. It discusses setting up a local development environment, using JSON and REST APIs, and introduces Project 3 which involves adding a database and chatbot to an existing website project. Students are asked to deploy their Project 2 website to Bluemix, set it up locally, and submit links to the Bluemix site and GitHub repository for homework.

1. UNTANGLING THE WEB
FALL 2017 WEEK 9 –JSON, REST API’S, MOVING YOUR WEBSITE TO BLUEMIX,
PROJECT 3

2. AGENDA
• Homework discussion
• Running locally
• Security
• .gitignore
• JSON
• RESTful APIs
• Moving your project 2 to Bluemix
• Project 3
• Homework 9

3. AGENDA (SCRATCH)
• Homework discussion – go over joins, talk about it in detail
• Running locally
• Security – getting credentials, creating vcap-local.json
• .gitignore – vcap, node_modules
• Npm install, npm start
• Looking at output logs
• Looking at console log in client
• Show json in console log
• JSON – talk about how json is structured. Go over helper functions for parsing json in node. Prettify, parse, etc.
• RESTful APIs – go grab REST section from last term
• Moving your project 2 to Bluemix -
• Project 3
• Homework 9

4. HOMEWORK 8
• Submit a github link with a file containing the query and results for each question
• Using the stackoverflow database here: http://data.stackexchange.com/stackoverflow/queries
• List the oldest 10 Victoria, BC users and order them by age.
• List the top 10 highest reputation users in Victoria that have answered questions with the tag javascript.
• List the top 5 Victoria developers by accepted answer percentage
• List the top 10 Victoria developers by accepted answer percentage on questions with the tag javascript

5. SQL QUERY PROBLEMS
• Look over queries here:
• http://data.stackexchange.com/stackoverflow/queries
• Look on SQLZoo for the JOINS sections and make sense of that
• http://sqlzoo.net/wiki/The_JOIN_operation
• More about joins
• https://blog.codinghorror.com/a-visual-explanation-of-sql-joins/

6. AN APPROACH TO QUESTION 4
• SELECT TOP 10
• Users.Id,
• DisplayName,
• Location,
• Count(Posts.Id) AS Answers,
• AVG(CAST(Score AS float)) AS [Percentage Accepted]
• FROM Posts
• INNER JOIN Users ON Users.Id = OwnerUserId
• WHERE Location like '%##Location##%'
• AND Posts.Tags like '%##Tags##%'
• GROUP BY Users.Id, DisplayName, Location
• HAVING Count(Posts.Id) > 5
• ORDER BY [Percentage Accepted] DESC

7. A MORE ELEGANT APPROACH
• SELECT TOP 10
• Users.Id,
• Users.DisplayName,
• Users.Location,
• ROUND((CAST(SUM(CASE WHEN a.Id=q.AcceptedAnswerId THEN 1 ELSE 0 END) AS float) / COUNT(a.Id)) * 100, 1) AS AcceptedAnswerPercentage
• FROM Users
• JOIN Posts a ON a.OwnerUserId = Users.Id and a.PostTypeId = 2
• JOIN Posts q ON a.ParentId = q.Id
• WHERE Users.Location = 'Victoria, BC'
• AND q.Tags LIKE '%javascript%'
• GROUP BY Users.Id, Users.DisplayName, Users.Location
• ORDER BY [AcceptedAnswerPercentage] DESC

8. JSON
• JSON stands for JavaScript Object Notation
• JSON is a lightweight data-interchange format
• JSON is "self-describing" and easy to understand
• JSON is language independent *
• https://www.w3schools.com/js/js_json.asp

9. JSON
• Since the JSON format is text only, it can easily be sent to and from a server, and used as a data format by any
programming language.
• JavaScript has a built in function to convert a string, written in JSON format, into native JavaScript objects:
• JSON.parse()
• So, if you receive data from a server, in JSON format, you can use it like any other JavaScript object.
• (conversely, JSON.stringify() will go from object to string)

10. JSON IN THE CARS SQL EXAMPLE
• https://jsfiddle.net/m5rh3a83/1/
• (look at the results set in the console output)

11. CLOUDANT IS BASICALLY A JSON STORE
• IBM® Cloudant® is a managed NoSQL JSON database service built to ensure that the flow of data
between an application and its database remains uninterrupted and highly performant. Developers are
then free to build more, grow more and sleep more.

12. LOOK AT CLOUDANT DATA
• Recall the demo app from last week, let’s look at the objects that represent the images
• (through console.ng.bluemix.net, click on a database, then launch the tool)

13. LOOK AT APP.JS FOR AN EXAMPLE OF STRINGIFY
• var responseData = createResponseData( doc.id, docName,
docDesc, []);
• docList.push(responseData);
• response.write(JSON.stringify(docList));
• console.log(JSON.stringify(docList));
• console.log('ending response...’);

14. LOOK TO APP.JS FOR AN EXAMPLE OF PARSE
• function getDBCredentialsUrl(jsonData) {
• var vcapServices = JSON.parse(jsonData);

15. REST API
• An architectural style called REST (Representational State Transfer) advocates that web applications should use
HTTP as it was originally envisioned. Lookups should use GET requests. PUT, POST, and DELETE requests should
be used for mutation, creation, and deletion respectively.
• Keep in mind that GET requests should never be used for updating information. For example, a GET request
for adding an item to a cart
• http://myserver.com/addToCart?cart=314159&item=1729
• would not be appropriate. GET requests should be idempotent. That is, issuing a request twice should be no
different from issuing it once. That’s what makes the requests cacheable. An “add to cart” request is not
idempotent—issuing it twice adds two copies of the item to the cart. A POST request is clearly appropriate in
this context. Thus, even a RESTful web application needs its share of POST requests.
• (https://stackoverflow.com/questions/671118/what-exactly-is-restful-programming)

16. CLOUDANT REST API
• We’ll hide this detail behind an NPM package
• But it is possible to access cloudant just through the REST API
• https://developer.ibm.com/streamsdev/docs/integrating-with-cloudant-and-many-other-restful-
services/

17. NODEJS LOCAL SETUP
• You’ve all installed nodejs already, but haven’t used it for much
• Simplest version: https://code.visualstudio.com/docs/nodejs/nodejs-tutorial
• We’ll talk about how to run the bluemix example locally, though

18. SET UP LOCAL SECURITY
• Vcap-local.json
• Go get it from the bluemix console and save it in the project
• Make sure to add it to .gitignore!

19. GITIGNORE
• .gitignore is a file that tells git not to add certain files to your repository. Chief among these are any files
that have security credentials. Since your git repo is public you don’t want these up there and for some
credentials, like AWS keys, there are automated processes that scan public github repositories to steal
them
• Can also put other things you don’t need to save in there, for instance log files and the node_modules
directory

20. NPM
• Npm install is the first thing you’ll have to do, that brings in all the dependencies
• Then npm start

21. ADDING ANOTHER ROUTE AND VIEW
• Walk through the changes to app.js, adding an html page, and adding the route

22. RUNNING LOCALLY AND DEBUGGING
• We’ll cover actual debuggers later, but now there is a new place for console.log messages to go!

23. EJS
• EJS is a simple templating engine
• It is used for things like headers and footers, but also to pass variables from node into your html
• This way you can do data operations on the server side and just display on the client side
• Good tutorial: https://scotch.io/tutorials/use-ejs-to-template-your-node-application
• This is also a good resource: http://www.embeddedjs.com/getting_started.html

24. PROJECT WORK
• Possibilities:
• Look through the EJS tutorial and familiarize yourself with it. You will want to understand this for next week.
• Get a basic page up on bluemix and understand how to add routes, etc.
• Work on putting other things up to your cloudant database – understand the JSON format and the calls to
populate the database in app.js
• Get your project 2 pages up on bluemix (although not necessarily hooked up yet, the pages themselves should
be up there for this week’s homework.) As a stretch goal, break any headers and footers up into EJS partials and
get them to display

25. PROJECT 3
• You’ll need to implement a database backend for your project
• Database should have new item, search, and delete (optionally edit) from the ui
• You’ll need to implement a chatbot for your project
• Is it intuitive to use? Does it do something useful? Does it have good coverage?
• You’ll need to host your project on bluemix
• You’ll need to show a working demo of your project 2 hooked up to these backend services

26. PROJECT 3 GRADING
• All project 3 presentation are due on November 29th in class, late projects will not be accepted
• If you are horribly ill and nobody in your group can come in to present, the project itself is still due and the
presentation marks will be forfeit, or if absolutely necessary you can send me a demo video
• 15 points total
• 4 points presentation
• Is the demo good, is the website working, is the story about why it is interesting smooth
• 4 points database design and function (do things actually work)
• What is your table structure like? Talk about any problems you ran into. How was connecting it to the front end?
• 3 points chatbot implementation – is it effectively designed and well implemented?
• 4 points code quality and robustness
• Not everything has to work, but if it is there I want it to do nothing at all or the right thing. How have you structured your code? Is
it commented and easy to understand? Everything checked into github and deployed to the server? Good commit messages?

27. HOMEWORK 9 (DUE NOV 8 BEFORE CLASS)
• (can be done as a project group)
• Take your project 2 website and port it up to Bluemix (welcome to make changes, but not required to)
• Make sure that the github project is based off of the nodejs cloudant starter we discussed in class
• Submit a link to the site running on Bluemix and a link to your github for the group
• (to be done individually)
• Get the site running locally on your machine so that you can efficiently make changes
• Send me an email with a screenshot of the site running on your local machine