Week 1: Trying to make node-fetch happen

[counselorbot[bot]]

Week 1 Step 6 ⬤⬤⬤⬤⬤⬤◯◯◯ | 🕐 Estimated completion: 25-35 minutes

Trying to make node-fetch happen

✅ Task:

• [ ] Run git pull and create a new branch called twocatz
• [ ] 1: Create and deploy an HTTP trigger Azure Function that creates a request for an image from the CataaS API (https://bit-cat.azurewebsites.net/cat/says/serverless)
• [ ] 2: Return the image in the request body encoded in base64 in JSON format
• [ ] 3: Place your function URL in a repository secret called TWOCATZ_ENDPOINT and commit function code in a file named twocatz/index.js to the twocatz branch
• [ ] 4: Create a pull request that merges twocatz to main, and only merge when the bot approves your changes!

💡 Note: Every time you make a new commit to twocatz, we will check your function by making a request.*

🚨 NOTE: If the CataaS API is not working, please use this alternate endpoint: https://bit-cat.azurewebsites.net/cat/says/serverless

🚧 Test your Work

When you paste your Function URL in your browser or make a GET request with Postman, you might get something like:

{
    "/9j/4AAQSk..."
}

1: Making requests in Azure

To make a request to the CataaS API, you can try using the node-fetch module, but there are many other ways to do it as you can see here.

❓ How can I make a request to the CataaS API?

Let's use the `node-fetch` module for this task. >‼️ Make sure you are in the **directory of your Azure function** to run these commands. 1. Install the module in terminal using the following commands in order: ```sh npm init -y npm install node-fetch@2 ``` 2. Add it to your code: Add this line of code to reference the module at the top of your code (outside of the function): `const fetch = require('node-fetch')` 3. Make the request! Add the following code within the function: ```js const resp = await fetch(THE_ENDPOINT, { method: 'GET' }); const data = await resp.arrayBuffer() // we need to receive it as a buffer since this is an image we are receiving from the API // Buffer?? https://developer.mozilla.org/en-US/docs/Web/API/Blob ``` 4. What should you place in place of `THE_ENDPOINT`? Change the code.

2: Return your images encoded in base64!

❓ What does it mean to encode something in base64?

Base64 is *just another way to represent data.* We can also represent the number 11 or 0 in base64. Remember that the images you see on your screen are actually just numbers! When we're coding websites, we can use base64 to display images on websites. The base64 outputted from your API can be used to create this:  Base64 encoding allows programs to encode binary data into text (ASCII characters) in order to prevent data loss. We do this since there are certain transfer channels that only reliably transfer text data, and this encoding method allows us to safely transfer images in the form of text.

❓ How can I encode data in base64?

```js base64data = Buffer.from(originaldata).toString('base64') //put what you want to turn into base64 inside "originaldata" //"originaldata" will be encoded in base64. ```

For fun: Once your API successfully returns the images in base64, you can see what they look like using this website.

❓ Now that I've got the picture in base64, how do I return it?

`context.res` is the key to answering this question! ```js context.res = { body: { your_picture_in_base64 } } ```
>💡 You need to put brackets to return the data in json format.

📹 Walkthrough Video

[counselorbot[bot]]

⏰ Time to merge!

Go ahead and merge this branch to main to move on. Great work finishing this section!

⚠️ If you receive a Conflicts error, simply press Resolve conflicts and you should be good to merge!

[counselorbot[bot]]

⚡️ You're ready for Serverless!

Move on to the next issue.