Installation #

Make sure NPM is installed on your system. Inside frontend/ run npm install in the terminal to download dependencies. After this the application should be ready to run.

Running the application #

Electron application #

In development mode: npm run dev.

Website application #

In development mode: npm start.

If there is an error when executing any of the commands above. Try the following:

1. Delete the node-modules folder
2. npm install
3. npm run dev or npm start
   should work now else google the error and there is usually good information

Building the application for deployment #

Since deployment was not a part of this project scope we won’t have time to dive into how to do it correctly. However, a direction might be found with electron-packager (https://github.com/electron/electron-packager) or electron-builder (https://www.electron.build/) which is supposedly more advanced, allegedly having support for auto-updating and generation of an installer.

Perhaps more info here: https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3

Coding Style Guide #

We use functional components. These are of the form: const ComponentName = () => {}.

A page is a view in the application (takes up the whole window) and contains many components. The “Page” component is used as a base for all our pages so all pages should be structured like:

<Page>
 "content"
</Page>

NOTE: Pages are also functional components code wise it is not a difference between a component and a page.

Pages that have a white background around the content with a margin uses the following:

<Page>
   <WhiteBackgroundBox>
      "content"
   </WhiteBackgroundBox>
</Page>

Javascript files that use any react tags like <Page> for example should have the extension .jsx if unsure go with .jsx.

Database connection code (will probably change) #

The connection to database works by using ipcRenderer and ipcMain to communicate between the react frontend (renderer process) and the electron/node backend (main process). It is at the main layer of the application the communication with the database and c++ backend is done.

In the public folder there is a file preload.js which is basically an api between the renderer (react) and the main (electron/node layer). At the moment there are only two functions send and recieve these functions both have the parameter channel which is what even you want to trigger and potential data you want to send with the event as the other parameter.

In react state will need to be used to store the received data on the page and update the values displayed on screen (docs below).

Simplified example: react frontend file code for triggering the “get-body-types”-event in the main (electron/node layer) and receiveing data from the db call

//sends to the preload api layer that the main process should do this event
window.api.send("get-body-types"); 
//the "event handler" on the react side for receiving the data from the main
 window.api.receive("get-body-types", (data) => {
        console.log(data);
});

code in electron.js for handling events

//handles the event "get-body-types" sent from the react
ipcMain.handle('get-body-types', async ( event, data ) => {
  //database code from sqlite3 library
  db.all("SELECT * FROM body_types", (err, rows) => {
    //window.webContents.send used to send event back to react frontend via the preload api
    window.webContents.send('get-body-types', rows); 
  })  
});

Code is also documented pretty much the same if not clear.

Useful documentation #

ipc communication between main and renderer

https://www.electronjs.org/docs/latest/api/ipc-main
https://www.electronjs.org/docs/latest/api/ipc-renderer

docs for preload file

https://www.electronjs.org/docs/latest/tutorial/context-isolation

link below has a pretty good illustration how it all works

https://stackoverflow.com/questions/57807459/how-to-use-preload-js-properly-in-electron

Documentation used #

React: https://reactjs.org/docs/getting-started.html

Electron: https://www.electronjs.org/docs/latest

React navigation: https://reactnavigation.org/docs/getting-started/

State hook used when storing data on page: https://reactjs.org/docs/hooks-state.html

Include “functional component” when searching for help with react, if react docs is not enough or info found is using js classes and can’t be easily convertable

Other info #

Native application menu (file, edit,help, about) #

Following changes is done inside “public/main.js”. For macOS the menu appears at the top bar and for Windows/Linux it appears at the top of the application window. To display different menus depending on OS, render the menu which corresponds to process.platform. Documentation for adding/changing the top default application menu: https://www.electronjs.org/docs/latest/api/menu. When running the app in development the menu name will always be “Electron”, once it is packaged as a executable it will have the application name.

Text editor #

For the text editor two popular choices are react-ace and react-codemirror. Both seem fairly easy to use and have support for python and more languages with syntax highlighting. react-ace, react-codemirror