forked from AmadeusITGroup/otter
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: otter sdk training - how to use the otter sdk
- Loading branch information
Showing
13 changed files
with
241 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
apps/showcase/src/assets/trainings/sdk/steps/typescript-sdk/exercise/app.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <table class="table"> | ||
| <caption align="top"> | ||
| First 10 pets of status <b>available</b> from the Swagger Petstore | ||
| </caption> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col">#</th> | ||
| <th scope="col">Name</th> | ||
| <th scope="col">Status</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| @for (pet of pets(); track pet.id; let index = $index) { | ||
| <tr> | ||
| <td>{{index + 1}}</td> | ||
| <td><!-- Name of pet --></td> | ||
| <td><!-- Status of pet --></td> | ||
| </tr> | ||
| } | ||
| </tbody> | ||
| </table> |
27 changes: 27 additions & 0 deletions
27
apps/showcase/src/assets/trainings/sdk/steps/typescript-sdk/exercise/app.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { Component, inject, signal } from '@angular/core'; | ||
| import { PetApi } from '../../../../libs/sdk/src/api'; | ||
| import type { Pet } from '../../../../libs/sdk/src/models'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-root', | ||
| standalone: true, | ||
| imports: [], | ||
| templateUrl: './app.component.html', | ||
| styleUrl: './app.component.scss' | ||
| }) | ||
| export class AppComponent { | ||
| /** Title of the application */ | ||
| public title = 'tutorial-app'; | ||
|
|
||
| private readonly petStoreApi = inject(PetApi); | ||
| readonly #pets = signal<Pet[]>([]); | ||
| public readonly pets = this.#pets.asReadonly(); | ||
|
|
||
| constructor() { | ||
| this.setPets(); | ||
| } | ||
|
|
||
| public setPets() { | ||
| /* Get the first 10 pets whose status is 'available' */ | ||
| } | ||
| } |
21 changes: 21 additions & 0 deletions
21
apps/showcase/src/assets/trainings/sdk/steps/typescript-sdk/exercise/app.config.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { ApiFetchClient } from '@ama-sdk/client-fetch'; | ||
| import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core'; | ||
| import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; | ||
| import { provideRouter } from '@angular/router'; | ||
| import { prefersReducedMotion } from '@o3r/application'; | ||
| import { PetApi } from '../../../../libs/sdk/src/api'; | ||
| import { routes } from './app.routes'; | ||
|
|
||
|
|
||
| function petApiFactory() { | ||
| /* Create an ApiFetchClient and return a PetApi object */ | ||
| } | ||
|
|
||
| export const appConfig: ApplicationConfig = { | ||
| providers: [ | ||
| provideZoneChangeDetection({ eventCoalescing: true }), | ||
| provideRouter(routes), | ||
| importProvidersFrom(BrowserAnimationsModule.withConfig({disableAnimations: prefersReducedMotion()})), | ||
| {provide: PetApi, useFactory: petApiFactory} | ||
| ] | ||
| }; |
25 changes: 25 additions & 0 deletions
25
apps/showcase/src/assets/trainings/sdk/steps/typescript-sdk/instructions.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| ### Objective | ||
| For this example, you will use the public <a href="https://petstore3.swagger.io/" target="_blank">Swagger Petstore project API</a>. | ||
| You will perform a simple call and retrieve a list of pets from an SDK programmatically generated from their public specification. | ||
| Since this step requires a Java setup, the generation has already been done for you. You will just need to integrate the Otter SDK client and perform your call. | ||
|
|
||
| ### Exercise | ||
|
|
||
| #### Creation of fetch client in the application configuration | ||
| Let's create a fetch client in your application and use it to access your API.\ | ||
| Here are a couple of steps and hints to help you: | ||
| - In the file `app.config.ts`, you will create an API client object of type `ApiFetchClient` from `@ama-sdk/client-fetch` in the existing function `petApiFactory()`. | ||
| - The constructor of `ApiFetchClient` requires some options, including the `basePath` which should be the Swagger Petstore API: https://petstore3.swagger.io/api/v3 | ||
| - The configuration variable can then be used to create an API object of type `PetApi` from the SDK. | ||
| - The function `petApiFactory()` should return this `PetApi` object, which has been added to the providers of the application configuration. | ||
|
|
||
| #### Using the API object to perform an HTTP request | ||
| Now, you can call the API object to perform the HTTP request you are looking for.\ | ||
| As you can see in `app.component.ts`, the `PetApi` has been injected and is ready to be used.\ | ||
| For this exercise, you will look for the pets that are of status **available** and display in the UI the names of the first ten pets. | ||
|
|
||
| > [!TIP] | ||
| > Have a look at the `sdk/src/api/pet/pet.api.ts` file and look for `findPetsByStatus`. | ||
| #### Solution | ||
| You can check out the exercise solution or compare your answer to the result of the petstore API: https://petstore3.swagger.io/api/v3/pet/findByStatus?status=available |
21 changes: 21 additions & 0 deletions
21
apps/showcase/src/assets/trainings/sdk/steps/typescript-sdk/solution/app.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <table class="table"> | ||
| <caption align="top"> | ||
| First 10 pets of status <b>available</b> from the Swagger Petstore | ||
| </caption> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col">#</th> | ||
| <th scope="col">Name</th> | ||
| <th scope="col">Status</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| @for (pet of pets(); track pet.id; let index = $index) { | ||
| <tr> | ||
| <td>{{index + 1}}</td> | ||
| <td>{{pet.name}}</td> | ||
| <td>{{pet.status}}</td> | ||
| </tr> | ||
| } | ||
| </tbody> | ||
| </table> |
29 changes: 29 additions & 0 deletions
29
apps/showcase/src/assets/trainings/sdk/steps/typescript-sdk/solution/app.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { Component, inject, signal } from '@angular/core'; | ||
| import { PetApi } from '../../../../libs/sdk/src/api'; | ||
| import type { Pet } from '../../../../libs/sdk/src/models'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-root', | ||
| standalone: true, | ||
| imports: [], | ||
| templateUrl: './app.component.html', | ||
| styleUrl: './app.component.scss' | ||
| }) | ||
| export class AppComponent { | ||
| /** Title of the application */ | ||
| public title = 'tutorial-app'; | ||
|
|
||
| private readonly petStoreApi = inject(PetApi); | ||
| readonly #pets = signal<Pet[]>([]); | ||
| public readonly pets = this.#pets.asReadonly(); | ||
|
|
||
| constructor() { | ||
| void this.setPets(); | ||
| } | ||
|
|
||
| public async setPets() { | ||
| /* Get the first 10 pets whose status is 'available' */ | ||
| const pets = await this.petStoreApi.findPetsByStatus({status: 'available'}); | ||
| this.#pets.set(pets.slice(0, 10)); | ||
| } | ||
| } |
29 changes: 29 additions & 0 deletions
29
apps/showcase/src/assets/trainings/sdk/steps/typescript-sdk/solution/app.config.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { ApiFetchClient } from '@ama-sdk/client-fetch'; | ||
| import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core'; | ||
| import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; | ||
| import { provideRouter } from '@angular/router'; | ||
| import { prefersReducedMotion } from '@o3r/application'; | ||
| import { PetApi } from '../../../../libs/sdk/src/api'; | ||
| import { routes } from './app.routes'; | ||
|
|
||
|
|
||
| function petApiFactory() { | ||
| /* Create an ApiFetchClient and return a PetApi object */ | ||
| const apiFetchClient = new ApiFetchClient( | ||
| { | ||
| basePath: 'https://petstore3.swagger.io/api/v3', | ||
| requestPlugins: [], | ||
| fetchPlugins: [] | ||
| } | ||
| ); | ||
| return new PetApi(apiFetchClient); | ||
| } | ||
|
|
||
| export const appConfig: ApplicationConfig = { | ||
| providers: [ | ||
| provideZoneChangeDetection({ eventCoalescing: true }), | ||
| provideRouter(routes), | ||
| importProvidersFrom(BrowserAnimationsModule.withConfig({disableAnimations: prefersReducedMotion()})), | ||
| {provide: PetApi, useFactory: petApiFactory} | ||
| ] | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters