Wednesday, November 14, 2018

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.

Saturday, October 6, 2018

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

Sunday, September 30, 2018

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. 


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.

Sunday, June 17, 2018

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.




























































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

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

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


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