Come creare un’app web con Hostinger Horizons

Hostinger Horizons è uno strumento basato sull’intelligenza artificiale che ti permette di creare app web senza scrivere una sola riga di codice. Che tu abbia bisogno di un’app per il fitness con piani di allenamento personalizzati o di uno strumento di gestione dei volontari per un’organizzazione no-profit, inserisci semplicemente i tuoi prompt e Hostinger Horizons si occuperà del resto.

È un’ottima scelta per chi si cimenta per la prima volta nella creazione di app web senza esperienza di programmazione o saperne scrivere il codice. Anche i liberi professionisti con un budget limitato possono trarne vantaggio, potendo creare app completamente funzionali senza dover assumere sviluppatori.

In questa guida imparerai come creare un’app web utilizzando Hostinger Horizons, dalla configurazione del tuo primo progetto al lancio per l’accesso pubblico. Scoprirai come perfezionare i prompt per ottenere risultati migliori, utilizzare le funzionalità principali in modo efficace e ottimizzare le funzioni della tua app in base alle tue esigenze.

Crea un’app web in sette passaggi con Hostinger Horizons

Per illustrare al meglio il processo di creazione di un’app web con Hostinger Horizons, in questo tutorial creeremo un’app web per il fitness che genera piani di allenamento e dieta personalizzati in base ai dati dell’utente (come età, altezza, peso, livello di attività e condizioni di salute preesistenti).
Se stai lavorando a un tipo diverso di app web, sentiti libero di adattare i prompt e le funzionalità di conseguenza.

1. Iscriviti e crea un nuovo progetto

Inizia visitando la pagina ufficiale di Hostinger Horizons e scegliendo il piano più adatto alle tue esigenze. A partire da 19,99€/mese, tutti i nostri piani offrono le stesse funzionalità di creazione di applicazioni web senza codice e un mese di hosting gratuito. La differenza consiste nel limite di messaggi, che arriva fino a 1.000 messaggi.

Tieni presente che Hostinger Horizons è attualmente in fase di accesso anticipato, quindi potresti occasionalmente riscontrare errori durante l’utilizzo. Ma non preoccuparti: offriamo una garanzia di rimborso di 30 giorni, che ti consente di annullare il piano in qualsiasi momento se cambi idea.

Dopo aver completato il pagamento, accedi alla dashboard di hPanel e seleziona Siti web → Lista dei siti web nella barra a sinistra. Clicca poi su Aggiungi sito web e scegli Hostinger Horizons.

2. Naviga nell’interfaccia utente

È ora di iniziare a usare Hostinger Horizons.

Vedrai un campo di testo in cui potrai scrivere il tuo prompt in più di 80 lingue. Dopo aver descritto la tua app web, premi Invio.

Hostinger Horizons impiegherà qualche istante per elaborare la tua richiesta. Una volta pronta, la dashboard si dividerà in due finestre:

• Finestra a sinistra – inserisci qui ulteriori prompt per aggiungere funzionalità o perfezionare la tua app web. Sotto il campo dei prompt, puoi trovare il numero di crediti messaggio rimanenti nel tuo piano.
• Finestra a destra – mostra un’anteprima in tempo reale della tua app mentre apporti modifiche. Puoi interagire con gli elementi per testarne la funzionalità.

Nell’angolo in alto a destra della dashboard, troverai il pulsante Pubblica per avviare la tua app web e renderla accessibile al pubblico.

3. Definisci lo scopo della tua app web

Hostinger Horizons si basa su prompt ben strutturati per generare l’app web che desideri. Quindi, più precisi sono i tuoi prompt, migliori saranno i risultati. Quando definisci lo scopo della tua app web, includi questi dettagli chiave in modo che Hostinger Horizons capisca la tua idea:

• Scopo dell’app: descrivi chiaramente il problema che la tua applicazione web risolve, ad esempio “aiutare gli utenti a monitorare i progressi nel fitness”.
• Funzionalità chiave: elenca le funzioni essenziali e gli strumenti che desideri includere, come l’accesso utente, i moduli, le dashboard o i report.
• Preferenze riguardo l’UI: sii specifico riguardo agli elementi di design come layout, schema dei colori ed estetica generale.

Ecco un esempio pratico di una piattaforma di fitness che genera piani di allenamento e dieta personalizzati:

Crea una piattaforma di fitness che offra programmi di allenamento e dieta personalizzati basati sui dati degli utenti. L'app dovrebbe consentire agli utenti di inserire età, altezza, peso, livello di attività e condizioni di salute. Sulla base di questi dati, dovrebbe generare routine di fitness personalizzate e consigli alimentari. Includi una dashboard intuitiva con moduli di inserimento dati, uno strumento per tracciare i progressi e un'interfaccia visivamente accattivante con un layout pulito e moderno e la combinazione di colori verde acqua e viola.

Come qualsiasi altro strumento di intelligenza artificiale, il primo output di Hostinger Horizons potrebbe non essere perfetto, indipendentemente dalla quantità di dettagli del prompt iniziale. Possiamo basarci su questa prima iterazione dell’app inviando i prompt successivi.

4. Personalizza il design del tuo progetto

Il passo successivo è la personalizzazione del design dell’applicazione. Oltre a rendere l’app più accattivante dal punto di vista grafico, questo processo prevede l’aggiunta di elementi importanti per la navigazione e le funzionalità.

Ecco alcuni dei componenti front-end più importanti da includere nella tua applicazione:

• Menù: aree come una barra laterale, una scheda o un menù a discesa che contengono link a pagine diverse.
• Moduli: campi che consentono agli utenti di inserire dati, come un indirizzo email o un’immagine.
• Pagine: finestre a schermo intero contenenti diverse impostazioni e informazioni.
• Pulsanti: elementi che eseguiranno determinate azioni, come l’invio di dati o la navigazione verso un’altra pagina.

Se hai un wireframe che descrive in dettaglio il layout dell’applicazione e il posizionamento degli elementi, puoi caricarlo su Hostinger Horizons come prompt.

Questo produrrà un output più accurato. In alternativa, utilizza un prompt testuale, come questo esempio:

Crea una pagina di accesso in cui gli utenti possono accedere al proprio account. Includi qui un pulsante che reindirizzi gli utenti alla pagina di registrazione, dove possono creare un nuovo account se non ne hanno già uno.

Ricordati di aggiungere ulteriori dettagli sul design della tua applicazione, come colori, dimensioni del testo e stile del font.

5. Rifinisci la logica e la struttura

Ora che hai definito il design, perfezioniamo le funzionalità dell’app. Il processo rimane lo stesso: fornisci prompt di aggiornamento sugli aspetti che desideri migliorare.

In questa fase, le aree di miglioramento sono solitamente legate alla logica e alle funzionalità dell’applicazione. Alcune delle più comuni sono:

• Logica di business: le regole di base della tua applicazione. Ad esempio, la tua app di fitness dovrebbe fornire consigli diversi in base ai dati di salute inseriti.
• Albero di decisione: il flusso dell’applicazione in base alle decisioni degli utenti. Ad esempio, se un utente seleziona un determinato menù, dovrebbe apparire una pagina predefinita.
• Gestione degli eventi: la reazione alle azioni dell’utente, come click, scorrimenti e pressione dei tasti. Ad esempio, un interruttore dovrebbe attivarsi quando viene cliccato.
• Flusso dei dati: la gestione dei dati utente quando vengono trasmessi tramite moduli, convalidati o caricati. Ad esempio, la password utente deve essere una stringa di testo che corrisponde alla voce del database.

Durante la scrittura di prompt per Hostinger Horizons, assicurati di descrivere chiaramente la logica o la funzionalità che desideri migliorare.

Fornire all’intelligenza artificiale un contesto più ampio aiuta a produrre un output più accurato. Ecco un esempio di prompt per perfezionare il flusso di dati:

Controlla i campi dell’indirizzo email e della password nella pagina di accesso. Assicurati che accettino solo stringhe di testo corrispondenti a voci di database esistenti.

Se i dati inseriti non corrispondono ad alcuna voce del database, viene visualizzato un messaggio di errore che indica "Email o password non valide". Se le informazioni fornite sono valide, l'utente viene reindirizzato alla dashboard principale.

Quindi, verifica che Hostinger Horizons abbia configurato correttamente la logica e le funzionalità della tua applicazione testandole nell’anteprima. Questo ti aiuterà anche a identificare eventuali funzionalità mancanti.

6. Connetti la tua app a un database (opzionale)

Un database consente alla tua app web di raccogliere e archiviare i dati degli utenti. Questo è essenziale se la tua app include funzionalità come la registrazione degli utenti.

