Links

Configuration Manager: Web UI Configuration

You can quickly publish a Web application that you developed in Kuika. To publish the application you have developed, you must make the necessary adjustments to the Web UI via Kuika Configuration Manager.
This training content consists of the following topics;
  1. 1.
    Creating a new Configuration in Kuika for Web UI
  2. 2.
    Adding app Configuration information for Web UI
  3. 3.
    Adding Backend settings for Web UI
  4. 4.
    Adding Google Maps information for Web UI
  5. 5.
    Adding Title Bar settings for Web UI

1. Creating a New Configuration in Kuika for Web UI

To create a new configuration, open the Configuration Manager view mode from within the project you are working on at platform.kuika.com. Select Web UI from the Web UI, iOS, Android, and API options under the Create a new configuration heading in the Configuration Manager view mode. Name the configuration via the text input box that opens at the bottom and click the "CREATE" button.
Configuration Manager Screen
IMG 01: Configuration Manager screenshot

2. Adding Application Configuration Information for Web UI

On the screen that comes up, you must provide information to prepare your web application for publication.
Web UI Configuration screen
IMG 02: Web UI Configuration screenshot
The information on which URL the application you developed will connect to the Backend via “Backend URL”.
You can leave this blank to use the Backend settings created by Kuika.
With Kuika, you can use Virtual Directory in your web application development process.
The use of virtual directory is optional. If you are going to host the Web application you are developing on a DNS (for example, www.kuika.com or abc.kuika.com), you do not need to use a virtual directory and you can leave this field blank in WEB UI Configuration Manager. However, if you are going to host the Web application you are developing in a subdirectory (www.kuika.com/app1 or abc.kuika.com/app2), you need to use a subdirectory as a virtual directory. If you want to host the Web application you have developed in a subdirectory, you can enter the subdirectory information as a virtual directory in the text input box under the "Virtual Directory" heading in WEB UI Configuration Manager.

3. Adding Backend Settings for Web UI

In the application you developed, you need to select the Backend Configurations and select "Configuration" in Configuration Manager.
Web UI Backend Settings selection screen
IMG 03: Web UI Configuration Backend Settings selection screenshot
  • To select Configuration, click the drop-down menu opposite the Configuration heading under the "Backend Settings" .
  • Select the relevant setting from the "Configuration" options in the drop-down menu.

4. Adding Google Maps information for Web UI

If there is map usage in the Web application you have developed, you must add the map information. To perform this operation, click on the drop-down menu opposite the “Google Maps” under the “Maps” heading. Select the “ADD NEW” option in the drop-down menu.
Google Maps Setting screen
IMG 04: Entering Google Maps Settings information on the pop-up that opens
  • Add a name for the map to the "Name" heading on the "Google Maps Setting" pop-up screen that opens.
  • Then enter the Google Maps “API Key” information. If you haven't created a Google Maps API Key before, you can review the guidelines provided by Google .
To generate an API Key via Google Maps, you must create a new project in Google Cloud Console . You can find detailed information about creating a new project in the information content provided by Google .

5. Adding Title Bar Settings for Web UI

One of the features that a Web application has is the "Title Bar" displayed in the browser. You can quickly add “Title Bar” information to a Web application you have developed through Kuika.
Title Bar information entry screen
IMG 05: Entering Title Bar information
You can follow the steps below to edit the Title Bar settings.
Title Bar Settings Favicon Media Gallery screen
IMG 06: Title Bar Settings Favicon Media Gallery screenshot
  • Enter the title of the application you are developing in the text and input the opposite Title.
  • Then, to add the "Favicon" that you want to be displayed in the "Title Bar", you must click the "CHANGE" button opposite the Favicon title and upload your application icon to the opened Media Gallery.
After doing all these operations, click the "CREATE" button to create the Web UI Configuration settings.
Menu with Configuration Manager List
IMG 07: Configuration Manager list screenshot
The WEB UI Configuration you created will be added to the menu on the left of the Configuration screen. Then, to edit the Configuration settings, you can click on the relevant Configuration added to the left menu and perform the editing operations.