24
Mon, Jun
3 New Articles

What Does Your Mobile App Really Need?

Development Tools / Utilities
Typography
  • Smaller Small Medium Big Bigger
  • Default Helvetica Segoe Georgia Times

Let’s consider the necessities, starting with data.

 

The boss is calling (again!). She's holding your feet to the fire to get that mobile web app out the door, so it's time to roll up your sleeves and get to work. Where to start? Why not start with the list of requirements?


Application requirements:

  • Real-time access to IBM i data and local storage when no mobile connectivity is available
  • Ability to take pictures, store them on the device, and upload them
  • Ability to retrieve and store geolocation information
  • Ability to record audio for taking "audio notes"

 

We might as well get the spinach eaten before the ice cream and deal with the "bulk" of the application: getting data. We have two things to consider here:

 

  1. Getting data from DB2 on IBM i
  2. Having access to that data when there isn't a connection available

 

Getting Data from DB2 on IBM i

Requirement 1 really isn't all that difficult. Since you're going to build an HTML5 web application rather than a native application, you'll be relying primarily on AJAX calls to a program on your IBM i to return data to your app. But, without a connection, how will you handle the display of the web pages and retrieval of the data? The answer is local storage and a cache manifest.

 

So let's organize this a bit. First, if we're going to get data from the IBM i, the simplest solution in the web world is to access that data asynchronously rather than using a direct connection. If we use AJAX to make the call, then that will take care of the asynchronous part, but returning the data becomes the next hurdle. We could return the data in any number of ways, but because JSON can be used to render the data as an object in JavaScript, we might as well speak the "local lingo" and use a format that JavaScript can easily use. JSON is an acronym for JavaScript Object Notation. JSON has been around for years and is becoming the standard for data interchange for web applications.

 

There's another advantage to using JSON: It's just a string of text. Text is easy to store and manipulate. It also tends to be more "readable," so diagnosing issues can become quite easy: Just copy it to a text editor and take a look, or use a "linting" service like jsonlint.com that can parse and validate your JSON string. No binary or hex values to decipher! There's yet another advantage as well: local storage, a mechanism present in most modern browsers, can easily store text. So our initial plan is to create programs on our IBM i that retrieve the data and format it as JSON string and return it to our web app, and just to be on the safe side, when we return that JSON data, we'll store it in the browser's local storage.

 

So let's take a look at a JSON string returned by our database record retrieval program on the IBM i. To keep it simple, we'll look at a customer record. A pseudo-coded JSON string might be as shown below.

 

Note: Curly braces ({}) in JavaScript indicate an object, so a customer JSON record might be something like this:

 

{

      "ID": 1,

      "Name": "Acme anvil company",

      "Addr1": "123 East Main Street",

      "City": "Smalltown",

      "State": "TX",

      "Zip": 78787

}

 

But we'll have more than just one customer record and other records as well. How best to store multiple records in a string? An array of course! So our JSON is looking a little more complex as we go:

 

{

''customers'':

[

{customer 1},

{customer 2},

{customer 3},

….

]

}

 

Now we have an object ({}) that contains another object (an array called 'customers' []), which is an array of customer objects. (Hence the initial curly braces and then the "customer" [{},{},{},...}] notation. You should quickly see that this format can be easily extended to contain objects within objects within objects (and can quickly get confusing). So I recommend that you walk before you run and try just a couple of simple records and formats first.

 

How do you store it? It couldn't be simpler. Use the localStorage object in the browser. Just like JSON, local storage consists of a name:value pair. So if we were going to create a local storage object to store our customer data, we would first create the data and then assign it to local storage. Again, some pseudo-code, shown below.

 

An AJAX call to IBM i returns a JSON (text) object (or a full array of objects):

 

var data =

[

{customer 1},

{customer 2},

{customer 3},

….

]

 

The variable data now contains our array of customer objects, so just assign that to local storage:

 

localStorage.setItem(''customers'':data);

 

Nice! If we need to get the data from local storage, then we can assign it to a variable, like so:

 

var data = localStorage.getItem(''customers'');

 

Now data will contain our array of customer objects!

 

The real work is in managing the data in local storage. You'll need to get proficient at locating, updating, inserting, and deleting array data, but once you have a library of those functions, it will be as easy as calling updateCustomerData and passing in your customer object.

 

Access to IBM i When There Isn't a Connection Available

So we've handled the grunt work of retrieving the data and storing a copy of it locally in case we need it. But how do we know when we need to switch to "local mode"? That's where some network awareness would come in handy. There's a JavaScript library (offline.js) that can do the heavy lifting, or you could just write an error routine in your AJAX call that switches to the local storage repository for data if a call to your IBM i fails. There's a navigator.onLine property that can be monitored but tends to be unreliable, so having a fallback (or two) is helpful when dealing with network connection events.

 

So our logic is this: Whenever we make a round trip to the server for data, we not only retrieve and display the data, but also maintain a local copy of the data in local storage. We can either rely on a strategy of pulling everything we could possibly need into the local database or we could just store the items we retrieve, essentially caching them for future use. Should we encounter a network interruption, we can temporarily grab data locally until the network connection is available.

 

Caching Web Pages

With the data access issues resolved, we still have one remaining issue: If we don't have access to the server for data, we also don't have access to the server to serve our web pages to us. How do we handle that? The solution is to use a manifest file to tell the browser to cache the pages and resources locally. This is similar to the way that browsers cache pages and web artifacts but is more explicit in holding those resources locally. When offline, a user's browser can't reach the server to get any files that might be needed. You can't rely on the browser's cache to include the needed resources because the cache could have been cleared in a variety of ways. This is why you need to define explicitly which files must be stored so that all needed files and resources are available when the user goes offline: HTML, CSS, JavaScript files, and other resources, such as images and even video.

 

The manifest file is specified in the HTML form and contains the list of files that should be explicitly cached for offline use by your app.

 

<html manifest="cache.manifest">

 

Here's an example of the contents of a manifest file:

 

CACHE MANIFEST

# version 1

css/main.css

css/fonts.css

img/images.gif

js/main.js

index.html

 

The manifest file can be any name and should be downloaded from the server with a mime type of "text/cache-manifest." CACHE MANIFEST needs to be the first line of the file. It's a good idea to include a version number so that the files in the cache can be updated as needed. Even though the "version 1" is a comment, if you change the manifest file by changing the comment to # version 1.01, just the change alone is enough to force a refresh of the cached contents. So, all you need to do is to introduce any change to the manifest file to force all the referenced files to refresh. Using a "version" number and updating it is a great way to track changes and force updates.

 

Now you have completed the first requirement and your web app will look very "native" with the local storage and local caching of the data and the web resources.

 

Your next challenge will be the ability to take pictures with a mobile device, store them locally, and push them to your IBM i. Yet another item to get done before the boss calls again.

 

Peter Helgren

Peter Helgren is programmer/team lead at Bible Study Fellowship International. Pete is an experienced programmer in the ILE RPG, PHP, Java, Ruby/Rails, C++, and C# languages with more than 25 years of system 3X/AS400/iSeries/IBM i experience. He holds certifications as a GIAC certified Secure Software Programmer-Java and as an MCSE. He is currently executive vice president on the COMMON Board of Directors and is active on several COMMON committees. His passion has always been in system integration, and he focuses on open-source applications and integration activities on IBM i. Pete is a speaker/trainer in RPG modernization, open-source integration, mobile application development, Java programming, and PHP and actively blogs at petesworkshop.com.


MC Press books written by Peter Helgren available now on the MC Press Bookstore.

Open Source Starter Guide for IBM i Developers Open Source Starter Guide for IBM i Developers
Check out this practical introduction to open-source development options, including XMLSERVICE, Ruby/Rails, PHP, Python, Node.js, and Apache Tomcat.
List Price $59.95

Now On Sale

BLOG COMMENTS POWERED BY DISQUS

LATEST COMMENTS

Support MC Press Online

$0.00 Raised:
$

Book Reviews

