Creative Computing

Joel Gethin Lewis

Unit 4 / Block 2: "Coding for Collaborative Web Development": Lecture 3: Geolocation and databases

What I'm going to talk about today:

0. What questions to do you have for me?
1. Parsing CSV and charting with chart.js
2. Parsing JSON and making maps with Leaflet.js
3. Databases, why are they useful? Image saving NeDB example
4. Databases, persistent high score lowDB example
5. What questions to do you have for me?

0. What questions to do you have for me?

• What questions to do you have for me?
• What are your concerns? What are you worried about? What do you want to ask but you are embarrassed?
• All questions allowed!
• 5 minutes to message me on Slack in private.
• This idea came from Zach Lieberman. He does this exercise at the start of every session of School of Poetic Computation in New York.

1. Parsing CSV and charting with chart.js

• What is CSV? CSV stands for "Comma-separated values". It's a way of storing data in a text file, with lots of commas to break up the data. I prefer JSON, but lots of older datasets will be supplied in .csv format, so it's good to learn it.
• Did you watch the the Coding Train playlist: "Working With Data & APIs in JavaScript"? I wanted to focus on a certain part, "1.3: Graphing with Chart.js - Working With Data & APIs in JavaScript".
• Let's look at the Chart.js website.
• Let's take a look at the source code, and make this example on Glitch.com together.
• What else could you use this example for?

2. Parsing JSON and making maps with Leaflet.js

• What is JSON? JSON stands for "JavaScript Object Notation". It's a way of storing data in a text file, with as arrays or attribute-value pairs.. An attribute-value pair is just a label and a value for that label.I love JSON!
• Continuing the the Coding Train playlist: "Working With Data & APIs in JavaScript", let's look at a later section, "1.5 Mapping Geolocation with Leaflet.js - Working with Data and APIs in JavaScript".
• Let's look at the Leaflet.js website.
• Let's take a look at the source code, and make this example on Glitch.com together.
• What else could you use this example for?

3. Databases, why are they useful? Image saving NeDB example

• Using a database enables persistence - perfect for a high score table or something like that.
• Databases can also help with concurrency problems - what happens if two users edit data differently and then save their results? Which is the correct version?
• Continuing the the Coding Train playlist: "Working With Data & APIs in JavaScript", let's look at some later sections, "2.4 Saving to a Database - Working with Data and APIs in JavaScript", "2.5 Database Query - Working with Data and APIs in JavaScript" and "2.6 Saving Images and Base64 Encoding - Working with Data and APIs in JavaScript"
• Let's take a look at the source code, and look at the example code for a more complete version of the Data Selfie project, from Joey Lee.
• For reference, here is the NeDB Github repository.
• What else could you use this example for?

4. Databases, persistent high score lowDB example

• Here is an example of another database engine, lowdb. It's called lowdb because it uses a popular JavaScript library: Lodash. Lodash has lots of useful code for dealing with strings, arrays and other things.
• Let's take a look at the source code for a game that uses lowdb to have a persistent high score.
• The example above was created by Char Stiles for Golan Levin's course on Interactivity & Computation.
• What else could you use this example for?

5. What questions to do you have for me?

• What questions to do you have for me?
• What are your concerns? What are you worried about? What do you want to ask but you are embarrassed?
• All questions allowed!

Thanks!

• More about me: @joelgethinlewis
• Get in contact via the CCI Slack!
• Website:
  https://jgl.github.io/CCIDiploma-Summer2020/
• Today's slides:
  https://jgl.github.io/CCIDiploma-Summer2020/app_lecture_03.html