How to build Mobile Apps using SAP Appgyver - No Code framework for Mobile Apps

hi sap had recently acquired a tool called appgyver this tool is a no code solution or low code solution for mobile application development in this video tutorial i'm going to show you how to create an application for using sap app guyver now you can use appgyver directly from appgiver.com or you can use it from sap btp platform in this demonstration i'm going to use it from appgyver but if you have b2pa access then you can use it on a b2b uh btp platform so let's get started once you log in it will be the login page will will bring you here from this point onward you can start creating your apps so the first thing let's create a new app we'll call this app as a maths select a theme whatever theme you want to select uh create now i'm gonna show a switch to a larger screen here so by default it creates an empty page and you will be uh shown a composer which is editor now if you are familiar with webdin pro which is old web framework sap had released when you could drag and drop components and you know you could create a web application this is similar almost identical so if you have experience on webtoon webdin pro you have a head start so now here we we see by default um we have two components uh headline and then the text so we are gonna get rid of that so uh first we'll create our application structure basically first let's name this and then we go so this is our first page so i have selected a page layout down here in a tree and then i'll give a name home this will be the home page i don't let's keep the title instead headline let's call we don't need it just remove because page has a title and we'll see our title in the uh in the app uh this one we don't need it now the first page is a home page so let's leave this page for uh options or selections like what level you want to select and if you have if you need some different options to set like you know what type of multiplication you want two digits three digits and so on now the next is we'll create a new page for let's say uh ord and even so i'll add a new page uh we'll give a name as add od and even okay so now we have a brand new page for odd and even now again we don't need this so let's remove that let's remove paragraph as well save now we have two pages now i can show you um so let me open up on my phone and then i'll show you how it looks like okay so here is the app to test this app you can download appgavia preview from app store and then you can scan your qr code from the app and it will link your app so here if you see a launch this will reveal the qr code you can use this qr code to scan uh scan and add in into your ios app and then there you can you can directly load the demo apps so in my case so here i have my uh different apps here so this is the one we just built i'm going to open that ah by the way i cannot open with the mouse it's on my phone so here we have our home page there is an empty page down here this is the navigation path and we didn't know anything else we just put there one multiple pages and we gave them a name but now to have multiple functions we can add multiple tabs here so let me go back uh here we have home and add even two pages but we only see one right now because we are on this page now i can go to navigation and here we can add an atom so click on the item you can select um an icon so for this let's select um we have a calculator yeah it's there so that and then here we can select which page we want to assign to this uh tab and then you can name and that's it save so as soon as i save so i'll switch here you can see i have another tab here so now i have two pages two pages and two different tabs so the first one says home and if i switch it says odd and even so it's fairly straightforward you don't have to write any code so this one i would like to name it let's say odd and even and this one says empty so instead empty i'm gonna say home save and now if we see here we have home and we have odd and even this is a basic structure now let's go back here in the pages and add a few more pages so the next i'm going to add is um uh multiplication so that would be all long so let's create page with times same thing we'll remove these we don't need it for now save now we'll go back to navigation add another item select that and change the icon let's pick the cross or multiplication tab name is times the page is time so everything is okay save i go here it will refresh automatically and now we have odd event or or even and times so we have home or even and times okay so for today uh two pages are enough we'll add more as we go so now i'm going back on a home page now this we can set up let's say the difficulty level or like other options i said earlier so that we are going to do at the end for now let's start with ord and even now for ord and even we need a number so we we have to generate a number between certain range and we'll provide two buttons to see whether it's odd or email and then check that number and the user input and verify and give output so first we need a number so let's uh bring paragraph that one is the paragraph um okay before paragraph okay anyway we leave the paragraph now we need variables because uh to show a random number and to verify we need a variable so variables are created from here so you go here switch from view mode to variable mode there are a couple of options here you can create a variable for an app yeah within the app so that can be shared between tabs or you can create a page variable so which will be limited to only page there's there are page parameters so if you're navigating from one page to another page you cannot use the page variable but you can pass the page parameters and this is ideally used in header detail kind of applications where you tap on a list and then it will bring you to the detail page there are variables these are the variables if you are fetching something from backend let's say odata service or any other service then you can create data variables and translation variables that i assume i don't know uh related with language so for this purpose we are going to create a page of page variables so first we will create a variable we'll call random number this number type is a number because we we need a number an initial value we can set or we can we can set a random value uh when we deploy this app so that we can do it somewhere i'll show you so we have a variable now so we'll go back to our view we already have this paragraph so let's bind this paragraph to that variable the way we do it is by selecting paragraph here then go to content and then select data variables page variable and this variable and just save so now you can see it here this is showing a placeholder that means our variable is placed there to arrange or to apply styles you can go to the style tab here go under dimensions i want to put this number in a center so i will go here and align itself i will select this horizontally center so this will put a center now there are different ways you can build ui you can use containers you can use rows and other things so for this purpose i'm going to use a container and that's a good practice to you know embed everything in a container so i use a container and then i move my paragraph under container next thing we need two buttons to validate the result so uh i could drop two buttons and put them side by side but that wouldn't be um let's say proper so instead i will uh create a row container which i can you can find it here in a layout and this i have to put it again in the container so right after the paragraph and this has cells so you can divide between two cells three cells or whatever you can choose so when you select here you can see here it says two cells but you can increase and decrease for this purpose we just need two cells and then we'll drag uh two buttons in these two cells so i have two buttons uh we can change the button color and label so let's start with the first button we'll call this call this as even and the second button will call it as odd first even uh let's change the color again under background uh pick a color so usually even is like maybe green greenish so let's leave it green and odd let's assign radish or red now these buttons will appear on the top so let's save and then switch and check so my app is ready and you can see now we have two buttons here and our even number is random number is shown on the top now we have to format so i want to bring those buttons down that's a nice user experience instead you know showing shown on the top now i can apply um a margin or i can assign dimensions so to each of them instead i'm going to just assign to a container so container will push everything down and then we don't have to worry about anything else so go to styles and then expand the dimensions and positions and under positions uh top i don't know top let's say 200 and see what happens i don't know 200 so yeah so it starts on the top and then it will push down um i'm not sure if it has a percentage so i'm fairly new as new with this framework but for time being let's assign a default value i'm pretty sure there must be a way i know here we can put a uh we can pick a formula never tried so let's try formula and then we'll call [Music] system dimension screen height so let's take height and divide by two so this should be at center save uh go check here switch to order and even so it's further down it's not really at a half mark technically it should work because we are what we are doing here is we are saying uh take my screen size and divide in half and assign that value so my container should be in the half position but for some reason it does not so i'm going to revert that back to the default value so we will so screen size it says 44 448 that means our screen is 896 or 900 something so instead i will just assign manually 400 now 400 is to off so okay so this one seems to be okay 300 and yeah so it's right in the center we could do that or we can split now zero is coming right here and i don't like that so uh we'll go back and we'll push the buttons now so if i go to my row and if i assign position to the row let's see if it gets pushed down yeah so let's say 200 300 uh cancel save and we go here and check okay perfect so yeah home or even times and then our uh even and odd buttons now those are white uh do we have option to change button text or maybe we'll make it even darker so we can see the white it's hard to see so that one again make it darker so it's clearly visible save and okay so we have odd and even so the structure is uh ready we have a structure now now the first thing is we need to uh populate this number right as soon as we launch app we need to have a value in this variable so we can check whether it's odd or even now for that purpose um we can select again page page layout and you go down here this is where we can assign logic we can assign uh events this is a like a event handler so here it says page mounted or page focused so we can use either i don't know the difference between them but we can try let's say we will say set page variable because we want to set the page variable value on page focus we connect like that and then we in on this page variable we will select our page variable since we only have one so is by default selected and in assign value instead constant we are going to select that we'll say formula go into the formula and here we will say random integer between so between 1 we can put whatever maximum so let's take just 99 and save now we'll go back and open so you can see now we have 84 and every time i'm assuming we change it will change the value okay so perfect it works now the number is kind of small on the screen so let's increase the size and that one would be under advanced no topography okay yeah it's here so the line height we are we will make it let's say 50 100 yeah it's good and then the found size let's make it 100 as well save go back and now we have a big number okay now the next thing is so our variable is ready uh our variable uh is there and our buttons are also there oh by the way the buttons got pushed you don't see it here because of the offset so let's go back and bring buttons up again so i'll go to position i should have done this before uh i should have increased the font size before and then assign the button so they are about the same uh yeah we can assign uh i think 220 is perfect what happened oh okay sorry yeah it's there here uh do i have i i think we have ten more so we can call 2 to 0 this is the perfect place so yeah perfect so we can click odd and even it's near your hand at the bottom so it's easier to access now now to check for the order even numbers uh we could use something like a mod function take the number uh do the mod by two if it is zero that means it's even if it is not zero non-zero that's the uh odd number so for that click on even and first button so we are going to verify whether this number is even so the way we do it is by clicking on even then go here down here if because we are going to check the condition and we connect if again connect here and then uh if it is successful we will change the number and if it is unsuccessful will give a message for simplicity for wrong message for wrong answer we have a message for right it will just refresh with the new number so first alert and here in a text we can say please try again save so this is for the false condition and for a for correct or true condition we will just reload the number and that's it so for that we can call do the same thing what we did earlier so assign this page variable again only we only have one so that will be selected default formula going here and then again random integer between 1 to 99 and save and save now the mapping is fine but we did not really assign a condition like i said we need to identify whether it's odd or even that we can do in if so select if go to the condition here select formulas under formula the if should have should return either true or false so first we will use the mod function uh this one the dividend is the page variable so go page variable select random divisor is two and the reason we are using mod first is because i'm gonna copy and then i'm gonna call if now if the first condition so we say that equals 0 then it's an even number so return true else return false so we are saying mod my random number by 2 if equals 0 then it's true that means it's an even number otherwise it's false save and save so with this our first button should work so you can see uh it says please try again because this is an odd number and even has error message so the only way we can continue is by selecting or so let's go back and repeat the same thing under odd odd number so first in odd we need if condition so let's drag and drop if then we need a we need to set a page variable so let's do that and then alert on wrong answer we give alert so page variable same random assigned value again formula under formula we say random integer between 1 299 same save and in alert we give a message please try again save now if condition this if is similar to what we did in even but it's uh you know the other way around so we'll go to even we'll pick that formula and we'll just change true to false and false to true so we'll just reverse the formula so go here remove that and we will say if this is true instead false and instead false this is true save and save now if i switch my screen we have 54 that's even this is odd even odd odd odd odd even even even odd odd odd odd even even even odd and even so you can see it's amazing i did not even write a single line of code and we have this amazing app where you know kids can play with odd and even they can learn if they do a mistake it says please try again so they know for definitely it's another option so they go on the odd now similarly we can build uh we have odd event we also have times right so let's go to times now for times uh we will show a multiplication of two numbers numbers between one to ten one to twelve and one to ten or one to ten one to ten it's fine so uh a number between one to ten times a number between one to ten and then we will have again a similar like a two buttons like what we have here and then the button will have two different answers a correct answer a wrong answer so based on whatever they see here they can select one of the other button if if it is a wrong answer we'll show the message so they can go back and correct themselves if it is a right we'll refresh and we'll show a new number so let's do that so first thing we need a number so uh let's start with the container this time so our container we don't need this right now so let's lower it then we need a paragraph under container so paragraph we don't need the hard-coded text save okay again for a times we need four variables now two variables for two numbers and two variables for answers so let's add varia let's create variables so the first variable we'll call number one type number number sorry here number two again type is number uh third variable answer one and fourth variable answer two and same so we have four variables now we'll go back again on our view uh we already have paragraph here so we'll map this content using our two numbers so again we can go to formula select formula remove this load the page variable why there is no page variable here now these ones we can change to numbers as well numbers save we have those so let's go back select paragraph go to content formula page uh no page variables it's not showing this category has no variables currently available why did i create under oh okay yeah my bad so the variables which i created are under app variables and not the page variables so these are across the um app not specific page it doesn't matter where we create it's based on where we use so i could just recreate them or let's recreate for cleaner approach so remove remove remove then go to page variables and then add them here so this is number one type number save add number two type number save add y doesn't allow me to answer one again in number save and last one so answer to number save so now we have our page variables let's go back and continue what we were doing earlier so content formula select formula and we are going to build the first uh equation which we show on the screen so we'll pick page variables so i will pick a first number then we will add string space we'll show the sign multiplication sign plus we will add the second variable page variable so let's go add second and save and save so we can see it here now the same thing we will do for this alignment we'll put it in the center so let's go back here align itself in the center and we can push it down in the center by using dimensions and position go to position and assign 350 i guess yeah and see so we have this number right in the center we should go here go to multiplication tab we have it here zero zero uh let's increase the font size font size uh this is 100 sizes 100 okay 100 is too big for the screen so save 50 is fine i think we can even go further 80 now it is fine height also has to be save let's go there and check so this is good we have to pull little up so which we can do it by going back to position and okay pull the container instead the text so this is exactly like a webdin pro if you are from if you are familiar with webdin pro that is not different almost identical 300 so that's fine now we will use the buttons like what we did in a first example so let's bring a row we'll put row under paragraph here we have two cells let's drag and drop buttons too there we have let's change their colors again layout no background go there it doesn't matter because both the sides are going to show the result so let's have darker so it's visible on the white is visible on dark same thing here something different now okay so we have these buttons now we'll push the row down for a proper alignment again dimension and position and in position we'll set top let's say 200 okay 220 save let's go and check and perfect uh no we have we can add 20 more i see a difference on my phone which we cannot see it here but on phone i can see where uh where is this button here and there is a gap between the that bottom bar and the button and the button so right now is about five five pixels so that's fine it doesn't matter so now we have this uh number and we have these buttons so to generate these numbers again random we can do the same thing what we did earlier now we have to do it for two buttons instead one so select page layout go down here and on page focus we will set variable values so pick a set variable function here assign that and in this function uh we'll change our variable to number one save assign value formula again we'll use the random function random integer between 1 and 12 save and then we can do another one so let's connect that this time we'll select the second variable number two again the formula is the function is same only difference is we'll use one to ten one to ten save we could do one to twelve and one to twelve but one to ten is fine no one to ten and one two twenty so save now if i uh refresh it should show me a random number so every time when i change it shows me a different number so so we have working numbers now next thing is we have to show the answer on one button and the wrong answer on another button so for that uh so the by default whenever we uh so the first thing when we load the number we have to also determine the answer we have to do it here so for that let's set another page variable here connect that now we are going to set answer one which is already select pre-selected so we are good and the value uh will use a formula and the formula would be [Music] to find the correct answer so correct answer is easy but the thing is here we have to have a random answer so answer is same i mean answer is easy one number times the other number but we cannot show answer on one button we have to have a random answer sometimes here sometimes on that one and should be random so kids can guess for that i cannot just use simply multiply i cannot uh but what we can do is uh we can use a random function we can use a random function to find a correct or wrong answer and then the second button will have a value based on the first answer so if first is correct the second will be wrong if first is wrong then the second will be correct okay i think i wrote that somewhere so let me get that app i will save some time by loading that app so app caviar okay so we are on the first uh this one first answer so we are going to set the first one here go to formula under formulas i already wrote the formula so i'm gonna explain what it is copy put it here so we are saying if all the condition mod random integer between one to two to two so to randomize to find zero or one multiply number one times number two if this is true so since it's a random number between one to two so sometimes we'll have one sometimes we'll have two so sometimes this condition will be evaluated otherwise this will be evaluated this one is a number two minus one times number one so this is the wrong answer this is the correct answer but the answer is randomized by using a mod and a random function so this will always give a no this will produce either correct value or a wrong value now the second answer should be based on the first one so again we will set another page variable go here and this one is a answer two so for the second button select that and assign a value now in this case we have to check the first answer if that if the first answer is already correct then we have to have a wrong answer in the second if not then we have to show the correct answer so again i will copy this one too i have already prepared earlier formula remove this and this is also simple so we are saying if multiply first number times second number if that is the first answer then calculate first number times second number minus 1 else do first number times second number so basically instead randomizing we are checking answer of the first number and then we are taking second and uh second number so we are generating a second number save and save okay so now if we go there and let's see what happens okay yeah we forgot to assign those answers to the button label so let's go back these labels under properties are default label default labels so remove them and then we'll bind our data variable so page variable uh it says incompatible so whenever it says incompatible just go to formula select formula select page variable and select the page variable essentially it's the same thing you do it through a page variable or you do it through the function but for some reason it doesn't work if you go through that and variable so go to formula uh select uh okay remove that select page variables select answer two double click save save so now you can see we we see the uh placeholders here so we have this now save go back to our app go to multiply and we can see we have a wrong answer it's supposed to be zero okay this is correct this is wrong hmm correct wrong okay something is odd so let's go back um page layout so this is our first variable which is number one this is our second variable okay this is our answer one so our answer one is uh integer between our number one and number two page variables num1 num2 minus one so do we have the same page variables here num1 and num2 so yeah that's what we have so my first answer is a random integer between 1 to 2 by 2 that's a mod multiply page variable 1 times page variable 2 let's pull a page variable and see where is my page variable page variables page for num1 and num2 so this seems to be okay i don't know why it's not working so save save i will relaunch the app on my phone open mats and go here okay it's good okay it's good okay this is wrong supposed to be 24 so why is not there ah this is also wrong hmm yeah we have numbers it's just that it's not showing properly so let's maybe uh which also means the same thing okay okay okay we can see now we have a one result is correct so 4 10 6 28 okay so we have it now it's what yeah it's working so we have equation we have answers now we have to tally the answer so when user is going to click on this button or this button we have to see the result is as expected if it is we re reload otherwise it will show an error message so now to assign action select a button so we'll go here and we are going to check this we know this is a answer one so we'll check the answer one value is the same value here so for that uh get the oh no get the if condition here and connect the if if we are going to say uh here in conditions formula remove that it's a simple check so we are going to say first multiply it's easier to pick the variables page variable number 1 times page variable 2 so this is a multiplication and we'll use if now so get if condition is this equals page variable answer 1. then return true else return false save and save so this will give us a this will verify the result and then based on the return we are going to perform a different action so like we said if it is successful we'll reload everything so we can go back that means we'll reload those two numbers and we'll reload the answers but if it is a wrong answer then we'll show a message so let's assign that and then the message saying please try again save this one i did not do it so let's go and check go here and use the wrong answer oh but we assigned to only one so i use this button not that one so for that uh to reproduce we should have a wrong answer on the first button so let's see ah come on okay right now so let's select that says please try again because answer is here let's go back and then on correct answer we'll reload this variable so we have to reload two variables so go here select assign value formula select that random integer between one to nine no nine not ninety nine twelve uh let's take another for the second variable same starting here go there formulas formula random integer between 1 2 10. save and save so this will generate two numbers let's move this out so it's easier to understand and then the way we did it for uh when we did it for the page load the same logic here so we load the variables and then we calculate so if i go back to our page layout so these are the two variables then we calculate our answer one then we do our answer two so let's copy this formula we need it and at least i don't know how how i can copy the entire thing here for now so uh add another variable we are going to load answer one which is correct we'll use formula formula remove that put our formula here save take another variable now this one is the second so let's go page layout select this copy this value here from here go back select that assign value formula change the formula here if i'm too fast you can stop and you can go back and you know watch again okay so our this button is ready so let's go back and see what happens so uh nine times five it changed but this did not change the numbers why yeah okay here okay so this number did not change for whatever reason uh here oh because i did not select here so i have to select this uh number one save and this is number two say say let's go back multiplication 24 ah that is not correct we didn't set any we didn't do anything on that button okay there we are uh we didn't why didn't refresh this one answer two so let's go back and see yeah it's still not saying answer one so let's change this one save let's go back there we don't have anything in there yet this is correct uh that is answer but we don't have a value there okay so it works fine we just have to do the same thing here in this button so from here we start over again if condition is the first condition so if i'm sure this is a long video but i can help so copy go here and just use the same formula here say uh then we are gonna create a alert so we don't have to copy anything for all that we can just please try again save and then bunch of page loads now we can duplicate those by the way there is a duplicate button here so first first variable second variable this is number one number one save this is number two save uh we'll copy the formula from here for number one and number two so save let's go here basically it's just the random number between one to ten one to twelve in the first and second one to ten copy go there second formula okay save this one is connected uh here so let's do the same thing there and then the output needs two more uh variables answer one and answer two so that's sensor one we'll join that and create another answer to we'll bring the condition from here again same condition no change so come back answer one is good formula select that save go back pick the answer to here copy come here now we have to change answer two here so answer two save unassigned value formula zero remove that assign this and save now we should have fully functional app one times two one ah two ah why uh [Music] okay because the second button if condition is based on so if we go to our if here we're checking against answer one this should be again sensor two because we are on the second button save go back times 10 8 20. so there we have for some reason is randomizing on one sometimes this with just a second so that's all so we have now two functions we have odd and even which is pretty awesome to play with and then we have this multiplication function where we can verify the results on the fly and this can be deployed on any mobile device all you have to do is download the app gave your preview preview app log in with the same qr or you can just scan this qr code and you're ready to go so that's all for this video in next video we will add more tabs maybe you know division uh function add and subtract probably okay thank you

Channel: Shankar Gomare

Views: 801

Keywords:

Id: H1MaVClfubE

Length: 53min 22sec (3202 seconds)

Published: Sun Oct 10 2021