Build a QRCode/Barcode scanning app with 26 lines of JSON

Nowadays we see QR code everywhere. We see it on a billboard, we see it embedded in product packaging, we use it to share Bitcoin public key.

QR code is like a 2D version of barcode.

As a publisher, you can pack all kinds of data in it as an image, and as a consumer you can simply scan the QR code to extract whatever is stored in the code.

Both web.jasonette.com and jasonbase.com websites incorporate QR Code scanning, so you can just open your JASON app and scan the QR code to automatically open the app.

Scan the QR code from JASON app to load the app

But you can do much more than just storing a URL in a QR code. Let’s take a look at how you can implement the QR code feature for your app too.

Like any other features on Jasonette, it’s all built into Jasonette, so you don’t need to do anything. You just need to load a JSON markup that instructs Jasonette to scan QR code.

How to implement

You can implement barcode & QR code scanning using a newly added API called $vision.

Here’s how you implement them:

1. Include back facing camera as background, as follows:

{
  "$jason": {
    "body": {
      "background": {
        "type": "camera",
        "options": {
          "device": "back"
        }
      }
    }
  }
}

2. Wait for $vision.ready event and call $vision.scan action. You need to wait for the camera to be ready before calling the scan action.

{
  "$jason": {
    "head": {
      "actions": {
        "$vision.ready": {
          "type": "$vision.scan"
        }
      }
    },
    "body": {
      "background": {
        "type": "camera",
        "options": {
          "device": "back"
        }
      }
    }
  }
}

3. Now wait for $vision.onscan event. This will be triggered once when the camera scans a new barcode. The event will return the data inside $jason, which you can parse to use it for your own purpose, like below:

{
  "$jason": {
    "head": {
      "actions": {
        "$vision.ready": {
          "type": "$vision.scan"
        },
        "$vision.onscan": {
          "type": "$util.alert",
          "options": {
            "title": "Scanned",
            "description": "{{$jason.content}}"
          }
        }
      }
    },
    "body": {
      "background": {
        "type": "camera",
        "options": {
          "device": "back"
        }
      }
    }
  }
}

Simple and Flexible, works on both iOS and Android.

Believe it or not, I have just introduced you to the entirety of the $vision API.

No need to write native code or install additional features, it’s already all built into Jasonette-iOS and Jasonette-Android. Just load the JSON markup from Jasonette and it should just work.

This works not just for the QR code, but also for regular “one dimensional” barcode we’re all familiar with.

Just like any other Jasonette actions, you can chain the scanned data with other Jasonette action to achieve whatever you need to build. For example you could:

1. Automatically open a web page by scanning a QR code containing a URL
2. Render any UI component using $render and passing the scanned data to a template.
3. etc.

Below you see another example which scans barcode and qrcode, and displays the content on the screen in realtime:

Check out the code for above example at:

Jasonette/Jasonpedia

Conclusion

QR code is really cool, and Jasonette makes it super easy to implement it just by writing a few lines of JSON markup.

Not only is it easy, but it’s also very flexible, since you can pass the return value to any other action to build whatever you want.

Please play with it and share if you come up with any cool examples.

Have fun!