Configure an API Management service instance for the BrezyWeather API. You will use this service to import the OpenAPI specification and create new APIs. Use the Basic pricing tier while creating the account. Moreover, you may need to wait about an hour for this service to get deployed. You already have the resource group created for you.

Search for api management from the main search bar (1), and select the API Management services service (2). The API Management services page gets loaded.
Click the Create button to create a new API Management service.
Under the Basics tab, enter the following details:
1. Subscription: Udemy (1)
2. Resource group: Use the resource group preconfigured for your account (2)
3. Region: (US) West US (3)
4. Resource name: apim-brezyweather-prod-xxx. Replace xxx with your initial or a random alphanumeric text to get a globally unique resource name (4)
5. Organization name: BrezyWeather (5)
6. Administrator email: Enter the email where you want to receive an email when the API Management service deployment is completed (6)

Select the Pricing tier as Basic (99.95% SLA) (1) and click the Review + create button to review the service configuration (2). You can check the API Management pricing matrix article under the Resources section to explore the pricing options for this service.
Under the Review + install tab, review the configuration settings, and click the Create button.
You should see the deployment in-progress message. It can take about 1 hour for this deployment to complete. It would be best if you waited until the deployment was complete.
You should receive an email once the instance is ready to use.
Go back to the deployment page in the Azure Portal. You should see the successful deployment message. Click the Go to resource button to navigate to the newly created service.
Under the Overview section, you should see the Status as Online.
Verify that the deployment is complete. To do this, click the APIs menu (1), Echo API (2), Test tab (3), GET Retrieve resource (4), and the Send button (5). You are sending a simple HTTP GET request for the default Echo API generated by Azure.
You should see the response as 200 OK, which confirms the proper deployment of the API Management service.

2. Set up BrezyWeather API in Azure API Management

Configure the BrezyWeather API in the newly created APIM instance. To do this, you must import the latest OpenAPI specification of the BrezyWeather API to the Azure API Management service. You can find the BrezyWeather-OpenAPI-v1.json file in the Assets section. This API specification document exposes GET & POST operations for the /weather path and GET, PUT, & DELETE for the /weather/{id} path. To work with the developer portal, you must configure mock responses for all endpoints to return HTTP 200 OK.

Delete the default Echo API. To do this, click on the three dots near Echo API (1) and the Delete option (2).
Click Yes in the confirmation dialog. The Echo API should get deleted.
Import the OpenAPI specification to this service instance. To do this, from the APIs section (1), click the Add API option (2), and finally, OpenAPI (3). You will get a dialog to configure the API details.
Click the Select a file button to browse and select the BrezyWeather-OpenAPI-v1.json file. You can find this file in the Resources section. You should check the Things to consider during the OpenAPI import article in the Resources section to know the behind-the-scenes actions taking place during the import.
Enter the following values for the new API:
1. Display name: BrezyWeather (1)
2. Name: brezyweather (2). This name gets auto-created based on the display name.
  Click the Create button to import the API (3). You may need to wait up to two mins for the import to complete.

You should see BrezyWeather API under the All APIs menu (1). Also, you will see the five operations under the All operations section to its right (2).
Configure mock responses for all endpoints. To do this, select All operations (1), then Add policy under Inbound processing (2). The Add inbound policy pane appears. If your screen resolution is lower, you may need to scroll a little in the Inbound processing pane.
Select the Mock responses policy. The Inbound processing dialog appears.
The response defaults to 200 OK, application/json (1). Click the Save button to accept the default and save the mock response (2).
You will see the label Mocking is enabled in the Design tab. This text shows that the mocking feature is enabled for all the operations within this API.
Test the GET endpoint by navigating to the Test tab (1), then GET Get all the weather forecast endpoints (2) and click the Send button (3).
You will get the response as 200 OK and a mocked weather forecast detail entry.

Assets

BrezyWeather-OpenAPI-v1.json

3. Add and configure a new Product

You must create a new Weather product and associate the BrezyWeather API. You are expected to grant the Developers and Guests group access to this product. Finally, you should publish the newly created product so you can use it in the developer portal.

Select Products under the APIs section (1) and then the + Add button (2). The Add product page appears.
Enter or select the following details to add a new product named Weather:

- Display name: Weather (1)

- Id: weather (2). It gets auto-updated based on the display name entered above.

- Description: APIs related to weather (3)

Click the Create button to add the new product (4).
The Products page shows the Weather product in the list with the Access control containing Administrators and the State is Not published.
Click on the Weather product. The Weather product page appears.

Meanwhile, Products are one of the contents in the Developer Portal of APIM. Along with it, you can also configure APIs, Portal web pages, and so on. You can refer to the Developer portal architectural concepts article under the Documentation section to learn the different types of content included in a developer portal.
Associate the BrezyWeather API with it. To do this, select APIs under the Product menu (1) and then + Add button (2).
Select the BrezyWeather entry from the list by clicking the checkbox (1) and clicking the Select button to add the API to this product (2).
The APIs page shows the newly associated BrezyWeather API with the name brezyweather.
Add the Developers and Guests group to the Access control. To do this, select Access control under the Product menu (1) and then the + Add group button (2).
Select the Developers and Guests groups from the dialog (1) and click the Select button (2).
The Access control page shows all three groups, namely administrators and the newly added developers and guests.
Publish the Weather product. To do this, select the Overview menu (1), then the Publish button (2). The product gets published.
You will see the State of the product as Published.
Click the products link from the breadcrumb at the top to go to the Products page.
The Products page shows the list of products configured, including the newly added Weather product.

4. Build the Developer Portal

Azure provides a default website for the developer portal that includes critical components, thereby saving a lot of time for the team. You need to customize the portal with minimal details for the BrezyWeather API and its products. You can ignore the logo for the portal, as it will be handled by the UI team later. The home page should have only one section with a title and subtitle; you can remove the remaining sections. In the end, publish the changes to make them available to the developers.

View the Developer Portal with the existing features. To do this, scroll down the sidebar menu, under Developer portal, select Portal overview (1), then Developer portal (2).
The developer portal gets launched in a new browser tab. It takes up to 2 mins for the portal to get initialized the first time. You will then get the home page of your APIM that shows a default welcome text.
Update the title as Welcome to BrezyWeather! and the subtitle as We provide industry-leading Weather APIs on the home page by double clicking that section and editing them.
Next, you need to remove all the sections below it one by one. First, remove the API statistics section by clicking on the top right corner of the section (1) and clicking the delete icon (2).
Remove the About us section by clicking on the top right corner of the section (1) and clicking the delete icon (2).
Remove the Our APIs section by clicking on the top right corner of the section (1) and the delete icon (2).
Remove the API usage section by clicking on the top right corner of the section (1) and clicking the delete icon (2).
Remove the Trust section by clicking on the top right corner of the section (1) and the delete icon (2). By now, you have removed all the sections in the home page except the main section.
Remove the placeholder logo of the portal. First, select the Layouts menu from the sidebar (1) and Default (2). The default layout appears.
Click on the region near the logo to bring up the edit controls.
Click the delete icon to remove the logo.
Click the Go back icon to go to the home page.
Click the Save changes button at the bottom to save the changes made. Meanwhile, sections and logos are only a subset of content you can customize for the portal. You can refer to the Understand the portal's administrative interface article under the Documentation section to learn more about the different elements that you can customize on the portal.
Publish the changes. Select Operations from the sidebar (1) and Publish website (2).
You will see a publishing message at the bottom right corner. It will take a couple of minutes for the publish activity to complete.
Once the changes are published, return to the Azure Portal and reload the webpage by pressing the F5 key (Windows) or Cmd + R (macOS) to check the publish status. Once it is complete, you will see the last published date and time details.
View the Developer Portal using the following URL in an Incognito or Private Mode browser tab to ensure the changes reflect. You should see the updates you made. Replace xxx with your initial or the random text you used earlier.

