Gamify Glide Apps Reboot #5: Item Store and User Inventory

hey fellow gliders welcome back this is episode 5 of gamify your glide app up until now we've been awarding our players xp and gold but we haven't been able to allow our users to spend their gold at all so today what we're going to do is create an item store where our players can dive in use their in-app currency to purchase in-app items and then store them in an inventory from there they can manage their inventory by dropping their items using their items selling back their items and so forth some of the concepts we talk about today will be a little tricky but we'll walk you through it so make sure you pay attention ready here we go gamifier glide app [Music] so whenever i'm creating a new feature for an app i like to think of it backwards ultimately what we want is an inventory tab that has a list of all the items that we purchased so we need to have a relation from our user to the purchase list that means we need to have a spreadsheet that's going to house all of the lines of items that were purchased by users and that will get populated from a store so we need to have a list of items in a store so i'm going to create two new sheets in my app called store or shop and then inventory so here i have a store and here i have inventory i've already pre-populated it with a little bit of information here so in my store sheet i have some items images that i found on unsplash and a category for those items i have how much those items cost in gold you can feel free to put in a description for these items as well then we have whether or not this item is unique so that means can the user purchase more than one of these items so let's go ahead and insert a check box there and then yes let's make our minor healing potion unique maybe our healing potions can only have one at a time something like that okay then are we gonna enable any class restrictions meaning uh if i'm a priest can i purchase items that are meant for a warrior right so like a shield and a sword maybe those are meant for warriors only so i'm gonna go ahead and type warrior into those items there and basically we're gonna filter those items out in our store okay then we have the minimum rank needed maybe you're limiting your amount of items that can be purchased based on what rank you are so maybe a shield and a sword you have to be bronze in order to purchase that item oops spill that right right and then maybe your major healing potion need to be silver and maybe the other ones don't have a restriction then you can introduce the concept of boosts right so if they purchase one of these items does it give you stat boosts i have health boost spell attack and armor boosts we haven't yet introduced the concept of health in our app but it's nice to have this in here now so in case we do want to introduce that we have that placeholder so for example minor and major healing maybe those offer 10 health and then 25 health additional bonus um for these materials maybe nothing and then shield and sword maybe a shield will offer an armor boost of 10 and then a sword will be an attack boost of 10. you can set the concept of availability so maybe there's only a certain amount of items available so minor and major maybe there's 100 of those each right maybe of these materials we have 200 of those each and maybe of our weapons we only have 20 of those each okay and then also the cops of can you sell this item back maybe you're going to allow your users to be able to sell back an item if they no longer need it so i'm gonna get an insert check boxes and let's make it so they can sell back their weapons and armor something like this okay you see row ideas in here this is because i already created the row id column in the glide app i'll show you where to find that okay and this is pretty much it for our store now for our inventory we only need a few items here basically just the columns that are going to keep track of which item and which user so here i have the user email i have the item id this is going to point to that row id it's always good to point to a unique value just in case you want to change the name of that item later it's not going to break any relations okay i have cost i really might not need this one at all because i can probably just do a lookup of the cost but timestamp when they purchased it in case you want to do something with that maybe like daily items and then again a row id for those items perfect so let's go back to our app and give it a refresh and we should see now that i have a store and an inventory and these are the columns that i placed in there um you're gonna go ahead and format these columns if you created them from the spreadsheet for example your unique should be a boolean so you just come over here to edit boolean right your image should be an image type column and so forth i formatted these number columns already to include the emoji in there and again you see all these are should be number columns and not text columns so just go make sure you go through your two sheets your store and your inventory sheets and format those columns to the type of column that they are all right once we have this information in then we can start creating our screens so i'm going to come back over here to our app and let's create our store screen first so i'm going to add a new tab let's call it store i'm going to make it a details view of the store sheet that way i can customize the layout of the screen the tab icon let's find something to do with money that works well and i'm going to trash all these components all right maybe at the top of the store we want to see our current gold that way we're not bouncing between the my profile and the store so i'm going to add in a basic table at the top and for these left and right categories i'm going to match what's up here which is our progress and the amount of gold that we have so up here i'm going to reference our user rank progress display and over here will be our user gold just like so okay next will be our items themselves but this is going to be an inline list and the inline list will be of our inventory sorry not inventory our store and let's make this a card view it doesn't need a title and let's make it too wide so we can fit more than one item on the page um image shape will be square the image will be the item image obviously well maybe not square let's maybe do a three to two that's fine and we can go to options and group by category that'd be nice so we are stores automatically organized by category all right from here uh the header could be whether or not it's unique let's do a unique display right so we just want to true or false we want to actually show if it's unique or not so let's call this if unique and this would be an if then else and we'll say if unique is true then it's good emoji too like a diamond yeah okay then unique else nothing so now our potions are unique let's drag this over so that way it is next to our unique column all right back to edit this header unique um description [Music] let's do nothing so details let's make this the item name that way if it's longer it'll carry over to a second line that's looking fine all right maybe we want to display on here the um the rank needed in order to purchase this item all right so to do that we're going to tap into this minimum rank needed right so in order to determine if we have this rank we're going to go by the xp needed in order to achieve it right because if i've earned gold that means i have enough for bronze and silver so that means i have enough xp to satisfy both those conditions so we have to go by xp so let's go make a relation between the min rank needed and the xp so let's say rel to rank where we're going to relate the min rank needed to the ranks rank like so drag that over and let's get the minimum xp needed this will be a lookup of our rank points minimum done and then we need to compare that to our current xp so let's call this can purchase and then put in parentheses rank and so this would be an if then else so we're going to say if the minimum xp needed is empty then true because that means that there's no rank requirement else no at a case uh if the minimum xp needed is less than or equal to our current xp the user xp then true okay else false there we go all right so this is false because i'm not yet the silver rank but i am a bronze rank so these are true that works nicely all right um then we need to determine if we can purchase it based on the cost so we need to grab the current user's gold a couple of ways to do that we could just use a math column and bring that in but we need to have a relation to the user anyway so let's create that relation to user which means we need to have the current user as one of our fields so we're going to start off with current user this would be a template column triple dots user email like so and we don't need a replacement done then we're going to relate to user so rel user so we're going to relate the current user to our users email and not match multiple because only one of us and then we're going to grab the current user gold this is a lookup of the user gold like so okay then we need to determine hey can we purchase this which is basically going to be this minus this we have to determine that anyway so let's create that math column and we'll say balance after purchase this will be a math column and we're going to do the total gold or the current user gold minus the cost all right so that's our balance afterwards and so if it's negative then we know that we can't purchase it so we're going to do an if then else we'll call this can purchase and then in parentheses balance and we're going to do an if then else we're going to say if the balance after purchase is less than zero then false else true okay um okay that works now what if there's not enough available right so we need to relate our row id here to the inventory item id so let's do a relation to inventory so we're going to relate our row id to the inventory item id there's nothing in there yet we're going to match multiple because more than one person's going to purchase an item right we hit done okay then we need to do a roll up of how many items were purchased so we're going to do a roll up we're going to call this uh inventory count purchased so it's going to be a rollup of our rel inventory to grab the row id and right now it's zero because no one's purchased anything yet and let's call it can purchase you don't really need this to be in this in the sheet but it's nice because we're creating it anyway all right so can purchase quantity be an if then else we'll say if our inventory count purchased is greater than or equal to the quantity where is it total available okay then false else true so all of them can be purchased right now because no one's purchased anything yet all right and then we'll have one more condition afterwards based upon whether or not the item is unique and that we owned it but we'll create that after the fact just so you can see that logic all right so now we have to create the details view here oh but you know what first we want to bring in some ranked information right so let's come over here and bring in some rank so let's do um rank image this would be a lookup of the rel rank image and then the rank name oh we already have the rank name okay so let's bring the rank image over to where the rel rank is like that okay so now down over here under the avatar we can make that the rank image and then the avatar text can be the rank needed like so okay and then for the tag we can make that the cost we should display the cost on there obviously all right that's looking good oh and we don't want the true we don't if unique we want unique display if unique there we go all right so that looks great look at that okay now i'm a priest so i shouldn't be able to see the armor or the weaponry so we need to filter this list by our class all right so to do that we need to determine hey if it's one of these classes then i shouldn't see it but if it's one of these classes then i should so we can just do a relation from our cur from our user rank to like an if then else it's looking at this class column so let's call this if class and be an if then else and we're going to say if the class is empty that means that there's no class requirement and we'll just return our user class otherwise we're going to spit back whatever the class requirement is like this okay so now we have this if class that we can filter our list by let's bring this over okay so we just go to options filter and we're going to filter the whether the if class is our user class let's give that a second to populate and there we go all right so these are some items that i can purchase nice all right so i can buy a unique healing potion i can buy i can't buy the major healing potion yet because that's silver all right let's go ahead and configure our details screen and let's add in a title we want the image a title can be the item name and then the details could be the cost maybe something like this you can choose what kind of layout you like kind of like the full screen okay then we can have some details underneath so we can have some action text that doesn't do anything for the description which i don't have on there we could have a basic table of all the rest of the stats right like the category the whether or not it's unique the boosts is our health boost i want spell boost next attack boost and armor boost and then maybe how many are remaining right um do we have that yet we have inventory but we don't have inventory remaining so we have to subtract the total amount from that inventory count so let's do uh remaining and we're going to do a math we're going to do the total available minus the count precision 1 and we can give it the units of remaining and we can just throw that as the footer of our basic table something like that feel free to play around with this and where you want that information to be all right from here now we need a button to purchase the item right a couple of ways to do this i'm going to show you one neat nifty little way here of doing a button that will then lead out to are you sure button right so here we have a button this is called purchase item and what we want to do is set this to be a visibility condition to the button bar so here we have a purchase item and when i push this button i want to turn this into a button bar it says are you sure cancel or yes purchase and so that button bar will look like this where the left hand will be cancel and the right hand side will be purchase and it's given some icons like so all right so we're going to toggle between a true and false state here of the purchase item and cancel so to do that we need to create a user specific column in our store we'll call this are you sure it's going to be a basic column boolean and it'll be user specific okay and so then this purchase item what's going to do it's going to set column are you sure to true so when they push purchase item it marks are you sure to true and this purchase item button it will only appear when are you sure is not true is not true i push the button it goes away and if i hit cancel right i want that cancel to bring it back so this would be a set column of our left action here so set column this item are you sure we'll just clear the value so now we have a toggle right cancel purchase cancel purchase which is basically just marking true or empty true or empty and then on purchase here's where we want to do the action of actually adding it to our inventory so the right-hand action's gonna be a compound action we're gonna do a few things here uh first thing let's have a show notification that it was purchased item purchased let's have some auditory feedback of some sound maybe like um the alert is fine okay then we want to go back a screen okay and then we're gonna have some set columns kind of happening in the background so the first one let's mark the are you sure to clear again so that way if we visit this item and next time we that menu is kind of reset okay then we need to reduce our gold right and luckily we already have that relation to user to grab our gold balance and we've already calculated uh the new gold balance so we can do a set column of our relation to user and our gold will now be the gold after purchase was it balance after purchase yes this one the balance after purchase so this will basically replace our current gold with the balance after purchase gold okay and finally uh we need to add a row so we're going to add a row to inventory with this information so the user email the item id which is the row id and the time stamp okay now we only want this to happen when there are certain parameters right so we need to create a condition here first this can purchase quantity right uh needs to be true so it is true okay and where the can purchase rank is true and where uh can purchase balance is true so we have to have enough gold we have to have enough rank and there has to be enough of the item available okay now that means that there's gonna be three conditions then where it won't match up right where there's not enough there's none of rank not enough gold or not enough left so we should probably first determine if there's enough at all right so if the can purchase quantity is not true okay then we'll do a few things if the can purchase rank is not true then we'll do some things and then if the can purchase balance is not true then we'll do some things and really all three of these things will be the same thing just different verbiage right basically we should probably restore we'll do a set column on here to reset our menu then we should have a notification to say why and then we should have some auditory feedback some play sound okay and really the set column should be last because the set columns take a split second and so it sounds like a delay otherwise all right notification uh this one's going to be failure and that message should be no items remaining check back soon okay then that sound could be like a hint text let's make all these hint sounds okay uh for not enough rank not enough rank failure and then balance be not enough gold failure all right this will be a purchase button save all right so this costs five gold i have eight gold so what it should do is it should give me that notice that it was purchased should deduct the gold and add a line to the transact or sorry to the inventory sheet and then it should reset this menu and then go back so i'm going to click purchase item purchased i'm now at 3 gold my menu should be reset oh and it was but i didn't have a visibility condition on here this button bar should only appear when the are you sure is true now you also see on here that there are 99 remaining because it did that math for the quantity now speaking of quantity what you also might want to do is limit how many items a user can have at one time call this like inventory slots so to do that you need to do a relation between the user profile and their log right so i'm going to come back over here to the data editor and go to the user sheet go all the way to the end and add a new column and we'll call this relation to inventory we have to do this anyway so we're going to do a relation it's going to be a multiple relation because each person's going to have more than one item we're going to match our email address to the inventory user email like so okay then we check the get account so we can do a inventory count and this will be a roll up of that relation we just created and grab the row id and now we see that we have one item and then we can display how many we have remaining so pick a number right uh if you only want to give them nine available items then nine's your number right so we're gonna do remaining we can you can call this item slots remaining it has to be a math column where we will subtract the number nine right can be completely arbitrary minus the item count what do we call this inventory yeah inventory count okay and then we can even give it the unit of slots remaining nice like so which also means that we need to create an additional condition on our purchase button so i'm going to come back over here to our purchase action and add in another condition here where our user item slots remaining is greater than zero so if user item slots remaining is less than or equal to zero it should never be less than zero but who knows is less or equal to zero then same deal we'll show notification we'll play a sound and we'll set column to restore the menu so that'll be a hint sound and genification will be a failure of um not enough inventory or your inventory is full how about that your inventory is full and the set column again are you sure we're going to clear that value save okay so now that we have some conditions on this button and we have an inventory now we have to bring in some information into that inventory sheet so let's go back to our data editor inventory and we're going to do a relation from the item id to the item so we're going to do a relation to item be a relation column we're going to match the item id to the store row id like that there's only one so we don't need to match multiple and now just a bunch of look up columns so we're going to look up the item name this would be a lookup we'll do the item image image if we're planning on selling back the item we should get the item cost how much we paid for it right not the if unique well we need we're gonna need that too actually but um where's the cost oh there it is okay we should get the item category so we can categorize our inventory oop not anything else be a lookup okay and then whether or not it's unique so uh item unique look up unique like so okay maybe we want to do the same thing too so if we're planning on using an item or dropping an item we want to check are you sure so let's create an ru sure column again a basic column boolean but it's going to be user specific okay we have a row id already okay and then if they're selling it back we need to do some sort of math here right so we need to have a relation to user so relation where the user email go to the user's email and then we should bring in the user math okay so we'll do balance after sell back and this is going to be the current user gold g where g stands for user gold um plus and then maybe we're not giving them the full amount back maybe only half right so we'll do in parentheses the item cost divided by two but maybe we want to deal with decimals either so maybe we'll round up that cost so we'll do sealing like that so we're rounding it up all right there should be enough information to get started and now all we have to do is display this in our app a couple of places we can either place it in the my profile section here or we can create a dedicated tab for your inventory i'm going to go that route so we're going to create a new tab here we'll call it inventory and i'm going to just leverage the users tab here but i'm going to make it a details view and the tab icon let's make it like a bag for my inventory you can also do boxes if you want or something bag is fine maybe my inventory okay and here we're going to display that relation to inventory which we've already created so we'll just be a inline list values be that relation to inventory we only have the one item at the moment the title can be let's see the item remaining maybe we'll need that in a separate place i want to see how many uh items we have left right so we'll need to add that as a text column i guess on top or we can make it oh we can just make it the title of the inline list like that yeah that's what i was trying to do from the get-go all right and then this information should be categorized we can group it by the item category that we brought in from the lookup and then from here we can display it maybe in a tiles view maybe three across with tyler shape square um the title can be the item name let's make it small text and allow wrapping like that yeah that looks good all right so if i purchase something else let's see how much gold i've left three let's cheat and give myself some gold uh let's get myself 20 gold let's buy some more things so i'm gonna buy some lumber linen leather i can't buy this yet because i'm not silver see that oh it's just okay there we go um but i can buy let's maybe buy one more of these [Music] not enough gold fine so back in my inventory we see i have three slots remaining because that's the nine minus the six we see things are nice and categorized which is nice and pretty okay and now we need to um configure the details view of our inventory so i'm going to dive into this first lumber and from here we'll just create some simple components like a title where we have our item name details to be the item category here right and then uh maybe just a simple action as to what you want to do with this item so if we want to have a button bar we could maybe drop the item or use the item we're not going to go into the logistics of using an item quite yet in this episode but we'll stay tuned for next episode where we actually use the items uh the drop the item we could do something like that and then let's create some icons for those maybe dropping it would be like removing it with an x and then the use item could be like a zap or a bolt yeah like that and maybe we won't have the same sort of functionality right so if they click on drop item what it does is it marks an ru shirt true and then shows a different button bar right so we want to show this button bar when the are you sure is not true which means that when they hit drop item that'll be the set column where we mark are you sure to true and then we're gonna have a second button bar so i'm gonna clone this one and we're gonna reconfigure this so instead of drop item on this one we'll call it cancel we'll use that same icon as before and then this right hand button will be drop item and a confirming check mark like so and this button bar will only show up when are you sure is true like so so now we can do a drop item and then if you hit cancel right that'll mark are you sure to be cleared so now we can toggle between those items okay so i can drop the item and if i go to drop the item then this will be a new action and we need to do a couple of things first we will go back a screen then we will display a notification we'll see item dropped and then we need to delete the row so we're going to do a delete row make sure it's this row or this item not any of these because if you do rel item or rel user it's going to delete the item from the store or it's going to delete your user profile so we don't want either of those make sure it's just this item and then maybe a sound as well right some auditory feedback let's make it the sonar sound we'll call this drop item so it'll look like this item dropped and then this item should go away it's much more responsive in the published app rather than the builder you saw was a bit of a delay there but in the published app it should be almost instant okay um and then the last thing here is maybe we want to be able to sell back the item but only if you're allowing to sell it back so let's create another button here and let's call this uh sell back for x amount of money oh we don't have the sellback value do we we want the item cost divided by two we just need that as its own value all right so sell back value and so that's math that's just the item cost divided by two but we want that to be rounded up and we're going to format it like that and let's make it a display so we'll say sell back value display yeah template column and we'll say sell back for x amount of money or that money is the sellback value all right we can make that the button text here and then we need to do a compound action on this so again i'm going to do the same thing we're going to go back a screen we are going to play a notification sound we are going to um back to screen i show notification item sold items sold back successfully uh then we need to set column because we need to add that money back to our account right so we're going to set column we're going to do the relation to user where the gold will be the gold after sellback and then lastly we need to delete the item from our inventory so we're going to do a delete row this item we're going to call this a sell back item save all right so i sell back for a dollar that means i should have then um two dollars in my my balance and then i should have five slots remaining so let's try that out five slots remaining the item is gone and two dollars in my account so that all works nicely okay and then maybe we want to have a nice little link to the store here so let's do a couple of buttons i'll make them a floating action button and we'll call this store and this action will be a navigate to tab store i'll make it the same item as this same icon as the store like that so they click this button and they go to the store and let's create a button here so we'll create a button and we're going to call this uh inventory again same icon for your inventory tab which is the bag and we'll do a navigate to tab inventory make it floating action buttons now they can toggle between the store and their inventory uh the last thing we have to do is whether or not the item is unique we shouldn't be able to purchase another one so in my inventory that button is nice i already have a healing potion which means i shouldn't be able to purchase another one so this is a little bit of complex logic but um follow me here so in this in the inventory we're going to determine whether or not the item is unique determine whether or not we have that item so yes we already have this item unique column here and so we need to do an if then else that talks to this so we're doing if then else we're going to call it um owned unique item then the item id so first we're going to rule out any rows that aren't ours so if the user email is not the signed in user then leave it blank so now any item is or any row here that is not ours will be blank then if any of those rows are not a unique item so if item unique is not true then blank else item id there we go so now because we have this one unique item and we own it it displays the item id if we switch to a different user we see that it ends up being blank so now lastly what we have to do is in the store we need to make a relation to that so we're going to do a relation to a user owned unique item it'll be a relation from the row id which is the item id to the inventory owned unique item item id and we'll need to match once if there's any sort of match whatsoever then we're not going to allow them to purchase it which also means finally we need one more purchase item condition here so i'm going to go dive back into this purchase button action and set one more condition here okay and where that relation is empty meaning that there hasn't there's no match so um somewhere over here we're gonna do if there is a match if it's not empty then the same scenario we're gonna do a show notification we're gonna play a sound and we're gonna set columns okay for the set column again we're just going to clear the are you sure the play sound we're making at the hint and the notification will be a failure notification and we're going to display uh you already own this item save so if i attempt to purchase this healing potion which i already own sorry we already own this item very cool all right so we're almost done the very last thing we have to do here is do any of these have stat boosts if so we need to temporarily add them to our invent or sorry to our user boosts here so um based on the inventory we need to do a uh roll up of all of those boosts so we're gonna do inventory i'm gonna copy and paste this inventory boost and then health like that okay this is going to be a roll-up of our inventory and then all of the health boost oh we don't have that do we oh we have to bring those in got to bring those in first all right i'm not going to make sure i don't lose my copy paste so i'll pick anything for now all right so in our inventory we need to do four more lookups we need to do health boost so look up of the item health boost and then we need to do armor boost look up item armor boost need a spell boost of the item spell boost and then the attack boost so we'll look up attack boost all right now we can do the roll-ups back in our users tab so actually we're not going to do health because we don't need a health boost here we just need um well yeah let's just do uh let's do the three we'll start with spell so gonna be a roll up of our inventory and then spell boost and we need to do a sum we're going to add all of those boosts together okay then we need inventory boost armor which is a roll up of the inventory armor boost sum and lastly inventory boost attack roll up of our attack boost sum so now we have these three things and if we come back over here to our boost right we have our base attack base armor and base spell so now we need to just do some math on those right so now we need to do total armor which is a math of our base armor plus boost armor like that and then the unit should be the um emoji that we were using let's see if we're using a sword a shield into that swirl not that one magic this one alright so our units here are the armor boost like that then we need total boost we'll call it total boost total attack boost again math we're going to do base attack plus inventory boost attack make sure that's the right one yeah attack precision one that's the sword let's icon sure this was the right one here should be armor yeah okay and then lastly the spell boost oops so uh total spell boost and we do a roll up sorry math column of our base spell plus boost spell yep one with the icon for the number like so all right and so now we can display these things in our app if we'd like we also have um we can do some template columns with these and display them later in our app we'll cross that bridge when we get there when we actually start uh leveraging those uh stats within our amp whoo that was intense but you did it nicely done today we allowed our users to spend their in-app currency on items in a store and then manage those items in their inventory those items also increase their stat boost we can tap into that later in our gamified experience now if you don't want to go through the legwork of creating this all yourself you can always join my vip program below all you have to do is click join and that will get you access to my vip app which includes this version of the gamification app as well as all of the previous versions so then that way you can go back and walk through it step by step regardless thank you for your support and as always thank you for watching

Channel: Robert Petitto

Views: 1,275

Keywords: glide, apps, glideapps, no code, nocode, 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, glide apps tutorial, glide apps examples, glide apps, app design, app development, gamify learning, gamify your classroom, gamify your life, gamify, gamification in education, gamification examples, xplap

Id: Vl7RmkNe-D0

Length: 50min 48sec (3048 seconds)

Published: Sun May 09 2021