Build No Code Web Apps with Webflow and Wized - Introduction

foreign hello Rory here webflow developer and co-founder at propeller digital today I'm going to be giving you an introduction to building web apps with webflow and two very powerful tools Wiz and Zano so we'll start off by quickly discussing what is a web app if you're a webflow developer you will have maybe built a one-page website or a website with a couple of pages that just has content maybe some interactions maybe some CMS lists some filtering and if we just have that we would call that a website and if we introduce more complex functionality where we have data going into a system data coming out of the system some actions that are updating things dynamically on the web page we now have a web app and that's Illustrated down here at the bottom where we will have what we call our front end which the user interacts with where they can view content where they can click things make things happen we have something in the middle that's handling these requests that's pulling data into the website or out of the website and then we'll have a backend which is typically made up of a database where we're storing information changing information retrieving information and API endpoints where we can send information or take it out and have different things happen now strictly speaking if you have a webflow website that has a contact form on it you technically have a web app we have data in where we fill out our information we have something happening we have a submit action that is sending data somewhere into the webflow backend where something is happening to it it's being stored in our webflow website so we can view all of our submissions and we also have data out in the form of an email you get sent an email with the contents of the form submission now in day-to-day web development language we wouldn't quite call this a web app but what is quite common in webflow is to link in other sas's software as a service where you link in these other apps that are web app so on this website if someone wants to book a grind and they click book grind they're taken away to Squarespace scheduling where we have a calendar where they can select their teachers select their classes and that is what we would describe as a web app there's a lot of functionality there there's data going in where people pick a class to book there's data going out where the customer gets an email about their appointment the teacher gets their email about the appointment but the time may come where you have the need to build your own web app maybe you want to build something internal a mini CMS or not CMS CRM to manage your customers or maybe you have a client that has a webflow website and for whatever reason their requirements are they want to build their own web app into it maybe they want to have a customer portal where their customers can log in they can view their orders their invoices things like that and that is possible to do in a low code fashion inside of web now we first have to ask ourselves is webflow the best platform for this there are already numerous no code or low code app Builders out there a very popular example is bubble so bubble lets you build a wide range of web apps practically anything you could want to build it gives you a front-end designer for building your app and it gives you a database to put data into it lets you build workflows where you can you know if this then that you can have different automations set up but if you are a full-time webflow developer if you love webflow webflow is your bread and butter probably what's going to happen to you is the same thing that happened to me you log in and you're confronted with this entirely new interface that you need to use for building the front end so a lot of these no code tools have their own front-end Builder and what we have to consider is is it worth putting in the time and the effort to go and learn an entirely new front-end Builder now I haven't actually built anything in bubble but from looking into it and doing my research the front-end Builder is not as good as webflow what webflow has that's fantastic that's probably best in class on the internet right now is the designer is building out your website your CMS your interactions it's excellent and I frankly do not want to use any other tool ever for doing that so then the question is how can we best utilize webflow to build web apps there's a couple of ways of doing that if you are a developer a developer developer and you know code if you can build websites from scratch inside of something like vs code well then you can probably comfortably build the front end in webflow and then um you know link it up to an external database build your own API calls called code the whole thing from scratch if you're like me and the idea of building web apps really appeals to you and it's something you like doing but you just don't have either the time the energy or the interest in learning how to go deep on coding we are then left with the no code or low code options so we're going to look at two services to other SAS services that you can utilize to build a web app in webflow the first thing we're going to look at is wiz so Wiz started out at a different domain whiz.io and it was a no code builder for building web apps inside of webflow now last year they got acquired by fin Suite so again if you're if webflow is your bread and butter you have almost certainly heard of fun Suite so they've built some pretty amazing stuff they have whized up at the top they're pushing that quite a bit and for good reason they make attributes for doing no code JavaScript stuff inside a webflow they may Client First you you get the point you've probably come across them they're Legends in the webflow space so we are interested today in Wist and the front page of the website says exactly what it does in the tin webflow apps or web apps and webflow no code I'm pretty new to YouTube I don't know am I going to get censored or what for cursing I can always cut that out later if I want to but it explains what it does build complex applications use webflow as the front end for your web app build login functionality stripe payment flows host your project via webflow and integrate your website with any rest API so it's fantastic news that they've bought this they now have a team working on this making it better pushing updates for it supporting people by chat as of recording this video it is in closed beta on their Discord form the Discord Channel you can try and get an invite code in the next couple of weeks they should be fully releasing it so you might not be able to get direct access for now but you can at least be learning how it works with my video here so we'll go over I'm gonna log in and we'll take a look at one of my sample applications here so the left hand side here is pretty much what you get in Wiz and the first thing we have here is my apps so you can't use wized on its own you need a back end you need a database you need some other app where you're going to do stuff you're going to use whiz to pull the information in and out of webflow and update it on the webflow front end so one of the beauties of this is that you can link in any application anything that has a rest API you can use so there's a couple that are built in that they have out of the box support for we have airtable which you can use as a database stripe for payments rest API is where you can link in any other app so open Ai and chat gbt are quite popular right now there's not a built-in integration but you can link in with their rest API by selecting that and setting it up over here then we have canonic is a type of database Zano is a back end notion Firebase Super Bass is a back end and we have zapier and make formerly integromat so you'll start by linking in some sort of application and we're going to be looking at Zano in this example and then we have our data out request so if I go over to my these are all pages in my webflow site by the way so I have my webflow site over here and this is where all the front-end stuff is done and the way we make any part of the page editable or get the option to manipulate it inside of Wiz is we add a custom attribute to the element that we want to control so as an example I'm going to head over to the login page who wants webflow loads up on me give me design control please okay so we'll go over here to my login page and what we want to do to use any element inside a wiz is we click onto it we go up to element settings up here in the top right and down at the bottom we have an option called custom attributes and what we do is we click into that we click make new one or edit an existing one the name is W hyphen El which stands for Wiz element and then we just give it a unique name that we will use to select this inside of Wiz over in Wiz if I go to my login page I have the option up here for x-ray which is going to show me all of my fields that I have tagged inside of webflow such as the user login field email user login field password so next up is creating a data out request so I have one over here called login user I've given a name I've put it inside a folder I've selected Zano which I'll I'll talk about these a little bit later the URL endpoint and the method and then in my back end I have a user database which has some columns in it such as user email user password and what this is doing is it's submitting a request to Zano and it's going to go and it's going to say look at the database that's linked to this endpoint which is my users database find the column called user email and the value that we're going to check for is going to come from this element on the page so the way this looks is I can open this up when I get this data field editor in Wist I can see all of my various requests on the page down here you can create variables you can create cookies and here's a list of my input Fields so I want to get user login field email and click done and we can see now that if I type an email in here and click into this oh have I picked the right one user login field email yes put that in again ah there we go okay so we can see that that is getting the that's my registration field that's the wrong one we want the login field user login email okay and we can see that it's picking that up there same thing for password you can create all sorts of data out requests like this that are going to take data from your webflow endpoint and send it off to whatever back end you have hooked it up to so we then have actions so actions do a whole bunch of stuff one I have set up here is just button login user so I'm applying it to this button here and we can configure an action and my action is on click I want to perform a request and that request is login user so if I type in my password here and click login it's going to run this and it is going to log me into my back end or not and part of debugging as we go in here to login user and we check the response so there we go we've just performed a login request and actions are doing some other useful things on this page they are updating the text here to display my name so we have an action here set welcome message and that is saying welcome and we're then asking it to check a different request that we're running on this page which is load user and that is pulling in all of the information that is related to this login user and it's then updating it on the page so again this just has an attribute inside of webflow a custom attribute on it that's letting me manipulate it it's also then going into another database and pulling a list of recipes that are only associated with this user and the way that looks in webflow is if we go over to the dashboard we basically just create how we want this to look this is pretty similar to making a collection list item we set how one of them looks and then we get the rest of them set up and that looks like this so again we have a data in request here and we're saying get recipes of user and this is basically going in it's getting all of the recipes from the database where the user's ID matches the logged in user we'll do another video down the line that gets into the nitty-gritty of how that works and similarly if we click view recipe we have a templated page set up again this is pretty similar to creating your CMS template Pages collection Pages inside webflow which I don't have because I'm doing them inside of Wiz and again this is going into the database it's pulling out that information and it's displaying it on the page there's also an option here to delete it which will go and delete it out of the back end so on and so forth so that's how we use data in actions and data out to do some pretty cool and dynamic stuff on the front end of the webflow website so what this app does is it generates a recipe using chat GPT so I have a data out action here called generator recipe and again we'll go into this stuff down the line but this basically connects to the open AI API and passes in a request that I have built to generate a recipe so again I have an action here that's set to run this recipe I also have an action for the recipe generator let's see here yes loading recipe so I have this Lottie animation setup on the recipe generator and that is set to be hidden by default and what we can do in webflow it's gone now but I basically have an action here and this is some JavaScript that basically says if this request request number one which is my generate recipe if it is requesting it is going to show the visibility of that Lottie and then when the request stops because it is passed back the information that disappears again I am using an action to display this information there is a you know uh there's a just a paragraph box in webflow that is tagged as a recipe response and we get a recipe passed back to us from openai onto the front end of a webflow website and I I nearly said without writing any code the reason I like to call this stuff low code instead of no code is that you know technically this is a little bit of code this is a JavaScript um this is a JavaScript statement that says if this is happening or if this is happening but that's still pretty cool you know I'm not a big coder I can't create a you know a full website from scratch with anything other than some simple HTML and CSS and there's other stuff set up here if I click save recipe to account that's going to save the recipe this is a very Bare Bones app as you can see there should be an alert there that says your recipe has been saved successfully but if we go back to our dashboard we can now see that that has been saved into the database and when we run our data in action to pull in all the users recipes we get our recipe so the sky is the limit with this it's an extremely powerful and useful tool for webflow designers and webflow developers and something I'm very much looking forward to getting better grips on to quickly touch on some other things in here we have auth which is used for setting up access control so with this you know if someone logs into this if someone goes onto this URL and they're not logged in they are going to get redirected back to the login page and we go in and we pick which app we're using for authentication that's Zano in my case and it gives us some pre-built functions here pardon me so if you are setting this up for the first time you can click login user and it's going to build out the login user data out request for you so that's whiz we're going to quickly touch on Zano so Zano does two things it is a database for storing all of this information and it's also for creating API endpoints where we can get data in and out of zono so for example if I click into the recipes database we can see that we have all the different recipes stored in here three out of the four of these are my ones so we don't see this one on the front end because the request is only pulling the ones that match the logged in user which is this one so if you have any experience with databases this should look familiar we can create different data types in here for new information that we want to store or to access later on text integers objects references to other tables which is what this one is it references the users table and this is where you can store all of this information which is a critical component in any sort of web app I wasn't using Zano initially when this was basically just generating a recipe and displaying it on the page but once I wanted people to be able to save it to an account to register to log in to view all the recipes that they've saved at that point we need some sort of back end now there are other options you can basically Link in any kind of backend that you want and I originally started with Super Bass because their pricing is lower than Zano and they have a very generous free plan the reason I did not stick with it is if you want to do some more complex functions so for example I want to set up stripe so that only people that have a subscription to the app can use it more than three times per day I would have to code that in Super Bass Super Bass is for developers it's not really no code or low code friendly Zano on the other hand is very low code friendly so if we go into the API we have these different API groups where we can put our apis and then we have all of these various API endpoints so for example if we go to recipes and we go to get recipes this is pretty simple this is just going to pull all of the recipes from the um from the back end this is an example of a very simple one if we look at a more complicated one we have one here where I want people to be able to update their email and when you start building a web app you quickly run into all the stuff that you didn't consider at the start if a user wants to update their email address we need to send them an email to confirm that their new email address works so what we have here is the API Builder that consists of an input so this is their current email and their new email so if I go over to Wiz and into manage account we have an option here for your email and we also have a data out request to verify user email I haven't actually built the one yet to update their email I have built the one to update their first name and their last name we'll take a look at that in a second but we can build out all this different functionality so for example I need to check that the user's new email is not the same as their existing email and if it does we're going to return an error your new email address is the same as your current email address I also need to pull a list of all the users and get their email address and I need to check that their new email doesn't match any of those existing emails I'm going to return an error your new email is already in use by another user because we can't have people creating a new email that someone else is using all this stuff I do not have the ability to code you can do this in Super Bass but you have to be able to write the code to do so Zano makes it possible with a small amount of code analogy would want to know a little bit of JavaScript any sort of beginner JavaScript course or book should get you up to scratch we can build out all of this different functionality and if we take a look at one more as an example we want to update a user we have to first of all authenticate them they have to be logged into their account and be able to do that this is all the information that we could possibly pass in about the user and what I am doing at the minute is updating their this is the wrong record so let's say we want to delete a recipe which I have set up here we need to get the ID of the recipe which is passed in goes into the box in webflow Wiz pulls it in Wiz sends the data into Zano and Zano is where we then process it run it through our function stack and decide exactly what we want to do with the information so that is all for now on building web apps using webflow wizzed and Zano hopefully this video was of use to you if you have any questions or future videos you'd like to see please leave a comment below the video and if you're looking to Outsource app development or get someone to build an app with you using webflow please reach out to me at my Agency address which would be at the end of the video and in the description and best of luck building web apps with webflow

Channel: Ruairi McNicholas

Views: 14,790

Keywords:

Id: 1RUuTG_HPUg

Length: 24min 0sec (1440 seconds)

Published: Fri Feb 24 2023