---
# System prepended metadata

title: Introduction

---

[[_TOC_]]

# Introduction
This document is a guide that can be used by developers to get up and running when they need to start developing for the ACS application.

The ACS (Access Control System) mobile application has been developed specifically to be used in conjunction with Xynaps.Web.Yms (Yard Management System) to authorize and automate planned visits to the site of Vlaeynatie.
Visitors can be contractors or regular visitors.

Access to the site (or parts of the site) is granted trough the use of the IBeacons protocol.
This IBeacons protocol works with Bluetooth and it can determine a user's location and send information to and from the user, see https://en.wikipedia.org/wiki/IBeacon for more information.

At the time of this writing the ACS application is only being used by https://vlaeynatie.eu/.
The ACS application was specifically developed on request by Vlaeynatie but could be used by other customers in the future.

# Projects
Clone following projects.

- https://dev.azure.com/pioniranv/Xynaps/_git/Xynaps.Acs.Visits
- https://dev.azure.com/pioniranv/Xynaps/_git/Xynaps.Web.Yms
- https://dev.azure.com/pioniranv/Xynaps/_git/Xynaps.App
- https://dev.azure.com/pioniranv/Xynaps/_git/Xynaps.ServiceBus.Mail
- https://dev.azure.com/pioniranv/Xynaps/_git/Xynaps.Reporting
- https://dev.azure.com/pioniranv/_git/Docker

For settings of projects above refer to there corresponding Wiki page.
- https://dev.azure.com/pioniranv/Xynaps/_wiki/wikis/Xynaps.wiki/129/Xynaps.Web.Yms
- https://dev.azure.com/pioniranv/Xynaps/_wiki/wikis/Xynaps.wiki/33/Xynaps.App
- https://dev.azure.com/pioniranv/Xynaps/_wiki/wikis/Xynaps.wiki/201/Xynaps.ServiceBus.Mail
- https://dev.azure.com/pioniranv/Xynaps/_wiki/wikis/Xynaps.wiki/195/Xynaps.Microservices.Reporting
- https://dev.azure.com/pioniranv/Docker/_wiki/wikis/Docker.wiki/55/Home

# Programs

Install following programs if you haven't already done so.

- https://github.com/ChangemakerStudios/Papercut-SMTP
- https://ngrok.com/

# Xynaps.Web.Yms

## Description
This project contains an Angular client that is used by Xynaps.Acs.Visits, so this project needs to be build before it can be used by Xynaps.Acs.Visits.

## Requirements

Angular/Angularcli must be installed.
To install angular/angularcli Node.js and npm should be installed.
If you install Node.js, npm is installed with it.
See https://angular.io/guide/setup-local#install-the-angular-cli to install Angular.

## Steps
1. Navigate with Windows Explorer to the directory where the 'package.json' file of the Xynaps.Web.Yms project is located, copy the path and start a command prompt as **administator** and navigate to that folder.

![packaga_json_xynaps_web_yms.png](/.attachments/packaga_json_xynaps_web_yms-c0a8747f-4e61-4e30-8d1d-bc0c649a63d7.png =304x257)

2. Run 'npm-install' to download all necessary packages
3. Run ng-build
3.1 When I ran the ng build command it failed and I got a bunch of errors. The solution that fixed it isn't at all a good one, but it works. I debugged these errors together with @<Bart Vanraes> but we were unable to fix them and he was unable to reproduce it on  his machine, wich is weird because I ran this installation twice as a 'clean' install on 2 different devices and I had the problem every time. My guess it has something to do with typescript or angular versions that are being used.

![ng_build_errors.png](/.attachments/ng_build_errors-8e4d0fca-f471-4342-bdc1-12330edb2687.png =400x300)

We fixed this by Bart sending me his [dist](/.attachments/dist-05235f39-de8f-489e-950d-27b4e9513910.zip) folder and then me extracting the contents of it into the same folder where the 'package.json' file is located as shown in step 1.

4. After this fix you should get the following if it build succesfully.

![ng_build_success.png](/.attachments/ng_build_success-fe9675cf-b6f0-4f02-9c04-72d615ad03fb.png =400x100)

5. Now you can preceed to setting up Xynaps.Acs.Visits


# Xynaps.Acs.Visits

## Description
This project contains backend and frontend code for the YMS web application.
This web application is the frontend that is being used by employees of Vlaeynatie to manage the visits to the site.
Also, companies that are invited to the site of Vlaeynatie will be able to view there visit invitations by Vlaeynatie if they are connected to the Xynaps.YMS platform.

