Essay Writing Service

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

cof MyLab Portal

Abstract— MyLab is a web portal developed for customers to view their order history. The vital part is to view the status and progress towards completion of an individual order, or all of their current orders.  Invoice details and job sample details can also be viewed. This has been developed using modern web open source framework using Angular and NgRx architecture. Agile software development methodology and Test-Driven Development (TDD) approach has been used to automate the test cases. In addition to the development of web app, utilizing AWS services consisting of several instances of Elastic Compute Cloud (EC2), Simple Storage Services (S3) and CloudFront distribution, it was hosted live.

Keywords— Angular; NgRx; AWS; VPC; EC2; S3 (key words)

  1. Introduction

This project was undertaken as part of the Master of Information Technology Internship Program at the University of Waikato, Hamilton. The report covers the work carried out at Hill Laboratories in Hamilton. Hill Laboratories [1] is one of New Zealand’s leading analytical testing laboratory. Specialized in three major areas, Agriculture, environmental & food testing. The company supply a broad range of laboratory tests and utilize the latest technologies to supply the most accurate and reliable results in the industry.
The company is passionate about technology and constantly look to technology to solve ever increasing complex problems.
During the internship, MyLab web app was developed which would show the `Order History` and status of the job placed by customers.
10 weeks of full-time internship are designed to gain hands on industry experience for students and it is a great way to apply the skills and knowledge gained from master’s taught program. Academic supervisor is assigned from the University to provide guidelines and an industry mentor from the company to provide supervision on the given project.
Hill Laboratories -LIMBUS (Laboratory Information System) is a web app which allows customer to place order via online. They can choose any substance or sampling from the web app and place the order. During the checkout process basic details like Name, email, mobile number, address and order references will be gathered for invoicing details. For the accuracy of delivery New Zealand Post (NZPOST) application programming interface (API) is integrated to find the proper address. LIMBUS also allows user to place the order from different countries. Order Sampling supplies is classified in to two parts `Do it yourself sampling kits` and `Sampling Tools`. Laboratory tests contains step by step procedure to place the order.

  1. Company Background

Hill Laboratories [1] was founded in 1984 by Dr Roger and Anne Hill. The company provides services to wide variety of customers in New Zealand and overseas. Around 400 staff are employed in the organisation. The company supply a broad range of laboratory tests including soil, feed, water, air, food wine and the completely New Zealand products are covered. Hill Laboratories is the lab of choice because they are reliable, trusted and respected. The company has recognised experts in the field and they make it easy for customers to work with them.
In a nutshell, Hill Laboratories uses science and technology to provide excellent solutions for customers.

  1. Services

The services of Hill Laboratories consist of Soil Testing, Water Testing, Drug Testing, Food Testing, Honey Testing, Plant and Asbestos Testing, Crop Testing, Pesticide Residue Testing, Microbiology Testing, Feed Testing and other testing like Air Composite Testing, Quality Testing and Media Testing, Surface and Swab Testing and Wine Testing. Customers can place order via the web portal which was developed recently or by calling the reception and provide the necessary samples.
The testing process will go through different stages and the laboratory technicians fill the data in the software developed by software team. The laboratory technicians are well versed with using the modern software provided by Hill development team. Once the testing has done it will be verified by the quality check team and approved by the relevant team leader and manager. The customer can also place the order via the mobile app or the spreadsheet app which will eventually follow the standard process of testing. There are also various applications and software used in the testing process for example, Honey Blending testing has a brilliant user interface which allow the scientist to feed in the proper data and the tool has a brilliant artificial intelligence mechanism to prevent the bad mixture of different blends.

  1. Business Structure

Hill Laboratory head office is situated in Frankton, Hamilton and has office in Christchurch, Wellington, Auckland, Blenheim and Japan. Most Information Communication and Technology (ICT) related work is developed from Frankton, Hamilton main office.
In the technology sector, Open source software development is being used for most of the web and software development. Service-oriented architecture utilizes micro-services that are written in Java. All other services are written in Java. The technology team make extensive uses of spring, spring boot and jooq. The user interface is written in Angular and Typescript. They rely heavily on AWS and a number of its SaaS offerings.  IT development team consist of eleven members: Three Business Analysts and eight developers. Each team member is specialized in different skill but can able to assist others if assistance is required.
Development team follows the Agile Software Development methodology. The code which is delivered so far is of high standard and well covered with automated tests. Agile Software Development [2] is delivering minimum viable product in quick succession and building features and improvements on top of that, also responding to requirement changes quickly to develop solutions relevant to customers.
Hill Laboratory follows the sprint of every two weeks and deploy the new release to customers. Sprint planning meeting will be conducted and the delivery team can give the story points for the task to be accomplished. User stories will be discussed with delivery team for the best estimates.

  1. Motivation

Hill Laboratories provides broad range of laboratory tests and they use the modern technologies to provide reliable and quick results to the customer. Customer can place the order by calling the reception or they can use the web portal which was developed recently to roam around the website and place the order. Once the order is placed they will get the email confirmation with the details. Then they can provide the relevant samples to the sampling supplies team. The invoice will be generated and sent to the customer address.
Customer will have various options to pay for the invoice. They can either choose to pay via online bank transfer or they can deposit the money in the Hill Laboratories account with reference number. The samples will be tested by appropriate teams and they will update the order status on the web portal. Once the process has been completed the “dispatch” team will send the test detailed report along with samples to the customer address. Customer can also pickup their orders from dispatch team. Currently there is no mechanism to see the list of orders which has been placed or the order history / tracking status.

  1. Project Objectives
  • The objective of this project is to develop a web app through Angular Framework and its sub technologies to give the customer the ability to select whether their order is to be picked up, and from which branch, and will assist the customer by providing branch opening hours and location information.  Once an order is placed, they will be able to view the status and progress toward completion of an individual order, or of all their current orders.
  •  Customers will also be able to request interim reports, invoices and copies of the Chain of custody (COC) form through the portal.  These functions will obviate the need to access MyLab. MyLab is the desktop software which used Delphi language to view details. This language is old and has to be eliminated.
  1. Initial Broad Goals

The main features of this development stage include:

  • Allow customers to set and amend shipping instructions.
  • Allow the system to detect the correct branch from which to dispatch ordered supplies.
  • Give the customer a view of their orders, the jobs on their order and the status of those jobs.
  • Allow customers to request, view and download interim reports, invoices and copies of the Chain of Custody (COC) form.
  • Provide a way for customers to manage who within their organisation can see their orders.
  • Allow customers to create, view and delete orders recurring on a weekly, monthly or yearly basis.
  • Provide a calendar view for the customer to see all their upcoming scheduled orders.
  1. Agreed Scope of Work

Develop a web based modern application to replace the MyLab – Delphi based Desktop software to provide customers to see the order history and status. Allow user to amend / delete the orders which has been placed. In general, this involves customer to manage their order details on their own instead of calling helpdesk / reception to do it.  The project is designed to work in Agile methodology with a moderate frequent delivery of various stages of development.  These various stages are called ‘thin slices’. Different ‘slices’ are:

  1. As a Customer User, they want to be able to see a list of their past and current orders and jobs.
  2. The list includes all of the customer’s orders:
    1. Orders originating in Limbus (Web Portal) for this signed-in customer
    2. Orders originating in Labsys (Delphi based desktop Software) where this customer is the primary contact.
  3. As a Customer User, they want to be able to view the details of a past Order, so they can check their details.
  4. As a Customer User, they want to be able to view the sample details of a past order, so they can check that they are correct
    1. Test information shown in the `Job Samples’ section of the Order History screen.
  5. As a Customer User, they want to be able to view the sampling item details of a past order, so they can check they are correct
    1. Test information shown in the ‘Sampling Items Requested’ section of the Order History screen.
    2. Add the authorisation functionality to sign in to the web portal before accessing any information.
    3. Create the route of `Order History ‘and display it in the menu.
  6. [Stretch] Create a customer facing API (Application Programming Interface) to access order history details directly.

Stretch1– are goals which are kept in the backlog and not in the sprint. If the sprint goes well, these Stretch goals can be worked on as well.

  1. Proposed Solution

A prototype of wireframes was developed using Invision by the User Interface (UI) design expert and it was given to me as a reference to build the web user interface. The web user interface was developed using Angular [3] and NgRx [4] – (The Redux) state pattern for writing complex things simple as shown in Fig. 1. Angular is a framework for building client applications in HTML and either JavaScript or a language like TypeScript that compiles to JavaScript. It is also a better way for building optimised modern web applications. TypeScript is used for the static typing to avoid run time errors. Agile methodology has been followed throughout complete development using ‘thin slices’ of functionality for the continuous delivery.
MySQL database is used for the data storage along with Amazon Web Services (AWS) [5]. REST endpoints are developed by the backend team and hosted in AWS as a web API for easy data access and retrieval. Modern Integrated Development Environment (IDE) – WebStorm by Jet Brains is provided for the quick delivery.

Fig. 1.  Angular with NgRx Pattern
RxJS is a reactive extension for JavaScript. It is used for working with asynchronous data streams and observables. Data streams can be created from many things such as UI events, HTTP requests, File Systems, Array-like objects and Memory / cache. These things can be viewed as data Stream. Stream is defined as sequence of ongoing events ordered in time. We can get the data that emits a data, errors and when it is complete. Observables are used to watch these streams and emit functions when a value, error or completed signal is returned.

  1. Software Development life cycle – Angular web app (MyLab)

A Software Development Life Cycle approach has been followed in the MyLab portal development as show in the Fig. 2.  Hill Laboratories follows the SDLC methodology. Waterfall, Kanban, Agile, etc. are followed in this organisation depends on the business need. The following phases are included in SDLC: Planning, Analysis, Design, Implementation, Testing & Integration and Maintenance. MyLab portal was undertaken in Agile SDLC methodology. This method helps business analyst in making better business decisions.

Fig. 2 SDLC-Overview Image from Synotive.com
  1. Planning

The project began with prototype of redesigned MyLab portal user interface screens. The objectives of the project were identified and discussed with senior colleagues for better clarity. Eventually, user should be able to see their order histories in MyLab Portal. They will be authenticated via Identity and Access Management (IAM). Upon the success authentication the orders which are placed in the past can be viewed in detail. During this phase, implementing this feature has been suggested with various ideas. I had the opportunity to provide my view on how this can be achieved. Then user stories are defined clearly in project management portal.

  1. Analysis

Analysis involved various stages such as defining the business rules to proceed, testing the REST API end point with various parameter, performance analysis of endpoints, and identifying which IDE is better suited for this development. Daily break down of goals has been prepared by senior peers. Every day it has been reviewed with me before I start the work. Every big task has been broken down in to small pieces which clearly shows the roadmap of measuring the scope of work.

  1. Design

The design phase heavily relies on building best modern interface using the modern web framework. The user interface (UI) design was done with Angular 5 – front end framework from Google. The UI uses the HTML markup and typescript as a component which consist of various pages such as the order history navigation page, order details component, subpages of detailed order history along with the user-login page which was utilising the IAM of Auth0 (external service provider). MyLab web page resembles the desktop version of MyLab with some UI tweaks for the better understanding. Brand guidelines of Hill Laboratories has been followed in all web pages design.

  1. Implementation

The work was separated in to modules/ components and the actual coding is started. The entire focus was on the developer to build the real user interface which was shown in the prototype. The local database was given to verify the order history details. I had the opportunity to prepare the mock data when the service was down. The REST endpoint was used to retrieve the order history details for the given users. A web page with mock-up data has been presented on the user interface with proper routes. The connection was allowed in IAM -Auth0 to validate the user authentication. Order history end point was several parameters which can be customised as per the needs. Refactoring of code has been done as per the review with senior peers. User Interface can able to return the data from REST end point.

  1. Testing & Integration

Web pages has been tested manually by other peer developers and test cases has been written in Angular using Protractor, cucumber and Gherkin for the End to End testing. In some cases, unit testing has been written to check the functionality using Jasmine framework. All test cases have been using headless chrome to provide valid results. In addition, smoke testing is used to test its intended functionality. For example, if the user was not logged in and trying to access the order history then the user will be able to see the error ‘Not authenticated. Similarly, to check whether the ‘Order History’ route was valid.
After each successful test cases of the stories, code review process will begin. Once the code review is validated by any of the colleagues. Then the code is integrated with Git lab continuous integration which is programmed to deploy and test the functionalities in testing server, user acceptance server and pre-production server. Git lab allows each developer to integrate their small piece of code changes back in to the codebase.  After each change, there is a suite of tests that runs automatically which will check the code for any bugs or error in the given environment. Once everything is successful, then the code will be deployed in to Live environment.

  1. Maintenance

Usual maintenance will be done via Amazon Web Services (AWS) when deploying the code in to the Live box. Caches has been forcefully removed via Amazon Cloud front services. Amazon Simple Storage Service (S3) is used to maintain the code with artifacts. Webpack has been used to build the artifacts to optimise it to the smaller size for the faster web page loading. In the development or test box if the server disk was full, housekeeping activity will be performed immediately to avoid outage along with the screenshots.

  1. Solution Architecture

Fig. 3 shows the architecture of newly developed MyLab portal formally ‘Order History’. The frontend is developed using Angular, NgRx and Bootstrap. Along with this main front-end framework HTML, CSS and JavaScript (ES6+) is used in many places to accomplish the business logic given. When the user trying to view their order history from the web browser. The internet gateway will pass through the AWS Virtual Private Cloud (VPC).
Amazon CloudFront is used for distribution of the content and the website content is hosted in Amazon Simple Storage Services (S3 bucket). The data are retrieved from Amazon API gateway which is also popular for building serverless computing to avoid infrastructure maintenance and cost. The API gateway will utilize the HTTP proxy integration which can connect to the spring boot services to retrieve the data and store the user content in Amazon Dynamo DB database. Then Elastic load balancer will load the balance of the user loads and pass it through several instances of Amazon Elastic Cloud Computing (EC2).
In case of any failure, logs are configured via Amazon Cloud Front. Alarms and thresholds are defined if there is an overload in the web app. Using the Simple Notification Service (SNS) the subscribed user will get the email notification. Development team can analyze the logs and find the root cause of the problem if anything fails while placing order.

Fig. 3 MyLab Web Architecture Diagram

  1. Site Map

Fig. 4 shows the site map of the MyLab web app portal which has been developed so far. The web user interface was developed using Angular and NgRx. User can view the past orders details by navigating to the `Order History` tab. Once the user clicks the `Order History` page they must be authenticated via login page to see the order details which has been placed. If the authentication is unsuccessful then they will be redirected to IT support.
If authentication is validated, then they can view the order details by job status. Once they select the specific job details they can see the detailed view of job details which includes order delivery address, order invoice address, job details etc.

Fig. 4 MyLab Site Map
They also can see the `sampling items requested` which includes the sampling name, quantity, unit price and total price. Further they can drill down to the `Job samples` details which includes the turnaround time of the job and the progress status. Users can also see the test involved in each job samples.

  1. User Interface

The user interface is elegantly designed to navigate to the `Order History`. When the user selects the `Order History` on the navigation bar as shown in Fig 5.

Fig. 5 MyLab -LIMBUS- Home Page
They will be offered with a simple login page with username and a password as seen in Fig 6.  Auth0 [6] is the third-party external provider providing Authentication as a Service.

Fig. 6 MyLab -Authentication via Auth0
The authentication service was provided by auth0- the identity management platform which was integrated with LIMBUS web app. The initial state should be signed in to LIMBUS to view the `Order History`.
Once the user has signs in and is taken to the order history page where they can see the list of orders and jobs (Fig 7).

Fig. 7 MyLab -Order History Page
NgRx store was used to retrieve the entity of each jobs and display it in the accordion. The details are created when the user selects each job from the order history table as shown in Fig 8.

Fig. 8 MyLab -Order History-Job Details Section
When user selects any job details and if they click on the Sampling Items Requested section / accordion as seen in Fig 9, they can view their total invoice details for the specific selected job.
Fig. 9 MyLab – Order History-Sampling Items Requested Section
Users are can also see the Job sample details when they select any job details from the order history. The Job Sample section shows the progress of each job and the turn around time (TAT) to complete the job (Fig 10).

Fig. 10 MyLab – Order History-Job Samples Section

  1. Structure and Routing Details

Components developed in the internship period is displayed in the Fig 11.  Total of seven components along with three featured modules using NgRx store has been developed to display the data in the User Interface (UI) part.

Fig. 11 MyLab – Components and Module details
Routing details where user can navigate to the URL as shown in the Fig 12. Users can load the job details if they are aware of the job id. The highlighted part in the below picture shows the params and id which can be passed directly in the browser to display the data and relevant details.  If they did not log in to the web app portal, then it will force the user to login before they view the specific job details.

Fig. 12 MyLab – Routing details of Order History

  1. Business Rules Regarding Compliance

Hill Labs has a set of business rules to observe when viewing the order history.

  1. Initial state requirements:
  • Customers have to be signed in to the Hill Labs web app portal to view the order history.
  • Customer has chosen ‘Order History` from the menu.
  1. Viewing State requirements:
  • When the list of order history is viewed, the list should be ordered by Order date descending, order number ascending and job number ascending.
  • Allow customers to sort any columns, both ascending and descending.
  1. No orders state requirements:
  • When the list of order history is viewed, if the customer has no past or current orders then do not display anything

 

  1. Displayed Status requirements:
  • When the list of order history is viewed, if the selected order is analytical tests and the job status is Pre-registered then display ‘Awaiting samples’ in the front end.
  • When the list of order history is viewed, if the selected order is analytical tests and the job status is received then display ‘Samples Received’ in the front end.
  • When the list of order history is viewed, if the selected order is analytical tests and the job status is registered or confirmed or ready for reporting then display ‘in Progress’ in the front end.
  • If the job status is cancelled, then display ‘Cancelled’ and if the job status is finished then display ‘Finished’ in front end.
  1. Sort order requirements:
  • When the list of order history is viewed, if there are more than one pages of orders and jobs. When the user tries to navigate to the next page of orders then the previous page button should be enabled. Similarly, navigation to the first page should be enabled.

 

  1. Closing overlay requirements:
  • When the list of order history is viewed, if the user selects any job then the relevant sampling items requested overlay should be displayed along with the total price.
  • When the list of order history is viewed, if the user selects any job then the relevant sampling items requested overlay should be displayed. When the user clicks the close button then the overlay should be disappeared.

 

  1. Reflection, Lessons Learnt And Application Of Knowledge

Internship period was valuable, and I felt knowing the value of programming. The feedback provided was challenged more in to high order thinking.

  1. Knowledge and skills Acquired:
  • NgRx- Programming language- I have learnt the new redux architecture and its benefit of optimising the development and building better user experience. My knowledge has been tested in various areas of redux such as actions, reducers and effects.
  • Programming strategies- There are many things to understand before you start new language. I have been introduced to Software Development Kit (SDK). I have gathered and understood kit means a bunch of stuff in a box. Similar to that in the programming I came to know that to understand a new programming language, I should be aware of programming tools, reference manual, tutorials, sample codes, libraries/ framework and emulators. These all together combine is called SDK.
  • Devops- It is another area where you automate your stuff and deploy the code in to multiple environments via automation tools such as docker, gitlab and vagrant. I have learnt the technique of automating my scripts which can run in to different environments parallelly. This has reduced the number of hours we spent daily to automate the stuffs.
  • Code Review- Merge review process was little different. There were some conflicts when I try to merge my code with development branch. Resolve conflicts when merging code with master branch is the key technique.
  • Test cases- Hill Laboratories IT team follows the Test-Driven Development (TDD) approach to ensure the development which we are done are going in the right direction. Using “Protractor & cucumber” framework is integrated with development workflow.
  1. Examples of knowledge used from taught courses:
  • Serverless computing – As per the cloud computing technologies and security (COMP527) various uses of Amazon web services (AWS) have used in the web application. These skills helped to host the commercial in the cloud environment easily.
  • Angular and NgRx programming languages – applied a lot of programming and optimising technique skills gained in (Programming for Research 1 & 2) COMP575 and COMP576. It was helpful to understand the code and build a native clean code from it.
  • Database queries- Knowledge and skills learnt in COMP575 (Programming for Research 1) has been applied in many places to store the value of the user and retrieve it efficiently using REST (Representational State Transfer) end point.
  • Prototyping – Skills learnt in preparing for the ICT internship (CSMAX570) was helpful in understanding and modifying the prototype. In many places instead of changing the user interface modifying the prototype saved time and increased the quality.
  • Responsiveness- Applied knowledge from Usability Engineering (COMP539) was very useful to test the web application responsiveness in various devices such as iPad, iPhone and Android devices.
  1. Future Work

The MyLab portal was hosted in the User Acceptance Testing (UAT) platform after the user stories acceptance criteria has been passed. Business analysts will perform the manual testing in addition to the automated test cases. The current internship stories have been hosted on live already, however
the following are some of the future work that can be applied:

  • Currently the orders from users can only be delivered to the delivery address which is provided by the customer. In future, the app will allow the users to pick up their samples from Hill Labs.
  • Allow users to download the invoices and history as portable document format (PDF).
  • Provide a way of customers to manage who within the organization can see their orders.
  • Allow customers to filter the custom date range to view their order history.
  1. Conclusion

In Hill Laboratories, the previous mechanism does not allow customers to view the order history details whereas the web app which has been developed during the internship allows the customers to view their order history, job progress, delivery details and invoice details by online. The performance of the web app has been optimized because of the modular web framework. The web app has been hosted in the live environment.
The internship has given a collaborative and unique experience in a diverse environment. It has been very rewarding in terms of teamwork, technical competency, time management, honesty and problem solving. It also helped me in building professional connections with staff in the technology department of Hill Laboratories. Overall, the Master of Information Technology programme has delivered to ICT students the industry-based hands on experience.

  1. Acknowledgment

This research project was supported by Hill Laboratories and made possible through the University of Waikato Summer Research Scholarship Programme. Special thanks to project mentor Dan Hodgson- CIO (Hill Laboratories), project supervisor Dr. Richard Nelson (UOW1) and project coordinator Dr. Alvin Yeo (UOW). Also acknowledging the staff at Hill Laboratories, Miss. Tina Younger (Senior Business Analyst) and the IT and informatics team for continuous support and guidance throughout the development of the solution.

  1. REFERENCES
[1] Hill Laboratories Ltd, “Hill Laboratories About us,” October 2018. [Online]. Available: https://www.hill-laboratories.com/about-us/.
[2] Agile Software Development, “Agile Software Methodologies,” October 2018. [Online]. Available: https://www.agilealliance.org/agile101/.
[3] Google Inc, “Angular,” October 2018. [Online]. Available: https://angular.io/. [Accessed 22 October 2018].
[4] Google Inc, “Reactive Extensions for Angular,” October 2018. [Online]. Available: https://github.com/ngrx.
[5] Amazon inc, “Amazon Web Services,” October 2018. [Online]. Available: https://aws.amazon.com/. [Accessed 23 October 2018].
[6] Auth0 Inc, “Universal Identity Platform for web,” October 2018. [Online]. Available: https://auth0.com/.



Recommendation
EssayHub’s Community of Professional Tutors & Editors
Tutoring Service, EssayHub
Professional Essay Writers for Hire
Essay Writing Service, EssayPro
Professional Custom
Professional Custom Essay Writing Services
In need of qualified essay help online or professional assistance with your research paper?
Browsing the web for a reliable custom writing service to give you a hand with college assignment?
Out of time and require quick and moreover effective support with your term paper or dissertation?