Mobile Apps & Emerging Technology for Supply Chain Efficiency

Mobile Apps & Emerging Technology for Supply Chain Efficiency

Mobile Apps & Emerging Technology for Supply Chain Efficiency

    Let’s socialize

Using Technology to Support the Supply Chain Workforce and Its Processes

While computing in the supply chain is nothing new, many existing systems are running on bulky and dated equipment, limiting the flexibility and efficiency of employees.

The issue isn’t confined to one segment of the supply chain. From suppliers to retailers, it’s not uncommon to be conducting day-to-day operations with outdated supply chain applications and hardware.

Thankfully, these inefficiencies can be addressed with new and emerging technology – specifically, mobile apps, mixed reality (augmented reality, smart glasses, and virtual reality), machine learning, and voice recognition.

These technologies provide neat and straightforward fixes for various pain points along the supply chain – not just for suppliers and manufacturers, but all the way down to distributors, retailers, and consumers.

For example, advanced inventory management apps allow suppliers to track raw materials, manufacturers to decrease the time to manufacture and ship, and retailers to more effectively track their stock.

Progressive and forward-thinking companies are diversifying their technology investments to focus not only on customer-facing advancements, but also on supply chain efficiency. This has a direct impact on the bottom line and customer loyalty.

Let’s look at how each step of the supply chain benefits from these technologies.

Free Download: “Mobility in the Modern Supply Chain” White Paper

How Suppliers Benefit

  • Accurate sourcing: Track and distribute raw materials anytime, anywhere. Mobile apps connect manufacturers to the first step of the supply chain – the raw materials supplier.
  • Better inventory control: Inventory management with the tap of a finger. Warehouse management apps provide 24/7 control of inventory. XR headsets allow suppliers to see what they have, where it is, and where it needs to go.
  • Simplified logistics: Order fulfillment that’s simple, intuitive, and on the go. Track the transit of materials from anywhere in the field. Hands-free devices eliminate the need for paper lists or handheld devices, making the order picking process faster and less prone to error.
  • Enhanced management: Lead the team while being in two places at once. Both AR and VR can provide accurately visualized digital twins, allowing managers of global operations to view sites in real-time and ensure smooth operations without the expense of being physically present.

How Manufacturers Benefit

  • Faster production times: Decrease the time to manufacture and ship. Supply chain apps integrate with legacy systems to cut down on the overall production process.
  • Enhanced, safer training: Increase operational efficiency and safety. Head-mounted AR displays allow for hands-free, real-time interaction with equipment. VR training offers the ability to provide a variety of scenarios without the risk associated with on-site or in-the-moment training.
  • Recall/damage control: Simplify field assessments and integrate data captured in the field from mobile apps with back-office applications. The faster a customer complaint is resolved, the more likely customers are to become repeat customers.
  • Better final product: Reduce human error. Tighter, technology-led quality control leads to better oversight and ultimately, a higher-quality product.

How Distributors Benefit

  • Improved warehouse management: Ensure the most efficient logistical output. Voice, mixed reality, and mobile apps enable order pickers to accurately visualize and navigate the best route through the warehouse and see exactly where shipment vessels have available space.
  • Increased “on-time” delivery: Reliable transport projections updated in real-time. Machine learning and mobile apps work together to define fulfillment plans and shipping routes optimized for traffic patterns, weather, and other factors.
  • Smarter communication: Engage suppliers, retailers, employees, and consumers with unified technologies. Mobile apps, voice technology, and mixed reality can be used to transfer information and communicate with stakeholders quickly and accurately.   
  • Simplified operations: Simplify and speed up warehouse operations. Receive instructions, request information, and confirm orders and shipments with a mobile application interacting directly with warehouse IT infrastructure.