https://apim-brezyweather-prod-xxx.developer.azure-api.net

5. Create a Developer Account and Validate the Portal

Before you share the portal with all the developers who integrate with your product, ensure it works as expected. To do this, you must create a new developer account and verify that you can sign in. Next, validate the products and APIs configured in the portal.

Sign up for a new account. To do this, click the Sign up button from the top right of the home page. The Sign up page appears. Here you are creating an account for a group of type Developers. It is one among the three system-level groups provided by APIM. You can refer to the System groups in APIM article under the Documentation section to learn more.
Enter the following details:

- Email: Your email (1)

- Password: A complex password (2)

- Confirm password: Enter the password again (3)

- First name: Your first name (4)

- Last name: Your last name (5)

- Enter the characters you see: Enter the displayed captcha (6)

Click the Sign up button to finish creating the user account (7).
The page shows a message to verify your email account.
You will receive an activation email with the subject Please confirm your new BrezyWeather API account. Click the link included in the email to activate your account. It opens a new browser window and shows the Sign in page.
Sign in using the email (1) and password (2) you had entered before. Click the Sign in button (3).
The home page of the Developer Portal appears with your account signed in.
Select the APIs menu from the top menu bar (1)—the APIs page loads with the BrezyWeather API of type REST. Select the BrezyWeather API (2).
The BrezyWeather API page loads displaying all the endpoints that are part of it.
Select the Products menu from the top menu bar (1). You will see the Products list, including the newly created Weather product (2).

6. Create a Subscription and access the BrezyWeather API

To verify the APIs associated with the portal, you need to create a subscription for the product. To do this, create a new subscription named Developer Account for the Weather product. Next, try the GET Get all the weather forecast operation using the key from this newly created subscription and execute the request.

Select the Weather product from the Products page. The Weather product page appears.
You would not have any subscriptions as you haven't created one yet.
Create a new subscription by entering the subscription name as Developer Account (1) and clicking the Subscribe button (2). The User Profile page appears. You are creating a subscription at the Product level here. You can refer to the Scope of subscriptions article under the Documentation section to learn the types of scopes at which a subscription can be created.
You will see the newly created subscription and the primary and secondary keys needed to access the API endpoints. You do not need to copy them, as they will be available automatically in the console when tested from within Azure APIM.
Navigate to the APIs menu (1) and BrezyWeather API (2). The BrezyWeather API page appears.
Execute the GET operation to test the API. To do this, select GET Get all the weather forecast endpoints from the sidebar (1) and click the Try it button to the right (2).
The Primary: Developer Account key is automatically selected for the Subscription key.
Click the Send button to execute the HTTP request. You may need to scroll down to navigate this pane's end.
You will get an error due to CORS. This error happens because you are sending the request from a browser that conflicts with the domain of the Web API service. You need to enable CORS setting for this portal.
Return to the Azure Portal, and enable the CORS setting. To do this, ensure you are under the Portal overview page, then under the Enable CORS section, select Enable CORS button.
Click Yes in the confirmation dialog.
The CORS setting gets enabled successfully.
Return to the developer portal, and execute the request again by clicking the Send button. The API gets executed against the APIM and returns the mock response with the status code 200 OK and sample weather forecast details.

7. Clean up the resources

Delete the Azure API Management instance you created, as it incurs recurring costs. You can either delete this resource from the resource group assigned to you or go to the APIM service and delete it.

From the top section of the Azure portal, search for resource groups (1) and select the Resource groups service from the result (2).
Click the resource group that you had used earlier. The respective resource group page appears.
Under the Resources section, select the APIM instance by clicking its checkbox.
Click on the context menu at the top-right (1) and select the Delete option (2). Depending on your screen size and resolution, you may have the Delete option directly in the toolbar.
Confirm the deletion by entering yes in the confirmation dialog (1) and clicking the Delete button (2).
You need to wait for some time for the resource to get deleted. You should see a confirmation message after the deletion process gets completed

Build a Developer Portal in Azure API Management