Week Nº 18

Session Recording

Picking Up with JS

We’ll start today where we left off with JS, last week:

The Are.na API

Meet JSON

Before we get into our Are.na demo, let’s talk about JSON (JavaScript Object Notation)⁠—the most common way an API responds with data:

We’ll be using our example channel we showed last week! Note the content as it is presented on Are.na.
We can access the data from the channel by making a request to a special Are.na API URL, called an “endpoint”:

https://api.are.na/v3/channels/typography-and-interaction-too
There the server responds with the channel content, now not as HTML, but as structured data in JSON⁠—a hierarchical format/syntax that is based upon JavaScript, to represent different types of data and their relationships.

In the context of a CMS, this structure is often reflects the schema.
Browsers don’t display JSON nicely by default, but there are extensions (Chrome, Safari, Firefox) to make it easier to read.
Changes made on Are.na will show up in the JSON the next time it is requested! In their schema, there is also a separate endpoint for the blocks themselves:

https://api.are.na/v3/channels/typography-and-interaction-too/contents
For the purposes of our project, we’ll only be requesting data (called a GET )⁠—but know that APIs are also used to send (POST ), update (PUT ), and delete (…DELETE ) as well.

Let’s try it out

For our “back nine” today, we’re going to be doing a demo/workshop to get us plugged into and using this data. We’ve put together a demo repository with our example code, for today:

links

Here is our agenda to go through it:

Simple, static index.html
- There’s almost nothing there! All of our content will come from the JSON, placed and turned into HTML
- These are just the containers where we will insert our content
- “IRL” you would want much more content in the file itself, for search indexing and faster performance
On to arena.js
- Talk about these arrow functions!
- Using if/else conditional logic to sift our block types
- And template literals/strings, making DOM from your data
- Call out <audio> and <video> examples, show in Chrome/Safari
- For the adventurous, more info on the fetch API
- Pop open the console to see the data
Let’s “roll our own”
- console.log() the whole JSON response, “walk” the object
- Rough out a new block/content type (like images) from the data
- Inspect a rendered page, connecting the dots
- If we have time, add another insertion point for a “filtered” list

For Next Week

Make sure your channel covers all the Are.na block types, if it doesn’t already. This is a multi media project! The more, varied, and balanced blocks you have, the better it will be.
Pull down the template repo. Play around with it, study it, then incorporate/adapt the arena.js into your own project.
You will use this to complete the next phase of your project:

Project Nº 4: Are.na as an API

Update your in-progress repo based on the example code and demo we went through today. Remove the static/hard-coded blocks from your project⁠—all the content should now be coming from the Are.na channel. Continue iterating on your design, accommodating and adjusting to the live data.
Make sure we have the link to your live, updating project:

Submission Form
We will be reviewing your work in class next week⁠—so make sure everything is working and be prepared to discuss your concept/design!