The architecture is following:
- ams-data-app - React app that servers UI and provides HTTP endpoints to read input data and update UI accordingly. Users should specify address in Amsterdam, the app should obtain Coordinates (Latitude and Longitude). This coordinates will be used by several functions that provide some data based on the coordinates.
- weather - Function that accepts a cloudevent that should contain coordinates and returns weather data, this is the example json:
{
"coordinates": {
"latitude": "40.7128",
"longitude": "-74.0060"
},
"current_weather": {
"temperature": 16.2,
"windspeed": 8.5,
"weathercode": 200,
"time": "2023-04-05 12:34:56"
}
}
This JSON represents the WeatherData struct with a latitude of 40.7128 and a longitude of -74.0060. The current weather has a temperature of 16.2 degrees Celsius, windspeed of 8.5 m/s, weather code of 200 (thunderstorm with light rain), and the current time is 2023-04-05 12:34:56.
- scooters - Function that accepts a cloudevent that should contain coordinates and returns list of nearest e-scooters (max 5).
{
"coordinates": {
"latitude": 52.370216,
"longitude": 4.895168
},
"scooters": [
{
"id": 1,
"scooterId": "scooter-1",
"geometry": {
"type": "Point",
"coordinates": [4.895168, 52.370216]
},
"operator": "Operator 1",
"availabilityStatus": true,
"name": "Scooter 1",
"maxSpeed": 25,
"currentLocation": "Amsterdam",
"licensePlate": "ABC123",
"numberOfAvailableHelmets": 2,
"distance": 0.5
},
{
"id": 2,
"scooterId": "scooter-2",
"geometry": {
"type": "Point",
"coordinates": [4.8746, 52.369553]
},
"operator": "Operator 2",
"availabilityStatus": true,
"name": "Scooter 2",
"maxSpeed": 20,
"currentLocation": "Amsterdam",
"licensePlate": "XYZ789",
"numberOfAvailableHelmets": 0,
"distance": 1.2
}
]
}
This JSON represents the ScooterData struct with a set of two scooters located in Amsterdam. The first scooter is available and has a current location of 0.5 kilometers from the specified coordinates. The second scooter has a current location of 1.2 kilometers from the specified coordinates.
- (💡 not used in the React app at the moment) distance - Function that accepts a list of scooters as a cloudevent (a return value from Function
scooters
). And for each scooter calculates walking distance and travel time between the input coordinates and the scooter's location. Example output:
{
"distanceData": [
{
"scooterId": "XYZ-123",
"distance": 0.5,
"walkingTime": 10,
"error": ""
},
{
"scooterId": "ABC-456",
"distance": 1.2,
"walkingTime": 20,
"error": ""
}
]
}
This JSON represents an array of DistanceData structs with two items. The first item has a scooter ID of "XYZ-123", a distance of 0.5 kilometers, a walking time of 10 minutes, and no error. The second item has a scooter ID of "ABC-456", a distance of 1.2 kilometers, a walking time of 20 minutes, and no error.
- You can either run the whole app together:
cd ams-data-app
npm start
- Or you can start backend and frontend separately:
Start the frontend to serve UI - it uses sockets to read from the backend
# start frontend
cd ams-data-app/frontend
npm start
In another termianal start the backend that listens on port :3333
# start backend
cd ams-data-app/backend
npm start
To display some data in the React App, you can send the example data:
curl -X POST -H "Content-Type: application/json" -d '{
"coordinates": {
"latitude": 52.370216,
"longitude": 4.895168
},
"scooters": [
{
"id": 1,
"scooterId": "scooter-1",
"geometry": {
"type": "Point",
"coordinates": [4.895168, 52.370216]
},
"operator": "Operator 1",
"availabilityStatus": true,
"name": "Scooter 1",
"maxSpeed": 25,
"currentLocation": "Amsterdam",
"licensePlate": "ABC123",
"numberOfAvailableHelmets": 2,
"distance": 0.5
},
{
"id": 2,
"scooterId": "scooter-2",
"geometry": {
"type": "Point",
"coordinates": [4.8746, 52.369553]
},
"operator": "Operator 2",
"availabilityStatus": true,
"name": "Scooter 2",
"maxSpeed": 20,
"currentLocation": "Amsterdam",
"licensePlate": "XYZ789",
"numberOfAvailableHelmets": 0,
"distance": 1.2
}
]
}' http://localhost:3333/scooters
or
curl -k -X POST -H "Content-Type: application/json" -d '{
"coordinates": {
"latitude": 52.370216,
"longitude": 4.895168
},
"current_weather": {
"temperature": 20,
"windspeed": 10,
"weathercode": "Sunny",
"time": "2023-04-06T14:25:00Z"
}
}' http://localhost:3333/weather
- Create namespace
demo
oc new-project demo
- In resources/app.yaml edit
REACT_APP_BACKEND_URI
ENV variable to match your OpenShift hostname:
env:
- name: REACT_APP_BACKEND_URI
value: http://ams-data-app-api-route-demo.apps.<HOSTNAME>
for example:
env:
- name: REACT_APP_BACKEND_URI
value: http://ams-data-app-api-route-demo.apps.zroubali.serverless.devcluster.openshift.com
- Deploy resources
oc apply -f resources/
- Deploy functions
func deploy -p weather
func deploy -p scooters
func deploy -p responder