we looked at some of the various approaches to event-driven architecture in go-micro and in go in general. This part, we're going to delve into the client side and take a look at how we can create web clients which interact with our platform.

We'll take a look at how micro toolkit, enables you to proxy your internal rpc methods externally to web clients.

We'll be creating a user interfaces for our platform, a login screen, and a create consignment interface. This will tie together some of the previous posts.

So let's begin!

REST has served the web well for many years now, and it has rapidly become the goto way of managing resources between clients and servers. REST came about to replace a wild west of RPC and SOAP implementations, which felt dated and painful at times. Ever had to write a wsdl file? eye roll.

REST promised us a pragmatic, simple, and unified approach to managing resources. REST used http verbs to be more explicit in the type of action being performed. REST encouraged us to use http error codes to better describe the response from the server. And for the most part, this approach worked well, and was fine. But like all good things, REST had many gripes and annoyances, that I'm not going to detail in full here. But do give a read. But RPC is making a comeback with the advent of microservices.

Rest is great for managing different resources, but a microservice typically only deals with a single resource by its very nature. So we don't need to use RESTful terminology in the context of microservices. Instead we can focus on specific actions and interactions with each service.

We've been using go-micro extensively throughout this tutorial, we'll now touch on the micro cli/toolkit. The micro toolkit provides an API gateway, a sidecar, a web proxy, and a few other cool features. But the main part we'll be looking at in this post is the API gateway.

The API gateway will allow us to proxy our rpc calls to web friendly JSON rpc calls, and will expose urls which we can use in our client side applications.

So how does this work? You firstly ensure that you have the micro toolkit installed:

Now let's head into our user service, I made a few changes, mostly error handling and naming conventions:

  1. // shippy-user-service/main.go
  2. package main
  4. import (
  5.     "log"
  7.     pb "github.com/EwanValentine/shippy-user-service/proto/auth"
  8.     "github.com/micro/go-micro"
  9.     _ "github.com/micro/go-plugins/registry/mdns"
  10. )
  12. func main() {
  14.     // Creates a database connection and handles
  15.     // closing it again before exit.
  16.     db, err := CreateConnection()
  17.     defer db.Close()
  19.     if err != nil {
  20.         log.Fatalf("Could not connect to DB: %v", err)
  21.     }
  23.     // Automatically migrates the user struct
  24.     // into database columns/types etc. This will
  25.     // check for changes and migrate them each time
  26.     // this service is restarted.
  27.     db.AutoMigrate(&pb.User{})
  29.     repo := &UserRepository{db}
  31.     tokenService := &TokenService{repo}
  33.     // Create a new service. Optionally include some options here.
  34.     srv := micro.NewService(
  36.         // This name must match the package name given in your protobuf definition
  37.         micro.Name("shippy.auth"),
  38.     )
  40.     // Init will parse the command line flags.
  41.     srv.Init()
  43.     // Will comment this out for now to save having to run this locally... 
  44.     // publisher := micro.NewPublisher("user.created", srv.Client())
  46.     // Register handler
  47.     pb.RegisterAuthHandler(srv.Server(), &service{repo, tokenService, publisher})
  49.     // Run the server
  50.     if err := srv.Run(); err != nil {
  51.         log.Fatal(err)
  52.     }
  53. }
  1. // shippy-user-service/proto/auth/auth.proto
  2. syntax = "proto3";
  4. package auth;
  6. service Auth {
  7.     rpc Create(User) returns (Response) {}
  8.     rpc Get(User) returns (Response) {}
  9.     rpc GetAll(Request) returns (Response) {}
  10.     rpc Auth(User) returns (Token) {}
  11.     rpc ValidateToken(Token) returns (Token) {}
  12. }
  14. message User {
  15.     string id = 1;
  16.     string name = 2;
  17.     string company = 3;
  18.     string email = 4;
  19.     string password = 5;
  20. }
  22. message Request {}
  24. message Response {
  25.     User user = 1;
  26.     repeated User users = 2;
  27.     repeated Error errors = 3;
  28. }
  30. message Token {
  31.     string token = 1;
  32.     bool valid = 2;
  33.     repeated Error errors = 3;
  34. }
  36. message Error {
  37.     int32 code = 1;
  38.     string description = 2;
  39. }

And…

Now run $ make build && make run. Then head over to your shippy-email-service and run $ make build && make run. Once both of these are running, run:

  1. $ docker run -p 8080:8080 \ 
  2.     -e MICRO_REGISTRY=mdns \
  3.     microhq/micro api \
  4.     --handler=rpc \
  5.     --address=:8080 \
  6.     --namespace=shippy

This runs the micro api-gateway as an rpc handler on port 8080 in a Docker container. We're telling it to use mdns as our registry locally, the same as our other services. Finally, we're telling it to use the namespace shippy, this is the first part of all of our service names. I.e shippy.auth or shippy.email. It's important to set this as it defaults to go.micro.api, in which case, it won't be able to find our services in order to proxy them.

Our user service methods can now be called using the following:

Create a user:

  1. curl -XPOST -H 'Content-Type: application/json' \
  2.     -d '{ "service": "shippy.auth", "method": "Auth.Create", "request": { "user": { "email": "[email protected]", "password": "testing123", "name": "Ewan Valentine", "company": "BBC" } } }' \ 
  3.     http://localhost:8080/rpc

As you can see, we include in our request, the service we want to be routed to, the method on that service we want to use, and finally the data we wish to be used.

Authenticate a user:

  1. $ curl -XPOST -H 'Content-Type: application/json' \ 
  2.     -d '{ "service": "shippy.auth", "method": "Auth.Auth", "request":  { "email": "", "password": "SomePass" } }' \
  3.     http://localhost:8080/rpc

Great!

Now it's time to fire up our consignment service again, $ make build && make run. We shouldn't need to change anything here, but, running the rpc proxy, we should be able to do:

The final service we will need to run in order to test our user interface, is our vessel service, nothing's changed here eiter, so just run $ make build && make run.

Let's make use of our new rpc endpoints, and create a UI. We're going to be using React, but feel free to use whatever you like. The requests are all the same. I'm going to be using the react-create-app library from Facebook. $ npm install -g react-create-app. Once that's installed you can do $ react-create-app shippy-ui. And that will create the skeleton of a React application for you.

So let's begin…

  1. // shippy-ui/src/App.js
  2. import React, { Component } from 'react';
  3. import './App.css';
  4. import CreateConsignment from './CreateConsignment';
  5. import Authenticate from './Authenticate';
  7. class App extends Component {
  9.   state = {
  10.     err: null,
  11.     authenticated: false,
  12.   }
  14.   onAuth = (token) => {
  15.     this.setState({
  16.       authenticated: true,
  17.     });
  18.   }
  20.   renderLogin = () => {
  21.     return (
  22.       <Authenticate onAuth={this.onAuth} />
  23.     );
  24.   }
  26.   renderAuthenticated = () => {
  27.     return (
  29.     );
  30.   }
  32.     return localStorage.getItem('token') || false;
  33.   }
  35.   isAuthenticated = () => {
  36.     return this.state.authenticated || this.getToken() || false;
  37.   }
  39.   render() {
  40.     const authenticated = this.isAuthenticated();
  41.     return (
  42.       <div className="App">
  43.         <div className="App-header">
  44.           <h2>Shippy</h2>
  45.         </div>
  46.         <div className='App-intro container'>
  47.           {(authenticated ? this.renderAuthenticated() : this.renderLogin())}
  48.         </div>
  49.       </div>
  50.     );
  51.   }
  52. }
  54. export default App;

Now let's add our main two components, Authenticate and CreateConsignment:

  1. // shippy-ui/src/Authenticate.js
  2. import React from 'react';
  4. class Authenticate extends React.Component {
  6.   constructor(props) {
  7.     super(props);
  8.   }
  10.   state = {
  11.     authenticated: false,
  12.     email: '',
  13.     password: '',
  14.     err: '',
  15.   }
  17.   login = () => {
  18.     fetch(`http://localhost:8080/rpc`, {
  19.       method: 'POST',
  20.       headers: {
  21.         'Content-Type': 'application/json',
  22.       },
  23.       body: JSON.stringify({
  24.         request: {
  25.           email: this.state.email,
  26.           password: this.state.password,
  27.         },
  28.         service: 'shippy.auth',
  29.         method: 'Auth.Auth',
  30.       }),
  31.     })
  32.     .then(res => res.json())
  33.     .then(res => {
  34.       this.props.onAuth(res.token);
  35.       this.setState({
  36.         token: res.token,
  37.         authenticated: true,
  38.       });
  39.     })
  40.     .catch(err => this.setState({ err, authenticated: false, }));
  41.   }
  43.   signup = () => {
  44.     fetch(`http://localhost:8080/rpc`, {
  45.       method: 'POST',
  46.       headers: {
  47.         'Content-Type': 'application/json',
  48.       },
  49.       body: JSON.stringify({
  50.         request: {
  51.           email: this.state.email,
  52.           password: this.state.password,
  53.           name: this.state.name,
  54.         },
  55.         method: 'Auth.Create',
  56.         service: 'shippy.auth',
  57.       }),
  58.     })
  59.     .then((res) => res.json())
  60.     .then((res) => {
  61.       this.props.onAuth(res.token.token);
  62.       this.setState({
  63.         token: res.token.token,
  64.         authenticated: true,
  65.       });
  66.       localStorage.setItem('token', res.token.token);
  67.     })
  68.     .catch(err => this.setState({ err, authenticated: false, }));
  69.   }
  71.   setEmail = e => {
  72.     this.setState({
  73.       email: e.target.value,
  74.     });
  75.   }
  77.   setPassword = e => {
  78.     this.setState({
  79.       password: e.target.value,
  80.     });
  81.   }
  83.   setName = e => {
  84.     this.setState({
  85.       name: e.target.value,
  86.     });
  87.   }
  89.   render() {
  90.     return (
  91.       <div className='Authenticate'>
  92.         <div className='Login'>
  93.           <div className='form-group'>
  94.             <input
  95.               type="email"
  96.               onChange={this.setEmail}
  97.               placeholder='E-Mail'
  98.               className='form-control' />
  99.           </div>
  100.           <div className='form-group'>
  101.             <input
  102.               type="password"
  103.               onChange={this.setPassword}
  104.               placeholder='Password'
  105.               className='form-control' />
  106.           </div>
  107.           <button className='btn btn-primary' onClick={this.login}>Login</button>
  108.           <br /><br />
  109.         </div>
  110.         <div className='Sign-up'>
  111.           <div className='form-group'>
  112.             <input
  113.               type='input'
  114.               onChange={this.setName}
  115.               placeholder='Name'
  117.           </div>
  118.             <input
  119.               type='email'
  120.               onChange={this.setEmail}
  121.               placeholder='E-Mail'
  122.               className='form-control' />
  123.           </div>
  124.           <div className='form-group'>
  125.             <input
  126.               type='password'
  127.               onChange={this.setPassword}
  128.               placeholder='Password'
  129.               className='form-control' />
  130.           </div>
  131.           <button className='btn btn-primary' onClick={this.signup}>Sign-up</button>
  132.         </div>
  133.       </div>
  134.     );
  135.   }
  136. }
  138. export default Authenticate;

