Building a Basic CRUD Application with Polymer: A Comprehensive Walkthrough

aperçu dans ce guide, vous apprendrez à développer une application crud (créer, lire, mettre à jour, supprimer) entièrement fonctionnelle en utilisant polymer ce guide pratique démontre comment effectuer des opérations essentielles pour gérer et modifier des données vous commencerez par configurer un projet back4app, intitulé basic crud app polymer , qui servira de backend pour votre application ensuite, vous élaborerez un modèle de données évolutif en définissant des collections et des champs précis—soit manuellement, soit avec l'aide de l'agent ia de back4app—pour garantir que votre base de données est optimisée pour les opérations crud ensuite, vous utiliserez l'application admin de back4app, une interface de gestion conviviale par glisser déposer, pour rationaliser vos opérations de données enfin, vous intégrerez votre frontend polymer avec back4app en utilisant des api rest/graphql tout en renforçant la sécurité du backend avec des contrôles d'accès sophistiqués à la fin de ce tutoriel, vous aurez construit une application web prête pour la production qui prend en charge les opérations crud de base et inclut l'authentification des utilisateurs ainsi que des fonctionnalités de gestion des données robustes ce que vous apprendrez développer une application crud qui gère efficacement les données avec un backend fiable concevoir un backend évolutif et le connecter à un frontend basé sur polymer utiliser une interface d'administration par glisser déposer (back4app admin app) pour faciliter les opérations sur les données déployer votre application en utilisant des techniques modernes, y compris la conteneurisation avec docker prérequis avant de commencer, assurez vous d'avoir un compte back4app avec un projet actif pour assistance, consultez démarrer avec back4app https //www back4app com/docs/get started/new parse app un environnement de développement polymer utilisez polymer cli ou des outils similaires et vérifiez que node js (v14 ou version ultérieure) est installé une compréhension de base de javascript, polymer et des api rest vous pouvez consulter la documentation de polymer https //www polymer library polymer project org/3 0/docs/devguide/feature overview pour plus de détails étape 1 – configuration de votre projet initier un nouveau projet back4app accédez à votre compte back4app sélectionnez l'option “nouvelle application” depuis votre tableau de bord attribuez le nom du projet basic crud app polymer et suivez les instructions pour finaliser la création du projet créer un nouveau projet après avoir complété ces étapes, votre projet sera visible sur le tableau de bord back4app, formant la colonne vertébrale de votre configuration backend étape 2 – élaboration de votre schéma de base de données structurer votre modèle de données pour cette application crud, plusieurs collections sont nécessaires ci dessous se trouvent des collections d'exemple avec des champs et leurs types respectifs, ce qui vous aidera à concevoir un schéma de base de données robuste capable de gérer les opérations crud 1 collection d'articles champ type description id identifiant d'objet clé primaire générée automatiquement titre chaîne le titre de l'article description chaîne une brève description de l'article créé à date horodatage marquant la création de l'élément mis à jour le date horodatage de la mise à jour la plus récente 2 collection des utilisateurs champ type détails id identifiant d'objet clé primaire générée automatiquement nom d'utilisateur chaîne identifiant unique pour l'utilisateur email chaîne adresse e mail unique hash de mot de passe chaîne mot de passe crypté pour la sécurité créé à date horodatage de la création du compte mis à jour le date horodatage de la dernière mise à jour du compte vous pouvez créer manuellement ces collections sur le tableau de bord back4app en établissant de nouvelles classes et en ajoutant les colonnes correspondantes créer une nouvelle classe ajoutez facilement de nouveaux champs en choisissant un type de données, en nommant le champ et en spécifiant les valeurs par défaut ou les paramètres requis créer une colonne exploiter l'agent ai de back4app pour la création de schémas l'agent ai de back4app, accessible depuis votre tableau de bord, génère automatiquement un schéma de base de données basé sur une invite détaillant vos collections et champs cette fonctionnalité permet de gagner un temps précieux, garantissant que votre backend est précisément adapté aux opérations crud comment utiliser l'agent ai lancez l'agent ai accédez y via les paramètres de votre projet ou le menu principal dans le tableau de bord de back4app entrez les détails de votre schéma fournissez une invite descriptive qui énumère les collections et les champs dont vous avez besoin examinez et confirmez après que l'agent ai ait traité votre demande, examinez le schéma généré et appliquez le à votre projet exemple d'invite 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) utiliser l'agent ai garantit que votre schéma est à la fois cohérent et optimisé pour les exigences de votre application étape 3 – activation de l'application admin et réalisation des opérations crud aperçu de l'application admin l'application admin de back4app offre une interface sans code pour la gestion du backend son design intuitif par glisser déposer simplifie les opérations crud, vous permettant de créer, visualiser, mettre à jour et supprimer des enregistrements sans effort activation de l'application admin allez dans le menu “plus” sur votre tableau de bord back4app sélectionnez “admin app” puis cliquez sur “activer l'admin app ” configurez vos identifiants administratifs en créant un utilisateur administrateur initial, ce qui établira également des rôles (comme b4aadminuser ) et des collections système activer l'admin app après activation, connectez vous à l'admin app pour gérer vos données backend tableau de bord de l'admin app gestion des données à l'aide de l'admin app dans l'admin app, vous pouvez ajouter des enregistrements utilisez le bouton “ajouter un enregistrement” dans n'importe quelle collection (par exemple, articles) pour créer de nouvelles entrées voir/modifier des enregistrements cliquez sur un enregistrement pour inspecter ses détails ou modifier ses champs supprimer des enregistrements utilisez la fonction de suppression pour éliminer les données qui ne sont plus nécessaires cette interface améliore considérablement l'utilisabilité en rationalisant toutes les fonctions crud étape 4 – connecter polymer avec back4app avec votre backend configuré via l'admin app, il est temps de lier votre frontend polymer à back4app option a utilisation des api rest/graphql nous allons utiliser les api rest ou graphql pour effectuer des opérations crud par exemple, pour récupérer des articles en utilisant 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(); intégrez des appels api similaires dans vos éléments polymer selon les besoins étape 5 – renforcer la sécurité du backend mise en œuvre des listes de contrôle d'accès (acl) protégez vos données en appliquant des acl aux objets par exemple, pour créer un élément restreint 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); } } configuration des autorisations au niveau de la classe (clp) dans le tableau de bord back4app, configurez les clp pour chaque collection afin de définir les règles d'accès par défaut cette configuration garantit que seuls les utilisateurs autorisés peuvent accéder aux données sensibles étape 6 – authentification des utilisateurs dans polymer établissement des comptes utilisateurs back4app utilise la classe user de parse pour gérer l'authentification dans votre projet polymer, implémentez l'inscription et la connexion des utilisateurs comme démontré ci dessous // 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); } } une approche similaire peut être adoptée pour la gestion des connexions et des sessions, avec des fonctionnalités supplémentaires telles que la vérification par e mail et la réinitialisation du mot de passe configurées via le tableau de bord back4app étape 7 – déploiement de votre frontend polymer avec le déploiement web la fonctionnalité de déploiement web de back4app vous permet d'héberger votre application polymer sans effort en liant votre dépôt github suivez ces étapes pour déployer votre application 7 1 construction de votre version de production ouvrez votre répertoire de projet dans un terminal exécutez la commande de construction polymer build cette commande génère un dossier de construction avec tous les fichiers statiques optimisés vérifiez la construction assurez vous que le dossier de construction contient un fichier index html ainsi que les répertoires d'actifs nécessaires 7 2 organisation et téléchargement de votre code source votre dépôt devrait contenir le code source complet de votre frontend polymer une structure de répertoire d'exemple pourrait ressembler à 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 exemple 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'; exemple 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); exemple src/my app js engager votre code sur github initialiser un dépôt git (si ce n'est pas déjà fait) git init mettre en scène vos fichiers git add engager vos modifications git commit m "engagement initial pour le frontend polymer" créer un dépôt github nommez le basic crud app polymer frontend pousser votre code sur github git remote add origin https //github com/votre nom utilisateur/basic crud app polymer frontend git git push u origin main 7 3 connecter votre dépôt github avec le déploiement web accéder au déploiement web connectez vous à back4app, naviguez vers votre projet ( basic crud app polymer ), et sélectionnez la fonctionnalité de déploiement web intégrer github suivez les instructions pour connecter votre compte github, permettant à back4app d'accéder à votre dépôt sélectionnez votre dépôt et votre branche choisissez le dépôt (par exemple, basic crud app polymer frontend ) et la branche appropriée (par exemple, main ) 7 4 configurer les paramètres de déploiement spécifiez les détails suivants commande de construction si le dossier de construction n'est pas pré construit, définissez la commande (par exemple, polymer build ) back4app exécutera cela lors du déploiement répertoire de sortie définissez le sur build afin que back4app identifie vos fichiers de site statiques variables d'environnement incluez toutes les variables nécessaires (comme les clés api) dans la configuration de déploiement 7 5 conteneuriser votre application polymer avec docker si docker est votre choix de déploiement, incluez un dockerfile dans votre dépôt similaire à # 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;"] intégrez ce dockerfile dans votre projet et sélectionnez docker comme option de déploiement dans back4app 7 6 déployer votre application cliquez sur le bouton déployer une fois vos paramètres confirmés, cliquez sur déployer regardez le processus de construction back4app va récupérer votre code, exécuter la commande de construction et déployer votre application conteneurisée récupérez votre url après le déploiement, vous recevrez une url où votre application polymer est accessible 7 7 tester votre déploiement visitez l'url ouvrez le lien fourni dans votre navigateur vérifiez la fonctionnalité vérifiez que toutes les routes se chargent correctement et que les ressources comme css, javascript et images s'affichent comme prévu dépanner si des problèmes surviennent, consultez les journaux de déploiement et les paramètres d'intégration github sur back4app étape 8 – conclusion et directions futures bravo ! vous avez réussi à construire une application crud complète en utilisant polymer et back4app votre projet, basic crud app polymer , dispose désormais de collections bien définies pour les articles et les utilisateurs, gérées de manière fluide via l'application admin, avec un frontend polymer sécurisé et intégré prochaines étapes améliorer le frontend ajoutez des fonctionnalités comme des vues détaillées des articles, une fonctionnalité de recherche ou des mises à jour en temps réel étendre la fonctionnalité intégrez une logique backend supplémentaire avec des fonctions cloud ou des api tierces explorer davantage consultez la documentation de back4app https //www back4app com/docs pour des configurations plus avancées et des optimisations de performance avec ces compétences, vous êtes bien équipé pour construire des backends crud évolutifs et déployer des applications web robustes avec polymer et back4app bon codage !