Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà. # Usa Amazon Q Developer come assistente di programmazione per aumentare la tua produttività *Ram Kandaswamy, Amazon Web Services* ## Riepilogo Questo modello utilizza un tic-tac-toe gioco per dimostrare come applicare Amazon Q Developer a una serie di attività di sviluppo. Genera codice per un tic-tac-toe gioco come applicazione a pagina singola (SPA), migliora l'interfaccia utente e crea script su cui distribuire l'applicazione. AWS Amazon Q Developer funge da assistente di codifica per accelerare i flussi di lavoro di sviluppo software e migliorare la produttività sia per gli sviluppatori che per i non sviluppatori. Indipendentemente dalla tua esperienza tecnica, ti aiuta a creare architetture e progettare soluzioni per problemi aziendali, avvia il tuo ambiente di lavoro, ti aiuta a implementare nuove funzionalità e genera casi di test per la convalida. Utilizza istruzioni in linguaggio naturale e funzionalità di intelligenza artificiale per garantire codice coerente e di alta qualità e mitigare le sfide di codifica indipendentemente dalle tue capacità di programmazione. Il vantaggio principale di Amazon Q Developer è la sua capacità di liberarti da attività di codifica ripetitive. Quando usi l'`@workspace`annotazione, Amazon Q Developer inserisce e indicizza tutti i file di codice, le configurazioni e la struttura del progetto nel tuo ambiente di sviluppo integrato (IDE) e fornisce risposte personalizzate per aiutarti a concentrarti sulla risoluzione creativa dei problemi. Puoi dedicare più tempo alla progettazione di soluzioni innovative e al miglioramento dell'esperienza utente. Se non sei tecnico, puoi utilizzare Amazon Q Developer per semplificare i flussi di lavoro e collaborare in modo più efficace con il team di sviluppo. La funzionalità del **codice Amazon Q Developer Explain** offre istruzioni e riepiloghi dettagliati, in modo da poter navigare tra basi di codice complesse. Inoltre, Amazon Q Developer offre un approccio indipendente dal linguaggio che aiuta gli sviluppatori di livello medio e basso ad ampliare le proprie competenze. Puoi concentrarti sui concetti fondamentali e sulla logica aziendale anziché sulla sintassi specifica del linguaggio. Ciò riduce la curva di apprendimento quando si cambia tecnologia. ## Prerequisiti e limitazioni **Prerequisiti** + IDE (ad esempio, WebStorm o Visual Studio Code) con il plug-in Amazon Q Developer installato. Per istruzioni, consulta [Installazione dell'estensione o del plug-in Amazon Q Developer nel tuo IDE](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/q-in-IDE-setup.html) nella documentazione di Amazon Q Developer. + Una Account AWS configurazione attiva con Amazon Q Developer. Per istruzioni, consulta la sezione [Guida introduttiva](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/getting-started-q-dev.html) nella documentazione di Amazon Q Developer. + **npm** installato. Per istruzioni, consulta la documentazione di [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). Questo modello è stato testato con la versione 10.8 di npm. + AWS Command Line Interface (AWS CLI) installato. Per istruzioni, consultate la [AWS CLI documentazione](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html). **Limitazioni** + Amazon Q Developer può eseguire solo un'attività di sviluppo alla volta. + Alcune Servizi AWS non sono disponibili in tutte Regioni AWS. Per la disponibilità per regione, vedi [Servizi AWS per regione](https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/). Per endpoint specifici, consulta la pagina [Endpoint e quote del servizio](https://docs.aws.amazon.com/general/latest/gr/aws-service-information.html) e scegli il link relativo al servizio. ## Tools (Strumenti) + Questo modello richiede un IDE come Visual Studio Code o. WebStorm Per un elenco di quelli supportati IDEs, consulta la [documentazione di Amazon Q Developer](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/q-in-IDE.html#supported-ides-features). + [AWS Command Line Interface (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html) è uno strumento open source che ti aiuta a interagire Servizi AWS tramite comandi nella shell della riga di comando. ## Best practice Consulta [le migliori pratiche di codifica con Amazon Q Developer](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/best-practices-coding.html) in AWS Prescriptive Guidance. Inoltre: + Quando fornisci istruzioni ad Amazon Q Developer, assicurati che le istruzioni siano chiare e inequivocabili. Aggiungi frammenti di codice e annotazioni, ad esempio, al prompt `@workspace` per fornire più contesto ai tuoi prompt. + Includi le librerie pertinenti e importale per evitare conflitti o ipotesi errate da parte del sistema. + Se il codice generato non è preciso o come previsto, utilizzate l'opzione **Fornisci feedback e rigenera**. Prova a suddividere le istruzioni in istruzioni più piccole. ## Epiche ### Configura l'ambiente di lavoro | Operazione | Description | Competenze richieste | | --- | --- | --- | | Crea un nuovo progetto. | Per creare un nuovo progetto nel tuo ambiente di lavoro, esegui il seguente comando e accetta le impostazioni predefinite per tutte le domande:
npx create-next-app@latest
| Sviluppatore di app, programmatore, sviluppatore di software | | Prova l'applicazione di base. | Eseguite il comando seguente e confermate che l'applicazione di base venga caricata correttamente nel browser:
npm run dev
| Sviluppatore di app, programmatore, sviluppatore di software | | Pulisci il codice base. | Vai al `page.tsx` file nella `src/app` cartella ed elimina il contenuto predefinito per ottenere una pagina vuota. Dopo l'eliminazione, il file dovrebbe avere il seguente aspetto:
export default function Home() {
  return (

      );
}
| Sviluppatore di app, programmatore, sviluppatore di software | ### Usa Amazon Q Developer per progettare un progetto di tic-tac-toe gioco | Operazione | Description | Competenze richieste | | --- | --- | --- | | Ottieni una panoramica dei passaggi. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Sviluppatore di app, programmatore, sviluppatore di software | | Genera codice per tic-tac-toe. | Nel pannello di chat, avvia un'attività di sviluppo utilizzando il `/dev` comando seguito dalla descrizione dell'attività. Esempio:
/dev Create a React-based single-page application  written in TypeScript for a tic-tac-toe game with the following specifications:
1. Design an aesthetically pleasing interface with the game grid centered vertically and 
horizontally on the page. 
2. Include a heading and clear instructions on how to play the game.
3. Implement color-coding for X and O marks to distinguish them easily.
Amazon Q Developer genera codice in base alle tue istruzioni. | Sviluppatore di app, programmatore, sviluppatore di software | | Ispeziona e accetta il codice generato. | Ispeziona visivamente il codice e scegli **Accetta codice** per sostituire automaticamente il `page.tsx` file.Se riscontri problemi, scegli **Fornisci feedback e rigenera e** descrivi il problema che hai riscontrato. | Sviluppatore di app, programmatore, sviluppatore di software | | Correggi gli errori di lint. | Il tic-tac-toe gioco di esempio include una griglia. Il codice generato da Amazon Q Developer potrebbe utilizzare il tipo predefinito`any`. Puoi aggiungere la sicurezza dei tipi richiedendo ad Amazon Q Developer come segue:
/dev Ensure proper TypeScript typing for the onSquare Click event handler 
to resolve any 'any' type issues.
| Sviluppatore di app, programmatore, sviluppatore di software | | Aggiungi fascino visivo. | È possibile suddividere il requisito originale in frammenti più piccoli. Ad esempio, puoi migliorare l'interfaccia utente del gioco con le seguenti istruzioni nelle attività di sviluppo. Questo prompt migliora gli stili CSS (Cascading Style Sheets) ed esporta l'app per la distribuzione.
/dev Debug and fix any CSS issues to correctly display the game grid and overall layout. 

