4 Creative Ways Mobile can Keep Your Supply Chain on Track

4 Creative Ways Mobile can Keep Your Supply Chain on Track

Mobile devices are everywhere. Every aspect of the supply chain, from the supplier to the consumer, has been impacted by mobile technology. There is a good chance that you are already using some type of mobile supply chain application, but is your mobile strategy keeping up with the needs of your operation?

Not only is mobile hardware changing quickly, with new phones being released constantly, but the software that runs on these devices is also changing. Device manufacturers are continuing to add more and more features into the operating system of mobile devices as well as giving developers the ability to quickly take advantage of these new features in their mobile apps. In addition to the devices and software improvements, manufacturers have also been producing rugged cases for mobile devices that add superior durability while still being able to take advantage of the latest mobile technology and features. All of this has led to a very sudden increase in mobile app usability for logistics & supply management.

Barcode Scanners Increase App Adoptability

While barcode scanners have been used with mobile apps for a very long time, there have also been many hardware and software improvements that have increased both reliability and ease of use. A good scanner can make a difference in the adoptability of your app and can make your business more efficient from source to customer. Reducing the time it takes to actually scan an item and adding support for many more barcode types can make tasks like inventory and asset management much more efficient. It complements voice features well by allowing identification of products in environments where speech recognition might not work well.

Related: See how we added product scanning to improve warehouse inventory count and identify packages at delivery checkpoints for AC Moore.

Speech Recognition Tailored To Your Product Lines

Voice and speech recognition have probably have made very rapid advancements in the past few years. All the major players including Apple, Google, Amazon, Microsoft, and Samsung, have worked on optimizing and perfecting the ability to recognize and process speech. Not only will you find it on mobile devices, but this past year has seen a large adoption of devices such as Amazon’s stand-alone Echo and Dot products. What used to be a novelty years ago has now transformed into a valuable feature available on almost all modern mobile devices. Speech recognition is able to easily complement technologies like barcode scanning in areas such as inventory management. It also has the flexibility of being as adjustable and powerful as you need by tying a recognized vocabulary with data from suppliers, transportation, sales, and consumers.

  • Using voice to document quality control inspections
  • Improving safety by not requiring workers to take eyes off equipment and instead use voice to enter/read data

GPS

GPS technology has also improved over the years giving mobile devices much quicker and more precise location information. While traditional mobile uses of GPS like navigation are quite mainstream, features such as geofencing are not as widespread. Geofencing creates a virtual geographic boundary that mobile software can react to. It can trigger a check in when a truck arrives with a shipment or optimize and adjust workflows based on estimated times of arrival. When combined with a smart mobile app, it can also give receiving terminals detailed information about drivers and shipments (eliminating possible paperwork) as well as giving feedback back to drivers about possible gate changes or wait times.

Supply Chain Case Study: See how changes to truck routing and package tracking improved routing and fuel efficiency for JB Hunt.

Beacons

With the introduction of Bluetooth® Low Energy (BLE) beacons, companies have been able to improve the logistics of their business in a much more efficient (and affordable) way than what was delivered with RFID. Early adoption of beacons was often used for indoor navigation, where GPS signal was unreliable. Shockoe has tackled this through a great personalized tour experience app with Anheuser-Busch. Uses have expanded to allow workers to efficiently navigate and locate items in storage, as well as being able to give a customer the ability to find the product they are looking for in a retail store. In addition to location proximity, beacons can also be fitted with additional sensors for light, humidity, and temperature; which expands their many uses to areas such as storage and transportation. A beacons low cost, enhanced battery lifetime, and the fact that they can be used with mobile devices (bypassing the need for specialized equipment) makes them particularly ideal for supply chain operations. Such as:

  • Alert personnel that humidity levels for monitored goods are above acceptable range and direct them to the location using their mobile device
  • Navigate grocery customers looking for a certain product to the correct aisle for the store

Mobile technologies are being used in all aspects of supply chain management from manufacturing to the consumer to give them a more efficient supply chain process. At Shockoe, we are building smart mobile apps that leverage the latest features available. We work to give suppliers, truck drivers, dispatchers, receivers, retail stores, and customers real-time insights and collaboration using an app they love.

Alex Otañez

Alex Otañez

Alex has more than 10 years of international experience in Strategic IT Transformation and Custom App Development. His expertise in various industries ranges from Consumer Goods to Retail to Finance while assisting clients in the areas of Business Strategy & Development, Security & Compliance, and Technology Transformation. As one of Shockoe’s founding members, Alex is focused on business strategy, security & compliance, digital innovation, mobile management, and operational transformations.

Why Investing in Custom Inventory Management Software Pays Off

Why Investing in Custom Inventory Management Software Pays Off

When it comes to managing your company’s inventory, there is no doubt that you need tools that are flexible and responsive enough to handle the many moving pieces (pun intended) of your operation. Today, these inventory management tools can even be implemented through mobile devices. With the increased flexibility of these mobile solutions, all you have left to decide is which software best suits your business needs.

Weighing the Benefits

In inventory management, the choice of solution could mean the difference between keeping a well-balanced stock sheet, orders being placed/fulfilled in a timely manner, and happy customers, or frustrating losses to your business. Every company’s inventory is managed differently. Perhaps you have heard that an off-the-shelf solution works for the warehouse 5 minutes down the road, but that is no guarantee that it will improve your processes in the same way. A mobile solution that is tailor-made for your operations can make all aspects of management more streamlined. Does an off-the-shelf product integrate, or integrate well, with your current backend systems? Do people with different roles on your team have different access levels to the solution as needed? Are you overpaying for the solution by purchasing features in bulk, some of which you will never use? Are there any workarounds that the off-the-shelf solution inherently causes? If so, what are those costs?

A custom mobile solution doesn’t force your processes to fit around it. Instead, custom solutions fit seamlessly into the life/processes of your company. At a glance, here are some things to consider when making the decision between off-the-shelf or custom:

Off-the-shelf solution

Pros:

  • Lower cost (up front)
  • Quick deployment
  • Dev/Design, QA testing done by the vendor

Cons:

  • May have to change processes to incorporate the solution
  • High customization costs or no ability to customize
  • Slow to evolve

Custom solution

Pros:

  • Tailored to match and meet your business needs/processes
  • Changes and updates to the solution happen more quickly
  • Integrates with other backend systems more seamlessly, and allows data to integrate automatically

Cons:

  • Higher upfront costs
  • Requires developer sources
  • Requires business participation during the development cycle (design, development, testing, training, etc.)

Probably the most important question to ask in deciding on a solution for your business is this: Is the cost of a custom application justified in the long term by the increased productivity, efficiency, and therefore increased profit margin your business will see?

Taking the Plunge to Custom

The key to success; is to begin with the end in mind. If the goal is to grow your business, then each action taken in pursuit of that vision should be future-focused. In our opinion, this is where the tried and true phrase “investing in the future” really proves true.

Custom mobility can become an integral part of your growth when it’s built for your processes. Out-of-the-box products can paint in broad strokes, but success lies in the details of your carefully constructed workflows. From roadmap strategy to deployment, we can make mobile work for you.

Interested in knowing more about how we build custom inventory management apps? We’d love to talk to you!

Troy Rich

Troy Rich

Troy was born and raised in Richmond, VA and graduated from the prestigious Virginia Polytechnic Institute and State University. He has a passion for developing and maintaining relationships and discovering how Shockoe can drive positive change. When not at the office, Troy can be found watching a Liverpool FC match in the local pub, dining at the closest Chick-fil-a, or learning how to play a new musical instrument (currently the banjo)

