Case Study for Web Development

Сloud-based management system for tracking and configuring multi-WAN routers

Tags: IoT, milti-network Internet connectivity, smart routers, connected home care, connected transportation, data visualisation

Customer

A Norwegian start-up company that develops solutions for fast, reliable, fault tolerant and load balanced multi-network Internet connectivity by developing software that transforms consumer grade and industry grade Wi-Fi routers into powerful multi-network routers.

The Customer has come to Altabel Group as a referral from one of the Norwegian Innovation & Research centers whom we completed a couple of projects for and met in Oslo.

Objective

The project goal was to rewrite an existing cloud PHP-based management system for tracking and configuring of multi-WAN routers based on OpenWRT/LEDE to control and optimize performance and accommodate new features.


The principal requirements are the following:

  • 1. The codebase shall be clear, scalable and supportable.
  • 2. The code must be simple enough to be maintained by the company’s employees with basic programming background or one that is unrelated to products’ stack.
  • 3. The REST API has to be irredundant, well-documented and safe, so that it can be used by third parties.
  • 4. Authentication and authorization routines are managed via Auth0 service.
  • 5. To use RXJS - streaming. Data should start being displayed before all data is downloaded. Data processing should be done server side whenever possible.
  • 6. To try to avoid caching state in the application. It can get confusing if multiple users are making changes at same time (cache invalidation).
  • Naturally, the required simplicity demands a surgical use of those very few instruments remaining at the developers’ disposal, thus to build a complex system without resorting to technique complication.

    Solution

    For the purpose of this project the Client has requested to set up a team of two highly-experienced Senior Back-end and Front-end developers on a Dedicated basis within relatively short period of time. By means of resumes and further interviews, the team members were selected and assigned to the project, and so far they have been acting as a core dev team for the Customer.

    Briefly, the Client’s business is the routers that support several inbound network connections (for instance, connect to 2 mobile networks simultaneously, or up to 8 fixed-line broadband networks) in order to create resilient networks for critical infrastructure. As a part of the company’s services, there’s an online dashboard that allows the company’s clients to monitor and control their routers fleet and their failover online in real time.


    Main use-cases of the solutions:

    • small businesses - smart routers that prioritize critical business traffic and provide network resilience, lower the risk for reduced functionality and service disruption;
    • connected journey - smart router technologies that offer optimal Internet connectivity for passengers throughout their journey;
    • health and home care industry boosted by innovative IoT devices - deployment of centrally managed and highly secure smart routers enable both professional care givers and patients to feel safer;
    • connected transportation - by sensing the quality of all available networks and using aggressive connection dropping, the router discards weak networks and dispatches traffic through the fastest and most reliable internet connections to provide optimized handover;
    • mobile workers - secure reliable access to central company network infrastructure and applications to effectively report and document while operating outside the office;
    • CSPs and system integrators -providing flexible hybrid-WAN/multi-WAN to ensure seamless failover and uninterrupted service and VPN for all devices, including unified management and customer support dashboard.


    The Client has had the obsolete system based on LAMP with over-complicated architecture which is hard to maintain. Therefore, the primary backend and frontend stack have been chosen by customers, according to their deployment plans and technologies in use.

    1. 1. Node.js allowed building a fast server using JavaScript.
    2. 2. MySQL as a database, due to historical reasons.
    3. 3. Angular as a front end engine. It combines declarative templates, dependency injection, end-to-end tooling, and integrated best practices to solve development challenges. It doesn’t require extra queries to the server to download pages. Single Page Application can improve performance in many ways, single time file load each of HTML, CSS, JS.
    4. 4. The REST API server was built using Hapi library. The common for Hapi libraries like Joi and Boom were used to handle input validation and errors.
    5. 5. The specific architecture, determined by the project specifications, has left an imprint on the way the testing has been carried out. In its core, the usual mocha/chai bundle has been used. However, the architectural features led to e2e tests prevailing over unit and integration tests.
    6. 6. The system communicates with Auth0 service both from the client-side, as a mean of authentication, and with server side. At the Backend it is used for the authorization and via Auth0 Management API, to create auth0 accounts automatically for the newly created users.
    7. 7. Single page application is built with Angular and TypeScript which is superset of JavaScript. That means it can take existing ES5 or ES2015+ JavaScript code and supports core ES2015 features as well as ES2016/ES2017 features like decorators, async/await and others, provides support for types (primitives, interfaces, and other custom types).
    8. 8. D3.js is a great JavaScript-based library that gives the possibility to create dynamic, interactive data visualizations. The solution is to show router events using EventDrops library as a time based / event series interactive visualization tool powered by D3.js. To show statistics of using interfaces and datasets simple, yet flexible JavaScript charting library Chart.js was chosen. To visualize map, locations and geo positions the application takes advantages of Leaflet which is one of the leading open-source JavaScript libraries for mobile-friendly interactive maps.

    Results

    The project is in progress, and at this point of time the results are as follows:

    1. 1. The server is stable, fast and can take the estimated load even in a humble environment. It is also scalable enough to support further growth.
    2. 2. The customers’ developers have already tried to make some changes in the code and they found it quite simple for understanding and modifying.
    3. 3. The customers’ clients are satisfied with REST API and are already planning to develop third party applications to work with it.

    Technologies & Tools

    Ubuntu server 17.10, ginx, Node.js 8.11.3 LTS; MySQL Ver 14.14 Distrib 5.7.22, for Linux (x86_64) using EditLine wrapper; Hapi v16, migration to v17 is scheduled; Boom, Joi; auth0.js to access API; Mocha test framework with chai assertion library; Angular 5.2.5; Typescript 2.9.2; SCSS; TSLint; Webpack 3.11.0; Visual Studio Code; git; IntelliJ Webstorm, Postman, dBeaver; Apache JMeter; Trello.

    The tool for assisting doctors with diseases treatment

    Customer

    The client is a small IT consulting company from Switzerland specializing in designing and implementing web and mobile solutions.

    Objective

    The customer’s project was aimed at creating a web tool to assist medical specialists with treatment of particular diseases and thus to improve the healthcare services. The customer has prepared a rather detailed specification documents to describe the tool functionality; yet he envisaged the possibility of adding a number of extra features at later stages. At the same time the customer’s preferred model of cooperation was Fixed Price approach, which is originally not very suitable for projects with not fully defined scope of work. As for the design, the client provided rough mock-ups and indented to use standard twitter bootstrap elements. Thus the customer relied on our technical team designing skills to implement the general tool outlook and user-friendliness. One of the other tasks set was to make the form pages load quickly, as in some countries the bandwidth is not that large.

    Solution

    As we have already cooperated on a number of projects with the given customer, we were familiar with his preferred approach to working on the projects (Fixed Price). At the same time we were to figure out the most suitable way for both sides to effectively handle the forthcoming changes. As a result we have agreed to implement the scope of work which was sufficiently defined to start with on a fixed basis and continue the change request phase following Time and Material approach. Such solution allowed us to not to lose time for estimating and negotiating each upcoming change request and not to slow done the development process.

    The functionality essence of the tool under development was as following: when the doctor encounters the case of a disease which he is not sure how to treat he refers to the tool. The doctor fills in the required number of form fields (250-280) with the information about the patient and the symptoms. Then the case is validated by the web tool manager who assigns the case to a particular area coordinator. The area coordinator in his turn redirects the case to 2 experts who give their recommendations to the doctor on how to treat the patient.

    The tool has different levels of user rights such as admin, manager, area coordinator, expert and doctor. The manger level users (2 persons maximum) could assign the cases, ask doctors for more information and reassign/ delete cases, view their status and details. The admin level users (4-5 people) have the same rights as the director plus he can and modify accounts. The area coordinator level users (4-8 pers.) can see all cases assigned, can allocate cases to 2 experts, can reallocate and validate expert’s reports and contact doctor. Experts (15 people) can view cases assigned to them, can write a report per case and contact doctor. Doctors (up to 200 people) can create/delete a doctor account, fill the form and submit it. They can also view experts’ final report.

    Basically, each user arrives to his dashboard once logged in. It consists on a list with all cases he is allowed to see. Depending on its status (submitted, being reviewed, report available, etc) and the user’s rights, each case has a number of actions possible. Deleted cases stay in the database, with a “deleted” status.

    On the doctors’ dashboard, there will be an additional content area where we display some publications (such as static PDF files). On director, area coordinator and experts’ dashboard, there will be a message indicating a number of cases they need to take care of.

    The choice of the language was initially English and Russian, while separate parts were in English only. The customer wanted other languages to be included later; therefore we used a language file system to allow easy translation of all variables.

    The design isn’t very complex, but every screens, actions are very intuitive and ergonomic for the user. As initially requested by the customer the design was based on Twitter bootstrap elements, and looked in according to the provided mock-ups.

    Testing was carried out on the customer’s dev server, once finalized it was transferred to the production environment.

    Technologies and tools

    PHP, Drupal CMF, Ajax

    E-commerce website for wholesale store of decoration items and furniture

    Customer

    The customer is a UK-based online wholesaler of affordable high quality furniture and interior accessories

    Objective

    The requirement was to implement the customer’s idea of an E-commerce website. The site brief was to display the catalog of high quality furniture and decoration items at reasonable prices to different businesses such as restaurants, bars and retailers.

    Solution

    The site was implemented in a simple and user friendly manner to allow an easy navigation of different products and categories. At the same time the site design was very elegant. Magento eCommerce platform was integrated to allow the client to manage the product catalogue and update the content of the site (text, images, videos etc)

    At the requirement clarification stage the team explored the customer business processes and service peculiarities and came up with a solution that was tailor made. As a next step our developers built the design of the future solution and as soon as it was approved by the customer the development was started.

    The following components were implemented: eCommerce solution and the Content Management System that allowed easy access to the site content by the end user.

    As a result the customer was able to increase sales by improving the site usability. The simplicity of the design allowed all categories of customers to feel comfortable using it, the structure of the catalogue is highly intuitive, it allows browsing the categories, finding connected goods, searching for additional information, etc. Moreover, the built in CMS allows the end customer run the system independently, cutting off the maintenance costs.

    Technologies and tools

    Ajax, Javascript, Magento eCommerce platform, XHTML/CSS, Mootools framework, MySQL, PHP

    Сloud-based HR management system project for a Finnish Start-Up company

    Customer

    The customer is a young and dynamically growing international company from Finland operating in recruiting and service-oriented industries and providing HR management services including a specialized cloud-based software for customers of various size and budget: headhunters, staffing agencies, large recruiting firms, talent management companies, etc.

    Objective

    Being a HR management services provider, the customer understands needs and problems of their clients from the inside - to deal with them a special HR management system was built on PHP basis. With the course of time, technologies advancement and new challenges and functionality ideas rise the project was decided to move to an advanced platform and add a number of new modules to it to satisfy clientele's requirements better.

    To develop such a system the customer wanted to engage an outsourcing partner. They were searching for a reliable software development provider from the Eastern European region, namely from the Baltic States or the Ukraine. In general the project has had a fixed budget, and the investors have set a fixed deadline for it to be in the market - approximately in a year after the discussion started.

    Solution

    The negotiations began from elaborating on the project details and requirements: what the system had already in place and what was necessary to implement. Unfortunately the current system's features were not documented in a specification, new ideas/ enhancements/ functionality vision were not clearly specified either, so it made it hardly possible to quote on the project accurately.

    Initially the customer wanted to organize a tender and as the result to allocate a couple of suppliers for the project realization. Still based on high end estimations from all the applicants and negotiations results Altabel was chosen to be the only project executor thanks to the following advantages to the customer in comparison to other vendors: Altabel's total estimation and hourly rates were lower than our closest competitors from the Ukraine, more flexible and long-term support and maintenance terms, a more comfortable cooperation approach, proved recommendations from the Scandinavian, Northern and Western European customers with whom Altabel has set up dedicated development teams and has been working for years. Actually Altabel's recommendations and testimonials from start-up companies played a very important role in the customer's eyes: the client treated talking to the reference contact points in person about experience of collaborating with Altabel really seriously. The negotiations were finished and the long-term agreement was signed during the meeting between the parties in Finland.

    As for the project stages, the first iteration has encompassed the system modules requirements clarification and specification creation. For this iteration Altabel's Business Analyst has been assigned on a dedicated basis to discuss, consult and document the requirements and functionality in close collaboration with the client.

    With regards to technologies, the system will be re-built on basis of .NET and Sugar CMS which has sexy UI that the client likes so much. Also the application is going to be realized as an easily scalable SaaS on external clouds for small and medium sized businesses, and a third-party solution and SaaS on internal clouds for larger scale organizations. In general the application will consist of six modules: Payroll and Billing calculations and Invoicing; CRM for HR, business processes and relationships; Workforce Management; Applicant Vacancy; System Admin; Employee UI; Customer UI. From the quantitative perspective the system is targeted at saving of 8-12 working days per month per person for an organization of roughly 200 employees, number-language speaking.

    At the next stages for modules development senior .NET developers, a HTML-coder, a designer and a test specialist will be involved in the project, and due to a quite burning deadline the team may amount up to 5 specialists working on several modules simultaneously to squeeze into the timeframe. Also an iterative approach is going to be applied to the project since its requirements are constantly evolving and improving aimed at creating a product which will become a guidance for industry standards. Additionally there are investors-customers who wish to buy the product and thus their preferences and ideas about features and interface should be taken into account as well.

    Results

    Currently the project is on the divide between specification writing finalization and the first module development start. The discussion of timelines, team composition and skill set, ramp-up plan and risks has already started in order to slide into the next iteration smoothly.