Lanciare il tuo sito web portfolio con l'AI

1. Introduzione

Panoramica

Da dove si inizia oggi a creare con l'AI? Per la maggior parte di noi, inizia con una query o un prototipo. Google AI Studio offre una potente modalità di creazione (spesso chiamata "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 AI Studio scriverà il codice frontend. Una volta perfezionata l'app, potrai eseguirne il deployment direttamente su Cloud Run con un solo clic.

In questo lab proverai a:

• Chiedi a Google AI Studio di prototipare un sito web di portfolio personale.
• Testa l'applicazione nella sandbox di anteprima interattiva.
• Esegui il deployment dell'applicazione su Cloud Run direttamente dall'interfaccia utente di Google AI Studio.

Obiettivi didattici

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

2. Configurazione del progetto

Prima di lanciare AI Studio, verifica lo stato del tuo account e i prerequisiti.

Informazioni sull'Account Google e sul livello

1. Se non hai ancora 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 criteri di Workspace che disabilitano le funzionalità sperimentali o le integrazioni cloud.
2. Esamina i dettagli di fatturazione per i deployment:
   • Google Cloud Starter Tier: 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 Google Cloud a pagamento esistente ed espande i limiti di archiviazione, le risorse CPU e le API.

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

Crea la shell dell'applicazione e chiedi all'assistente di codifica AI di creare il layout del frontend.

1. Vai al pannello delle app di Google AI Studio e fai clic su Nuova app.
2. Nella casella del prompt della chat, inserisci la descrizione della tua applicazione del 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).
   

3. Fai clic su Crea per avviare il processo di generazione dell'applicazione.

4. Test e ottimizzazione

Prima di lanciare il servizio, esegui i controlli di convalida nell'anteprima interattiva.

1. Apri il riquadro di anteprima in Google AI Studio.
2. Interagisci con pulsanti di navigazione, link o layout nella 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 mostra 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 della 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 base di codice e controlla il browser di anteprima per visualizzare gli aggiornamenti.

5. Esegui il deployment in Cloud Run

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

1. Nell'angolo in alto a destra di Google AI Studio, fai clic sul pulsante Pubblica per avviare la procedura guidata per il 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 workspace.
   • AI Studio genererà automaticamente un identificatore di servizio univoco per l'istanza Cloud Run.
3. Se è la prima volta che esegui il deployment e utilizzi i parametri standard di Google Cloud, potrebbe esserti chiesto di specificare un tipo di organizzazione e fornire i dettagli di fatturazione.
4. Fai clic su Pubblica app.
5. I passaggi di creazione del container, registrazione del container e deployment del servizio vengono eseguiti in background. In genere, 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 tuo browser.

6. (FACOLTATIVO) Aggiungi un dominio personalizzato

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

Passaggio 1: aggiungi un mapping di dominio in Cloud Run

1. Vai alla pagina Mappature dei domini 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 di dominio personalizzato (ad esempio, yourname.com o portfolio.yourname.com).
5. Fai clic su Avanti o Continua. Cloud Run visualizzerà i record DNS (ad esempio record A/AAAA o CNAME) che devi creare con il registrar del dominio.

Passaggio 2: configura il registrar DNS

1. Accedi al pannello di amministrazione del registrar del tuo dominio (ad esempio 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 dei domini apex (ad es. yourname.com), aggiungi i record A e AAAA elencati.
   • Per le mappature dei 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 tua connessione sicura.
2. Di solito, questa procedura viene completata in circa 15 minuti, ma potrebbero essere necessarie fino a 24 ore a seconda della propagazione DNS.
3. Una volta completata, il tuo dominio personalizzato verrà indirizzato in modo sicuro al tuo sito web portfolio.

Nota:le mappature di dominio di Cloud Run sono in anteprima e sono disponibili solo in regioni specifiche. Se il tuo servizio Cloud Run si trova in una regione che non supporta le mappature di dominio, puoi mappare il tuo dominio utilizzando un bilanciatore del carico delle applicazioni esterno globale o Firebase Hosting.

7. Elimina

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

1. In Google AI Studio, vai alla pagina App.
2. Trova la tua 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 alle impostazioni del progetto Google Cloud Console ed elimina il progetto sottostante.

8. Conclusione

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

Scopri di più

Visita questo link per ottenere il badge Percorso del Builder completato.

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

• Documenti di Cloud Run
• Creare app in Google AI Studio