Architecture - C4 model

Full Stack Software Development Blog

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

C4 model (see https://c4model.com/)
Arc42 (see https://arc42.org/)

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 https://www.draw.io/ with the C4 plugin. See the C4 model tooling section at https://c4model.com/#tooling

Here are the core diagrams (see https://c4model.com/#coreDiagrams) for the TexasToc application.

---

---

---

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).

See https://github.com/gpratte/texastoc-v2-angular

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

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 https://github.com/gpratte/angular-v6-tour-of-heroes

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

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 (https://github.com/gpratte/texastoc-v2-swagger-hub) and run the create-api.sh 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.