Hostinger Horizons ti permette di configurare un database per la tua applicazione usando Supabase facilmente.

Per farlo, vai alla pagina di registrazione di Supabase e crea un nuovo account. Crea una nuova organizzazione e seleziona un piano – quello gratuito è sufficiente per un’app di base di piccole dimensioni. Quindi, crea un nuovo progetto inserendone il nome, la password del database e la regione.

Dovresti essere reindirizzato alla pagina del nuovo progetto. Da questo menù, copia l’URL del progetto e la chiave API, che utilizzeremo per connettere il database alla tua applicazione.

Successivamente, chiedi a Hostinger Horizons di configurare il back-end della tua applicazione utilizzando le credenziali copiate da Supabase. Ecco un esempio del prompt:

Collega l'applicazione al mio database Supabase. Ecco le credenziali:

URL del progetto: URL-del-tuo-progetto

Chiave API: la-tua-chiave-API

Quindi, crea le tabelle necessarie e collegale ai campi corrispondenti nell’applicazione.

7. Testa e pubblica la tua app web

A questo punto, la tua applicazione dovrebbe essere completamente sviluppata e funzionante. Prima di finalizzarla, controlla tutte le funzionalità e la navigazione per assicurarti che funzionino correttamente.

Con Hostinger Horizons, puoi verificare e interagire con la tua applicazione direttamente dal menù di anteprima nella finestra a destra.

Ecco una lista degli elementi da verificare durante il test dell’applicazione web:

• Funzionalità: tutte le funzionalità dovrebbero funzionare correttamente nell’ambiente live. Questo include la possibilità di eseguire operazioni CRUD sul database e la logica di business.
• Navigazione: il flusso della tua app e la funzionalità degli elementi di navigazione. Ad esempio, se clicchi su Accedi, verrai reindirizzato alla dashboard principale.
• Visibilità: l’aspetto della tua applicazione web su dispositivi mobile e desktop. Assicurati che tutti gli elementi siano correttamente ridimensionati e utilizzabili.

Ora, pubblichiamo il tuo progetto. Poiché Hostinger Horizons è incluso nel nostro piano business di web hosting, puoi pubblicare immediatamente la tua applicazione web semplicemente cliccando sul pulsante Pubblica in alto a destra.

Hostinger Horizons pubblicherà il tuo progetto utilizzando un dominio temporaneo. Prima di collegare il tuo dominio, eseguiamo alcuni test aggiuntivi.

Inizia verificando la compatibilità tra browser. Per farlo, accedi alla tua applicazione da diversi browser web e dispositivi per verificare la presenza di problemi.

Quindi, verifica le prestazioni e la velocità di caricamento utilizzando uno strumento di benchmark come GTMetrix. Se il risultato non è ottimale, chiedi a Hostinger Horizons di perfezionare il codice.

Se tutto sembra a posto, torna al menù Siti web dell’hPanel per connettere il tuo dominio all’app web.

Ecco fatto! Congratulazioni, hai creato e pubblicato un’app web utilizzando Hostinger Horizons.

Conclusioni

Hostinger Horizons è una piattaforma basata sull’AI che ti permette di sviluppare applicazioni web full stack senza dover scrivere codice. Basta inserire dei prompt e questo strumento creerà qualsiasi applicazione tu abbia in mente.

In questo articolo abbiamo spiegato i passaggi generali per creare un’app web utilizzando Hostinger Horizons. Ecco un riepilogo:

1. Registrati a Hostinger Horizons e avvia un nuovo progetto tramite la dashboard di hPanel.
2. Familiarizza con l’interfaccia utente dello strumento.
3. Inserisci il prompt iniziale per definire lo scopo principale della tua app web.
4. Personalizza il layout, il design e i componenti front-end del tuo progetto.
5. Perfeziona la logica di business e la struttura della tua applicazione per garantirne il corretto funzionamento.
6. (Opzionale) Se vuoi raccogliere i dati degli utenti, crea un database Supabase e chiedi a Hostinger Horizons di collegarlo alla tua applicazione.
7. Testa la tua applicazione e pubblicala utilizzando il piano di web hosting Business di Hostinger. Quindi, collega la tua app web a un indirizzo di dominio appropriato.

Semplice, vero? Inizia subito a sviluppare la tua app web utilizzando Hostinger Horizons.