Crea le tue app Web con Stamplay

Le app Web sono un ottimo modo per interagire con i tuoi clienti. Tuttavia, per gli sviluppatori non web, possono essere un compito davvero arduo da creare. Fortunatamente per gli utenti, la gente di Stamplay ha puntato a rendere la creazione di applicazioni Web un gioco da ragazzi che automatizza il processo di sviluppo di app Web dando una semplice procedura passo-passo sulla creazione di app..

Stamplay può essere utilizzato per creare app Web che si integrino con servizi come Facebook, Google, Dropbox e molte altre app. Questo è bello perché, quando si usa Stamplay, non è necessario uscire e trovare le API per ciascun servizio, basta trascinarlo.

In questo tutorial, ti mostrerò come puoi creare la tua prima app basata su social network, da zero, usando Stamplay.

Creazione della prima app Web

Creazione di una nuova app Web dalla schermata principale.

Per iniziare, andare sul sito Web di Stamplay e creare un account facendo clic sul verde Avviare ora pulsante che si trova verso il centro dello schermo. Puoi quindi registrarti per un account utilizzando il tuo indirizzo email o il tuo account Google.

Scegliere un nome per la tua nuova app.

Ora verrai indirizzato alla tua libreria di app. Puoi utilizzare questa pagina per visualizzare sia le tue vecchie app sia per avviare la creazione di nuove app. Per creare una nuova app, guarda verso l'angolo in alto a destra dello schermo e clicca sul blu Crea app pulsante. Apparirà una finestra pop-up che ti chiederà di nominare la tua nuova app. Dopo aver confermato il nome della tua app, verrai reindirizzato alla pagina Componenti.

componenti

Nella pagina dei componenti, puoi scegliere il modo in cui desideri che l'utente interagisca con la tua nuova app Web. Per questo esempio, creerò un'applicazione che consente a un utente di accedere a Facebook, compilare un semplice modulo e inviare un'e-mail alla sua posta in arrivo.

Selezione di un servizio di iscrizione per la tua app. 

Per iniziare, clicca sul blu Utente pulsante dalla parte superiore della finestra. Per aggiungere l'accesso di Facebook alla tua app, fai clic su Aggiungi blu pulsante dal lato destro della finestra; apparirà una finestra popup che ti chiederà di scegliere un servizio di accesso. Per questo tutorial, selezionerò l'opzione Facebook.

Aggiunta di componenti alla tua app Web in Stamplay.

A questo punto ti verrà chiesto di fornire un ID app e un app segreto. Questi possono essere acquisiti sulla pagina di devleoper di Facebook e vengono utilizzati per identificare la tua app con i server di Facebook.

Ora fai clic sul blu più pulsante che si trova a destra del logo dell'utente. Ora potrai aggiungere altri componenti alla tua app. Dal momento che vogliamo inviare una e-mail ai nostri utenti, fare clic su e-mail opzione. Quindi, fare clic su più nuovamente il pulsante per tornare alla schermata di selezione. Questa volta, fai clic su modulo pulsante.

Creazione di campi per il modulo.

Guarda verso il centro dello schermo, sarai in grado di configurare il modulo dandogli un nome e aggiungendo campi. Per aggiungere campi, guarda in fondo alla finestra sotto campi intestazione. Utilizzare il Nome del campo casella di testo per dare un nome al campo. A destra di questa casella di testo troverai un menu a discesa che ti chiederà quale tipo di campo desideri aggiungere.

Per questo tutorial, userò il modulo per chiedere agli utenti quale sistema operativo per smartphone usano. Per fare questo, avrò l'utente controllare quale telefono usano, quindi vado a scegliere pulsante di scelta dal menu a discesa.

Verrà ora portato a un menu che consente di inserire le opzioni del modulo. Nel caso di pulsanti di opzione, è possibile aggiungere i nomi dei pulsanti all'elenco. Per il mio modulo, aggiungerò i nomi dei sistemi operativi per smartphone all'elenco.

Se desideri rendere necessaria una parte del modulo, assicurati di attivare il necessario interruttore on / off per il sopra posizione. Per aggiungere più moduli alla tua app, fai clic su + Aggiungi modulo pulsante dalla parte superiore della finestra.

Compiti

Configurazione dell'email che verrà inviata agli utenti della tua app. 

Ora che hai creato il tuo modulo, è il momento di usare il Compiti scheda per configurare l'email che invieremo al nostro utente. Clicca nel Compiti pulsante dalla barra laterale. Quindi, guarda verso l'angolo in alto a destra della finestra e fai clic su Nuovo compito pulsante.

Configurazione di un'attività in Stamplay

Ora puoi scegliere il componente di innesco e il componente di azione. Il tuo componente di innesco è ciò che fa scattare il componente di azione per fare qualcosa. Sotto ogni componente, puoi scegliere come verrà attivato il componente. Ad esempio, puoi impostare il componente di innesco come utente e farlo attivare il componente di azione quando accede a Facebook.

Per questo esempio, imposterò il componente trigger su utente e la componente di azione a e-mail. Inoltre, ho intenzione di farlo in modo che quando l'utente accede all'app, una e-mail viene inviata alla loro casella di posta.

Filtraggio a chi l'app invia un'email. 

