Ionic Web app to increase awareness of Social Distancing in an easy manner. Make it more "tangible" and "visual".
Gamification solution to promote Social Distancing.
- Social Distancing
- Table of contents
- Installations
- Local development environment for desktop
- Local development environment for mobile
Clone the project into the desired directory:
git clone https://github.com/CoronApp-project/socialdistancing-ionic.git
Then navigate into the directory of the cloned project using a terminal and install the dependencies:
npm install
To install the Ionic CLI globally, run the following command in a terminal:
npm install -g @ionic/cli native-run cordova-res
This will be used to add Cordova/Capacitor plugins and generate web pages, among other things.
Run the following command line in a terminal to install http-server globally:
npm install http-server -g
This will be used to create a separate HTTP server to test our code locally, because the service workers that are required for this PWA do not work with ionic serve
Sign up for ngrok or login using an existing Github or Google account: https://dashboard.ngrok.com/signup
Follow the set up & installation steps on the get-started page to set up ngrok locally. Ngrok will be used to create a https tunnel which will enable you to test the PWA on a mobile device.
Alternatively, follow these steps to set up ngrok on OSX:
brew cask install ngrok
ngrok authtoken <your-auth-token>
Follow these steps to set up the local development environment for desktop browsers.
These steps have to be done after changing making changes in order to properly test the effects of these changes.
Run the following command line in the project root directory to build the PWA
ionic build –prod
This will generate the www folder which contains the production build of the PWA
Use the previously installed http-server package to run the local production server by running the following command line in the root directory of the project:
http-server -c-1 ./www
Navigate to the response URL in your browser to test the PWA. If the project does not properly reflect the changes made then you might have to empty your browser's cache
Alternatively you can also use the following command line in the project's root directory to run the above two steps successively:
npm run-script buildServer
During development, your browser might cache your code and assets which can cause problems while testing changes after rebuilding the PWA.
To resolve this issue, with your chrome dev tools opened up, right click your browsers refresh button and then click on ‘Empty Cache and Hard Reload’ as seen in the image below:
To test the PWA on a mobile device, you have to build the application and run the local production server as you would in the browser steps. However, to be able to use the web services on your mobile device, you will need to use the prevously installed ngrok tool to provide a https-secured tunnel.
After building the application and running the local production server, run the following command line:
ngrok http <local-server-port-number>
In the case of this example the port number would be 8080. After running this command line you should see the following output in your terminal, with unique forwarding url's:
To properly test the application, take the last fowarwding url that starts with 'https' and open it in your mobile browser.
Commits to develop will automatically be deployed to the test environment at https://dev-dot-acn-liquid-studio-nl.appspot.com/. Commits to the master branch will automatically deploy to production: https://acn-liquid-studio-nl.appspot.com/.