Building a Basic CRUD Application with Polymer: A Comprehensive Walkthrough

übersicht in diesem leitfaden lernen sie, wie sie eine voll funktionsfähige crud anwendung (erstellen, lesen, aktualisieren, löschen) mit polymer entwickeln diese anleitung zeigt, wie man grundlegende operationen zur verwaltung und modifizierung von daten durchführt sie beginnen mit der einrichtung eines back4app projekts mit dem titel basic crud app polymer , das als backend für ihre anwendung dient anschließend erstellen sie ein skalierbares datenmodell, indem sie präzise sammlungen und felder skizzieren – entweder manuell oder mit hilfe des back4app ai agenten –, um sicherzustellen, dass ihre datenbank für crud operationen optimiert ist als nächstes nutzen sie die back4app admin app, eine benutzerfreundliche drag and drop verwaltungsoberfläche, um ihre datenoperationen zu optimieren schließlich integrieren sie ihr polymer frontend mit back4app unter verwendung von rest/graphql apis, während sie die sicherheit des backends mit ausgeklügelten zugriffskontrollen verstärken am ende dieses tutorials haben sie eine produktionsbereite webanwendung erstellt, die die grundlegenden crud operationen unterstützt und benutzerauthentifizierung sowie robuste datenverwaltungsfunktionen umfasst was sie lernen werden entwickeln sie eine crud anwendung, die daten effizient mit einem zuverlässigen backend verwaltet entwerfen sie ein skalierbares backend und verbinden sie es mit einem polymer basierten frontend nutzen sie eine drag and drop admin oberfläche (back4app admin app), um datenoperationen zu erleichtern setzen sie ihre anwendung mit modernen techniken einschließlich containerisierung mit docker ein voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie ein back4app konto mit einem aktiven projekt für unterstützung, schauen sie sich erste schritte mit back4app https //www back4app com/docs/get started/new parse app an ein polymer entwicklungs setup verwenden sie polymer cli oder ähnliche tools und überprüfen sie, ob node js (v14 oder höher) installiert ist ein grundlegendes verständnis von javascript, polymer und rest apis sie können auf die polymer dokumentation https //www polymer library polymer project org/3 0/docs/devguide/feature overview für weitere details verweisen schritt 1 – einrichten ihres projekts ein neues back4app projekt initiieren greifen sie auf ihr back4app konto zu wählen sie die option „neue app“ von ihrem dashboard weisen sie den projektnamen zu basic crud app polymer und folgen sie den anweisungen, um die projekterstellung abzuschließen neues projekt erstellen nachdem sie diese schritte abgeschlossen haben, wird ihr projekt auf dem back4app dashboard sichtbar sein und die grundlage für ihre backend konfiguration bilden schritt 2 – gestaltung ihres datenbankschemas strukturierung ihres datenmodells für diese crud app sind mehrere sammlungen erforderlich unten sind beispiel sammlungen zusammen mit feldern und ihren jeweiligen typen aufgeführt, die ihnen helfen werden, ein robustes datenbankschema zu entwerfen, das in der lage ist, crud operationen durchzuführen 1\ artikel sammlung feld typ beschreibung id objekt id automatisch generierter primärschlüssel titel zeichenfolge der titel des artikels beschreibung zeichenfolge eine kurze beschreibung des artikels erstellt am datum zeitstempel zur kennzeichnung der erstellung des elements aktualisiert am datum zeitstempel für das letzte update 2\ benutzersammlung feld typ einzelheiten id objekt id automatisch generierter primärschlüssel benutzername zeichenfolge eindeutiger identifikator für den benutzer e mail zeichenfolge eindeutige e mail adresse passwort hash zeichenfolge verschlüsseltes passwort zur sicherheit erstellt am datum zeitstempel, wann das konto erstellt wurde aktualisiert am datum zeitstempel für das letzte kontoupdate sie können diese sammlungen manuell im back4app dashboard erstellen, indem sie neue klassen einrichten und entsprechende spalten hinzufügen neue klasse erstellen fügen sie ganz einfach neue felder hinzu, indem sie einen datentyp auswählen, das feld benennen und standardwerte oder erforderliche parameter angeben spalte erstellen nutzung des back4app ai agenten zur schemaerstellung der back4app ai agent, der von ihrem dashboard aus zugänglich ist, generiert automatisch ein datenbankschema basierend auf einem prompt, der ihre sammlungen und felder beschreibt diese funktion spart viel zeit und stellt sicher, dass ihr backend genau auf crud operationen zugeschnitten ist so nutzen sie den ai agenten starten sie den ai agenten zugriff über ihre projekteinstellungen oder das hauptmenü im back4app dashboard geben sie ihre schema details ein geben sie einen beschreibenden prompt ein, der die sammlungen und felder auflistet, die sie benötigen überprüfen und bestätigen nachdem der ai agent ihre anfrage bearbeitet hat, überprüfen sie das generierte schema und wenden sie es auf ihr projekt an beispiel prompt create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) die verwendung des ai agenten stellt sicher, dass ihr schema sowohl konsistent als auch optimiert für die anforderungen ihrer anwendung ist schritt 3 – aktivierung der admin app und durchführung von crud operationen übersicht über die admin app die back4app admin app bietet eine no code oberfläche für das backend management ihr intuitives drag and drop design vereinfacht crud operationen – sie können datensätze mühelos erstellen, anzeigen, aktualisieren und löschen aktivierung der admin app gehe zum menü „mehr“ auf deinem back4app dashboard wähle „admin app“ und klicke dann auf „admin app aktivieren “ richte deine admin anmeldeinformationen ein indem du einen ersten admin benutzer erstellst, der auch rollen (wie b4aadminuser ) und systemkollektionen festlegt admin app aktivieren nach der aktivierung melde dich bei der admin app an, um deine backend daten zu verwalten admin app dashboard datenverwaltung mit der admin app innerhalb der admin app kannst du datensätze hinzufügen verwende die schaltfläche „datensatz hinzufügen“ in jeder sammlung (z b artikel), um neue einträge zu erstellen datensätze anzeigen/ändern klicke auf einen datensatz, um seine details zu überprüfen oder seine felder zu bearbeiten datensätze entfernen nutze die löschfunktion, um daten zu entfernen, die nicht mehr benötigt werden diese schnittstelle verbessert die benutzerfreundlichkeit erheblich, indem sie alle crud funktionen optimiert schritt 4 – polymer mit back4app verbinden nachdem dein backend über die admin app konfiguriert wurde, ist es an der zeit, dein polymer frontend mit back4app zu verbinden option a nutzung von rest/graphql apis wir werden rest oder graphql apis verwenden, um crud operationen durchzuführen zum beispiel, um artikel mit rest abzurufen // example rest call to get items const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('items fetched ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); integrieren sie ähnliche api aufrufe in ihre polymer elemente nach bedarf schritt 5 – verstärkung der backend sicherheit implementierung von zugriffskontrolllisten (acls) schützen sie ihre daten, indem sie acls auf objekte anwenden zum beispiel, um ein eingeschränktes element zu erstellen async function createrestricteditem(data, owner) { const itemdata = { title data title, description data description }; // configure acl to permit only the owner access const acl = { " " { read false, write false }, \[owner id] { read true, write true } }; try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ itemdata, acl acl }) }); const result = await response json(); console log('restricted item created ', result); } catch (error) { console error('error creating item ', error); } } konfigurieren von klassenebene berechtigungen (clps) richten sie im back4app dashboard clps für jede sammlung ein, um standardzugriffsregeln zu definieren diese konfiguration stellt sicher, dass nur autorisierte benutzer auf sensible daten zugreifen können schritt 6 – benutzerauthentifizierung in polymer benutzerkonten einrichten back4app verwendet die benutzerklasse von parse zur verwaltung der authentifizierung implementieren sie in ihrem polymer projekt die benutzerregistrierung und anmeldung wie unten gezeigt // example function for user registration using rest api async function signupuser(username, password, email) { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, password, email }) }); const result = await response json(); alert('user registered successfully!'); console log(result); } catch (error) { alert('registration error ' + error message); } } ein ähnlicher ansatz kann für die anmeldung und sitzungsverwaltung übernommen werden, mit zusätzlichen funktionen wie e mail verifizierung und passwortzurücksetzung, die über das back4app dashboard konfiguriert werden schritt 7 – bereitstellung ihres polymer frontends mit web bereitstellung die web bereitstellungsfunktion von back4app ermöglicht es ihnen, ihre polymer anwendung nahtlos zu hosten, indem sie ihr github repository verknüpfen befolgen sie diese schritte, um ihre app bereitzustellen 7 1 erstellen ihrer produktionsversion öffnen sie ihr projektverzeichnis in einem terminal führen sie den build befehl aus polymer build dieser befehl generiert einen build ordner mit allen optimierten statischen dateien überprüfen sie den build stellen sie sicher, dass der build ordner eine index html datei sowie die erforderlichen asset verzeichnisse enthält 7 2 organisieren und hochladen ihres quellcodes ihr repository sollte den vollständigen quellcode für ihr polymer frontend enthalten eine beispielverzeichnisstruktur könnte folgendermaßen aussehen basic crud app polymer frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── my app js │ ├── api config js │ └── components/ │ ├── items list js │ └── auth form js ├── polymer json └── readme md beispiel src/api config js // src/api config js export const app id = 'your application id'; export const rest api key = 'your rest api key'; export const api url = 'https //parseapi back4app com'; beispiel src/my app js import { polymerelement, html } from '@polymer/polymer/polymer element js'; class myapp extends polymerelement { static get template() { return html` \<style> / your css styles here / \</style> \<h1>item manager\</h1> \<items list>\</items list> \<auth form>\</auth form> `; } } customelements define('my app', myapp); beispiel src/my app js ihr code auf github committen ein git repository initialisieren (falls noch nicht geschehen) git init ihre dateien stagen git add ihre änderungen committen git commit m "erster commit für polymer frontend" ein github repository erstellen nennen sie es basic crud app polymer frontend ihren code auf github pushen git remote add origin https //github com/your username/basic crud app polymer frontend git git push u origin main 7 3 ihr github repository mit der webbereitstellung verbinden zugriff auf die webbereitstellung melden sie sich bei back4app an, navigieren sie zu ihrem projekt ( basic crud app polymer ), und wählen sie die webbereitstellung funktion github integrieren befolgen sie die anweisungen, um ihr github konto zu verbinden, damit back4app auf ihr repository zugreifen kann wählen sie ihr repository und ihren branch wählen sie das repository (z b basic crud app polymer frontend ) und den entsprechenden branch (z b main ) 7 4 bereitstellungseinstellungen konfigurieren geben sie die folgenden details an build befehl wenn der build ordner nicht vorgebaut ist, setzen sie den befehl (z b polymer build ) back4app wird dies während der bereitstellung ausführen ausgabeverzeichnis setzen sie es auf build damit back4app ihre statischen site dateien identifiziert umgebungsvariablen fügen sie alle erforderlichen variablen (wie api schlüssel) in die bereitstellungskonfiguration ein 7 5 containerisierung ihrer polymer anwendung mit docker wenn docker ihre bereitstellungswahl ist, fügen sie eine dockerfile in ihr repository ein, ähnlich wie \# use an official node image for building from node 16 alpine as builder \# set working directory workdir /app \# copy dependency files copy package json / \# install dependencies run npm install \# copy the project files copy \# build the polymer app run polymer build \# use nginx to serve the built files from nginx\ stable alpine copy from=builder /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] integrieren sie diese dockerfile in ihr projekt und wählen sie docker als bereitstellungsoption in back4app 7 6 bereitstellung ihrer anwendung klicken sie auf die schaltfläche bereitstellen sobald ihre einstellungen bestätigt sind, klicken sie auf bereitstellen beobachten sie den build prozess back4app wird ihren code abrufen, den build befehl ausführen und ihre containerisierte anwendung bereitstellen rufen sie ihre url ab nach der bereitstellung erhalten sie eine url, unter der ihre polymer anwendung zugänglich ist 7 7 testen ihrer bereitstellung besuchen sie die url öffnen sie den bereitgestellten link in ihrem browser funktionalität überprüfen überprüfen sie, ob alle routen korrekt geladen werden und ob assets wie css, javascript und bilder wie erwartet angezeigt werden fehlerbehebung wenn probleme auftreten, überprüfen sie die bereitstellungsprotokolle und die github integrations einstellungen auf back4app schritt 8 – zusammenfassung und zukünftige richtungen großartige arbeit! sie haben erfolgreich eine vollständige crud anwendung mit polymer und back4app erstellt ihr projekt, basic crud app polymer , verfügt jetzt über gut definierte sammlungen für elemente und benutzer, die nahtlos über die admin app verwaltet werden, mit einem sicheren und integrierten polymer frontend nächste schritte frontend verbessern fügen sie funktionen wie detaillierte artikelansichten, suchfunktionen oder echtzeit updates hinzu funktionalität erweitern integrieren sie zusätzliche backend logik mit cloud funktionen oder drittanbieter apis mehr erkunden schauen sie sich die back4app dokumentation https //www back4app com/docs für fortgeschrittene konfigurationen und leistungsoptimierungen an mit diesen fähigkeiten sind sie gut gerüstet, um skalierbare crud backends zu erstellen und robuste webanwendungen mit polymer und back4app bereitzustellen viel spaß beim programmieren!