Add Signed Restaurant Application with airSlate SignNow

Autograph restaurant application

hey guys the mistress here welcome back to my channel where I show how to build digital solutions to not to make you workflows now this is going to be the first video of the series that I'm planning to create where I'm gonna be showing you how to build a simple restaurant up from scratch without writing any code we're gonna be going through the whole process step by step right and by the end of this series you should have your own app created right so this is gonna be great especially if you if you're a restaurant owner obviously and also if you have like a web development agency a marketing agency and you want to offer your clients a special service that I'm sure many of their competitors are not gonna have also that's if you're serious about building awesome apps with no code and you want to network with myself as well as like-minded people who are working on awesome projects like this one I'm gonna put a link below this video to my community which you can join today for absolutely free so make sure to check that out so without being said let's get started now the platform that I'm gonna be using in order to create this it's gonna be Glide apps calm right and if you guys never heard of glide apps it's an amazing tool as you can see right here that lets you visually design your applications and it has some really really cool features so um it's totally free to get started so make sure to create your account all you need is a Google account to sign up with Glide you know and once you sign up you should be on a page that looks like this this is gonna be the layout page what we're gonna be adding all the components to the app and designing how the app is gonna look like and we also need to integrate our glide up with a Google spreadsheet right so that's the that's the next thing you need to do well before you create your app you're gonna be asked to create a Google spreadsheet right so create one add some random data in the in the spreadsheet because without adding any data it's not gonna let you create an app so just go ahead add some random data in the spreadsheet and then you should be able to create your app once you do that you're gonna be in a page that looks like this and we're now ready to get started now the idea had for this app I wanted to be like um like a simple informational app restaurant you know and one really cool use case that I can think of is replacing a physical menu right so I see a lot of restaurants these days instead of physical menus they actually give you i pads you know so you can look at the menu in a digital format and that I believe makes it super easy for them to update the menu whenever they need to you know instead of updating a physical menu every time so if you have like a restaurant client you can easily charge them like a monthly fee in order to to build like a simple glide up here for them to display the menu and also easily update it through a Google sheet as you're gonna see in a second right so that could be the first use case and then the second use case I can think of is having a like a reservation form you know where the customer can reserve their table you know and they can enter their time you know when they want to visit the restaurant and so on and then we can also have another tab before for like an about Us page you know stuff like that but let's get started here and we're gonna figure it out along the way now the first thing I need to do guys is set up my tabs so Thompson glider basically like the app pages right so the first time I'm gonna have I'm gonna call it menu right so as you can see the title changed here this is the tab 1/2 and the source is where the this tab is gonna get data from right so in Glide you select the source you select a sheet on your Google spreadsheet that you're gonna get data from and in this case I already created three sheets I actually create two sheets down here and you create new sheets by just clicking on this button right here as you can see there we go let me delete these so I'm going to delete this one as well so as you can see I already created two sheets one is at a menu so this one has all the different menu items and then here I have a categories list right so this is a bunch of different menu categories right and I already went ahead and added some data here as you can see I have categories and then some images for these categories and then for the menu I have the name of the item description a price a category and then the image of that dish right so this is such as some sample data so we don't waste time you know trying to find sample data so the idea here is I'm gonna go ahead on the source and I'm gonna select menu right and let me reload this sheet because I deleted the two sheets that I had before so now as you can see those are no longer here after I refreshed it oh by the way guys I'm gonna be going a little bit fast because I already did an introduction series for glide apps you know if you're not familiar with glide apps and you want to catch up you know I'm gonna put a link in the description to a series like a small course that I made on glide apps which takes you step-by-step you know it's like a beginner guide basically so if I'm going too fast you know check that out first you know it's gonna give you a good introduction and then you can come back and everything is gonna make a little bit more sense but the idea here is I selected the source which is menu and as you can see all the menu items from the spreadsheet are now populated on this page now the next thing I want to do is customize the way that these items appear on the page right so I'm gonna go on layout and this is where we customize everything and for this style right so the style is basically the way that the data gets presented right for the style I'm actually gonna select list now the first thing that we need to configure is the categories you know because a menu right now we're displaying every single item in the menu right but it's better to have like a category page first where the customer is gonna select the category and then based on the category we're gonna display different menu items so actually the first page I should have created is the categories page so I'm gonna go back to my tabs I'm gonna create a new table and I'm gonna name this one categories and all the stores right so the source is gonna be the category sheet right this is where I have all my categories so I'm gonna select categories and as you can see it already updated here okay let me also change these icons because I don't like this um let's see what we have here so if I search for menu okay category know list what about the list actually now let me go with menu let's select let's go with this one yeah that's fine and then I'm gonna bring this I want this to be like the homepage you know subcategories right it's gonna be the first page on the app and I'm actually not gonna have a menu tab because the way I wanted to work is I want the the categories page to have different buttons that will lead to sub pages with all the different menu items and I'm gonna show you what I mean by that in a second so I'm gonna have a categories page right here and we have selected the source to be category so we get all the categories and now I'm gonna go back to the layout page and I'm gonna select tiles right so this is how I want the categories to be displayed right I want to have the category image you know stand out you know that looks nice and then on the data section here this is where we assign different fields from the spreadsheet right to the elements of the styling option so as you can see tiles has an image it has a title element it has a details element which is this thing right here right and as you can see title is assigned to the food category is assigned to this actually I'm gonna rename this I'm gonna rename to categoryname you know that makes a little bit more sense refresh there we go so now title is assigned to categories name right so this field right here details so this little thing right here is assigned to image right now but I'm actually gonna make this none you know I'm gonna make this empty because I don't want anything after that I just want the image and the title and then image is assigned to the image field on the spreadsheet which is actually a link right and by default Glide apps is able to take a link and convert it into an actual image right and all these images guys I got them from different different sources online you know so you just go to Google Images and I found some images and then copied their actual let me show you so if I go to Google let's search for breakfast you know so you go you find an image that you want and then you open the image in a new tab and then you copy this link right it's important that you open it in a new tab so you find the actual source and then you copy that link and paste it on your spreadsheet right now the next thing I want to do so I'm gonna go down here to design and I'm actually gonna make this a little nicer so tile shape I can make this bigger you know yeah it looks nicer and then I'm actually gonna scroll down and I'm gonna make the text style to be an overlay right so this that it is gonna put the text above the image because I don't really like this I want it to be above the image and I'm actually also gonna make the text bigger like that and I'm gonna make it all cups just like that and then let's see if there's an option to also make it bold because I remember there was an option to make it bold hmm I can't find it tech sighs that okay yeah I don't remember how to do it but I thought there was an option to make it bold it's fine if you guys figure it out let me know so so now the next thing now we have the categories page as you can see all the different category all the different categories of our menu are displayed here and guys by the way - this is all dynamic right so whenever you add a new category to your spreadsheet is automatically gonna appear on your app right within a few minutes after you make the change on the spreadsheet it's gonna appear on the app so let me go ahead and actually do this so I can create a new category and call it desserts right and then we're gonna go to Google here so desserts let's find a cool image that it's okay this one looks I think that's gonna work so opening new tab copy the link paste it here and now if we now because I want the the change to appear instantly I'm actually gonna manually refresh it but when you actually run your app you know after a few minutes is gonna refresh on its own as you can see it automatically are at bad category for us right so the next thing we need to do is add once the the user clicks on this Oh actually mmm okay so I already made this up before so it automatically worked but let me just delete everything so I can show you from scratch how to do this okay I think that's it really yeah okay so now when the user clicks on the category what we want to do is display a list as you've seen a second ago with all the items that are under that category as you can see on my menu sheet here I have all the items but then I also have a column called category so I assign each item to a specific category which is then gonna allow me to add that item in a list under a specific category right so what I'm gonna do on this page is I'm able to add new components right so I'm gonna click here and I'm actually gonna select an inline list right so this thing right here is a component it basically allows you to embed a small list on the page not really smallest like alike a list you know it can be endless items so we're gonna click on this and as you can see it added all the manual items under this page and the reason it did this is because as you can see the source here for this list is the menu items right so all these items right here under the menu sheet now that's correct because I want to display menu items on this page however what I need to do is filter this page so it only displays items under this specific category and the way I'm gonna do that is by going to features and then let's see I think it's filter yeah we're gonna add a new filter and we're gonna filter based on that items category right so based on the items category and the category is okay let me see how I do this over God okay so category is so now we need to find a way to dynamically add the the category category name to the filter right okay let me experiment here so alright guys so I had to pause the video for a second order to figure this out so actually we're not gonna be using a filter right we're not gonna be using a filter and the reason for that is because as you can see on the filter here if we filter by category we actually need to end manually enter a value so if I search for breakfast right it's gonna work however we want this to work for every single one of these categories and as you can see if I go here it's gonna give me the breakfast items because that filter is automatically applied to every single category and we don't want that we want every category to link to the - to the to the items under that category automatically right because if I go to features now as you can see category is breakfast because I entered that manually no so the way we're gonna do this the way we're gonna achieve this is not using the filter the way we're gonna do this let's go back to breakfast okay the way we're gonna do this is by going to this page right here called data now this page is really powerful because what it allows you to do is create relations if you know what a relation is guys basically what we're gonna do is add a new column and this column is actually gonna be hidden on our spreadsheet as you can see I added a new column to the what is this the categories sheet right here but it's not visible on the actual sheet this column is only gonna be visible inside the light right and it's a hidden column that's gonna allow us to create a relation so what I'm gonna do is I'm gonna name this category items right and what is what we're gonna do here is select the relation so the idea with the relation it allows us to basically do a search and find items in the menu sheet that much specific conditions and as you can see says configuration relate to items where the value in categories name so the value here matches the value in menu category right so again so you select what you want to relate to so you relate to items where the value in the category is on this sheet right so these categories are the same with the items in the menu sheet that have a category set to that I'm probably saying it in a very weird way but let me let me do it again so category items so column type relation categories name matches value in menu category and as you can see it automatically found some of these some of some of these items in the menu sheet however we we have more than one items let me click done so it doesn't get deleted let me go back to menu as you can see we have more than one items for example on on salads and snacks right we have one two three items under that category and here it only found salads and snacks it only found one so what we need to do let's go back to edit we actually need too much multiple right and as you can see now it has it has found all the different items under this category right all the different items in the menu under the specific category I hope this makes sense guys this quote let's call the relation and for desserts because we don't have any items on the menu under the categories the categories under the desserts category it doesn't find anything but we can we can test out later we can add some items under this category so now what we can do is go back to layout go to our inline list and by the way guys we are within a category so you can select any category you want it doesn't matter you know the the inline list is part of all the categories and then here what we need to do now on the source we need to select category items as you can see it has created a new a new option for us a new source you know which is what we did on the data page right here we created a new column called category items and it automatically detected it under the source here so when we select this as you can see it has filled automatically filtered out the items under this category and it basically just pulls the items from this column right here right so this is the inline list and now if we go back to another category if we go to this one as you can see these are the items under the snacks and salads salads and snacks category so that's correct so now let's customize this list a little bit so let me get rid of this title I don't like that perfect and then we can also customize the style of this specific list so I mean the inline list not this specific one on this page I mean the inline list under each one of these categories so what I'm gonna do is I'm gonna select tiles once again because I think that looks cool and I'm not gonna put an overlay because I want the customer to be able to see the at the image of the item and I'm actually gonna make the tile shape 3 to 2 ratio and yeah that's pretty much it I think that looks good let me see what kind of data do we have here oh we also have the price so what we could do instead of having this description so this is basically the description of the item and I think that most menus they have the price first and then you can get more information later on about the item so what I'm gonna do here on the data section instead of having the description right there I'm actually gonna put the price I think that's more like common you know you get the price first and then when we click on this item now as you can see we can have a new page with more information about that specific item right so what that's what we're gonna do next so here we're gonna display the items title right the add the items name and then the items price let me see if this looks better now it's too big yeah I think that that's fine also what you can do is experiment with these type of overlays right here so these are not the same as the text overlay that we seen earlier these are more like let me see so if we go to tag and select the price as you can see that's the price right there so if you like that you can go with that [Music] caption let's see what this is alright okay so we could add title there maybe so the name sorry no I don't like that I think that looks best anyway so now when we click on this we want to display more information about this this specific item so the source column here is gonna be what's a source column alright so for the title okay so the title yeah so the title is this thing right here guys the title of the page is gonna be the name of the item and then we were able to add new components to this page so I'm gonna click here and I'm gonna add this title component right here which is a really cool component that basically it basically allows you to have an image and then on top of the image you can have the items you can have as you can see here a title and then details right so that right there and then the image is of course the image on the background so I like that but I'm actually gonna make the details to be the price and then what we can do below this we can have another component with the actual description of the item I'm gonna go with the let's go with text this text component and the stores column for this is going to be the description right so I mean I have a really basic description here but let me just add some round text just to make it larger okay so let's refresh as you can see this is what the description is gonna look like you know when you have quite a bit of writing there and there's so much you can do here like you can have another another section another field in your table here with like specific features of this dish you know so you can have like ingredients or whatever you know there's so much you can do but yeah the idea here on this page you would have all the information about this specific item you know so the the person can read more about it so that's pretty much it yeah so now guys the cool thing about glad is that it automatically applies this template to every single item as you can see here is the same exact template and this is also applied to every single one of these right so as you can see here this is our burgers category we'll click on this we get all the items you know we didn't have to configure the same thing again on every single one of these you know like the inline list we created is here and then when you click on this we get the same template we created for breakfast right so it automatically applies everything to all the items and all the categories you you have right so whenever you add a new category and a new items to the category it's automatically gonna apply all the templates you have created for every single one of these items right so there we have it guys this is our categories page right and another cool thing is that we didn't have to create multiple tabs you know we only have one tab here called categories and the user can literally just go through this and select which items they wanna order and there we have it guys we have now successfully created a restaurant up with a nice interactive menu that the customer can browse through before placing the order and also the restaurant owner can very easily update this menu when I they need to through the spreadsheet now the next part of the series which I'm actually probably gonna release tomorrow we're gonna go through creating a page where the customer can make a reservation before visiting the restaurant right so that's another useful feature so stay tuned for that by subscribing to my channel so you get notified when that video is released and also guys if you're interested in leveling up your skills when it comes to building apps with no code I'm actually gonna put a link in the description to a full course that's on my Academy that will basically help you master app development so you can build really powerful apps without writing any code make sure to check that out and that's it for this video thank you so much for watching make sure to hit the thumbs up button if you found this video useful and I'm gonna see you on the next one