Open topic with navigation

Kony Fabric console User Guide: EAS App Implementation

Walk-through of Kony Enterprise App Store (EAS) Source Application

EAS App Implementation

Kony Enterprise App Store (EAS) is a simplified app distribution service that enables an enterprise to securely and easily distribute and manage apps to the users. All features of Kony EAS are available on Cloud and On-Premises. For more information on EAS, refer to Kony Enterprise App Store (EAS) Service for Digital App Distribution.

From Kony AppPlatform V8 SP4 JuneFP onwards, Kony allows you to access the complete EAS App assets including the front-end project details and the back-end app. You can download the EAS App assets from the Kony Marketplace. These assets contain the source code of the Enterprise App Store, which is available for you to edit as per your requirement. You may choose to re-brand the app, or add specific forms to best suit your requirements.

For example, you can brand some of the following use cases:

App Architecture under Kony Reference Architecture

Prerequisites to Configure EAS Source App in Visualizer

Before you start using the source of the EAS App, ensure you have access to the following:

Downloading EAS App Assets

The EAS App assets are divided as follows:

Store.zip Kony App Store.zip

store.zip is the Visualizer project created for EAS based on Kony Reference Architecture.

  • The Store project contains the client app/front-end app details of the EAS App. It contains the details of the project layout, modules and forms, and the client-side code of the front-end app.

The Store project is associated with the Kony App Store App for the linked services.

 kony_app_store.zip is the Server app containing the services linked to the EAS App.

 

Downloading Front-end Project for EAS App for Kony Visualizer

Store is the front-end project of the EAS created based on the Kony Reference Architecture. You can download the EAS App assets from Kony Marketplace. The store.zip app contains details such as forms for supported channels, splash screen, client-side code, and modules and forms of EAS.

For Cloud, the Store app is bundled with the front-end and Server apps.

  1. Go to Kony Marketplace.
  2. Click Download. The store.zip file gets downloaded to your local system. For more details on EAS versions, refer to EAS and Platform Versions Compatibility Chart.

Downloading Server App (Kony App Store) for Kony Fabric

The Kony App Store is the Server app (Kony Fabric), which contains services linked to EAS. You can download the source app (Kony App Store) from Marketplace.

  1. Go to Kony Marketplace.

  2. Click Download. The kony_app_store.zip file gets downloaded to your local system. For more details on EAS versions, refer to EAS and Platform Versions Compatibility Chart.

Configuring EAS App in Visualizer

Importing EAS Front-End Project in Visualizer

You can view the layout of the front-end app and the source code by importing the Store project to Kony Visualizer.

  1. Make sure you are logged into Kony Visualizer.

  2. From the Project menu, click Import > Local Project > Open as New Project.

  3. In the Import dialog box, select Select archive files, and then click Browse to select the store.zip file that you have downloaded.

    The Store project gets imported to your Visualizer. You can view the layout of the EAS project.

Importing Server App to Kony Fabric

The Kony App Store app is available in your account in Kony Fabric by default. The app should be existing always in your account for EAS to work. The Kony App Store app is configured with the required services to be used in an app for EAS, for example, Identity Services.

In case you want to import a different version of the app, you can re-import it from Kony Marketplace.

  1. Log in to Kony Fabric.
  2. In the Apps > Fabric App, click IMPORT, and drag and drop or browse for the kony_app_store_v1.0.zip file to upload.
  3. In the Open dialog, select the Kony App Store app that you downloaded.

    Important: Ensure the Kony App Store App must be published to Server before you build and publish the EAS App in Visualizer.

  4. Associate the Store project with the Server app. For more information, refer to How to Link EAS Front-End Project with Back-End App.

Associating Front-end Project with Server App

To publish your app to Kony Fabric, your Kony Visualizer client app must be associated with a Kony Fabric app. After you import the Store project in Visualizer, you must associate it with the Kony App Store App.

  1. In Kony Quantum Visualizer, sign in to your Kony Cloud account. To do so, from the top right corner of the Visualizer window, click Login. The Kony Account sign-in window opens. Enter your Kony Cloud email and password credentials, and then click Sign in.
  2. In Visualizer, open the Store project.
  3. From the Data & Services panel, click Open Fabric Console > Use Existing or Link to Existing App. The list of pre-configured services appears.

  4. In the Kony Fabric Applications, search for Kony App Store, and then click ASSOCIATE.

    The Kony App Store app is associated with the Store project.

Source of EAS App

Structure of the EAS Front-end Project - Store Project

The Layout of the Front-End App

Kony EAS Source app is supported for Native channels: iOS and Android.

Elements in the Store Project Project Structure UI in Visualizer
App Meta Data    

 

 

 
  • Store app name
  • Default app icon

These details are displayed based on the metadata of the app.
Supported Channels in EAS
  • Mobile
  • Tablet
  • Responsive Web/Desktop
Forms and Controllers

Forms (two modules)

  • AuthModule
    • frmForgotPassword
    • frmLogin
    • frmSplashScreen
  • StoreModule
    StoreModules Channels
    frmAppDetails
    • Mobile
    • Responsive Web/Desktop
    frmHelpScreen
    • Mobile (for iOS only)

    Note: The frmStore screen contains the Help button for iOS devices only. When you click the Help button, the help is displayed in the frmHelpScreen for iOS mobile devices. And for iOS tablets, the help is displayed in a pop-up window.
    frmStore
    • Mobile
    • Tablet
    • Responsive Web/Desktop

Controllers

  • AuthModule
    • frmForgotPasswordController
    • frmForgotPasswordControllerActions
    • frmLoginController
    • frmLoginControllerActions
    • frmSplashScreenController
    • frmSplashScreenControllerActions
  • StoreModule
    • frmAppDetailsController
    • frmAppDetailsControllerActions
    • frmHelpScreenController
    • frmHelpScreenControllerActions
    • frmStoreController
    • frmStoreControllerActions

Supported Functionality and Forms - EAS Front-End Project

Reference Architecture Extensions

Source Details of EAS Back-End App - Kony App Store App

The Kony App Store is the Server app (Kony Fabric), which contains the following services linked to EAS.

Branding Enterprise App Store to your Requirements

You can use the source app of the EAS to brand it to suit according to your business requirements.

Kony allows developers to access complete suite of the EAS App source. You can view details of the source code of the app, structure, layout, forms, and functionality, and linked services, and can customize the brand according to business requirements as well.

For example, you can brand an app for the following business requirements:

Branding EAS App to your Company Logo and Splash Screen

Changing an App Icon

  1. In Visualizer Project, click the Splash Screen.
  2. Click the Assets tab, right-click Media, and then click Resource Location.
  3. In the ..\\Store\resources folder, open common for the channel type, for example, mobile or tablet.
  4. Change the image file of the app icon. Ensure the file name is same as the existing one. For example, icon.png.

Replacing Image for the existing Splash Screen

The splash screen and the frmSplashScreen can be same or different. You can modify the splash screen in the following two ways:

To replace the existing splash screen, follow these steps:

  1. In Visualizer Project, click the Splash Screen.
  2. Click the Assets tab, right-click Media, and then click Resource Location.
  3. In the ..\\Store\resources folder, open common folder.
  4. Replace the new splash screen with the one existing. Ensure the file name is same as the existing one. By default, the image resource name is splash_eas.png for mobile and tablet. By default, the image resource name is splash_screen.png for responsive web.

Adding New Image to Splash Screen

If you choose to add new image to splash screen, the new image name must be

  1. In Visualizer Project, click Splash Screen.
  2. Click the Assets tab, right-click Media, and then click Resource Location.
  3. In the ..\\Store\resources folder, open common folder.
  4. Add the new splash screen file to the common folder.
  5. Now, you must link the new image to the start-up screen in your store project as follows:
    1. In Visualizer > Store project, expand the channel type. For example, Mobile.
    2. Click Splash Screen.
    3. In Properties > Splash Screen > General, click Edit.
    4. In the Splash Image dialog box, select the new file.
  6. Go to Forms > AuthModules > frmSplashScreen, double-click the Splash Screen and select the new image file.

Important: All images must be maintained with the default set scaling.

Changing the EAS Package Name

If you want to build the EAS app with a custom Package Name and Bundle Identifier, you must configure the native settings in the Store project that you imported to Visualizer.

Adding Contact Us Form and Support Details

You can add new forms to your EAS App as per your business requirements.

For example, to add the Contact Us form to your EAS App and provide a link to the new form within the StoreModule > fromStore form. The following steps details how to add a Contact Us form, provide contact details, and links to the form for a Mobile channel. In this example, you will be using the sample component: privacypreferences, which contains ready-to-use text placeholder and action buttons to navigate between forms.

