Software Design document for mobile MVP

The purpose of this document is to present how we plan to approach and achieve MVP of the mobile version. The component that we want to prepare in the mobile version is Physical Inventory.

1.The goal

Overall we’ll need to answer the question: with this technology, can we deliver within a release cycle (~ 3 months / 6 sprints)?

2. Requirements and assumptions

Is PWA implementation possible?

Yes, PWA implementation is possible.

How can we segment out the existing UI scaffolding, so that we can piecemeal upgrade/change specific areas

Rewrite some components in React without removing the Angular code and use router to display the correct components - React on mobile and Angular on desktop.

Mock out and update our UI styleguide so that we have mobile-first interactions defined for every desktop web pattern we have in and around physical inventory (i.e. around is the journey to it, such as login and menu navigation).

This is a task the team will have to do if they start working on an MVP for mobile.

Can we use the hardware: camera for barcode, bluetooth for external barcode scanner, bluetooth for printer, cold-chain type interfaces. We can do this more with product and roadmap research rather than code.

There should be no issue with accessing the camera, also all Bluetooth devices that support BLE (Bluetooth Low Energy) standard should work fine.

3. What have we done?

We have made research that allows us to answer whether we are able to achieve the goal - deliver MVP.

4. Results of a research

Migrate Grunt to Webpack

Steps to migrate Grunt to Webpack

Changes in every module:

-create a js file and import there all of the files that should be included in the build (js, css and external dependencies, without tests)

Changes in dev-ui:

-add grunt-webpack, webpack and its modules to package.json devDependencies

-create webpack config

-add webpack config and grunt-webpack task to Grunt config (it's described in https://www.npmjs.com/package/grunt-webpack )

-add a task to create a single entry point for webpack, a js file that imports entry points (the js file with imports created in each module) form all of the modules

-remove custom tasks created to bundle css, js and html files (this will be handled by webpack loaders)

-rewrite build tasks to use webpack instead of the custom tasks

Implement the PWA
- Create an app manifest
- Create and register the service worker
- Prepare installation of PWA
Add React to project
- Write a physical inventory in React without replacing the Angular
- Display React version on mobile and the old Angular version on desktop
- Use router and window.matchMedia('(display-mode: standalone)') to display the correct version
Add Bootstrap to project

We propose to add Bootstrap because it supports interactions that work well both on mobile and desktops. It will help a lot in creating a responsive mobile application.

Hide unnecessary modules on mobile
- To check if the app is launched standalone or in the browser we can use window.matchMedia('(display-mode: standalone)') and accordingly to that information change or hide elements or change routing;

5. Recommendations / Risks

Adding a Bootstrap to the project may cause some existing styles to be overwritten - this will change the appearance of the application. If this happens, we will have to fix it so that the design of the application does not change. This work was already included in the estimation.
Combining AngularJS with React seems risky - because during the work there may be issues that we are not able to foresee at this time.

6. Estimates

The table below shows the initial rough estimates of tasks

TASK	ESTIMATION
1.Migrate Grunt to Webpack	96
2. Implement the PWA	29
3. Add Bootstrap to project	48
4. Adapt existing necessary pages to be responsive
a. Design existing pages for mobile	19
b. Hide unnecessary modules on mobile	29
c. Prepare the login screen to be responsive	10
d. Prepare the navigation bar screen to be responsive	29
e. Prepare the home page to be responsive	7
6. Create the stock management module in React - Physical Inventory
a. Add React to project - create main component	22
b. Make Physical Inventory list page responsive	19
c. Design Physical Inventory draft page to be useful and user-friendly	29
d. Implement the form on the Physical Inventory page	48
e. Cache the Physical Inventory	96
f. Implement the product dropdown on the Physical Inventory page	48
g. Implement the Reasons modal on the Physical Inventory page	38

Time needed for full implementation (1 developer): around 80 mandays.