Salta ai contenuti
@aws/nx-plugin
Blog

Gioco di Dungeon con IA

Modulo 1: Configurazione del monorepo

Inizieremo creando un nuovo monorepo. Esegui il seguente comando dalla directory desiderata:

Terminal window
npx create-nx-workspace@~20.6.3 dungeon-adventure --pm=pnpm --preset=ts --ci=skip --formatter=prettier

Questo configurerà un monorepo NX all’interno della directory dungeon-adventure che potrai aprire in VSCode. Dovrebbe apparire così:

  • Directory.nx/
    • …
  • Directory.vscode/
    • …
  • Directorynode_modules/
    • …
  • Directorypackages/ qui risiederanno i tuoi sottoprogetti
    • …
  • .gitignore
  • .npmrc
  • .prettierignore
  • .prettierrc
  • nx.json configura la CLI NX e le impostazioni predefinite del monorepo
  • package.json tutte le dipendenze Node sono definite qui
  • pnpm-lock.yaml o bun.lock, yarn.lock, package-lock.json a seconda del gestore pacchetti
  • pnpm-workspace.yaml se si utilizza pnpm
  • README.md
  • tsconfig.base.json esteso da tutti i sottoprogetti basati su Node
  • tsconfig.json

Per iniziare ad aggiungere componenti dal plugin @aws/nx-plugin nel monorepo, dobbiamo installarlo come dipendenza di sviluppo eseguendo questo comando dalla root del monorepo dungeon-adventure:

Terminal window
pnpm add -Dw @aws/nx-plugin

Ora siamo pronti per creare i vari sottoprogetti utilizzando @aws/nx-plugin.

API del Gioco

Creiamo prima la nostra Game API. Generiamo un’API tRPC chiamata GameApi seguendo questi passaggi:

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - ts#trpc-api
  5. Compila i parametri richiesti
    • apiName: GameApi
  6. Clicca su Generate

Dovresti vedere nuovi file apparire nella struttura delle directory.

Clicca qui per esaminare i file in dettaglio.

API della Storia

Creiamo ora la Story API con un’API Fast:

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - py#fast-api
  5. Compila i parametri richiesti
    • name: StoryApi
  6. Clicca su Generate

Nuovi file appariranno nella struttura.

Clicca qui per esaminare i file in dettaglio.

Interfaccia Utente del Gioco: Sito Web

Creiamo l’interfaccia utente con un sito Cloudscape:

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - ts#cloudscape-website
  5. Compila i parametri richiesti
    • name: GameUI
  6. Clicca su Generate

Nuovi file appariranno nella struttura.

Clicca qui per esaminare i file in dettaglio.

Interfaccia Utente del Gioco: Autenticazione

Aggiungiamo autenticazione Cognito all’UI:

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - ts#cloudscape-website#auth
  5. Compila i parametri richiesti
    • cognitoDomain: game-ui
    • project: @dungeon-adventure/game-ui
    • allowSignup: true
  6. Clicca su Generate

File modificati appariranno nella struttura.

Clicca qui per esaminare i file in dettaglio.

Interfaccia Utente del Gioco: Connessione a Story API

Colleghiamo l’UI a Story API:

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - api-connection
  5. Compila i parametri richiesti
    • sourceProject: @dungeon-adventure/game-ui
    • targetProject: dungeon_adventure.story_api
  6. Clicca su Generate

File modificati appariranno nella struttura.

Clicca qui per esaminare i file in dettaglio.

Interfaccia Utente del Gioco: Connessione a Game API

Colleghiamo l’UI a Game API:

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - api-connection
  5. Compila i parametri richiesti
    • sourceProject: @dungeon-adventure/game-ui
    • targetProject: @dungeon-adventure/game-api-backend
  6. Clicca su Generate

File modificati appariranno nella struttura.

Clicca qui per esaminare i file in dettaglio.

Infrastruttura del Gioco

Creiamo l’infrastruttura CDK:

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - ts#infra
  5. Compila i parametri richiesti
    • name: infra
  6. Clicca su Generate

File modificati appariranno nella struttura.

Clicca qui per esaminare i file in dettaglio.

Aggiornare l’infrastruttura

Modifichiamo application-stack.ts per istanziare i costrutti:

import {
  GameApi,
  GameUI,
  StoryApi,
  UserIdentity,
} from ':dungeon-adventure/common-constructs';
import * as cdk from 'aws-cdk-lib';
import { Construct } from 'constructs';


export class ApplicationStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);


    const userIdentity = new UserIdentity(this, 'UserIdentity');


    const gameApi = new GameApi(this, 'GameApi');
    const storyApi = new StoryApi(this, 'StoryApi');


    [storyApi, gameApi].forEach((api) =>
      api.grantInvokeAccess(userIdentity.identityPool.authenticatedRole),
    );


    new GameUI(this, 'GameUI');
  }
}

Compilazione del codice

Ora compiliamo il codice per la prima volta
Terminal window
pnpm nx run-many --target build --all

Verrà chiesto:

Terminal window
 NX   The workspace is out of sync


? Would you like to sync the identified changes to get your workspace up to date? …
Yes, sync the changes and run the tasks
No, run the tasks without syncing the changes

Seleziona Yes per sincronizzare i riferimenti TypeScript.

Gli artefatti compilati sono in dist/.

Complimenti! Hai creato tutti i sottoprogetti necessari per il gioco. 🎉🎉🎉