Sunday, June 17, 2018

Architecture - C4 model

Time for some architecture diagrams. There were two front runners that I wanted to explore for documenting the architecture

C4 model (see
Arc42 (see

After a quick read of the two I chose the C4 model because it felt familiar to me. Systems, containers, components and code is the way I think about software.

I chose to use with the C4 plugin. See the C4 model tooling section at

Here are the core diagrams (see for the TexasToc application.

Wednesday, June 13, 2018

Angular front end (with mock data)

Full Stack Software Development Blog

I've coded the Angular front end equivalent from the wireframe mockups that were done in bootstrap.

The Angular pages use mock data that is hardcoded in the corresponding components. For example the current-game.compoent.ts has the mock data for the current-game.component.html.

Also, there is no Authentication or Authorization (A&A) since there is no server (yet).


As was the case in the last post I built up the front end in branches.

Here are the branches of the repo
  • 01-login
  • 02-default-routing
  • 03-forgot-password
  • 04-reset-password
  • 05-navbar
  • 06-season
  • 07-season-models
  • 08-supplies
  • 09-new-game
  • 10-games-in-season
  • 11-current-game
  • 12-game-seating
  • 13-new-player
  • 14-existing-player
To see the angular code in action do the following:

Install the angular cli
npm install -g @angular/cli

Run the server
ng serve

Access the code at http://localhost:4200

Friday, June 8, 2018

Time to learn Angular

Full Stack Software Development Blog

The front end will be written using Angular 6. Angular has a Tour of Heroes tutorial. I worked through it and pushed the code to github. As I worked through the tutorial I created branches - each branch building from the previous branch.

The repository can be found at

Here are the branches of the repo

  • step-1-create-a-new-application
  • step-2-change-title-and-style
  • step-3-heroes-component
  • step-4-hero-class
  • step-5-uppercase-pipe
  • step-6-edit-the-hero
  • step-7-list-of-heroes
  • step-8-master-detail
  • step-9-hero-detail-component
  • step-10-hero-service
  • step-11-observable-hero-service
  • step-12-message-service
  • step-13-app-routing-heroes-url
  • step-14-app-routing-heroes-link
  • step-15-dashboard-component-and-route
  • step-16-routable-hero-detail
  • step-17-detail-go-back
  • step-18-http-client (get many works but not get one)
  • step-19-error-handling (get many works but not get one)
  • step-20-http-get-one
  • step-21-hero-update
  • step-22-hero-add
  • step-23-hero-delete
  • step-24-search
To see the angular code in action do the following:

Install the angular cli
npm install -g @angular/cli

Run the server
ng serve

Access the code at http://localhost:4200

Sunday, June 3, 2018

Exercise Swagger APIs against WireMock

Full Stack Software Development Blog

I have all APIs that are defined in Swagger Hub mocked on the WireMock server running on Heroku.

To populate the APIs in WireMock you'll need to run bash script I created to curl WireMock to create the mock APIs. Clone this github repo ( and run the bash script. You will also see the yml files for the APIs defined in Swagger Hub in this repo.

The WireMock server running on Heroku gets torn down if there is no activity for a 30 minute period. Hence the bash script to create the mock APIs will need to be run each time the server is created by Heroku. You can tell when a server is created because the first call to Heroku takes 20 seconds or more and then subsequent calls take a second or less.

The mock APIs do not verify the request but do return a valid response for all the APIs defined in Swagger Hub. The request verification will come later when it is time to test.

So after populating the mock APIs in WireMock you can run any of the APIs in Swagger Hub.

Tuesday, May 29, 2018

WireMock to mock APIs

Full Stack Software Development Blog

If you have a need to mock APIs then WireMock to the rescue.


In the last blog I have defined APIs in swagger hub. Now I need a way to exercise those APIs. I'm very glad to have found WireMock.

I followed the getting started guide to run WireMock locally ( It must be a Spring Boot jar :)

I downloaded the standalone jar and ran it on port 9999.

  • java -jar wiremock-standalone-2.18.0.jar --port 9999

I then added a stub API

  • curl -X POST http://localhost:9999/__admin/mappings -d '{ "request": { "method": "GET", "url": "/hello1" }, "response": { "body": "Hello world!" }}'

Exercise the stub

  • curl http://localhost:9999/hello1

Added a new stub to return a json body

  • curl -X POST http://localhost:9999/__admin/mappings -d '{ "request": { "method": "GET", "url": "/hello2" }, "response": { "jsonBody": {"Hello": "world!" }}}'

Exercise the stub

  • curl http://localhost:9999/hello2

To see all stub mappings

  • curl http://localhost:9999/__admin/

See for more ways to stub.

Shutdown the local server

  • curl -X POST http://localhost:9999/__admin/shutdown

Next I deployed the WireMock server to Heroku. You can too. See my github repo

Saturday, May 26, 2018

APIs defined

Full Stack Software Development Blog

I've made a first pass for the API definitions using Open API.

What I did was look at my UI mockups (see previous Mockup blog entry) to determine what APIs the client needed. It was very helpful to think through the behavior of the system from the client point of view.

The API definitions can be found on swagger hub at

This tutorial was key to learning version 2.0 of the Open API