Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2025-12-18 04:06:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

docs: add android debug instructions to README

Browse Source 
Additionally clean up npm scripts and README

Closes #157
This commit is contained in:
Jovan Krunić
2021-11-26 13:37:59 +01:00
parent c5b826080c
commit 8f3df58e42
2 changed files with 51 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
README.md
View File

@@ -3,7 +3,7 @@
[![pipeline status](https://img.shields.io/gitlab/pipeline/openstapps/app.svg?style=flat-square)](https://gitlab.com/openstapps/app/commits/master)
[![documentation](https://img.shields.io/badge/documentation-online-blue.svg?style=flat-square)](https://openstapps.gitlab.io/app)
This is a hybrid mobile app which is built using [Ionic](https://github.com/ionic-team/ionic) and Apache Cordova Framework.
This is a hybrid mobile app which is built using [Ionic](https://github.com/ionic-team/ionic) and [Angular] (https://angular.io/).
### Why not refactoring legacy app?
@@ -14,9 +14,9 @@ The StApps 1.x.x (legacy app, but current app in stores) is written using Ionic
There are (`npm`) scripts defined to get the app running as quickly as possible. Those scripts (shortcuts for docker commands) are called using the syntax `npm run + <script-name>`. So we have the following commands available:
```
npm run docker:fresh
npm run docker:pull
```
which pulls the fresh image ([Dockerfile](Dockerfile)) which contains all the tools needed for building, serving and deploying the app.
which pulls the up-to-date image ([Dockerfile](Dockerfile)) which contains all the tools needed for building, serving and deploying the app.
```
npm run docker:enter
@@ -31,7 +31,7 @@ which runs `npm install` (to install the required npm packages) and `npm build`
```
npm run docker:serve
```
which serves the app for running it in the browser. It basically runs `ionic serve` in the docker container (on the docker builder image).
which serves the app for running it in the browser. It basically runs `ionic serve` in the docker container (in the docker builder image).
## How to build and start the app using the default backend?
@@ -41,14 +41,6 @@ npm run start
```
will build and serve the app using the configuration for a default backend.
## How to use the fake backend?
```
npm run start:fake
```
will build and serve the app using the configuration for the fake-backend (interesting in development with fake backend using HTTP interceptors).
## Further explanation of npm scripts
All the npm scripts are defined in `package.json` [file](package.json). It is recommended to open the file and check what these scripts exactly do.
@@ -63,22 +55,58 @@ Install the npm packages needed for running the app (as for any other node proje
npm install
```
Check the code for linter issues:
```
npm run lint
```
Automatically fix linter issues (those where autofix is possible):
```
npm run lint:fix
```
Build the app (transpile etc.):
```
npm run build
```
Build the app for testing on an android device:
Open the app in the browser:
```
ionic serve
```
### Android
Run the app for testing on an android device (with live reload in the webview / device, when files are changed):
```
npm run build # if needed
npm run resources:android # generate needed resources (icons and splashscreens)
npm run docker:run:android # runs "ionic capacitor run android --livereload --external" on a selected device
```
**Troubleshooting**: The device should be listed as the docker container where the run happens gets access to the USB devices. In case your device is not listed, it is possible that Chrome is blocking the access to it. Make sure `chrome://inspect` is not opened in your Chrome or any other program, which would block access to the device by using it on the host.
After the app is running on the android device you can use an IDE or Chrome to debug the WebView (JavaScript / Typescript) of the app (set breakpoints, watch variables, look at the call stack etc.).
For example in Chrome:
1. Open `chrome://inspect`
2. Click the App's WebView which is listed there (you can recognize it by the app's ID)
3. Go to `Sources` and add the app's folder to the `FileSystem`
Besides that, it is possible to monitor processes (and so the processes related to the app itself, using its ID) using [adb logcat](https://developer.android.com/studio/command-line/logcat), which you can run inside of the running container.
Build the (debug) app for testing on an android device (creates an APK file in the android's build outputs path):
```
npm run docker:build:android
```
Open the app in the browser:
```
ionic serve
```
The mentioned `docker:*:android` npm commands are executed in a docker container, so it is not mandatory to have the android (command line) tools installed on the host computer. Alternatively, you can install the tools and additionally Android Studio on the host machine and then run and build the app on the host (without using docker).
### Executing tests
Execute unit tests:

11
package.json
View File

@@ -15,15 +15,16 @@
"scripts": {
"build": "ng build",
"build:prod": "ng build --configuration=production",
"build:fake": "ng build --configuration=fake",
"build:android": "ionic capacitor build android --no-open && cd android && ./gradlew clean assembleDebug && cd ..",
"run:android": "ionic capacitor run android --livereload --external",
"changelog": "conventional-changelog -p angular -i src/assets/about/CHANGELOG.md -s -r 0 && git add CHANGELOG.md && git commit -m 'docs: update changelog'",
"check-configuration": "openstapps-configuration",
"e2e": "LANGUAGE=de-DE ng e2e --no-webdriver-update",
"docker:build": "sudo docker run -p 8100:8100 -p 35729:35729 -p 53703:53703 -v $PWD:/app -it registry.gitlab.com/openstapps/app bash -c \"npm install && npm run build\"",
"docker:build:android": "sudo docker run -p 8100:8100 -p 35729:35729 -p 53703:53703 -v $PWD:/app -it registry.gitlab.com/openstapps/app bash -c \"ionic capacitor build android --no-open && cd android && ./gradlew clean assembleDebug && cd ..\"",
"docker:run:android": "sudo docker run -v $PWD:/app --privileged -v /dev/bus/usb:/dev/bus/usb --net=host -it registry.gitlab.com/openstapps/app bash -c \"ionic capacitor run android --livereload --external\"",
"docker:build:android": "sudo docker run -p 8100:8100 -p 35729:35729 -p 53703:53703 -v $PWD:/app -it registry.gitlab.com/openstapps/app bash -c \"npm run build:android\"",
"docker:run:android": "sudo docker run -v $PWD:/app --privileged -v /dev/bus/usb:/dev/bus/usb --net=host -it registry.gitlab.com/openstapps/app bash -c \"npm run run:android\"",
"docker:enter": "sudo docker run -p 8100:8100 -p 35729:35729 -p 53703:53703 -v $PWD:/app -it registry.gitlab.com/openstapps/app bash",
"docker:fresh": "sudo docker pull registry.gitlab.com/openstapps/app",
"docker:pull": "sudo docker pull registry.gitlab.com/openstapps/app",
"docker:serve": "sudo docker run -p 8100:8100 -p 35729:35729 -p 53703:53703 -v $PWD:/app -it registry.gitlab.com/openstapps/app bash -c \"npm run start:external\"",
"documentation": "compodoc -p tsconfig.json -d docs",
"licenses": "license-checker --json > src/assets/about/licenses.json && node accumulate-licenses.mjs",
@@ -36,9 +37,9 @@
"preversion": "npm run prepublishOnly",
"push": "git push && git push origin \"v$npm_package_version\"",
"resources:android": "cordova-res android --skip-config --copy",
"resources:ios": "cordova-res ios --skip-config --copy",
"start": "ionic serve",
"start:prod": "ionic serve -- --configuration=production",
"start:fake": "ionic serve -- --configuration=fake",
"start:external": "ionic serve --external",
"test": "ng test"
},