Vedi profilo

Crea la tua prima webapp #nocode

Crea la tua prima webapp #nocode
di Stefano Failla • Newsletter #4 • Visualizza online
Se qualche volta hai pensato “perché non c'è una web app per fare questa cosa più velocemente ?” oppure “con una bella web app si potrebbe risolvere questo problema”, allora è giunto il momento di accettare una sfida e metterti alla prova.
Inizia a pensare quali sono gli elementi essenziali per realizzare la tua idea e trova lo strumento giusto per farlo. Tra i tanti strumenti disponibili io ho scelto di utilizzare #bubble perché mi sembra il più completo, ma ce ne sono probabilmente altri altrettanto validi.
Ciò che accomuna tutti i tools #nocode sono dei piccoli mattoncini di base, chiamati anche “building blocks”, ciascuno con una propria funzione, che variamente combinati danno vita alla tua idea.
Vediamo insieme, in questo numero della newsletter, come creare una semplice pagina di registrazione e accesso alla nostra webapp.
E continuiamo il nostro viaggio nel mondo #nocode.
🚀 Se anche tu stai realizzando un prodotto digitale con strumenti nocode e vuoi segnalarmelo, rispondi a questa email con il link al tuo prodotto, l'elenco dei tools usati e il tuo twitter handle.
Sarò felice di condividere nella newsletter i migliori progetti !
Ti auguro una buna lettura della newsletter e, mi raccomando, non dimenticarti di inoltrarla a chi conosci e pensi possa avere interesse per l'argomento .

