Building a user interface

To build a basic HTML5 application that exposes your API, you will need to implement a few steps. First of all, you need to enable your previous microservice to accept HTTP requests from different domains (a feature called cross-origin resource sharing).

In order to do this, I have used an open source plugin that enables CORS support for JAX-RS 2.0 in the Java EE 7 environment.

Put this fraction of XML into the pom.xml file of the microservices built from the previous sections, as follows:

<!-- CORS Support For JAX-RS 2.0 / JavaEE 7  --> 

<dependency>
<groupId>com.airhacks</groupId>
<artifactId>jaxrs-cors</artifactId>
<version>0.0.2</version>
<scope>compile</scope>
</dependency>

This plugin creates the filter needed to implement the CORS feature inside the microservices, without writing other Java code.

You have to decide whether to build a monolith user interface that contains the user experience of all of the microservices, or split the logic into different micro frontends, and then create a single-page application that aggregates them.

Let's start to build the user interface of the football player microservice.

I used Angular 6 and Bootstrap 4 to create a new HTML 5 project, named football-player-ui. To accelerate the development, I used the Angular CLI, which makes the creation of the application easy.

To run the examples that you will find in the GitHub repository, or to create a user interface, you will need to install the Angular CLI and the relative dependencies.

Launch the following commands to install NVM, NPM, and NodeJS:

$ touch ~/.bash_profile
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

Close your Terminal in order to make your changes effective and open a new one. Then, launch the following commands:

$ nvm ls-remote 
$ nvm install 8.11.3
$ npm install -g @angular/cli
$ npm install --save bootstrap font-awesome
$ npm install rxjs@6 rxjs-compat@6 --save

Now, you are ready to create the files needed to implement the presentation view (HTML and CSS) and the business logic (JavaScript, to invoke the RESTful APIs).

Since the application is only built with HTML and JavaScript files, you can just put them into an Apache web server directory (for example, /var/www/html), and launch it:

$ /etc/init.d/httpd start

You should obtain a result like the following screenshot:

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset