Creare Web app in pochi minuti utilizzando Anvil

Creare web app è ormai diventata una routine quotidiana che impegna organizzazioni di sviluppo del software in tutto il mondo. Le web app hanno soppiantato, già da tempo, le classiche applicazioni desktop compilate. Ciò che ha reso possibile questo tipo di orientamento è il fatto che, una web application, una volta sviluppata e pubblicata è disponibile immediatamente al cliente accedendo direttamente da browser come si fa con un normalissimo sito web. Di contro sviluppare una web app è leggermente più complesso che sviluppare un’applicazione desktop, tanto per intenderci, il classico file eseguibile con estenione “.exe”. Questo perchè, in una web app, interagiscono vari linguaggi e architetture tutte differenti tra loro. Pertanto, sviluppare una web application può risultare molto più complesso che sviluppare una applicazione desktop.

La creazione di librerie Javascript, come JQuery, e framework di supporto allo sviluppo hanno colmato diverse lacune rendendo il lavoro del programmatore più agile e veloce. Ma è necessario, comunque, conoscere e implementare diverse tecnologie per realizzare web app sicure ed affidabili. Oggi, grazie ad Anvil un framework di ultima generazione, puoi sviluppare web app utilizzando solo un browser web e Python come unico linguaggio di programmazione.


Leggi anche: “Come sviluppare web app CodeLess con WordPress, PHP e MySQL


1. Lo sviluppo agile con Anvil

Prima abbiamo parlato di approccio allo sviluppo, rendere questo approccio di sviluppo più snello è un qualcosa tutt’altro che semplice. Tenendo presente anche, che, i progetti web sono diventati mano-mano sempre più complessi da gestire. Quindi, per creare una web app è necessario avere la conoscenza di più linguaggi di programmazione. Fortunatamente, oggi, grazie ad Anvil, potrai creare web app, in pochi minuti, utilizzando soltanto Python come linguaggio di programmazione sia lato client sia lato server. Inoltre, potrai distribuirla sul web con un clic senza la necessità di implementare server o container.

Anvil rende lo sviluppo più agile e consente di creare una web app full-stack utilizzando soltanto Python. Puoi creare complesse interfacce utente scegliendo quella di tuo interesse dalla pagina di creazione dei moduli Form.

Ora, daremo un’occhiata alle caratteristiche di base di Anvil per vedere quanto può essere potente questo tipo di tecnica orientata allo sviluppo agile di applicazioni web.

2. Come accedere ad Anvil

Anvil è una piattaforma per la creazione di app Web full-stack interamente in Python. Semplifica enormemente la creazione e la distribuzione di web application. È facile da usare e open source. Useremo il framework Anvil per sviluppare la classica applicazione “Hello World…!”. Come ho accennato prima, per accedere ad Anvil, è necessario solo un browser web. Sì, hai capito bene, da ora in avanti per sviluppare web app avrai bisogno solo di internet e di un computer, eventualmente, anche datato.

Ora, clicca su questo link e il gioco è fatto. Anvil sarà a tua completa disposizione e potrai creare subito il tuo primo progetto.

Crea web app con Anvil
Crea web app con Anvil

3. Come creare la tua prima web app con Anvil

Una volta aperta la homepage di Anvil, per creare un nuovo progetto web, non devi fare altro che cliccare sul link “start building” situato in alto a destra. Successivamente, per continuare con la fase di creazione del progetto, devi esserti precedentemente registrato alla piattaforma, oppure, se possiedi un account Google, puoi cliccare sul tasto “Sign in with Google”. Inserisci le tue credenziali Google e dopo qualche secondo ti ritroverai proiettato nel fantastico mondo di Anvil.

Pagina di accesso ad Anvil per creare web app
Pagina di accesso ad Anvil per creare web app

3.1 Scegli la tipologia di progetto Anvil adatta

A questo punto, per creare la tua prima applicazione web “Hello World…!”, Anvil ti offre un percorso interattivo, creato ad-hoc, proprio per creare questo tipo di applicazione. Logicamente con Anvil puoi creare ogni tipo di web app, i creatori di Anvil, per agevolarti e farti acquisire dimestichezza con la piattaforma, hanno inserito dei percorsi interattivi che ti guideranno passo-passo a creare web app in pochissimi secondi. È, l’applicazione “Hello World…!” non poteva mancare.

Quindi, nella sezione intitolata “2. Build a Hello World App” clicca sul pulsante “Start the interactive tutorial”.

Crea web app "Hello World...!"
Crea web app “Hello World…!”

Da questo momento in poi, una freccia rossa, ti indicherà dove cliccare e cosa fare. Quindi, clicca sul riquadro riportante la dicitura “New Blank App”.

Crea un progetto vuoto con Anvil
Crea un progetto vuoto con Anvil

Seleziona il tipo di look, cioè lo stile dei colori, che desideri associare alla tua applicazione. Dato che siamo ancora nella fase guidata, segui sempre la freccia rossa, e pertanto scegli il template “Material Design”, che conferirà alla tua web app lo stile raffigurato dalla figura associata.

scegli un template per la tua web app
scegli un template per la tua web app

Il tuo primo Form è stato creato e ora non devi fare altro che trascinare i componenti che desideri direttamente sul Form stesso. Ma visto che sei ancora nella fase guidata, segui sempre le azioni che la freccia rossa ti consiglia di fare.

3.2 Trascina i componenti in un Form Anvil

Ora, trascina il componente indicato dalla freccia, cioè un pulsante, esattamente nel punto indicato. Una volta posizionato il pulsante sul Form, il wizard, ti sta suggerendo di impostare la proprietà “Text” del pulsante a “Say Hello”. Inoltre, e sicuramene lo avrai già notato, ad ogni operazione guidata e associato un riquadro nero che suggerisce l’azione corrente ma, ti permette di tornare anche all’azione guidata precedente e successiva. Quindi, una volta digitata la frase “Say Hello” nella proprietà Text del pulsante non ti rimane che cliccare sul pulsante “Continue” presente nel riquadro nero.

trascina un pulsante sul form
trascina un pulsante sul form

3.3 Associa azioni ai componenti in un Form Anvil

Ora, che il tuo pulsante è sullo schermo è necessario che alla sua pressione esegua un’azione ben specifica. Per fare questo, la procedura guidata, ti sta suggerendo di fare un doppio click sul pulsante. Questa azione ti proietterà nell’evento associato al pulsante, dove, inserendo solo ed esclusivamente codice Python, digiterai il codice suggerito dal wizard. È cioè, il codice riportato nel riquadro nero in basso: alert(“Hello, world!”). In questa fase Anvil, ti impedisce di copiare e incollare codice, questo proprio perché, gli sviluppatori di Anvil, sono più interessati a farti prendere confidenza con il framework.

Esegui la tua prima web app con Anvil
Esegui la tua prima web app con Anvil

3.4 Come eseguire una web app Anvil

A questo punto, hai tutto pronto. Non ti resta che cliccare sul pulsante “Run” e goderti il saluto “Hello, World!” offerto da Anvil. Cliccando sul pulsante “Stop” potrai fermare l’applicazione e tornare nuovamente al codice Python.

"Hello World...!" in Esecuzione
“Hello World…!” in Esecuzione

4. Come pubblicare sul web la tua web app creata con Anvil

Ti sembrerà strano, ma, la tua web app è già pronta per essere pubblicata sul web, e quindi, disponibile da subito tramite internet. Con soli tre clic ottieni un link pubblico da condividere con il mondo! Esistono in realtà diversi modi per distribuire la tua app. per le esigenze di questo tutorial vedrai solo il primo caso, cioè, la possibilità di ottenere un link pubblico da consegnare ai tuoi clienti per poter avviare la tua web app ovunque essi si trovino.

L’operazione di pubblicazione di una web app con Anvil è fattibile soltanto quando l’applicazione è in fase di esecuzione. Infatti, se clicchi nuovamente sul pulsante “Run” noterai in alto a destra il link “Publish This App”.

Come pubblicare, sul web, la tua prima web app
Come pubblicare, sul web, la tua prima web app

Ora, clicca su questo link e si aprirà una finestra da dove potrai scegliere la tipologia di pubblicazione che preferisci.

Opzioni di pubblicazione della web app
Opzioni di pubblicazione della web app

Adesso, se clicchi sul primo pulsante “Copy”. Potrai condividere il link copiato negli appunti con chiunque tu vorrai, e gli basterà copiarlo e incollarlo nel suo browser per avviare da internet la tua web app, pubblicata sul cloud offerto gratuitamente da Anvil. Certo questo non è il sistema più sicuro per distribuire un app. a tal proposito ti consiglio di provare anche gli altri sistemi alternativi di pubblicazione, presenti sempre nella stessa maschera.

Addirittura, nella sezione “Embed my app in a web page”, copiando e incollando il codice riportato, in un tag DIV di una comunissima pagina html puoi pubblicare la web app all’interno della stessa.

pubblica la tua web app su una pagina html esterna
pubblica la tua web app su una pagina html esterna

5. Come gestire banche dati con Anvil

Molto spesso si ha l’esigenza di archiviare dati su un database. Anvil supporta la gestione di database esterni sfruttando alcune librerie Python, molto popolari, come pymysql e psycopg2.

Ma Anvil ha una caratteristica che ho trovato molto interessante per accelerare ulteriormente lo sviluppo, e riguarda i database che vengono integrati automaticamente nelle app. Questi database, chiamati “Data Tables”, sono oggetti che gestiscono un sistema di archiviazione dati, basato su PostgreSQL, a cui accedi direttamente tramite codice Python. A questo link potrai accedere a tutta una serie di tutorial e guide che ti serviranno per approfondire ogni aspetto di Anvil compreso i database.

In ogni caso ti propongo di seguire questo video tutorial, dove potrai vedere quanto sia semplice creare e gestire database con Anvil

Gestire database con Anvil

Leggi anche: “I 10 migliori emulatori Android per PC e Mac


Antonio Lamorgese

corso base di javascript per principianti

Amministratore di rete e sviluppatore. Dopo anni di esperienza nel settore, ho ideato un sistema di gestione dati MYSQL in PHP senza scrivere una sola riga di codice. Scopri di più....

x