Building an interactive Kiosk using Vue.js & Electron

Planning

The challenge for me is that I haven’t tried to build a kiosk. Most of the projects I built in the past were applications running on browser applications using Vue.js and Ruby on Rails.

I also come up with a research that most kiosks are running on desktop applications which leads me to use Electron. Electron supports cross platform (Mac, Linux, Windows)

Given these skill set I finally come up with a plan on building this app.

High Level Architecture of Kiosk App

Building

In this project, I maintain two separate code base. Frontend is Vue.js and Backend is Ruby on Rails.

The whole development became simpler because of this Vue Electron plugin

I design my components using Material Design — Vuetify

Making requests from an API is simple because of Vuex which is a state management pattern that you can use in Vue.

Here’s the sample code snippet for calling API

import axios from axios 

export const state = {
  results: []
}

export const mutations = {
  SET_RESULTS(state, results) {
    state.results = results
  }
}

export const actions = {
  requestResults(  ) {
    return axios.get("http://railsbackend/api/v1/results")
    .then(response => {
      commit('SET_RESULTS', response)
    })
  }
}

export const getters = {
  getResults(state) {
    return state.results
  }
}

Make sure to use Vuex modules so it can have single-responsibility

Deployment

I deployed the application in an NUC machine with Ubuntu OS. The application is being displayed on a TV that supports touch screen.

• To build the Vue electron app:

npm run electron:build -- -- linux

This will generate a snap file in the dist/ in your project

• Move the snap file to NUC machine and install using

sudo snap install -- dangerous <snap-file>

• I containerised the local API so it can be easily deployed without installing required dependencies. You can see how I did this from my previous tutorial

Things to consider

Since I’m running the application in desktop mode, there are instances that a user can minimise and show the on screen keyboard.

To disable this I use Gnome Shell Extensions these provides core user interface functions for GNOME, like switching to windows and launching applications.

I also disabled the onscreen keyboard I using Block Caribou extension and Disable Gestures for disabling swipe to close/minimise using swipe gestures.

Visit Singapore Kiosk @ Singapore Visitor Centre Orchard Road