Cloud Developer | Low-Code Development

Low-Code and On-Device

Build mobile apps with Oracle Application Builder Cloud Service.

Shay Shmeltzer


In my previous Oracle Magazine article,High on Power, Low on Code,” I gave you an introduction to developing web applications with Oracle’s low-code cloud development tool, Oracle Application Builder Cloud Service. I showed that Oracle Application Builder Cloud Service’s responsive UI templates and the ability to customize specific items to display in specific ways on different devices makes it easy to deliver an application that runs across multiple devices with a variety of screen resolutions and sizes.

However, if you are aiming for an even better user experience for mobile users, you can create on-device mobile apps with Oracle Application Builder Cloud Service. These applications install and run on the device and provide a native look and feel, mobile-optimized gesture support, and the ability to leverage device features such as geolocation.

In this article, I’ll show you how Oracle Application Builder Cloud Service helps you create on-device mobile apps with ease. You’ll build a simple expense reporting application that will enable you to monitor and add expenses directly from your device. In addition, this article’s demonstration video shows the steps for building the application and the Oracle Application Builder Cloud Service features described in the article.

To walk through the article steps, sign up for a free trial account for Oracle Application Builder Cloud Service. Get your account at Oracle Cloud.

Creating Business Objects

The first thing you’ll do is create a custom business object that will store your expenses data. To do this, create a new web application in Oracle Application Builder Cloud Service (click New Application), name it Expenses, and choose the defaults in the rest of the application creation wizard. With the application created, you’ll be taken to the page designer, where you can design your web UI. Note that if you just want to create business objects, you can go directly to the data designer and define your objects there. For this article, however, you are going to create a web UI too.

Drag a collection table component into the page designer, and create a new business object for it. Name it Expenses. Define fields and datatypes for this object according to the following list:

  • Name – text
  • Cost – currency
  • When – date

Click Finish, and click the run arrow (in the upper right) to run your web application.

You can now create a few expense entries, as demonstrated in the video. With the expense data entered, go back to the design environment.

To enable a mobile application—such as the one you will build next—to access the same Expenses business object, go to the main menu, select Application Settings -> General Settings, and enable resource sharing. This tells Oracle Application Builder Cloud Service that the business objects you created in this web application can also be accessed from other mobile applications that will be created. Any logic you define for the business objects will also be applicable automatically in your mobile UIs.

Next, stage and publish the application. From the main menu, select Stage. Choose to copy the development data you already inserted for both the staged and the published application, and click Stage. Again from the main menu, select Publish, choose to include data from Stage, and click Publish.

Now you are ready to create a device-resident mobile-optimized app that accesses the same data.

Creating a Mobile-Optimized Interface

Navigate back to the home page of Oracle Application Builder Cloud Service, and click New Application. This time choose the Mobile option, as shown in Figure 1.

Figure 1

Figure 1: Creating the mobile app

The application creation wizard will guide you through the steps of defining your application. First choose a name for your application, such as Mobile Expenses.

Next choose the template you would like to use for the first screen of your application. Oracle Application Builder Cloud Service offers a set of mobile-optimized page templates for pages, based on design patterns created by Oracle’s usability group. Choose the Simple Screen template for the first page, as shown in Figure 2.

Figure 2: Choosing the Simple Screen template for the new mobile app

Enter Expenses as the Screen Title for this page. Then choose a layout for the page. You want the app to show a list of all the expenses, so choose the List layout.

Complete the wizard, and click Create. The visual mobile UI designer opens, as shown in Figure 3.

Figure 3: The newly created mobile app in the visual mobile UI designer

Just as in the web designer, the visual designer includes a “what you see is what you get” center area that shows your UI inside a mobile device. On the right, you’ll see options to set properties, add data, and add related forms to your app.

Click Add Data on the right. You’ll see various styles of the list component. Choose the simple title and subtitle list type, and click Next. Click Add Application, and then click the Expenses web application you created earlier, as shown in Figure 4. The Expenses application includes the business object you want to show in the on-device mobile app.

Figure 4: Choosing the Expenses web app

Now choose the fields you want to show as the title and the subtitle—choose Name and Cost, respectively—as shown in Figure 5. You can click the Live Data Preview button on the right to see a preview of how the actual data will look in the app.

Figure 5: Selecting the title and the subtitle

Click Next and Finish. You can now see your page with the live data in the visual editor.

Now create a detail screen where you can see more information about a specific expense report.

Click Add a Detail Screen on the right, and then in the following steps, choose the Simple Screen template, enter a title—Expense Details—for the page, choose the Form screen type, and click Finish. The wizard adds the detail screen and links it to the list’s finger-click gesture automatically.

Select the page navigation hierarchy button on the left to see the connection between the two pages, as shown in Figure 6. Then double-click the Expenses Details page to refine its content in the visual editor.

Figure 6: Viewing the page navigation and selecting the Expenses Details page

Click Add Data on the right, choose the Expenses object, and shuttle the fields you want to display in the order you prefer—as shown in Figure 7—and on the last page of the wizard, click Finish.

Figure 7: Adding data fields to the Expenses Details form

Click the page navigation hierarchy button on the left to see the connection between the two pages, and click the List (Expenses) page. Click Add a Create Screen on the right to add a Create screen for the application. You can learn how to further refine this page and add more customizations, such as tabs and charts, by watching the article’s video. Additional customization instructions are not included in this article.

You are now ready to run the application.

Testing and Running Your Application

To run the application, click the run arrow at the top right. Your application shows up in the browser inside a mobile phone emulator (see Figure 8). You can navigate through the app and see how it is going to look on iOS as well as Android phones. Note that the application adopts a native look for each platform. This functionality is achieved thanks to the Oracle JavaScript Extension Toolkit (Oracle JET)–based user interface and its ability to render native-looking components, based on the operating system of your mobile phone.

Figure 8: Running the mobile app in an emulator in your browser

The next step is to run the application on your device. To do that, first download Oracle Mobile Application Accelerator from the app store for your operating system. Next, in the Oracle Application Builder Cloud Service web UI, click Test on Phone (at the top right) and then click Build Test Application. This will package the application for download, and when the packaging is done, the screen displays a QR code, as shown in Figure 9.

Figure 9: The packaged app, ready for download to your phone

Invoke Oracle Mobile Application Accelerator on your device, tap the + sign, and use your device’s camera to scan the QR code. The application will download to your device, and you’ll be able to test it on your phone, as shown in Figure 10.

Figure 10

Figure 10: Your new on-device mobile app running on your phone

From now on, when you invoke your Oracle Mobile Application Accelerator application, the expense application will be there.

Summary

As you saw, you can use Oracle Application Builder Cloud Service to create and deploy an on-device mobile application without coding. This article only scratched the surface of what is possible with the new mobile development capabilities in Oracle Application Builder Cloud Service. Now it is your turn to dig deeper: sign up for a trial of Oracle Application Builder Cloud Service, and start exploring.


This article was originally published in Oracle Magazine May/June 2017.

Shay Shmeltzer is director of product management for Oracle’s development tools and frameworks. He is focused on helping developers simplify and streamline their work by leveraging the right tools and technologies.


Next Steps