How Mobile is Changing Warehouse Communication

How Mobile is Changing Warehouse Communication

With the rise of Amazon and it’s 2-day, next day & even same day shipping the bar for fast shipping and therefore efficient warehouse communication to support it has been raised drastically. Luckily the constant leaps in mobile technology can be applied in innovative ways to warehouse communication which ultimately leads to increased productivity, lower overhead, and increased revenue.

Winning the Race with Efficient Productivity

There are several areas that mobile applications can lend their agile capabilities to increasing productivity in warehouse management and communication. The most pertinent of these according to Manufacturing.net is order picking and packing, saying that:

“Timing and accuracy play a key role in successfully filling an order. These factors have a direct effect on picking labor costs and orders picked per hour metrics. Reducing time to complete a process/order is directly tied to customer satisfaction.”

 

The challenge here is two-fold: How do you efficiently communicate what needs to be in an order & how do you make sure pickers know where that inventory is? Mobile inventory management applications solve both of these issues by creating a central place to easily view, generate & fulfill orders all in one place. With mobile solutions, Managers and workers can carry mobile devices with them to help locate where a specific item is located and directly scan it to add or remove it from their list depending on the task. Mobile inventory tracking such as this also allows for more accurate counts, by making sure items are not subtracted until they are physically scanned & handled.

We’ve taken this idea a step further with a research and development project for a client that featured smart glasses that did this step for them instead of having to manually input codes or carry a cumbersome scanner. Applying mobile technology to warehouse communications also means managers no longer have to be tied to a desk or constantly walking back and forth with features like instant reporting and chat interfaces that allow them to make inventory decisions directly from the work floor and communicate with employees instantaneously.

Integrating Mobile Lowers Overhead Costs & Increases Revenue

Many companies think that upgrading tech will be costly and time-consuming but mobile doesn’t have to be either of those and can significantly save money in the long run. One of the strongest selling points for mobile inventory and warehouse apps is that they can then be run on out-of-the-box devices. By eliminating the need for specialty and single-use devices, you no longer have to worry about expensive and untimely maintenance issues that not only impede workflow but pull money from your budget. Both mobile devices and applications are more easily updated with software updates or patches, giving a longer life to both instead of being stuck with legacy equipment that becomes more and more inefficient. Furthermore integrating a custom warehouse app gives you a more intuitive & relevant user interface, meaning you need to spend less time on training your workforce.

Increased revenue is the end goal for just about all companies, it is the easiest metric for measuring success and how you grow your enterprise. All of the things we’ve highlighted above should ultimately be drivers to increasing your bottom line. Warehouses are increasingly being viewed not just as pure cost centers in which operational focus is placed almost exclusively on wringing out inefficiencies and inaccuracies in order picking, but as a powerful asset that can drive profitable growth for the business with a heightened focus on improving inbound, storage, and outbound materials handling.

Finding the mobile warehouse solution for your business will significantly help your warehouse operations adapt to the quickly changing landscape of retail, e-commerce, and business in general as we continue to live in an increasingly interconnected and on-demand world.

Laura Little

Laura Little

Laura graduated from Virginia Commonwealth University and holds a degree in Creative Advertising. She’s passionate about authentic narratives, finding what a brand believes in and figuring out how to best translate that to consumers. She feels fortunate to have worked in and have experience in just about every part of the advertising and marketing world. In her downtime she can be found going on outside adventures with her dogs, enjoying local breweries, or doing experiments in her kitchen.

How to Align the Right Supply Chain App With Your Needs

How to Align the Right Supply Chain App With Your Needs

Prioritizing the strategic importance of technology that supports your supply chain is essential. Mobile Solutions are an integral and expanding component of the technology landscape that support all steps of the manufacturing process. Organizations that have mobilized solutions such as enterprise resource planning (ERP), enterprise asset management (EAM) or field service management (FSM), warehouse management system (WMS), Inventory Management System (IMS), etc. are more prepared tackle the overall digital transformation. By 2018, mobile has served as the key to unlocking the “supply chain digital transformation.” Shockoe is creating supply chain apps that are designed to support new production strategies, reduce time to manage and log resource and production activity, bring greater accuracy to tracking and analyzing data, and support the automation of production centers. Within the supply chain, more specifically warehouse management, manufacturing, and distribution, there are several opportunities for leveraging mobile in the workforce. In working with our clients, we believe the list below is the starting point for mobile solutions. These supply chain app options are aimed at supporting the overall manufacturing and sales process through an ecosystem of inventory apps, customer-facing apps, and order fulfillment apps. supply chain management diagram

Mobile Apps to Consider by Point in the Supply Chain

 

Planning & Production Apps

  • Managing parts and resource staffing requirements
  • Production workflow management
  • Inventory and asset management apps
  • Logistics and supply chain coordination

arrow supply chain app

Production Planning Apps are not only used for the manufacturing business, but also across the entire supply chain.  Production planning apps allow users to manage the overall process in three primary ways:

  1. Augment your Production Planning System:  A Production planning solution is only the first step in transforming the planning process from a manual process based on spreadsheets to one based on integrated sales history-based forecasting and confirmed sales orders/release schedules, Mobile Apps allow your team to make real-time decisions based on information obtained through a Mobile App
  2. Managed Strained Resources:  What happens when you find out that there will be a 10 percent increase in demand next month but you have no idea if you’ve got the labor, warehouse space, or raw materials to fill these extra orders? What happens if your demand shifts mid-cycle? Master scheduling can be controlled via a computer, but why not get the insights to do it on your mobile app.
  1. Disconnected Plant Floor:  Errors mean waste, unhappy customers, and non-compliance. As your business grows, mobile becomes the only way to ensure your team can “be there”, on the plant floor, to know what’s going on at any given moment. Operators and Managers need to focus on the task at hand, not on managing issues.  Mobile Apps give Managers and Operators a complete view of the manufacturing operation that is available to the entire organization but on the shop floor.

 

Order Management & Accounting Apps

Mobile Apps that fall into this category include:

  • Order management apps, pricing, and fulfillment
  • Real-time quote generation

ac moore order management app

There are two types of helpful applications that support the order management and accounting process.  Order Management and Fulfillment Apps will support users with:

  • Two-way transmission of orders, inventory, shipping, & Invoices
  • Track process of fulfillment orders real-time and close the fulfillment loop
  • Enable shippers to track order progress

Real-time quote generation also has some great benefits.

 

Order Fulfillment and Compliance Apps

Mobile Apps that fall into this category include:

  • Order status and delivery
  • Product traceability and quality
  • Logistics and supply chain apps
  • Machine level compliance and intelligence

Much like the production & planning stage, order fulfillment falls apart due to inefficient operations, a lack of integration, and a lack of inventory knowledge.  Mobile Apps can relieve the following key pain points experienced:

  1. Automate Entry for Order Fulfillment: We see our clients continue to use a manual process for order entry as their go-to option. This leads to all kinds of inaccuracies in the order, from the items needed to fulfill it, to where it is being sent. Mobile apps can equip operators with the equipment necessary to eliminate manual entry errors on things like product SKUs, quantity, and shipping addresses
  2. Resolve Inventory Inaccuracies & Inefficiencies‍: Having the right inventory is only half the challenge, operators need to know where it is and how to get to it.  Mobile is not the only solution for this, there are two things your team needs to do, (1) Make sure to have a floor layout that makes inventory visible first, from a Mobile Perspective, track inventory as it enters and leaves the warehouse in a centralized system, mobile apps enable employees to do this quickly and efficiently, real-time.
  3. Team Communication in Fulfillment: Miscommunication can cause shipping delays just as much as a disorganized warehouse. If the entire team isn’t on the same page and has no direct access to managers, too much time is spent “chasing” down the right person.  As a warehouse manager, you may have all the vendor information you need – but that won’t help your team unless you communicate the information that they need, with a supply chain app in hands, your team can be in constant communication.

