Skip to main content
Redhat Developers  Logo
  • Products

    Featured

    • Red Hat Enterprise Linux
      Red Hat Enterprise Linux Icon
    • Red Hat OpenShift AI
      Red Hat OpenShift AI
    • Red Hat Enterprise Linux AI
      Linux icon inside of a brain
    • Image mode for Red Hat Enterprise Linux
      RHEL image mode
    • Red Hat OpenShift
      Openshift icon
    • Red Hat Ansible Automation Platform
      Ansible icon
    • Red Hat Developer Hub
      Developer Hub
    • View All Red Hat Products
    • Linux

      • Red Hat Enterprise Linux
      • Image mode for Red Hat Enterprise Linux
      • Red Hat Universal Base Images (UBI)
    • Java runtimes & frameworks

      • JBoss Enterprise Application Platform
      • Red Hat build of OpenJDK
    • Kubernetes

      • Red Hat OpenShift
      • Microsoft Azure Red Hat OpenShift
      • Red Hat OpenShift Virtualization
      • Red Hat OpenShift Lightspeed
    • Integration & App Connectivity

      • Red Hat Build of Apache Camel
      • Red Hat Service Interconnect
      • Red Hat Connectivity Link
    • AI/ML

      • Red Hat OpenShift AI
      • Red Hat Enterprise Linux AI
    • Automation

      • Red Hat Ansible Automation Platform
      • Red Hat Ansible Lightspeed
    • Developer tools

      • Red Hat Trusted Software Supply Chain
      • Podman Desktop
      • Red Hat OpenShift Dev Spaces
    • Developer Sandbox

      Developer Sandbox
      Try Red Hat products and technologies without setup or configuration fees for 30 days with this shared Openshift and Kubernetes cluster.
    • Try at no cost
  • Technologies

    Featured

    • AI/ML
      AI/ML Icon
    • Linux
      Linux Icon
    • Kubernetes
      Cloud icon
    • Automation
      Automation Icon showing arrows moving in a circle around a gear
    • View All Technologies
    • Programming Languages & Frameworks

      • Java
      • Python
      • JavaScript
    • System Design & Architecture

      • Red Hat architecture and design patterns
      • Microservices
      • Event-Driven Architecture
      • Databases
    • Developer Productivity

      • Developer productivity
      • Developer Tools
      • GitOps
    • Secure Development & Architectures

      • Security
      • Secure coding
    • Platform Engineering

      • DevOps
      • DevSecOps
      • Ansible automation for applications and services
    • Automated Data Processing

      • AI/ML
      • Data Science
      • Apache Kafka on Kubernetes
      • View All Technologies
    • Start exploring in the Developer Sandbox for free

      sandbox graphic
      Try Red Hat's products and technologies without setup or configuration.
    • Try at no cost
  • Learn

    Featured

    • Kubernetes & Cloud Native
      Openshift icon
    • Linux
      Rhel icon
    • Automation
      Ansible cloud icon
    • Java
      Java icon
    • AI/ML
      AI/ML Icon
    • View All Learning Resources

    E-Books

    • GitOps Cookbook
    • Podman in Action
    • Kubernetes Operators
    • The Path to GitOps
    • View All E-books

    Cheat Sheets

    • Linux Commands
    • Bash Commands
    • Git
    • systemd Commands
    • View All Cheat Sheets

    Documentation

    • API Catalog
    • Product Documentation
    • Legacy Documentation
    • Red Hat Learning

      Learning image
      Boost your technical skills to expert-level with the help of interactive lessons offered by various Red Hat Learning programs.
    • Explore Red Hat Learning
  • Developer Sandbox

    Developer Sandbox

    • Access Red Hat’s products and technologies without setup or configuration, and start developing quicker than ever before with our new, no-cost sandbox environments.
    • Explore Developer Sandbox

    Featured Developer Sandbox activities

    • Get started with your Developer Sandbox
    • OpenShift virtualization and application modernization using the Developer Sandbox
    • Explore all Developer Sandbox activities

    Ready to start developing apps?

    • Try at no cost
  • Blog
  • Events
  • Videos

Apps 101: An Absolute Beginner's Guide to building a Mobile App

