Spots we wanted to find the best way how to efficiently book the parking spots that we can we are not bothered with the problems like that the spot is already already already used by someone else so we created the app that it's called uh parking cap and it helps us a lot with the daily routines with the parking the another example could be that uh you can build an that uh helps you with the.
Exporting of data from the multiple sources let's imagine that you want to create export of data from let's say three services so you can connect them together gather all the information from these services and create a file that you can download from the url or you can upload the data to your service or to your not your service but to your ecosystem and these are the examples that you can.
Do with integromat and uh because if you take a look at the scenarios from different perspective so most common use case is that you connect services together or you transform data and pass them to another service or you can backup data or synchronize them but uh our platform can do much more than that and one of the one of the features that uh i would like.
To show you in this uh in this session is that you can convert your scenario into a powerful web server that can provide or serve the web application or the website or it can act like a web application uh in this next slide there is example of our packing app so this is something.
Floor is the spot located and also the packing allows you to define what days you are usually go to the office and it books uh the places uh for you so you don't have to do that manually so all of that uh is built on uh on our platform here is example of the scenario uh it's just uh out of curiosity to show you it's uh it's a bit complicated.
Because there is a lot of business logic inside but uh if i show you uh in the walkthrough how to build the app we will find out that it's not that complicated uh and maybe i should start with the uh with the reasons why would you even start building app using our platform and here are the most important uh most important uh reasons why.
Uh our platform is good place to to build up uh on and the first is monitoring uh if you imagine or you probably know that once you execute the scenario then um you can see all the data that went through through the scenario you can see the data that's coming from the modules you can also see errors if there are something happen in your scenario you can check the history of the scenario so.
You can see what went wrong or what data went through the scenario at a specific time the second reason is that is a fast prototyping and development if you compare the building of apps the conventional way which i mean like programming the server application that it takes a lot of time so if you if you compare that with the building.
Scenario then it's much easier to connect multiple multiple modules in scenario connect them together map the variables and that's it next reason is over no overhead you don't have to care about the server web hosting about the programmers because most of the tasks you can do by your own just by modifying the scenario um another reason is that uh we have more than 1k apps that are ready to be used.
Posts Related:
In app so you can you don't have to create your connectors uh from scratch you can - Make Automate
Use already existing apps in scenario and last but not least is uh the quick and easy updates so if you decide that uh you need to perform any update in your app then it's uh it's easy to open scenario and do that updates directly in in there um i would i would like to uh i would like to point out that uh this session is uh is is not a no code i.Would say it's a low code it requires at least the basic knowledge of html css and http which are the technologies that i will use there and if i if i talk more about the architecture uh it's uh it's about the architecture in general it's uh it's like um the high level of how the web applications are built and how they are divided and.
The high level division of the web application is that it's uh it has two parts the first part is the front end which is the user interface that you can see let's say if you if you open the google.com or make.com you can see the website and this is basically the front-end part of the application and this front-end part is composed using the html which is.
Which is like a skeleton of the of the web page it tells browser what components should be on page and i'm talking about the text inputs about the text about images about the buttons and so on then there is a technology css that tells browser how the components on the site should look like because if you if you imagine just html it just tells that hey plays there.
Some component but uh if you use only html it will be like a black and white and you won't see much design and your website won't look good so if you start with the css you can tell that this specific text on the website should be in a red color it should be positioned in the center of the web page and so on so css helps you to make um your your websites more interesting and.
More uh representative and the last technology that uh it's already necessary which is common for front-end and back-end is http you probably know that uh if you copy the url from the from the url from the uh url bar in your browser that you can see there uh prefix http and this is a protocol that it's uh that is used for.
The communication between front end between your the browser and backend which is in conventional way a server which is a device that has address like make cone for instance and listens on that uh on that address and if there is any request from the front end from the browser it accepts the request process the request and the response to the front end with the data that the front that the browser wanted to.
And in in our case uh the only thing that i do um in comparison to the conventional way of building archite of the web application is that instead of the building the web server the conventional way like creating the server and programming the logic on the server in languages like php node.js in java or whatever i'll i'll use our scenario.
Instead and the key magic what helps me to turn the scenario into a web server are two modules webhook and the book responder you probably know that webhook is like it creates uh it creates a url that you can send the data to and process the data in the scenario but if you combine that.
With the responder then it can simply be turned into a fully featured
Web server that can provide you and serve the web pages it can also act like an api and many more and i think it's enough of the global talking about the technologies and so on and let's get our hands dirty and i'll switch to my first example.And this is uh this is an example of uh how you can leverage the webhook and the responder to become a web server i have there are multiple examples so i'll start with the first one or maybe i can start with the plain webhook so if i copy address of the group you can see that i've already turned the scenario on and if i call the webhook which is not connected to any module.
The response here is accepted this is this is the default response from our webhook so i think nothing interesting at this point but i can connect it with um sorry my device is a bit laggy it's like okay i'll refresh the page.
Ed can you hear me will you guys still hear me because it looks like i have connection problems okay now you are back uh yeah i can can you hear me yeah now i can how is the connection outage okay so let's reload my scenario so i hope you don't miss anything that i.
That i told before that so i started with the i started with the executing of the of the webhook itself and the response was accepted so nothing interesting but if i connect webhook with my first responder which contains the stiffness code and the body then there'll be will be the first magic so i can respond with the with the text it's still.
It's it's good but it could be much better so if i unlink this uh responder and connect this json responder and let's maybe go through the setting of the module so the first is status which tells the browser that everything goes well if i talk more more about the status the status is number that tells uh.
The browser or uh the service desk that consumes that request what is going on the 200 statuses are like successful statuses if there is a status 300 and more then it's like it's a redirect status that helps to the to the requester that you would like to redirect to a different website if there is a status code 400 401 404.
That's a status code of error i'm pretty sure that you know the status code 404 which is uh not found it's pretty common on websites that once you click on a link that links to the nowhere then you can see this error so in our case the status is 200 because i'd like to respond successfully then i put there a body this is a simple json file and the important part is that i i also have to provide headers and.
Headers are like metadata for for the browser it tells to the browser how to how to display the represented data and also the information that or there could be information about the response like how big the response is when it was generated and so on so if i connect json save the scenario and execute the webhook again you can.
See that now the response is json this is a way how you can create the api because you can connect uh modules in between webhook and webhook responder you can get the data from the database from your crm or anything else and then you can compose the json file and provide that in the response another example is that i can.
Respond with html i have put there some some html example again the status code is 200 and i change the content type header and instead of the content type header if i go back to the previous module you can see that the exam that the content type was application json.
So i'll tell the browser that the response is in json if i go back to the html module okay sorry for that okay so when i switch back to the html module you can see that the header has changed and the content type is text html if i save the scenario and.
Run my web group again yeah here we go i have a html page that has been served by my simple server there are many more features that you can you can do with the responder and one of these features is that you can also provide a file let's say you can generate the you can you can generate like the overview export of of your orders or for instance if you.
Have eshop so you can you can create export file and provide it to be downloaded via the webhook in this case i have file that the content is hello world and the important part is that there is a header content disposition that tells two browser that uh the response is the attachment with the filename text txt if i save the scenario and run my book again you can see that my browser.
Automatically downloaded file and if i open the file there is a content hello world you can easily put there in the body any file let's say you can you can uh provide a file like a pdf you can get it through the google drive or dropbox and map their data of the file and the only thing that you have to change is also the file name so you have to change that to the pdf.
For instance and the last uh last example is that you can also tell the browser that you want to redirect to a different website or to a different location the important is that you can see that the status code has changed from the 200 to 302 which tells the browser that you want to perform a redirection and the second important part is a location that tells the browser where.
You want to navigate to so if i save the module save the scenario and run my webhook again now i've got navigated to the make.com because because i i um because i told the browser that i like to navigate to this website so these are the basics of uh what you can do with uh.
Webhook and the group responder and based on top of that um you are able to build a more complicated application and not just the listen for the request and response this simple way but you can you can do much more initially i wanted to walk you through our parking app but i found out that it's really complicated just because there is a lot of business logic inside so i've decided to build an.
E0 app and i would like to show you how to build a to-do list app which should look something like this so you can see that there is a list of a list of tasks i can mark them as done i can create a new task and uh yeah and i'll walk you through how to build this app so let's start with a new scenario.
And i'll put open here webhoot um custom webhook i'll create a new one then i put it here and the hook responds and i'll keep it empty so the first of all.
I need to i i have to create some html that i will present to the browser i've prepared this uh this boiler plate you can find the similar boilerplates on the internet if you if you search for html boilerplate i am pretty sure that on the first link that you'll see you'll find something like that and if i quickly go through you can see that.
There is important part of the type html that tells that the content is html then there are there is a html tag which which is not that important in this case but important is head section that uh tells browser information about how to display your website you can see that there is a description out or who generated the page the title the title is uh information that you.
Can see in the title of your website if i go back to the browser the title is this tag that you can see in here and the second important part is a body which is a content that is displayed to you when you visit the website if i copy this spoiler plate to my webhook.
And i also have to put their header content type to tell browser that the content in here is html if i save the scenario and call the webhook okay run the scenario and if i call the webhook.
Okay let's get back to the scenario what's going on i think i was too fast yeah and now you can see that there is a blank page but there is a title and there is a icon and the page is blank because i didn't put there any content so uh let's start with with the putting uh some content to our website and uh maybe i i'll.
Tell you about the bootstrap which is a framework that helps us with the building of the app because as i mentioned previously that uh for the building of the websites you need to know the html and you also need to know css that helps the browser to to modify the content and and make the design of the site and there are many tools that helps you with the building of the websites and.
In case of the bootstrap the bootstrap provides you with the set of the pre-configured html components that you can use in your app so you don't have to style every component but you can use these pre-configured components like if i go to the documentation let's say i like to put a table inside my website so i can just copy this example and i can use that simply in.
In my app but the first of all what i have to do is to go to the get started and copy this link and put it in the head section of the of the of the html to tell browser that i like to include the bootstrap components inside my website so at this moment i i can use bootstrap and if i go back to the documentation and.
Try to put some table in there i can use this first one i can copy the content if i go back to html and paste content in here now i have i have a body with some content so if i copy this content to my web book responder.