When prioritizing and considering mobile supply chain solutions to support the manufacturing, administrative, and customer engagement process, Shockoe suggests using three key metrics to prioritize supply chain app development versus alternative mobile applications or the overall technology portfolio.

Reduce Manual Labor and Increase Productivity

Delivering a successful customer experience and subsequently driving more revenue requires mobile leadership and prioritization activities to go beyond the building of apps for customer-facing roles (i.e. Work Order Management or Sales). Back-office workers, technicians, and managers need mobile access to enterprise systems to better perform their jobs and service customers more efficiently. Think about creating a better mobile experience by integrating with ERP or WMS systems for, example, giving employees more freedom to do their jobs wherever and whenever. Critical features for a mobile supply chain functions are scheduling, measuring, and dispatching the workforce. Leveraging the mobile context for such, will allow organizations to accurately measure and improve the productivity of each individual. Which finally in turn will allow organizations to accurately measure and improve the productivity of each individual. Going beyond technology and mobility, an app that enables the workforce can also collect data essential to future planning. The organization can better analyze how much more work it can take on and whether there are enough people to support the forecasted workload.

Revenue

Historically speaking, revenue was only accounted for from a customer standpoint. Integrating new technologies to create a mobile supply chain allows monitoring and assessing revenue percentage at the process level. Being able to quickly obtain the percentage of revenue contribution at each step in the order to cash process is valuable information for real-time decision making and forecasting. Mobile solutions can track performance at each step which gives both locations with context. These values help indicate whether a measured process is underperforming or contributing significantly to the overall revenue. Whether it’s an investment in an asset management app or an inventory management app, whatever it is, a more granular overview of information through your processes can help target your areas of growth, need, and reward in the supply chain.

Automation

Automation, IOT, and Machine Learning are popular terms. What manufacturing companies really need to worry about and set goals for is the extent of the automation planned and how these emerging technologies can help. Once the business understands its goal, mobile solutions can embrace IoT devices to enable the desired automation. Allowing employees to monitor automated processes on mobile devices can decrease error rates, speed fulfillment processes, and ultimately settle cash faster. The continuing development and availability of newer and better technology imply that processes can be made to work faster, repetitive work can be automated, FTEs can be reduced, operations can be systemized, and customer handling can be improved. Tackling automation, IOT, or machine learning require a set of tough decisions:

  • To what level will I automate the process?
  • What aspects of the process will I automate?
  • What tools will my employees use to monitor and be alerted of the process?

The mobile supply chain is the next era of communication, collaboration, and responsiveness to the customer, driven by the ability to meet ever-more-stringent deadlines and delivery dates. Start from your key challenges and business objectives, use the right metrics to prioritize, and plan your journey for successful implementation of mobile, IoT and emerging technologies. Shockoe works in the supply chain to prioritize manufacturing apps and technology that support essential business processes. Mobile Solutions are at the forefront of all digital transformations and can support all areas of the manufacturing process. The right mobile app can help manage several areas of the manufacturing process and beyond.

Alejandro Otañez

Alejandro Otañez

COO

Alex has more than 10 years of international experience in Strategic IT Transformation and Custom App Development. His expertise in various industries ranges from Consumer Goods to Retail to Finance while assisting clients in the areas of Business Strategy & Development, Security & Compliance, and Technology Transformation. As one of Shockoe’s founding members, Alex is focused on business strategy, security & compliance, digital innovation, mobile management, and operational transformations.

How a Track and Trace System Can Optimize ROI (In 6 Steps)

How a Track and Trace System Can Optimize ROI (In 6 Steps)

In logistics, the visibility of your product in transit is essential to promote your brand’s reliability and capability. It is an expectation, not an added benefit, for a consumer to know where a product is and when they can expect it.

We’ve previously talked with you about supply chain management, and the strengths of your track and trace system can directly influence the available impact of your supply chain by increasing transparency around your products in transit; if you lose sight of your products between order and fulfillment, then delivery speed, loss prevention, and, most importantly, your revenue are data points needing to be gathered after the fact rather than real-time.

1. Decrease your computing footprint, Increase your mobility

Realizing the capacity of inventory and the effectiveness of your logistics infrastructure is not a function only needed in an office or in a space where a desktop computer can be present, it’s something you need on you all the time. With over 4 and a half billion smartphone users worldwide, a handheld computer that is low cost, scalable, and widely compatible is the ideal track and trace terminal. Reduce the cost of maintaining the hardware and peripherals of a desktop solution and by focusing on the devices currently used by employees, and equipment costs and the operational costs of training can be reduced drastically.

2. Visualize your products in transit

Understanding exactly where a delivery vehicle and associated shipment is at any point in time can help both distribution and client project payment and inventory, but to understand where the delivery vehicle needs GPS. While GPS in vehicles is typically reserved for luxury or premium vehicle packages, GPS in smartphone devices is an expectation in 2018. Avoid the additional cost to provide GPS for delivery resources, and rely on the GPS available from the phone of a driver. By adding the data provided by other smartphone and GPS users worldwide using the APIs of Google Maps, Bing Maps, and other affordable solutions, you can gain access to real-time traffic data to better analyze expectations around delivery.

3. Centralize your data and integrate legacy systems

Knowing the multitude of systems needed to manage inventory and resources, whether enterprise resource planning (ERP), enterprise asset management (EAM) field service management (FSM), warehouse management system (WMS), or inventory management system (IMS), there are often more individual interfaces available that can be managed by one person or one team. With a mature user experience informed by business goals, bring the data and interactivity of the systems housing your data into a simple and accessible mobile solution via APIs and integrations, reducing the need to rely on different interfaces and compatibility models. Bringing all of the data around your track and trace system together can help build comprehensive business intelligence reporting needed for your business, helping you build a clear, real-time understanding of your capacity in the palm of your hand.

4. Use machine learning to project costs and capacity

Historically, resource projection and calculation would require analytics software on a powerful desktop computer in the organization, and are susceptible to human error from manually maintained functions. With the strength of cloud computing in your hand, leverage complex AI and machine learning models to build accurate and informed projections based on historical, competitive, and real-time data to be able to make decisions for the future of your resources through services like Google’s Tensorflow and Microsoft’s Azure ML. The cost of intelligently anticipating the needs of your product are increasingly affordable, and the benefits are available from your phone.

5. Ditch peripherals. Scan and tag products from your smart device

To measure and manage your inventory quickly, less is more: less mobile terminals, barcode scanners, and extra peripherals needed to validate barcodes and identifying information to update inventory. With a mobile device, you can scan your barcode, look at a QR code using your smart glasses, detect RFID or NFC tags on boxes, or even have your phone recognize your product based on its appearance with machine learning. Your bank recognizes your check when you use mobile deposit, so why shouldn’t your track and trace system be able to understand a barrel of your material based on an OSHA label? Whether by using visual recognition software on the device or by checking a label against a library of images stored in the cloud, reduce the cost of managing inventory by focusing on your mobile device.

6. Start your mobile track and trace system with Shockoe

By leveraging the power and proliferation of mobile interactions, your track and trace system can be more visible and more all-encompassing to keep up with demand and to promote profitability real-time. In bringing your track and trace system to mobile, you elevate your business goals and realize your logistics footprint from your pocket.

For more on how we’ve helped our partners implement a successful track and trace system, read about our Drive app built for J.B. Hunt.

Cameron Hall

Cameron Hall

Mobile Strategist

Cameron uses his experience in app and analytics strategy for healthcare, finance, government, and logistics apps with a focus on emerging technologies to deliver on customer-centric product development. When not devouring research on the latest and greatest, you can find Cameron hiking, playing soccer, reading a book, or continuing his education.

The Warehouse Management System of Tomorrow: Faster, Leaner, and Mobile

The Warehouse Management System of Tomorrow: Faster, Leaner, and Mobile

The Warehouse Management System of Tomorrow

Imagine this: you show up at your place of work, look out onto the warehouse floor, and see all your employees hard at work making sure inventory is being stocked and orders are being fulfilled. But these are not your normal employees, instead, they are robots automatically and seamlessly performing the work previously assigned to countless humans.

Some warehouses are already adopting these technologies, and it won’t be long before others do as well. With the ubiquity of mobile and greater access to the latest technology, it’s not surprising to see more manufacturers incorporating emerging devices into their processes.

Warehouses once relied exclusively on paper for production orders, dispatch notifications, and as a means of managing asset and inventory. Fast forward to today and you’ll see an increasingly paperless industry. Warehouse Management System software, scanning solutions, and other applications are now in place to enable data to be entered directly into digital or cloud storage. This has reduced the number of errors caused by readability issues or lost paperwork, while also reducing the operating costs of the companies.

So how do warehouses become more efficient between the world of today and the future world of automation? Well, the transition is becoming increasingly achievable with all the evolving technology. The key is evaluating the current infrastructure and technology, coming up with a strategy based on key objectives, and starting to make the investment.

Over the last couple of years, we have been working with one of the country’s largest electronics distributors to do just that – improve efficiency through mobile solutions. When we first started working with this company, they had a WMS system in place but were using older technology that limited the efficiency of their employees. Shockoe created an overhauled WMS using mobile tablets, wireless handheld scanners, and a revamped user interface. The new process and interface allow operators greater flexibility and maneuverability, increasing pick speed efficiency. Supervisors can now make necessary decisions away from their desk through the mobile interface allowing them to review reports, manage inventory and processes, and communicate directly with the operators.

As we continue to grow our relationship with the client, we are exploring means to provide further functionality to operators and immersing them in the mobile experience. This will include wearable technology which enables operators to work hands-free and eliminate the need to bring a cart down an aisle.

As we move forward, other technology will be considered to improve the efficiency of the warehouse operations. For example:

Integrating with Smart Glasses

How about integrating the core functionality of a smartphone into a pair of glasses? The main difference is the display technology: images are projected directly in front of the field of vision, freeing-up user’s hands for other tasks. When working in a warehouse, having free hands and ready access to information is hugely progressive for both ergonomics and efficiency. Using this kind of device in the picking process will ease the work for operators and can help increase picking performance. It is also a flexible solution to implement since it doesn’t need any other specific equipment in the warehouse.

integrating with smart glasses

 

Voice as a guide

Adding voice-guidance to different WMS functionalities can also increase the efficiency of warehouse operations. Instructions can now be heard rather than cumbersomely viewed. This can be integrated into both smart glasses or a traditional mobile app, further allowing the operators to function hands-free and increase focus on their tasks.

Integrating Virtual & Augmented Reality Into Processes

Augmented and mixed reality ‘picking’ uses smart glasses to merge virtual images and information with an operator’s surrounding environment. The operator would wear the glasses, follow any on-screen instructions, and scan product barcodes all within the glasses’ display. The combination of real-world and virtual information provides speed and accuracy beyond previous warehouse picking technologies.

integrating virtual reality

Training with Virtual & Augmented Reality

Did you know only 40% of information is retained when people observe versus 90% when they experience it themselves? So, how about leveraging VR or AR to train employees so they can become productive quickly, while also improving the quality of the work and reducing training costs? Using smart glasses, VR headsets, or other simulators allows both new and current employees to get immersed in the work to learn without having to shadow other employees. This keeps productivity high across the board as you don’t need to pull someone away from current work to train someone.

The state of warehouse management has evolved over time as companies continue to evolve to keep up with consumer demands. Fully automated systems will take time and money. Yet, with the ubiquity of mobile and existing WMS software, an affordable cutting-edge solution might not be so distant. By employing a combination of mobile solutions, smart glasses, AR/VR/MR, or voice, warehouses can become exponentially more productive — improving not just cost, but also overall quality and safety.

training with virtual reality

Note from Editor: 
With mobile technology, employees are no longer confined to their static cubicles, bulky PCs, and disorganized file cabinets. If you’d like to learn more about what it means to have a truly mobile workforce, check out this page.

Also, you can read about “A Mobile Workforce: What Customers Want” in our previous post.

What to Expect in iOS 12 and Android 9 ‘Pie’

What to Expect in iOS 12 and Android 9 ‘Pie’

Organizations in the market for new mobile solutions should find plenty of ideas to play in the recent introduction of Android 9 ‘Pie’ and the release of iOS 12. But what really stands out are the UX improvements which elevate your app’s potential to delight the end user with greater depth, efficiency, and personalization. Here’s a breakdown of some of our favorite features.

Voice Recognition and Shortcuts

  •  Siri Shortcuts (iOS 12)

Such personalization will be a hallmark of the new capabilities of Siri, by now a comfortably ubiquitous name yet historically an unfortunate mixed bag of wonkiness and frustration for Apple and their customers. Fortunately, Siri Shortcuts will analyze individual user behavior within your apps to add highly visible shortcuts in lock screen and spotlight. App owners can elevate the visibility of their product by donating shortcuts, increasing usage and platform efficiency. And a much-beleaguered, highly overdue addition – voice commands can now perform multiple tasks in one dictation.

  • App Actions (Pie)

Android introduces a feature to help position your app’s capabilities where and when the user needs them.  With App Actions, each function of your app meets an immediate want or need, upping your value proposition and visibility.  Plug in your headphones, and see your audio app come to life. Search for a film, and see your app shortlink to purchase tickets.

 

Notifications

  • Notification Grouping and Deliver Quietly (iOS 12)

With the barrage of attention-hoarding notifications our modern devices can parade, some of us might be wishing for a bit more organization in the all the chaos. Cue iOS 12’s ability to group notifications from the same person/app/source together, with the lead notification/message tappable to display the rest of the notifications neatly lined up behind. A further touch is the ability to ‘un-group’ by app through tagging specific notifications with a thread-ID, letting the user control more than ever the who, what where and when of their mobile experience. ‘Deliver Quietly’ scraps the home-screen and banner clutter altogether, making the notification center home base for the user’s desired alerts.

  • AI Auto Response and Notification Drawer (Pie)

Greatly enhanced machine-learning capabilities in both iOS and Android’s updates have allowed for some nice touches. AI-generated auto responses, gleaned from user behavior, will appear in the notification drawer on lock screen suggesting intelligent replies to messages (without even opening the app!). Those who dream of a device that knows their whims will revel in largely finger-free messaging on the fly when a quick yet accurate response is all that’s needed. Furthermore, hurried or unfinished replies in the drawer are saved and archived for sending at a later time. Images, stickers, and past messages will all be drawer-accessible with the ability to both send and receive them.

 

