[Quick Start] building a single web page application with QBit

fadihub edited this page Jun 7, 2015 · 3 revisions

##overview The QBit lib allows you to bind objects to HTTP ports so that they can be called by REST and WebSocket clients. This example will demonstrate that.

Building a simple Hello World app using QBit

This wiki will walk trough the process of building a simple single page app will QBit.

What you will build

You will build a page that sends (HTTP/GET) request and gets back some JSON in which it parses and displays the Hello World message.

You will be able to view the app and test it after you run HelloWorldRestServer.java at the following address using your favorite browser:

 http://localhost:9999/ui/helloWorld.html

When you open up the app you will get an opting to press a try it button once you do you will get the following:

Hello World!

How to complete this guide

In order to complete this example successfully you will need the following installed on your machine:

Now that your machine is all ready let's get started:

git clone https://github.com/fadihub/hello.git

Once this is done you can test the service, let's first explain the process:

helloWorld.html Listing

~/hello/src/main/resources/ui/helloWorld.html

<!DOCTYPE html>
<html>
<body>

<p>click the button:</p>


<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
    function httpGet(theUrl)
    {
        var xmlHttp = null;
        xmlHttp = new XMLHttpRequest();
        xmlHttp.open( "GET", theUrl, false );
        xmlHttp.send( null );
        return xmlHttp.responseText;
    }
    function myFunction() {
        var json = httpGet("/services/helloservice/hello");
        var helloObject = JSON.parse(json);
        document.getElementById("demo").innerHTML = helloObject.hello;
    }
</script>

</body>
</html>

As you can see very simple code requesting the hello object, then parsing it into JSON, then displaying it onto the app.

HelloObject.java Listing

~/hello/src/main/java/io.advantageous.qbit.example.hello/HelloObject.java

package io.advantageous.qbit.example.hello;

/**
 * Created by rhightower on 2/10/15.
 */


public class HelloObject {
    private final String hello;
    private final long time = System.currentTimeMillis();

    public HelloObject(String hello) {
        this.hello = hello;
    }
}

This is the hello object. This represents the Model (M) if you are comparing it to a MVC system.

HelloService.java Listing

~/hello/src/main/java/io.advantageous.qbit.example.hello/HelloService.java

package io.advantageous.qbit.example.hello;

import io.advantageous.qbit.annotation.RequestMapping;

/**
 * Created by rhightower on 2/10/15.
 */

@RequestMapping("/helloservice")
public class HelloService {


    @RequestMapping("/hello")
    public HelloObject hello() {
        return new HelloObject("Hello World!");
    }

}

If you are comparing it to a MVC system this this like the controller (C).

HelloWorldRestServer.java Listing

~/hello/src/main/java/io.advantageous.qbit.example.hello/HelloWorldRestServer.java

package io.advantageous.qbit.example.hello;

import io.advantageous.qbit.http.HttpServer;
import io.advantageous.qbit.server.ServiceEndpointServer
ServiceEndpointServer
ServiceEndpointServer;
import io.advantageous.qbit.system.QBitSystemManager;

import static io.advantageous.qbit.http.HttpServerBuilder.httpServerBuilder;
import static io.advantageous.qbit.server.EndpointServerBuilder.endpointServerBuilder;
import static org.boon.Boon.resource;

/**
 * Created by rhightower on 2/9/15.
 */
public class HelloWorldRestServer {


    public static final String HTML_HELLO_PAGE = "/ui/helloWorld.html";


    public static void main(String... args) {

        /* Create the system manager to manage the shutdown. */
        QBitSystemManager systemManager = new QBitSystemManager();

        HttpServer httpServer = httpServerBuilder()
                .setPort(9999).build();

        /* Register the Predicate using a Java 8 lambda expression. */
        httpServer.setShouldContinueHttpRequest(httpRequest -> {
            /* If not the page uri we want to then just continue by returning true. */
            if (!httpRequest.getUri().equals(HTML_HELLO_PAGE)) {
                return true;
            }
            /* read the page from the file system or classpath. */
            final String helloWorldWebPage = resource(HTML_HELLO_PAGE);
            /* Send the HTML file out to the browser. */
            httpRequest.getResponse().response(200, "text/html", helloWorldWebPage);
            return false;
        });


        /* Start the service. */
        final ServiceEndpointServer
ServiceEndpointServer
ServiceEndpointServer serviceServer = endpointServerBuilder().setSystemManager(systemManager)
                .setHttpServer(httpServer).build().initServices(new HelloService()).startServer();

        /* Wait for the service to shutdown. */
        systemManager.waitForShutdown();

    }


}

This is like the view (V) in a MVC system, when you run this you can see the app on http://localhost:9999/ui/helloWorld.html

Test The APP

With your terminal cd into hello then gradle clean build then gradle run then open up your favorite browser and visit http://localhost:9999/ui/helloWorld.html the simple app will show up and then you can click try it and the message Hello World! will be printed.

##Summary You have just built a simple app with QBit and tested it, see you in the next tutorial!

Tutorials

__

Docs

Getting Started

Basics

Concepts

REST

Callbacks and Reactor

Event Bus

Advanced

Integration

QBit case studies

QBit 2 Roadmap

-- Related Projects

Kafka training, Kafka consulting, Cassandra training, Cassandra consulting, Spark training, Spark consulting

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.