How Retailers Benefit

  • Better stock and inventory management: Retailers know how much stock they’ll need at any given time with demand forecasting technology. Advanced customer modeling driven by machine learning tracks trends in supply and demand and optimizes inventory.
  • More efficient front-line employees: Informed employees improve retailer performance. Empower employees to optimize store layouts, know what’s in stock, and check customers out with ease using mobile apps, mixed reality, and machine learning.
  • Less shrinkage: Prevent inventory loss while controlling costs. Digitized tags, smart scanners, inventory management systems, and machine learning-powered platforms save money by preventing theft and other issues that lead to shrinkage.
  • Continuous improvement: Monitor trends and stay agile. Machine learning can be used to identify factors influencing inventory error rates and other inefficiencies, allowing management to clamp down on bad practices and proactively address issues before they arise.

How Consumers Benefit

  • Faster shipments: Get products in consumers’ hands quicker. Mobile apps optimize ordering, while smarter warehouses and distribution networks speed up processing and delivery.
  • Accurate order tracking: Update the customer every step of the way. Enhanced scanning and tracking apps allow for real-time notifications, keeping consumers informed about the status and availability of orders and products.
  • Empowered buying decisions: Accurate, personalized information at the click of a button. When the right supply chain technologies are used, consumers have more information available to them and can make reliable buying decisions. With mixed reality, they can even visualize and experience a product prior to making a purchase.
  • Better customer experiences: Technology that works for your customers. Machine learning enhances product recommendations, voice recognition improves security and enables ease-of-use, and mobile apps facilitate shopping, information gathering, purchasing, and post-purchase support.

Increasing Customer Loyalty

As a supply chain app developer, we help our clients gain insight into points along the supply chain that will benefit from new technology, in order to get their customers their product faster, more efficiently, and more effectively.

These apps can reduce the rates of errors, missed orders, product returns, and consumer dissatisfaction with customer service turnaround times, leading to better customer experiences.

The end result is maximizing a company’s existing investment in consumer-facing solutions while also increasing customer loyalty.

Increase Your Bottom Line

Partnering with an experienced supply chain app developer to digitize the supply chain means organizations can provide the best of both worlds by increasing efficiency, decreasing costs, and making sure customers become ambassadors for the brand.

This leads to repeat business and long-term revenue growth.

Apps Designed for Supply Chain Efficiency

Shockoe is the supply chain app developer for several big-box retailers. We create apps that support the supply chain workforce and processes.

Check out the infographic below to learn how these supply chain apps can create faster and more efficient manufacturing and supply chain processes while delivering better experiences for distributors, retailers, and customers.

Alex Otañez

Alex 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.

React Native: Upgrade Dos and Don’ts

React Native: Upgrade Dos and Don’ts

React Native: Upgrade Dos and Don’ts

While React Native is a great framework for cross platform development, the process to upgrade from one version to another is generally painful.  If you created a new application this time last year, it was most likely running on version 0.56. Today the latest version is 0.60, and 0.61 is right around the corner.  So, do you really need to update? And is it really that painful?

Why you need to update

We’ve already discussed sharing data components between React and React Native, but what do you do when it’s time for upgrading? There are two things that drive updating the React Native version in a project.  The first is when you have to because of compatibility issues. React Native updates take some time, especially when you factor in a regression test for your application, but it’s hard to argue with the whole “update the React Native version or your app stops working.”  Ideally that’s not a situation you run into, but it definitely happens. There’s been a handful of compatibility issues in the past year.

Google Play Store’s 64-bit requirement

Google is very interested in ensuring that all apps on its Play Store provide a 64-bit architecture.  Earlier this year, Google announced that any app update submitted after August 1st 2019 would require 64-bit support.  Unfortunately, React Native did not support builds targeting a 64-bit architecture on Android.  We saw this supported added with version 0.59. If you are looking to release a new build on the Google Play Store today, you must run on 0.59 or later.

The AndroidX Debacle (0.60)

The Android ecosystem has historically relied on the Android Support Library (https://developer.android.com/topic/libraries/support-library/index).  This library allows for the use of newer APIs on older versions of Android, or at least provides a graceful fallback. They have replaced the Android Support Library with another library, AndroidX.  React Native did not play nice with AndroidX until 0.60.  This became an issue because Google Play Services depends on the Android Support Library.  

Many other libraries depend on Google Play Services for various features such as push notifications or maps.  Google Play Services depends on the Android Support Library.  When Google Play Services switched to AndroidX, a lot of React Native Android modules broke.  These modules depend on Google Play Services, but do not specify the specific version that they require.

Fortunately, there is a way to work around this by modifying your project’s gradle file.  Because of this, it does not force you to update React Native to get around the issue, but it certainly makes it easier.  If you do decide to make the jump to a newer version of React Native and find native modules that are failing because they require the old support libraries, you can get around that.  Running

`npx jetify`

 

will crawl your node_modules and update any Android files using old support libraries to use AndroidX instead. An easy way to run this automatically is to add a post-install script to your package.json:

`”postinstall": “npx jetify”`

 

Xcode 11 Support

iOS 13 is upon us, and with it comes Xcode 11.  Apps compiled with Xcode 10 should work on iOS 13 just fine, but you cannot target iOS 13 devices and simulators for debugging without Xcode 11.  Unfortunately, React Native did not play nice with Xcode 11 out the gate. The development teams addressed this issue in later releases of React Native 0.60. Your app may run fine on iOS 13 now, but it is important to update so you can target iOS 13 while debugging.

Related: How to Combine Top Tabs and Bottom Tabs into a Hamburger Menu

Why you want to update

The other reason to update is new features to take advantage of.  These aren’t mandatory, but can make development much easier. Let’s look at some of these fun features introduced in the last year.

Autolinking

New in 0.60, Autolinking is an excellent new feature.  Before 0.60, linking native modules could be difficult.  Most native modules could be installed just by using the command:

`react-native link <package name>`

 

This command changes some native Android files and adds a reference to some iOS files in your Xcode project. Often, this just works, but that is not always the case.

On Android it’s usually easy to link your native module multiple times.  There’s some protection to not link already-linked modules, but on Android this check fails often.  If we link a native module more than once, the project won’t build. Fixing this requires manually editing the native files to remove the duplicated lines.  Fixing this is usually easy, but is definitely annoying.

On iOS there’s a lot more that can go wrong.  For a long time there was no package manager on iOS.  Cocoapods is a popular third-party tool to fill the void of no manager package manager.  Some native modules will have additional dependencies and recommend installing these through Cocoapods.  The first time it does this, it creates a pod file for your project and lists the required dependencies there.  The next time it links a native module, the CLI will detect that you have a pod file and link native files there. If those reference React, which they probably do, then an incredibly old version of React will be installed by Cocoapods which causes issues.  At this point, your options are to link manually or to make modifications to your native project so that React will play nicely with Cocoapods.

Enter Autolinking.  On Android, there’s no files to modify anymore.  The build process will check the node_modules folder during build and include the code that it finds there.  iOS works a bit differently. As of 0.60, React Native relies on Cocoapods now. Out of the box you will have a functioning podfile for dependencies to be added to.  Running `pod install` will scan the node_modules folder for dependencies and link them automatically. On both platforms, the process is incredibly easy now.

Autolinking is not completely automatic though.  Any extra steps that needed to be done outside of `react-native link` will still need to be done.

Hermes

React Native performance on Android can be sluggish.  The same React Native code almost always runs faster on iOS than Android.  Facebook has created an open-source JavaScript engine, Hermes, which seeks to vastly improve performance.  Hermes can be used starting with 0.60.4.

Upcoming Features

More features are added to React Native constantly.  There are two new great additions coming in 0.61.

First up is Fast Refresh.  Before 0.61, there are two options for automatically reloading during development.  Live Reload will reload your JavaScript code when changes are detected on the file system.  This is reliable, but it does not keep your app state. This can be frustrating if you are testing something several screens deep. Hot Reload tries to solve that by keeping your state. It is often buggy though, which leads to manual refreshes that defeat the point. Fast Refresh is a replacement to both systems.  

Live and Hot Reload are gone in 0.61, there is only Fast Refresh. The developers are so confident in the performance of Fast Refresh that the old Live Reload option is gone completely.

Additionally, logs will now show in the Metro Bundler.  That is a welcome addition as currently the only way to get logs is debug the JavaScript remotely.  This should remove situations where you want to see logs associated with what just happened, only to discover you weren’t attached to a debugger at the time.

How do you update?

So now that you’re onboard for the update, how do go about doing it with the least amount of pain?  There are two ways to go about it.

1. CLI

The simplest way is with the React Native CLI.  Just run `react-native upgrade` and answer the prompts that follow.  This is a great solution for projects that have little to no native code changes.  If you have native changes, which you probably do, then the CLI is not that useful of a tool.

2. Upgrade Helper

Using the Upgrade Helper web tool is a manual process, but it is the best resource for React Native updates.  It is a must if you have made native code changes. You just select your React Native version, select the React Native version you would like to upgrade to, and press the “Show me how to upgrade!” button.  Review the changes displayed and apply them to your project. At the end you will have a working project on the version you targeted! This process can be tedious, especially if making a big jump such as <0.60 to >=0.60.  However, it allows you to review changes line by line and make any adjustments when you encounter native code that you have modified.

 

Does your app need React Native re-platforming?

Andrew Rumbley

Andrew Rumbley

Senior Mobile Developer

Andrew is a Senior Mobile Developer focused on creating quality user experiences. He is a full stack developer with experience working on every piece of a mobile application from backend APIs to frontend UI. Andrew is passionate about creating high performing native applications. He also has the distinguished mantle of being the longest-tenured developer at Shockoe.

Improving Task Management While Covering Your Rear End

Improving Task Management While Covering Your Rear End

Improving Task Management While Covering Your Rear End

I am awful at a lot of things. Baseball is one of them. Fighting games like Street Fighter is another. The only thing I am awful at that has really bothered me to any extent is my time and project management skills.

When faced with a large project and a list of tasks, I used to not know where to start. I would jump around from screen to screen, working on one thing before the next, then maybe go back to the screen I was working on before because I forgot something. Eventually, I got fed up.

Tired of being so anxious all the time, I took everything bothering me about my misgivings and did away with the excuses. I asked myself, “what would a project manager do?” Here’s how I fixed (some of) my issue, made my life easier and covered my behind by applying our project process to my day-to-day life. It’s only five things, stay with me here.

Find a tool you’re going to use every single day

It doesn’t matter if it’s an app, a notebook, or a series of messages sent by carrier pigeons. As long as you have something that you can refer to when you complete a task, and you know it’s something you will use over and over again, you’re good to go. 

I take notes in an app called Notion, which allows me to make task boards, lay content out differently, add images, edit from anywhere, the list goes on. While it’s not free, the important thing is that it has everything that I need to make a to-do list of sorts. If you’d rather use sticky notes or the same pocket-sized notebook that you’ve been using since college, that’s fine. Whatever works for you. 

I’ve found that the easiest way to change your habits is to slightly tweak the habits you already have. It’s the same idea as picking up around the house as you go along to avoid a larger cleanup process later on. Baby steps. 

What I do:

Every day I come into work, I open Notion. I have everything laid out on a calendar, and can add new pages for each day. I also have each page tagged with the project that it’s related to. If I am working on Valacta and I have a meeting with them, my page can immediately be attached to that project.

For EVERY task, write down the requirements. And then check them. 

When you add a task to your list, make sure you write down or otherwise have a record of the requirements that would go along with that task. Designing a login screen? Write down the fields, text, and any visual assets that need to go into that screen. Need to take out the trash? Jot down each room with a garbage bin and get to work. 

What’s important from this self-created inventory is that you have a detailed record of what was asked. Even better? Now, you can go over that list with someone else and verify that everything written down was accurate, asking questions along the way. In a work environment, you would go over this list with your actual project manager. At home, you could go over the list with your significant other, your roommate, your cat, or just read through it again and check for yourself. 

What I do:

If you’ve used Trello, JIRA, or other project-based task management software tools, this might seem familiar. I start with a task board that has three simple columns: Not Started, In Progress, and Completed. Whenever I have a new request, I create a task card with a detailed description in the Not Started column, to be moved forward later. 

Ah, the feeling of crossing something off of your list. Of moving the ticket to the Completed column. Of that distinctive checkmark motion. Very few things are as satisfying as completing a task. One of those few things just so happens to be crossing that task off of a list. Make sure you do so and take a moment to pat yourself on the back. No, really. Do it. It’ll feel great.

Something change? Back to the task board

Whenever something you’ve completed has been marked as complete, and then it gets sent back to you with edits or new requirements, that’s perfectly fine! No one gets every single thing perfect every single time (if you do, you aren’t reading this blog).

A trick I do to track changes on a task card is to add all the client feedback as a comment. Unlike descriptions, adding a comment will keep track of when they were submitted. With edits to an established task, knowing exactly when something was submitted is more important than I have space to type here. You want to be able to turn back time and see what comments were made by whom and why in case there’s ever a question of “why did you do this?” It’s happened before. It will happen again. Being ready for it is the best defense you can ask for.

Trust the process. When that doesn’t work, iterate on the process. Never beat yourself up

Like I said before, no one gets every single thing perfect every single time. Moreso when it’s the first time you’re trying a new process or tactic. Not everything will go smoothly. Heck, maybe everything will crash and burn. 

As hard as it may be, it is worth it to step back and take a look at what worked, what didn’t work, and what you can do to fix it all the next go-round. If something I said doesn’t fit your style, but it inspired another idea? GREAT! Take that idea, run with it, and share it with the rest of the world. Why do you think I’m here writing this and you’re there, reading it? 

Nelson Johnson

Nelson Johnson

Experience Designer

Experience Designer Nelson W Johnson can often be found spending his time drawing, hosting a gaming podcast & hanging with his cats. With a passion for technology and an obsession with floral shirts, he loves finding design solutions to users’ technological woes.

Sharing Data Components between React and React Native

Sharing Data Components between React and React Native

Sharing Data Components between React and React Native

When building a solution with use cases that span desktop and mobile, React is a go-to choice. It can be used to create responsive web apps that render beautifully across form factors. Certain projects, however, call for a more native app solution on mobile. React Native is one of our favorite ways to build apps, and it offers some unique advantages when paired with a React web app with overlapping functionality.
Some pieces of an app can easily be shared, like libraries or Redux action types and reducers. Basically any file with a dependency on pure React and Javascript can be imported on both sides.

One of the areas where I really wanted to get reuse was components. React and React Native use a different set of built-in UI components, so in general UI does not transfer cleanly. Not every component renders their own UI however, sometimes they just render children.

Enter the data component. I use this term to refer to a component which knows what data its children need and how to get it, so that they can just worry about rendering it visually. I will lay out a simple example of how these shared components can be inserted into the render tree to quicken development and keep two solutions in sync. By writing data components as you go on one platform, you then have a strong base to build your UI components on when you implement the other.

git submodule add <git clone URL> shared

 

For more information on git submodules, see the official documentation.

Data Components

For this example we will have a single screen which renders two pieces of information: a string identifying the current platform, and, after a delay, a paragraph of Lorem Ipsum fetched from an API. I am using Bacon Ipsum since their API has CORS enabled which will come in handy on web.

Here is the straightforward version without data components in React Native:

export default class LoremIpsumScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: 'Loading...'
    };
  }

  async componentDidMount() {
    await delay(3000);
    let newTextResponse = await fetch('https://baconipsum.com/api/?type=meat-and-filler&sentences=3&format=text&start-with-lorem=1');
    let newText = await newTextResponse.text();
    this.setState({ text: newText });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.header}>MOBILE VERSION</Text>
        <Text style={styles.text}>{this.state.text}</Text>
      </View>
    );
  }
}

