Make Mobile Apps Without Coding | Miguel Hernandez | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Make Mobile Apps Without Coding

teacher avatar Miguel Hernandez, Founder of Grumo Media

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

13 Lessons (21m)
    • 1. How to Make Mobile Apps without Coding - Intro

      0:53
    • 2. Create your first app

      1:26
    • 3. Quick tour of GlideApps

      2:18
    • 4. Customize your app layout

      2:34
    • 5. Understand layout components

      1:32
    • 6. Create custom columns

      2:28
    • 7. Create computed columns

      2:37
    • 8. Create conditional columns

      0:58
    • 9. Learn to filter data

      1:12
    • 10. Understand relation columns

      3:19
    • 11. Publish your app

      0:44
    • 12. Free vs Paid plan on Glide

      0:46
    • 13. Project - Create your own app!

      0:14
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

57

Students

1

Project

About This Class

In this course you will learn how to make a beautiful mobile app without coding using a free app-builder called Glide.

Miguel will walk you step-by-step through the process of creating a sample task-tracking app that will work on Android and iPhone mobile devices.

Are you ready? Let's do it!

Meet Your Teacher

Teacher Profile Image

Miguel Hernandez

Founder of Grumo Media

Teacher

Miguel is a passionate online instructor with 30,000 students and the CEO of Grumo Media where he has produced marketing videos for some of the top Silicon Valley startups including clients like Microsoft, Walmart, Fidelity Investments, Reckitt Benckiser, Hipmunk and even Ashton Kutcher. Check his work at http://grumomedia.com

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. How to Make Mobile Apps without Coding - Intro: In this course, 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 glade apps, you can create all kinds of apps for project management, education, Srini, productivity, health tracking, finance, company dashboards, and more that will run on both Android and iOS devices. So how does it work? You laid out 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? For anyone that wants to convert a spreadsheet into a beautiful mobile app in minutes without coding. By the end of this class, you'll learn how to create and customize I fully functional task struck in app, which will work on any Android or Apple mobile phone. Are you ready? Let's do it. 2. Create your first app: All right, 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 app's template marketplace and then customize it. We've got a 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 that 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 copy the template and that's going to open that 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 it. 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 light apps, features. 3. Quick tour of GlideApps: So we have a menu on the left with several options. The first one he's 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, might make it compact tiles. You can make it into a calendar and map exactly scars data. And now we have a tabs, which are the icons at the bottom, which you can also customize their look. You can click on any of those icons and 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 an Android phone. Then you can set the settings here where you can change the main color of your app, live it as red as our main color. Then we can edit the source Google Sheet. And here's where we can add more tabs and more content, delete content. And then as you can see, there is a correlation between the tabs on your sheet, category, projects, task and choices. And we go back to glide apps user interface. You can see the tabs correspond, the tabs on your spreadsheet except the last one. By default, it will take all the taus and make them into dabs 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 dab, give it a label, and then choose one of the four available tabs. In this case, all of them are represented at your step except choices because we don't really need that one. And finally, we have a reload button and all it does every time we change the content of our original Google spreadsheet. It will update the content in the app. 4. Customize your app layout: All right, so let's customize this 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 and bigger. And I wanted 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 details it says is the category image, but we don't want that URL to an image there. We could have here either nothing or a different column that we can create. And then we'd have a category icon. But let's see, we want instead of an icon and image, and it just happens that our spreadsheet and their categories, they already have a category image, so we could select that. And there we go. Now we've done our main page with our categories and different look, and I really like it a lot more conscious customizations. You can change the title, the title shape, make it square, or you can make it a circle. Different aspect ratios. And you can select how many dipoles per roll. There's a lot of customization that you can have here. Thus give me that three by one. Now this change to the next screen if you wanted to. So now, every time you click on a screen, the many underwrite is going to change. And it's going to be the menu that allows you to change the layout for that a specific screen. So in this case, the components that we have right now are at AIDL or form button in an inline list that list a VIP projects under this category, we got to the actual project, in this case, DCIS birthday. And at any time, this is the beautiful thing about glade apps. You can rearrange anything. Let's say one. The action tests 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 end. 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 as a11, that is relations. 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. 5. Understand layout components: 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, list 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's coming from. Rhinos 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 the basic column and then link. We click done, we can edit it and enter a link. So for t-shirts birthday, there should be no data that we can pull for a new component called link. So here we can go and click on a 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 title or the actual link or a short URL with, let's say just sort URL. And now we can rearrange it. We can put it wherever 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 downlink is pointing to. 6. Create custom columns: So let's say we want to add a project count under each category. So under the title here, personally would say how many projects are under the personal category. And 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 sources 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 eat giving category. Now for that, I already have the formula that you can copy if you wanted to. But basically, it's going to calculate how many projects are under each category. Now you can see, because I am using this formula, which is a ray formula. It's done this for all the available rows, which is there's almost a thousand. And when we go back to our task tracker app here in glad apps and we refresh. It says a 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 brown or 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 we go back to our task tracker app and we reload the sheet. We won't have that problem anymore. Okay, so now we're only using 29 rows that are 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 were looking to. Projects, three projects to projects under each category. We can do the same thing under projects, you want to show the amount of task under each project. We could go back to the sheet, grander projects at a specific formula here. And now we have formula is counting their tasks and they're each project. We would delete or 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. And 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. 7. Create computed columns: We're gonna talk about competed 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 light is that they have many different ways to create calculations on columns, and they call this computed columns. And there are many different types of computed columns. We're now going to go over all of them. And you can always go to dogs dot glide apps.com to learn how to use other different features that guys have to offer. Now to replicate the same behavior of this formula, we can use a combination of two computed columns, Roll-up column and a template column. So 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, and you can see 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 parentheses and then projects. And for that light has a different type of column, which is called the template column. So we click add column, we're going to label it protects count two and the column type is going to be template. And now we can enter the template, which in this case it's going to be open parenthesis. Then we're going to enter text, which is going to be replaced with a counter 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've got a 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 down. And as you can see, we were able to replicate the same thing that we did with the formula. You seen, 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? 8. Create conditional columns: Let's say we wanted 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, overdo. Click done. And you can see there are two projects that are overdue. Now we go back to our layout. We don't see any indicator telling us that. So we can change the layout to tiles. 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. 9. Learn to filter data: Let's say we only want to show the projects that are overdue. For that we can use a filters. If you go to Filters and click Add Filter. Now we can select the column we want to filter by, in this case is going to be the overdo column. And we only want to show the projects which value for the overdo 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 their feet during 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 overdo column. And then this little filtering icon appears when the user clicks on it. They can select the value of the one to filter by. In this case, there's only one overdue clicked on and only the overdue projects will show. This filter could also be any other column like status, in which case, where they click on the filter, they can fill their projects by status. For example, if they just want to show the completed projects, they click on completed, done, and only the computer projects will show up. 10. Understand relation columns: Let's talk about relation columns. This is a very important concept because you're gonna be using a live creating apps. Now, as you can see under categories, when I click on any category, it a list, 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. Glade Apps has made it very simple to do. If we go to data, we can see that there is a column called projects here and that is not available in the source Google sheet. You can see is not there and it's here. And the way 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 a big value of that category under the projects Sheet. So for this relation to work, the projects Sheet needs to have a column called codec R3. And the values of those categories have to match the values under the category column in the category sheet. So we gotta projects. We can see there is a category column with values that match the categories. If we delete this, it will work. Let's just delete it, it's deleted. We go back to the categories page and we would 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 at a column, select a column type relation, select which columns we want to match and discusses category, and then we're going to match it and their projects category. Let's give it a dipole. And then the other option is that we want to make sure we might have more than just one. Because there can be several projects under one category. If we didn't check match multiple, it would only match the first project that matches a given category. Now so we check Madsen multiple and we can see now all the projects that might 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 a still nothing is listed. We have to go to the right-hand side, click on Create New Component. And there we're going to scroll down until we see in late list. And by default is automatically detecting We have a relation column and is listing their projects that match the criteria that we set. In this case, there are two projects, as we can see, there are under the personal category and we can verify this under data. And if we got a projects, there should be two projects, 12 S 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 task and they're each project. So if we go to data and if we go to projects, you can see here that under tasks we have eight relation column that is matching the project names with their project column under the task sheet. And we've got other data sheet. We can see there is a column called Project that matches their values and their projects. 11. Publish your app: 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 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 on 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 it is open it in the phone and install it to see how it would look like. And as you can see, it works fantastically well. 12. Free vs Paid plan on Glide: 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 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 it is open it in the phone and install it to see how it would look like. A shows up as an icon like any other app. Just tap on it. And as you can see, it works fantastically well. 13. Project - Create your own app!: Your project for this class is to create your own task tracking app using the steps showing this course mixture to customize the layout and overall look of your app to your liking. Happy app building.