Hébergeur d'Applications Full-Stack avec Back4App

créer et héberger une application web full stack introduction lancer une application full stack peut être intimidant vous devez vous soucier de l'hébergement de votre front end, de la configuration/provisionnement d'un serveur et de tout relier vous ne le saviez peut être pas, mais back4app fournit une infrastructure optimale pour tout cela vous pouvez facilement servir votre html frontend (y compris les frameworks frontend comme react et vue) avec l'hébergement web de back4app cloud code constitue un excellent backend qui se lance rapidement dans ce guide, nous allons construire une application web complète, bien que rudimentaire, sur back4app ceci est un tutoriel invité écrit par john considine https //github com/considine , développeur principal chez k optional https //koptional com/ objectifs lancer une application web full stack sur back4app conditions préalables pour compléter ce tutoriel, vous avez besoin de d'être familier avec la ligne de commande git et npm doivent être installés avoir un compte back4app, avec l'outil cli installé et configuré, voir ici pour de l'aide créer un tout nouveau projet sur votre tableau de bord back4app voir ici pour de l'aide ce tutoriel doit être configuré pour la version 3 1 x de parse server voir directement ci dessous pour plus de détails ce projet utilisera la nouvelle version 3 1 de parse server cela signifie que vous devez vous assurer que votre projet back4app est configuré pour cette version cela ne fonctionnera pas autrement sur votre tableau de bord de projet, allez dans paramètres du serveur » gérer parse server (paramètres) et sélectionnez 3 1 1 (il peut être en beta) pour plus d'informations sur la migration vers parse server 3 1 x, voir ce guide voir ce guide si vous ne comprenez pas la syntaxe du code cloud pour ce projet contexte du projet nous allons lancer une application rudimentaire d'échange de billets elle permet aux utilisateurs de s'inscrire, de se connecter et de publier des billets qu'ils vendent pour différents événements que les administrateurs peuvent créer en utilisant le tableau de bord d'autres utilisateurs peuvent les contacter par leur email ou numéro de téléphone, selon ce que le poster choisit d'afficher j'ai lancé l'application ici http //ticketlister koptional com/ , en utilisant le même code que nous explorons dans ce guide vous êtes libre de créer un compte, de publier des billets et de voir à quoi ressemble l'application le but de ce tutoriel est de démontrer comment lancer efficacement une application ainsi, plutôt que de s'attarder sur chaque ligne de code, nous commencerons avec une base de code presque terminée et nous concentrerons sur la facilité de déploiement il n'y a qu'un seul endroit où vous devrez modifier le code dans l'étape 1, vous devrez ajouter les paramètres de votre projet (id d'application, clé javascript et url du serveur) cependant, vous êtes libre de modifier et d'étendre cette application comme bon vous semble structure du projet avant de commencer à préparer le code, il est important de comprendre la structure des fichiers de ce projet je vais l'utiliser comme référence tout au long de ce guide voici à quoi ressemblera votre répertoire lorsque tout sera terminé les principaux points à retenir de cette configuration sont le code frontend se trouve dans le public répertoire un frontend est simplement la partie d'une application avec laquelle votre utilisateur final interagira le code backend se trouve dans le cloud répertoire le backend effectue le travail en coulisses dans une application cela inclut la sauvegarde des données dans la base de données et l'envoi de données le frontend indique au backend quoi faire en envoyant des requêtes http dans notre cas, cela signifie exécuter des fonctions cloud veuillez également noter la simplicité de cette configuration trois fichiers html représentent les trois pages de cette application tout notre backend est un seul fichier ! dans l'étape 2, nous allons jeter un bref coup d'œil au code frontend, c'est à dire au répertoire public dans l'étape 3, nous passons au backend 1 préparation des fichiers comme mentionné dans les https //www back4app com/docs/advanced guides/web application hosting#prerequisites , vous devriez avoir un projet frais créé sur back4app et https //blog back4app com/2017/01/20/cli parse server/ avant de visiter l'un des codes, vous devez l'avoir téléchargé et prêt dans cette étape, nous faisons exactement cela veuillez noter que vous allez exécuter plusieurs commandes sur votre ligne de commande je vais vous donner chacune d'elles à copier et à exécuter si vous vous sentez confus pendant cette étape, ne vous inquiétez pas ; c'est juste le processus nécessaire pour connecter une application back4app à un projet que j'ai sur git il n'est pas important de savoir ce qui se passe dans cette étape, nous initialisez un répertoire local avec votre projet back4app en utilisant le cli tirez les fichiers du projet exemple dans ce répertoire en utilisant git initialisation avec back4app sur votre ligne de commande, exécutez vous devriez être invité allez avec “e” pour existant ensuite, sélectionnez l'application que vous avez créée dans la liste ensuite, on vous demandera de nommer le répertoire où le code sera installé vous pouvez simplement appuyer sur ‘entrer’ si vous n'avez pas de préférence pour les besoins de ce projet, je vais supposer que le répertoire s'appelle “ticketlister” enfin, lorsqu'on vous demande il suffit d'appuyer sur entrer (ne pas appuyer sur vierge) lorsque cette commande retourne, vous pouvez cd dans le nouveau répertoire vous devriez voir deux répertoires, l'un appelé “cloud” et l'autre appelé “public” votre sortie entière devrait ressembler à quelque chose comme ceci synchronisation de l'application avec les fichiers du projet en plus des dossiers cloud et public, il y aura deux fichiers dans votre répertoire parse local parse project ceci contient des données relatives au projet back4app tout le reste doit être remplacé par les fichiers de projet existants de le dépôt https //github com/back4app/back4app ticketlister ce qui suit est la manière la plus simple de le faire si tout a fonctionné, vous devriez maintenant avoir les fichiers suivants ne vous inquiétez pas c'était la partie difficile ! maintenant, nous pouvons nous concentrer sur le projet 2 le frontend pour rappel, le code frontend de cette application se trouve dans le public répertoire pour garder les choses relativement simples, j'ai choisi de ne pas utiliser de framework frontend comme react, angular ou vue de cette façon, il n'y a pas de dépendances externes ou de constructions le projet utilise des composants web html5 ceux ci sont pris en charge nativement dans le navigateur ils aident à encapsuler la fonctionnalité de différentes parties de l'interface utilisateur ils permettent au développeur de déclarer de nouveaux éléments html (pensez à ‘\<p>’) sinon, ils utilisent simplement du javascript classique dans le public/js répertoire, il y a 4 fichiers javascript main js est le code chargé par la page principale, index html cette page est celle où les utilisateurs listent les tickets, etc signup js est le code chargé par la page d'inscription, signup html signin js est le code chargé par la page de connexion, login html parse js est un fichier simple que toutes les pages utilisent il crée une connexion au backend c'est le seul fichier que vous devrez modifier et le projet ne fonctionnera pas à moins que vous ne le fassiez ! ajout de vos identifiants back4app tout d'abord, vous devrez récupérer votre id d'application et votre clé javascript depuis votre projet back4app après vous être connecté à back4app, sélectionnez votre projet ensuite, cliquez sur paramètres de l'application sur le côté gauche, et sélectionnez sécurité et clés vous devriez voir plusieurs clés affichées prenez l' id d'application et la clé javascript et gardez les à portée de main enfin, ouvrez public/js/parse js et placez chacune des chaînes au bon endroit n'oubliez pas de vous assurer que le serverurl est https //parseapi back4app com 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'; l'application peut maintenant communiquer avec le serveur ! une plongée superficielle dans le code bien que tout le code de ce projet soit en dehors du champ d'application de ce guide, je vous encourage à parcourir chacun des fichiers rien n'est trop complexe, et j'aimerais prendre une minute rapide pour donner une vue d'ensemble ce projet utilise html5 web components pour encapsuler chaque section logique de l'interface le balisage important dans les fichiers html se trouve dans les html \<template> html \<template> balises c'est ainsi que nous décrivons la mise en page la “fonctionnalité” de l'application se trouve dans les fichiers javascript c'est ici que l'application décrit quoi faire lorsqu'un formulaire est soumis, ou qu'un bouton est cliqué, etc par exemple, prenons le composant de connexion le balisage ( public/login html ) ressemble à ceci 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 et la fonctionnalité apparaît dans le fichier javascript ( 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 l'ensemble de l'application prend cette structure générale gardez un œil sur les moments où le front end communique avec le backend comme ceci ( public/js/main js ) dans l'étape suivante, nous examinerons comment ces fonctions sont déclarées 3 le backend l'ensemble du backend vivra dans cloud/main js , le fichier des fonctions cloud code il se compose d'une très modeste quantité de code, attestant de combien nous pouvons accomplir pour si peu avec back4app une partie de l'application (création d'événements sous lesquels les billets peuvent être listés) utilisera simplement le tableau de bord back4app cette fonctionnalité géniale est incluse dans notre projet, donc pas besoin de réinventer la roue ! encore une fois, examiner chaque ligne de code est en dehors de notre portée nous allons cependant prendre une autre vue d'ensemble de la façon dont le code fonctionne vous déclarez cloud functions dans le fichier cloud/main js ces fonctions peuvent être invoquées depuis le front end (voir étape 2 ) pour plus d'informations sur cloud functions, voir la documentation de plus, ces cloud functions sont exécutées sur un serveur parse ce guide discute de certaines des syntaxes utilisées, il peut donc être utile d'y jeter un œil plus précisément, les fonctions que nous définissons sont ‘ user\ signup ’ code pour gérer le flux d'inscription des utilisateurs ‘ tickets\ list ’ code pour récupérer tous les tickets listés ‘ tickets\ create ’ code pour créer un nouveau ticket ‘ events\ list ’ code pour lister tous les événements et une dernière note de code j'ai ajouté une méthode simple vers le haut du fichier 1 const requireauth = user => { 2 if (!user) throw new error('user must be authenticated!'); 3 }; certaines fonctions cloud nécessitent qu'un utilisateur soit connecté en appelant cette fonction avec la propriété utilisateur de la requête, nous nous assurons que personne ne peut faire de requêtes non autorisées je vous encourage vivement à parcourir le reste des fonctions pour voir comment elles fonctionnent maintenant que vous savez ce qu'elles font, nous pouvons déployer! 4 déploiement nous avons finalisé tout le code, et maintenant l'application peut être déployée sur back4app la commande suivante téléchargera tous les fichiers publics et cloud hébergement de site web local pour obtenir un domaine public afin de visualiser votre application web téléchargée, vous devrez activer l'hébergement web depuis votre tableau de bord back4app tout d'abord, ouvrez "paramètres du serveur" sur le côté gauche du tableau de bord ensuite, cliquez sur le lien "paramètres" sous "hébergement web et requête en direct" et enfin, cochez "activer l'hébergement back4app" vous devrez choisir un sous domaine unique ; j'ai déjà réservé ticketlister pour ce projet, donc choisissez quelque chose de différent en option, vous pouvez configurer un domaine que vous possédez pour "pointer" vers ce domaine back4app j'ai fait cela pour http //ticketlister koptional com https //www back4app com/docs/advanced guides/my%20website et mes paramètres ressemblent à ceci veuillez noter le texte ci dessous « domaine personnalisé », si vous prévoyez de lancer votre site web si vous complétez cette étape correctement, vous pouvez aller sur votre domaine et utiliser l'application si vous n'avez pas de domaine personnalisé, ouvrez simplement http //\<votre sous domaine> back4app io, où votre sous domaine est le nom que vous venez de sélectionner 5 utilisation et le tableau de bord pour commencer à lister des billets, vous devrez créer un événement depuis le tableau de bord administrateur sur back4app allez dans le navigateur de données et créez une classe « événement » ajoutez les colonnes « nom » (une chaîne) et « quand » (une date) ensuite, vous pouvez ajouter un événement directement n'oubliez pas de remplir toutes les colonnes cela devrait ressembler à quelque chose comme ceci maintenant, sur votre application web, vous pouvez vous connecter et lister un billet avec cet événement cette fonctionnalité d'administration qui vient avec parse / back4app est un autre raccourci qui réduit votre charge de travail conclusion créer une application web avec un backend est quelque chose qui prend souvent des semaines et des mois nous avons profité de l'infrastructure puissante de back4app et du sdk parse pour en lancer une beaucoup plus rapidement utiliser cette approche pour n'importe quelle application vous permet de construire des choses incroyables sans perdre de temps