Important: While modifying the source app, ensure that you follow Kony Reference Architecture and Extensibility Guidelines lines to support product upgrades.

  1. Add new form to the project as follows:
    1. In Visualizer, open the Store project, and ensure you are in the DESIGN mode.
    2. Click Store project > Mobile, right-click Forms, and click New Group.
    3.  Right-click the NewGroup and rename the new group to ContactUS.
    4. Right-click the ContactUS Group, and click New Form.
    5.  Rename the new form to frmContactUs.
  2. Download the Privacy Preferences (GDPR) component from Marketplace. To do so, click Marketplace menu > Browse and search for Privacy Preferences (GDPR). Click Import to Collection Library.
  3. Click frmContactUs form.
  4. From the downloaded components section, drag and drop the privacypreferences component to the frmContactUs form. The privacypreferences component is added to the form. You can change the caption, as follows:
    • In Properties panel, click Component.
    • Change the ID to ContactUsDetails.

    Now, you will be modifying the actions and text in the component details section according to the your business requirement for the Contact Us form as shown in the following table.

    Default text and actions in the Component

    Modified details in the Component section

    for the Contact Us form

  5. Click ContactUsDetails to edit component properties.
    1. In Properties > Component, do the following:
      1. In Header Text, change the text to Contact Us.
      2. In Message, specify the contact details.

        For example, Kony Support URL:
        <p>We welcome your feedback on our documentation. <br><br><a href="https://techpubs@kony.com/">Click here to write to us at</a>.<br><br>\n<a href="https://support@kony.com/">For technical questions, suggestions, and comments, or to report problems on Kony's product line, click here.</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​\n</p>

    1. To add the link to the OK button, do the following:
      1. On Properties, click Action.
      2. From onRightButtonClick, click the Edit button.
      3. From Action ID > Navigation, click Navigate to Form.
      4. Click the Navigate to Form <Form Name> element.
      5. Click frmStore. By doing this, when you click the OK button on the Contact Us form, the frmStore form appears.

    1. For the Contact Us form, you do not need any action for the No button. So, you can hide the button by removing the text, as follows:
      1. From Properties panel, click Component.
      2. In Left Button Text field, delete the caption.
  6. Now, add the link to the new button widget in the frmStore form to navigate to the Contact Us form.
    1. Select the frmStore form.
    2. From Visualizer > Default Library, drag and drop the Button widget to the form.

      You can change the button properties such as skin and text.

    3. On Properties, click Action.
    4. From onClick, click the Edit button.
    5. From Action ID > Navigation, click Navigate to Form.
    6. Click the Navigate to Form <Form Name> element.
    7. Click frmContactUs. By doing this, when you click the newly added widget on the frmStore form, the frmContactUs form appears.

      You can build or preview the EAS App to view the customized results now.

Modifying Server EAS App for Identity Services and Metadata of Binaries

Configuring Identity Services for EAS Authentication

You can configure new Identity Services and Object Services for EAS in the Kony App Store App. After you configure the new services, you must map the new services in the project and update the source code of the Store project.

Configuring Properties for Client Binaries

For information on how to configure basic properties such as the description of a client binary file, the icon of a binary, and the related screenshots of a binary file. refer to Configuring Properties for Client Binaries in Kony Fabric.

Publishing EAS App

EAS native apps need to be distributed in the same way as you distribute the other native apps. So, to distribute EAS native apps to end-users, you must publish your EAS native apps to the EAS Web app. End-users can access the EAS Web app to view and download EAS native apps on devices like any other native apps. By default, the EAS Web app is selected while publishing the apps to EAS.

Build and Publish App Binaries to EAS using Kony Visualizer

With Visualizer Starter, you can build client binaries and publish them directly to Kony App Server from Visualizer. For more information, refer to Publishing Native Apps to Enterprise App Store from Visualizer Starter.

Publish App Binaries to EAS using Kony Fabric

By using Kony Fabric, you can upload the client binaries and publish them to Kony App Server. After an app is published to Kony App Server, an authorized end-user can access the EAS Client app to view the available applications and download them using a mobile device.

Copyright © 2020 Kony, Inc. All rights reserved.

Open topic with navigation