Augmented Reality

  • ARKIT 2 and CORE ML (iOS 12)

Apple is seeking to maintain pace with Google in AR and machine-learning improvements, unleashing their new tools for a higher level of development of AR apps and games as well as an increased efficiency in machine-learning. 3D objects now predominate in built environments, with shapes and sizes of furniture, toys and other items detectable. Universal Scene Description (created with PIXAR) allows the sharing of AR objects across multiple platforms. CORE ML’s enhanced machine learning facilitates developers in making their own machine-learning models more customizable and tailored to the app owner’s unique needs. Apple’s ‘Natural Language Framework’ bolsters natural language processing tasks even further. These enhancements are fueled by A12 Bionic, Apple’s next generation Neural Engine chip (powering their sleek new X-line below), which promises to intelligently increase speed and functionality to a whole new level.

 

Notch Support

  • Android P Notch Support (Pie) and Watch (iOS)

By maximizing the user interface, Android P Notch Support gives your app an edge on modern phone displays. A mainstay since Apple’s iPhone X (and now the new standard with Apple’s X-line, above), Notch display support for Pie cuts your app’s content to it’s most visually appealing layout on the latest phones. Developers can test a display cutout on any device, giving your app seamless, personalized integration into the user interface. What’s more, the new 4th gen iWatch from Apple with iOS 5 will deliver an expanded display for your app to flourish as wearables continue to evolve and dominate the mobile landscape.

The array of imaginative tools and improvements from both Apple and Android’s latest present a great case to update your apps.  If you’re in the market for a new product, or just want to seize the moment to leverage some seriously cool new features, consider these updates your impetus.  The most valuable asset in a UX is the user, and by putting them in the driver seat with your app’s new personalized capabilities and intelligence, you’ll edge them even closer to going mobile, first, every time.

 

Alejandro Otanez

Alejandro Otanez

COO

Alex has more than 10 years of international experience in Strategic IT Transformation and Custom App Development. His expertise in various industries ranges from Consumer Goods to Retail to Finance while assisting clients in the areas of Business Strategy & Development, Security & Compliance, and Technology Transformation. As one of Shockoe’s founding members, Alex is focused on business strategy, security & compliance, digital innovation, mobile management, and operational transformations.

The Key to an Effective Warehouse Management App: User-Centric Design

The Key to an Effective Warehouse Management App: User-Centric Design

Custom mobile apps are effective tools for improving the Warehouse and Inventory Management process. However, a robust application with the best-of features can be rendered ineffective if the product itself is not usable. The key to launching an effective warehouse app is to create a user-centric experience that genuinely aids employees in improving productivity and performance. Let’s dive into what this means in more detail.

What do we mean by user-centric?

We mean: understanding the user, tasks, and environment surrounding the application. Poor usability can lead to user frustration and in turn, reduce overall productivity. The need for user-centric design is crucial when speaking of warehouse and inventory management applications — after all, these are the tools equipped to workers to perform their job effectively on a daily basis.

Some off-the-cuff strategies I’ve seen personally help Shockoe in deploying a great warehouse application include:

  • Get to know your user
  • Understanding the work environment and its nuances
  • Be flexible and aim for continuous improvement.

This was the core of our strategy with one of the nation’s largest electronics distributors, a warehouse management app that would go on to recognize our team with RichTech’s 2018 Technology Builder Award.

Know your user

Employees know the in’s and out’s of their daily tasks better than anyone else. They can often expose golden nuggets of information to help improve app flows as well as desired user-experiences. Whether you shadow workers or conduct interviews, the key is to expose needs and pain-points in the day-to-day. This information will give you the greatest insight as to how to design an effective warehouse solution that is easy and truly helps improve daily task performance. Below are pain-points we uncovered with one of our clients as well as how we applied that knowledge to the next generation of their warehouse application:

  • Pain-Point A: Product walkthroughs with workers revealed a need for clear, simple, and intuitive user flows. Solution: Minimal screen design, and clear CTAs on-screen to reduce distractions.
  • Pain-Point B: The small interface and visual elements on the previous scanners made it difficult to interact with the device. Solution B: Go large! We helped implement larger screens and from a design-standpoint included large text and bolder visual elements
  • Pain-Point C: Workers struggled to juggle boxes and packages while attempting to interact with small format scanners. Solution C: Large format CTA’s now make it easier to interact with the screen, even with busy hands

 

Understand the warehouse environment

Where a warehouse app is used can greatly influence whether a design is effective or not. Some important environmental factors to note include: lighting, noise, common distractions, and present equipment. Warehouse environments produce unique challenges; fork-lifts, conveyor belts, endless rows of supply, and obstacles should all be documented and considered in the user-experience — here are a few things we saw at within the warehouse that impacted the next version of the application:

  • Pain-point A: Multiple environmental distractions (steady stream of noise, bustling workers) and placing the tablet down made it likely to miss important alerts. Solution A: We made notifications large, bold, and sticky (make sure they stay on screen until dismissed)
  • Pain-point B: Finding the right box with the right item could be tricky at times Solution B: We Incorporated a label identification system (Area, Aisle, Bay, Tier, Position) into the app so that workers can match it to the physical product. see example below:

 

Flexibility & continuous improvement

This is a part of a strategy that’s unfortunately often overlooked. Companies are constantly growing, changing, and improving; the tools in place should do the same. Even great apps should be tested with users and iteratively improved over time. They should also be designed with flexibility in mind — sometimes the best ideas don’t work as expected, and being able to pivot to an alternative solution is critical to the app’s overall success. Not doing so, could mean greater failure for the rest of the features that do in-fact work. Here are a few areas we saw the need to pivot with our client’s  warehouse solution and ensure its ongoing success:

  • Pain-point A: App testing revealed manual-workarounds being performed by employees to relabel already picked inventory Solution: Workers were given a custom print option to create labels that would reflect proper quantities and date codes all from within the app
  • Pain-point B: The company’s employees required different features for different roles. Solution: We incorporated a responsive user experience that would shift the interface to match the job function of the current user.

 

Every company, every process, and every employee are different —  that’s why taking a user-centric approach to design is essential towards an app’s success. It is up to the designers and strategist to always have the end-user in mind. A blanketed approach to a user-experience could yield great results for one warehouse management system, but a disaster for another. The key to a successful inventory management app is to start from the ground floor and focus on understanding the end-user, the environment, and remain flexible with your team.

Angela Balzano

Angela Balzano

UX/UI Designer

Ange is a Rhode Island native with a passion for problem-solving and a flair for design. She specializes in strategy work and creating intuitive user experiences. Her long-standing career in technology design has led her to become mobile UX/UI expert with an emphasis on enterprise application usability… oh, and she loves crime podcasts.

Asset/Inventory Management Apps in Record Time with Flutter

Asset/Inventory Management Apps in Record Time with Flutter

Shockoe specializes in utilizing tools which can most efficiently provide a beautiful experience for a given project. We have a history with cross-platform frameworks, as they can often quicken the development period for a mobile app considerably. Many of our projects were historically built on Titanium, and a few more recently were undertaken with React-Native.

When Flutter was announced, we knew we had to keep a close eye on it, and we were eager for it to reach the point where it was mature enough to build a robust production app. The results were astounding. Not only does it ease many of development pains present in other cross-platform frameworks, it also gives you beautiful UI out of the box, and extraordinary speed as it is blazingly fast to develop. In fact, the entirety of the development you will see later in this post was completed single-handedly in a matter of hours!

