Build your own mobile app

OutSystems Mobile - Jumpstart Exercise 2

Step 2
Open Development Studio

1. Open Development Studio

2. Be awesome and build your own mobile app.

2
Install a Template
Use a pre-built template provided
1. Download from the dropbox a pre-built template (Template_MyStoreMobile.oml), open it on the
Development Studio and publish it

3
Step 3
Create a New Mobile App

1. Create a New Application, choose Mobile App and click Next

You can select Web or Mobile App. You

2 should choose mobile when you want to
create an optimized experience for mobile
1
devices, with touch friendly behaviors, etc
and leverage the device features such as
geo location, camera, etc

4
Step 4
Choose your theme template

1. Select MyStore Template

and click Next
1

Templates are way to package and reuse

consistent branding and architectural patterns
such as authentication, across your
development teams. Template includes:

○ Branding
○ Security 2
○ More Patterns
○ Predefined links to core services

5
Step 5
Upload an icon and application name

1. Upload an icon for your app and select a base

color palette to your theme;
2. Create a module for your application
2. Choose a name like “MyStore_XXXX” where XXXX
will be our lab group number 6
Step 6
Prepare your Data
1. On logic tab, consume a REST service by importing all methods. This is an API of a Product Catalog. Use the
one you have previous created (on Exercise 1): https://MY_REST_API/ENDPOINT/rest/Products/swagger.json

3
7
 Step 6
Prepare your Data
1. Choose “Add all methods” and input the REST API URL
2. (i.e https://MY_REST_API/ENDPOINT/rest/Products/swagger.json )

8
Step 6
Prepare your Data
1. Notice that the structure is automatically created via the introspection of the REST service

9
Step 7
Prepare data for local storage

1. On data tab, create a new entity called “Products” 1

under “Local Storage” and copy all the attributes
from the structure “ProductTemplate” 2

This is how we design the data model for the local storage
for offline usages. Please make sure that all text attributes
from the “Products” entity have at least 500 char of
length, namely:
- ProductName 3
- Picture
- Category
- ProductDescription 5
- DistributorLogo
4
10
Step 7
Set the sync logic
1
1. On logic tab, select
the “OfflineDataSync”
action

2 This is how we design the data

model for the local storage

11
Step 7
Set the sync logic
1. Let’s use a simple “delete all - create all” synchronization pattern
2. For that you just need to drag from your “Products” entity in local storage the “DeleteAllProducts” action
to the flow of “OfflineDataSync”

2
12
Step 7
Set the sync logic
1. Drag the “ListProducts” from REST services (from logic tab) we’ve just integrated into the flow

13
Step 7 Set the Mapping and Updating of local storage
1. Drag the “CreateOrUpdateAllProductss” from “Products” entity into the flow
2. Assure the mapping between what is returned from the service “ListProducts.Response” and the expected
“Products” entity. You can use the “Ctrl+Space” to autocomplete expressions inside Expression Editor.

1 4

14
Step 7 Set the Mapping and Updating of local storage
1. Assure the mapping of each field from the service and the “Products” entity

15
 Step 7 Trigger the Offline Action

1. Go to the interface tab on the “Splash” page under “Common” folder and double click the “OnLoadComplete” action

16
Step 7 Trigger the Offline Action
1. Now click in the logic tab and drag the “TriggerOfflineDataSync” action to the “OnLoadComplete” flow
This will assure that during the loading of the application the data is synchronized to the local storage

17
Step 8 Build the digital Experience
1. Go to the interface tab and double click the “HomeScreen” inside “MainFlow” page folder
2. Then let’s fetch the data to feed in the screen from the local storage, for that right click and select “Fetch
from local storage”
1

18
Step 8 Build the digital Experience

1. Drag the “Products” entity to the aggregate screen, this will bind the screen and the data.

19
 Step 8 Build the digital Experience
1. Back to “HomeScreen” page, lets use the available widgets to show our data, start by dragging the “List”
widget to the screen
2. Check if the “HomeScreen” page is set to Anonymous

2
1

20
Step 8 Build the digital Experience

1. Bind the data to the UI (you can accept the suggestion to bind to “GetProductss.List”)
This will assure that the data is available to use from this screen

21
Step 8 Build the digital Experience

1. Now let’s customize the way each item is presented in the list
2. Drag the “list item” into the list on the UI

22
Step 8 Build the digital Experience

1. Now let’s use a custom mobile weblock called “ListItemLeftImage” and drag him on top of the “list item”
2. Add “Image” widget by drag and drop it on the card
3. Fulfil the content of the card with product name and category (drag and drop attributes from the entity)

23
Step 8 Build the digital Experience

1. On the “Image” placeholder change the image source to “ExternalURL” and point to “Picture” record

24
Step 8 Build the digital Experience
1. Click in the “ListAction” and point to “New Screen” onClick event, then rename the screen to “ProductDetail”
2. Rename the button name from “Action” to “View Details”

25
Step 8 Build the digital Experience

1. Right click in the “ProductDetail” page and select “Fetch data from local storage”

26
Step 8 Build the digital Experience

1. Drag the “ProductId” input variable to the Aggregate so we can bind that information to the UI

27
Step 8 Build the digital Experience

1. Back to “ProductDetail” page, let’s customize the screen template and replace it with a custom one by going
to the widget tree and delete the layout

28
Step 8 Build the digital Experience

1. Drag the layout profile from MobileWebBlocks to the screen. With this we’ve replaced the current layout
with ours

29
Step 8 Build the digital Experience

1. Drag the “ProductProfileInfo” mobile webblock to the screen

2. Then, fill the both bindings to bind the Data to the UI (GetProductById.List.Current.Products)

30
Step 8 Build the digital Experience

1. Still in the “ProductDetail” page set the security of the page to “Anonymous” as this is a public journey

31
Step 8 Build the digital Experience

1. Drag a button from the widget library, rename it to “Buy Online” and resize it to fill up all page width

32
Step 8 Build the digital Experience

1. Set the “On Click” action from the button to a “New Screen” and rename the screen “ConfirmPayment”

33
Step 8 Build the digital Experience

1. Add a new input parameter “ProductsId” for the screen “ConfirmPayment” and change its type to “Products
Identifier”

2
34
Step 8 Build the digital Experience

1. Right click in the “ConfirmPayment” page and select “Fetch Data from Local Storage”, then drag the
“ProductsId” to the aggregate.

35
Step 8 Build the digital Experience

1. Go to the “ConfirmPayment” page and drag the “ConfirmPurchase” weblock from “MobileWeblocks” folder
2. Bind the data to the screen with “GetProductById.List.Current.Products”

36
Step 8 Build the digital Experience

1. Still in the “ConfirmPayment” page set the security of the page to “Anonymous” as this is a public journey

37
Step 8 Build the digital Experience

1. Drag a button from the widget library, resize it to full width and rename it to “Confirm”
2. In the “On Click” action from the button point to the “Thank you” page

38
Step 9
Deploy it and test it

1. One-click Deploy your app

39
Step 9
Deploy it and test it

1. While deploying the system will generate standard code (.NET/Java, HTML5, CSS3, React, JS, SQL,...), not
only for the backend but also for the frontend of the app.

40
Step 10 Test it on OutSystems Now

41
Step 10 Native build (iOS and Android)

1. Ask for help to configure the iOS and Android native builds

42
Congratulations
You have successfully built an mobile app!
This material is owned by OutSystems and may only be used in the ways described in this Copyright
Notice:
1. You may take temporary copies necessary to read this document
2. You may print a single copy of this material for personal use
3. You must not change any of this material or remove any part of any copyright notice
4. You must not distribute this material in any shape or form

Copyright