Innovation Hub
An initiative by Al Bayat Mitwahid in UAE
Course 2
Making an “Memory Stream” app
Create a working app prototype where users can create posts about things that are important to them. You will create functions that let users sign in, write and save posts, and view their saved items.
Unit 2 – Making it work
Lesson 1 – Creating more functionality
In this lesson we will add some more functions to your app, including a profile picture.
It is quite common to show the profile photo of the user at the top of the page, often with their name or username. You can add a profile photo to the top navigation bar of each screen. Go to a screen and click the navigation bar component. On the left menu, scroll down to the Profile Photo setting and turn on the slider button to show the photo. Under the Image setting, select “Logged in User > Profile Photo”. Do the same thing for each navigation bar on each page.
You can also show how long each profile has been a user. Add a text box component and place it on the top navigation bar next to the profile photo. Change the text to say “User since:”, and then user magic text to add “Logged in User’s > Created Date”.
You also need to group the text box and the navigation bar so that it will show. Hold the shift key and click on the text box, and then the navigation bar, so that they are both selected. Then click Make Group on the left menu.
A useful feature for apps like this can be small reminders and encouraging notes to help users remember to add entries. On the activities page, add a text box and use magic text so that it says “You have created Logged in User > Activities > Count activities so far”. This will show the total number of activities that the user has added.
​
​
So far we have used a form on the same page as the list of items, but often apps use a new screen or modal screen so that the form opens with a button. This is similar to when we added a modal screen for our restaurant details.
Go to the Books to Read screen and add an Action Button. Create an Action for that button using the left menu. The action should be a Link > New Screen. On the popup menu, find the modal screen under the Create section. Name the new screen “add book”. Make the transition for the button “Modal”.
Now copy the form from the Books to Read screen, then paste it onto the new “add book” modal screen you just added. Delete the components you don’t need. Add a new action on the submit button of the form to take the user back to the last screen when they click it.
Well done, you have now added extra features to your app. Test the app and if you like how these features work, see if you can add some more of your own.
