These hybrid mobile and web apps provide a shared interface to use the ordered.online application. This repository is organized as a monorepo to allow for efficient module sharing and reuse of components between applications. This State of the Art approach will enable use to abstract different applications by using modularized reusable components. We utilize the JAMSTACK which is a new way of writing modern and secure web and mobile applications. Somehow this will also help with SEO (No futher questions). Other BUZZWORDS will be added soon...
This monorepo is organized by lerna and yarn workspaces. This way we can abstract different applications by using modularized reusable components. All the packages will share one common node_modules directory located in the root of this repository. Inside each package directory the respective package.json will hold all configuration needed for the individual package. A package directory will have a node_modules directory consisting of symlinks. All packages provided will share the prefix @ordered.online/.
| Package | Explanation |
|---|---|
| @ordered.online/api | Ready-to-use api callbacks to the ordered.online service api. (works as stand-alone) |
| @ordered.online/components | React components reused throughout the ordered.online applications (works as stand-alone) |
| @ordered.online/app | Hybrid mobile and web app for ordering through a customer |
| @ordered.online/manager | Hybrid mobile and web app for location managers to organize their locations and handle orders |
To start a local development environment you will have to:
-
Install all dependencies with your your package manager of choice. We prefer yarn.
Simply run
$ yarn installOR$ npm install -
Run a security audit to check for known security issues with the installed packages ! This step is optional but can be an important step to ensure there are no vulnerabilities with transitive dependencies.
Simply run
$ yarn auditOR$ npm auditIf for some reasons, there are vulnerabilities that were found, you can run
$ yarn audit --json > audit.jsonor$ npm audit --json > audit.jsonto save a detailed report in a json file. Inspect on the packages to see the security issues. Then fix those issues by either running$ npm audit fix(only available for npm) or setting an specific version for transitive dependencies by including aresolutionskey in the package.json. For example:"resolutions": { "**/**/lodash": "^4.17.12" }
-
Bootstrap all applications with lerna. This will create symlinks inside the
node_modulesdirectory to the individualpackages/*directories.Simply run
$ yarn run bootstrapOR$ npm run bootstrap -
To start the manager app, just execute the respective command with the package manager of choice:
$ yarn run start:manager # OR $ npm run start:manager -
To start the customer app, just execute the respective command with the package manager of choice:
$ yarn run start:app # OR $ npm run start:app -
To run either the customer or manager application on the plattform of your choice, switch in to the directory of the specific app with either
cd packages/apporcd packages/manager. Then execute the respective command for your desired platform with the package manager of choice:- Web :
$ yarn run webOR$ npm run web - Android :
$ yarn run androidOR$ npm run android - iOS :
$ yarn run iosOR$ npm run ios
- Web :
-
If you wish to test one of the apps natively on your phone, install the Expo Client on your device. You can get it from the following links for iOS and Android
Then connect your phone to the same wireless network as your computer. On Android, use the Expo app to scan the QR code from your terminal to open your project. On iOS, open the camera and point it at the QR Code. You will be provided with a pop-up link to open the application in the expo app.
The following refer to the development of either the customer or manager application. First, you will have to switch in to the directory of the specific app with either cd packages/app or cd packages/manager.
Run the app in development mode with hot module replacement via Webpack Dev Server
Simply run $ yarn run web OR $ npm run web to run Expo for Web. This will open Expo in your browser and redirect you to the web application.
Run the app via Expo in a simulator for android devices.
Simply run $ yarn run android OR $ npm run android
Run the app via Expo in a simulator for iOS devices.
Simply run $ yarn run ios OR $ npm run ios
The ordered.online application can be bundled to be served on the web or published on the app stores with the following commands
We bundle the application with Webpack and run it in production mode.
Simply run $ yarn run build:web OR $ npm run build:web
This will produce a build directory which can be served via a simple web server. In our case we will serve it via NGINX. For details on the exact deployment to web, see our infrastructure repository
We bundle the application and generate a native android app via Expo. We can build a standalone app following the Expo Documentation for Building Standalone Apps
Simply run $ yarn run build:android OR $ npm run build:android
This will produce a Android Application which we can deploy the Play Store by following the Expo Documentation on Deploying to App Stores. To get a summary of the deployment process, we refer to the Expo Documentation on Publishing
We bundle the application and generate a native ios app via Expo. We can build a standalone app following the Expo Documentation for Building Standalone Apps
Simply run $ yarn run build:ios OR $ npm run build:ios
This will produce a iOS Application which we can deploy the App Store by following the Expo Documentation on Deploying to App Stores. To get a summary of the deployment process, we refer to the Expo Documentation on Publishing