13
Wed, Nov
5 New Articles

Mobile App Development: You Ought to Take a Picture

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

That Queen song pops into your head—“Under Pressure”—as you begin to sweat the details on the next phase of your mobile web application: adding photo capture to your web app.

 

Just to start a total body sweat, you think back on your original design requirements and what you told the boss you could do:

  • 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”

 

Gads, how are you going to pull this off? The one thing that you have going for you is that the company issues Android mobile devices, so you won't have to deal with the many limitations of an Apple device when it comes to web apps storing files on the local mobile device. So one hurdle of mobile cross-device compatibility, file storage, won't be something that you need to worry about.

 

You also can leverage local storage, as you did when you accomplished your first phase of the web app. Since you don't have an option for “blob” storage, and you’re not sure you would want use it if you did, you take the following approach:

 

  1. Grab the picture.
  2. Store the picture as a BASE64 encoded string (we love strings and know how to use 'em!)
  3. Stage the picture (as string) for upload to the IBM i.

 

Let's tackle them one at a time.

 

Grab a Picture

Browser capabilities have been rapidly advancing, and access to local device resources has been rapidly improving as well. Web RTC (Real Time Communications) has been around for five years, but it has been rapidly evolving and thus adoption has been slow. But it has been slowly making its way into browser versions to the point where it is now “safe” to use it in production (and, please don't tell me you are still using IE6...). The latest version of Chrome stingily only allows access from secure locations, so testing on a non-secure test server is out with Chrome. Firefox is more generous.

 

There are a couple of changes being implemented currently. The navigator.getUserMedia method and its browser-specific derivatives are being deprecated in favor of the navigator.mediaDevices.getUserMedia method. They function in a similar manner. Both will prompt the user for permission to access the camera, for example. But the navigator.mediaDevices.getUserMedia returns a JavaScript Promise object, which makes avoiding “callback hell” easier.

 

An example would be:

 

//asking for audio and video access

var p = navigator.mediaDevices.getUserMedia({ audio: true, video: true });

 

p.then(function(mediaStream) {

var video = document.querySelector('video');

video.src = window.URL.createObjectURL(mediaStream);

video.onloadedmetadata = function(e) {

   // Do something here.

};

});

 

JavaScript Promises are cool, and they’re worth exploring when it comes to asynchronous calls. Basically, the code says: “If the call is successful, then....do something.”

 

The method above or a method that uses something like below both return a stream from the camera.

 

         var media = navigator.getUserMedia(constraints, function(stream){

               // URL Object is different in WebKit
               var url = window.URL || window.webkitURL;

               // create the url and set the source of the video element
               video.src = url ? url.createObjectURL(stream) : stream;

               // Start the video
               video.play();
               videoPlaying = true;

}

 

The best way to know (and show) this data is to display it in a canvas object in your HTML. The code is very simple, and there are examples scattered all over the Internet. I borrowed heavily from here and also made use of code found here. Both of those examples show how drop-dead simple it is to view the stream from a web cam and capture a snapshot.

 

But we have one more step we need to add to integrate it into our solution: We need to store the photo!

 

Store It as a String

On the face of it, I thought I might have some complexities to deal with when it came to storing the photo. If I store the image file on the mobile device, I would also need to keep track of the location and name of the file so that it could be stored, retrieved, viewed, and transferred to the IBM i. That would mean a couple of I/Os, and there would some data that I would need to keep in sync: the file location and name always has to match where the file was stored and what the file was named. You get those two things out of whack and you basically “lost” your photo. What simplified the process was the canvas object has a method: toDataURL(). This method of the canvas object is one that converts the canvas drawing into a 64-bit encoded png URL. You can also pass 'image/jpeg' as the first parameter and save the image as a jpeg. The BASE64 encoding is a string representation of the binary image. And the encoding is small, even for a moderately sized image. And we already have a great format for our text data (JSON). So the simple approach just means we store the BASE64 string with a value (photo name perhaps) and stuff it into the local storage object in our browser.

 

But how do we retrieve and display the photo? Reverse the process! Retrieve the BASE64 string from local storage, and then set the “src” attribute of the image tag where you want the photo to display. Done!

 

We already sorted out the synchronization of data between the IBM i and the mobile device in our first task (think JSON and AJAX), so we just add one more object to our synchronization routine. Nothing could be simpler than storing strings in a DB2 file on IBM i.

 

Breathing a sigh of relief, you crank up Queen's “Hot Space” album and kick back. No pressure here!

 

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

$

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: