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.
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
Yes, PWA implementation is possible.
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.
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
Steps to migrate Grunt to Webpack
-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)
-add grunt-webpack, webpack and its modules to package.json devDependencies
-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
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.
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.
The table below shows the initial rough estimates of tasks
1.Migrate Grunt to Webpack
2. Implement the PWA
3. Add Bootstrap to project
4. Adapt existing necessary pages to be responsive
a. Design existing pages for mobile
b. Hide unnecessary modules on mobile
c. Prepare the login screen to be responsive
d. Prepare the navigation bar screen to be responsive
e. Prepare the home page to be responsive
6. Create the stock management module in React - Physical Inventory
a. Add React to project - create main component
b. Make Physical Inventory list page responsive
c. Design Physical Inventory draft page to be useful and user-friendly
d. Implement the form on the Physical Inventory page
e. Cache the Physical Inventory
f. Implement the product dropdown on the Physical Inventory page
g. Implement the Reasons modal on the Physical Inventory page
Time needed for full implementation (1 developer): around 80 mandays.