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.

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.

Full Stack Software Developer based in Singapore. Software Developer since 2012. Specialized in Ruby on Rails, Vue.js. AWS Development.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store