Guía técnica para aplicaciones web full-stack en Back4App

creating and hosting a full stack web application introduction launching a full stack application can be daunting you have to worry about hosting your front end, configuring/provisioning a server, and tying everything together you may not have known it, but back4app provides an optimal infrastructure for all of the above you can easily serve your frontend html (including frontend frameworks like react and vue) with back4app’s web hosting cloud code makes an excellent backend that launches quickly in this guide, we’ll build a complete, albeit rudimentary, web application on back4app this is a guest tutorial written by john considine https //github com/considine , lead developer at k optional https //koptional com/ goals launch a full stack web application on back4app prerequisites to complete this tutorial, you need to be familiar with the command line git and npm should be installed have a back4app account, with the cli tool installed and configured, see here for help create a brand new project on your back4app dashboard see here for help this tutorial must be set to the parse server version 3 1 x see directly below for more details this project will use the newly released version 3 1 parse server this means you need to make sure your back4app project is set to this release it won’t work otherwise on your project dashboard, go to server settings » manage parse server(settings) and select 3 1 1 (it may be in beta) for more information on migrating to parse server 3 1 x, see this guide see this guide if you do not understand the syntax of the cloud code for this project project background we will launch a rudimentary ticket exchange application it allows users to sign up, login, and post tickets they are selling to different events which admins can create using the dashboard other users can contact them by their email or phone number, depending on what the poster chooses to display i have launched the app here http //ticketlister koptional com/ , using the same code we explore in this guide you are free to create an account, post tickets, and see what the app looks like the point of this tutorial is to demonstrate how to efficiently launch an app thus rather than dwelling on each line of code, we will start with a mostly finished codebase and focus on the ease of deployment there is only one place where you’ll need to edit code in step 1 you’ll need to add your project settings (application id, javascript key, and server url) however, you’re welcome to edit and extend this application in any way you like project structure before you start preparing code, it’s important to understand the file structure of this project i’ll use this as a reference throughout this guide here’s what your directory will look like when everything is finished the main takeaways from this setup are the frontend code lives in the public directory a frontend is simply the part of an application that your end user will interact with the backend code lives in the cloud directory the backend does the behind the scenes work in an application this includes saving things to the database and sending data the frontend tells the backend what to do by sending http requests in our case, this means running cloud functions please also note the simplicity of this setup three html files represent the three pages in this application our whole backend is a single file! in step 2 we will take a brief look at the frontend code that is, the public directory in step 3 we move to the backend 1 preparing the files as mentioned in the https //www back4app com/docs/advanced guides/web application hosting#prerequisites , you should have a fresh project on back4app created and https //blog back4app com/2017/01/20/cli parse server/ before visiting any of the codes, you’ll have to have it downloaded and ready in this step, we do just that please note that you will run several commands on your command line i will give you each of them to copy and run if you feel confused during this step, don’t worry; this is just the process necessary to connect a back4app app to a project i have on git it is not important to know what’s going on in this step we initialize a local directory with your back4app project using the cli pull the example project files into this directory using git initialization with back4app on your command line run you should be prompted go with “e” for existing then select the application that you created from the list next, you’ll be asked to name the directory where the code will be installed you can just hit ‘enter’ if you don’t have a preference for the sake of this project, i will assume the directory is called “ticketlister” finally, when asked just hit enter (do not hit blank) when this command returns, you can cd into the new directory you should see two directories, one called “cloud” the other called public” your entire output should look something like this syncing the app with the project files in addition to the cloud and public folders, there will be two files in your directory parse local parse project these hold data pertaining to the back4app project everything else should be overwritten with the existing project files from the repo https //github com/back4app/back4app ticketlister the following is the easiest way to do this if everything has worked, you should now be set with the following files don’t worry that was the hard part! now we can focus on the project 2 the frontend as a reminder, the frontend code for this app lives in the public directory to keep things relatively simple, i opted not to use a front end framework like react, angular, or vue this way, there are no external dependencies or builds the project does use html5 web components these are supported natively in the browser they help encapsulate the functionality of different parts of the user interface they allow the developer to declare new html elements (think ‘\<p>’) otherwise, they just use plain old javascript in the public/js directory, there are 4 javascript files main js is the code loaded by the main page, index html this page is where users list tickets etc signup js is the code loaded by the signup page, signup html signin js is the code loaded by the sign in page, login html parse js is a simple file that all the pages use it creates a connection to the backend this is the only file you will need to edit and the project will not work unless you do! adding your back4app credentials first, you’ll need to grab your application id and your javascript key from your back4app project after logging in to back4app, select your project then click app settings on the left hand side, and select security & keys you should see several keys displayed grab the application id and javascript key and keep them handy finally, open up public/js/parse js and place each of the strings in the proper place remember to make sure the serverurl is 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'; the application now can communicate with the server! a shallow dive into the code though all of the code in this project is outside the scope of this guide, i encourage you to browse each of the files nothing is to complex, and i’d like to take a quick minute to give a 1,000 foot view this project uses html5 web components to encapsulate each logical section of the interface the important markup in the html files resides within the html \<template> html \<template> tags this is how we describe the layout the “functionality” of the application occurs in the javascript files this is where the app describes what to do when a form is submitted, or a button is clicked etc for example, take the login component the markup ( public/login html ) looks like this 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 and the functionality appears in the javascript file ( 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 the whole application takes this general structure keep an eye out for the times the front end talks to the backend like this ( public/js/main js ) in the next step, we’ll look into how these functions are declared 3 the backend the entire backend will live in cloud/main js , the cloud code functions file it consists of a very modest amount of code, attesting to how much we can accomplish for so little with back4app part of the app (creating events that tickets can list under) will simply use the back4app dashboard this awesome functionality comes with our project, so no need to reinvent the wheel! again, examining each line of code is outside our scope we will, however, take another broad view of how the code works you declare cloud functions in the cloud/main js file these functions can be invoked from the front end (see step 2 ) for more information on cloud functions, see the documentation furthermore, these cloud functions are run on a parse server this guide discusses some of the syntax that’s used, so it may be helpful to have a look more specifically, the functions we define our ‘ user\ signup ’ code for handling user signup flow ‘ tickets\ list ’ code for retrieving all listed tickets ‘ tickets\ create ’ code for creating a new ticket ‘ events\ list ’ code for listing all events and one last code note i added a simple method towards the top of the file 1 const requireauth = user => { 2 if (!user) throw new error('user must be authenticated!'); 3 }; certain cloud functions require a user to be logged in by calling this function with the user property of the request, we ensure that no one can make unauthorized requests i highly encourage you to skim the rest of the functions to see how they work now that you know what they do, we can deploy! 4 deploying we’ve buttoned up all the code, and now the app can be deployed to back4app the following command will upload all public and cloud files local website hosting to obtain a public domain to view your uploaded web app, you will need to switch on web hosting from your back4app dashboard first, open “server settings” on the left side of the dashboard next, click the “settings” link under “web hosting and live query” and finally, check “activate back4app hosting” you’ll need to pick a unique subdomain; i already claimed ticketlister for this project so pick something different optionally, you can configure a domain you own to “point” to this back4app domain i did this for http //ticketlister koptional com https //www back4app com/docs/advanced guides/my%20website and my settings look like this please note the text below “custom domain”, if you plan to launch off your website if you complete this step properly, you can go to your domain and use the app if you don’t have a custom domain, just open http //\<your subdomain> back4app io, where your subdomain is the name you just selected 5 usage and the dashboard to start listing tickets, you’ll have to create an event from the admin dashboard on back4app go to the data browser, and create an ‘event’ class add the columns ‘name’ (a string), and ‘when’ (a date) then you can add an event directly remember to fill out all columns it should look something like this now, on your web app, you can log in and list a ticket with that event this admin functionality that comes with parse / back4app is another shortcut that decreases your workload conclusion creating a web application with a backend is something that often takes weeks and months we took advantage of back4app’s powerful infrastructure and the parse sdk to launch one much quicker using this approach for any application allows you to build amazing things without wasting time