Full-Stack-Webanwendung mit Back4App entwickeln

erstellen und hosten einer full stack webanwendung einführung das starten einer full stack anwendung kann entmutigend sein sie müssen sich um das hosting ihres frontends, die konfiguration/bereitstellung eines servers und das zusammenführen alles kümmern vielleicht wussten sie es nicht, aber back4app bietet eine optimale infrastruktur für all das sie können ihr frontend html (einschließlich frontend frameworks wie react und vue) ganz einfach mit dem webhosting von back4app bereitstellen cloud code bietet ein hervorragendes backend, das schnell gestartet wird in diesem leitfaden werden wir eine vollständige, wenn auch rudimentäre, webanwendung auf back4app erstellen dies ist ein gast tutorial, das von john considine https //github com/considine , leitender entwickler bei k optional https //koptional com/ ziele starten sie eine full stack webanwendung auf back4app voraussetzungen um dieses tutorial abzuschließen, benötigen sie vertrautheit mit der kommandozeile git und npm sollten installiert sein ein back4app konto haben, mit dem cli tool installiert und konfiguriert, siehe hier für hilfe ein brandneues projekt auf ihrem back4app dashboard erstellen siehe hier für hilfe dieses tutorial muss auf die parse server version 3 1 x eingestellt sein siehe direkt unten für weitere details dieses projekt wird die neu veröffentlichte version 3 1 des parse servers verwenden das bedeutet, dass sie sicherstellen müssen, dass ihr back4app projekt auf diese version eingestellt ist es wird sonst nicht funktionieren gehen sie auf ihrem projekt dashboard zu servereinstellungen » manage parse server (einstellungen) und wählen sie 3 1 1 (es könnte sich in der beta phase befinden) für weitere informationen zur migration auf parse server 3 1 x siehe diese anleitung siehe diese anleitung, wenn sie die syntax des cloud codes für dieses projekt nicht verstehen projekt hintergrund wir werden eine rudimentäre ticketbörse anwendung starten sie ermöglicht es benutzern, sich anzumelden, einzuloggen und tickets, die sie für verschiedene veranstaltungen verkaufen, zu posten die von den admins über das dashboard erstellt werden können andere benutzer können sie je nach wahl des posters per e mail oder telefonnummer kontaktieren ich habe die app hier http //ticketlister koptional com/ , mit demselben code, den wir in diesem leitfaden erkunden sie können ein konto erstellen, tickets posten und sehen, wie die app aussieht der zweck dieses tutorials ist es, zu demonstrieren, wie man eine app effizient startet daher werden wir uns nicht mit jeder codezeile aufhalten, sondern mit einem weitgehend fertigen codebasis beginnen und uns auf die einfachheit der bereitstellung konzentrieren es gibt nur einen ort, an dem sie den code bearbeiten müssen in schritt 1 müssen sie ihre projekteinstellungen (anwendungs id, javascript schlüssel und server url) hinzufügen sie können diese anwendung jedoch nach belieben bearbeiten und erweitern projektstruktur bevor sie mit der vorbereitung des codes beginnen, ist es wichtig, die dateistruktur dieses projekts zu verstehen ich werde dies als referenz während dieses leitfadens verwenden so wird ihr verzeichnis aussehen, wenn alles fertig ist die wichtigsten erkenntnisse aus diesem setup sind der frontend code befindet sich im public verzeichnis ein frontend ist einfach der teil einer anwendung, mit dem der endbenutzer interagiert der backend code befindet sich im cloud verzeichnis das backend erledigt die arbeit im hintergrund einer anwendung dazu gehört das speichern von daten in der datenbank und das senden von daten das frontend sagt dem backend, was zu tun ist, indem es http anfragen sendet in unserem fall bedeutet das, cloud funktionen auszuführen bitte beachten sie auch die einfachheit dieses setups drei html dateien repräsentieren die drei seiten in dieser anwendung unser gesamtes backend ist eine einzige datei! in schritt 2 werfen wir einen kurzen blick auf den frontend code das heißt, das öffentliche verzeichnis in schritt 3 wechseln wir zum backend 1 vorbereitung der dateien wie bereits im https //www back4app com/docs/advanced guides/web application hosting#prerequisites , sollten sie ein frisches projekt auf back4app erstellt haben und https //blog back4app com/2017/01/20/cli parse server/ bevor sie einen der codes besuchen, müssen sie ihn heruntergeladen und bereit haben in diesem schritt tun wir genau das bitte beachten sie, dass sie mehrere befehle in ihrer eingabeaufforderung ausführen werden ich werde ihnen jeden einzelnen geben, den sie kopieren und ausführen können wenn sie sich während dieses schrittes verwirrt fühlen, machen sie sich keine sorgen; dies ist nur der prozess, der notwendig ist, um eine back4app app mit einem projekt zu verbinden, das ich auf git habe es ist nicht wichtig zu wissen, was vor sich geht in diesem schritt initialisieren sie ein lokales verzeichnis mit ihrem back4app projekt über die cli ziehen sie die beispielprojektdateien in dieses verzeichnis mit git initialisierung mit back4app führen sie in ihrer befehlszeile aus sie sollten aufgefordert werden wählen sie „e“ für bestehend wählen sie dann die anwendung aus, die sie aus der liste erstellt haben als nächstes werden sie aufgefordert, das verzeichnis zu benennen, in dem der code installiert wird sie können einfach die eingabetaste drücken, wenn sie keine präferenz haben für dieses projekt gehe ich davon aus, dass das verzeichnis „ticketlister“ heißt schließlich, wenn sie gefragt werden drücken sie einfach die eingabetaste (drücken sie nicht leer) wenn dieser befehl zurückgegeben wird, können sie in das neue verzeichnis wechseln sie sollten zwei verzeichnisse sehen, eines mit dem namen „cloud“ und das andere mit dem namen „public“ ihre gesamte ausgabe sollte ungefähr so aussehen synchronisierung der app mit den projektdateien neben den cloud und öffentlichen ordnern gibt es zwei dateien in ihrem verzeichnis parse local parse project diese enthalten daten, die zum back4app projekt gehören alles andere sollte mit den vorhandenen projektdateien von dem repo https //github com/back4app/back4app ticketlister folgendes ist der einfachste weg, dies zu tun wenn alles funktioniert hat, sollten sie jetzt mit den folgenden dateien ausgestattet sein keine sorge das war der schwierige teil! jetzt können wir uns auf das projekt konzentrieren 2 das frontend zur erinnerung der frontend code für diese app befindet sich im public verzeichnis um die dinge relativ einfach zu halten, habe ich mich entschieden, kein frontend framework wie react, angular oder vue zu verwenden so gibt es keine externen abhängigkeiten oder builds das projekt verwendet html5 web components diese werden nativ im browser unterstützt sie helfen, die funktionalität verschiedener teile der benutzeroberfläche zu kapseln sie ermöglichen es dem entwickler, neue html elemente zu deklarieren (denken sie an ‘\<p>’) ansonsten verwenden sie einfach nur ganz normales javascript im public/js verzeichnis gibt es 4 javascript dateien main js ist der code, der von der hauptseite geladen wird, index html diese seite ist, wo benutzer tickets auflisten usw signup js ist der code, der von der anmeldeseite geladen wird, signup html signin js ist der code, der von der anmeldeseite geladen wird, login html parse js ist eine einfache datei, die alle seiten verwenden sie stellt eine verbindung zum backend her dies ist die einzige datei, die sie bearbeiten müssen, und das projekt wird nicht funktionieren, es sei denn, sie tun es! hinzufügen ihrer back4app anmeldeinformationen zuerst müssen sie ihre anwendungs id und ihren javascript schlüssel aus ihrem back4app projekt abrufen nachdem sie sich bei back4app angemeldet haben, wählen sie ihr projekt aus klicken sie dann auf app einstellungen auf der linken seite und wählen sie sicherheit & schlüssel sie sollten mehrere schlüssel angezeigt bekommen holen sie sich die anwendungs id und den javascript schlüssel und halten sie sie bereit öffnen sie schließlich public/js/parse js und platzieren sie jede der zeichenfolgen an der richtigen stelle denken sie daran, sicherzustellen, dass die serverurl https //parseapi back4app com ist 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'; die anwendung kann jetzt mit dem server kommunizieren! ein kurzer einblick in den code obwohl der gesamte code in diesem projekt außerhalb des rahmens dieses leitfadens liegt, ermutige ich sie, jede der dateien zu durchsuchen nichts ist zu komplex, und ich möchte einen kurzen moment nutzen, um einen überblick aus 1 000 fuß höhe zu geben dieses projekt verwendet html5 web components um jeden logischen abschnitt der benutzeroberfläche zu kapseln das wichtige markup in den html dateien befindet sich innerhalb der html \<template> html \<template> tags so beschreiben wir das layout die „funktionalität“ der anwendung erfolgt in den javascript dateien hier beschreibt die app, was zu tun ist, wenn ein formular eingereicht oder ein button geklickt wird usw zum beispiel, nehmen sie die login komponente das markup ( public/login html ) sieht so aus 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 und die funktionalität erscheint in der javascript datei ( 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 die gesamte anwendung hat diese allgemeine struktur achten sie auf die zeiten, in denen das frontend mit dem backend so kommuniziert ( public/js/main js ) im nächsten schritt werden wir uns ansehen, wie diese funktionen deklariert werden 3 das backend das gesamte backend wird in cloud/main js , der datei für cloud code funktionen, leben es besteht aus einer sehr bescheidenen menge an code, was zeigt, wie viel wir mit so wenig mit back4app erreichen können ein teil der app (ereignisse erstellen, unter denen tickets aufgelistet werden können) wird einfach das back4app dashboard verwenden diese großartige funktionalität kommt mit unserem projekt, also keine notwendigkeit, das rad neu zu erfinden! nochmals, jede zeile code zu untersuchen, liegt außerhalb unseres rahmens wir werden jedoch einen weiteren breiten blick darauf werfen, wie der code funktioniert sie deklarieren cloud functions in der cloud/main js datei diese funktionen können vom frontend aus aufgerufen werden (siehe schritt 2 ) für weitere informationen zu cloud functions siehe die dokumentation darüber hinaus werden diese cloud functions auf einem parse server ausgeführt dieser leitfaden behandelt einige der verwendeten syntax, daher kann es hilfreich sein, einen blick darauf zu werfen genauer gesagt, die funktionen, die wir definieren, sind ‘ user\ signup ’ code zur handhabung des benutzeranmeldeflusses ‘ tickets\ list ’ code zum abrufen aller aufgelisteten tickets ‘ tickets\ create ’ code zum erstellen eines neuen tickets ‘ events\ list ’ code zum auflisten aller veranstaltungen und eine letzte code anmerkung ich habe eine einfache methode oben in der datei hinzugefügt 1 const requireauth = user => { 2 if (!user) throw new error('user must be authenticated!'); 3 }; bestimmte cloud funktionen erfordern, dass ein benutzer angemeldet ist durch den aufruf dieser funktion mit der benutzer eigenschaft der anfrage stellen wir sicher, dass niemand unbefugte anfragen stellen kann ich empfehle ihnen dringend, die restlichen funktionen zu überfliegen, um zu sehen, wie sie funktionieren jetzt, da sie wissen, was sie tun, können wir bereitstellen! 4 bereitstellung wir haben den gesamten code fertiggestellt, und jetzt kann die app auf back4app bereitgestellt werden der folgende befehl lädt alle öffentlichen und cloud dateien hoch lokale website hosting um eine öffentliche domain zu erhalten, um ihre hochgeladene web app anzuzeigen, müssen sie das web hosting von ihrem back4app dashboard aktivieren zuerst öffnen sie „servereinstellungen“ auf der linken seite des dashboards als nächstes klicken sie auf den link „einstellungen“ unter „web hosting und live abfrage“ und schließlich aktivieren sie „back4app hosting aktivieren“ sie müssen eine einzigartige subdomain auswählen; ich habe bereits ticketlister für dieses projekt beansprucht, also wählen sie etwas anderes optional können sie eine domain, die sie besitzen, so konfigurieren, dass sie auf diese back4app domain „zeigt“ ich habe dies für http //ticketlister koptional com https //www back4app com/docs/advanced guides/my%20website und meine einstellungen sehen so aus bitte beachten sie den text unter „benutzerdefinierte domain“, wenn sie planen, von ihrer website aus zu starten wenn sie diesen schritt richtig ausführen, können sie zu ihrer domain gehen und die app verwenden wenn sie keine benutzerdefinierte domain haben, öffnen sie einfach http //\<ihre unterdomain> back4app io, wobei ihre unterdomain der name ist, den sie gerade ausgewählt haben 5 nutzung und das dashboard um tickets aufzulisten, müssen sie ein ereignis vom admin dashboard auf back4app erstellen gehen sie zum datenbrowser und erstellen sie eine ‚ereignis‘ klasse fügen sie die spalten ‚name‘ (ein string) und ‚when‘ (ein datum) hinzu dann können sie ein ereignis direkt hinzufügen denken sie daran, alle spalten auszufüllen es sollte ungefähr so aussehen jetzt können sie sich in ihrer web app anmelden und ein ticket für dieses ereignis auflisten diese admin funktionalität, die mit parse / back4app kommt, ist eine weitere abkürzung, die ihre arbeitslast verringert fazit eine webanwendung mit einem backend zu erstellen, ist etwas, das oft wochen und monate dauert wir haben die leistungsstarke infrastruktur von back4app und das parse sdk genutzt, um eine viel schnellere einführung zu ermöglichen diese vorgehensweise für jede anwendung zu verwenden, ermöglicht es ihnen, erstaunliche dinge zu bauen, ohne zeit zu verschwenden