Adding nodejs web app to demonstrate generation of client sdk using A…

…PI Center extension (#43)

README.md

@@ -98,7 +98,8 @@ There are several ways to integrate API Center with your solutions. You can choo
 <!-- - [API Center Event Handler](./docs/api-center-event-handler.md) -->
 - [Custom Metadata Management](./docs/custom-metadata-management.md)
 - [API Center Portal Integration](./docs/api-center-portal-integration.md)
-- [API Client SDK Integration](./docs/api-client-sdk-integration.md)
+- [API Client SDK Integration - .NET](./docs/api-client-sdk-integration-dotnet.md)
+- [API Client SDK Integration - JavaScript](./docs/api-client-sdk-integration-nodejs.md)
 
 ## Resources
 

docs/README.md

@@ -115,13 +115,14 @@ If you want to integrate the CI/CD pipeline with GitHub Actions, you can use the
 
 There are several ways to integrate API Center with your solutions. You can choose the one that fits your needs.
 
-- [API Center Analyzer Integration - .NET](./docs/api-center-analyzer-integration-dotnet.md)
-- [API Center Analyzer Integration - JavaScript](./docs/api-center-analyzer-integration-nodejs.md)
-- [API Registration](./docs/api-registration.md)
+- [API Center Analyzer Integration - .NET](./api-center-analyzer-integration-dotnet.md)
+- [API Center Analyzer Integration - JavaScript](./api-center-analyzer-integration-nodejs.md)
+- [API Registration](./api-registration.md)
 <!-- - [API Center Event Handler](./docs/api-center-event-handler.md) -->
-- [Custom Metadata Management](./docs/custom-metadata-management.md)
-- [API Center Portal Integration](./docs/api-center-portal-integration.md)
-- [API Client SDK Integration](./docs/api-client-sdk-integration.md)
+- [Custom Metadata Management](./custom-metadata-management.md)
+- [API Center Portal Integration](./api-center-portal-integration.md)
+- [API Client SDK Integration - .NET](./api-client-sdk-integration-dotnet.md)
+- [API Client SDK Integration - JavaScript](./api-client-sdk-integration-nodejs.md)
 
 ## Resources
 

docs/api-center-analyzer-integration-nodejs.md

@@ -7,6 +7,12 @@ You can analyze your API documents using Visual Studio Code (Standalone) or Azur
 
 > To use this standalone analyzer, you need to install the [API Center extension](https://marketplace.visualstudio.com/items?itemName=apidev.azure-api-center) in Visual Studio Code.
 
+1. Install dependencies.
+
+     ```javascript
+    cd nodejs/webapi && npm install
+    ```
+
 1. Install dependencies.
 
      ```javascript
@@ -19,7 +25,7 @@ You can analyze your API documents using Visual Studio Code (Standalone) or Azur
     npm start
     ```
 
-   You'll see the following Swagger UI page.
+   Navigate to http://localhost:3030/api-docs/swagger to view the Swagger UI page.
 
    ![Swagger UI - weather forecast](./images/api-center-analyzer-integration-nodejs-01.png)
 
@@ -139,11 +145,14 @@ To use this server-side analysis feature, you need to install the [APICenter Ana
 ### Server-Side Analysis by Registering API
 
 1. Register `weatherforecast.json` to API Center through Azure Portal or through this document, [API Registration](./api-registration.md).
+1. Check the warnings in the API Center.
 1. Check the warnings in the API Center.
 
    ![Server-Side API Analysis](./images/api-center-analyzer-integration-nodejs-10.png)
+   ![Server-Side API Analysis](./images/api-center-analyzer-integration-nodejs-10.png)
 
 1. Update existing API definition with `weatherforecast-reviewed.json` to API Center through Azure Portal or through this document, [API Registration](./api-registration.md).
+1. Check the warnings in the API Center.
 1. Check the warnings in the API Center.
 
    ![Server-Side API Analysis - reviewed](./images/api-center-analyzer-integration-nodejs-11.png)

docs/api-client-sdk-integration-nodejs.md

@@ -0,0 +1,56 @@
+<!-- markdownlint-disable MD033 -->
+# API Client SDK Integration
+
+You can create a client SDK from APIs registered on API Center using Visual Studio Code. This section will guide you through the integration process.
+
+> To use this feature, you need to install the [API Center extension](https://marketplace.visualstudio.com/items?itemName=apidev.azure-api-center) in Visual Studio Code. In addition to that, you may be asked to install the [Microsoft Kiota](https://marketplace.visualstudio.com/items?itemName=ms-graph.kiota) extension.
+
+1. Open the API Center extension, navigate down to the API definition, and right-mouse click on the API definition. Then choose the "Generate API Client" option.
+
+   ![Context Menu: Generate API Client](./images/api-client-sdk-integration-nodejs-01.png)
+
+1. When the pop-up modal appears, click the "Open" button.
+
+   ![Pop-up: Open Microsoft Kiota](./images/api-client-sdk-integration-02.png)
+
+1. When the Kiota extension opens, make sure that everything is selected and click the ▶️ button to generate an API client.
+
+   ![Microsoft Kiota: Generate API Client](./images/api-client-sdk-integration-nodejs-03.png)
+
+1. The prompt asks several questions in the order. Enter the following values:
+   1. Choose a name for the client class 👉 `WeatherClient`
+   1. Choose a name for the client class namespace 👉 `WebApp.ApiClients`
+   1. Enter an output path relative to the root of the project 👉 `nodejs/webapp/src/ApiClients`
+   1. Pick a language 👉 `TypeScript - preview`
+
+1. After the client is generated, you can see the client class in the specified output path.
+
+   ![Generated API Client](./images/api-client-sdk-integration-nodejs-04.png)
+
+## Run the WebApp
+
+1. While in the root of the project, run the following command to install the required packages and run the web application.
+
+    ```bash
+    cd nodejs/webapp && npm install && npm start
+    ```
+
+1. On `localhost:3000`, you will see the following UI, but when you navigate to the Weather page, you only see an empty table with no weather data.
+
+    ![Web Application: Before data](./images/api-client-sdk-integration-nodejs-06.png)
+
+1. Let's make a small modification to the code to make the client SDK work. Open `src/components/WeatherList.js` and uncomment all the commented out code.
+
+> [!NOTE]
+> This code sets up an anonymous authentication provider and a fetch request adapter to create a weather client. The `getWeatherForecast` function uses the client to fetch weather data from the API.
+
+1. Refresh `localhost:3000` to load the weather data from your API in your web application.
+
+1. Open the browser and navigate to `https://localhost:3000`.
+1. You can see a table with weather forecast data from the WeatherForecast API.
+
+   ![Web Application: Weather Forecast API](./images/api-client-sdk-integration-nodejs-05.png)
+
+> [!NOTE]
+> In case you run into the error below, navigate to `webapp/src/weatherClient.ts`, locate line `import { type WeatherforecastRequestBuilder, WeatherforecastRequestBuilderRequestsMetadata } from './weatherforecast/index.ts';` and change `/index.js` to `index.ts`
+> ![Web Application: Weather Forecast API](./images/api-client-sdk-integration-nodejs-07.png)

nodejs/webapi/routes/openapiservice.js

@@ -1,4 +1,5 @@
 
+
 const swaggerJsdoc = require("swagger-jsdoc");
 const swaggerUi = require("swagger-ui-express");
 

nodejs/webapp/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

nodejs/webapp/README.md

@@ -0,0 +1,9 @@
+## Run the WebApp
+
+1. While in the root of the project, run the following command to install the required packages and run the web application.
+
+    ```bash
+    cd nodejs/webapp && npm install && npm start
+    ```
+
+1. On `localhost:3000`, you will see the following UI, but when you navigate to the Weather page, you only see an empty table with no weather data.