Hybrid Desktop App Development: eHealth use-case

If you can build a website, you can build a desktop app. It takes care of the hard parts so you can focus on the core of your application. The application will run on Linux, Windows, Mac and the code can be reused for Progressive Web Applications and even mobile applications.

In this post, we show a use case of the development of a desktop hybrid application using cutting-edge technologies.  The ultimate goal is to build an application which should help psychotherapists to electronically record (text and speech-to-text) protocols of healing sessions with patients in a way of improving the therapy effectiveness: Simple Protocol Recorder. The therapist who needs this protocol recorder tool is a well-known private specialist operating in the German market.

In this additional blog, we would like to share with you what we have learned, the general knowledge and some useful good practices when working with hybrid mobile application development.

 

General Knowledge

Hybrid desktop app development as hybrid mobile app development is based on Web development. So you need to get a basic knowledge of standards such as HTML, JS, CSS. You will also need to use some powerful tools as Electron [1] , the Js runtime environment called Node.js[2] and optionally, some good client-side-frameworks.

 

Node.js

Node.js is the suitable environment which provides you with the richest JS library in the world: npm [2].

It will be used to install quite every package and JS tools you that you will need while developing, through the famous command: npm install –<options> <package>

 

Electron

With Electron, implementing a desktop application for your company or idea is easy. Initially developed for GitHub’s Atom editor, Electron has since been used to create applications by companies like Microsoft, Facebook, Slack, and Docke : Visual studio Code, Skype Desktop, Desktop wrapper for WhatsApp Web, etc…[3]

It is a framework for creating native and cross-platform desktop applications with web technologies like JavaScript, HTML, and CSS.  It takes care of the hard parts so you can focus on the core of your application. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.

To render you such an easiness, Electron provide you with Automatic updates, Native menus & notifications , Crash reporting, Debugging & profiling, and Windows installers.

 

Client side framework

To ensure reliability, maintainability and efficiency of your apps, the using of appropriate frameworks is very recommended. They will provide a good architectural pattern for your app.

There are some frameworks that you can use such as Angular.js [4], React.js, Vue.js, and so on.

UI/Ux frameworks and libraries

You may also want to beautify your UI, using rich styling library as Bootstrap [5], or powerful UI/UX frameworks as Ionic.io or Onsen UI[6].

Some recommended Tools

  • Editors: Visual Studio Code
  • IDE: Visual Studio
  • Debugger and emulator: Monaca Debugger
  • Many other stuffs

Selected Tools for our Use case

For example, for the first version Client App, we choose the following technologies:

  • Editor/IDE : Visual Studio Code
  • Packaging (Building) and Deploying (Assistant wizard generation): Electron and electron-packager  [7]

 

References:

[1] https://electronjs.org/docs

[2] https://nodejs.org/en/

[3a] https://electronjs.org/apps/visual-studio-code

[3b] https://electronjs.org/apps/skype

[3c] https://github.com/Enrico204/Whatsapp-Desktop

[4]  https://angular.io/guide

[5]   https://onsen.io/v2/guide/http://ionicframework.com/

[6] https://getbootstrap.com/docs/3.3/css/

Leave a Reply

Your email address will not be published. Required fields are marked *