Gamify Glide Apps Reboot #1: Onboarding & User Profiles

hey everybody this is bob from medtechify and today we are going to be gamifying glide apps now if you subscribe to my youtube channel you already know that i've created the video series on gamify and glide so why recreate the content and that's because i created that video series over a year ago and glide has come out with some pretty cool features since then so it warrants a reboot but in this video series i'm gonna be showing you some new tips tricks some advanced logic to make your glide app truly efficient and shine so without further ado gamifying glide apps episode one [Music] so to get started we're gonna head over to go.glideapps.com and we're going to sign in with a google account we want to use to be the admin for this app afterwards we're going to click on new app and we see that we have two options now we have google sheets or glide tables there are drawbacks and benefits to using either of these google sheets is a little laggier than using a glide table but it allows for copying and pasting data sharing that data with somebody else if they want to go ahead and help you out with the app it also works for bulk import of content as well and it's a familiar environment right glide tables super efficient you have great performance and it allows you to link glide tables between apps which is awesome but you can't directly import data or copy and paste data quite yet so i'm going to start with a google sheet but i might be using glide tables along the way now before i hit continue here i'm going to go ahead and make sure i have a sheet set up so i'm going to go over here to new tab do sheets dot new and then name this gamification version two all right before i import this spreadsheet as part of the app i'm gonna get it set up a little bit the very first thing i do when i create this spreadsheet is always create the users tab right so because i'm going to have my users sign into this sheet i want to make sure this is all set up and ready to go now to have a user profile in an app you need to have three basic criteria you need to have a name in this case it's going to be the username you need to have an email so i'll say email here and i'm going to type actually everything in camel case but use whatever the notation you'd like right so email uh username and then i'm gonna have their profile picture [Music] avatar something like that now in addition to this i'm going to be asking for a few things along the way things that i already know i'm going to have be associated to this user for example their class their guild you can ask for their date of birth if you'd like if you have student id numbers you could do something like that and then part of the onboarding process i'm going to be asking for a time stamp when the profile was complete so i'm going to say something like profile completed on i always freeze my first row and that's just coming over here above the one find a little hand icon click and drag down below the one to freeze that first row and again the benefit of that is because if i scroll down to like the you know 300th row i still see my headers on top and it just lets me see a nice visualization that this is the header row and everything else below is the data i think that's good for now for the users but since i am asking for class information i'm going to go ahead and create a sheet called classes and part of the classes here i'm going to have the class name maybe an image for the class maybe a description and then maybe some stats and i already have these stats available i'm gonna go ahead and just drag them on in again this is the benefit of using a google sheet is that you can copy and paste information right i wouldn't be able to do this with the glide table quite yet freeze my first row all right so i'm gonna have four classes warrior hunter mage and healer each have their own different types of stats i have an image associated with them and a description okay last thing i do here for the users tab is like to pop my name into the email address here that way when i go to start the app then it already recognizes me as being signed into the app this is basically mocking that i've signed in all right so now that these two tabs have been completed i'm going gonna head back to the glide app and then choose google sheets continue i'm gonna look for that spreadsheet gamification version two it should be right on top hit select and glide's gonna do its best to create this app for me now you see that i already have a users tab here and a classes tab i might show the classes tab at some point right for now i'm just going to drag it to the menu and then now you see that a little menu icon appears here and with my classes and i'll touch that screen a bit later okay so today what we're going to do is we're going to create our onboarding experience that's eventually going to create that user profile and along the way they'll select which class they'd like to be as part of our gamification experience so the first thing we have to do when we dive into our app here is set up user profiles it's always the first thing i do because so much more of the app we're going to develop it hinges on the fact that we have user profiles set up so to start that off we're going to come over to the gear at the top here this brings open our settings panel on the right hand side and from here we're going to select privacy for public sign in we're going to switch it from public to public with email setting it to public with email forces the user to sign into the app with an email address now there are two ways to authenticate into a glide app the first way is just via their email address so they'll type in their email address their email address will receive a pin they type the pin into the app and then they're in the second way is to authenticate with google and so if you want to authenticate with google just check the box allow sign in with google account now the one caveat to all of this is that all free and basic apps anonymize the email when the user signs in meaning it's going to create a fake email address and that's what's going to be populated in your google sheet you're not going to see the actual user's email address if you want to collect the actual user's email address you would just select collect real user email addresses here but you see that it's going to force you to upgrade your app to a pro app there are so many benefits to upgrading to your pro app and if you want to save a little bit of money you can pay yearly it's only 24 a month at that case but i know that budgets are tight so if you can't afford a public pro app just know that you're going to have to have anonymous emails in your app okay so that was step one just making sure that we set our privacy to public with email so our users are actually signing into the app okay the next thing we have to do is define the user profile sheet so that way glide knows which sheet in your google sheets is going to house the user profile information okay to do that it's a little bit hidden but it's completely necessary what you're going to do is come over here to the layout view of your app you're going to click the menu icon in the app and then click somewhere here in the top left corner either the avatar or the email address that you see here and then you'll see that this user profile screen appears and on the right hand side it's going to ask you which sheet should house the user profile sheet so i'm going to click sheet click users and you see it's going to pop in some information for me automatically it found that usernames name emails email and profile picture is image awesome okay i'm going to hit close okay and now our user profile sheet has been set up okay the next thing we have to do is create our onboarding experience so to do that i'm going to create a new tab so in the left-hand panel over here next to tabs we see a little plus button i'm going to click on that add see it creates a new tab for me i can click to rename it or i can rename it over here in the right-hand side either place i'm going to call this just welcome okay whatever you name the tab that's what's going to appear at the top here so i like to show welcome as our onboarding tab but if you want to you could say something else right hey and this tab is going to be a details screen because we're going to create the components that should be part of this welcome experience and the first thing we have to do on this welcome screen is make sure that the person who is viewing this screen is the signed in user right so i'm going to come over here to options filter and we're going to filter where the email is the signed in user like so all right so now this tab is being filtered by the signed in user which means if i sign in i see my stuff and if somebody else signs in they see their stuff all right and from here we're just going to start asking them some questions to fill out their profile okay there's a variety of ways you can do this but the number one component you're going to use is the text entry component okay so i'm going to look back at my sheet here i see that i have to enter in the email that's already been filled in for me so they're going to choose their username they're going to upload a picture they're going to choose which class they belong to just those three things for now all right so if i want to display some sort of information here at the top i can create some text components i could do something like custom and then choose you know looks like you're new here okay i can choose what kind of headline i want can even give a nice little waving emoji hello i like that okay um and then i can add another text component here underneath that says something like [Music] let's complete your profile [Music] i'll make that a smaller headline okay i could have optionally done this using rich text component as well to show you what that looks like over here rich text i'm going to copy this line here from the text i already did and in rich text i can come over here to custom and this allows you to use markdown language if you're not familiar with markdown language get used to it because it's super fast and super handy basically it gives you all of the wysiwyg editor information like bolding italicizing making things header make underlining things right just using characters so um a headline three for example is three pound signs or hashtags followed by whatever text you want okay then right underneath it i can do a headline four with the let's complete your profile see that so i get the same experience but i only use one component instead of two so now i can trash those top two components and i get the same experience here so learn markdown it makes your life so much easier all right so now that i've prompted them to complete their profile let's actually have some fields where they can complete their profile i'm gonna add a text entry component in order to capture their username and i'm going to name this what shall we call you for the placeholder i could say something like enter a username if you want to have a set of minimum length or a maximum length you can that way your users aren't going to spam your usernames right so minimum length you know one maybe two and then max length give him like 25 characters something like that right uh and then we also want to check to make sure that there have been no other users of this name right so to do that i'm going to come over here to our data editor and what we're going to do is we're going to check against any other username that already exists all right to do that i'm going to actually create a fake email address here i'm going to say test email.com and i'm going to give them a username of username okay then what i'm going to do is i'm going to create a relation column that's going to relate the username to all of the user names to check against if it exists right so to do that i click up the plus button here i'm going to call this rel usernames rel stands for relation and here i'm going to relate the username to the user's username field and basically relating it back to itself okay and then i'm going to match multiple all right so if a username already exists that means that if someone were to type in the word username you see i have both are named username how i get two results here and so this number of having more than one match is what i can use to determine if a username already exists to capture the number of matches we need to add a rollup column so i'm going to add a plus button here and i'm going to call this count usernames column type will be a rollup and the configuration will be the rel usernames and then capture maybe the email address of count okay and you see here that it found two of them so this is the number i'm going to use that say hey if the number is two or more that means the username already exists you see that if i change this username to anything else like username four you see now only one exists okay i'm going to delete that all together for now head back to my app okay what should we call you and so now i'm gonna add in a hint component some hint text here the mood will be a warning the title will be oh no and the text will be that username already exists please select another okay now this text should only appear if that count is 2 or greater so under the options under visibility i'm going to choose where count usernames is greater than or equal to 2. all right so let's test that out if i type in anything like username it doesn't find the match but when i choose username because it already exists then i see the message i can pick something different like username one right but in this case [Music] we now have a username field cool okay we also want to capture the profile picture so to do that we're going to do an image picker so search for word image image picker and this should write to the profile picture field and the title should be um upload an avatar or profile picture i'll let them use the camera or photo roll okay and the last thing we're going to have them do is select a class now there's two ways to do this we can do the easy boring way or we can do the more advanced but fun way i'll show you both the easy quick and dirty way is just to add a choice component so i can click over here on the component list type the word choice here it is my sheet values are going to be the classes sheet the values be the class name right and then the column will write to the class column here and so now and we can make it required so now they can pick one of the four classes and then they can have a button that says like complete profile we'll do that in a second but you see that with the choice component you don't really get a feel for what these four classes strengths are right maybe they want to evaluate what these four classes are before making a informed decision so if you want that then the advanced way which is a lot more fun is to add a link to screen button let me show you what that looks like so instead of this choice component i'm going to add a button [Music] and this button instead will say select a class now we want this button to direct them to the classes sheet but we don't want to just have them visit the default classes sheet like this because maybe we want to save this for just like a directory of all the classes we want to go to like a specific like class selector experience so for that we need to use a link to screen action so on our button component the action will be a link to screen and this link to screen will be the classes sheet and here we're going to name it select a class i usually name the title for the link to screen the same thing as the button so that way when they push the button now we are on a link to screen of the classes but what's nice is that this is a different experience than just the view details or the of the tab experience and what might be kind of fun is to use glide's swipe feature so i'm going to go over here to swipe and you see that when i do that i now get these swipeable cards they can swipe through the different classes and make an informed decision about which they want to view which ones they want to be and from there they can select so to do that is a little bit of a complicated setup in the background but it's super doable the first thing i want to do is get rid of this search box at the top so i'm going to click on inline list and under options uncheck show search bar okay the next thing i want to do is set the swipe condition here so you see the data says save last swipe we need this in order for them to actually be able to swipe through the cards you see until i do that i'm not clicking anything i can't click and drag right so i'm going to come over here to my data view you can see you can go to the data editor on here or i can come over here to the data section next to screen and i can add components or sorry i can add data columns right from here so i need to add a user specific date column because that's what the swipe layout requires so i'm going to hit the plus button i'm going to add a date time column i'm going to make it user specific it's going to prompt me to add a row id that's fine add row id and i'm going to call this swiped and then done and so now back on my screen i'm going to inline list and the save last swipe will now write to that swiped date time column and see now once i've done that now i can swipe through my cards all right let's make this look a little prettier so the title is fine maybe you want to make it make it a card layout like this or you can make like a profile layout like that um note this will be circular it'll kind of cut off but completely up to you so maybe the card layout's nice uh or you can just do an image so kind of play around with it and see what you'd like here make it a one-to-one image maybe make it in set okay and you see that it has basically the same layout here without all of the overlay so if you like the overlay go with the title component okay otherwise you can just use the image here all right from here maybe i want to show the title so i can use a text component and here's the class name let's make it nice and bold in the center make it bigger bigger there we go mage uh give him a description so i'm just gonna duplicate this text and make that the description but let's make it uh regular and place it underneath the class name cool maybe make it smaller footnote that's pretty small it's too small and then lastly let's do a basic table to show the stats here's my basic table and i have three class three stats i have attack armor and spell so i'll do attack armor and spell and you see how that automatically fills it in for me i see how it's kind of running down the card i don't like that so i'm gonna make my image a bit smaller here so instead of doing a one-to-one image maybe i'll make it like a three to two image but then i'm going to show the whole image like that all right so this looks good so they can swipe through look at that looks cool all right then the last thing is to have them be able to select this class and then go back to the onboarding experience right so to do this we need a compound action and we need to have a little bit of a data set up in the back end so from here i'm going to go to the data table this brings me right to the classes sheet and here i need to make a relation back to the user sheet so that way when they select or push a button it's going to make it's going to select the value of the class and then bring you back so to make a relation from a list of options that have nothing to do with the user profile to the user profile we need to use a template column to grab the user's email address so from here i'm going to add in a template column i'm going to call it user email i'm going to type the word our letter e where e is replaced with the user email so see how you see user down here if you don't see user down here that means you didn't set up your user profile experience correctly go back to the beginning of this video and complete that all right so email now i see i have my user email in here hit done and now i can make a relation so i'm going to say rel to user this will be a relation column where i'm going to relate the user email to the user sheet email and now you see i have a relation to the user of whoever signed in nice all right so from here i can simply add a button to capture the class name uh write it to the user profile via that relation we just created and then navigate back to the user profile so it's three part action that we can use with a single button so with this button here at the bottom that fits perfectly i love it we're gonna say uh choose this class all right and this action will be a new action so we're going to create our own custom action here trial by fire in this first video i love it all right so that what we need to do is we need to first set the value of the class column with the class name so we need to use the set column action all right this set column actually we're going to be using this a whole lot this video series so get used to it set columns is by far one of the most powerful new actions that glide has released it basically lets you edit any column's value in the current sheet or in a different sheet via a relation so we're going to set columns and we're not going to set any columns in this item which means this row for the class name right but instead we're going to set it using the relation so when i select relation to user you see i now have all of my user profile columns including class and so we're going to write the class name to the user class column all right okay after that maybe we showed a little notification so we can do show notification and we could say class selected [Music] okay if you want to get fancy and put in a little uh sound we can do that too there's a variety of sounds to choose from they're all okay but alert's kind of nice okay and then we're gonna go back a screen right so we'll go back where's my go back go back boom all right we're gonna name this select class and then hit save all right so when i hit save it's gonna do this four part action where it's gonna set the class name in the user profile screen it's going to say hey class is selected play a little sound and then go back to the user profile experience let's see if we did that correctly i hit save all right so say i want to be a warrior i hit choose this class look at that and now um you'll see that if i go to my data screen here my class now says warrior awesome all right so i'm going to just select a class let's scroll through and be a hunter choose this class boom now you see i'm a hunter all right select a class let's be a mage or a peeler look at that healer awesome all right and the last thing here is once they've selected a class um maybe then they can complete their profile so to do that we just have to add another button to complete our profile so in the screen view button boom and we can call us whatever we want maybe complete profile and we want to distinguish it from the select a class button right a couple ways to do that we can change the look of the selected class button to be a little bit more muted so that way the complete profile button stands out uh we can add an icon to the complete profile button maybe a check like so and or you can make it a floating action button so it looks like that at the bottom so this button will only appear once these things have happened that's certainly possible as well i kind of like to look at the floating action button it kind of just hovers down there looks kind of nice and the check lets you know that you're done right all right for this we need to create an action and again we're going to use a set column action because what we want to do is write a time stamp to our profile completed on column this one right here whenever the profile has been completed right so to do that we're going to go ahead and select our button the action will be select or sorry set columns and here besides just the profile completed on we should also set a few more things here so in our data there are a couple more columns that we forgot when we set up our sheet we need to set our default experience as being zero and our default gold to be zero so we need to create two more columns here these are gonna be number columns i can do so right through here through the google sheet or through the data screen i'll just do it here since i'm already viewing this screen here so i'm gonna do the plus button number column xp precision one done and we'll do another one number column for gold or whatever your in-app currency is going to be precision one done all right you see i have two new columns now and so what we want to do is when they push that button we're going to set xp to zero gold to zero and the profile completed on will be the time stamp when they completed their profile all right let's go ahead and select our button right set columns uh here we're going to have xp be set to zero gold set to zero i'm just going to give them some bonus gold you can give them you know 10 gold start off but maybe let's give them 10 gold to start off with why not and then their profile completed on we'll click the triple dots and choose the current date and time all right so when i push this button we should see those three fields being filled out i'm going to do that in just a moment okay now when they push this button we also want to hide our onboarding experience so we need to create a condition for this button we also don't want to show this button until they filled out all three items the class the photo and the username so we need to set a condition on this button so i'm going to go to screen pick my floating button and under options set a visibility condition and this visibility condition will only show the button when the username is not empty when the profile picture is not empty and when the class is not empty oh also when the account usernames is less than two in case i pick a username that already exists you see i get the message but then also the button goes away and i can't pick that username if i don't fill out the field at all i don't see the button to complete all right if i don't pick a class if i get rid of my class here you see the button doesn't show up here so i have to select a class i'll be a healer okay and now the complete button shows up good all right so that's working all right the last thing here is again to set the tab visibility so we only want this onboarding tab to appear when they haven't yet completed their profile and the way we know that a profile has been completed is when there's a timestamp in this profile completed on field here so in this tab if i click on welcome at the top here i can go to options and you see there's a visibility condition for the tab i'm going to select add condition and i'm only going to show this tab when profile completed on is empty like so okay when profile completed on is not empty then i can show everything else for a later video all right so we have tab visibility set up we have button visibility set up and then you just kind of customize this onboarding experience so maybe you want to have a banner up top right so i can just drag and drop an image right on top and after a few seconds you'll see that it loads as a banner at the top of the screen really big so maybe i want to make it a three to one like that cool style ed to edge or even insert make it even smaller that works you can also play around the colors a bit right so here i have my appearance just being this blue color but i'm actually going to use a chrome extension to pick exactly the color i want maybe i want this like this real bright blue of my logo cool so now i come back over here i can paste the hex color of my blue so now everything matches you can also under the appearance choose what theme you like so you have a light you have pure you have bold i kind of like the bold uh you can choose what font you want i like modern completely up to you okay that looks like a nice welcome screen all right let's test this out so when i push this button these three fields should be filled out and this welcome tab should go away let's take a look hey look at that so xp was zero gold is now 10 and the profile completed on is now showing a time stamp and because profile completed on is no longer empty you see that screen was hidden okay i want to talk real quickly about this what you're seeing in front of you here because you're going to see this quite a bit now that glides new builder has been released okay your users in the published version of the app will not see what we're seeing right here where it says this screen's visibility condition is false right this is always for us the app builder so that way we can preview any screen that would be hidden or we could hide it as though we are a user viewing the the app here okay what's nice about previewing anyway is then that way we can still make edits to the screen and it won't be hidden from us the app builder but if you want to see what actually would take place i would just hit hide screen right and this is the resulting user profile screen that would be visible once the user profiles have been set up so this users tab at the top here will be our user profile screen and again we'd only want this to show up when the user profile completed on column is filled out right so i'm going to click on users i'm gonna go to options and set a visibility condition for this tab to only show when profile completed on is not empty right and this user profile screen should be filtered where the user is the signed in user so very important go to filter add filter where email is the signed in user all right if you want to test this again we can simply delete the timestamp in the profile completed on section okay so this is the screen we'll see when we first sign into the app when they hit the check box that screen will be hidden and instead they'll see their user profile screen right the only thing we haven't yet created is just a visualization of the class that they selected back on the welcome screen right so here they were able to select a class choose it and they get this little notification that a class was selected but there's no visualization or confirmation of that back on the welcome screen so to do that all we need is just two columns a relation column from the user sheet back to the classes in order to grab the class image so we're going to go to our data editor and here in our user sheet add a column it's going to be a relation column and we'll call this rel class where we're going to relate the class name that they picked to the class name in the classes sheet okay you see that it found a match here and now i can pull in the image this will be a lookup column and i'll name it class image the configuration will be the rel class image done and now we can use this class name that they picked along with the class image and display that in our welcome screen so i'm going to choose welcome maybe we'll display it in a basic table kind of keep it easy right so we'll do basic table the right most column will be the image and the left leftmost column will be the class name that they picked just like so we'll add this right above our button perfect all right so everything still kind of fits without things overlapping that looks great all right so stay tuned to episode 2 where we'll configure this user profile screen and add a few more details such as their gold balance their xp balance and then show you how they can select a guild right from their user profile all right if you have any questions feel free to leave a comment below find me at twitter at rpotito and as always thanks for watching

Channel: Robert Petitto

Views: 9,633

Keywords: apps, gamification, gamify, glide, glideapps, no code, nocode, gamification in education, no code app builder, no code app development, nocode movement, low code development platforms, low code no code, low code application development, glide app tutorial, glide app, app builder, app builder create own app, education

Id: GqfOJdS52a0

Length: 36min 2sec (2162 seconds)

Published: Mon Mar 15 2021