Clicca il blu Continua pulsante e troverai un'intestazione con l'etichetta Sintonizza utente. Puoi utilizzare questa sezione per perfezionare l'attivazione da parte dell'utente, ad esempio, se desideri che l'e-mail sia inviata all'utente solo se la posta elettronica termina con gli account Gmail, puoi farlo facendo clic sul Aggiungi filtro pulsante e scelta e-mail dal menu a discesa Seleziona una proprietà e (Testo) Termina con dal menu a discesa. Puoi quindi digita "@ gmail.com" nella casella delle condizioni e fare clic su blu più pulsante per aggiungere questo filtro alla tua app.

Configurazione dell'email che verrà inviata agli utenti della tua app. 

A questo punto ti verrà richiesto di configurare le tue opzioni email. Guarda verso il lato destro della finestra sotto il login dati di innesco header - noterai un bel po 'di opzioni. Queste opzioni sono informazioni raccolte sul tuo utente nella procedura di accesso a Facebook. Per utilizzare queste informazioni nel modulo, basta fare clic su una casella di testo e quindi fare clic sulla rispettiva informazione dal lato destro della finestra. 

Puoi anche inserire manualmente le informazioni nella tua e-mail, qualcosa che vorresti fare per il tuo indirizzo email di ritorno e il tuo corpo email. Una volta terminata la configurazione della tua email, fai clic su Crea attività pulsante che si trova verso la parte inferiore del menu.

disposizione

Ora che hai creato le tue attività, è il momento di creare il front-end della tua app. Per fare ciò, fare clic su disposizione scheda dalla barra laterale e guarda verso l'angolo in alto a destra della finestra. Clicca sul pulsante con l'etichetta Cambia tema.

Scegliere un nuovo tema per la tua app.

Dalla finestra di selezione del tema, dai un'occhiata a ciascuno dei temi inclusi. Quando trovi quello che ti piace, passa con il mouse sul tema e fai clic su Visualizza la demo pulsante per visualizzare l'anteprima del tema. Se decidi che ti piace il tuo nuovo tema, fai clic su Installa Tema pulsante.

Personalizzazione del tuo layout

Ora, guarda sul lato sinistro della finestra e clicca su pagine menu a discesa. Verranno visualizzati tutti i file HTML che compongono la tua app Web. Se desideri aggiungere contenuti alla tua app, puoi modificare i file HTML per farlo.

In questo articolo, sto usando il tema standard di Stamplay e ho modificato la home-page (index.html) per rimuovere il testo di esempio.

Aggiunta del pulsante di accesso di Facebook

Copia dei tag div di login di Facebook. 

Ora è il momento di iniziare a modificare il front-end della nostra app Web per visualizzare il pulsante di accesso di Facebook alla home page. Per fare ciò, guarda sul lato sinistro della finestra Stamplay e fai clic sul menu a discesa etichettato widgets. Quindi, fare clic su auth.login.hbs.html pulsante e guarda verso il centro della pagina.

Guarda verso il centro della finestra di Stamplay sul documento HTML. Scansione di questo documento fino a trovare una riga che inizia con Accesso a Facebook e copialo. Quindi, apri il documento index.html da sotto il pagine menu a discesa.

Dalla pagina index.html, creane una nuova

tag, incolla il codice di accesso di Facebook e chiudi il

tag (

). Ora, guarda verso l'angolo in alto a destra della finestra di Stamplay e fai clic su Vai all'app pulsante. La tua app Web verrà ora visualizzata in una nuova scheda.

Copia dei tag div di login di Facebook. 

Dalla tua app, fai clic sul nuovo pulsante Accedi e accedi con il tuo account Facebook. Dovresti quindi vedere il nome di Facebook e la foto del profilo nell'angolo in alto a destra dell'app. Inoltre, controlla l'account email associato al tuo account Facebook, se configurato correttamente, noterai che l'e-mail che abbiamo impostato in precedenza è arrivata nella tua casella di posta.

Aggiunta di un modulo alla tua app

Aggiunta dei tag div del modulo alla tua app.

Ricorda il modulo che abbiamo creato in precedenza? È il momento di aggiungerlo al front-end. Per fare ciò, fare clic su widgets menu a discesa e fare clic su form.display.hbs.html pulsante per essere portato al codice HTML del modulo. Guarda verso la parte superiore del menu e copia e incolla il primo tag div sul documento index.html.

Tuttavia, non abbiamo ancora finito. Se guardi verso la fine del tag, vedrai un'area per inserire l'ID del modulo che è stato impostato durante la creazione del tuo tavolo. Se non sei sicuro del tuo ID tabella, puoi visualizzarlo facendo clic su tavolo pulsante nel componenti scheda e guardando verso il centro della finestra.

Testare la tua app

Ora che la tua app è pronta, testala aprendola in una nuova scheda. Puoi recuperare l'URL della tua applicazione facendo clic su impostazioni scheda nella barra laterale sinistra e guardando sotto domini intestazione. Copia e incolla questo URL in una nuova scheda e fallo girare!

La scheda di amministrazione

Una volta che la tua app è attiva, puoi andare al Admin scheda per visualizzare le risposte al modulo. Fare clic sulla scheda e, dal menu a discesa, fare clic su Modulo pulsante. Dal centro della finestra è possibile visualizzare resposnes al modulo e gli indirizzi e-mail forniti dall'account Facebook dell'utente. Inoltre, se si fa clic sul utenti pulsante, puoi visualizzare il nome e l'indirizzo email di ogni utente che ha utilizzato la tua app.

E questo è un involucro!

Ora puoi utilizzare Stamplay per creare semplici app Web per interagire con utenti e clienti. Nei commenti, collegaci alla tua nuova app web o facci sapere se hai bisogno di aiuto con Stamplay!