Digital App Builder interface
Digital App Builder interface consists of the following in the Left navigation panel:
- Workbench - displays or hides the page details
- Data - helps you to add a dataset by connecting to an existing data source or create a data source for a microservice using OpenAPI doc.
- Watson - consists of Image Recognition and Chatbot (Watson Assistant) components for configuring an existing instance or create a new instance.
- Engagement - You can increase your user engagement with the app by adding Push notifications services
- Console: displays the console to see the activities and code for each component.
- Settings: displays the App details, Server info, Plugins, and Repair Project (like Rebuilding dependencies, Rebuilding platforms, Resetting IBM Cloud credentials).
Workbench helps you to design the pages. Workbench consists of three work areas:
Pages/Controls: This area displays the name of the pages created by default. Use + sign to create a new page. On clicking Controls icon, displays controls that helps in adding functionality to a page in an app. You can drag and drop the controls from the respective Controls pallette to a page’s canvas. Each control has a set of properties and actions.
Following is the list of controls provided available:
Basic: You can drag-and-drop these basic controls (Button, Heading, Image, and Label) to the canvas and configure the properties and actions.
- Button - Buttons has a property to label. In the Action tab you can specify the page to navigate to on click of the Button.
- Heading Text - Helps you to add a heading text for the application such as Page Title.
- Image - Helps you upload a local image or provide a url of an image.
- Label - Helps you to add static text to your page body.
Databound - helps you to connect with a data set and operate on the entities in the data set. Databound consists of two components: List and Connected Labels
- List - Create a new page and drag and drop the List component. Add the List Title, Choose the list type to work on, Add content to work on, and select the dataset to use.
Login - Login consists of the Login Form control. Drag and drop the login form to the page.
The Login Form control helps you to create a login page for your application to connect the user to the Mobile Foundation server. Mobile Foundation server provides a security framework to authenticate users and provide that security context to access the data sets. For more information read here.
To enable Login Form, perform the following steps:
- Make the following changes on Mobile Foundation Server
- Deploy a security check adapter which would take username and password as input. You can use the sample adapter from here.
- In the mfpconsole, go to app’s security tab and under Mandatory Application Scope, add the above created security definition as scope element.
- Make the following configuration in your Application using the Builder.
- Add Login Form control to a page in the canvas.
- In Properties tab, provide the Security check name and the page to navigate On Login Success.
- Run the app.
- Make the following changes on Mobile Foundation Server
AI - AI controls allows you to add Watson AI capabilities to your app.
Watson Chat - This control provides a complete chat interface that can be powered with Watson Assistant service on IBM Cloud.
- In the properties section select the configured Watson Assistant service and select the Workspace you want to connect to. To define and train a Chat conversation see Chatbot under Watson.
Watson Visual Recognition - This control provides an ability to take a picture and have Watson Visual recognition service identify it for you.
- In the properties section select the configured Visual Recognition service and the classification model. To define and train using your own images see Image recognition under Watson.
Canvas section - This area consists of the Current Channel selected, Current Page name, Design/Code Toggle, and Canvas.
- Channel icon - This displays the current channel selected. You can add additional channels by selecting the required channels in the Platforms section under Settings > App > App details.
- Current Page Name - Displays the canvas page name. When switched between pages, the current page name gets updated to the selected page.
Design / Code - This option brings the Code editor view to edit the code and enable to view the design back and debug any errors. In the canvas, switch from Design to Code, to view the code of the specific file in the project editor. Switching the Design to Code will display the following popup screen:
WARNING - When you click Create, an editable version of your application is created locally. Any changes made in the editable version will not be reflected in the original app and vice versa. This will display the project explorer with all the project files for the application.
- Canvas - At the centre of this section is the canvas which displays either the design or the code. You can drag-and-drop the controls and create the app.
Properties/Actions tab - At the right-hand side is the properties and action tab. When a control is placed in the canvas, you can edit and modify the properties of the control and connect a control with a related action to perform.
Creating a Data set for a micro service involves the following steps. After creating the data set, you can connect the data bound controls in your app.
Creating a new data set
- From the landing page of the Digital App Builder, open any existing App or create one.
Click Data on the left hand panel.
Click Add new data set. This displays the Add a data set window.
- Create a data set. You can either create from an existing source (default) or create a data source for a microservice using an OpenAPI doc.
- Create from existing data source (default) - This will populate the dropdown with all the Data sources (adapters) from the configured Mobile Foundation server instance.
- Create Data source for a microservice using OpenAPI doc - This option lets you create a Data Source from an Open API specification document (Swagger json/yml) file, and a Data Set from it.
Create a Data set from an existing Data Source
- Select the Datasource for which you want to create the Dataset.
- This will populate the available entities in the Data Source. Select the entity to be created.
Give a name to the dataset and click the Add button. This will add the dataset and you will be able to see the Attributes and Actions associated with that dataset.
- You can Hide some of the attributes and Actions based on what you want to do with the data set.
- You can also edit the Display Labels for the attributes
- You can also Test any of the GET Actions by providing the required attributes and clicking on the Run this action which is part of the Action. Remember for this to work you should have specified the Confidential client name and password in the Settings tab.
Create a Data source for a Microservice using a swagger file
- Select the json/yml file for which you want to create a datasource for and click Generate.
- This will generate an Adapter, which is a configuration artifact on the MF server that you can re-use and deploy it to the Mobile Foundation server instance.
- Select the entity for which you want to define the data source for.
- Give a name to the dataset and click on Add button.
- This will add the Dataset and you will be able to see the Attributes and Actions associated with that dataset.
You can now bind this data set to any of the data bound controls.
The Digital App Builder provides an ability to configure the app to connect to the various Watson services provisioned on IBM Cloud.
Chatbots are powered by Watson Assistant service on IBM Cloud. Create a Watson Assistant instance on IBM Cloud. For more information, see here.
Once configured you can create a new Workspace. The workspace is a set of conversations that make up a chatbot. After creating a Workspace, start creating the dialogs. Provide a set of questions for a intent and a set of answers for that intent. Watson Assistant uses Natural Language Understand to interpret the intent based on the sample questions you provided. It can then try to interpret the question that a user asks in various styles and map it to the intent.
To enable a chatbot in your app, perform the following steps:
Click Watson and then click Chatbot. This displays the Work with Watson Assistant screen.
Click Connect to your Watson Assistance instance.
- Enter the API key details and specify the URL of your Watson Assistance instance.
Provide a Name to your chatbot and click Connect. This displays your chat service dashboard of the Name given.
Add a workspace by clicking Add a workspace which displays the Create a new model popup.
Enter the Workspace name and Workspace description and click Create. This creates three Conversation workspace (Welcome, No match found, and New conversation).
Click New conversation to educate the new chatbot model.
- Add questions and the response either as a csv file or as an individual questions and the response. For example, Add a user statement for If the user intends to ask, and then Add a bot response for the Then, the bot should respond with. or you can upload questions and the responses for the bot to respond.
- Click Save.
Click the Chatbot icon at the botton right-hand side to test the chatbot.
Image recognition capability is powered by Watson Visual recognition service on IBM Cloud. Create a Watson Visual Recognition instance on IBM Cloud. For more information, see here.
Once configured, you can now create a new Mobel and add classes to it. You can drag and drop images in to the Builder and then train your Model on those images. Once the training is complete, you can either download the CoreML model or use the Model in a AI control in your app.
To enable a Visual Recognition in your app, perform the following steps:
Click Watson and then click Image Recognition. This displays the Work with Watson Visual Recognition screen.
Click Connect to your Watson Visual Recognition instance.
- Enter the API key details and specify the URL of your Watson Visual Recognition instance.
Provide a Name to your Image Recognition instance in the app and click Connect. This displays the dashboard for your model.
Click Add new model to create a new model. This will display Create a new Model popup.
Enter the Model name and click Create. This will display the classes for that model and a Negative class.
Click Add new class. This will display a popup to specify a name for the new class.
Enter the Class name for the new class and click Create. This will display the workspace to add your images for training the model.
Add the images to the model either by drag and drop them into the workspace or use Browse to access the images.
You can go back to your workspace after adding the images and test by clicking Test Model.
- In the Try your model section, add an image and then result is displayed.
You can add Push notifications to your app and increase user engagement.
To add Push notifications to your app:
Select Engagement. This will display the list of available services. Currently only Push Notifications services is available.
In Push Notifications, click Enable. This display the Push Notifications configuration page.
Configure push notification for Android by providing API Secret Key and Sender ID and click Save configuration.
Navigate to the iOS tab and provide push configuration details: select the Environment, provide the .p12 file with path, and enter the Password and click Save configuration.
Perform the following steps: a. For Android app, copy
google-services.json(download from your firebase project) to
<path_to_app>/ionic/platforms/android/appfolder. b. For iOS app, open the xcode project
<path_to_app>/ionic/platforms/ios/<app>.xcodeprojand enable push notification capability. For more details, refer to https://help.apple.com/xcode/mac/current/#/devdfd3d04a1.
On the server side,
Follow http://mobilefirstplatform.ibmcloud.com/tutorials/en/foundation/8.0/notifications/sending-notifications/#setting-up-notifications to enable push notifications on the server side.
Follow http://mobilefirstplatform.ibmcloud.com/tutorials/en/foundation/8.0/notifications/sending-notifications/#sending-notifications to send notifications from the server
Note: Push notifications from MFP server is used to enable the notification service. So if IBM Cloud push notification service was used before, follow the link to set up notifications in MFP server http://mobilefirstplatform.ibmcloud.com/tutorials/en/foundation/8.0/notifications/sending-notifications/#setting-up-notifications.
Helps you to view the code for each of the components. Also displays the information about various activities and errors.
Settings helps you to manage the app settings and rectify any errors during the build process. Settings consists of App details, Server, Plugins, and Repair Project tabs.
App details displays information about your app: App Icon, Name, Location where the files are stored, Project/Bundle Id provided at the time of creating the app, Platforms (channels) selected, Service enabled.
You can change the App icon by clicking the icon and uploading a new icon.
You can add/remove additional Platforms by checking/unchecking the checkbox near them.
Click Save to update the changes.
The Server info displays the Server details you are currently working on. You can edit the information by clicking the Edit link. You can add or modify the confidential client authorization.
The Server tab also displays Recent servers.
Note: You can only able to delete a server added earlier at the time of creating an app using Digital App Builder and if not used by any of your app created by Digital App Studio.
You can also add new server by clicking Connect new + button and provide the details in the Connect to a new server popup and click Connect.
Plugins displays list of plugins available in the Digital App Builder. Following actions can be performed:
- Install new - You can install new plugins by clicking this button. This displays the New plugin dialog. Enter the Plugin name, Version (optional), and if it is a Local plugin, enable the switch for the same and point to the location and click Install.
- From the list of Plugins already installed, you can edit the version and reinstall the plugin or uninstall a plugin by selecting the link for the respective plugin.
Repair project tab helps you to fix issues by clicking the respective options.
- Rebuild dependencies - If the project is unstable, you can try re-building dependencies.
- Rebuild platforms - If you see any platform related errors in console, try rebuilding the platforms. if you have made any changes to the channels or added additional channels, use this option.
- Reset IBM Cloud credentials for Playground server - You can reset the IBM Cloud Credentials used to login to the Playground Server. Resetting the Credentials cache will also clear out all your apps on the Playground server. THIS OPERATION CANNOT BE REVERSED.