Wednesday, October 3, 2018

Aws IoT - Device Connectivity

Devices connect to Aws IoT core using one of the supported protocols. Data from the device is transported to the Aws IoT as JSON document.


The message broker supports the use of the MQTT protocol to publish and subscribe and the HTTPS protocol to publish. The message broker also supports MQTT over the WebSocket protocol.
  • MQTT, Client Certificate, 8883, 443
  • HTTP, Client Certificate, 8443
  • HTTP, SigV4, 443
  • MQTT + WebSocket, SigV4, 443

Connectivity from Device using Client Certificate

Resources on Device

  1. x509 Certificate specific to the device (establishes device identity; equivalent to username in classic authentication). An X.509 certificate is a document that is used to prove ownership of a public key embedded in the cert. CA creates a certificate and signs it with a private key. Anyone can now validate your device certificate by checking its digital signature with the CA’s public key. (.pem.cer file)
  2. Private key corresponding to device's x509 (for signing communication)
  3. Root certificate for Aws IoT server (to verify the authenticity of certificate returned by Aws IoT to the device; Answers question: Am I talking to the real Aws IoT Server?). On Aws IoT Button, this certificate is already baked in. (.pem file)
  4. Client connectivity to Internet: WIFI SSID, password
  5. Aws IoT Server endpoint (region-specific, endpoint for multiple devices). For example:

Resources on Aws IoT Server

  1. x509 Certificate specific to the device with an associated Certificate Id.
Each connected device is represented as thing. It has unique arn. For example:

Communication Flow

Two step process.

1) Establish secure communication between the device and Aws IoT server. This is just like connecting to a secure website. The Server sends it's certificate to Client. Client wants to make sure it is talking to the real AWS IoT. Client verifies that server cert is authentic by using the AWs IoT Service root certificate present on the device. The public key that’s embedded in the root certificate is used to validate the digital signature on the Server provided certificate. Client and Server then negotiate and use a shared secret to encrypt communication.

2) Next device identifies itself to Aws IoT server. Device sends a copy of its device certificate to the server. Device calculates a hash over the data sent to Server with its private key and sends it as the digital signature. AWS IoT is now in possession of the devices’ public key (which was in the device certificate) and the digital signature. It uses the device’s public key to check the accuracy of the digital signature. By using the unique identifier of the certificate, it knows exactly which device is establishing a MQTT session. From then on, all messages between the device and AWS IoT are secured using the shared secret (for efficiency).

Aws Resource Access

Aws resources that are allowed to be accessed by a device are specified by associating a policy with Device's certificate on the Aws IoT Server.