Flutter for Inventory Management Apps

At Shockoe, we have a point of creating great inventory/asset apps the help manage resources, assets, and inventory at a number of large-scale companies. A few reasons why Flutter has been a particularly great fit for developing these kinds of apps include:

  • List Convenience: Turning a raw data list of assets and inventory into an actual list laid out on screen couldn’t be easier. It can be accomplished in a handful of lines of code.
  • Beautiful by Default: Apps in this category have a heavy focus on functionality. A framework which looks good in its most basic state lets you focus on the utility and devote as much time as you decide to enhance UI and delivering the right content.
  • List Performance: Flutter renders every pixel on the screen itself, allowing for a performance unparalleled by other frameworks. It touts its ability to maintain 60fps, and scrolling is buttery-smooth even on massive lists.
  • Empty/Loading State Simplicity: Most screens will be heavily data-driven. In some environments, displaying states like waiting for an API response or failing to connect can become extremely cumbersome. Flutter makes it easy to build a UI which reacts to these in-between moments gracefully.
  • Object-Oriented: Unlike Titanium and React-Native, which use Javascript, Flutter apps are written in Dart. This offers a number of benefits, like the lessened runtime error rate of strongly typed languages. The reason why it is perfect for this case is that Object-Oriented design allows for easy 1:1 mappings between real objects and their representations in code. Are you a retailer which specializes in shoes? Well, chances are your app is going to have a class Shoe and an instance of it is going to tell you everything you need to know about that specific shoe.

In this post, we’re going to take a look at building an inventory management app and not just the Flutter bit. This post includes a fully functioning Node.js backend as well — ensuring you successfully deliver your message and content to your users.

Note: This will not be a step-by-step guide, as that would be difficult to digest at a high level. Instead, we will look at each piece and break down the important components.

Inventory App Features We’ll be Building

Below is everything entailed in going from an unstarted project to a functioning application pulling real data. Here is what we will end up with:

Let’s dive in!

Basis

We will use the example of a library — yes, the variety filled with a book! A library is essentially a warehouse filled with inventory (in this case, books). For many businesses an inventory application, at its core, would support browsing and tracking items. In the context of a library, those functionalities manifest themselves in the following ways:

  • Browsing
    • view the full catalog
    • search for a specific title
    • view information about a specific title
  • Tracking
    • see a title’s availability
    • check out a copy
    • return a copy

Our app will handle all of the above.

Setup

Database

MongoDB will be used to store the data. There is no special setup required, we just load all the items into a collection and later run the Node.js server on the same machine to leverage Mongo’s already exposed localhost connection. Most likely, when building an app of this type, it will be used to access an existing dataset. The data in this example will be a subset of the most popular titles on Project Gutenberg supplemented with Wikipedia details.

Backend (API)

For our server, we will be using hapi with a few smaller dependencies like the official Node.js MongoDB drive and boom for error handling. Once hapi is installed, we must create our startup file. This will get the server up and running to fulfill requests. Let’s use index.js.

'use strict';

const Hapi = require('hapi');
const routes = require('./routes');

const server = Hapi.server({
port: 3000
});

server.route(routes.allRoutes);

const init = async () => {

await server.start();
console.log(`Server running at: ${server.info.uri}`);
};

process.on('unhandledRejection', (err) => {

console.log(err);
process.exit(1);
});

init();

Tiny, right? Hapi requires very little boilerplate. The majority of this is ripped right from hapi’s Getting Started guide. Besides removing the host property on the server configuration object in order to fall-back to the machines hostname, the only custom line is as follows:

server.route(routes.allRoutes);

This line imports and registers all of the endpoints we define in our second, and final, file: routes.js. We separate these so that the server configuration doesn’t get drowned out by the much larger endpoint definitions. In a more complex app, we would likely want multiple files which logically group endpoints into smaller buckets. Here is routes.js with an example endpoint. Its only job is to export an array of configuration objects.

const Boom = require('boom');

exports.allRoutes = [
  {
    method: 'GET',
    path: '/',
    handler: async (request, h) => {
      return 'Hello world';
    }
  }
];

 

Flutter

Enter Flutter! When creating a new Flutter project through IntelliJ, a main.dart file is created for a basic sample app which implements a counter. This is helpful when learning, but we need to rip out some of that starter code. Here is a single page app which we can use as a starting point.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Library',
      theme: ThemeData(
        primarySwatch: Colors.deepOrange,
      ),
      home: CatalogPage(),
    );
  }
}

class CatalogPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Catalog'),
      ),
      body: Center(
        child: Text('List of books'),
      ),
    );
  }
}

 

 

Catalog

Backend

Now that we’re set up, let’s start serving up data. We replace the example endpoint we defined before with one which returns the full list of books in the database.

const MongoClient = require('mongodb').MongoClient;
const Boom = require('boom');

exports.allRoutes = [
  {
    method: 'GET',
    path: '/bookList',
    handler: async (request, h) => {
      let client;
      try {
        client = await MongoClient.connect('mongodb://localhost:27017');
        let books = client.db('inventory').collection('books');

        // fetch all books
        return await books.find({},
          {
            projection : {
              _id: 0,
              id: 1,
              title: 1,
              authors : 1,
            }
          }
        ).toArray();
      } catch (e) {
        console.error(e.message);
        return Boom.internal(e);
      } finally {
        if (client && client.close){
          client.close();
        }
      }
    }
  }
];

You may notice async/await syntax. As it is available in both recent Node.js versions and Dart, we will use it throughout the backend and the app. There isn’t too much going on here. We connect to MongoDB, specifically the collection books in the database inventory, and run a find query with an empty filter object (first argument) so that all records are pulled. For cleanliness of data, we project only the properties of a book which we would be interested in when listing them en masse.

Flutter

The first thing we need to define is the representation of a book. We will go ahead and include all fields we need to be known for a book, even though only a few of them will be populated from the results of the /bookList endpoint.

class Book {
  final String id;
  final String title;
  final List<String> authors;
  final String releaseDate;
  final String description;
  final int totalCopies;
  final int availableCopies;

  /// Creates a Book instance out of JSON received from the API.
  Book.fromJson(Map<String, dynamic> json)
      : id = json['id'],
        title = json['title'],
        releaseDate = json['releaseDate'],
        description = json['description'],
        totalCopies = json['totalCopies'],
        availableCopies = json['availableCopies'],
        authors = json['authors'].retype<String>();
}

We will use the “Serializing JSON inside model classes” strategy shown in Flutter’s JSON and serialization guide. CatalogPage is a Stateless widget, because the full screen including the appbar doesn’t need to be re-rendered in the future, just the content. For that, we create a Stateful Widget, called CatalogList, which we will place in the body of CatalogPage. To keep this example concise, network requests will be made directly from widgets. It is better to practice to split them out into a non-UI library. Here is Catalog with basic display functionality complete followed by a breakdown below.

 

/// The list of books.
class CatalogList extends StatefulWidget {
  @override
  _CatalogListState createState() => _CatalogListState();
}

class _CatalogListState extends State<CatalogList> {
  /// All books in the catalog.
  List<Book> books;

  /// Books currently being displayed in the list.
  List<Book> displayedBooks;

  /// Kicks off API fetch on creation.
  _CatalogListState() {
    _fetchBookList();
  }

  /// Fetches the list of books and updates state.
  void _fetchBookList() async {
    http.Response response = await http.get('http://<API location>/bookList');
    List<Map<String, dynamic>> newBooksRaw =
        json.decode(response.body).retype<Map<String, dynamic>>();
    List<Book> newBooks =
        newBooksRaw.map((bookData) => Book.fromJson(bookData)).toList();
    setState(() {
      books = newBooks;
      displayedBooks = books;
    });
  }

  @override
  Widget build(BuildContext context) {
    return displayedBooks != null
        ? Column(
            children: <Widget>[
              new Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ListView.builder(
                    itemBuilder: (BuildContext context, int index) => Card(
                          elevation: 2.0,
                          child: ListTile(
                            title: Text(
                              displayedBooks[index].title,
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                            subtitle:
                                Text(displayedBooks[index].authors.join(' | ')),
                          ),
                        ),
                    itemCount: displayedBooks.length,
                  ),
                ),
              ),
            ],
          )
        : Center(child: CircularProgressIndicator());
  }
}
Fetch Data

When the CatalogList widget is created, we immediately want to fetch the data on all books from the backend. We go ahead and create two list references, one for all the data downloaded and one for data currently displayed, as we know search functionality is coming and we won’t always be displaying the full catalog on screen. When data is first downloaded, though, these will be the same. We take advantage of the fromJSON serialization constructor we created to convert the backend’s JSON response into a list of formed Book objects in one list mapping call.

/// All books in the catalog.
List<Book> books;

/// Books currently being displayed in the list.
List<Book> displayedBooks;

/// Kicks off API fetch on creation.
_CatalogListState() {
  _fetchBookList();
}

/// Fetches the list of books and updates state.
void _fetchBookList() async {
  http.Response response = await http.get('http://<API location>/bookList');
  List<Map<String, dynamic>> newBooksRaw =
      json.decode(response.body).retype<Map<String, dynamic>>();
  List<Book> newBooks =
      newBooksRaw.map((bookData) => Book.fromJson(bookData)).toList();
  setState(() {
    books = newBooks;
    displayedBooks = books;
  });
}

Try/catch around the async body of _fetchBookList is omitted for readability. Make sure to catch possible exceptions/errors in production.

/// All books in the catalog.
List<Book> books;

/// Books currently being displayed in the list.
List<Book> displayedBooks;

/// Kicks off API fetch on creation.
_CatalogListState() {
  _fetchBookList();
}

/// Fetches the list of books and updates state.
void _fetchBookList() async {
  http.Response response = await http.get('http://<API location>/bookList');
  List<Map<String, dynamic>> newBooksRaw =
      json.decode(response.body).retype<Map<String, dynamic>>();
  List<Book> newBooks =
      newBooksRaw.map((bookData) => Book.fromJson(bookData)).toList();
  setState(() {
    books = newBooks;
    displayedBooks = books;
  });
}

Try/catch around the async body of _fetchBookList is omitted for readability. Make sure to catch possible exceptions/errors in production.

Build a List

Here is where we see Flutter start to shine. To convert this list of Book data into a rendered list on the screen, all we have to do is write an itemBuilder function which returns what a given item in the list will look like, then pass in the list of data and it’s length. We use a Material Design Card containing a ListTile- a prebuilt widget which displays a title and subtitle (and optionally additional inner widgets).

child: ListView.builder(
  itemBuilder: (BuildContext context, int index) => Card(
        elevation: 2.0,
        child: ListTile(
          title: Text(
            displayedBooks[index].title,
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
          subtitle:
              Text(displayedBooks[index].authors.join(' | ')),
        ),
      ),
  itemCount: displayedBooks.length,
),

That’s all it takes to build a ListView which is ready for production. It will lazily render new rows as they are scrolled into view, gracefully handle changes to the list of Books, adapt scrolling behavior to OS, and perform fantastically. Much of the above is styling as well. We could get something functional in half as many lines.

 

child: ListView.builder(
  itemBuilder: (BuildContext context, int index) => ListTile(
        title: Text(displayedBooks[index].title),
        subtitle:
            Text(displayedBooks[index].authors.join(' | ')),
      ),
  itemCount: displayedBooks.length,
),
Handle Loading State

When the Catalog List is created, the data list which our ListView is populated from, displayedBooks, is null.

List<Book> displayedBooks;

 

Once the data fetch is complete, that variable will point to a valid List.

setState(() {
  books = newBooks;
  displayedBooks = books;
});

 

Once this occurs, the ListView can start rendering rows. In the meantime, we need to render something different. If handling moments like these require a lot of development effort, it can feel counterproductive to tackle them right out of the gate while true functionality is still being worked out. This can lead to polish/UX tasks being put on the afterburner. With Flutter, it’s easy to handle loading during our first pass at the screen. We just use a ternary expression in the build function to describe an alternate visual while displayedBooks is still null.

@override
Widget build(BuildContext context) {
  return displayedBooks != null
      ? Column(
          // ...rest of widget hierarchy for loaded state
        )
      : Center(child: CircularProgressIndicator());
}

 

Search

Supporting search requires two main changes.

  1. Add a search input field which fires an event when it changes
  2. Add a search function to filter the displayed list when the search event is fired

An input field which fires an event is achieved with the combination of TextField and TextEditingController

/// The controller to keep track of search field content and changes.
final TextEditingController searchController = TextEditingController();
child: TextField(
  decoration: InputDecoration(hintText: 'Search for titles...'),
  controller: searchController,
),

With the search bar in place, we can register a listener when the CatalogList is created to fire the function which will filter the full book list down to results to be displayed and update state. If the search text becomes empty, the list is set back to the full catalog.

/// Kicks off API fetch on creation.
_CatalogListState() {
  _fetchBookList();
  searchController.addListener(_search);
}
/// Performs a case insensitive search.
void _search() {
  if (searchController.text == '') {
    setState(() {
      displayedBooks = books;
    });
  } else {
    List<Book> filteredBooks = books
        .where((book) => book.title
            .toLowerCase()
            .contains(searchController.text.toLowerCase()))
        .toList();
    setState(() {
      displayedBooks = filteredBooks;
    });
  }
}
Navigation

The Catalog page is complete, and now we need to be able to take a deeper look at an individual item. The next page will be called DetailPage, so we’ll rig up each item in the list to move forward to the respective book’s details. Conveniently, ListTile has builtin touch handling, so we can just add a single property

onTap: () {
  Navigator.of(context).push(MaterialPageRoute(
      builder: (BuildContext context) {
    return DetailPage(displayedBooks[index].id);
  }));
}),

We only pass the id instead of the Book instance, since we will be fetching the book’s most up-to-date full data from the backend when loading DetailPage anyways.

Details

Backend

We add a new endpoint configuration object onto allRoutes to return full details of a title. It is nearly identical to the full listing except we switch to findOne, add a filter for an id passed from the app, and project additional fields. We also call out to a function to calculate the number of copies available, but we will wait to see that in the Tracking section.

{
  method: 'GET',
  path: '/book',
  handler: async (request, h) => {
    let client;
    try {
      client = await MongoClient.connect('mongodb://localhost:27017');
      let books = client.db('inventory').collection('books');

      // fetch matching book
      let book = await books.findOne(
        {
          id: request.query.id
        },
        {
          projection : {
            _id: 0,
            id: 1,
            title: 1,
            authors : 1,
            releaseDate : 1,
            description: 1,
            totalCopies: 1,
            checkedOutTo: 1
          }
        }
      );
      setAvailableCopies(book);
      return book;
    } catch (e) {
      console.error(e.message);
      return Boom.internal(e);
    } finally {
      if (client && client.close){
        client.close();
      }
    }
  }
},
Flutter

The basic DetailPage widget is a bit larger, but most of the functionality will look familiar from CatalogList. This time we make DetailPage itself the Stateful Widget, since we want to allow the AppBar to update with the book’s title once data is loaded.

/// The screen which displays the full details of a given book.
class DetailPage extends StatefulWidget {
  final String bookId;

  DetailPage(this.bookId);

  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  /// The full book data.
  Book book;

  /// Kicks off API fetch on creation.
  _DetailPageState() {
    _fetchBookDetails();
  }

  /// Fetches the books details and updates state.
  void _fetchBookDetails() async {
    http.Response response =
        await http.get('http://<API location>/book?id=${widget.bookId}');
    Map<String, dynamic> newBookRaw = json.decode(response.body);
    Book newBook = Book.fromJson(newBookRaw);
    setState(() {
      book = newBook;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(book?.title ?? ''),
      ),
      body: book != null
          ? new Center(
              child: new SingleChildScrollView(
                child: Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Card(
                    elevation: 5.0,
                    child: Center(
                        child: Padding(
                      padding: const EdgeInsets.fromLTRB(24.0, 0.0, 24.0, 24.0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          _BodySection('Author', book.authors.join('\n')),
                          _BodySection(
                              'Release Data', book.releaseDate ?? 'N/A'),
                          _BodySection('Description', book.description),
                        ],
                      ),
                    )),
                  ),
                ),
              ),
            )
          : Center(child: CircularProgressIndicator()),
    );
  }
}

class _BodySection extends StatelessWidget {
  final String title;
  final String content;

  _BodySection(this.title, this.content);

  @override
  Widget build(BuildContext context) {
    return new Padding(
      padding: const EdgeInsets.only(top: 24.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(title, style: Theme.of(context).textTheme.title),
          Text(content, style: TextStyle(color: Colors.grey[700]))
        ],
      ),
    );
  }
}

We could have fetched all these details back on the CatalogPage and simply passed them through the be displayed on the DetailPage. The reason we opt for pulling the data fresh is to ensure we have the very latest details on an item when we view it. In this example, it’s unlikely that any of the fields we are displaying would change frequently. In other industries, however, a DetailPage might be displaying volatile data. These considerations especially come into play when we add our next section.

Tracking

We will support two operations on books: checking out and returning. These operations will drive the number of copies available to be checked out by other users as well. When a user checks a book out, they are grabbing it from the library and marking one of the copies as taken by them. When they return a copy, they are again providing their name and stating that they have placed the copy back into the library. In this example, no unique identifiers are used for individual copies, however, it would be a small change to add an additional field to the app and modify the backend to accept a copy identifier (potentially a barcode). The three fields in the database driving these interactions will be:

  • totalCopies – total number of copies of a title which the library has in circulation
  • checkedOutTo – array of names to which copies are checked out along with one virtual field calculated at request time
  • availableCopies – number of copies in the library available for checkout (total copies – checked out copies)

 

Backend

We add two endpoint configuration objects. /checkOutBook will push a name onto the checkedOutTo array, and /returnBook will splice a name out of it.

{
  method: 'POST',
  path: '/checkOutBook',
  handler: async (request, h) => {
    let client;
    try {
      client = await MongoClient.connect('mongodb://localhost:27017');
      let books = client.db('inventory').collection('books');

      // update book data with name added to check out list
      let bookResult = await books.findOneAndUpdate(
        {
          id: request.payload.id
        },
        {
          $push : { checkedOutTo : request.payload.name }
        },
        {
          projection : {
            _id: 0,
            id: 1,
            title: 1,
            authors : 1,
            releaseDate : 1,
            description: 1,
            totalCopies: 1,
            checkedOutTo: 1
          },
          returnOriginal : false
        }
      );
      let book = bookResult.value;
      setAvailableCopies(book);
      return book;
    } catch (e) {
      console.error(e.message);
      return Boom.internal(e);
    } finally {
      if (client && client.close){
        client.close();
      }
    }
  }
},
{
  method: 'POST',
  path: '/returnBook',
  handler: async (request, h) => {
    let client;
    try {
      client = await MongoClient.connect('mongodb://localhost:27017');
      let books = client.db('inventory').collection('books');

      // get current list of checked out copies
      let currentBookData = await books.findOne(
        {
          id: request.payload.id
        }
      );
      let nameIndex = currentBookData.checkedOutTo.indexOf(request.payload.name);
      if (nameIndex !== -1){
        currentBookData.checkedOutTo.splice(nameIndex, 1);
      }

      // update book data with name removed from check out list
      let bookResult = await books.findOneAndUpdate(
        {
          id: request.payload.id
        },
        {
          $set : { checkedOutTo : currentBookData.checkedOutTo }
        },
        {
          projection : {
            _id: 0,
            id: 1,
            title: 1,
            authors : 1,
            releaseDate : 1,
            description: 1,
            totalCopies: 1,
            checkedOutTo: 1
          },
          returnOriginal : false
        }
      );
      let book = bookResult.value;
      setAvailableCopies(book);
      return book;
    } catch (e) {
      console.error(e.message);
      return Boom.internal(e);
    } finally {
      if (client && client.close){
        client.close();
      }
    }
  }
}

We also add a quick helper method to routes.js to calculate available copies.

function setAvailableCopies(book){
  book.availableCopies = book.totalCopies - (book.checkedOutTo ? book.checkedOutTo.length : 0);
}
Flutter

Beneath the other body sections, we add availability details and a small form for checkout/return. Since both actions require the same info, they can share an input box.

_BodySection('Available Copies',
    '${book.availableCopies} / ${book.totalCopies}'),
Column(
  children: <Widget>[
    TextField(
      decoration:
          InputDecoration(hintText: 'Enter name'),
      controller: nameController,
    ),
    new Padding(
      padding: const EdgeInsets.only(top: 16.0),
      child: new Row(
        mainAxisAlignment:
            MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          RaisedButton(
            child: Text('Check Out!'),
            onPressed: fieldHasContent &&
                    book.availableCopies > 0
                ? _checkOut
                : null,
          ),
          RaisedButton(
            child: Text('Return'),
            onPressed:
                fieldHasContent ? _return : null,
          ),
        ],
      ),
    )
  ],
)

These buttons call functions to pass the current book id and entered a name to the backend, and will update state with the new version of book details returned. This ensures that the available copy count will stay in sync with actions performed.

Each button is conditionally disabled by passing null to its onPressed property. Both buttons are disabled by the fieldHasContent flag which is set when the name input field is empty, and the check out button is additionally disabled when there are no available copies.

We have a functional, performant, aesthetically pleasing app with associated backend all in ~500 lines of code. Creating a solution for Asset/Inventory Management has never been easier, and Flutter continues to improve daily. Don’t let it’s “beta” tag fool you, Flutter is production ready. In fact, we just built a production Inventory Management application for Belden Brick, so that the brick distributors they work with can access browse their inventory, search products, view product images, order samples, and more!

Below you will find the full files from this demo.

Flutter: https://bitbucket.org/snippets/shockoe/7eMxEq
Hapi: https://bitbucket.org/snippets/shockoe/ne8jR6

 

 

Related post:

Three Reasons Flutter is a Viable Cross-Platform Framework
Google Flutter goes Beta at #MWC18