Guida al Deployment di Applicazioni Web Full-Stack con Back4App

creare e ospitare un'applicazione web full stack introduzione lanciare un'applicazione full stack può essere scoraggiante devi preoccuparti di ospitare il tuo front end, configurare/provisionare un server e mettere tutto insieme potresti non saperlo, ma back4app fornisce un'infrastruttura ottimale per tutto ciò puoi facilmente servire il tuo html frontend (inclusi framework frontend come react e vue) con l'hosting web di back4app il cloud code crea un ottimo backend che si avvia rapidamente in questa guida, costruiremo un'applicazione web completa, sebbene rudimentale, su back4app questo è un tutorial ospite scritto da https //github com/considine , sviluppatore principale di https //koptional com/ obiettivi lanciare un'applicazione web full stack su back4app requisiti per completare questo tutorial, hai bisogno di essere familiari con la riga di comando https //git scm com/book/en/v2/getting started installing git e https //docs npmjs com/getting started dovrebbero essere installati avere un account back4app, con lo strumento cli installato e configurato, vedere https //blog back4app com/cli parse server/ creare un nuovo progetto nel tuo dashboard back4app vedere https //www back4app com/docs/get started/new parse app questo tutorial deve essere impostato sulla versione 3 1 x di parse server vedi direttamente qui sotto per ulteriori dettagli questo progetto utilizzerà la nuova versione 3 1 di parse server ciò significa che devi assicurarti che il tuo progetto back4app sia impostato su questo rilascio non funzionerà altrimenti nel tuo dashboard del progetto, vai su impostazioni del server » gestisci parse server(impostazioni) e seleziona 3 1 1 (potrebbe essere in beta) per ulteriori informazioni sulla migrazione a parse server 3 1 x, vedere https //www back4app com/docs/advanced guides/parse server 3 vedi questa guida se non comprendi la sintassi del codice cloud per questo progetto contesto del progetto lanceremo un'applicazione rudimentale per lo scambio di biglietti consente agli utenti di registrarsi, accedere e pubblicare i biglietti che stanno vendendo per diversi eventi, che gli amministratori possono creare utilizzando il dashboard altri utenti possono contattarli tramite email o numero di telefono, a seconda di cosa sceglie di mostrare chi pubblica ho lanciato l'app http //ticketlister koptional com/ , utilizzando lo stesso codice che esploriamo in questa guida sei libero di creare un account, pubblicare biglietti e vedere come appare l'app lo scopo di questo tutorial è dimostrare come lanciare un'app in modo efficiente pertanto, piuttosto che soffermarci su ogni riga di codice, inizieremo con un codice quasi finito e ci concentreremo sulla facilità di distribuzione c'è solo un posto in cui dovrai modificare il codice nel passaggio 1 dovrai aggiungere le impostazioni del tuo progetto (id applicazione, chiave javascript e url del server) tuttavia, sei libero di modificare ed estendere questa applicazione come preferisci struttura del progetto prima di iniziare a preparare il codice, è importante comprendere la struttura dei file di questo progetto userò questo come riferimento per tutto il corso di questa guida ecco come apparirà la tua directory quando tutto sarà finito 1 progetto 2 │ parse local 3 │ parse project 4 │ gitignore 5 │ readme md 6 └───pubblico 7 │ │ index html 8 │ │ login html 9 │ │ signup html 10 │ └───css 11 │ │ signin css 12 │ │ bootstrap min css 13 │ └───js 14 │ │ main js 15 │ │ parse js 16 │ │ signin js 17 │ │ signup js 18 │ 19 └───cloud 20 │ main js i principali punti da ricordare da questa configurazione sono il codice frontend si trova nella pubblico directory un frontend è semplicemente la parte di un'applicazione con cui interagirà l'utente finale il codice backend si trova nella cloud directory il backend svolge il lavoro dietro le quinte in un'applicazione questo include il salvataggio di dati nel database e l'invio di dati il frontend dice al backend cosa fare inviando richieste http nel nostro caso, questo significa eseguire funzioni cloud si prega di notare anche la semplicità di questa configurazione tre file html rappresentano le tre pagine di questa applicazione tutto il nostro backend è un singolo file! nel passo 2 daremo un'occhiata al codice frontend, cioè alla directory pubblica nel passo 3 ci sposteremo nel backend 1 preparare i file come accennato nei https //www back4app com/docs/advanced guides/web application hosting#prerequisites , dovresti avere un progetto fresco su back4app creato e https //blog back4app com/2017/01/20/cli parse server/ prima di visitare uno dei codici, dovrai averlo scaricato e pronto in questo passaggio, facciamo proprio questo si prega di notare che eseguirai diversi comandi sulla tua riga di comando ti darò ciascuno di essi da copiare e eseguire se ti senti confuso durante questo passaggio, non preoccuparti; questo è solo il processo necessario per collegare un'app back4app a un progetto che ho su git non è importante sapere cosa sta succedendo in questo passaggio noi inizializza una directory locale con il tuo progetto back4app utilizzando la cli scarica i file del progetto di esempio in questa directory utilizzando git inizializzazione con back4app nella tua riga di comando esegui 1 b4a new dovresti essere invitato 1 vuoi creare una nuova app o aggiungere cloud code a un'app esistente? 2 digita "(n)uova" o "(e)sistente " vai con “e” per esistente poi seleziona l'applicazione che hai creato dall'elenco successivamente, ti verrà chiesto di nominare la directory in cui il codice sarà installato puoi semplicemente premere ‘invio’ se non hai preferenze per il bene di questo progetto, presumerò che la directory si chiami “ticketlister” infine, quando ti verrà chiesto 1 nome della directory 2 puoi configurare un progetto vuoto o scaricare il cloud code attualmente distribuito 3 si prega di digitare "(b)lank" se desideri configurare un progetto vuoto, altrimenti premi invio basta premere invio (non premere vuoto) quando questo comando restituisce, puoi cd nella nuova directory dovresti vedere due directory, una chiamata “cloud” e l'altra chiamata “public” la tua intera uscita dovrebbe apparire in questo modo 1 $ b4a new 2 vuoi creare una nuova app o aggiungere cloud code a un'app esistente? 3 digita "(n)uova" o "(e)sistente" e 4 1 ticketlister 5 seleziona un'app da aggiungere alla configurazione 11 6 si prega di inserire il nome della cartella in cui possiamo scaricare l'ultima distribuzione 7 cloud code per la tua app "ticketlister" 8 9 nome della directory 10 puoi configurare un progetto vuoto o scaricare il cloud code attualmente distribuito 11 si prega di digitare "(b)lank" se desideri configurare un progetto vuoto, altrimenti premi invio 12 email configurata con successo per il progetto attuale a "jackconsidine3\@gmail com" 13 il tuo cloud code è stato creato in /tmp/ticketlister 14 15 questo include una funzione cloud "hello world", quindi una volta distribuito, 16 puoi testare che funzioni, con il comando curl stampato 17 18 successivamente, potresti voler distribuire questo codice con 19 20 cd /tmp/ticketlister 21 b4a deploy 22 23 una volta distribuito, puoi testare che funzioni eseguendo 24 curl x post \\ 25 h "x parse application id ivy4qajquajdhpqq2d3mcr4jlrcvdcvvh6yom1kk" \\ 26 h "x parse rest api key ylgphnent0jnzwy9byt6zcwhqmswryvcfsmqrvus" \\ 27 h "content type application/json" \\ 28 d "{}" \\ 29 https //parseapi back4app com/functions/hello 30 31 $ cd ticketlister 32 $ ls 33 cloud public sincronizzazione dell'app con i file del progetto oltre ai file cloud e alle cartelle pubbliche, ci saranno due file nella tua directory parse local parse project questi contengono dati relativi al progetto back4app tutto il resto dovrebbe essere sovrascritto con i file del progetto esistenti da https //github com/back4app/back4app ticketlister il modo più semplice per farlo è il seguente 1 cd ticketlister 2 git init 3 git remote add origin https //github com/back4app/back4app ticketlister 4 git fetch origin 5 git checkout force b master track origin/master se tutto ha funzionato, ora dovresti avere i seguenti file $ ls r readme md cloud index js package lock json package json public /cloud main js /public css index html js login html signup html /public/css bootstrap min css signin css /public/js main js parse js signin js signup js non preoccuparti, quella era la parte difficile! ora possiamo concentrarci sul progetto 2 il frontend come promemoria, il codice frontend per questa app si trova nella directory public per mantenere le cose relativamente semplici, ho scelto di non utilizzare un framework frontend come react, angular o vue in questo modo, non ci sono dipendenze esterne o build il progetto utilizza componenti web html5 questi sono supportati nativamente nel browser aiutano a incapsulare la funzionalità di diverse parti dell'interfaccia utente consentono allo sviluppatore di dichiarare nuovi elementi html (pensa a ‘\<p>’) altrimenti, utilizzano semplicemente javascript nella public/js directory, ci sono 4 file javascript $ ls public/js \# main js parse js signin js signup js main js è il codice caricato dalla pagina principale, index html questa pagina è dove gli utenti elencano i biglietti ecc signup js è il codice caricato dalla pagina di registrazione, signup html signin js è il codice caricato dalla pagina di accesso, login html parse js è un file semplice che tutte le pagine utilizzano crea una connessione al backend questo è l'unico file che dovrai modificare e il progetto non funzionerà a meno che tu non lo faccia! aggiungere le credenziali di back4app per prima cosa, dovrai prendere il tuo application id e la tua javascript key dal tuo progetto back4app dopo aver effettuato l'accesso a back4app, seleziona il tuo progetto quindi fai clic su app settings sul lato sinistro e seleziona security & keys dovresti vedere diverse chiavi visualizzate prendi il application id e la javascript key e conservali a portata di mano infine, apri public/js/parse js e inserisci ciascuna delle stringhe nel posto giusto ricorda di assicurarti che il serverurl sia https //parseapi back4app com 1 // part 1 put your app id, js key, and server url 2 parse initialize( 3 '', // your app id 4 '' // your javascript key 5 ); 6 // your server url 7 parse serverurl = 'https //parseapi back4app com'; l'applicazione ora può comunicare con il server! un tuffo superficiale nel codice sebbene tutto il codice in questo progetto sia al di fuori dell'ambito di questa guida, ti incoraggio a sfogliare ciascuno dei file niente è troppo complesso, e vorrei prendere un minuto per dare una visione d'insieme questo progetto utilizza https //developer mozilla org/en us/docs/web/api/web components per incapsulare ciascuna sezione logica dell'interfaccia il markup importante nei file html risiede all'interno dei html \<template> html \<template> tag questo è il modo in cui descriviamo il layout la “funzionalità” dell'applicazione si verifica nei file javascript qui è dove l'app descrive cosa fare quando un modulo viene inviato, o un pulsante viene cliccato, ecc ad esempio, prendi il componente di accesso il markup ( public/login html ) appare così 1 2 6 7 8 please sign in 9 email address 10 18 password 19 26 27 sign in 28 29 sign up 30 31 32 33 34 e la funzionalità appare nel file javascript ( public/signin js ) 1 // code above ^ 2 // when the code is ready, listen for the form to be submitted when it is, 3 // call the 'onsubmit' method 4 connectedcallback() { 5 const form = this shadowroot queryselector('form'); 6 form addeventlistener('submit', this onsubmit bind(this), false); 7 } 8 // obtain the email and password from the markup inputs 9 onsubmit(e) { 10 e preventdefault(); 11 // get inputs 12 const email = this shadowroot queryselector('#inputemail') value; 13 const password = this shadowroot queryselector('#inputpassword') value; 14 this login(email, password); 15 } 16 // send a request to the backend, attempting to login if the login 17 // is successful, go to the index html page otherwise, give the user 18 // an alert explaining what went wrong 19 login(email, password) { 20 // add login method here 21 parse user login(email, password) 22 then(user => { 23 window\ location href = 'index html'; 24 }) 25 catch(e => { 26 alert(e message); 27 }); 28 } 29 // more code below 30 l'intera applicazione ha questa struttura generale fai attenzione ai momenti in cui il front end comunica con il backend in questo modo ( public/js/main js ) nel passaggio successivo, esamineremo come vengono dichiarate queste funzioni 3 il backend l'intero backend vivrà in cloud/main js , il file delle funzioni cloud code consiste in una quantità molto modesta di codice, a testimonianza di quanto possiamo realizzare per così poco con back4app parte dell'app (creare eventi sotto i quali i biglietti possono essere elencati) utilizzerà semplicemente il dashboard di back4app questa fantastica funzionalità viene con il nostro progetto, quindi non c'è bisogno di reinventare la ruota! ancora una volta, esaminare ogni riga di codice è al di fuori del nostro ambito tuttavia, daremo un'altra visione generale di come funziona il codice dichiari cloud functions nel file cloud/main js queste funzioni possono essere invocate dal front end (vedi passo 2 ) per ulteriori informazioni su cloud functions, vedere https //docs parseplatform org/cloudcode/guide/#cloud functions inoltre, queste cloud functions vengono eseguite su un parse server questa https //www back4app com/docs/advanced guides/parse server 3 discute alcune delle sintassi utilizzate, quindi potrebbe essere utile dare un'occhiata più specificamente, le funzioni che definiamo sono ‘ user\ signup ’ codice per gestire il flusso di registrazione dell'utente ‘ tickets\ list ’ codice per recuperare tutti i biglietti elencati ‘ tickets\ create ’ codice per creare un nuovo biglietto ‘ events\ list ’ codice per elencare tutti gli eventi e un'ultima nota sul codice ho aggiunto un metodo semplice verso la parte superiore del file 1 const requireauth = user => { 2 if (!user) throw new error('user must be authenticated!'); 3 }; alcune funzioni cloud richiedono che un utente sia connesso chiamando questa funzione con la proprietà utente della richiesta, ci assicuriamo che nessuno possa effettuare richieste non autorizzate ti incoraggio vivamente a dare un'occhiata al resto delle funzioni per vedere come funzionano ora che sai cosa fanno, possiamo procedere con il deploy! 4 deploy abbiamo sistemato tutto il codice, e ora l'app può essere distribuita su back4app il seguente comando caricherà tutti i file pubblici e cloud b4a deploy hosting di siti web locali per ottenere un dominio pubblico per visualizzare la tua web app caricata, dovrai attivare l'hosting web dal tuo dashboard di back4app per prima cosa, apri “impostazioni server” sul lato sinistro del dashboard successivamente, fai clic sul link “impostazioni” sotto “hosting web e live query” e infine, controlla “attiva hosting back4app” dovrai scegliere un sottodominio unico; ho già reclamato ticketlister per questo progetto, quindi scegli qualcosa di diverso facoltativamente, puoi configurare un dominio di tua proprietà per “puntare” a questo dominio back4app l'ho fatto per https //www back4app com/docs/advanced guides/my%20website e le mie impostazioni sembrano così si prega di notare il testo qui sotto “dominio personalizzato”, se si prevede di lanciare dal proprio sito web se completi correttamente questo passaggio, puoi andare al tuo dominio e utilizzare l'app se non hai un dominio personalizzato, apri semplicemente http //\<your subdomain> back4app io, dove your subdomain è il nome che hai appena selezionato 5 utilizzo e dashboard per iniziare a elencare i biglietti, dovrai creare un evento dalla dashboard di amministrazione su back4app vai al browser dei dati e crea una classe ‘evento’ aggiungi le colonne ‘nome’ (una stringa) e ‘quando’ (una data) poi puoi aggiungere un evento direttamente ricorda di compilare tutte le colonne dovrebbe apparire più o meno così ora, sulla tua app web, puoi accedere e elencare un biglietto con quell'evento questa funzionalità di amministrazione che viene con parse / back4app è un'altra scorciatoia che riduce il tuo carico di lavoro conclusione creare un'applicazione web con un backend è qualcosa che spesso richiede settimane e mesi abbiamo sfruttato la potente infrastruttura di back4app e il parse sdk per lanciarne una molto più rapidamente utilizzare questo approccio per qualsiasi applicazione ti consente di costruire cose straordinarie senza perdere tempo