Resource Center

  • SB Profound WC 5536 Have you been wondering about Node.js? Our free Node.js Webinar Series takes you from total beginner to creating a fully-functional IBM i Node.js business application. You can find Part 1 here. In Part 2 of our free Node.js Webinar Series, Brian May teaches you the different tooling options available for writing code, debugging, and using Git for version control. Brian will briefly discuss the different tools available, and demonstrate his preferred setup for Node development on IBM i or any platform. Attend this webinar to learn:

  • SB Profound WP 5539More than ever, there is a demand for IT to deliver innovation. Your IBM i has been an essential part of your business operations for years. However, your organization may struggle to maintain the current system and implement new projects. The thousands of customers we've worked with and surveyed state that expectations regarding the digital footprint and vision of the company are not aligned with the current IT environment.

  • SB HelpSystems ROBOT Generic IBM announced the E1080 servers using the latest Power10 processor in September 2021. The most powerful processor from IBM to date, Power10 is designed to handle the demands of doing business in today’s high-tech atmosphere, including running cloud applications, supporting big data, and managing AI workloads. But what does Power10 mean for your data center? In this recorded webinar, IBMers Dan Sundt and Dylan Boday join IBM Power Champion Tom Huntington for a discussion on why Power10 technology is the right strategic investment if you run IBM i, AIX, or Linux. In this action-packed hour, Tom will share trends from the IBM i and AIX user communities while Dan and Dylan dive into the tech specs for key hardware, including:

  • Magic MarkTRY the one package that solves all your document design and printing challenges on all your platforms. Produce bar code labels, electronic forms, ad hoc reports, and RFID tags – without programming! MarkMagic is the only document design and print solution that combines report writing, WYSIWYG label and forms design, and conditional printing in one integrated product. Make sure your data survives when catastrophe hits. Request your trial now!  Request Now.

  • SB HelpSystems ROBOT GenericForms of ransomware has been around for over 30 years, and with more and more organizations suffering attacks each year, it continues to endure. What has made ransomware such a durable threat and what is the best way to combat it? In order to prevent ransomware, organizations must first understand how it works.

  • SB HelpSystems ROBOT GenericIT security is a top priority for businesses around the world, but most IBM i pros don’t know where to begin—and most cybersecurity experts don’t know IBM i. In this session, Robin Tatam explores the business impact of lax IBM i security, the top vulnerabilities putting IBM i at risk, and the steps you can take to protect your organization. If you’re looking to avoid unexpected downtime or corrupted data, you don’t want to miss this session.

  • SB HelpSystems ROBOT GenericCan you trust all of your users all of the time? A typical end user receives 16 malicious emails each month, but only 17 percent of these phishing campaigns are reported to IT. Once an attack is underway, most organizations won’t discover the breach until six months later. A staggering amount of damage can occur in that time. Despite these risks, 93 percent of organizations are leaving their IBM i systems vulnerable to cybercrime. In this on-demand webinar, IBM i security experts Robin Tatam and Sandi Moore will reveal:

  • FORTRA Disaster protection is vital to every business. Yet, it often consists of patched together procedures that are prone to error. From automatic backups to data encryption to media management, Robot automates the routine (yet often complex) tasks of iSeries backup and recovery, saving you time and money and making the process safer and more reliable. Automate your backups with the Robot Backup and Recovery Solution. Key features include:

  • FORTRAManaging messages on your IBM i can be more than a full-time job if you have to do it manually. Messages need a response and resources must be monitored—often over multiple systems and across platforms. How can you be sure you won’t miss important system events? Automate your message center with the Robot Message Management Solution. Key features include:

  • FORTRAThe thought of printing, distributing, and storing iSeries reports manually may reduce you to tears. Paper and labor costs associated with report generation can spiral out of control. Mountains of paper threaten to swamp your files. Robot automates report bursting, distribution, bundling, and archiving, and offers secure, selective online report viewing. Manage your reports with the Robot Report Management Solution. Key features include:

  • FORTRAFor over 30 years, Robot has been a leader in systems management for IBM i. With batch job creation and scheduling at its core, the Robot Job Scheduling Solution reduces the opportunity for human error and helps you maintain service levels, automating even the biggest, most complex runbooks. Manage your job schedule with the Robot Job Scheduling Solution. Key features include:

  • LANSA Business users want new applications now. Market and regulatory pressures require faster application updates and delivery into production. Your IBM i developers may be approaching retirement, and you see no sure way to fill their positions with experienced developers. In addition, you may be caught between maintaining your existing applications and the uncertainty of moving to something new.

  • LANSAWhen it comes to creating your business applications, there are hundreds of coding platforms and programming languages to choose from. These options range from very complex traditional programming languages to Low-Code platforms where sometimes no traditional coding experience is needed. Download our whitepaper, The Power of Writing Code in a Low-Code Solution, and:

  • LANSASupply Chain is becoming increasingly complex and unpredictable. From raw materials for manufacturing to food supply chains, the journey from source to production to delivery to consumers is marred with inefficiencies, manual processes, shortages, recalls, counterfeits, and scandals. In this webinar, we discuss how:

  • The MC Resource Centers bring you the widest selection of white papers, trial software, and on-demand webcasts for you to choose from. >> Review the list of White Papers, Trial Software or On-Demand Webcast at the MC Press Resource Center. >> Add the items to yru Cart and complet he checkout process and submit

  • Profound Logic Have you been wondering about Node.js? Our free Node.js Webinar Series takes you from total beginner to creating a fully-functional IBM i Node.js business application.

  • SB Profound WC 5536Join us for this hour-long webcast that will explore:

  • Fortra IT managers hoping to find new IBM i talent are discovering that the pool of experienced RPG programmers and operators or administrators with intimate knowledge of the operating system and the applications that run on it is small. This begs the question: How will you manage the platform that supports such a big part of your business? This guide offers strategies and software suggestions to help you plan IT staffing and resources and smooth the transition after your AS/400 talent retires. Read on to learn: