How to create a mobile app without coding (Full Tutorial): Free Tool..

 

In this tutorial I'm going to show you how to create a beautiful looking mobile app without having to write a single line of code in just a few minutes using a free tool called glide apps with glide apps you can create all kinds of Apps for project management education training productivity health tracking finance company dashboards and more that will run on both android and IOS Devices so how does it work glide apps simply adds a mobile app like interface to a google spreadsheet the app itself is simply a website that looks and feels exactly like a native app so who is glide apps for anyone that wants to convert a spreadsheet into a beautiful mobile app in minutes without Coding I've used glide apps to create three awesome apps an app to learn grammar where I  organized all grammar rules from grammarly.com into an app a mobile version of tim Ferriss book drive of mentors where I can easily search and find all the mentors listed in the book together with their answers to tim's questions and an app with a searchable list of all mental models from Farham street's Website alright let's build an app for this example we're going to create a task tracking app the fastest way to get started is to choose an existing app template from glide apps template marketplace and then customize it we go to solutions we can see all the Templates on glide apps marketplace and we're going to choose planning and then task tracker and we can preview the template and see exactly how it's going to look as an app either in an apple or android phone and then what we're going to do is just copy the template and that's going to open the template on our account and literally we already have an app that is fully functional we could share it and publish it and it's going to generate a qr code and also a customizable URL now if you want to have your own custom URL  you have to upgrade but you Could change this to my app and then make sure that it's available and then you can send it directly to your phone as well so it basically takes about 30 seconds to create an app which is really cool of course this is not the final app that we want so we want to customize this and before we do that I 'm going to give you a quick Tour of glide apps features so we have a menu on the left with several options the first one is layout and that's going to help you customize the look of all the screens in your app so right now we are in the categories tab and you can change the layout by making it compact tiles you can make it into a calendar a map a checklist cards details and now we have tabs which are the icons at the bottom which can you can also customize their look you can click on any of those icons and then you can change the actual Icon and put whatever you want in there then you have the data the data is simply the data extracted from your google sheet and you can see it here and now you can Edit the content and then you can add more columns if you want to then you can preview your app as if it was inside an iphone or a android phone then you can set the settings here where you can change the main color of your app uh leave it as red as our main color then we can edit the source google sheet and here's where we can add more tabs add more content delete content and then as you can see there is a correlation between the tabs on your Sheet category projects tasks and choices and we go back to glide apps user interface you can see the tabs correspond to the tabs on your spreadsheet except the last one by default it will take all the tabs and make them into tabs in your app but you can always edit Them under tabs so here we have three tabs if we wanted to add another tab from the spreadsheet then we can create a new tab give it a label and then choose one of the four available tabs in this case all of them are represented except choices because we don't really need that one and finally we have a reload sheet button and all it does every time we change the Content of our original google spreadsheet it will update the content in the app all right so let's customize this app a little bit most of the work you're going to be doing is under the layout tab here and this allows you to change the look of all the screens on your app let's say I want to change this to tiles I want to make the original categories bigger and I want to change also how the images look okay so on the right hand side we have menus with all the things that we can change right now the title is being grabbed from the category column in our spreadsheet the details it says is the category image but we don't want the URL to an image there we could have here either nothing or a different column that we can create and then we have a category icon but let's say we want instead of an icon an image and it just happens that our spreadsheet and their categories they already have a category image so we could select that and there you go now we've done our main page with our categories a different look and I really like it there are a lot of more customizations you can change the title the tile shape make it square or you can make it a circle there are Different aspect ratios and you can select how Many titles per row there's a lot of customization you can have here let's keep it at three by one now let's change the next screen if we wanted to so now every time you click on a screen the menu on the right is going to change and it's going to be the menu that allows you to change the layout for that specific screen so in this case the components that We have right now are a title a form button in an inline list that lists the projects under this category if we go to the actual project in this case this birthday and at any time this is the beautiful thing About glide apps you can rearrange anything let's say I want the action test higher up I can change it there or if I  want the form button at the bottom I just can drag it and drop it to whatever location I want to and this will be changed for all the other projects because this is just a template a layout template that we can easily edit now we can delete any of the items as well let's say I don't want the list relation so I  could just delete it so that takes care of doing custom layout modification next we're going to learn how to add components to our app so let's say we want to add a new component there are many components that you can add to your layouts from text media buttons lists different input fields charts pickers in this case I'm going to add a Link I click on link and now at the bottom of my screen there's a link component now we have to Select where the data is coming from right now it's just picking one of the columns available in our spreadsheet but we want to create a new column so we're going to have to go under data and then projects and create a new column called link and then we can select what step of type it is in this case we're going to select basic column and then link we click done we can edit it and enter a link so for Tisha's birthday there should be now Data that we can pull for a new component called link so here we can go and click on link and select the new column that we created which is called link and we can decide how the link shows up is either the page title or the Actual link or a short URL let's say just sort URL and now we can rearrange it we can put it whatever you want to in our screen and this is a functional link that we can click on it and it will take us to whatever that link is pointing to so let's say we want to add a project count under each category so under the title here personally it would say how many projects are under the personal category and then let's say we want to add another counter of how many tasks are under each project so to do that we have to modify The source spreadsheet so we go to the source google spreadsheet and under the category tab we will have a new column called project count and then we will have to enter a formula that goes to projects and counts how many projects belong to each given category now for that I already have a formula that you can copy if you want to but Basically it's going to calculate how many projects are under each category now you can see because I'm using this formula which is a array formula it's done this for all the available rows which is there's almost like a Thousand and when we go back to our test tracker app here in glide apps and we refresh it says storage for this app is full some items may not be displayed and the reason why is because the free version has a limit of 500 rows so that's not a problem what we have to do is simply delete all these rows that don't have any content we delete them and now we're only using three rows so when we go back to our test tracker app and we reload the sheet we won't have that problem anymore okay so now we're only using 29 rows out of 500 but we want to add the counter here so  we go to data and under details we're going to select our project count and right now we have exactly what we're looking two projects three projects two projects under each category we can do the same thing under projects you want to show the amount of tasks under each project we could go back to the sheet go under projects add a this specific formula here and now we have a formula that is counting the tasks under each project we would delete all the extra rows that we don't need to and then when we go back to our app we can see that The task count is not appearing what we do is reload the sheet and once it's reloaded we can go to the description and we'll see the task count and now we can see how many tasks are under each project so this is a simple way of customizing your app we're going to talk about computed columns before we use a custom column Using a fairly complex formula in order to calculate how many projects are under each category now the great thing about glide is that they have many different ways to create calculations on columns and they call these computed columns and there are many different types of computed columns we're not going to go over all of them and you can always go to docs.glideapps.com to learn how to use all the different features that glides have to offer now to replicate the same behavior of this formula we can use a combination of two computed columns the rollup Column and a template column so if we go back To our app and we click under data click on add column we're going to create a new column that counts how many projects are under each category we're going to call this count and we're going to select the rollup type of column and we're going to Summarize the values inside the relation column Called project and the category column and we're going to calculate the count we click done and you can see it counted how many projects there are under each category the same way that the formula Did the problem is that this is not  formatted the way we want to we want it to look exactly like this open parenthesis the number close parenthesis and then projects and for That glide has a different type of column which is called the template column so we click add column we're going to label it projects count 2 and the column type is going to be Template and now we can enter the template which in this case is going to be open parenthesis then we're going to enter text which is going to be replaced with a count value and this could be any text that you want to in this case I'm going to call it number and then projects now we go to Replacements we enter the value that we want to replace which is going to be number and we decide what this value is going to be replaced with which is going to be the count column we click done and as you can see we were able to replicate the same thing that we did with the formula using glides native computed columns we go back to our app go to layout click reload sheet and now when we go to details we can Select our new column which is called called projects count two and we get the same behavior without having to enter complex formulas how cool is that let's say we want to have an indicator that tell us which projects are overdue for that we can use a conditional column if we go to data and click on add column we can create a new column called overdue and then we're going to Select column type if then else which is a conditional column and there we're going to select that if the column due date is before today we're going to enter the value Overdue click done and you can see there are two projects that are overdue now if we go back to our layout we don't see any indicator telling us That so we can change the layout to tile and if we scroll down we can go to tag and select the new tag overdue and now we can see which projects are overdue with that Indicator let's say we only want to show the projects that are overdue for that we can use filters if you go to filters and click add filter now we can select the column we want to filter by in this case it's going to be the overdue column and we only want to show the projects which value for the overdue column is Overdue and we can see now we only see the overdue projects the other way of doing filtering is allowing users to do the filtering Themselves and for that you can go to in-app filter and then select by which column you want the users to be able to filter data so in this case it's going to be by the Overdue column and then this little filtering icon appears when the user clicks on it they can select the value they want to filter by in this case there's only one overdue click done and only the overdue projects will show this filter could also be any other column like status in which case when they click on the filter they can filter projects by status for example if they just want to show the completed projects they click on Completed done and only the completed projects will show up let's talk about relation columns this is a very important concept because you're going to be using a lot creating Apps now as you can see under categories when I click on any category it lists just the projects under that Category but how do you create that relationship somehow we're creating a relationship between the categories and the projects glide apps has made this a very simple to do if we go to data we can see that there is a column called projects here that is not available in the source google sheet you can see it's not there and it's here and the way it works if we go and edit it we can see this is a relation type of column and what it's doing is Relating the values under the category column here on the left with the values that match the value of that category under the projects sheet so for this relation to work the project sheet needs to have a column called category and the values of those categories have to match the values under the category column in the Category sheet so if we go to projects we can see there is a category column with values that match the categories if we delete this it won't work let's just delete it it's deleted now we go back to the Categories page and when we click on it nothing is Listed because we deleted that relationship so if we want to restore it we have to go back to data add a column select a column type relation select which column we want to match in this case it's category and then we're going to match it under projects category let's give it a title and then the other option is we want to make sure we match more than just one because there can be several projects under one category if we don't check match multiple it would only match the First project that matches a given category now so we check match multiple and we can see now all the projects that match the specific category are going to be listed as well we click done we go back to our layout so if we go under any category we can see still nothing is listed we have to go to The right hand side click on create new component and then we're going to scroll Down until we see inline list and by default it's automatically detecting we have a relation column and it's listing the projects that match the criteria that we set in this case there's two projects as we can see there are under the personal category and we can verify this under data and if we go to projects there should be two projects one and two thesis birthday and new patio that match that category and as we can see that it's done that correctly and it will do the same thing for all the other projects and we also have a relation column under projects because we want to match all the tasks under each project so if we go to data and we go to Projects you can see here that under tasks we have a relation column that is matching the project names with the project column under the task sheet and we go to the task sheet we can see there is a column called project that matches the values under projects when you're done creating and customizing your app and you want to publish it just click on the share Button and here you can change the app link if you want to have a custom link you will have to upgrade your account you can also share your app using this qr code or send it to your phone or anybody's phone in this case i'm just going to copy the link and then i can open the link on my browser and in the browser the app is fully functional so you can go and start playing with it and now let's open it in the phone and install it to see how it would look like it shows up as an icon like any other app just tap on it and as you can see it works Fantastically Well so this entire tutorial has been created with the free version of glide apps now for 19 per month pair app you'll be able to have more rows of data more storage more map pins and the transaction fee for anything that gets Purchased through your app will be 2 instead of 10 you'll also have the ability to remove the glide branding use your own custom domain have a branding login and extended icon Set and in terms of security you'll also have email-based access control which means people will be able to use their email address to enter your app you'll also have single sign on you'll be able to use google analytics g suite shared drives and then you'll also have on top of community forum support email support so it's not the cheapest solution but really if you were to try to create your own app coding or hiring somebody to do it. It would cost you many hundreds of dollars if not thousands of dollars to create a similar looking app and that's it I hope you enjoyed learning how to create a beautiful mobile app using light ups and if you want to see more tutorials like this make sure to like this video and subscribe thanks for watching bye