Comment créer une application CRUD de base avec Marko ? Un guide étape par étape

aperçu ce guide vous accompagne dans la création d'une application crud complète (créer, lire, mettre à jour, supprimer) en utilisant marko et back4app dans ce tutoriel, vous allez configurer un projet—nommé basic crud app marko —sur back4app, concevoir un schéma de base de données robuste et intégrer votre frontend marko avec l'api de back4app le tutoriel explique également comment sécuriser votre backend et déployer votre application pour une utilisation en production ce que vous apprendrez comment construire des applications crud qui gèrent efficacement les données en utilisant un backend fiable conseils pour concevoir un schéma évolutif et le lier à un frontend basé sur marko utiliser l'interface d'administration conviviale de back4app pour gérer les données sans effort stratégies de déploiement, y compris la conteneurisation avec docker, pour lancer votre application web conditions préalables avant de commencer, assurez vous d'avoir un compte back4app et un nouveau projet suivez les instructions dans démarrer avec back4app https //www back4app com/docs/get started/new parse app si nécessaire un environnement de développement marko configuré utilisez le cli marko ou votre méthode de configuration préférée assurez vous que node js (v14 ou version ultérieure) est installé des connaissances de base en javascript, marko et rest apis visitez la documentation marko https //markojs com/docs/ pour plus de détails étape 1 – configuration de votre projet démarrer un nouveau projet back4app connectez vous à votre compte back4app sélectionnez “nouvelle application” sur votre tableau de bord entrez le nom du projet basic crud app marko et suivez les instructions à l'écran créer un nouveau projet votre nouveau projet apparaîtra maintenant sur votre tableau de bord back4app, posant les bases de votre backend étape 2 – élaboration de votre schéma de base de données construction de votre modèle de données pour cette application crud, vous allez créer quelques collections voici des exemples de collections avec des champs suggérés pour vous aider à concevoir un schéma de base de données pratique 1\ collection produits cette collection contiendra des détails sur chaque produit champ type détails id identifiant d'objet identifiant principal généré automatiquement nom chaîne le nom du produit détails chaîne une brève description du produit créé à date horodatage marquant la création du produit mis à jour le date horodatage de la dernière mise à jour 2\ collection utilisateurs cette collection contient des données utilisateur et d'authentification champ type détails id identifiant d'objet identifiant unique généré automatiquement nom d'utilisateur chaîne un nom unique pour l'utilisateur email chaîne une adresse e mail unique mot de passe chaîne une version hachée du mot de passe de l'utilisateur créé à date horodatage de création de l'enregistrement mis à jour le date horodatage de dernière modification vous pouvez définir manuellement ces collections dans le tableau de bord back4app en créant une nouvelle classe pour chaque collection, puis en ajoutant les colonnes appropriées créer une nouvelle classe vous pouvez rapidement ajouter des champs en choisissant un type, en nommant votre colonne, en définissant des valeurs par défaut et en la marquant comme requise si nécessaire créer une colonne utiliser l'agent ai de back4app pour la création de schémas l'agent ai de back4app simplifie la conception de schémas en générant des définitions de collections et de champs en fonction de votre demande cette fonctionnalité permet de gagner du temps et d'assurer la cohérence de votre configuration de base de données comment utiliser l'agent ai accéder à l'agent ai accédez à votre tableau de bord back4app et trouvez l'agent ai dans les paramètres de votre projet décrire votre schéma fournissez une demande détaillée décrivant les collections et les champs dont vous avez besoin réviser et mettre en œuvre après la génération, examinez le schéma suggéré et appliquez les modifications exemple de demande create the following collections for my back4app project 1\) collection products \ fields \ id objectid (auto generated) \ name string \ details 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 string \ created at date (auto generated) \ updated at date (auto updated) cette approche rationalise votre processus de création de schémas étape 3 – activation de l'interface administrateur et des fonctionnalités crud présentation de l'interface administrateur l'application administrateur de back4app est une interface sans code qui rend la gestion des données sans effort ses fonctionnalités de glisser déposer vous permettent d'ajouter, de modifier, de visualiser ou de supprimer facilement des enregistrements activation de l'interface administrateur allez à la section “plus” dans votre tableau de bord back4app sélectionnez “admin app” puis cliquez sur “activer l'application admin ” configurer les identifiants d'administrateur créez votre premier compte administrateur qui assignera également des rôles système comme b4aadminuser activer l'application admin une fois activée, connectez vous à l'application admin pour gérer votre backend tableau de bord de l'application admin gestion des opérations crud via l'interface admin dans l'application admin, vous pouvez ajouter de nouvelles entrées utilisez l'option “ajouter un enregistrement” dans une collection (par exemple, produits) voir/modifier des enregistrements cliquez sur n'importe quelle entrée pour examiner ou mettre à jour ses détails supprimer des entrées utilisez la fonction de suppression pour retirer les enregistrements obsolètes cette interface simplifiée améliore l'expérience utilisateur en simplifiant les tâches de gestion des données étape 4 – connecter marko avec back4app maintenant que votre backend est configuré, il est temps d'intégrer votre frontend marko avec back4app en utilisant l'api option a utiliser l'api vous utiliserez des appels api rest pour exécuter des opérations crud dans votre application marko exemple récupération de données via rest // in a marko component script file (e g , fetchproducts marko) import { onmount } from 'marko/src/runtime/client'; onmount(async () => { try { const response = await fetch('https //parseapi back4app com/classes/products', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('products ', data results); } catch (error) { console error('failed to fetch products ', error); } }); ce fragment de code montre comment récupérer des données de produit depuis back4app en utilisant un appel api rest étape 5 – protection de votre backend configuration des contrôles d'accès améliorez la sécurité en appliquant des listes de contrôle d'accès (acl) à vos enregistrements par exemple, pour créer une entrée de produit privée async function createsecureproduct(productdata, owner) { const product = { name productdata name, details productdata details }; // setup acl only the owner has read/write privileges product acl = { " " { read false, write false }, \[owner id] { read true, write true } }; try { const response = await fetch('https //parseapi back4app com/classes/products', { 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(product) }); const result = await response json(); console log('secure product created ', result); } catch (error) { console error('error creating product ', error); } } définir les autorisations par défaut utilisez le tableau de bord back4app pour configurer les autorisations au niveau de la classe (clp) pour chaque collection, en veillant à ce que seuls les utilisateurs autorisés puissent accéder aux données sensibles étape 6 – configuration de l'authentification des utilisateurs création de comptes utilisateurs back4app utilise une classe d'utilisateur pour l'authentification dans votre application marko, implémentez l'inscription et la connexion des utilisateurs comme ceci // in a marko component script (e g , auth marko) import { onmount } from 'marko/src/runtime/client'; async function registeruser(username, email, password) { const userdata = { username, email, password }; 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(userdata) }); const result = await response json(); console log('user registered ', result); } catch (error) { console error('registration error ', error); } } ce snippet démontre un flux simple d'enregistrement d'utilisateur utilisant des appels rest étape 7 – déployer votre frontend marko la fonctionnalité de déploiement web de back4app vous permet d'héberger votre projet marko directement depuis un dépôt github 7 1 – construire votre version de production ouvrez votre répertoire de projet dans un terminal exécutez la commande de construction npm run build cela produit un build répertoire avec vos fichiers statiques optimisés confirmez la construction vérifiez que le build dossier inclut un index html et tous les répertoires d'actifs 7 2 – organiser et télécharger votre code votre dépôt doit contenir l'intégralité du code source de votre projet marko une structure de répertoire typique pourrait ressembler à ceci basic crud app marko frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── components/ │ │ ├── fetchproducts marko │ │ └── auth marko │ ├── app marko │ └── api js ├── package json └── readme md exemple src/api js // src/api js export const api headers = { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }; export async function fetchproducts() { const response = await fetch('https //parseapi back4app com/classes/products', { headers api headers }); const data = await response json(); return data results; } s'engager sur github initialiser git (si nécessaire) git init mettez vos fichiers en scène git add engagez vos modifications git commit m "engagement initial pour le frontend crud de marko" créez et poussez vers votre dépôt github par exemple, utilisez un dépôt nommé basic crud app marko frontend 7 3 – lier github avec le déploiement web accéder au déploiement web connectez vous à back4app, allez à votre projet (basic crud app marko), et ouvrez la section déploiement web connectez votre compte github suivez les instructions pour lier votre compte github sélectionnez le dépôt et la branche choisissez le dépôt (par exemple, basic crud app marko frontend ) et la branche (par exemple, main ) à déployer 7 4 – configurer le déploiement définir des paramètres supplémentaires commande de construction si aucun dossier de build pré construit n'existe, définissez une commande de construction (par exemple, npm run build ) répertoire de sortie spécifiez build comme dossier de sortie variables d'environnement entrez toutes les variables nécessaires (comme les clés api) 7 5 – conteneurisation avec docker si vous préférez docker, incluez un dockerfile dans votre dépôt de projet \# use a node image for building the app from node 16 alpine as build \# set working directory workdir /app \# install dependencies copy package json / run npm install \# copy all files and build the app copy run npm run build \# use nginx to serve the build from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] dans vos paramètres de déploiement, choisissez l'option de déploiement docker 7 6 – déployer votre application appuyez sur le bouton déployer back4app va récupérer votre dépôt, exécuter la construction et déployer votre application surveillez le processus regardez les journaux de déploiement pour tout problème de construction ou d'exécution accédez à votre site une fois déployé, back4app fournit une url pour votre application marko hébergée 7 7 – confirmer votre déploiement ouvrez l'url fournie vérifiez que votre application se charge correctement parcourez l'application vérifiez que toutes les pages se chargent et que les fonctionnalités crud fonctionnent comme prévu dépanner si nécessaire utilisez les outils de développement du navigateur et les journaux de back4app pour résoudre tout problème étape 8 – réflexions finales et améliorations futures excellent travail ! vous avez maintenant construit une application crud complète avec marko et back4app vous avez configuré un projet appelé basic crud app marko , élaboré des collections détaillées pour les produits et les utilisateurs, géré les données via une interface d'administration intuitive, intégré votre frontend marko en utilisant des api rest, et sécurisé votre backend avec des contrôles robustes prochaines étapes améliorez votre interface utilisateur envisagez d'ajouter des fonctionnalités avancées comme des pages de détails de produits, des fonctionnalités de recherche et des notifications en direct élargissez les capacités du backend envisagez d'intégrer des fonctions sans serveur ou des api tierces pour des fonctionnalités supplémentaires approfondissez vos connaissances référez vous à la documentation de back4app https //www back4app com/docs et à des tutoriels supplémentaires pour plus d'informations sur l'optimisation des performances et les intégrations personnalisées bonne programmation avec marko et back4app !