Oracle Visual Builder Cloud Service Revealed: Rapid Application Development for Web and Mobile

By Sten Vesterli

Build and deploy an attractive, user-friendly web or mobile application in one day or less using Oracle’s new, low-code development tool: Visual Builder Cloud Service.
Today’s IT world is fast-paced, and the ability to rapidly deliver running code is the most crucial and sought-after skill a developer can have. Oracle has brought together their enterprise experience, advanced usability knowledge, and their best cloud engineering to produce an innovative platform giving developers unprecedented productivity.
You will learn how to use all aspects of Oracle Visual Builder Cloud Service to build web or mobile applications. Using the fully browser-based development environment, you’ll gain experience with all the modern user-interface components that the tool offers for a visual, user-interface-driven, development approach. You'll also see how to use the integrated data management capabilities and existing REST data services to store your data, and learn how to easily transfer applications to a test/staging environment and later to production, while continuing to develop the next version in the development environment.

What You'll Learn

• Build great-looking web and mobile applications in a browser-based, visual design environment
  
• Define custom business logic in the visual logic editor or with JavaScript
  
• Manage multiple concurrent application versions from development through staging and production
  
• Define business objects with validation logic for application-specific data
  
• Communicate with, and draw data from, existing REST web services
  
• Use Visual Builder Cloud Service to expand Oracle SaaS solutions
  

Who This Book Is For
Developers at all expertise levels as well as business professionals and UX designers with an interest in using IT to quickly solve simple business problems. Because this tool is based on a modern low-code approach, no prior programming experience is necessary to benefit from the book.

• Language: English
• Publisher: Apress
• Release date: Jul 10, 2019
• ISBN: 9781484249291

Book preview

© Sten Vesterli 2019

Sten VesterliOracle Visual Builder Cloud Service Revealedhttps://doi.org/10.1007/978-1-4842-4929-1_1

1. Building Your First Web Application

Sten Vesterli¹ 

(1)

Vaerloese, Denmark

The purpose of Oracle Visual Builder Cloud Service (VBCS) is to allow you to build applications quickly – not quickly as in a few weeks, but quickly as in a few hours.

In this chapter, we will do just that.

Visual Builder Cloud Service Architecture

As the name implies, Visual Builder Cloud Service is cloud-based. Your application is developed in the Oracle Cloud, and the default runtime environment is the cloud. Your data can be stored anywhere, as long as you can access them via a REST web service.

A VBCS application normally consists of a web user interface and/or a mobile user interface connected to VBCS business objects and/or service connections as shown in Figure 1-1.

../images/464713_1_En_1_Chapter/464713_1_En_1_Fig1_HTML.jpg

Figure 1-1

Visual Builder Cloud Service architecture

The Front End

The front end of a VBCS web application is JavaScript and HTML, using open source Oracle JET JavaScript components. The declarative approach and the wizards in VBCS make it very fast to build basic applications, saving time for even experienced developers. If necessary, these applications can then be extended and improved with hand-crafted JavaScript and HTML.

Tip

It is even possible to move the JavaScript and HTML out of VBCS and host it on your own server. You lose a few services that the VBCS runtime environment normally provides you with, like integration with Identity Cloud Service and use of the VBCS proxy for external REST calls. We’ll discuss this in a later chapter.

The mobile applications you build with VBCS are real on-device iOS and Android mobile apps that use Apache Cordova for access to device features. The VBCS development tool makes it easy to access features like camera and location, and you can add Cordova plug-ins for additional functionality.

The Back End

The VBCS business objects and service connections provide a uniform interface for your web application and/or mobile application to connect to.

In the simple case, you just define your own VBCS Business Objects. VBCS will automatically store them in the Database Cloud Service associated with your Visual Builder Cloud Service instance without you having to worry about creating tables and indexes or defining storage parameters. The tables in the database will be presented to your VBCS application as REST services.

Tip

You can even expose your VBCS business objects as REST services to external applications. We’ll return to that in Chapter 2.

You can also use VBCS Service Connections to connect to Oracle Software-as-a-Service (SaaS) applications, Oracle Process Cloud Service (PCS) instances, or any standard REST services.

VBCS is a great tool for building small additional applications on top of Oracle SaaS applications like Finance Cloud, HCM Cloud, or CRM Cloud. These applications offer a number of REST APIs you can invoke, and VBCS offers a catalog to make it really easy to use them.

To connect to PCS, you access the process data PCS makes available through REST interfaces that VBCS understands how to connect to.

Finally, you can access data using standard REST calls, no matter where in the world your data is located. This enables you to call third-party services if necessary and even allows you to use data stored on-premise in your own data center if you expose them to properly authenticated and authorized external users.

The Use Case

In this chapter, we create a simple web application for an incoming travel agency to handle tasks. The company might need to provide transfer busses from the airport to a hotel, restaurant meals, sightseeing tours, or other services for visitors arriving in the company’s home city or country.