## Requirements
- For this propject to run succesfully the RabbitMQ container must be running from Docker Desktop 
- You must have set up [Xynaps.Web.Yms](https://dev.azure.com/pioniranv/Xynaps/_wiki/wikis/Xynaps.wiki/338/Xynaps.App.Acs?_a=edit&anchor=xynaps.web.yms).
- A user with the '**Admnistrator**' role has to be created under the 'Vlaeynatie Group' company from the Xynaps Administration, like so:

![create_new_user_under_vlaeynatie_group.png](/.attachments/create_new_user_under_vlaeynatie_group-e8fd7b25-b1bc-4d7e-a9bc-29d3df426e5a.png)

## Steps

1. Open the solution as **Administrator**
1. Set Xynaps.Acs.Visits.Web as startup project
1. Select Xynaps.Acs.Visits.Web and press 'F4'
1. Set 'SSL Enabled' to 'True'
1. Go to the 'Properties' of Xynaps.Acs.Visits.Web
1. Select the 'Web' tab
1. Change the 'Project Url' value to 'https://localhost/'
1. Press the 'Create Virtual Directory' button
1. Check the 'Override application root URL' checkbox
1. Change the value to 'https://localhost/'
1. Uncheck the 'Override application root URL' checkbox
1. Save changes
1. Start the project
1. Login with the user you created under 'Vlaeynatie Group'

If you did not perform the configration steps from [Xynaps.Web.Yms](https://dev.azure.com/pioniranv/Xynaps/_wiki/wikis/Xynaps.wiki/338/Xynaps.App.Acs?_a=edit&anchor=xynaps.web.yms) you will get a blank web page upon running the project, like so:

![xynaps_acs_visits_web_blanc_browser_screen.png](/.attachments/xynaps_acs_visits_web_blanc_browser_screen-0eb40fa6-b070-4b40-89b4-4d472d31400b.png =214x171)

If everything went well you should see the following screen:

![xynaps_yms_home_ok.png](/.attachments/xynaps_yms_home_ok-e2dcb943-114e-46e7-a4d8-bc96a158cc10.png)

# YMS Workflow

To see a demonstration of how the YMS is used to create visits please watch following recording [YMS Vlaeynatie Demo](https://pionira-my.sharepoint.com/:v:/g/personal/stefan_gevaert_pionira_be/Eapt_s9II81An5cWc-gteSIBAqAfGKHP9scnSjH_5_ueYA).

In the recording you will see that there is being made use of the 'Papercut' SMPT client.
I had to run this program as **administrator**, if I didn't run Papercut als administrator I would get an error like so: _'No connection could be made because the target machine actively refused it 127.0.0.1:25'_.
Bart tested this on his machine, but he could run it just fine without running it as admnistrator so it wil depend.

Also, make sure **Xynaps.Reporting** and **Xynaps.Servicebus.Mail.Client** is running.

# Xynaps.App.Acs

## Description
The ACS mobile application is used by visitors/contractors who are visiting the site of Vlaeynatie. 
On there device they will have zero, one or more 'Virtual Badges' that will be used on the site of Vlaeynatie to authenticate and grant access to certain areas on the site.

## Configuration
![xynaps_acs_visual_studio_project_configurations.png](/.attachments/xynaps_acs_visual_studio_project_configurations-7f8bfbb6-8185-4705-8395-d767ec5782c3.png)

## Requirements
1. Start ngrok, if you did not use 'https://localhost/' as the Virtual directory to run Xynaps.Acs.Visits, but instead used a different portnumber then the default 443 for https, for example 'https://localhost:44390/, then make sure to enter the corresponding ngrok command. 
When in doubt, check [using ngrok](https://dev.azure.com/pioniranv/Xynaps/_wiki/wikis/Xynaps.wiki/20/Using-ngrok).
2. Copy the URL generated by ngrok to the 'BaseUri' field in Xynaps.App.Acs.App.xaml.cs

## ACS Workflow
1. Deploy the application
2. Press the 'SIGN IN' button
3. Login with the user you registered upon creating the visit in YMS
4. Create a PIN code for the user you just logged in with
5. You should now see your active visits. It could also be that the time frame your visit was booked does not fall into the scope of the visits that are being fetched. You can change the min and max date range just for debugging purposes in the 'GetActiveVisits' method of the Xynaps.Visits.Api.VisitsController.

If everything worked well the flow should look like so:

![login.png](/.attachments/login-3998b730-eefa-4ef2-8426-925ab33a1a99.png =215x573) ![enter_credentials.png](/.attachments/enter_credentials-430ccb39-ae99-4fde-a6f9-952df20abf5a.png =215x573) ![create_pin.png](/.attachments/create_pin-bc783f45-4442-4e01-b396-3f21d4dac794.png =215x573) ![active_visits.png](/.attachments/active_visits-99dc15e3-5cc5-499e-a64f-aff5f1817c65.png =215x573)