For example, the following policy publishes the data received from a device to an SNS topic.

  "Version": "2012-10-17",
  "Statement": [
      "Action": "iot:Publish",
      "Effect": "Allow",
      "Resource": "arn:aws:iot:us-east-1:995042574424:topic/iotbutton/G030MD045XXXXX"

1. Messages are published to a device specific SNS topic

2. Rules engine picks up the message from the SNS topic and then publishes the data to configured destination (under Act tab).

Data Flow

Data received from device by the Message Broker on Aws IoT Server and can be routed to another Aws resource by Aws IoT Server's Rule engine.
  1. DynamoDB
  2. Kinesis
  3. Lambda
  4. S3
  5. SNS
  6. SQS

Monday, April 23, 2018

React app with Redux and Redux Observables


  • React js (for UI)
  • Redux (for state management; actions and reducers that set state)
  • React-Redux (for connecting Redux to React; redux actions and arbitrary properties that can be set as properties of the component; Provider component makes the store available to all components)
  • Redux Observable (for linking RxJS to Redux; applyMiddleware to redux store; takes care of RxJS subscriptions and un-subscribe)
  • RxJS (Reactive programming based on observables)


yarn add redux react-redux rxjs redux-observable

// rxjs requires tslib
yarn add tslib

The Idea

  • Redux Action is dispatched
  • Received by the Reducer
  • Since there is redux observable middle-ware applied, the action is then received by the Epic (redux observable action handler)
  • Epic is now free to either handle that action or not based on the action.type
  • Epic can fire an entirely new action that is then received by the Reducer
  • Which in turn may possibly be handled by another Epic (or not)

Data Retrieval Flow

Epics (Redux observables) are very good at handling asynchronous operations, errors, and mapping results.
  • An redux action is invoked (for example, by clicking a button)
  • Action is handled by the reducer (which can possibly place a loading message in the store, which in turn my be displayed by react component to the user)
  • The same action can then be optionally handled by an Epic (redux observables middleware)
  • The Epic can perform the asynchronous data fetch operation (ajax, for example)
  • When finished, Epic can produce another action with the data retrieved
  • That action is then handled by the reducer, that may remove the loading message from the store and set retrieved value in the store.
  • The retrieved value in the store may then be reflected in the react component

Sunday, April 22, 2018

Git Help

usage: git [--version] [--help] [-C ] [-c name=value]
           [--exec-path[=]] [--html-path] [--man-path] [--info-path]
           [-p | --paginate | --no-pager] [--no-replace-objects] [--bare]
           [--git-dir=] [--work-tree=] [--namespace=]

These are common Git commands used in various situations:

start a working area (see also: git help tutorial)
   clone      Clone a repository into a new directory
   init       Create an empty Git repository or reinitialize an existing one

work on the current change (see also: git help everyday)
   add        Add file contents to the index
   mv         Move or rename a file, a directory, or a symlink
   reset      Reset current HEAD to the specified state
   rm         Remove files from the working tree and from the index

examine the history and state (see also: git help revisions)
   bisect     Use binary search to find the commit that introduced a bug
   grep       Print lines matching a pattern
   log        Show commit logs
   show       Show various types of objects
   status     Show the working tree status

grow, mark and tweak your common history
   branch     List, create, or delete branches
   checkout   Switch branches or restore working tree files
   commit     Record changes to the repository
   diff       Show changes between commits, commit and working tree, etc
   merge      Join two or more development histories together
   rebase     Reapply commits on top of another base tip
   tag        Create, list, delete or verify a tag object signed with GPG

collaborate (see also: git help workflows)
   fetch      Download objects and refs from another repository
   pull       Fetch from and integrate with another repository or a local branch
   push       Update remote refs along with associated objects

'git help -a' and 'git help -g' list available subcommands and some
concept guides. See 'git help ' or 'git help '
to read about a specific subcommand or concept.

Friday, February 23, 2018

Imperative vs Object-Oriented vs Functional Programming Style

Same program written in three programming styles.




Function Closure

A function closure contains a function and the environment the function is referenced in. The referencing environment may contain variables that are not local to the function but are nonetheless accessible to the function code. These non-local variables are called free variables or upvalues.

// example of function closure for Inner()
function Outer(){
    var upvalue = 1

    function Inner(){
        // upvalue is available here & part of function closure
        // for Inner()
        var funcVar = 2

Saturday, December 9, 2017

Setting up a simple HTTP Server for local web development


It works similarly to http-server but automatically reloads the webpage when it changes on disk. This is very useful during developement.

npm install -g watch-http-server

See: watch-http-server

1. Install NodeJS from

2.  Install watch-http-server or http-server npm package

npm install -g watch-http-server


npm install -g http-server

3. From command line, change to the directory containing your static web files (e.g. html, javascript, css etc) in the command line window, e.g:

cd \temp\website

4. Start the server from the website directory with following command line command.

watch-http-server -o -a localhost



Or run it with more more options

watch-http-server --help

C:\Users\srazzaq>watch-http-server --help
usage: http-server [path] [options]

  -p                 Port to use [8080]
  -a                 Address to use []
  -d                 Show directory listings [true]
  -i                 Display autoIndex [true]
  -e --ext           Default file extension if none supplied [none]
  -s --silent        Suppress log messages from output
  --cors             Enable CORS via the 'Access-Control-Allow-Origin' header
  -o                 Open browser window after staring the server
  -c                 Cache time (max-age) in seconds [3600], e.g. -c10 for 10 seconds.
                     To disable caching, use -c-1.

  -S --ssl           Enable https.
  -C --cert          Path to ssl cert file (default: cert.pem).
  -K --key           Path to ssl key file (default: key.pem).

  -h --help          Print this list and exit.

5. The watch-http-server will start and print the local http address where the website can be reached. It is typically http://localhost:8080. Open your browser and go to the address http://localhost:8080 and you should see the index file in your web site directory from Step 3.

Wednesday, October 25, 2017

Getting started with React in 5 minutes

Development Environment Setup

1. Install node.js. What you really need is npm that is installed as part of node.js.

2. Install create-react-app npm module globally. This npm modules contains scripts that set up a new app, ready for further development.

npm install -g create-react-app

3. Create a folder where you want to create your react apps

C:\> md react
C:\> cd react

4. Create an app

C:\react> create-react-app hello-react

5. Change to your new application directory

C:\react> cd hello-react

6. Now you can run the dev version of your app.

npm start

7. Build production optimized version of your app in the build subfolder.

npm run build

8. To run the production version, npm install a static server (need to do just once)

npm install -g serve

9. Run the production version of the app

serve -s build

10. To manage all the configuration scripts yourself (permanent for the app; cannot be reverted).

npm run eject

React-friendly Editors, IDEs and Tools

  • Visual Studio Code
  • Sublime Text
  • WebStorm
  • Chrome Extension for React

Tools under the hood

React development environment uses the following tools.
  • Babel - Transpiler to convert ES6 JavaScript to ES5 for a wider Web Browser compatibility
  • webpack module bundler - To create a single bundle of js from multiple files
  • express - http server for dev
  • serve-static - To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express
  • eslint - static analysis of code

Advanced State Management Module (optional)

  • Redux
  • Use redux-logger middleware for viewing state changes