1. OpenWorld 2018 How to Develop Mobile Applications with Visual Builder Cloud Service
Quick Bite: TRN6517
J. David Mills
Cloud Delivery Lead – PaaS Oracle University
October 24, 2018

2. Safe Harbor Statement
The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, timing, and pricing of any features or functionality described for Oracle’s products may change and remains at the sole discretion of Oracle Corporation.

3. Oracle Visual Builder Cloud Service
Oracle Visual Builder Cloud Service is a cloud- based software development Platform as a Service (PaaS) and a hosted environment for your application development infrastructure.
Oracle Visual Builder Cloud Service provides a visual development tool and hosting environment for business users without programming experience who want to build custom enterprise applications.
Building Cloud Native Applications using Visual Builder

4. Value Proposition Empower business users to create applications.
Accelerate time-to-market for application delivery.
Reduce infrastructure management costs and time.
Reduce workload on IT departments.
Building Cloud Native Applications using Visual Builder

5. Use Cases Inter-departmental, opportunistic applications.
Replace spreadsheets with modern web applications.
Custom UI (Extension) for SaaS services.
Mash up rest services with custom data.
Customer Survey
Hardware Requisition
Vacation Request
Issue Tracker
Team Worklist
Social Media Activity Dashboard
Product Release Checklist
Contact /Information Request
Employee Evaluation
Field Workforce Tracker
Resource Reservation
???????
Building Cloud Native Applications using Visual Builder

6. First Time User Tour - Landing Page
For the purpose of this QuickBite, we’ll select “Classic Applications”
Building Cloud Native Applications using Visual Builder

7. First Time User Tour - Landing Page
The Landing page is the primary console for:
Managing applications
Creating new applications
Building Cloud Native Applications using Visual Builder

8. VBCS Mobile Application
Introducing Mobile Application Accelerator (MAX)
Quickly develop a mobile application with MAX.
Leverage your VBCS assets.
Iteratively develop mobile applications.
Mobile Application Accelerator (MAX) enables anyone to build mobile apps without using any code. MAX users build line of business apps by using the intuitive MAX UI. They don’t need to know platform-specific languages to build these apps, nor do they need to know anything about Oracle’s mobile cloud service. Specifically, they don’t need to know anything about custom code APIs. Although the mobile apps that are built with MAX are created from custom code APIs, MAX users aren’t expected to know anything about APIs or REST concepts such as resources, methods, or endpoints.
Building Cloud Native Applications using Visual Builder

9. VBCS Mobile Application
Create Application
Wizard format
Five Steps
Name
First Screen
Screen Title
Content
Review
Building Cloud Native Applications using Visual Builder

10. Creating Screens from Templates
Design applications by using templates.
Use predefined layouts for each application page.
List
Form
Dashboard
Customize layouts to suit your own design.
MAX helps you build the first page of your app by stepping you through a wizard. This wizard lets you name your app and pick the basic layout for the first page, like a list view or a dashboard. By completing this wizard, you’ve set the basic structure for your app. MAX then opens the Designer, where you can complete your app. At this point, your app is viable even though it’s not yet displaying your data—you can run it on a device and use its built-in navigation functions, such as opening and closing the main menu. Dashboards can give your users a bird’s eye view of the information that they need by assembling metrics, KPIs, and data visualization tools onto a single screen. Typically, you’d position a dashboard as the first screen in your mobile app to give users a quick glimpse of their stats.
Building Cloud Native Applications using Visual Builder

11. Developing the User Interface
WYSIWYG UI design
Drag-and-drop of components onto screens
Runtime previews of screens with sample data
Variety of components:
List
Chart
Gauge
Media
MAX provides you with a set of UI components that are optimized for mobile apps. They include layouts for forms and itemized lists as well as data visualization tools such as charts and graphs. You can drag these components from the Component Palette to Preview. You can then configure how they display and use data by using the Properties Inspector. You can arrange your data on the screen by using the List and Layout components, and then visualize your data as various charts and graphs, such as pie charts, scatter charts, and bubble charts. Gauges can also be used, and are measuring instruments that indicate a quantity, such as sales, stock levels, temperature, or speed. Gauges identify thresholds by using colors.
Building Cloud Native Applications using Visual Builder

