Lanciare il tuo sito web portfolio con l'AI

1. Introduzione

Panoramica

Da dove si inizia a creare con l'AI oggi? Per la maggior parte di noi, si inizia con una query o un prototipo. Google AI Studio offre una potente modalità di creazione (spesso definita "vibe coding") che ti consente di progettare, testare e creare applicazioni web utilizzando la generazione di codice basata sui modelli Gemini.

In questo codelab creerai un sito web di portfolio personale. L'agente di AI Studio scriverà il codice frontend. Una volta perfezionata l'app, potrai eseguirne il deployment direttamente in Cloud Run con un solo clic.

In questo lab proverai a:

• Chiedere a Google AI Studio di creare un prototipo di un sito web di portfolio personale.
• Testare l'applicazione nell'ambiente sandbox di anteprima interattiva.
• Eseguire il deployment dell'applicazione in Cloud Run direttamente dall'interfaccia utente di Google AI Studio.

Obiettivi didattici

• Come utilizzare la modalità di creazione di Google AI Studio per creare rapidamente un prototipo di un servizio frontend utilizzando il linguaggio naturale.
• Come eseguire il deployment dell'applicazione AI Studio come container serverless in Cloud Run.

2. Configurazione del progetto

Prima di avviare AI Studio, verifica lo stato dell'account e i prerequisiti.

Account Google e informazioni sul livello

1. Se non hai già un Account Google, creane uno.
   • Suggerimento: se possibile, utilizza un Account Google personale per questo lab. Gli account di gruppo, aziendali o scolastici potrebbero applicare le norme di Workspace che disabilitano le funzionalità sperimentali o le integrazioni cloud.
2. Esamina i dettagli di fatturazione per i deployment:
   • Starter Tier di Google Cloud: consente di pubblicare fino a due applicazioni full-stack in una regione selezionata senza costi, senza creare un account di fatturazione Google Cloud completo.
   • Deployment standard: si connette a un progetto cloud Google Cloud a pagamento esistente ed espande i limiti di spazio di archiviazione, le risorse CPU e le API.

3. Crea un sito web di portfolio in modalità di creazione di AI Studio

Crea lo shell dell'applicazione e chiedi all'assistente di codice AI di creare il layout frontend.

1. Vai al riquadro App di Google AI Studio e fai clic su Nuova app.
2. Nella casella del prompt della chat, inserisci la descrizione dell'applicazione di portfolio:

   Build a professional personal portfolio website. The site should
   have a modern, responsive design and sections for my biography,
   projects showcase, skills, and links to my professional profiles
   (e.g., GitHub, LinkedIn).
   

   Questo link compilerà automaticamente la casella del prompt.
3. Fai clic su Crea per avviare il processo di generazione dell'applicazione.

4. Test e iterazione

Prima di avviare il servizio in tempo reale, esegui i controlli di convalida nell'anteprima interattiva.

1. Apri il riquadro di anteprima all'interno di Google AI Studio.
2. Interagisci con i pulsanti di navigazione, i link o i layout nell'ambiente sandbox di anteprima per verificare l'esperienza visiva.
   • Nota sulla correzione degli errori: durante la generazione o il test, potresti occasionalmente riscontrare problemi di runtime o errori di compilazione. In questo caso, AI Studio visualizza un pulsante Correggi nella chat, che ti consente di chiedere all'agente di diagnosticare e risolvere automaticamente il problema.
   
3. Se vuoi modificare lo stile o il comportamento, dai istruzioni all'agente tramite la finestra di chat. Ad esempio:
   • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
   • "Include a new section to showcase my recent presentations and talks."
4. Attendi che l'agente aggiorni la codebase e controlla il browser di anteprima per visualizzare gli aggiornamenti.

5. Esegui il deployment in Cloud Run

Una volta che il prototipo è completamente funzionante, eseguine il deployment come servizio pubblico in Cloud Run.

1. Nell'angolo in alto a destra di Google AI Studio, fai clic sul pulsante Pubblica per avviare la procedura guidata di deployment.
2. Fai clic su Inizia per configurare il progetto Google Cloud.
   • Verifica che il menu a discesa Progetto Google Cloud di destinazione corrisponda al progetto associato al tuo spazio di lavoro.
   • AI Studio genererà automaticamente un identificatore di servizio univoco per l'istanza di Cloud Run.
   • Facoltativamente, puoi specificare un prefisso URL .ai.studio personalizzato (ad es. your-portfolio-name.ai.studio) come parte della configurazione del deployment.
3. Se è la prima volta che esegui il deployment e utilizzi i parametri standard di Google Cloud, ti potrebbe essere chiesto di specificare un tipo di organizzazione e fornire i dati di fatturazione.
4. Fai clic su Pubblica app.
5. I passaggi di creazione, registrazione e deployment del container vengono eseguiti in background. Di solito, questa procedura viene completata in 2-4 minuti.
6. Al termine del deployment, copia l'URL dell'app generato e visita il link dell'applicazione live in una scheda del browser.
7. Prova l'applicazione web live nel browser.

6. (FACOLTATIVO) Aggiungi un dominio personalizzato

Per impostazione predefinita, Cloud Run ospita il tuo servizio in un sottodominio run.app gestito da Google. Se vuoi utilizzare un dominio personale (ad es. yourname.com o portfolio.yourname.com), puoi mappare un dominio personalizzato al tuo servizio.

Passaggio 1: aggiungi una mappatura di dominio in Cloud Run

1. Vai alla pagina Mappature di dominio di Cloud Run nella console Google Cloud.
2. Fai clic su Aggiungi mappatura.
3. Scegli il servizio Cloud Run che vuoi mappare dal menu a discesa.
4. Inserisci il nome del dominio personalizzato (ad es. yourname.com o portfolio.yourname.com).
5. Fai clic su Avanti o Continua. Cloud Run visualizzerà i record DNS (ad es. record A/AAAA o CNAME) che devi creare con il registrar di domini.

Passaggio 2: configura il registrar DNS

1. Accedi al pannello di amministrazione del registrar di domini (ad es. Squarespace, GoDaddy o Namecheap).
2. Apri la pagina di configurazione della gestione DNS o delle impostazioni DNS per il tuo dominio.
3. Crea i record DNS corrispondenti ai valori mostrati nella procedura guidata di mappatura di Cloud Run:
   • Per le mappature di domini apex (ad es. yourname.com), aggiungi i record A e AAAA elencati.
   • Per le mappature di sottodomini (ad es. portfolio.yourname.com), aggiungi il record CNAME elencato.
4. Salva le modifiche alla configurazione DNS.

Passaggio 3: attendi il provisioning del certificato SSL

Una volta propagate le modifiche al DNS:

1. Google Cloud eseguirà automaticamente il provisioning di un certificato SSL/TLS gestito per la connessione sicura.
2. Di solito, questa procedura viene completata in circa 15 minuti, ma potrebbe richiedere fino a 24 ore a seconda della propagazione del DNS.
3. Al termine, il dominio personalizzato verrà indirizzato in modo sicuro al tuo sito web di portfolio.

7. Elimina

Per evitare addebiti imprevisti o per liberare spazio nelle risorse dello spazio di lavoro:

1. In Google AI Studio, vai alla pagina App.
2. Trova l'applicazione nella griglia o nell'elenco.
3. Fai clic sull'icona del cestino per eliminare lo stato dell'app e annullare la pubblicazione del servizio da Cloud Run.
4. Se hai eseguito il deployment utilizzando un progetto standard e vuoi arrestare completamente tutte le risorse, vai a Impostazioni progetto della console Google Cloud ed elimina il progetto sottostante.

8. Conclusione

Complimenti! Hai progettato, sviluppato ed eseguito il deployment di un sito web di portfolio direttamente da Google AI Studio.

Scopri di più

Visita questo link per richiedere il badge Percorso del builder completato.

Per continuare il tuo percorso, vai alla pagina goo.gle/builders per il prossimo lab.

• Documentazione di Cloud Run
• Crea app in Google AI Studio