Welcome everyone! Today, we will learn how to create a simple application using two open API models: Check DVD 3.5 and Daily. We will use Bootstrap to create a simple user interface. So, let’s go to Visual Studio and open a new terminal window. Type ’ng new’ to create a new Angular application. Define the name as ‘EscapeTest’ and select CSS as the style. Open the project containing folder. Now, we have a simple structure with just HTML, TypeScript, and module files. Open a new terminal window and create a new service to make HTTP requests against the OpenAI API. Go to the source app folder and use the ’ng g s’ command to create a new service called ‘openAI’. Let me add the right code. Okay, we have our OpenAI service. Go to the Free Shell OpenAI documentation. I’ll provide all the links in the description below. First, you need to create an account and OpenAI will give you a free trial with five credits or five dollars. Here, the introduction says that we need to install the Node.js library. Copy the command and paste it in the terminal window to install all the dependencies needed to use OpenAI version 4. We need to authenticate using API keys. But before that, let’s check the code. This is a sample code for Node.js, but this code is from version 3. We will use it to perform requests directly using this URL. Let’s create a new method called ‘getGPTResponse’. It will take the prompt as a string and return an observable. We will use the built-in HTTP client provided by Angular. So, import the ‘HttpClient’ class from ‘@angular/common/http’. We also need to import the module. In the imports array, add ‘HttpClientModule’. Now, in the constructor, import the ‘HttpClient’ and create an instance of it called ‘http’. Take a look at the response from the GPT 2.5. We have this JSON format and we’ll use the ‘content’ property. Let me declare this in a similar model in the response. So, we have our ‘getGPTResponse’ method. Now, how to get daily images? So, go to the second URL that is for the Daily API. How to make HTTP requests? This URL, content type, and the ‘Authorization’ header are the same. But the body parameters are different. Let me copy this method and call it ‘getDailyResponse’. It will receive a title as the input and the response object is different. It is a data array with a ‘url’ property. Copy the URL. The body parameters are different. The prompt is the title and the number of images is limited to one. The size is defined as 512 square. Let’s define it as 512 square. The headers are the same. Now, use the ‘pipe’ function and the ‘map’ operator to just take the URL from the first data element. So, we have our two methods to use in our application. Now, use Bootstrap to create a simple card component. To install Bootstrap, copy this command to install all the Bootstrap dependencies. Add the link tag in the head section of the index.html file. Add the script tag in the body section. Now, we’re ready to build our simple HTML. Remove all the sample HTML code and add a form control. Use a simple input to get the search text that the user wants to pass. Add a button to get results. Call the ‘getResults’ method when the button is clicked. Now, we’ll display the content using the Bootstrap card component. Use the HTML sample code provided by Bootstrap. Use interpolation to pass the title and description. Use the ’ngFor’ directive to iterate over the ‘results’ array. So, we have our HTML defined. Now, go to the app component TypeScript file and call the ‘getResults’ method. Making HTTP requests against the Daily and GPT 2.5. In the constructor, inject the ‘openAI’ service. Call the methods here. Just define a prompt to get just a few results. So, we have our title and description. Now, call the ‘getDailyResponse’ method to get the images associated with the title. So far, so good. We have our results, title, description from GPT 2.5, and daily images. Save all and run the application. Search for ‘Mouse with Animals in the World’ and let’s see what happens. Cool! We have the title and description. The image is still loading. It seems that it doesn’t contain any image. Let’s search for ‘Most Beautiful Places in the World’. With the search, let’s see how it works. We have a text generated by GPT 2.5 and the images are loading. Okay, we have all the images provided by Daily. So far, so good!