12. Defining the Screen Flow
Easily work with the screen flow in a diagrammer.
Add screens to or remove screens from the application.
Navigate and work on individual screens.
A screen flow diagrammer lets you see how all the screens in your app are related to one another in terms of application flow. Every screen that you add gets included in this diagrammer and using Actions, you can determine how the screens are invoked or dismissed.
Building Cloud Native Applications using Visual Builder

13. Binding Data from VBCS with Business Objects
Access the MCS APIs for data usage.
Use wizards to populate screens with data.
Easily populate parameter values.
Refine field types (Image, Select, and Text Area).
MCS introspects API payload via schema definitions.
Without services, your app cannot display any data at all, including the mock data that helps you build your screens. Business objects represent data as real-world entities such as people, places, events, or business processes. They describe various aspects of the data and how (or where) it can be used. They represent items in the data collection that support your mobile app. For example, suppose that you are creating a mobile app that enables field service technicians to both respond to and track customer incident reports (IRs). You’ll need the app to display the number of IRs assigned to a particular user. You’ll also want to show the customer for that incident and display information such as their name, address, and contact details.
Building Cloud Native Applications using Visual Builder

14. Sharing Business Objects
To enable a mobile application to use business objects:
Publish the web application that contains the business objects.
Enable resource sharing for the web application.
Main Menu > Application Settings > General Settings
Sharing: Application Shares Resources.
Building Cloud Native Applications using Visual Builder

15. Support for CRUD Operations
Create Read Update Delete
Manually add details, create, and edit screens for your application.
Use Quick Start to:
Add Details screens
Add Edit or Create screens
Add data and parameters to screens
The QuickStart Wizard helps you with your development tasks, such as adding data to a UI component or creating edit and details screens. QuickStarts vary depending on what you’re building. For example, if you start off by choosing a List template, MAX will help you complete that list by providing wizards that prompt you through adding the data that displays in the list, creating a details screen that users see when they tap a list item, and adding other functions that users expect, such as updating an item or creating a new one. You can find out more by taking a look at Use Case: Creating a List Using QuickStarts. You don’t have to follow these QuickStarts—you can dismiss them by clicking the QuickStart icon if they don’t apply or if you can complete the task on your own.
Building Cloud Native Applications using Visual Builder

16. Refining Components with Properties
Available for:
Screens
List and Forms
Fields
Charts
Multiple properties depending on the type of component
You can use the Properties Inspector to configure your UI. In addition to adjusting the look of any selected UI component, you can also use the Properties Inspector to add data to your component, or to configure your component to trigger an action, such as a tap gesture to open a screen or send an . Depending on the component that you’re currently working on, the Properties Inspector lets you change the display, data, or triggered actions.
Building Cloud Native Applications using Visual Builder

17. Including Gestures to Invoke Actions
Modify the UI with properties.
Include a specific GUI behavior:
Swipe
Tap
Invoke actions:
Open Dialer
Send
Load Screens
The Actions tab allows you to link your screens together in a flow by using specific gestures. You can choreograph how your screens interact with one another by configuring how your app responds to changes in field values or to user interactions such as tap and swipe gestures. For example, you can create a tap gesture that triggers a business object action and screen navigation. Some actions are automatically created for you when you create the footprint for your app or when you complete the Add Data or Add a Detail Screen QuickStarts.
Building Cloud Native Applications using Visual Builder

