In this blog post I will teach you how to build your own fun game app with zero code, using one of SAP’s most recent and (according to me) most exciting acquisitions, AppGyver. Fun much? Read along. |
It’s been 2 decades since the world got going with “apps”. It started of course, like all good things do, with a game. This one called Snake, was played on the ancient Nokia sets of yore, complete with dot-matrix display and monotone sounds. A game that was, if you’ve played it, in equal parts addictive and frustrating. People who build apps for a living (like I do), will tell you that process is also much of the same - addictive and frustrating. But it’s addictive because it’s fun to think it through, and not because it’s fun to code. What with DevOps, the language coulis (of html, CSS, JavaScript and what not) and annoying blog posts that preach “3 steps to becoming a programmer” - the hoops a beginner jumps through to bring an app to life stretch on endlessly. It doesn’t help that 5 year olds have taken to coding apps lately.
Which is why, a decade after apps sprung into public consciousness, opening with them the pandora’s box of DevOps & coding , Appgyver came along and said why bother. Let’s build apps without code. Let’s spend our time on the addictive part of app building, and weed out the frustrating parts please.
Latest news around SAP acquired AppGyver , AppGyver joins SAP and other related stories .
And so, as an ode to “Snake”, the one that kick started the app craze, in this blog post I will teach you how to build your own fun game app. This one is called Memoir. A storytelling platform, where you pack your story into just 6 words. Through a format that has been used as a tool in hospital wards, public art projects and even prayer, many have breathed life and their imagination into 6 words. Throw this open to your co-workers, your friends, your family - and capture a slice of their thoughts. Fun much? Read along.
So how can you build this app? Few simple steps, no code, curiosity and a laptop. Here goes…
STEP 1 – Let’s Get Started
Sign up for free in AppGyver to use composer pro platform for development-
After you are successfully signed in, create a new app by giving project name:
Once the app is created, you can see the composer which we will use to develop the app.
Drag and drop the highlighted control (I have removed the paragraph control and changed the property of header title from property panel)
Change the properties of component
Time to preview the app on web – open the launch window for the top options and click on open app preview portal.
You can also preview the app on your phone or tv by downloading the AppGyver app form playstore/Appstore.
STEP 2 – Let’s add the data resource now.
You can learn about all the type of data resource available in AppGyver documentation
In this tutorial, we will use AppGyver cloud storage, which is a development only MongoDB-based database.
Save the app and go back to the UI screen editor (keep saving your app after any changes and preview)
STEP 3- Bind UI component
Add data variable
Select “new data record” for data variable type because we will be creating a new record in database using this data variable binding.
Select the input field and check the properties tab, bind the value of the input field to data variable.
STEP 4 – Create record
Select the button and open the logic panel for button from the bottom of the screen.
Once you open the panel, component tap event is already added for button. Next step is to connect the event to create record. From the logic pane in left, drag the create record node and drop. Connect the event and data as shown in the below screenshot.
Now select the create record name and focus on the property panel on the right. Resource name is added to our db, time to connect the property as well.
Click on the record properties binding button, this will open the window to bind-
Then select data variable option and select the data variable field-
STEP 5 - Bind control with repeated items
To show the collection of record, we need to create another data variable with collection of record as property which can be binded to the card content.
Open variables pane, go to data variables section, add data variable and choose “collection of data record” as data variable name.
Go back to the view and select the card control and focus on the properties of the card.
Let’s make the Title blank and bind the content. Open the binding pane for content and choose “property of data item in repeat”.
“Open repeat” with binding and bind to our newly created data variable.
Keep previewing your app and check all the functionalities.
We covered creating a record in database and also reading from it via binding.
STEP 6 –Update record after navigating to new page
Open page panel from the top left of your screens -> create a new page
Let’s add the input control for editing the story and update button to update the record and also the title on top with the story text.
Our controls are ready, now we need to bind the value of these controls form the navigated story values.
Create a page parameter for the details page which should take the parameter form the memoir page while navigating. Name the param as “id”, we will pass the id while navigating.
For navigating form the memoir page to details page,Open the memoir page and select the card control -> open the logic panel
Drag and drop the “open page” node and connect to component tap event.
For passing the ID, open the id binding from the property binding and select “property of data item in repeat”
This will pass the current ID to the detail page while navigating.
Open the detail page and let’s bind the properties and update the record.For that we need to create another data variable used for update with different variable type and map the id to our page parameter.
Go back to the view editor and bind the input field value to our data variable to show the story.
Update Record –
Open the logic pane for update button. Drag and drop the “update record” node and connect. Bind all the required properties
Preview the Application
Deploy - Web distribution
Distribute the webapp – open the launch screen.
Give the required inputs and build!
After the build is completed, you can access your app on AppGyver's cloud under appgyverapp.com subdomain. Add the name you defined while building configuration.
Additionally, check AppGyver Documentation to know about how to download the web app as zip and how to host on your own server?
Our zero code fun game app with AppGyver is ready!
Please share your thoughts on this and let's explore more scenarios and capabilities of AppGyver together in my next blog posts.
Learn more about all the features of AppGyver by exploring the AppGyver Academy
- SAP Managed Tags:
9 Comments
