Building a Basic CRUD Application with Polymer: A Comprehensive Walkthrough

panoramica in questa guida, imparerai come sviluppare un'applicazione crud (crea, leggi, aggiorna, elimina) completamente funzionale utilizzando polymer questo walkthrough dimostra come eseguire operazioni essenziali per gestire e modificare i dati inizierai configurando un progetto back4app, intitolato basic crud app polymer , che servirà come backend per la tua applicazione successivamente, creerai un modello di dati scalabile delineando collezioni e campi precisi—sia manualmente che con l'assistenza dell'agente ai di back4app—per garantire che il tuo database sia ottimizzato per le operazioni crud poi, utilizzerai l'app admin di back4app, un'interfaccia di gestione intuitiva drag and drop, per semplificare le tue operazioni sui dati infine, integrerai il tuo frontend polymer con back4app utilizzando le api rest/graphql, rafforzando la sicurezza del backend con sofisticati controlli di accesso alla fine di questo tutorial, avrai costruito un'applicazione web pronta per la produzione che supporta le operazioni crud fondamentali e include l'autenticazione degli utenti e robuste funzionalità di gestione dei dati cosa imparerai sviluppare un'applicazione crud che gestisca i dati in modo efficiente con un backend affidabile progettare un backend scalabile e collegarlo a un frontend basato su polymer utilizzare un'interfaccia di amministrazione drag and drop (back4app admin app) per facilitare le operazioni sui dati distribuire la tua applicazione utilizzando tecniche moderne, inclusa la containerizzazione con docker requisiti preliminari prima di iniziare, assicurati di avere un account back4app con un progetto attivo per assistenza, consulta iniziare con back4app https //www back4app com/docs/get started/new parse app un setup di sviluppo polymer utilizza polymer cli o strumenti simili e verifica che node js (v14 o successivo) sia installato una comprensione di base di javascript, polymer e rest api puoi fare riferimento alla documentazione di polymer https //www polymer library polymer project org/3 0/docs/devguide/feature overview per ulteriori dettagli passo 1 – configurare il tuo progetto iniziare un nuovo progetto back4app accedi al tuo account back4app seleziona l'opzione “nuova app” dalla tua dashboard assegna il nome del progetto basic crud app polymer e segui le istruzioni per completare la creazione del progetto crea nuovo progetto dopo aver completato questi passaggi, il tuo progetto sarà visibile sulla dashboard di back4app, formando la spina dorsale per la configurazione del tuo backend passo 2 – creazione del tuo schema di database strutturare il tuo modello di dati per questa app crud, sono necessarie diverse collezioni di seguito sono riportate collezioni di esempio insieme ai campi e ai rispettivi tipi, che ti aiuteranno a progettare uno schema di database robusto in grado di gestire le operazioni crud 1 collezione articoli campo tipo descrizione id objectid chiave primaria generata automaticamente titolo stringa il titolo dell'oggetto descrizione stringa una breve descrizione dell'oggetto creato il data timestamp che segna la creazione dell'elemento aggiornato il data timestamp per l'aggiornamento più recente 2 raccolta utenti campo tipo dettagli id objectid chiave primaria generata automaticamente nome utente stringa identificatore unico per l'utente email stringa indirizzo email unico hash password stringa password crittografata per la sicurezza creato il data timestamp quando l'account è stato creato aggiornato a data timestamp per l'ultimo aggiornamento dell'account puoi creare manualmente queste collezioni nel pannello di controllo di back4app stabilendo nuove classi e aggiungendo colonne corrispondenti crea nuova classe aggiungi facilmente nuovi campi scegliendo un tipo di dato, nominando il campo e specificando eventuali valori predefiniti o parametri richiesti crea colonna sfruttare l'agente ai di back4app per la creazione dello schema l'agente ai di back4app, accessibile dalla tua dashboard, genera automaticamente uno schema di database basato su un prompt che dettaglia le tue collezioni e campi questa funzione è un enorme risparmio di tempo, assicurando che il tuo backend sia precisamente adattato per le operazioni crud come utilizzare l'agente ai avvia l'agente ai accedilo tramite le impostazioni del tuo progetto o dal menu principale nella dashboard di back4app inserisci i dettagli del tuo schema fornisci un prompt descrittivo che elenchi le collezioni e i campi di cui hai bisogno rivedi e conferma dopo che l'agente ai ha elaborato la tua richiesta, rivedi lo schema generato e applicalo al tuo progetto esempio di 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) utilizzare l'agente ai assicura che il tuo schema sia sia coerente che ottimizzato per i requisiti della tua applicazione passo 3 – attivare l'app admin e eseguire operazioni crud panoramica dell'app admin l'app admin di back4app offre un'interfaccia senza codice per la gestione del backend il suo design intuitivo drag and drop semplifica le operazioni crud, consentendoti di creare, visualizzare, aggiornare ed eliminare record senza sforzo attivare l'app admin vai al menu “altro” nella tua dashboard di back4app seleziona “admin app” e poi clicca su “abilita admin app ” imposta le tue credenziali di amministratore creando un utente amministratore iniziale, che stabilirà anche i ruoli (come b4aadminuser ) e le collezioni di sistema abilita admin app dopo l'attivazione, accedi all'admin app per gestire i tuoi dati di backend dashboard admin app gestire i dati utilizzando l'admin app all'interno dell'admin app, puoi aggiungere record usa il pulsante “aggiungi record” in qualsiasi collezione (ad es , articoli) per creare nuove voci visualizzare/modificare record clicca su un record per ispezionare i suoi dettagli o per modificare i suoi campi rimuovere record utilizza la funzione di eliminazione per eliminare i dati che non sono più necessari questa interfaccia migliora notevolmente l'usabilità semplificando tutte le funzioni crud passo 4 – collegare polymer con back4app con il tuo backend configurato tramite l'admin app, è tempo di collegare il tuo frontend polymer a back4app opzione a utilizzare le api rest/graphql utilizzeremo le api rest o graphql per eseguire operazioni crud ad esempio, per recuperare articoli utilizzando rest // 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(); integra chiamate api simili nei tuoi elementi polymer come richiesto passo 5 – rafforzare la sicurezza del backend implementazione delle liste di controllo degli accessi (acl) proteggi i tuoi dati applicando le acl agli oggetti ad esempio, per creare un elemento ristretto 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); } } configurazione delle autorizzazioni a livello di classe (clp) all'interno del dashboard di back4app, imposta le clp per ogni collezione per definire le regole di accesso predefinite questa configurazione garantisce che solo gli utenti autorizzati possano accedere ai dati sensibili passo 6 – autenticazione dell'utente in polymer creazione di account utente back4app utilizza la classe user di parse per gestire l'autenticazione nel tuo progetto polymer, implementa la registrazione e il login degli utenti come dimostrato di seguito // 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); } } un approccio simile può essere adottato per la gestione del login e delle sessioni, con funzionalità aggiuntive come la verifica dell'email e il ripristino della password configurate tramite il dashboard di back4app passo 7 – distribuire il tuo frontend polymer con il web deployment la funzionalità di web deployment di back4app ti consente di ospitare la tua applicazione polymer senza problemi collegando il tuo repository github segui questi passaggi per distribuire la tua app 7 1 creare la tua versione di produzione apri la directory del tuo progetto in un terminale esegui il comando di build polymer build questo comando genera una build cartella con tutti i file statici ottimizzati controlla la build assicurati che la build cartella contenga un index html file insieme alle necessarie directory di asset 7 2 organizzazione e caricamento del tuo codice sorgente il tuo repository dovrebbe contenere il codice sorgente completo per il tuo frontend polymer una struttura di directory di esempio potrebbe apparire così 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 esempio 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'; esempio 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); esempio src/my app js impegnare il tuo codice su github inizializza un repository git (se non è già stato fatto) git init aggiungi i tuoi file git add impegnare le tue modifiche git commit m "impegno iniziale per il frontend polymer" crea un repository github chiamalo basic crud app polymer frontend carica il tuo codice su github git remote add origin https //github com/your username/basic crud app polymer frontend git git push u origin main 7 3 collegare il tuo repository github con il web deployment accedi al web deployment accedi a back4app, naviga al tuo progetto ( basic crud app polymer ), e seleziona la funzione web deployment integra github segui le istruzioni per collegare il tuo account github, consentendo a back4app di accedere al tuo repository seleziona il tuo repository e branch scegli il repository (ad esempio, basic crud app polymer frontend ) e il branch appropriato (ad esempio, main ) 7 4 configurare le impostazioni di deployment specifica i seguenti dettagli comando di build se la build cartella non è pre costruita, imposta il comando (ad esempio, polymer build ) back4app eseguirà questo durante il deployment directory di output impostala su build in modo che back4app identifichi i tuoi file del sito statico variabili d'ambiente includi eventuali variabili necessarie (come le chiavi api) nella configurazione del deployment 7 5 contenere la tua applicazione polymer con docker se docker è la tua scelta di deployment, includi un dockerfile nel tuo repository simile a # 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;"] integra questo dockerfile nel tuo progetto e seleziona docker come opzione di deployment in back4app 7 6 distribuire la tua applicazione clicca sul pulsante di distribuzione una volta confermati i tuoi impostazioni, premi distribuisci guarda il processo di build back4app recupererà il tuo codice, eseguirà il comando di build e distribuirà la tua app containerizzata recupera il tuo url dopo la distribuzione, riceverai un url dove la tua applicazione polymer è accessibile 7 7 testare la tua distribuzione visita l'url apri il link fornito nel tuo browser verifica la funzionalità controlla che tutte le rotte si carichino correttamente e che le risorse come css, javascript e immagini vengano visualizzate come previsto risolvi i problemi se si verificano problemi, rivedi i log di distribuzione e le impostazioni di integrazione di github su back4app passo 8 – conclusione e direzioni future ottimo lavoro! hai costruito con successo un'applicazione crud completa utilizzando polymer e back4app il tuo progetto, basic crud app polymer , ora presenta collezioni ben definite per articoli e utenti, gestite senza problemi attraverso l'app di amministrazione, con un frontend polymer sicuro e integrato prossimi passi migliora il frontend aggiungi funzionalità come visualizzazioni dettagliate degli articoli, funzionalità di ricerca o aggiornamenti in tempo reale espandi la funzionalità integra logica backend aggiuntiva con cloud functions o api di terze parti esplora di più dai un'occhiata alla documentazione di back4app https //www back4app com/docs per configurazioni più avanzate e ottimizzazioni delle prestazioni con queste competenze, sei ben attrezzato per costruire backend crud scalabili e distribuire applicazioni web robuste con polymer e back4app buon coding!