Styling definitions omitted. Arbitrary delay is used for demonstration purposes. Full code available here

Abstracting Data Interactions

Looking at the implementation of LoremIpsumScreen, the only piece that could not be used directly in React on web is the JSX. We can do some refactoring to move the platform agnostic pieces into a new component called LoremIpsumDataand place it in shared/DataComponents.js.

export class LoremIpsumData extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: 'Loading...'
    };
  }

  async componentDidMount() {
    await delay(3000);
    let newTextResponse = await fetch('https://baconipsum.com/api/?type=meat-and-filler&sentences=3&format=text&start-with-lorem=1');
    let newText = await newTextResponse.text();
    this.setState({ text: newText });
  }

  render() {
    return this.props.render({text : this.state.text});
  }
}

 

The key here is the use of render props seen with the call to this.props.render. From React’s documentation:

A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.

Now we have a component that can fetch and manage data, and will accept any UI passed into it!

We add one helper function to shared/DataComponents.js while we’re here. This allows us to easily define a render prop function that can pass args through to children as props. We’ll see it in action in a moment.

export function renderPlatformUI(PlatformChild) {
  return (childProps) => {
    return (<PlatformChild {...childProps} />);
  }
}

 

Back in our React Native code, we can now write a platform specific UI component that can rely on receiving the text it should display through props (this.props.text).

class LoremIpsumUI extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.header}>MOBILE VERSION</Text>
        <Text style={styles.text}>{this.props.text}</Text>
      </View>
    );
  }
}

 

We add a little boilerplate to connect the data component with this UI component, using the helper we saw before to generate the render prop function with our LoremIpsumUI.

import { renderPlatformUI, LoremIpsumData } from './shared/DataComponents.js';

export default class LoremIpsumScreen extends Component {
  render() {
    return (
      <LoremIpsumData render={renderPlatformUI(LoremIpsumUI)} />
    );
  }
}

With that, our React Native implementation is complete and data management is abstracted to a component ready to be used in our React web app as well.

Full code available here

 

Reuse on Web

First, push up your submodule from the React Native workspace and pull the updates in your React workspace. Now all we have to do is write a new platform specific LoremIpsumUI component, and hook it up to the data component we already defined.

import React, { Component } from 'react';
    import './App.css';
    import { renderPlatformUI, LoremIpsumData } from './shared/DataComponents.js';
    
    export default function App() {
    	return <LoremIpsumData render={renderPlatformUI(LoremIpsumUI)} />;
    }
    
    class LoremIpsumUI extends Component {
    	render() {
    		return (
    			<div className="App">
    				<header className="App-header">
    					<h1>WEB VERSION</h1>
    					<p>{this.props.text}</p>
    				</header>
    			</div>
    		);
    	}
    }

 

And there we go, a functional React web app version of our React Native app written with zero additional data handling.

Full code available here

This use case is simple, but it is a glimpse into a powerful design pattern for components. Data components could, and probably will, deal with significantly more complex interactions like subscribing to state updates if you are using Redux.

Michael Peter

Michael Peter

Michael is a developer specializing in cross-platform mobile frameworks and Node.js backends. He attended Virginia tech where, after an initial stint studying Mechanical Engineering, he graduated from the Computer Science program due to discovering a passion for problem solving in the more abstract world of programming. He has been with Shockoe for three years, during which he has built applications in Titanium, React Native, and Flutter.

How Mobile is Changing Warehouse Communication

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.

The Impact of Progressive Web Apps on Mobile Customer Engagement

The Impact of Progressive Web Apps on Mobile Customer Engagement

The Impact of Progressive Web Apps on Mobile Customer Engagement

App experiences are very different today depending on whether or not users are accessing the app on a web browser or on their devices; users expect different interactions when coming from Google Chrome or the Apple App Store. With Progressive Web Apps, or PWAs, businesses are hoping to start to blend these expectations in an effort to focus on accessibility and a lower cost of entry.

A Place for PWAs

With global businesses, the expectations of what network speed users have access to for consuming their content with can be increasingly diverse; with users in Qatar, the fastest country by average, having a 62 Mbps average download speed and users in India, a country with a massive amount of phone users, averaging around 9 Mbps. This means that businesses that spend marketing and design dollars are tailoring to an audience that will not accept a mobile experience taking over 3 seconds to load, potentially losing users in the time it takes to load.

PWAs take this challenge head-on by being more lightweight, improved and advanced caching, and generally focusing on performance over an expansive app experience. PWAs are both a result of mobile-focused web design and a new output of leveraging important new processes that allows for an experience closer to a native app.

What is the PWA experience?

When a user accesses a website that is capable of delivering a PWA, the user will be asked if they’d like to add the site to their device’s homepage. Once the site has been added to their device, it will appear via an icon like any other native application, and, when opened, will not use a browser bar or any other menus you would expect from a browser. From here, a user can interact with the PWA as they would a native app, essentially not showing a difference between the mobile site and the native app. Once installed, businesses can still offer user-tailored content, send push notifications to the user, and track their activity via analytics tools. Also, unlike when using a mobile browser, PWAs can offer experiences offline by caching content and interactions, similar to if a user opened a native app when offline.

Who has made PWAs?

Social media and e-commerce easily have experienced the bulk of success with adding PWAs because of their ability to foster offline engagement which is often a limitation of native applications. Because native applications are limited by their connectivity for access, PWAs are able to serve customers who are unable to access native applications and increase retail sales due to brand loyalty, recognition, and access to the e-commerce provided in the native application. Some examples of successes in Progressive Web Applications include Starbucks, Alibaba, Lancome, Net-a-Porter, Lilly Pulitzer, and West Elm.

The Benefits of a PWA

The benefits of building a progressive web application hinge on spreading access to content as widely as possible. That’s why the retail space has seen so much success: coupling brand loyalty with wider access means more sales. Ultimately, building a PWA in conjunction with a native application widens the access to e-commerce and communication, broadens customer engagement and brand loyalty, and assuages connectivity concerns from a greater audience. Further, updates can be pushed automatically without updating through an app store, which means you can make updates to your user experience without having to wait for a full app store approval and release which is crucial around your brand campaigns. A progressive web application frees up space on a a mobile or tablet device, and, with being so lightweight, they are fast and responsive as well.

The Drawbacks of a PWA

PWAs don’t come without their limitations, however. For PWA success, a certain degree of brand recognition and loyalty along with cross-platform engagement is necessary. Further, Android devices really only have the capabilities of saving a PWA to the home screen while iOS is limited to the responsiveness of Safari.

Is a PWA for you?

Ultimately, PWAs are best suited for the retail space where brand recognition and loyalty is already present and there is a degree of omni-channel presence and customer engagement. A quick survey of the brands with successful and profitable PWAs would indicate just that: they have some sort of native application, an e-commerce presence, and wide brand recognition.

Ellen Weaver

Ellen Weaver

Strategic Account Manager

Ellen Begley Weaver is a Strategic Account Manager who shirked the traditional career path after law school and leapt fearlessly into the tech industry. A barred attorney and a Georgia Peach, she enjoys the challenges that come with shaking up industry precedent and embracing what people really want or need through conversation. While not working, she enjoys hiking and swimming in the James River with her husband and two dogs, pouring a pint for friends at Buskey Cider, and swimming on an amateur synchronized swimming team called the River City Magnolias.

Product Management in App-griculture

Product Management in App-griculture

Back in the day, when life was simple and technology was limited, dairy producers would keep track of their herds by using journals or notebooks. As time as passed, adoption of computer software increased where data could be entered, but only after jotting it down on the farm first. Nowadays, there is mobile technology everywhere and there are apps out there to support all kinds of activities – including dairy farming.

How convenient is it for a dairy producer to take his phone or tablet anywhere to keep track of his/her herd? Well, to keep to a one-word answer – “extremely”. Not only is it a time savings by not having to log something on a piece of paper and go back and enter it onto a computer, it’s the convenience of having the information with you all the time.

Here at Shockoe, we have had the opportunity to work closely with a couple of clients to build apps for the dairy farming community. As part of the process, we had conversations with the future users of the app (dairy producers, veterinarians, and animal technicians) to learn how they use their existing software and what was missing.

As we traverse through the mobile development lifecycle with our clients, our product management practice focused on a few key main areas to ensure we meet our client’s needs:

1. User Experience

If users open the mobile app and don’t feel like there is any value for it, they will quickly delete and continue to use something else. The app needs to have the functionality to allow the users to accomplish their tasks, but also be structured in a way for easy navigation and reliable performance.

2. Simplicity

Albert Einstein: “Everything should be made as simple as possible, but not simpler.” This and the principle, KISS, that has been around since the mid-1900’says it all. If a mobile app is not intuitive and easy to use, it will not be used – even if it on a device being carried around all day.

3. Security

If data or user information is not protected, the app is a huge failure. Users need to know the mobile application they are using is safe to use. This means securing the code, securing the device, securing the data, and securing the transactions.

4. Analytics

What is the most common functionality used in the mobile application? Which functionality is the least used by users? How long are the sessions for a user? Answers to these questions and feedback from the users, help determine what enhancements can be made for future versions. It just doesn’t stop after the mobile is pushed out to the stores, monitoring and evaluating needs to occur.

Dairy producers, vets, and technicians need the ability to access information about their animals, update data, and also perform various functions throughout the day. Following these key elements and working closely with the users, allows us at Shockoe to deliver a high quality mobile experience.

Beginner’s Titanium: UI Layouts Using Nested Views

Making user interface elements display how you want them is not always a simple task. The Titanium 2.0 SDK changed the way the ‘auto’ sizing keyword is handled. These changes may require some existing code to be modified in order to produce the same output. So, we’ve put together a simple iOS example to show the use of nested views with the new values Ti.UI.SIZE and Ti.UI.FILL.

We want to make a layout that looks like this:

 

First, let’s create our window.


var window = Ti.UI.createWindow({
    backgroundColor:'lightgray',
});

Next, we want to create an outer view container for our layout and add it to our window. This container’s layout property is set to horizontal so that our content will be added from left to right.


var outerView = Ti.UI.createView({
backgroundColor: 'blue',
layout: 'horizontal',
height: 100,
width: 300,
});

window.add(outerView);

We’ll create an ImageView, set its photo, and add it to our outer view container.


var photo = Ti.UI.createImageView({
width: 7
height: Ti.UI.FILL,
borderColor: '#444',
borderWidth: 2,
borderRadius: 2,
backgroundColor: 'white',
});

photo.image = 'http://www.shockoe.com/media/shockoelogo_web.png';

outerView.add(photo);

Since we don’t want our labels to go directly next to the photo, we need a small buffer. We’ll create a view to use as a buffer and add it to our outer view container.


//5 pixel buffer between photo and nestedViewContainer

outerView.add(Ti.UI.createView({

width: 15,

height: Ti.UI.FILL,

backgroundColor: 'green',

}));

We want a container with a vertical layout so we can add three rows of labels from top to bottom. We create another nested view and use it as a container for labels.


var nestedViewContainer = Ti.UI.createView({
layout: 'vertical',
height: Ti.UI.FILL, //fill remaining height of parent
width: Ti.UI.FILL, //fil remaining width of parent
backgroundColor: 'yellow',
});

We create our Labels and add them to the nested view container.


var topLabel = Ti.UI.createLabel({
text: 'I am topLabel',
width: Ti.UI.SIZE,
height: '50%', //make the top label taller than the others
backgroundColor: 'cyan'
});

var middleLabel = Ti.UI.createLabel({
text: 'I am middleLabel',
height: Ti.UI.SIZE,
width: Ti.UI.FILL,//make this label as wide as its parent view
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,//center the text in the width of the label
backgroundColor: 'red'
});

var bottomLabel = Ti.UI.createLabel({
text: 'I am bottomLabel',
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
backgroundColor: 'purple'
});

//add our labels to the nestedViewContainer
nestedViewContainer.add(topLabel);
nestedViewContainer.add(middleLabel);
nestedViewContainer.add(bottomLabel);

Finally, we add our nested view container to the outer view container and open our window.


//add our nestedViewContainer to the outerView

outerView.add(nestedViewContainer);

//open our window

window.open();

The UI views are colored to indicate the output of each element.  Comparing the code to the output should provide some idea of how the properties affect the outcome.  Please let us know in the comments section if this example was helpful!