DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Data Engineering
  3. Databases
  4. New Application Journey

New Application Journey

John Vester user avatar by
John Vester
CORE ·
Nov. 06, 18 · Analysis
Like (4)
Save
Tweet
Share
137.42K Views

Join the DZone community and get the full member experience.

Join For Free

[In this multi-part example, a Zone Leader walks through the process of replacing a legacy application.]

Quite a while ago, my mother-in-law had an application built for her small business. Her business is designed to help find living accommodations for those relocating to the southeast part of the United States. Since the weather is warm there throughout the entire year, her clientele typically are seeking a nice climate for their retirement years.

After reviewing the application and comparing it to her actual needs, I decided it was time to do something to fix her situation. After all, I do work in the field of technology.

The Current State

The design of the original application she used wasn't optimal and included fields to track aspects related to the purchase and sale of the home. Since there were real estate agents that helped put the deal together, she had fields on each record to track the commission each would receive. Basically, there was a field for each agent on the form.

A screen shot of the original state is found below, with the content removed for security reasons:

Original State

One of the biggest challenges, aside from the lack of cosmetic appeal, is that there was a column in the data source for each agent. As new agents were added, a new column was created for that agent. When agents moved on to other opportunities, the column remained, but was hidden from the form's view.  There was also a lot of work involved when the management structure for the agents changed.

The architecture leveraged a popular cloud-based platform, so that aspect was nice for her to not have to worry about running the application somewhere in her office.

Some of the other challenges:

  • the design was dated, with round-trip validation happening on the server side.

  • she could not use the application on any smart or mobile device.

  • the existing application wasn't designed to handle the monthly commission reporting.

  • the ability to track referrals was missing.

  • reporting wasn't all that user-friendly - leveraging options that were part of the cloud solution.

The Future State

Since I wanted to explore the Amazon Web Service (AWS) offerings, I decided to take things in a new direction for her.

I decided to take advantage of the following frameworks for the new client design:

  • Angular/Angular CLI (version 6)

  • ng-bootstrap (Bootstrap framework for Angular)

  • angular-font-awesome

  • jQuery

  • ng4-loading-spinner

  • rxjs

On the service side, I chose the following options:

  • Spring Boot Java API

  • Project Lombok

  • MySQL Database

  • Okta

  • GitLab

Once completed, the application would utilize AWS as follows:

  • Elastic Beanstalk for the Java API and MySQL Database

  • S3 Container for the Angular client

  • AWS Certificate Manager and CloudFront

Version 1.0 Complete

After a few weeks of development, when I had spare time, I was able to finish up version 1.0 of my mother-in-law’s application. 

<confession>
   I am not a UI/UX person and relied heavily on Bootstrap
   to make the application presentable.
</confession>.
 

When hitting any of the URLs in the S3 bucket, without a valid token, the user is taken to the login screen:

Image title

After logging, the \home page is displayed - which uses the Jumbotron theme in Bootstrap:

Image title

Again, proprietary information is masked from being displayed ... like the banner for this page.  

When a new property is created, the screen starts with the following page:

Image title

Upon saving, there is the ability to assign agents to the sale. There is also the ability to set the name of a person who gave a referral to the sale ... and a referral amount.  Here is how that same screen will look, once populated (with test data):

Image title

Without giving confidential details with the application and showing real data, I thought I would show a little more about this application.

The property list, displays the main data in the application, with the most valuable column values displayed for ease of use:

Image title

There are three reports currently in the application:

Image title

I will walk through these reports in a future post - noting the challenges with the Commission Report.  At a high level, the Commission Report is like a company report - showing the metrics for a given time period.  The Sales Tax report is used to report local, county and state taxes collected.  Finally, the Agent Commission Report is a simplified view into an agent's performance for a given time period.

From a configuration perspective, the following options exist:

Image title

The System Settings screen controls configuration aspects related to the entire application.  The Counties section provides the tax rate for each county for a given period of time.  Finally, the Staff section controls active and in-active staff, including their current manager. 

As a result of the configuration tables, there is no longer any hard-coded values in the actual program code - which was another issue with the legacy application.

When ready to end the session, use of the Logout link clears the Okta token and returns the user to the splash page - perhaps a signal that it is time to visit the beach:

Image title

Looking Ahead

With this introductionary article in place, I plan to expand on my mother-in-law's application with the following future articles:

  • Okta, a nice solution - even for small apps

  • FormBuilder in Angular 6

  • The Challenge of the Commission Report

  • Making the County List Dynamic

  • New Version of the Commission Report

  • What I Learned After Initial Deployment

Have a really great day!

mobile app AWS Database

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Why It Is Important To Have an Ownership as a DevOps Engineer
  • The Role of Data Governance in Data Strategy: Part II
  • Select ChatGPT From SQL? You Bet!
  • Continuous Development: Building the Thing Right, to Build the Right Thing

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: