[ ] 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
[ ] 2: Return the image in the request body encoded in base64
[ ] 🚀 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
[ ] 🚀 Create a pull request that merges twocatz to main, but do not merge it
Note: Every time you make a new commit to twocatz, we will check your function by making a request.
🚧 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.
:exclamation: How can I make a request to the CataaS API?
1. Let's use the `node-fetch` module for this task. Install it on your Azure Portal console:
**Step 1: Install the module**
In the left tab, scroll down to **Console**.
Enter these commands in order:
```sh
npm init -y
npm install node-fetch
```
*If you're confused about what this "package" thing is, we'll explain more in depth in the next step.*
**Step 2: Add it to your code**
Add this line of code to reference the module at the top of your code:
`const fetch = require('node-fetch)`
2. Time to make the request!
```js
let resp = await fetch(THE_ENDPOINT, {
method: 'GET'
});
let 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
```
**Your turn!** What should you place in place of `THE_ENDPOINT`? Change the code.
2: Return your images encoded 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!
base64data = Buffer.from(originaldata).toString('base64')
//put what you want to turn into base64 inside "original data"
//"originaldata" will be encoded in base64.
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.
For fun: Once your API successfully returns the images in base64, you can see what they look like using this website.
:exclamation: 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
}
```
ghost
commented
3 years ago 
Week 1 Step 6 ⬤⬤⬤⬤⬤⬤◯◯◯ | 🕐 Estimated completion: 25-35 minutes
Trying to make node-fetch happen
✅ Task:
git pulland create a new branch calledtwocatzTWOCATZ_ENDPOINTand commit function code in a file namedTwoCatz/index.jsto thetwocatzbranchtwocatztomain, but do not merge itNote: Every time you make a new commit to
twocatz, we will check your function by making a request.🚧 Test your Work
When you paste your Function URL in your browser or make a GET request with Postman, you might get something like:
1: Making requests in Azure
To make a request to the CataaS API, you can try using the
node-fetchmodule, but there are many other ways to do it as you can see here.:exclamation: How can I make a request to the CataaS API?
1. Let's use the `node-fetch` module for this task. Install it on your Azure Portal console: **Step 1: Install the module** In the left tab, scroll down to **Console**.  Enter these commands in order: ```sh npm init -y npm install node-fetch ``` *If you're confused about what this "package" thing is, we'll explain more in depth in the next step.* **Step 2: Add it to your code** Add this line of code to reference the module at the top of your code: `const fetch = require('node-fetch)` 2. Time to make the request! ```js let resp = await fetch(THE_ENDPOINT, { method: 'GET' }); let 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 ``` **Your turn!** What should you place in place of `THE_ENDPOINT`? Change the code.2: Return your images encoded 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.
For fun: Once your API successfully returns the images in base64, you can see what they look like using this website.
:exclamation: 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 } ```