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

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:

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

  • Move the snap file to NUC machine and install using
  • 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.