and…

  1. // shippy-ui/src/CreateConsignment.js
  2. import React from 'react';
  3. import _ from 'lodash';
  5. class CreateConsignment extends React.Component {
  7.   constructor(props) {
  8.     super(props);
  9.   }
  11.   state = {
  12.     created: false,
  13.     description: '',
  14.     weight: 0,
  15.     containers: [],
  16.     consignments: [],
  17.   }
  19.   componentWillMount() {
  20.     fetch(`http://localhost:8080/rpc`, {
  21.       method: 'POST',
  22.       headers: {
  23.         'Content-Type': 'application/json',
  24.       },
  25.       body: JSON.stringify({
  26.         service: 'shippy.consignment',
  27.         method: 'ConsignmentService.Get',
  28.         request: {},
  29.       })
  30.     })
  31.     .then(req => req.json())
  32.     .then((res) => {
  33.       this.setState({
  34.         consignments: res.consignments,
  35.       });
  36.     });
  37.   }
  39.   create = () => {
  40.     const consignment = this.state;
  41.     fetch(`http://localhost:8080/rpc`, {
  42.       method: 'POST',
  43.       headers: {
  44.         'Content-Type': 'application/json',
  45.       },
  46.       body: JSON.stringify({
  47.         service: 'shippy.consignment',
  48.         method: 'ConsignmentService.Create',
  49.         request: _.omit(consignment, 'created', 'consignments'),
  50.       }),
  51.     })
  52.     .then((res) => res.json())
  53.     .then((res) => {
  54.       this.setState({
  55.         created: res.created,
  56.         consignments: [...this.state.consignments, consignment],
  57.       });
  58.     });
  59.   }
  61.   addContainer = e => {
  62.     this.setState({
  63.       containers: [...this.state.containers, e.target.value],
  64.     });
  65.   }
  67.   setDescription = e => {
  68.     this.setState({
  69.       description: e.target.value,
  70.     });
  71.   }
  73.   setWeight = e => {
  74.     this.setState({
  75.       weight: Number(e.target.value),
  76.     });
  77.   }
  79.   render() {
  80.     const { consignments, } = this.state;
  81.     return (
  82.       <div className='consignment-screen'>
  83.         <div className='consignment-form container'>
  84.           <br />
  85.           <div className='form-group'>
  86.             <textarea onChange={this.setDescription} className='form-control' placeholder='Description'></textarea>
  87.           </div>
  88.           <div className='form-group'>
  89.             <input onChange={this.setWeight} type='number' placeholder='Weight' className='form-control' />
  90.           </div>
  91.           <div className='form-control'>
  92.             Add containers...
  93.           </div>
  94.           <br />
  95.           <button onClick={this.create} className='btn btn-primary'>Create</button>
  96.           <br />
  97.           <hr />
  98.         </div>
  99.         {(consignments && consignments.length > 0
  100.           ? <div className='consignment-list'>
  101.               <h2>Consignments</h2>
  102.               {consignments.map((item) => (
  103.                 <div>
  104.                   <p>Vessel id: {item.vessel_id}</p>
  105.                   <p>Consignment id: {item.id}</p>
  106.                   <p>Description: {item.description}</p>
  107.                   <p>Weight: {item.weight}</p>
  108.                   <hr />
  109.                 </div>
  110.               ))}
  111.             </div>
  112.           : false)}
  113.       </div>
  114.     );
  115.   }
  116. }
  118. export default CreateConsignment;

Note: I also added Twitter Bootstrap into /public/index.html and altered some of the css.

Now run the user interface . This should automatically open within your browser. You should now be able to sign-up and log-in and view a consignment form where you can create new consignments. Take a look in the network tab in your dev tools, and take a look at the rpc methods firing and fetching our data from our different microservices.

That's the end of part 6, as ever, any feedback, please do drop me an email and I'll reply as fast as I can (which sometimes isn't that fast, please bare with me).

If you are finding this series useful, and you use an ad-blocker (who can blame you). Please consider chucking me a couple of quid for my time and effort. Cheers!

Or, sponsor me on Patreon to support more content like this.