App Studio

App Studio is a collection of software and resources that helps you build modern, user-friendly apps to search and visualize your Fusion data. This includes: Looking to get started? Download
  • Appkit - The framework that drives App Studio Wizard and App Studio Enterprise.
  • App Studio Enterprise - The standalone web application which you connect to your Fusion collection.
  • App Studio Wizard - The app development wizard built in the Fusion 4.x UI.
App Studio requires a running instance of Fusion Server, or access to one of our supported datasources, with one or more collections of indexed data.

Appkit

The Appkit framework provides a library of search application components encapsulated as simple building blocks that can be combined to create complex applications for search and information retrieval. See the reference docs for more information about the Appkit framework.

Modules

Appkit’s suite of search components is modular, which means you are able to get a working solution into place quickly using tried-and-tested components. Read more about modules.

Tags

The App Studio markup language defines a set of HTML-like elements, or tags, for defining search queries to the backend and visualizing the search results and facets, handling all the complexities of connecting to Fusion. For example, adding a radial progress bar is as simple including the following tag:
<progress:radial
    percentage="56">
</progress:radial>
This results in the following: Radial progress bar tag Over 150 tags are provided in the Appkit framework. Read more about tags.

Services

App Studio exposes a number of frontend JavaScript services which encapsulate reusable processes. These services are based on the AngularJS framework. There are also backend Java web services that perform the same functions as many of the frontend services, including platform search endpoints, platform series endpoint, query suggestion/typeahead services, csv/excel export, and facet search. Read more about services.

Search Platforms

Appkit integrates with a number of search engines, data warehouses and web service endpoints, even surfacing information from multiple sources simultaneously. The platform abstraction covers both search and storage sides, meaning that Appkit will implement for each platform the necessary protocols to save or index content for any platform. A number of platform adapters are available out-of-the-box with Appkit, and adding new ones is a simple exercise. Read more about search platforms.

Concepts

Reference

How-to

When you create an Appkit webapp, it uses a specific version of Appkit. Appkit releases occur independently of App Studio releases.You can upgrade web apps to use the latest version of Appkit.How to upgrade
  1. Stop the app.
  2. In the package.json file at the root of your project, update the appkit-ui dependency to the latest Appkit version, for example:
    "appkit-ui": "http://appkit.lucidworks.com/repo/4.2.0/appkit-ui.tar.gz",
    
  3. In the pom.xml file at the root of your project, update the value of the parent.version property to the latest Appkit version, for example:
        <parent>
            <groupId>twigkit</groupId>
            <artifactId>twigkit.app.js</artifactId>
            <version>4.2.0</version>
        </parent>
    
  4. Upgrade the Appkit Social module, if required.
  5. Perform any additional upgrade steps that are required for a specific Appkit upgrade. See the Appkit Release Notes for more information.
  6. Start the app.

App Studio Enterprise

App Studio Enterprise is an Appkit based web application that connects your Fusion instance, or other datasources, to the Appkit design framework. It comes preloaded with the Appkit framework library and a starter search app template. This allows you to develop and preview your search application using your data before deploying it to a production environment. Getting started only takes a few minutes and is as simple as downloading App Studio Enterprise, configuring the application to use your Fusion instance, and launching. See the README file included in the download for full instructions. App Studio Enterprise Example App
FAQHow does this differ from App Studio Wizard?Although both are powered by the Appkit framework, App Studio Enterprise is not integrated in the Fusion UI or packaged as a wizard. It is a standalone web application.

Concepts

Reference

How-to

This article describes how to deploy App Studio in Fusion 5 or App Studio in Fusion 4.
Starting in Fusion 5.11.0, Fusion has deprecated the Webapps service. As of Fusion 5.11.0, you should instead deploy App Studio manually.
In Fusion 4.x, the default FUSION_PORT value is 8764. In Fusion 5.x, the default value is 6764.
  1. Create UI (create a new App Studio project)
    curl -v -u USERNAME:PASSWORD -H 'Content-type: application/json' -X POST 'https://FUSION_HOST:FUSION_PORT/api/apps/APP_NAME/webapps' -d '{"id": "UI_ID","name": "UI_NAME","contextPath": "/UI_CONTEXT"}'
    
    
  2. Execute the command ./app-studio package to generate the app-studio-enterprise.war file. The file is created in the following location: /<$Application>/dist/app-studio-enterprise.war
  3. Deploy WAR (upload to webapps service)
    curl -v -u USERNAME:PASSWORD -X PUT -H 'Content-type: application/zip' 'https://FUSION_HOST:FUSION_PORT/api/apps/APP_NAME/webapps/UI_ID/war' --data-binary @app-studio-enterprise.war
    
  4. Go to https://FUSION_HOST:FUSION_PORT/webapps/UI_CONTEXT/.

App Studio Wizard

In Fusion 4.x, the App Studio Wizard is included in the Fusion UI. The wizard walks you though a step-by-step process for creating a basic search application using your data from Fusion. From there, you can continue customizing your search app with elements of the Appkit framework. A code editor is provided in the UI so you can preview your changes in real-time: Code editor
Starting in Fusion 5, App Studio is no longer included in the Fusion UI. However, you can use App Studio Enterprise to create apps for Fusion 5.

