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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Creating the Application

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 Firefox, but you should probably take Oracle’s advice and develop using Google Chrome.

In this chapter, we will be building a simple web application, so we will only be using the Business Objects and Web Applications areas.

Creating the Business Object

Our use case is only concerned with one business object: Tasks. To create a business object for our tasks, you select the Business Objects area to the left and then click the plus sign next to the Business Objects heading. The New Business Object dialog appears as shown in Figure 1-12.

Once you provide a label and click the Create (checkmark) icon, your new business object is opened in a separate tab in the work area. We’ll discuss all the options here in later chapters, but in this chapter, we focus on quickly creating a simple VBCS application. To add custom fields to your newly created business object, choose the Fields tab. You will see that VBCS has already created an ID field and some fields for recording the history of an object. These are standard in all VBCS business objects.

Use the New Field button to create some additional fields as shown in Figure 1-13.

The word Pax is widely used in the travel industry as shorthand for Passenger.

When you have created all the fields, you can click them to modify their properties. Make Date, Start where, Start when, and Description required. Your business object should look as shown in Figure 1-14.

Once you have your business object with the necessary fields, go to the Data tab, click Add Row, and create a few rows of test data.

That’s all you need to do to create a business object you can use in your application.

If you are interested, you can go to the Endpoints tab and see the REST web service endpoints that VBCS has automatically created for you. You can even publish these services for other applications to use. We’ll get back to that in a later chapter.

Creating the Web Page

The next step is to create the web page where the user can interact with task data. This happens in the Web Applications area that you select by clicking the corresponding icon in the menu bar along the left edge of your VBCS window. It’s the one that looks like a computer screen.

The navigator will now be empty, because you have not created any web applications inside this VBCS application. Click the plus sign next to the Web Apps heading to create a web application and provide an ID. The navigation panel fills in with a tree view of your web application, and start page (called main-start) opens in a new tab in the work area as shown in Figure 1-15.

To place your task business object on the page, scroll down in the component palette until you get to the Collection heading and drop a Table component onto your page as shown in Figure 1-16.

Your page will show a table with some sample data as shown in Figure 1-17.

To connect your table to the business object, you need to expand the Property Inspector if it is not already shown. When the Table component is selected, the Property Inspector shows a number of tabs relevant for that component. The right-hand tab (with the university student icon) shows the Quick Starts, and one of these is Add Data. This wizard will prompt you for all the necessary information to connect your table with a data source.

In the first step, you choose an endpoint. In this case, we only have one business object under the Business Objects heading as shown in Figure 1-18.

When you have selected a business object and have clicked Next, then second step of the Add Data wizard, add the columns you want to display. Select them in the order you want them displayed on your screen. You don’t have to select all columns.

In the last step of the wizard, you have an option to provide query parameters. We’ll skip that for this example and click Finish.

You should now see the data from your task business object on your screen. You can click the Run icon (the triangle) in the top right corner of your screen to run your application in a new tab and see the application as the end user will. It might look something like Figure 1-19.

Releasing to Test

When you as a developer are satisfied with the application, you can stage it. This means that a copy of your application is created and placed into another environment that is part of your VBCS instance. Your testers can access a stable version of the application in this environment, even as you might continue development on the dynamic development version.

You can stage your application by clicking the application menu icon at the right end of the top bar in the VBCS window. There is a similar-looking icon at the left end of the top bar, but that one takes you to the VBCS home page. This will give you a number of application options as shown in Figure 1-20.

To release your application to test, choose Stage from this menu. You will be given the option to either stage the application with a clean database where your testers will have to create their own data or ask VBCS to copy the data in your development database to the staging environment.

When you click the Stage button, VBCS creates the test version of your application (and data if you chose that). This might take a little while. When the staging process completes, you will see your application now has status Stage and still version 1.0.

Fixing Bugs

If your testers come up with anything that is not the way it is supposed to be, you need to change the application.

To create a new version for your fixes, select New Version from the application menu. VBCS will suggest a version for you. If you are fixing bugs in version 1.0, in accordance with Semantic Versioning (see https://semver.org ), your bug fix version should be 1.0.1. When you click Create, you get a new version of the application that has status Development. You can edit this new version to fix whatever problem your testers have discovered, and then stage the fixed version.

Releasing to Production

When your application has passed testing, it is time to put it into production. To do so, you choose Publish from the application menu. Again, you are given the option to either publish the application with a clean database or include data from the staged application your testers worked on. It is recommended to publish the application with a clean database.

When you click the Publish button, VBCS creates the production version of your application from the staged version. When the publishing process completes, you will see your application with status Live and the same version number your testers approved. Your application is now ready to be used by your users!