To manage passengers, vehicles, and services, we will create a list of tasks with a start and end time and place, a description, number of passengers, and a service to be provided. Since many of the services will be provided by subcontractors, we also need the ability to select a subcontractor from a list, and for many services it is also relevant to select equipment like a vehicle of a certain capacity.

Creating a VBCS Instance

When you have signed up for Visual Builder Cloud Service, you receive an email with the URL of your cloud dashboard. If you don’t have that information available, you can start at https:// cloud.oracle.com and click Sign In. The Oracle Cloud sign in page appears as shown in Figure 1-2.

../images/464713_1_En_1_Chapter/464713_1_En_1_Fig2_HTML.jpg

Figure 1-2

The Oracle Cloud sign in page

Provide your cloud account name and click Next. After you have logged in with your Oracle Cloud Account, your Oracle Cloud My Services Dashboard appears as shown in Figure 1-3.

../images/464713_1_En_1_Chapter/464713_1_En_1_Fig3_HTML.jpg

Figure 1-3

Oracle Cloud My Services Dashboard, initial

This dashboard shows your existing cloud service instances, and you can create new ones. When the first user logs on to your cloud account for the very first time, the dashboard will probably only show an Identity Cloud instance. If you have already used other Oracle Cloud Services before, these will also be shown.

Tip

You can configure which services are shown by clicking Customize Dashboard.

In order to get started with Visual Builder Cloud Service, you need to create an instance of VBCS. If somebody has already created one, it will show up on the dashboard and you can use that. If not, you will have to create one.

There are two ways to set up a VBCS instance:

Using a Quick Start

Using an Oracle Cloud stack template

The Quick Start instance uses default settings and needs nothing more from you than an instance name. This is the option to choose for a developer who wants to get started quickly with VBCS and see what it can do for the organization.

For a production instance, you probably want your cloud administrator to make an explicit decision on the various parameters you can set for a VBCS instance. The cloud administrator should use an Oracle Cloud stack template. Oracle provides default templates which will configure all the necessary services (Visual Builder, Database Cloud, Storage Cloud), and the cloud administrator can download and edit these templates to produce an environment that is appropriate for the organization and the intended use.

Refer to Chapter 3 of the Administering Oracle Autonomous Visual Builder Cloud Service manual for a more detailed description of how to set up a VBCS instance.

Caution

The Quick Start instance does not include database backup.

Creating a Quick Start Instance

To create a Quick Start instance, you start from the dashboard by clicking Create Instance. Select All Services and then scroll down to find the Visual Builder service as shown in Figure 1-4.

../images/464713_1_En_1_Chapter/464713_1_En_1_Fig4_HTML.jpg

Figure 1-4

Creating a Visual Builder instance

Caution

Choose Visual Builder, not Visual Builder Classic. The Classic instances are only for organizations that have applications built with an earlier version of VBCS.

The default Create Instance window only allows you to define the name of your VBCS instance. At the bottom of the window, it tells you what it will create for you. This includes two nodes of Visual Builder Cloud Service, Oracle managed, and a database.

You can click the Custom button at the top right of the Create Instance window to change a few settings like the data center region your instance will be based in. Choosing Custom also gives you the option to download the provisioning instructions sent to the provisioning REST service as shown in Figure 1-5.

../images/464713_1_En_1_Chapter/464713_1_En_1_Fig5_HTML.jpg

Figure 1-5

Downloading the provisioning REST payload

The payload you download will look something like this:

{serviceVersion:1.0,managedSystemType:oracle,edition:SUITE,enableNotification:true,serviceName:stenvbcs,serviceLevel:PAAS,subscriptionId:1234567,notificationEmail:[e-mail],isBYOL:false}

This can be useful if you want to automate the creation of VBCS instances using Oracle Cloud provisioning REST services.

Note that a Quick Start instance does not include database backup. If you want database backup (e.g., if you are creating a production instance), you should use a stack template.

When you click Create, the instance creation starts. The Oracle Visual Builder Cloud Service console window appears, showing your new instance with status Creating service … It used to take several hours for your instance to be created, but recently I have experienced create times of less than 15 minutes. However, I have also experienced instances that weren’t created after 6 hours and have had to contact Oracle Support to find out what went wrong. Your mileage will vary.

Once your instance is created, it will appear in the dashboard together with the newly created database instance as shown in Figure 1-6.

../images/464713_1_En_1_Chapter/464713_1_En_1_Fig6_HTML.jpg

Figure 1-6

The cloud dashboard with Visual Builder and Database instances

Creating a Stack Template Instance

To create a VBCS instance using a cloud stack template, you use the navigation menu at the top left corner of the dashboard window. Expand the Services node, scroll to the very bottom (past Visual Builder and Visual Builder Classic), and choose Cloud Stack.

In the Oracle Cloud Stack window, choose the Templates tab. You will see a lot of predefined stacks of cloud services – search for visual to find a Visual Builder Cloud Service stack. At the time of writing, there were two:

Oracle Visual Builder Cloud Service (Oracle-VISUALBUILDERAUTO-OM-Template), which creates an autonomous (Oracle-managed) instance

Oracle-VisualBuilder-CM-Template, which creates a customer-managed instance

The Oracle-managed instance can’t be changed, and you can’t stop it. The customer-managed template can be changed to match your needs, and if your cloud service is billed by usage (Pay-as-you-go), you can stop your VBCS instance to save money when you don’t need it. If you click the customer-managed template, you can see which services it will create, as shown in Figure 1-7.

../images/464713_1_En_1_Chapter/464713_1_En_1_Fig7_HTML.jpg

Figure 1-7

Topology of a cloud stack template

You can click the Template tab to see the actual commands the template contains. It will look something like this:

---

  template:

    templateName: Oracle-VisualBuilder-CM-Template

    templateVersion: 1.0.74-1901300359

    templateCategory: RESTRICTED

    templateDescription: Includes everything needed to use Oracle Visual Builder Cloud Service Classic to rapidly develop and host web and mobile applications for the enterprise.  Customer manages the environment.

    #----------------------------------------

    # PARAMETERS

    #----------------------------------------

    parameters:

      #----------------------------------------

      # Configuration

      #----------------------------------------

      serviceName:

        label: Service Name

        description: Unique service name for this instance.

        type: String

        mandatory: true

        maxLength: 48

      sshPublicKey:

        label: SSH Public Key

        description: SSH public key

        type: ssh

        mandatory: trueQ/div>

        sensitive: true

      vbcsNumberNodes:

        label: Initial Number of Nodes

        description: Number of Nodes (OCPUs) allocated for the service. If no downtime during patching is desired, you must specify 2 or more nodes.

        type: Number

        mandatory: false

        default: 1

        sensitive: false

        minValue: 1

      #----------------------------------------

      # SERVICE

      #----------------------------------------

...

You can click Export to download the template YAML file, edit it to match your needs, and then Import it back into the Oracle Cloud Stack window.

It is a task for your cloud administrator to define the right topology, number of nodes, backup policy, and so on.

To start creating an instance from a stack template, you click the little cloud icon with a plus sign. This will call up the Instance Details screen where you define the service name, provide an SSH key, set database password, and more. When you have provided all the necessary information, click Next, verify everything on the confirmation page, and click Create.

Building the Application

As discussed in the section on Visual Builder Cloud Service architecture, a VBCS application uses business objects that need a data source in the form of REST web services. If you already have REST web services to create, retrieve, update, and delete data, you’re ready to jump straight to building the user interface. In this section, we will build a simple application from scratch, that is, we will build both business objects for the data and a user interface for the user to work with.

Getting to the Home Page

To create a VBCS application, you start from the Visual Builder Cloud Service home page. You can have several VBCS instances in your cloud account, and each of these will have its own home page and its own applications.

To get to the home page from the console, you can click the navigation icon in the bottom right corner of the Visual Builder tile on the dashboard and then click Open Service Console. This will bring up the Visual Builder Console shown in Figure 1-8.

../images/464713_1_En_1_Chapter/464713_1_En_1_Fig8_HTML.jpg

Figure 1-8

The Visual Builder Console

From here, you click the navigation icon to the right of a VBCS instance and choose Open Visual Builder Cloud Service Home Page. In the preceding figure, there is only one instance and one navigation icon, but you could have several.

Note

Each instance requires its own resources. Thus, there is an additional cost if you are running more instances.

The Visual Builder home page appears. At the time of writing, the home page had two different views. It starts in the newer Visual Applications view, which at the time of writing looked as shown in Figure 1-9.

../images/464713_1_En_1_Chapter/464713_1_En_1_Fig9_HTML.jpg

Figure 1-9

The Visual Applications tab

This is where you should be building your applications.

It is possible to click the little triangle next to the Visual Applications heading to change to the Classic Applications view. As shown in Figure 1-10, this looks almost identical.

../images/464713_1_En_1_Chapter/464713_1_En_1_Fig10_HTML.jpg

Figure 1-10

The Classic Applications view

Caution

You should not build new Classic applications. This view is retained for backward compatibility with earlier VBCS versions, and any application you build from the Classic Applications view will be of the older type without access to the latest features.

Creating the Application

To create an application, make sure you are on the Visual Applications home page (see Figure 1-9) and click New Application. You will be prompted to provide

Application name (which will be shown in all the screens to manage the application).

Application ID (which becomes part of the URL to your application).

Optionally, a description. Make it a habit to provide a description – once you start working with VBCS in earnest, you are likely to be building a lot of applications.

You can also choose a template. The default Empty Application template creates a simple application without any extra features.

When you are done with this dialog, the Visual Builder main user interface appears as shown in Figure 1-11. If you are not using Google Chrome, you will probably see a warning saying Some features may not function correctly in this browser. In my experience, VBCS works fine in