Building Blocks
Building Blocks
Template o blank canvas
Qualunque sia il tool #nocode che hai deciso di usare, la prima volta che ti cimenti nella costruzione di una tua idea ti troverai davanti ad una scelta: utilizzare un modello grafico per principianti o partire dal foglio bianco ?
Se usi Bubble questo dubbio te lo togli subito. Il template di ogni nuova webapp è così poco invitante che la tua scelta non può che ricadere sul foglio bianco. Dopo anni di utilizzo di Bubble mi sono convinto che si tratta di una scelta voluta 😊.
Ed in un certo senso hanno ragione. Meglio il foglio bianco su cui iniziare ad impostare la struttura della tua prima pagina. Che quasi sempre è molto facile (in apparenza) da realizzare.
Troverai nelle voci di menù degli elementi grafici da posizionare sul tuo canvas ed ecco che inizi a vedere una forma, la ridimensioni, la sposti, le dai un colore, inserisci un testo. Sono i tuoi primi passi.
Vuoi vedere come è semplice ? Guarda questo video che dura meno di 2 minuti e scopri come si creano contenuti semplici in una pagina di Bubble 👀
SNC - Video Bubble 01
SNC - Video Bubble 01
Spazi e proporzioni nella pagina
Hai visto come è facile ? Inserire elementi grafici in una pagina è una cosa immediata, ma ti sei domandato cosa rende una pagina gradevole alla vista del visitatore ?
Una volta che avrai scoperto cos'è un un gruppo o un container (che poi sono delle div in linguaggio html) vorrai trovare le dimensioni giuste, gli allineamenti corretti ed i posizionamenti migliori. Come si deve fare ?
Beh, non è che devi conoscere i segreti della sezione aurea (anche se non guasterebbe 😜 ) ma per iniziare un po’ di matematica serve. Ad esempio, puoi iniziare a ragionare sul fatto che la tua app sarà vista da un computer con schermo grande, da un tablet più piccolo e per sua natura orientabile e ovviamente da uno smartphone. Sapendo che le dimensioni più piccole degli smartphone sono larghe 320 px (i pixels sono l'unità di misura delle pagine web, ndr), allora perché non fare una pagina che sia larga un multiplo di 320. Ed ecco che hai in 1280px una buona dimensione di pagina.
Al suo interno, dividi lo spazio in blocchi da 320px e crea più sezioni verticali che potranno contenere 1, 2, 3, o 4 blocchi. Semplice no ?
Avrai così della sezioni con larghezza a tutta pagina, altre divise a metà o in varie combinazioni dei tuoi blocchi di base. Allinea tutto ordinatamente e avrai messo delle buone fondamenta 😊.
La scelta dei font e dei colori
Prima ancora di decidere quali sono i contenuti che vuoi inserire, è opportuno fare una ricerca ed una scelta in merito ai font dei testi ed ai colori da utilizzare.
Scegli al massimo due o tre fonts semplici e chiari. Non esagerare. Ed utilizzali con coerenza. Ad esempio scegli un font per i titoli, uno per il testo normale e se proprio serve uno per le piccole etichette.
Lo stesso vale per i colori. Vai su un sito di generazione delle palette di colori, parti da un colore di base e trova i colori complementari o a contrasto. In fin dei conti ti servirà un colore di sfondo (quando non usi il bianco), una tonalità di nero per il testo, un colore forte per i pulsanti da cliccare, un colore per i pulsanti non attivi e magari un colore per i bordi e i profili.
Vai nelle impostazioni della tua piattaforma #nocode e memorizza sia i font che i colori come tue scelte preferite. Questo ti aiuterà a dare un'immagine unificata a tutte le tue pagine.
E se un domani cambi idea, inizia a sperimentare e modifica le tue scelte iniziali. Ma mantieni sempre la coerenza logica nell'uso che farai di fonts e colori.
Crea un accesso per gli utenti
Se la tua idea di web app prevede l'identificazione degli utenti, devi necessariamente creare un modulo in cui i visitatori inseriscono una email ed una password per registrarsi o accedere.
Ogni piattaforma #nocode è chiaramente diversa dall'altra, ma le funzioni di “signup” e di “login” sono generalmente fornite già fatte per ovvie ragioni legate alla sicurezza ed alla privacy dei dati.
Non ti sarà difficile individuare le componenti utili per realizzare le funzioni di accesso utenti. In Bubble è sufficiente creare due “input forms” (una per l'email ed una per la pwd) ed un pulsante collegato ad un “workflow”. I workflow di Bubble sono delle azioni del server, che permettono di creare, modificare o cancellare i dati (oltre ad una serie piuttosto ampia di altre opzioni).
Ciò che scoprirai è che, creando le azioni di registrazione e accesso utenti, hai iniziato ad usare il database. In altre parole hai iniziato a “scrivere” in apposite tabelle delle informazioni che possono poi essere riutilizzate dalla tua web app ogni volta che le richiami.
Ma sulle funzioni dei database torneremo. Per ora è importante che tu abbia visto come è facile creare una pagina web che permette ad un visitatore anonimo di registrarsi alla tua web app. Naturalmente senza avere scritto una sola riga di codice 🤓.
_______________________
L'unico template che puoi usare 😜
Se anche tu deciderai di usare Bubble per creare le tue web app, per quanto io sia generalmente contrario all'uso dei template, ti segnalo l'unico template che puoi usare (che è il mio 🤫).
A parte le battute, perdonami se faccio auto promozione, ma in tema di creazione di una nuova web app occorre dire che ci sono alcune funzionalità di base che vengono ripetute ogni volta e che richiedono molta attenzione, oltre che un discreto tempo per essere costruite.
In qualsiasi web app è molto probabile che serva:
  • una intestazione che rimane fissa con i vari menù e la login
  • un piè di pagina che contiene vari link e i dati legali
  • una pagina pubblica di presentazione della web app
  • un modulo di registrazione e di accesso utenti
  • un processo di “onboarding” per chiedere ai tuoi nuovi utenti dei dati personali (nome, cognome, indirizzo, foto, ecc.) o la loro azienda di appartenenza o la validazione della email e del numero di cellulare.
  • una pagina del profilo in cui l'utente può gestire i suoi dati e cambiare email, password ed altre informazioni personali.
Poiché credo che realizzare tutte le volte da zero queste funzionalità sia veramente “scoprire l'acqua calda”, ho messo a disposizione di tutti il template che avrei voluto avere io quando ho creato le mie prime web app. Solo che per costruirlo ho dovuto prima fare e rifare lo stesso lavoro per molte volte, sino a perfezionarlo e inserirlo nel template.
Per chi fosse interessato, il link al template è qui sotto.
Essential - Starter Template for Bubble
___________________
Vediamo un po' di rassegna stampa
Selezione di notizie dal mondo #nocode per questo mese.
#NCode è la startup italiana che fa parlare di sé
Sono giovani, sono bravi e hanno creato una community di nocoders che sta crescendo. E siamo anche amici 😀. Ecco chi ne parla.
Ncode è la prima startup italiana ad usare lo sviluppo No Code - BitMat
Ncode la startup che punta sul concetto di no code per lo sviluppo software
Una startup scommette sullo sviluppo "senza codice" - Wired
#Adalo è il round di finanziamento del mese
La piattaforma nocode specializzata nella creazione di app mobile ha raccolto $ 8 milioni in capitale di rischio. Congratulazioni!
No-code app development platform Adalo nabs $8M | VentureBeat
#Forbes dedica grande attenzione al #nocode.
Ben 3 articoli nel solo mese di Maggio da parte della prestigiosa rivista Forbes. Evidentemente il #nocode non va sottovalutato!
Council Post: Low-Code And No-Code In 2021: Are They As Useful As They Seem?
Council Post: Empowering The Modern Workforce, No-Code Required
Council Post: Low-Code Versus No-Code And The Future Of Application Development
Altre considerazioni intereasanti in tema #nocode
Don’t hate on low-code and no-code – TechCrunch
___________________
Spero che la lettura ti sia piaciuta. E ti ricordo che puoi seguire il mio account Twitter per restare in contatto tra una newsletter e l'altra. Se vuoi maggiori informazioni sul #nocode, imparare ad utilizzare #Bubble o se ti serve un supporto per il tuo progetto #nocode, prenota una consultazione gratuita di 30 minuti qui:
30 Minute Meeting - Stefano Failla
___________________
Se vuoi farmi un favore, consiglia questa newsletter ai tuoi contatti e aiutami a fare crescere il numero dei miei lettori. Grazie !
Appuntamento tra un mese.
Ti piace questa newsletter?
Diventa un membro per €5 al mese
Non perdere le altre pubblicazioni di Stefano Failla
Stefano Failla

Ogni mese aggiornamenti e approfondimenti per chi è interessato allo sviluppo di web application #nocode. Non serve conoscere il codice di programmazione per realizzare le tue idee!

Puoi gestire la tua iscrizione qui
Se hai ricevuto questa newsletter tramite inoltro e ti piace, puoi iscriverti qui.
Curato con passione da Stefano Failla con Revue.