February 17, 2016
Cian Clarke
Related topics:
Java
Related products:
Developer Tools

Share:

    Building applications can be a laborious process. Sourcing work to bespoke app development studios is expensive, and there's often a large backlog of applications built up within a business needing development. While there's no magic bullet solution to clearing this backlog, there are tools that can help.

    In today's post, we're going to look at building a mobile application on the Red Hat Mobile Application Platform as a complete beginner. Since mobile developers are an increasingly rare commodity, this post serves as an introduction to the concepts developers might need to re-skill as mobile developers. Hopefully, we'll also de-mystify the process of building a simple app.

    "Demand for Enterprise Mobile Apps Will Outstrip Available Development Capacity Five to One"
    Gartner press release, June 2015 [1]

     

    We're going to only use tools in our web browser to write code, and we're going to start out with a template application.
    The skill level of this post is aimed at absolute beginners. Depending on your skill level, you may want to just skip to the code snippets. We will assume some prerequisites, however.

    1. A modern web browser - Chrome or Safari are best since these best replicate the browsers in modern smartphones.
    2. Some experience with HTML and JavaScript. We're going to keep things real simple - having just seen some code before might be enough :-)

    What is a Cordova App?

    There are many approaches to mobile application development. Two of the most popular are to build Native and Hybrid applications.
    A native application means an app which is written in the programming language the platform vendor provides as part of its toolkit for building apps. For Android, this is Java. For iOS, this is Objective C (and also Swift). For Windows Phone, this is .NET.
    This disparity of programming languages is a real problem, and this introduces the need for a hybrid application. A hybrid application uses the same technologies used in building a website, something every platform understands. One of the tools which make building hybrid apps easy is called Cordova, and we'll use this today within the app platform.

    Create the Project

    To get started with this tutorial, you'll need an account on the Red Hat Mobile Application Platform. If you don't already have one, you can sign up for free at https://openshift.feedhenry.com. Once logged in, we're going to create a new project.

    1. We're going to name this project "Barcode Project". Once you've given the project a title, select the "Hello World" project in the listing - it should be the first option.
    2. We don't need to change anything else - click create, and wait for this process to complete.
    3. Once complete, click done.
      In the first column is the mobile client, which we'll be working on today.
      In the middle, we see the cloud app. This is the backend of our project, and we'll use this in part two of this tutorial.

    Let's Get Coding!

    1. Let's open our client application. Click the "Cordova Light App" tile on this project overview page.
    2. Click on the "editor" link on the left. This is the code editor. We see the tree of files contained within our app, and the code editor on the right.
    3. We're going to change the text in the app to explain to our users what it does. Let's open the `www` directory, and edit `index.html`.
    4. First, we'll change the title. Edit the contents of the `h3` tag on lines 15 through 17. Ours looks like this:
      <h3>FeedHenry <small>Barcode Scanner</small></h3>
      
    5. We can also change the paragraph which describes the functionality of the app (line 23), and the text of the button (line 32). The completed `index.html` file is available here.
    6. Now that we've changed the text of the app, we need to change the functionality. First, we'll tell the Red Hat Mobile Application Platform that when building our app, it needs to include this barcode plugin.
    7. When we explicitly tell the platform what plugins to include, it expects us to list every plugin we want to include. First, click on the `www` directory so it's selected in the tree, and navigate to `File` -> `New File`. Call it `config.json`.
      Here's what the barcode scanner part of this file will look like:

       

      {
          "id": "com.phonegap.plugins.barcodescanner",
          "version": "2.0.1",
          "url" : "https://github.com/wildabeast/BarcodeScanner.git"
      }
      

      We can use this format to add any Cordova plugin - but remember, we need to now also specify all the default plugins! We can find these in the product documentation, and combining the two gives us this full list.
      The full contents of the `config.json` file should match this.

    8. With that out of the way, it's time for some JavaScript! In the `www` directory, open the file `hello.js`. If you're not comfortable with writing code, you can copy & paste the finished file from step 13.
    9. The original app binds an event to the big blue button which triggers the code on lines 2 thru 16 every time it's clicked. We're going to modify what happens when the user clicks this button.
    10. First, we want to call the barcode scanner plugin. To do this, we can use the plugin we added earlier, `cordova.plugins.barcodeScanner.scan` - here's how:
          cordova.plugins.barcodeScanner.scan(function (result) {
            // This will print out the barcode number the camera scanner detected
            console.log(result.text);
          });
      
    11. Now that we have the barcode number, we're going to set the value of the text box on the page to be the barcode number. We'll also update our result area with a small loading message. Here's how:
          document.getElementById('hello_to').value = result.text; 
          // recall result.text is from our previous code, the result of calling the barcode scanner.
          document.getElementById('cloudResponse').innerHTML = "Calling Cloud.....";
      
    12. Lastly, we want to call the Cloud App (which we'll build out in part 2) with the number we received from the barcode scanner and do something with the response from calling the cloud app. The `data` we send is a key-value pair, with one property named barcode, containing the numeric result which we retrieved from the camera earlier. Once we get a response back from the server, we'll inject an image tag onto the page with its source set to the image URL the cloud app gives us. We'll also show the name of the product. Here's how:
          $fh.cloud(
              {
                path: 'hello',
                data: {
                  barcode: result.text
                }
              },
              function (res) {
                var product  = res;
                document.getElementById('cloudResponse').innerHTML = "<img src='" + 
                product.imageurl + "'>" + 
                "<p>" + product.productname + "</p>";
              },
              function (code, errorprops, params) {
                alert('An error occured: ' + code + ' : ' + errorprops);
              }
          );
      

       

    13. Now, we combine these three javascript coding steps - you can see the full completed code here.

    Of course, we won't be able to really try this all out until we update our cloud app to look up our barcode number. If you're feeling impatient however you can navigate to your cloud app, and use the editor to edit the hello.js file in the lib directory to look like this file.

    Cheat Sheet

    So you want to skip the steps, and are comfortable in the use of the editor? Just update the contents of these files to the code linked below.

    • www/hello.js
    • www/config.json (new file)
    • www/index.html

    Video Walkthrough

    Summary

    In this tutorial, we've built an application which makes use of a Cordova plugin to reach back into "native" code, that is, the functionality supplied by the device vendor. In this case, the native code captures a barcode from the camera. Our application on the device then sends a message to a microservice running in the mobile cloud containing the barcode number.
    In part two, we're going to change the Node.js microservice to take this barcode number and reach out to a third party service to find out more about that product.

    [1] http://www.gartner.com/newsroom/id/3076817

    @cianclarke is a Software Engineer with Red Hat Mobile. Primarily focused on the mobile-backend-as-a-service space, Cian is responsible for many of Red Hat's mBaaS developer features.

    Last updated: February 7, 2024

    Recent Posts

    • Meet the Red Hat Node.js team at PowerUP 2025

    • How to use pipelines for AI/ML automation at the edge

    • What's new in network observability 1.8

    • LLM Compressor: Optimize LLMs for low-latency deployments

    • How to set up NVIDIA NIM on Red Hat OpenShift AI

    Red Hat Developers logo LinkedIn YouTube Twitter Facebook

    Products

    • Red Hat Enterprise Linux
    • Red Hat OpenShift
    • Red Hat Ansible Automation Platform

    Build

    • Developer Sandbox
    • Developer Tools
    • Interactive Tutorials
    • API Catalog

    Quicklinks

    • Learning Resources
    • E-books
    • Cheat Sheets
    • Blog
    • Events
    • Newsletter

    Communicate

    • About us
    • Contact sales
    • Find a partner
    • Report a website issue
    • Site Status Dashboard
    • Report a security problem

    RED HAT DEVELOPER

    Build here. Go anywhere.

    We serve the builders. The problem solvers who create careers with code.

    Join us if you’re a developer, software engineer, web designer, front-end designer, UX designer, computer scientist, architect, tester, product manager, project manager or team lead.

    Sign me up

    Red Hat legal and privacy links

    • About Red Hat
    • Jobs
    • Events
    • Locations
    • Contact Red Hat
    • Red Hat Blog
    • Inclusion at Red Hat
    • Cool Stuff Store
    • Red Hat Summit

    Red Hat legal and privacy links

    • Privacy statement
    • Terms of use
    • All policies and guidelines
    • Digital accessibility

    Report a website issue