Salta ai contenuti

Gioco di Dungeon con IA

Iniziamo creando un nuovo monorepo. All’interno della directory desiderata, esegui il seguente comando:

Terminal window
npx create-nx-workspace@~21.4.1 dungeon-adventure --pm=pnpm --preset=@aws/nx-plugin --ci=skip

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 le impostazioni predefinite della CLI NX e 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 package manager
  • pnpm-workspace.yaml se si utilizza pnpm
  • README.md
  • tsconfig.base.json esteso da tutti i sottoprogetti basati su Node
  • tsconfig.json

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

Iniziamo creando la nostra Game API. Per farlo, creiamo 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
    • name: GameApi
  6. Clicca su Generate

Dovresti vedere alcuni nuovi file apparire nella tua struttura directory.

Clicca qui per esaminare questi file in dettaglio.

Ora creiamo la nostra Story API. Per farlo, creiamo un’API Fast chiamata StoryApi 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 - py#fast-api
  5. Compila i parametri richiesti
    • name: StoryApi
    • moduleName: story_api
  6. Clicca su Generate

Dovresti vedere alcuni nuovi file apparire nella tua struttura directory.

Clicca qui per esaminare questi file in dettaglio.

Ora creiamo l’interfaccia utente che ti permetterà di interagire con il gioco. Per farlo, creiamo un sito web chiamato GameUI 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#react-website
  5. Compila i parametri richiesti
    • name: GameUI
  6. Clicca su Generate

Dovresti vedere alcuni nuovi file apparire nella tua struttura directory.

Clicca qui per esaminare questi file in dettaglio.

Ora configuriamo la nostra Game UI per richiedere l’accesso autenticato tramite Amazon Cognito 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#react-website#auth
  5. Compila i parametri richiesti
    • cognitoDomain: game-ui
    • project: @dungeon-adventure/game-ui
    • allowSignup: true
  6. Clicca su Generate

Dovresti vedere alcuni nuovi file apparire/modificati nella tua struttura directory.

Clicca qui per esaminare questi file in dettaglio.

Ora configuriamo la nostra Game UI per connettersi alla Story API creata precedentemente:

  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

Dovresti vedere alcuni nuovi file apparire/modificati nella tua struttura directory.

Clicca qui per esaminare questi file in dettaglio.

Ora configuriamo la nostra Game UI per connettersi alla Game API creata precedentemente:

  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
  6. Clicca su Generate

Dovresti vedere alcuni nuovi file apparire/modificati nella tua struttura directory.

Clicca qui per esaminare questi file in dettaglio.

Ora l’ultimo sottoprogetto che dobbiamo creare è per l’infrastruttura CDK. Per crearlo, segui 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#infra
  5. Compila i parametri richiesti
    • name: infra
  6. Clicca su Generate

Dovresti vedere alcuni nuovi file apparire/modificati nella tua struttura directory.

Clicca qui per esaminare questi file in dettaglio.

Apportiamo una modifica al file packages/infra/src/stacks/application-stack.ts per istanziare alcuni dei nostri costrutti già generati:

import {
GameApi,
GameUI,
StoryApi,
UserIdentity,
} from ':dungeon-adventure/common-constructs';
import { Stack, StackProps } from 'aws-cdk-lib';
import { Construct } from 'constructs';
export class ApplicationStack extends Stack {
constructor(scope: Construct, id: string, props?: StackProps) {
super(scope, id, props);
// The code that defines your stack goes here
const userIdentity = new UserIdentity(this, 'UserIdentity');
const gameApi = new GameApi(this, 'GameApi', {
integrations: GameApi.defaultIntegrations(this).build(),
});
const storyApi = new StoryApi(this, 'StoryApi', {
integrations: StoryApi.defaultIntegrations(this).build(),
});
// grant our authenticated role access to invoke our APIs
[storyApi, gameApi].forEach((api) =>
api.grantInvokeAccess(userIdentity.identityPool.authenticatedRole),
);
// Ensure this is instantiated last so our runtime-config.json can be automatically configured
new GameUI(this, 'GameUI');
}
}

Nota che qui forniamo integrazioni predefinite per le nostre due API. Di default, ogni operazione nelle nostre API è mappata a una singola funzione lambda per gestire quell’operazione.

Ora è il momento di compilare il nostro codice per la prima volta
Terminal window
pnpm nx run-many --target build --all

Dovresti ricevere il seguente prompt:

Terminal window
NX The workspace is out of sync
[@nx/js:typescript-sync]: Some TypeScript configuration files are missing project references to the projects they depend on or contain outdated project references.
This will result in an error in CI.
? 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

Questo messaggio indica che NX ha rilevato alcuni file che possono essere aggiornati automaticamente. In questo caso, si riferisce ai file tsconfig.json che non hanno riferimenti TypeScript configurati per i progetti dipendenti. Seleziona l’opzione Yes, sync the changes and run the tasks per procedere. Dovresti notare che tutti gli errori di importazione nel tuo IDE vengono risolti automaticamente poiché il generatore di sync aggiungerà i riferimenti TypeScript mancanti!

Tutti gli artefatti compilati sono ora disponibili nella cartella dist/ alla radice del monorepo. Questa è una pratica standard quando si utilizzano progetti generati dal plugin @aws/nx-plugin poiché non inquina la struttura directory con file generati. Nel caso desideri pulire i file, puoi semplicemente eliminare la cartella dist/ senza preoccuparti di file generati sparsi nell’albero directory.

Complimenti! Hai creato tutti i sottoprogetti necessari per iniziare a implementare il cuore del nostro gioco Dunegeon Adventure. 🎉🎉🎉