Amazon non CodeCatalyst è più aperta a nuovi clienti. I clienti esistenti possono continuare a utilizzare il servizio normalmente. Per ulteriori informazioni, consulta [Come migrare da CodeCatalyst](migration.md).
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à.
# Tutorial: creazione e aggiornamento di un'applicazione React
In qualità di autore di progetti, puoi sviluppare e aggiungere progetti personalizzati al catalogo dei blueprint del tuo spazio. Questi blueprint possono quindi essere utilizzati dai membri dello spazio per creare nuovi progetti o aggiungerli a progetti esistenti. Puoi continuare ad apportare modifiche ai tuoi blueprint che vengono poi resi disponibili come aggiornamenti tramite pull request.
Questo tutorial fornisce una guida dettagliata dal punto di vista dell'autore del blueprint e dal punto di vista dell'utente del blueprint. Il tutorial mostra come creare un progetto di applicazione web React a pagina singola. Il blueprint viene quindi utilizzato per creare un nuovo progetto. Quando il blueprint viene aggiornato con le modifiche, il progetto creato dal blueprint incorpora tali modifiche tramite una pull request.
**Topics**
+ [Prerequisiti](#blueprint-getting-started-prerequisites)
+ [Fase 1: Creare un blueprint personalizzato](#react-bluprint-tutorial-create-bp)
+ [Passaggio 2: Visualizza il flusso di lavoro di rilascio](#blueprint-getting-started-view-workflow)
+ [Fase 3: Aggiungere il blueprint al catalogo](#blueprint-getting-started-add-to-catalog)
+ [Passaggio 4: Crea un progetto con blueprint](#blueprint-getting-started-create-project)
+ [Fase 5: Aggiornare il blueprint](#blueprint-getting-started-update-blueprint)
+ [Passaggio 6: Aggiornare la versione del catalogo pubblicata del progetto alla nuova versione](#blueprint-getting-started-update-catalog-version)
+ [Passaggio 7: Aggiorna il progetto con la nuova versione del blueprint](#blueprint-getting-started-update-project)
+ [Passaggio 8: Visualizza le modifiche nel progetto](#blueprint-getting-started-view-changes)
## Prerequisiti
Per creare e aggiornare un blueprint personalizzato, è necessario aver completato le attività seguenti: [Configura e accedi a CodeCatalystConfigura e accedi a CodeCatalyst](setting-up-topnode.md)
+ Disponi di un ID AWS Builder a cui accedere. CodeCatalyst
+ Appartenete a uno spazio e fatevi assegnare il ruolo di **amministratore dello spazio** o **Power user** in quello spazio. Per ulteriori informazioni, consulta [Creazione di uno spazio](spaces-create.md), [Concessione delle autorizzazioni di spazio agli utenti](spaces-members.md) e [Ruolo di Space Administrator](ipa-role-types.md#ipa-role-space-admin).
## Fase 1: Creare un blueprint personalizzato
Quando si crea un blueprint personalizzato, viene creato un CodeCatalyst progetto che contiene il codice sorgente del blueprint e gli strumenti e le risorse di sviluppo. Il progetto è il luogo in cui svilupperai, testerai e pubblicherai il blueprint.
1. Apri la CodeCatalyst console all'indirizzo [https://codecatalyst.aws/](https://codecatalyst.aws/).
1. Nella CodeCatalyst console, accedi allo spazio in cui desideri creare un blueprint.
1. Scegli **Impostazioni** per accedere alle impostazioni dello spazio.
1. Nella scheda **Impostazioni dello spazio**, scegli **Blueprint** e scegli **Crea blueprint**.
1. Aggiorna i campi nella procedura guidata di creazione del blueprint con i seguenti valori:
+ Nel **nome del progetto**, immettere. `react-app-blueprint`
+ In **Blueprint Display Name, immettere**. `react-app-blueprint`
1. Facoltativamente, scegli **Visualizza codice per visualizzare** in anteprima il codice sorgente del blueprint per il tuo blueprint. Allo stesso modo, scegli **Visualizza flusso di lavoro** per visualizzare in anteprima il flusso di lavoro che verrà creato nel progetto che crea e pubblica il blueprint.
1. **Scegli Crea progetto.**
1. Una volta creato il blueprint, verrai indirizzato al progetto del blueprint. Questo progetto contiene il codice sorgente del blueprint, insieme agli strumenti e alle risorse necessari per sviluppare, testare e pubblicare il blueprint. È stato generato un flusso di lavoro di rilascio che ha pubblicato automaticamente il blueprint nello spazio.
1. Ora che il blueprint e il progetto blueprint sono stati creati, il passaggio successivo consiste nel configurarli aggiornando il codice sorgente. È possibile utilizzare Dev Environments per aprire e modificare il repository dei sorgenti direttamente nel browser.
Nel pannello di navigazione, scegli **Codice**, quindi scegli **Dev Environments.**
1. Scegli **Crea ambiente di sviluppo**, quindi scegli **AWS Cloud9 (nel browser)**.
1. Mantieni le impostazioni predefinite e scegli **Crea**.
1. Nel AWS Cloud9 terminale, accedi alla directory del tuo progetto blueprint eseguendo il seguente comando:
```
cd react-app-blueprint
```
1. Una `static-assets` cartella viene creata e riempita automaticamente quando viene creato un blueprint. In questo tutorial, eliminerai la cartella predefinita e ne genererai una nuova per un blueprint di app React.
Elimina la cartella static-assets eseguendo il seguente comando:
```
rm -r static-assets
```
AWS Cloud9 è costruito su una piattaforma basata su Linux. Se utilizzi un sistema operativo Windows, puoi invece utilizzare il seguente comando:
```
rmdir /s /q static-assets
```
1. Ora che la cartella predefinita è stata eliminata, crea una `static-assets` cartella per un blueprint di react-app eseguendo il comando seguente:
```
npx create-react-app static-assets
```
Se richiesto, inserisci per procedere. `y`
Una nuova applicazione React è stata creata nella `static-assets` cartella con i pacchetti necessari. Le modifiche devono essere trasferite nel repository dei CodeCatalyst sorgenti remoti.
1. Assicurati di avere le modifiche più recenti, quindi esegui il commit e invia le modifiche all'archivio dei CodeCatalyst sorgenti del blueprint eseguendo i seguenti comandi:
```
git pull
```
```
git add .
```
```
git commit -m "Add React app to static-assets"
```
```
git push
```
Quando una modifica viene inserita nell'archivio dei sorgenti del blueprint, il flusso di lavoro di rilascio viene avviato automaticamente. Questo flusso di lavoro incrementa la versione del blueprint, crea il blueprint e lo pubblica nel tuo spazio. Nel passaggio successivo, passerai al flusso di lavoro di rilascio eseguito per vedere come sta andando.
## Passaggio 2: Visualizza il flusso di lavoro di rilascio
1. **Nella CodeCatalyst console, nel riquadro di navigazione, scegli **CI/CD**, quindi scegli Flussi di lavoro.**
1. **Scegli il flusso di lavoro Blueprint-Release.**
1. Puoi vedere che il flusso di lavoro include azioni per creare e pubblicare il blueprint.
1. In **Ultima esecuzione**, scegli il link di esecuzione del flusso di lavoro per visualizzare l'esecuzione in base alla modifica del codice che hai apportato.
1. Una volta completata l'esecuzione, viene pubblicata la nuova versione del blueprint. Le versioni pubblicate dei blueprint possono essere visualizzate nelle **Impostazioni** dello spazio, ma non possono essere utilizzate nei progetti finché non vengono aggiunte al catalogo dei blueprint dello spazio. Nel passaggio successivo, aggiungerai il blueprint al catalogo.
## Fase 3: Aggiungere il blueprint al catalogo
L'aggiunta di un blueprint al catalogo dei blueprint dello spazio rende il blueprint disponibile per l'uso in tutti i progetti in uno spazio. I membri dello spazio possono utilizzare il blueprint per creare nuovi progetti o aggiungerli a progetti esistenti.
1. Nella CodeCatalyst console, torna allo spazio.
1. Scegli **Impostazioni**, quindi scegli **Blueprints**.
1. Scegli **react-app-blueprint**, quindi scegli **Aggiungi al catalogo**.
1. Seleziona **Salva**.
## Passaggio 4: Crea un progetto con blueprint
Ora che il blueprint è stato aggiunto al catalogo, può essere utilizzato nei progetti. In questo passaggio, creerai un progetto con il blueprint appena creato. In una fase successiva, aggiornerai questo progetto aggiornando e pubblicando una nuova versione del blueprint.
1. Scegli la scheda **Progetti**, quindi scegli **Crea progetto**.
1. Scegli **Space blueprint**, quindi scegli **react-app-blueprint**.
**Nota**
Una volta scelto il blueprint, puoi vedere il contenuto del file del blueprint. `README.md`
1. Scegli **Next (Successivo)**.
1.
**Nota**
Il contenuto di questa procedura guidata per la creazione del progetto può essere configurato nel blueprint.
Immettete il nome del progetto come utente del blueprint. Per questo tutorial, digita `react-app-project`. Per ulteriori informazioni, consulta [Sviluppo di un modello personalizzato per soddisfare i requisiti del progetto](develop-bp.md).
Successivamente, effettuerai un aggiornamento del blueprint e aggiungerai la nuova versione al catalogo, che utilizzerai per aggiornare questo progetto.
## Fase 5: Aggiornare il blueprint
Dopo aver utilizzato un blueprint per creare un nuovo progetto o averlo applicato a progetti esistenti, puoi continuare ad apportare aggiornamenti come autore del blueprint. In questo passaggio, apporterai modifiche al blueprint e pubblicherai automaticamente una nuova versione nello spazio. La nuova versione può quindi essere aggiunta come versione del catalogo.
1. Vai al **react-app-blueprint**progetto creato in[Tutorial: creazione e aggiornamento di un'applicazione React](#blueprint-getting-started-tutorial).
1. Apri l'ambiente di sviluppo creato in[Tutorial: creazione e aggiornamento di un'applicazione React](#blueprint-getting-started-tutorial).
1. Nel riquadro di navigazione, scegli **Codice**, quindi scegli **Dev Environments**.
1. Nella tabella, individua l'ambiente di sviluppo, quindi scegli **Apri in AWS Cloud9 (nel browser)**.
1. Quando è stato eseguito il workflow di rilascio del blueprint, la versione del blueprint è stata incrementata aggiornando il file. `package.json` Effettua la modifica eseguendo il seguente comando nel terminale: AWS Cloud9
```
git pull
```
1. Passa alla `static-assets` cartella eseguendo il seguente comando:
```
cd /projects/react-app-blueprint/static-assets
```
1. Crea un `hello-world.txt` file nella `static-assets` cartella eseguendo il seguente comando:
```
touch hello-world.txt
```
AWS Cloud9 è costruito su una piattaforma basata su Linux. Se utilizzi un sistema operativo Windows, puoi invece utilizzare il seguente comando:
```
echo > hello-world.text
```
1. Nella barra di navigazione a sinistra, fai doppio clic sul `hello-world.txt` file per aprirlo nell'editor e aggiungi i seguenti contenuti:
```
Hello, world!
```
Salvare il file.
1. Assicurati di avere le modifiche più recenti, quindi esegui il commit e invia le modifiche all'archivio dei CodeCatalyst sorgenti del blueprint eseguendo i seguenti comandi:
```
git pull
```
```
git add .
```
```
git commit -m "prettier setup"
```
```
git push
```
L'invio delle modifiche ha avviato il flusso di lavoro di rilascio, che pubblicherà automaticamente la nuova versione del blueprint nello spazio.
## Passaggio 6: Aggiornare la versione del catalogo pubblicata del progetto alla nuova versione
Dopo aver utilizzato un blueprint per creare un nuovo progetto o averlo applicato a progetti esistenti, è comunque possibile aggiornare il blueprint come autore del blueprint. In questo passaggio, apporterai modifiche al blueprint e cambierai la versione del catalogo del blueprint.
1. Nella CodeCatalyst console, torna allo spazio.
1. Scegli **Impostazioni**, quindi scegli **Blueprints**.
1. Scegli **react-app-blueprint**, quindi scegli **Gestisci la versione del catalogo**.
1. Scegli la nuova versione, quindi scegli **Salva**.
## Passaggio 7: Aggiorna il progetto con la nuova versione del blueprint
Una nuova versione è ora disponibile nel catalogo dei progetti dello spazio. Come utente del blueprint, puoi aggiornare la versione del progetto creato in. [Passaggio 4: Crea un progetto con blueprint](#blueprint-getting-started-create-project) In questo modo avrai la certezza di disporre delle ultime modifiche e correzioni necessarie per soddisfare le best practice.
1. Nella CodeCatalyst console, vai al **react-app-project**progetto creato in[Passaggio 4: Crea un progetto con blueprint](#blueprint-getting-started-create-project).
1. Nel pannello di navigazione scegli **Blueprints (Progetti)**.
1. Scegli **Aggiorna blueprint** nella casella delle informazioni.
1. Nel pannello a destra **delle modifiche al codice**, puoi vedere `hello-world.txt` gli `package.json` aggiornamenti.
1. Scegli **Applica aggiornamento**.
La scelta di **Applica aggiornamento** crea una pull request nel progetto con le modifiche rispetto alla versione aggiornata del blueprint. Per apportare gli aggiornamenti al progetto, è necessario unire la pull request. Per ulteriori informazioni, consulta [Revisione di una richiesta di pull](pull-requests-review.md) e [Unione di una richiesta di pull](pull-requests-merge.md).
1. Nella tabella **Blueprints**, trova il blueprint. Nella colonna **Stato**, scegli **Pending pull request**, quindi scegli il link alla pull request aperta.
1. Controlla la pull request, quindi scegli **Merge**.
1. **Scegliete **Fast forward merge** per mantenere i valori predefiniti, quindi scegliete Merge.**
## Passaggio 8: Visualizza le modifiche nel progetto
Le modifiche al blueprint sono ora disponibili nel progetto in seguito[Passaggio 7: Aggiorna il progetto con la nuova versione del blueprint](#blueprint-getting-started-update-project). In qualità di utente del blueprint, è possibile visualizzare le modifiche nell'archivio di origine.
1. Nel riquadro di navigazione, scegli **Archivi di origine**, quindi scegli il nome del repository di origine creato al momento della creazione del progetto.
1. In **File**, puoi visualizzare il `hello-world.txt` file creato in. [Fase 5: Aggiornare il blueprint](#blueprint-getting-started-update-blueprint)
1. Scegli `hello-world.txt` per visualizzare il contenuto del file.
La gestione del ciclo di vita offre agli autori di blueprint la possibilità di gestire centralmente il ciclo di vita di sviluppo del software di ogni progetto che contiene un particolare blueprint. Come illustrato in questo tutorial, è possibile inviare aggiornamenti al blueprint che possono quindi essere incorporati da progetti che hanno utilizzato il blueprint per creare un nuovo progetto o lo hanno applicato a un progetto esistente. Per ulteriori informazioni, consulta [Lavorare con la gestione del ciclo di vita come autore di progetti](lifecycle-management-dev.md).