Start Coding the Server

Full Stack Software Development Blog

Starting to code the server APIs.

See https://github.com/gpratte/texastoc-v2-spring-boot

I am following Test Driven Development (TDD) writing the business logic. Mocking out the persistence.

I am employing Cucumber tests for the endpoints. Persistence is provided by an embedded H2 in memory database.

As usual I number the branches. Here are the branches (copied from the readme).

branch 02-create-season

SeasonRestController POST endpoint to create a season.

New SeasonService.

Junit test (followed TDD) for the controller that passes through to the service. No persistence yet.

branch 03-create-season-repository

JdbcTemplate based SeasonRepository. Use the @MockBean for the SeasonServiceTest unit test.

branch 04-bdd-cucumber

Added cucumber BDD test. These tests bring up the server and use Spring's RestTempate to call the endpoint to create a season. Also uses an embedded H2 database. Uses a command line runner to create the season table.

branch 05-tdd-get-season

Implement the GET method on the season service using TDD.

branch 06-bdd-get-season

TDD and BDD

Full Stack Software Development Blog

I needed to get a better understanding of Test Driven Development (TDD) and Behavior Driven Development (BDD) testing.

The short explanation is:

Step 1. Both require a failing test to be written first in the form Arrange, Act and Assert (for BDD these verbs are Given, When and Then).

Step 2. Both require that as little code as possible be written to pass the test.

Step 3. Refactor the code if needed. The code that was written in step 2 may not be production worthy so make it so.

I wrote a poker hand comparator. I got as far as comparing two "high card wins" hands (i.e. no pairs, straights, ...).

The testing and coding is all explained in the github readme at the https://github.com/gpratte/tdd-bdd-experiment github repository.

Basic Authentication

Full Stack Software Development Blog

Starting to implement login/authentication in the Texas TOC application.

Use the Spring Security and Angular guide as a reference to implement basic authentication.

Did not implement the reference application from the guide but instead applied the lessons to the existing Texas TOC angular front end and Texas TOC Java/Spring back end.

The Spring Security and Angular guide begins to show authentication using basic authentication at The Login Page

Angular Front End

Implemented the changes on the branch labelled 15-security-basic-auth

Module	Function
app.services.ts	authenticate() - set basic auth header if credential have been entered in login page
app.component.ts	logout()
login.component.ts	login()
xxx.component.ts	ngInit() - route to login if not authenticated

Java/Spring Back End

Implemented the changes on the branch labelled 02-security-basic-auth

Module	Function
TexastocApplication.java	Added the security configuration to require basic authentication and allow CORS
UserController.java	/user endpoint to return the principal

Back after a lull

Full Stack Software Development Blog

It has been a few months since my last blog. The reason for the lull is that I started a new job (Java/Spring Boot/Pivotal Cloud Foundry). As always starting a new job takes a lot out of a software developer - learning new tools, architecture, ... .

I've come up to speed using gradle as a Java build tool. I'm also learning Pivotal Cloud Foundry (PCF) for the first time.

Recently I've found time to get back to working on version 2 of the Texastoc application. I am currently working through the Spring Security and Angular tutorial in the Spring Guides. 

See Spring Security and Angular

I'm not going through it from scratch but instead applying it to my Angular 6 and Spring Boot application. I'll go into the gory details when I have it working in my next blog.

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.

WireMock to mock APIs

Full Stack Software Development Blog

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

See http://wiremock.org/

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 (http://wiremock.org/docs/getting-started/). 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 http://wiremock.org/docs/stubbing/ 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
https://github.com/gpratte/wiremock-deploy-heroku

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
https://app.swaggerhub.com/search?type=API&owner=texastoc&sort=NAME&order=ASC

This tutorial was key to learning version 2.0 of the Open API
https://apihandyman.io/writing-openapi-swagger-specification-tutorial-part-1-introduction/

Open API (swagger)

Full Stack Software Development Blog

I've begun defining the APIs on swagger hub.

Have a look https://app.swaggerhub.com/search?type=API&owner=texastoc&sort=NAME&order=ASC

Finished with mockups

Full Stack Software Development Blog

Finished with the bootstrap mockups.

Normally I would dive into coding the backend but I'm going to start from a different point of view - the front end.

While working at a company that created many a mobile application for the past several years I would be asked the same question repeatedly by the front end developers which is
"how can I know what the back end APIs are and if they are doing the right thing?"

Next is API documentation and testing from the front end point of view.

Mockups

Full Stack Software Development Blog

I've begun creating mockups using bootstrap (bootstrap 4 and font awesome 5).

The files can be found in github at https://github.com/gpratte/texastoc-v2-wireframes

Clone the repo, open index.html in a browser and click on the links.

UI flow

Full Stack Software Development Blog

Put together a rudimentary UI flow.

Click here to view the flow.

Next User Interface (mockups)

Full Stack Software Development Blog

The next thing to do is to come up with the mockups for the web pages.

I am not a UX nor a UI designer. In fact, I'm terrible at it. My artistic skills do not go beyond drawing stick men. I can get away with poor user experience because

1. I'm working for free
2. Only about 100 people will ever use the application.

Bootstrap will go a long way to making my web pages look nice and work properly. It has some decent UI components (buttons, icons, ...) and it is responsive so it will look good on different sized devices (mobile, tablet and laptop).

Time for me to take a deep dive into Bootstrap 4.

Agile Personas And Stories

Full Stack Software Development Blog

A few months back I brought together several players and we had an agile discovery for the next version (v2) of the application.

The players represented a good cross section of the personas of the users of the application.

Lots of post-its which resulted in epics, which resulted in stories.

I'm using Trello for managing the stories. In the past I deployed Jira to Heroku but decided that was overkill - Trello should be sufficient.

Here's a link to the Trello board before any development...

https://trello.com/b/j1CmXjB4/texas-toc-v2

When the time come to start the first sprint I'll copy the board which will keep a history.

Refactor My Poker League Application

Full Stack Software Development Blog

I play in a poker league. We play a 52 week season. The group has not missed a game in over 12 years (I joined 11 years ago). Presently I have a Java/Spring/MySQL/JQueryMobile application that I wrote in 2014.

Time to blow the dust off the app and refactor to use up-to-date software. I use this as my reference application when interviewing (and I'll be interviewing in later this year).

Will be refactoring from
   Spring 3.x/MySQL/Velocity/JQueryMobile
to
   Spring Boot 2.x/Postgres/Angular

To see the running application visit https://www.texastoc.com
To see the source code visit https://github.com/gpratte/texastoc

The app does thing like:

• Allows guest to view the site and obfuscates names and dollar amounts
• Add players to a game
• Mark players that finish in the top 10 of a game
• Calculates payouts in a game
• Randomly seat the players before each game and text players their table/seat
• Game clock for the rounds and text those who have opted in then a round changes
• Tracks seasons (games, quarterly seasons, season results, top ten lists)
• Emails asking for the weekly host
• Emails asking who will transport the supplies
• FAQ
• ...

It is time to refactor to

Spring Boot for the backend
Progressive web app using Angular for the front end
Bootstrap for a nice HTML look and feel
Many new features