Barcode and QR code have become common in our day to day shopping and searching experience. Almost everyone has a QR Code Scanner installed in their phones as separate app or as a part of the camera.

You might want to add QRCode scanning as a part of your website. This simple addition opens up a world of possiblities - potentially improving the user experience of your users by leaps and bounds. Below you will learn how to add a simple QR Code Scanner to your Website.

You don’t need a native app to be able to scan QR codes - simple javascript can do the trick. We will use a npm package react-qr-reader. Add the following code to your javascript to get the QR Code scanner working:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import React, { Component } from 'react'
import QrReader from 'react-qr-reader'

class Test extends Component {
  state = {
    result: 'No result'
  }

  handleScan = data => {
    if (data) {
      this.setState({
        result: data
      })
    }
  }
  handleError = err => {
    console.error(err)
  }
  render() {
    return (
      <div>
        <QrReader
          delay={300}
          onError={this.handleError}
          onScan={this.handleScan}
          style={{ width: '100%' }}
        />
        <p>{this.state.result}</p>
      </div>
    )
  }
}

After this, add the component <Test> to the page where you want the QR Code scanner and handle the data scanned in the handleScan function in the code above.

Scanning Website URLs and Opening them on an iframe

This technique can also be used to scan a URL and open it in a iframe rendered as a react component. There are a few things to remember in this approach:

1. Most website today have X-Frame-Options header set to SAMEORIGIN. This blocks the website from loading in an iframe. You can only open URLs that have the X-Frame-Options header is set to ALLOW-FROM https://<your-website-url>
2. OR Website from the same domain name as your iframe. Here is a MDN article explaining the same.

In case you aren’t able to load the website in your frame, and you have access to the website’s code, try adding the X-Frame-Options header to fix the issue.

Things being worked on

While going over different technologies that could be used to augment the existing stack in GMETRI (more about that to be written) I came across a number of exciting advancements that occurred in the JS world over the last one and a half year. Focusing on creating a startup and with me becoming a father (for the first time) left me with little time to keep up with the latest tech happenings. This post is an attempt to overcome that.

Motivation

While trying to interpret the nagging feeling that something was missing in the way we developed, I went down to my roots. Why do I think I can code well? This reminded me what some of my most complex and well written pieces of code were — Games. Games traditionally are the most difficult (and exciting) pieces of code to write because both the background complexity and the UI are an order of magnitude more complex than the usual day to day apps we are used to.

Goal

On a personal front am planning to create a simple game to give me a taste of the below tools and frameworks that seem to be missing pieces using this article as a guide. Hopefully yields a good result! ReactNative looks like a good platform to be building it. Also with ReactVR gaining popularity it makes the argument to learn ReactNative and basing all (near term) future development on ReactJS even stronger.

Treasure Hunt

On the tooling front a search on React yielded a gold mine. This article is an opinionated piece on every new building block that I was searching for. Also a very interesting piece of information was that Angular 4 is something that can be seriously looked at for future projects. The only fear is the cost of context switching.

Pieces Missing in our current flow — Solution

• Type Checking — Flow
• State Manager — MobX
• Material Design for React — React Toolbox
• Form validations — FormState
• API Layer: GraphQL
• Frontend API Caching Layer: apollo-client
• Type Checking: Flow/TypeScript 2 (Good comparison)

The above is list that will undergo serious changes once the test game is complete. More on that in another post.