Building micro services through Event Driven Architecture part15 : SPA Front End.

Building microservices through Event Driven Architecture part15 : SPA Front End. 

This tutorial is the 15th part of a series : Building microservices through Event Driven Architecture.

The previous step is about Building micro services through Event Driven Architecture part14 : Query API

In this tutorial, I will show how to build a SPA Front End using angular to send commands and  request queries.

The SPA Front End  use the commandAPI to send commands ( create , update or delete a speech), then the command will transit to  a Kafka service bus  before being available to a no-sql database elasticsearch.

The Query API will use the no-sql database elasticsearch to display the newly  created data ( In the the upcomming tutorial, I will use Signalr Notification to notify the SPA Front End to update the screen )

To follow this tutorial, you should be familiar with angular

Environment variables

The angular project contains a folder named environments. Inside this folder I can define environment variables for example : environment.test.ts to define the test environment settings .

The following command  will run a build using the test environment

ng run build –configuration=test

In my demo , I’m going to the default environment wich is dev (environment.ts ) 

npm run build will use use this environment by default . 

Here I define the command Api endpoint and the query Api endpoint 

Speech Service

speechService use the HttpClient service from @angular/common/http to send POST, GET, PUT or DELETE requests

SpeechList Component

SpeechCreateComponent

SpeechListComponent call speechService to  to send (POST) data to the command Api

Testing

Testing with local environment 

To setup the test environment , you need to install kafka , elastic search  https://logcorner.com/building-microservices-through-event-driven-architecture-part12-produce-events-to-apache-kafka/

Start zookeeper

zookeeper-server-start.bat config\zookeeper.properties

Start Kafka

kafka-server-start.bat config\server.properties

kafka-topics –zookeeper 127.0.0.1:2181 –topic speech –create –partitions 3 –replication-factor 1

Start ElasticSearch and Kibana

bin/kibana

http://localhost:5601

Start  service bus 

clone the code from this repo : https://github.com/logcorner/LogCorner.EduSync.Speech.ServiceBus/tree/develop

Start  Command API

clone the code from this repo : https://github.com/logcorner/LogCorner.EduSync.Speech.Command/tree/develop

Start  Query API

clone the code from this repo : https://github.com/logcorner/LogCorner.EduSync.Speech.Query/tree/develop

Start  Front End

clone the code from this repo : https://github.com/logcorner/LogCorner.EduSync.Speech.Front/tree/develop

See it in action

 

Testing with docker

Create a docker network

• docker network create speech_network

Build and Run multi-container docker application for the infrastructure ( kafka, elasticsearch , producer and consumer)

……\LogCorner.EduSync.Speech.ServiceBus\src

• docker-compose build
• docker-compose up

Build and Run multi-container docker application for the command Api( sql server linux and the command Api)

…\LogCorner.EduSync.Speech.Command\src

• docker-compose build
• docker-compose up

Build and Run multi-container docker application for the query Api

….\LogCorner.EduSync.Speech.Query\src

• docker-compose build
• docker-compose up

…….\LogCorner.EduSync.Speech.Front\logcorner-edusync-speech

• docker-compose build
• docker-compose up

Build and Run container docker application for the front end SPA ( nginx and the angular front end)

docker ps –all –format “table {{.ID}}\t{{.Image}}\t{{.Names}}\t{{.Ports}}”

http://localhost:4200/speech

Code source is available here : 

• https://github.com/logcorner/LogCorner.EduSync.Speech.Front/tree/develop
• https://github.com/logcorner/LogCorner.EduSync.Speech.Query/tree/develop
• https://github.com/logcorner/LogCorner.EduSync.Speech.Command/tree/develop
• https://github.com/logcorner/LogCorner.EduSync.Speech.ServiceBus/tree/develop

Thanks for reading, if you have any feedback, feel free to post it

Regards