Recommended
Recommended
More Related Content
Similar to How progressive web app technology can revolutionize retail operations
Similar to How progressive web app technology can revolutionize retail operations (20)
More from Alex Nguyen
More from Alex Nguyen (7)
Recently uploaded
Recently uploaded (20)
How progressive web app technology can revolutionize retail operations
- 1. Progressive Web Apps Revolutionize Retail Operations Alex CTO Magestore
- 2. Agenda 1. State of Retail POS 2. Why Use PWA Technology for a Retail POS? 3. PWA POS – Architecture 4. Implementation 5. Outlook
- 3. State of Retail POS
- 4. ● First computer based POS was introduced in the 1970s. Retail POS Current State ● Omnichannel is disrupting the retail business. ● Since then most of the time POS ran on closed networks.
- 5. POS Evolution Traditional POS - Also known a legacy POS - Runs on closed networks - Only accessible on-site Web based POS - Data accessible from anywhere - Usable on any device Integrated POS - Integrated to an online system - Often connected through API
- 6. Why Use PWA Technology for a Retail POS?
- 7. Progressive Web Apps Introduced by Google in 2015. Bridge for the gaps between mobile app and website. ● Offline mode ● App-like look and feel ● High performance ● Effortless updates and synchronization
- 8. Magento released PWA Studio recently this year. It is a collection of tools that lets developers build complex Progressive Web Applications on top of Magento 2 stores. Magento PWA Studio PWA Studio
- 9. Benefits for Retail Magento native Offline mode Responsive Secure Updates Customizable
- 11. PWA for POS? Challenges ● Must connect to many different devices such as: printer, barcode scanner, credit card swiper, payment terminal, cash drawer, etc. ● Must work smoothly with no internet connection
- 14. ● POS driver software is a Windows application built with C# PWA POS Connection to Desktop/Laptop ● POS driver installed ● Plug peripherals to PC ● Run PWA POS on PC
- 15. ● Peripherals plugged to Box ● POS Box connects to local network ● POS Box: hardware box based on a Raspberry Pi PWA POS Connection to iPad/Tablet ● POS iPad/ Tablet connects to local wifi network
- 16. < 3s Time to open POS PWA POS Performance < 1s Scan barcode < 1s Search customer 12,000 Orders per hour Testing Environment Magento Data 100,000 SKUs 100.000 Customers Magento CE 2.2.x AWS 4 cores CPU 15GB RAM
- 17. Implementation
- 18. Client based in Canada ● 9 locations ● only 1 location to fulfill online orders (others for retail) ● 8000 unique pet products ● Store size 500–1000 sqm ● Shipping to Canada, US, and Mexico PWA POS Implementation
- 19. PWA POS Implementation Client’s Requirements ● Real time synchronization of data with Magento ● Open source code ● Allowing backorders on POS ● Allowing to set custom discounts for specific products
- 20. ● Magento Open Source 2.2.5 ● Multiple Inventory Management ● PWA POS Implementation Solution
- 21. ● Implementation in 60 working days ● Client “Thank you. I truly believe this is the best system available. We have used two others and this is a huge improvement.” PWA POS Implementation
- 22. Outlook
- 23. ● POS application by PWA ● Inventory control application by PWA PWA Opportunities ● Order Fulfillment application by PWA
Editor's Notes
- Hi everyone and thank you for joining this presentation today. The topic is related to PWA technology. My name is Alex and I’m the CTO of Magestore. We’re now focusing on providing point of sale for Magento retail merchants. So just to get a little overview, who is a Magento developer in this room? And who knows “Progressive Web App” technology or PWA in short? You made a good decision coming here, as this topic will be a big and growing factor in the future for Magento.
- So first I will go quickly go into the current state of Retail POS. After that I’ll explain the reason to use PWA technology and how it improves the POS and omnichannel experience. Then we’ll talk a bit more about the architecture behind it and the challenges that we needed to solve. To sum it up I’ll present a real life implementation we did for a client in Canada as well as giving an outlook of what’s to come.
- Ok let’s start with state of retail POS
- The first computer based system was introduced almost 50 years ago already. For a long time not much happened besides the technology improving and getting faster. In the last few years, with the uprising of smartphones and our “always on” lifestyle, customers a learning and expecting more and more of the retail business. Recently omnichannel, the approach that connects all channels together to deliver one seamless experience for the customer, is getting bigger and a very important factor in the current state of retail business. It’s a disruption that will be very interesting to follow and see in future.
- To understand this better, let’s see how the POS system evolved over the years. Traditional/Legacy POS: A traditional POS, also known as legacy POS, runs on closed networks and the data is stored on local servers. The data can only be accessed on-site, meaning that the owner or manager has to be physically present in their business facility to make any changes to the menu or items, to check employee clock-ins, to see sales report, etc. --- Integrated POS: Today many POS systems are integrated and connected to an online system to store the data. They are often connected through APIs to other systems like: CRM, Loyalty programs, ERP, Accounting, etc. --- Web based POS: The data can be accessed from anywhere, anytime & any device. It's giving human the flexibility & convenience in managing data of business.
- Now let’s go into why PWA is a helpful technology for a POS software.
- (Question if Attendees are familiar with what PWA is.) PWA was introduced by Google that defines the possibilities of modern web features that are very powerful in the recent years. PWA allows a web application can be run the same way like a native app. The look and feel are no different to an app while it's still having same functionalities. Some of the most prominent features include: Offline mode Reliable even in uncertain network conditions App-like look and feel The Design likes mobile apps while still having the full functionality of web application. High Performance Faster due to the way the underlying technology caches and serves text, stylesheets, images and other content of the web page. Updates No need to update every single app on different tablets. Updates will be processed automatically when user access application.
- To support this claim, Magento released their “PWA Studio” just this year. They are working closely with Google to grow and strenghten this new technology. The PWA Studio is a reversed way of thinking about Progressive Web Apps in eCommerce. In short, instead of a ready-to-use solution, the PWA Studio is a suite of tools for building online stores as Progressive Web Apps. This studio will be available for Magento Commerce solution partners and UX developers. Magento strongly believes in the future of PWA and do a lot to support the growth of the technology. Source: https://divante.co/blog/how-does-pwa-studio-change-developing-pwa-solutions/
- Specifically for Retail there are important benefits to this technology. Magento native: No need for an extra development team (iOS/Android). Magento real-time synchronization in seconds. No set time-periods you have to wait for minutes or hours. Responsive: Fits any device, from desktop, tablet to mobile. Updates: No need to update through app stores. Updates will be visible right after they are done/restarted. Offline mode: Service workers allow it to work offline. Stable in every environment. Works in uncertain environments like trade shows with low quality internet connection. Secure: Uses HTTPS and SSL to ensure data safety. Customizable: Uses PHP, rest API and PWA with ReactJS. Makes the POS highly customizable for every need by the merchant.
- To understand a bit more about the technology behind, let me go a bit into the architecture that we used to develop the POS.
- First, when we started we soon realized there are challenges that need to be solved. First and foremost, the POS software must be able to connect to very different devices that are common in the retail sector. These include receipt printers, barcode scanners, credit card machines, etc. Because a POS built with PWA is web based, another important factor is to make sure that the POS runs even when there are problems with the internet connection.
- We use service workers to ensure quick responses to all requests by the user. The first time you run and log into the POS, all necessary data will be downloaded from the Magento server. They are stored into the local storage of the web browser, the IndexedDB. This contains things like: products, inventories, customers, promotional rules, tax rules, etc. Once this local data is ready to use, the service worker can read the data directly from the local storage. This means the response to each request by the user will be done directly, without the need to request anything from the Magento server. Therefore there is no internet connection required to work with the POS. Once internet is available, the data will by synced between the POS client and Magento, to ensure that the data is always up-to-date on both systems.
- So for example when a cashier completes a checkout, or adds a new customer, the data on the POS will be updated. These updates will be put into a request queue and notify the user that the update has been processed. Whenever there is an internet connection, all the requests in the queue will be pushed to Magento via API. This gives us two advantages: Very quick order creation in under 2 seconds Ensured use of the POS without an internet connection --- In case of update data from POS when cashier complete a checkout, or add new customer, all the update requests will be put into a queue in local quickly, then show message to user know that the update has been processed. Everytime internet connection is available, requests in the queue will be pushed to Magento via API. So we get two advantages from this: - Quick order creation (we can create a order for Magento platform under 2 seconds) - Smoothly working with no internet connection
- The other challenge was to connect many different external hardware from and to a web application POS. On PC we developed a Windows application named “POS Driver”. It is responsible to connect to all the devices via ports to the PC/Computer including: payment terminal, printer, electronic scale, etc. When you open the PWA POS on computer, it can send a request via HTTP to this application. The driver will forward the request to external devices. After these responded to the driver, the driver will then return the messages to the PWA POS.
- Now for tablets we have the problem that a web application can’t send requests to a native app. This means, we can’t use a POS driver in this case and needed to find another solution here. We created a POS box (built with a Raspberry Pi) that has enough USB ports for all the devices. This box is connected to the local network (via WiFi) and the external devices are plugged into the box. So once we connect the POS tablet to the same local network, the PWA POS can communicate with all the external devices via the POS box.
- Now to give you some numbers, we tested the performance of the PWA POS and got impressive results! The time to open the POS, and being able to start working with it is under 3 seconds. We used 100,000 SKUs for our test and scanning a product took less than a second. The same for the customer database. We created 100,000 customers and were able to find them through search in under a second. And the POS is able to handle up to 12,000 order per hour, that’s 200 per minute! To make this credible, you see our testing environment on the right here. We used the power of a 4 cores CPU with 15GB of RAM on Amazon Web Services.
- Now this is all nice in theory, but the important thing is, it needs to work in real life. So let me introduce you to a example client we implemented this solution for in Canada.
- This client has 9 retail locations of which only 1 will be used to fulfill online orders (the others will for retail sales) Their stores range from 500–1000 square meters in size with 8000 unique SKUs and they ship to North America including the United States and Mexico besides Canada.
- Since they are mainly handling FMCG (Fast moving consumer goods) they needed a real time synchronization of their data and sales with Magento. To be able to handle the maintenance of the prodcut in the future the code needed to be open source. As for the features for the in-store cashiers, the POS needed to allow backorders as well as setting custom discounts for specific products.
- To achieve that we used the open source Magento version 2.2.5 To manage the stocks of all 9 locations we installed our multiple inventory module and connected one location to the Magento online store. The PWA POS connects all the other 8 locations.
- After 60 working days for implementation, we finished the project. The client was very happy and told us: "Thank you. I truly believe this is the best system available. We have used two others and this is a huge improvement."
- Now this new technology is very exciting already, but we are just at the beginning. There are many more opportunities for the future PWA can be used for and we are looking forward to be part of it!
- So besides the POS application that I just introduced to you, we believe the PWA technology can and will power more than just the POS. We imagine an inventory control application and order fulfillment application both powered by PWA. So the staff can easy access to these applications by their smartphones. Then just work on it.
- So here we define how these PWA applications stand in Magento Ecosystem. They’re connected to Magento MCOM, and provide best experience for users in backend operation of business. Everything here is now just an idea. However I hope It will be realizable soon. Thank you very much!