Concepts

Reference

How-to

This topic shows you the App Studio workflow from initial app development through deployment into Fusion.
This procedure does not apply to App Studio Enterprise (ASE).

Development tools and workflow

In building out a search application, App Studio developers use the following tools:
  • an IDE (Intellij, eclipse, VS Code, and so on)
  • Maven for server-side dependency management and its integrated Jetty plugin
  • NPM 9.0.2 for client-side dependency management
  • Java 1.8 JDK
The high-level development workflow looks like this:
  1. Clone the repository of our project on our local system.
  2. Make additions and edits to the code which we then commit to the repo.
  3. Use the integrated Maven Jetty plugin to serve up our local application at http://localhost:8080, where we can see most changes made to the code in real time.

Build a profile (optional)

For each environment, we can build out a profile to overlay specific parameters to this environment:Example command: mvn clean jetty:run -Dtwigkit.profile=profileNameIn App Studio apps, we can have different profiles for each environment (Dev, QA and Prod) as well as local development. These profiles contain configuration files that should overwrite the files with the corresponding names and directory locations in the main resources directory.For more details, see “Package the web application for different runtime environments - build profiles” at https://dev.twigkit.net/docs/Getting_started/Installation/Building_from_source/?q=profile.

Configure the profile (if any)

Following are the files you may want to specify for a given environment in each profile:
  • message.service.fusion.conf This config file is responsible for the configuration of the way we send signals to the Fusion endpoint. The important property here is query-profile, which should point to the query profile that manages the main collection to which we want to send signals. For example, if we specify a query profile that points to the myCollection collection, then App Studio sends signals to the myCollection_signals collection (if it exists).
  • platforms.fusion.fusion.conf This is our base Fusion platform configuration file. It manages all the configuration settings that are common amongst each Fusion platform. These settings are inherited by any config file in the platforms.fusion directory, as this file has the same name as the directory it resides in.
  • platforms.fusion.data.conf This is our configuration file for the main platform, by default. The only required parameter is the query-profile to send these queries to. This is included in the profiles as during the course of development, there were some differences across environments in the name of this collection, so we set them individually for each environment.
  • security.kerberos.conf This is an example of a security configuration file. In this case, the file in which Kerberos security is configured. The parameters set here are referenced in our configuration of resources/spring-security.xml when the app is loaded. The main parameters to understand are service-principal and keytab-location. The service principal should be the one used when creating the keytab file. The keytab location is the location in which the keytab resides on the server where App Studio is running.
  • security.security.conf The function of this file is to set general parameters related to security. The type parameter should be the type of security your app should use (kerberos, spring_security, saml, and so on). The password parameter is the key that is used when hashing passwords using the twigcrypt utility. It is to be used in combination with a ‘secret seed’ in order to generate the hash.
  • services.api.fusion.conf This is the main file in which the connection to the Fusion API is configured. ­The host, port and protocol values are all given independently. The credentials given are that of a service account that has POST rights to enable the sending of signals to Fusion.
  • logback.xml In this file, we can add additional <logger> tags to print out additional logging on specific classes in the web apps or local logs. The main logging comes from the root package twigkit.

Package the app

To deploy our code to the server, we use Maven to create a WAR file:
  • If you are using a build profile as described above, run mvn clean package -Dtwigkit.profile=profileName.
  • If you are not using a build profile, run mvn clean package.
You can watch the logs for any compilation errors.
Rename the resulting WAR file to ROOT.war, if it is not already named this way.

Deploy the app

Before you deploy an app, make sure that both of these prerequisites are met:
  • Fusion is installed.
  • A Fusion app is created.
Deploy the web app as follows:
  1. Create a new App Studio context in Fusion by executing the following command as a user who has admin rights:
    curl -v -u USERNAME:PASSWORD -H 'Content-type: application/json' -X POST 'http://localhost:8764/api/apollo/apps/my-fusion-app-name/webapps' -d '{"id": "myasapp","name": "My AS App","contextPath": "/"}'
    
  2. Upload the WAR to the Fusion Webapps service:
    curl -v -u USERNAME:PASSWORD -H 'Content-type: application/zip' -X PUT 'http://localhost:8764/api/apollo/apps/my-fusion-app-name/webapps/myasapp/war' --data-binary @ROOT.war
    
    This puts the WAR file into the Fusion blob store, and tells the Webapps service that this is the file that should be started in the specified context.
App Studio’s interface includes a built-in code editor that opens in your browser.The code editor modifies the file that configures your search interface (app-studio/app/views/search.html in version 4.0), using App Studio’s markup tags. Your search interface reloads automatically when you save your changes in the code editor.The code editor is also where you can publish your search interface to Fusion Server.

Opening the code editor

How to open the code editor
  • Press the ESC key or
  • Click the code editor button: Code editor button
Code Editor

The toolbar

Code editor toolbar

Saving your changes

The Save button (or &#8984;-S/CTRL-S) saves the file and reloads the page to display your updated interface:Save

Publishing your search interface from the code editor (version 4.0)

The Publish button deploys your search interface to Fusion. App Studio prompts you to confirm that you want to publish your Web app to Fusion:Publish to FusionClick Publish to complete the deployment.When deployment is complete, App Studio displays the Fusion URL where you can access your search interface:Publication finished
In App Studio, a sidebar is rendered using the simple layout:sidebar tag. Within the sidebar, the search:facet-list and search:facet tags contain the parameters that configure the facet fields and their display.Sidebar with facets
<layout:block md="1-3" lg="1-4" drawer="left" id="sidebar" styling="blocksidebar-light">
    <layout:sidebar>
        <layout:box>

            <!-- List facets and give them intuitive labels -->
            <search:facet-list facet-names="genres_ss" response="response" platform="platform" query="query" styling="facet-list facet-list-wrappedheader">
              <search:facet when-field="genres_ss" show="10" search-enabled="true" platform="platform" query="query" max-characters="40" show="12" show-more="24" collapsible="true"></search:facet>
              <search:facet show="10" max-characters="40" show="12" show-more="24" collapsible="true"></search:facet>
            </search:facet-list>

        </layout:box>
    </layout:sidebar>
</layout:block>
App Studio supports the ability to generate suggestions on the fly, also called autocomplete or type-ahead, using the Terms component or Suggest component embedded in Fusion’s Solr core.The Solr Terms component provides access to the indexed terms in a field and the number of documents that match each term. This can be used, for example, to find all terms in the Solr index that match an expansion of the given query term. For example, “car” might return CARRY, CARRIED, CARE, CARL, and so on.
Since the Terms component only allows suggestions one term at a time, in cases when multiple terms are being typed, suggestions are given for the last term typed.
How to configure suggestions with the Terms component
  1. Configure Fusion:
    1. In Fusion, navigate to Querying > Query Pipelines.
    2. Select the query pipeline you are using.
    3. Select the Solr Query pipeline stage.
    4. Under configure Request Handlers Allowed for Queries, click Add Add.
    5. Enter “Terms”. Add a request handler
    6. Click Save.
      Unlike the Suggest component, you do not need to modify solrconfig.xml to use the Terms component; it is preconfigured.
  2. Configure App Studio:
    1. Open config/services/suggestions/terms.conf. Its default content is as follows:
      name: twigkit.search.solr.suggestions.SolrQueryTermsService
      source: platforms.fusion
      
      # List out all fields to base your terms suggestions on
      term-fields: title
      title:
      
    2. Change the default source: platforms.fusion to source: platforms.fusion.data.
    3. Edit the value of term-fields as a comma-separated list of fields in your data from which to retrieve terms.
      This corresponds to Solr’s terms.fl parameter.
    4. Edit the value of title to describe the group of suggestions returned by Fusion. This title can be used to group suggestions in the UI. If you are implementing only one group of suggestions, you can leave this blank or set it to something generic, like “Suggested phrases”.
    5. Save and close the file.
    6. Open app/views/partials/header.tpl.html.
    7. Uncomment the following line:
      <query-suggestions completion-service="services.suggestions.terms" action="/search"></query-suggestions>
      
    8. Save the file.
  3. Refresh the search UI in your browser.
  4. Test the feature by typing a search phrase. App Studio now displays suggested terms on the fly: Suggested terms

Versions FAQ

How are these products versioned?

  • Appkit is versioned according to updates to the code base.
  • App Studio Enterprise versions are loosely tied to the version of the Appkit framework it includes. An update from 4.8.0 to 4.9.0 may not include any changes to App Studio Enterprise.

What about compatibility?

  • Any version of Appkit can be used with Fusion 4.x. However, only Appkit 4.6.0+ can be used with Fusion 5.y.
  • App Studio Enterprise can be used with any version of Fusion or Appkit.

Can these products be updated independently?

  • Appkit can be upgraded independently, assuming there are no version compatibility issues.
  • App Studio Enterprise is released when a new version of Appkit is released. As a result, App Studio Enterprise itself does not need to be updated. To move to the latest code base, simply update the Appkit version within the project.
When you create an Appkit webapp, it uses a specific version of Appkit. Appkit releases occur independently of App Studio releases.You can upgrade web apps to use the latest version of Appkit.How to upgrade
  1. Stop the app.
  2. In the package.json file at the root of your project, update the appkit-ui dependency to the latest Appkit version, for example:
    "appkit-ui": "http://appkit.lucidworks.com/repo/4.2.0/appkit-ui.tar.gz",
    
  3. In the pom.xml file at the root of your project, update the value of the parent.version property to the latest Appkit version, for example:
        <parent>
            <groupId>twigkit</groupId>
            <artifactId>twigkit.app.js</artifactId>
            <version>4.2.0</version>
        </parent>
    
  4. Upgrade the Appkit Social module, if required.
  5. Perform any additional upgrade steps that are required for a specific Appkit upgrade. See the Appkit Release Notes for more information.
  6. Start the app.
See the FAQ section for more frequently asked questions.