0.2.92 • Published 3 years ago

ors-preoday v0.2.92

Weekly downloads
-
License
-
Repository
-
Last release
3 years ago

QikServe: Order Ready Board

Pre-requisites

  • Node v10+
  • Yarn v1+ or Npm v6+

Install the dependencies

Run the following command:

$ yarn install # OR
$ npm i

Run dev application

$ yarn electron-dev # OR
$ npm run electron-dev

Build

Run the following command:

$ yarn build # OR
$ npm run build

The build folder will be created at the project root.

Create the installation file

$ yarn deploy

The dist folder will be created at the project root and will contain installation file.

Publish

$ yarn publish

To execute this command it is necessary to correctly configure the information for the desired environment

Instructions for publishing with Linux

Linux Dependencies

To build windows applications on linux machines is necessary to use Wine.

Installing on Debian 10

sudo dpkg --add-architecture i386
sudo apt-get update
sudo apt -y install gnupg2 software-properties-common
wget -qO - https://dl.winehq.org/wine-builds/winehq.key | sudo apt-key add -
sudo apt-add-repository https://dl.winehq.org/wine-builds/debian/
wget -O- -q https://download.opensuse.org/repositories/Emulators:/Wine:/Debian/Debian_10/Release.key | sudo apt-key add -RUN echo "deb http://download.opensuse.org/repositories/Emulators:/Wine:/Debian/Debian_10 ./" | sudo tee /etc/apt/sources.list.d/wine-obs.list
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt -y install gettext-base
sudo apt -y install --install-recommends winehq-stable

AWS Configuration

S3 Setup

The only requirement on s3 configuration is about the permissions. To ensure the correct auto-update functionality is necessary to setup the s3 bucket permissions to be exact like this:

  • Block all public access: Off
    • Block public access to buckets and objects granted through new access control lists (ACLs): Off
    • Block public access to buckets and objects granted through any access control lists (ACLs): Off
    • Block public access to buckets and objects granted through new public bucket or access point policies: On
    • Block public and cross-account access to buckets and objects through any public bucket or access point policies: On

IAM Custom Policy for Publishing Updates

In order to work with custom permissions, there are necessary to create a custom policy to give only the necessary permissions to an specific user that will be used by the build to push the artifacts to s3. To do this, simply create a new policy with these settings:

  • Service: s3
  • Actions:
    • List:
      • ListBucket
    • Read:
      • GetObject
      • GetObjectAcl
      • GetObjectVersion
      • ListBucketMultipartUploads
      • ListMultipartUploadParts
    • Write:
      • AbortMultipartUpload
      • PutObject
    • Permissions management:
      • PutObjectAcl
  • Resources: Specific
    • bucket: arn:aws:s3:::PREVIOUSLY_CREATED_BUCKET_NAME
    • object: arn:aws:s3:::PREVIOUSLY_CREATED_BUCKET_NAME/*

IAM Custom Policy for Reading Artifacts

In order to work with custom permissions, there are necessary to create a custom policy to give only the necessary permissions to an specific user that will be used by the auto-update to fetch the artifacts from s3. To do this, simply create a new policy with these settings:

  • Service: s3
  • Actions:
    • List:
      • ListBucket
    • Read:
      • GetObject
      • GetObjectAcl
      • GetObjectVersion
      • ListBucketMultipartUploads
      • ListMultipartUploadParts
  • Resources: Specific
    • bucket: arn:aws:s3:::PREVIOUSLY_CREATED_BUCKET_NAME
    • object: arn:aws:s3:::PREVIOUSLY_CREATED_BUCKET_NAME/*

IAM User

In order to use the custom policy, its necessary to create two specific users (one to push artifacts and other to fetch and retrieve artifacts) restricting the users to be only Programmatic access and on permission settings, make sure to use the custom policy created previeously to ensure the user only will have the rights to manipulate the specific s3 bucket resource. After that, make sure to keep the Access key ID and Access key secret, it will be used later.

Build Process

Env Variables

The build process need the follow env variables to be set before the start:

  • AWS_ACCESS_KEY_ID: IAM user access key ID
  • AWS_SECRET_ACCESS_KEY: IAM user access key secret
  • AWS_ACCESS_KEY_ID_READ: IAM read-only user access key ID
  • AWS_SECRET_ACCESS_KEY_READ: IAM read-only user to access key secret
  • AWS_S3_BUCKET_NAME: S3 bucket name
  • AWS_S3_BUCKET_REGION: S3 bucket region

The AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY are used by the publish command to connect and authenticate with AWS. The AWS_S3_BUCKET_NAME and AWS_S3_BUCKET_REGION are used to write the build config file.

Writing the Build Config Files

The build config file is dynamicly built using envsubst provided by the linux dependency called gettext-base installed previously. The script bellow (saved as envsub.sh on project root folder) is used to replace the variables on config template and write the config files:

#!/bin/sh
envsubst < ./electron-builder.template.json > ./electron-builder.json
envsubst < ./updater-config.template.json > ./updater-config.json
$@

Auto Updater Config

In order to keep the update files privately on AWS s3 a new config file was needed updater-config.json that will be packaged within the app.asar. This file has the AWS s3 access info (key, secret, region and bucket) from the read-only user created previously. This is used to sign the AWS s3 requests headers to open up an authenticated connection.

Build and Publish

The build process depends on the electron-builder package to build, package and publish the artifacts to S3. To install it, run the following command:

$ npx electron-builder --windows --publish always

About Config.txt

# POS API Adress
POSAPI_URL=http://localhost:3003/

# Order update interval (in milliseconds)
REFRESH_INTERVAL=10000

# The fields to display on the order cards
DISPLAY_FIELDS=CheckId

# Status filters that will be returned from POSAPI
# 30: ready status
# 60: preparing status
FILTERS_KDS_ORDER_STATUS=30,60


# Additional Filters to be used when querying orders. Replace 1 with the relevant ids
FILTERS_REVENUE_CENTER=1
FILTERS_EMPLOYEE=1
FILTERS_ORDER_TYPE=1

# Choose wether the additional filters should be applied locally or in the api calls. Defaults to true.
ADDITIONAL_FILTERS_LOCAL=[*true*/false]

# How many seconds should a ready check remain in screen. Defaults to 180.
CLEAR_FROM_READY_AFTER_SECONDS=180

# Choose wether to load the app with devtools open for debugging
DEBUG=true

# The theme value is the folder with the customized style
# themes: default OR dark
THEME=dark

# Syslog fill pattern - protocol:syslog_host:port
# protocol - tcp4 OR udp4 
# syslog host - url adress
# port - default port: 514
SYSLOG_SERVER=tcp4:10.10.10.3:514   

# Simple internacionalization
PREPARING_COLUMN_LABEL=Preparing
READY_COLUMN_LABEL=Ready
INSTRUCTIONS=When your order is ready, please proceed to the collection point

About BannedWords.txt

Banned words must be per line, but it is possible to write RegExp. The banned words are case insensitive.

Some examples:

Foo
Bar
banned|\bbad\b

About theme

There are two default themes (default and dark), but it is possible to create a new one following the same folder structure.

Don't forget to insert the theme name in Config.txt

Example

/* Page style */
.App .order-screen {
    background: rgba(52, 54, 55, 1);
}

/* Preparing column style */
.App .order-screen .preparing.column {
    color: rgba(255, 255, 255, 0.9);
}

/* Ready column style */
.App .order-screen .ready.column {
    color: rgba(255, 255, 255, 0.9);
}

/* Order card style */
.App .order-screen .order {
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* To style the fields to display on the order cards */
.App .order-screen .order .display-fields .field {
    color: rgba(255, 255, 255, 0.9);
}

/* Preparing order card style */
.App .order-screen .order.preparing {
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(191, 33, 47, 1);
}

/* Ready order card style */
.App .order-screen .order.ready {
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(0, 111, 60, 1);
}

/* Footer instructions style */
.App .order-screen .footer .instructions {
    color: rgba(255, 255, 255, 0.9);
}

/* Update notification style */
.App .order-screen .footer .update-notification {
    color: rgba(0, 0, 0, 0.5);
}

/* App version style */
.App .order-screen .footer .app-version {
    color: rgba(0, 0, 0, 0.5);
}