[ITP: Programming from A2Z] APIs and Libraries

RiTa

I followed this Coding Train tutorial to learn how to use the RiTa.js library. RiTa has tools for natural language processing and generative writing. It seems the video is a bit outdated when it comes to using the current version of RiTa, so here are some things I noted:

  • This is how you include the library: <script src="https://unpkg.com/rita"></script>

  • I did not create an RiString, I used the tokenize() function

  • No Lexicon object, right?! I checked the reference and no Lexicon exists…

I did run into an error following the tutorial when trying to check for plural nouns, or part of speech with the PENN tag of “nns”. I ended up figuring out that the randomWord() function expects JSON notation as the parameter by reading the documentation. So I fixed it, yay!

Dan, stop trying to make fetch happen! (Notes)

Sorry! Jk! I love the fetch() web API … but not actually because I don’t understand it.

  • loadJSON() function is asynchronous

  • fetch() returns a promise

  • Use .then() to deal with asynchronous promises

  • ES8 supports await()

    • If a function returns a promise you can use await()

    • Await() can only be in an ASYNC function!

    • Await() can replace .then() function for promises …. right?!

  • async functions by definition return a promise

  • API = application programming interface, how two applications communicate with each other

Assignment

Ok, so I’m officially SO CONFUSED! I wanted to see if I could get some data from the Datamuse API using async and await() because I just went through all the video examples for week 3 and there was no direct Coding Train example for that. From all the videos I learned that you should only call await on functions that return a promise, right?! I’m still not 100% sure what that is either…

So this is what I wrote first, I modeled it after the code we wrote in the fetch video.

My API call is definitely correct. This is what I get when I put that url in my browser.

Console for aync/await p5 sketch.

The response is really cryptic. It looks like it just returns a bunch of function names or something. Definitely not the JSON response to the Datamuse URL. So what’s all that stuff from lines 8-16? That’s the promise, right? Do I need that stuff?

Then I tried the loadJSON() function. This worked perfectly even though this isn’t how I wanted to retrieve the JSON data.

This response looks much better. This is the data I want to work with.

Then I also saw on the week 3 email from Dan, he attached a code example “Data muse with async and await”. Great, this is exactly what I’m trying to do! So I re-wrote my getDatamuse() function to call the json() function on the fetch response hoping that this would finally unwrap the API data for me. Basically, the console log shows me that data is a Promise and it is perpetually pending, it never resolves. There’s a screen shot below.

AHHHH! I forgot the second awaittttt! For line 25! Now I’m getting my data from the API.

Alrighty, here’s what I made for my assignment! I even tried to load the image asynchronously by calling the fetch() function, but this did not work for drawing on the canvas. I had to use the preload() function like normal. Also, in my sketch I call my asynchronous function in draw(). I was trying to draw the words to the canvas that the async function returned in draw() itself but I quickly learned that wouldn’t work. The text with the retrieved word from the API needs to be drawn to canvas in the async function itself and I lowered the frame rate of the sketch as well.

Some high art I made!

Q: Why use fetch and await instead of loadJSON?

References

All my p5.js sketches live here ❤️✨

https://github.com/dhowe/ritajs/tree/master

https://rednoise.org/rita/#reference

https://www.youtube.com/watch?v=lIPEvh8HbGQ