Skip to main content

Step 2 - Develop a simple front-end application

Rumyana Grigorova
  • Updated

    This page enables you to build a simple front-end application powered by Fredhopper. When completed, please proceed with Step 3 - Develop your complete front-end application.

    Background

    Your front-end application interacts directly with the user of your website. The front-end application will send queries to Fredhopper to determine what information to display. In this article you will develop a front-end application that:

    1. Allows browsing and free-text search
    2. Renders breadcrumbs, facets and item lister

    All code samples are for Java using JAX-WS as SOAP implementation (which is part of the Java 1.6+ release). The code is as well compatible with Java 1.4/1.5. To run the code with other SOAP implementations (like Axis 1/2) you need to adjust the connection code in the method queryFredhopper and the Array/List handling. The easiest is to load the code in your development environment, and change all pieces that show syntax errors.

    The source code shows core features in as few as possible lines of code. For your real implementation, please remind adding error checking and following software engineering best practices. See the Reference Implementation for a well designed and well implemented example.

    Requirements

    Please ensure that the following requirements are met before you start:

    1. Complete Step 1 - Prepare your development environment
    2. Set up a Fredhopper instance in your local environment on which you can search and browse via the Preview Pages.
    3. Familiarise yourself with the basic concepts of Java and Java Servlets , e.g. how to deploy a Serlvet based web application. If you are not familiar with Java Servlets please follow first one of the tutorials.
    4. Set up your development environment to deploy servlets, e.g. Eclipse with Tomcat

    Step 1: Create the skeleton

    In the first step we are building a skeleton that will be used in the next steps. At this step no queries are sent to Fredhopper. Please download the Java source code (go here, then browse to query-lang-samples-2.30-fas-<latest>/src/main/java/frontend_tutorial/SkeletonServlet.java), and run it. The code contains the following methods:

    Method Explanation
    doGet The main servlet method to handle incoming requests. Handles reading the parameters and outputting the HTML table.
    queryFredhopper Queries Fredhopper
    renderBreadcrumb Renders the breadcrumb
    renderFacetMap Renders the facetmap
    renderItemLister Renders the item lister

    If you start the web application, you will see a HTML table with a search box and empty cells for the breadcrumb, facets and item lister.

    Step 2: Add breadcrumb

    Now we will connect our skeleton application with Fredhopper, and render the first query result: the breadcrumb. Therefore please download the Java source code (go here, then browse to query-lang-samples-2.30-fas-<latest>/src/main/java/frontend_tutorial/BreadcrumbServlet.java), adjust the username/password, and run it.

    Our application at this step:

    • Builds query based on URL parameters or falls back to homepage request
    • Sends request to Fredhopper
    • Shows number of results for the request

    After starting the application, you see next to the breadcrumb the number of items in your Fredhopper instance. The number of items will adjust if you search for a term. In case that you cannot find items, please ensure that you retrieve results querying the Fredhopper Preview pages.

    Step 3: Add facetmap

    Next, we will add a fully functional facetmap to our web application which allows users to slice & dice the catalog. Please download again the Java source code (go here, then browse to query-lang-samples-2.30-fas-<latest>/src/main/java/frontend_tutorial/FacetmapServlet.java) for this step, adjust the username/password, and run it.

    In the running application you can refine your results based on the facetmap on the left side.

    Step 4: Add item lister

    Next, we will visualize the items, so that your users can learn more about the items in the result set. Again, download the Java source code (go here, then browse to query-lang-samples-2.30-fas-<latest>/src/main/java/frontend_tutorial/ListerServlet.java) for this step, adjust the username/password, and run it.

    After starting the application, you will see a lister of items. Depending on your Fredhopper configuration, you may have to click your way down to the lowest level category (via the facetmap) before the items appear.

    In a real application you would add pagination code and re-sorting controls.

    Step 5: Add campaigns

    Finally, we will visualize campaigns, so that you can inform your users about interesting offers. Again, download the Java source code (go here, then browse to query-lang-samples-2.30-fas-<latest>/src/main/java/frontend_tutorial/PromotionServlet.java) for this step, adjust the username/password, and run it.

    After starting the application, you will see a list of campaign below the item lister.

    Congratulations! You created a simple front-end application. Please proceed with Step 3 - Develop your complete front-end application

    Related articles

    Comments

    0 comments

    Please sign in to leave a comment.