18. Testing in a Browser or on a Device
Build and deploy your applications.
When ready, publish them.
Test in the MAX browser or tester.
Deploy to devices by using the Mobile Application Accelerator application.
You can preview your app in a hosted simulator or on a device at any point after you’ve created its first screen. The Test tool lets you use the simulator to see how your UI displays live data. You can also test out screen navigation and the actions that you’ve configured for UI components. Testing your app on an actual device gives you a better picture of how your app will function on different platforms, operating systems, and device models. Unlike an emulator, which approximates user experience by using a mouse, you can use actual tap and swipe gestures to navigate through your app’s screens when you run it on a real smartphone. You can also find out how your app interacts with actual device services, such as the phone or the contact list. You need the MAX App to run your app on a device.
Building Cloud Native Applications using Visual Builder

19. Testing and Running Oracle MAX Apps
Use the Oracle Mobile Application Accelerator application to test on a device.
Download and install from iTunes or Google Play.
Load your MAX application onto a device by using QR code.
You can run your mobile app on an actual device only by using the MAX app, a container that allows your app to not only display its content and leverage device services, but also behave identically to other apps that were developed specifically for iOS or Android devices. While the MAX app provides a consistent user experience, it also allows users to install your app. Because of this, all your users (app testers and actual users alike) need to install the MAX app on their devices. You can install the MAX app from both the App Store and from Google Play.
Building Cloud Native Applications using Visual Builder

20. Building a Test Application
Building Cloud Native Applications using Visual Builder

21. Generating a QR Code
The Mobile Designer generates a QR code when the build finishes.
Building Cloud Native Applications using Visual Builder

22. Sharing Your App
You need to distribute a QR code to your users along with the name of your app.
You don’t need to publish an app to test it on a device.
The Mobile Designer generates a QR code that you can use for testing purposes.
You can distribute this code by sending a picture of it to your testing group.
The group members can scan this code every time they need to install a new iteration of this app.
Building Cloud Native Applications using Visual Builder

23. Downloading and Installing the MAX App from Play Store
To test on devices, download the MAX app from the Google or Apple Play Store.
Install the MAX app in your mobile device.
Building Cloud Native Applications using Visual Builder

24. Scanning the QR Code Click Scan (+) to scan the QR code.
Click Application.
Enter your username and password if you are prompted. The test app appears in the MAX app.
Navigate to your application.
Building Cloud Native Applications using Visual Builder

25. Publishing Your Mobile Application
Simulator to see how your UI displays live data.
Ability to log in to the mobile application.
Navigation to all pages.
Mobile and Tab views.
Before you begin real-world testing, you must install the MAX app onto any device (IOS or Android).
Building Cloud Native Applications using Visual Builder

26. Application Properties
Open an existing application.
Create a duplicate application.
Rename an application.
Import and export an application.
Create a new version.
Stage an application.
Publish as a template.
Delete an application.
Building Cloud Native Applications using Visual Builder

27. Application Status Status Description Development
All new versions of an application and is used if the version has not been staged or published
Staging
Recently staged this version of the application.
Live
The application is published, and is now read-only.
Live Locked
The application is published but is currently locked and cannot be opened in your browser.
Obsolete
The version was published but has been superseded by a newer version. Obsolete applications are read-only.
Building Cloud Native Applications using Visual Builder

28. Application Status
Building Cloud Native Applications using Visual Builder

29. Learn More Help Center Tutorials
Create a mobile application in a visual application
Create pages in the mobile application
Import sample data for use in the mobile application
Add pages for data manipulation to a mobile application
Build a mobile application for the Android platform
Build a mobile application for the iOS platform
Publish a mobile application
Oracle Learning Library: Develop a Mobile Application in VBCS
Mobile Development on Oracle Cloud

30. Try Visual Builder Cloud Service Today
Get Started with Oracle Cloud Platform for Free 
Up to 3,500 free hours
Build production-ready workloads by using a variety of cloud services including Database, Compute, Blockchain, IoT, Big Data, API Management, Integration, Chatbots, and many more
Create a Free Account
USD300 Free Credits* available in select countries and valid for up to 30 days
Visual Builder Cloud Service
Rapidly create and deploy engaging Web and Mobile apps directly from the browser using a visual browser-based development environment.

31. Cloud Learning Subscription

32. Q & A Call to Action (time permitting) Learn More @Oracle University
(time permitting) 32