Simplify the code by removing game history functionality and related components. 

Implement static file export to an 'out' directory for easy deployment. The solution 
should be fully functional, visually appealing, and free of typing errors or layout issues.
| Sviluppatore di app, programmatore, sviluppatore di software | | Prova di nuovo. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Sviluppatore di app, programmatore, sviluppatore di software | ### Distribuisci l'applicazione su Cloud AWS | Operazione | Description | Competenze richieste | | --- | --- | --- | | Crea cartelle e file per la distribuzione. | Nel progetto nel tuo ambiente di lavoro, crea una cartella di distribuzione e due file al suo interno: `pushtos3.sh` e`cloudformation.yml`:
mkdir deployment && cd deployment
touch pushtos3.sh && chmod +x pushtos3.sh
touch cloudformation.yml
| Sviluppatore di app, programmatore, sviluppatore di software | | Genera codice di automazione. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Amministratore AWS, AWS DevOps, sviluppatore di app | | Genera contenuti di script. | Per creare uno script di distribuzione, utilizzate il seguente prompt:
/dev Modify the pushtos3 shell script so that it can use AWS CLI commands to create a 
CloudFormation stack named tictactoe-stack if it does not exist already, and use 
cloudformation.yml as the source template. Wait for the stack to complete and sync the 
contents from the out folder to the S3 bucket. Perform invalidation of the CloudFront 
origin.
| Sviluppatore di app, programmatore, sviluppatore di software | | Distribuisci l'applicazione su. Cloud AWS | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Amministratore AWS, AWS DevOps, architetto del cloud, sviluppatore di app | ## risoluzione dei problemi | Problema | Soluzione | | --- | --- | | La build non crea un'applicazione a pagina singola né la esporta nella cartella di output. | Guarda il contenuto del `next.config.mjs` file.Se il codice ha la seguente configurazione predefinita:
const nextConfig = {};
modificalo come segue:
const nextConfig = {
  output: 'export',
  distDir: 'out',
};
| ## Risorse correlate + [Creare un nuovo progetto React](https://react.dev/learn/start-a-new-react-project) (documentazione React) + [Panoramica di Amazon Q per sviluppatori](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/what-is.html) (AWS documentazione) + [Best practice per gli sviluppatori di Amazon Q](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/introduction.html) (Guida AWS prescrittiva) + [Installazione, configurazione e utilizzo di Amazon Q Developer con JetBrains IDEs](https://www.youtube.com/watch?v=-iQfIhTA4J0&pp=ygUSYW1hem9uIHEgZGV2ZWxvcGVy) (YouTube video) + [Installazione di Amazon Q per la riga di comando](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-getting-started-installing.html) (AWS documentazione)