LoRaWAN で家から子供の初めてのおつかいを見守ろう

ssh root@<gateway-ip>

$ npm ci

$ cdk bootstrap

$ cdk deploy LoracloudStack
$ cdk deploy LocationStack

npm i -g @aws-amplify

amplify --version

amplify configure

npx create-react-app lorawan-location-amplify
cd lorawan-location-amplify/

amplify init

npm install aws-amplify maplibre-gl maplibre-gl-js-amplify @aws-amplify/ui-react

amplify add geo

? Select which capability you want to add: Map (visualize the geospatial data)
✔ geo category resources require auth (Amazon Cognito). Do you want to add auth now? (Y/n) · yes
Using service: Cognito, provided by: awscloudformation
 
 The current configured provider is Amazon Cognito. 
 
 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.
Successfully added auth resource lorawanlocationampli51a4ac50 locally

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

✔ Provide a name for the Map: · lorawanLocationMap
✔ Who can access this Map? · Authorized and Guest users
The following choices determine the pricing plan for Geo resources. Learn more at https://aws.amazon.com/location/pricing/
✔ Are you tracking commercial assets for your business in your app? · No, I do not track devices or I only need to track consumers' personal devices
Successfully set RequestBasedUsage pricing plan for your Geo resources.
Available advanced settings:
- Map style & Map data provider (default: Streets provided by Esri)

✔ Do you want to configure advanced settings? (y/N) · no
⚠️ Auth configuration is required to allow unauthenticated users, but it is not configured properly.
⚠️ Adding Map to your project requires the Auth category for managing authentication rules.
Successfully updated auth resource locally.
✅ Successfully added resource lorawanLocationMap locally.

✅ Next steps:
"amplify push" builds all of your local backend resources and provisions them in the cloud
"amplify publish" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud

amplify push

✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev
    
┌──────────┬──────────────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name                │ Operation │ Provider plugin   │
├──────────┼──────────────────────────────┼───────────┼───────────────────┤
│ Auth     │ lorawanlocationamplixxxxxxxx │ Create    │ awscloudformation │
├──────────┼──────────────────────────────┼───────────┼───────────────────┤
│ Geo      │ lorawanLocationMap           │ Create    │ awscloudformation │
└──────────┴──────────────────────────────┴───────────┴───────────────────┘
? Are you sure you want to continue? Yes

import { createMap } from "maplibre-gl-js-amplify";
import Amplify from "aws-amplify";
import "maplibre-gl/dist/maplibre-gl.css";
import awsconfig from "./aws-exports";

Amplify.configure(awsconfig);

function App() {
  async function initializeMap() {
    // おつかいのコースがよく見えるようにマップを表示
    const map = await createMap({
      container: "map",
      center: [139.715752, 35.632865],
      zoom: 16.69,
      hash: true,
    });
    return map;
  }

  initializeMap();
  return (
    <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          height: "120px",
          backgroundColor: "#232F3E",
        }}
      >
        <h1 style={{ paddingLeft: "20px", color: "#FF9900" }}>
          LoRaWANで家から子供の初めてのおつかいを見守ろう
        </h1>
      </div>
      <div id="map" style={{ height: "100%" }} />
    </div>
  );
}

export default App;

npm start

amplify add geo

? Select which capability you want to add: Geofencing (visualize virtual perimeters)
✔ Provide a name for the ジオフェンス Collection: · geofenceCollection61600b14
✔ Geofencing requires a Cognito user group for Admin only access control settings. Do you want to add it now? (Y/n) · yes
Select "Create or update Cognito user pool groups" to add a Cognito user group
Please note that certain attributes may not be overwritten if you choose to use defaults settings.
Using service: Cognito, provided by: awscloudformation
What do you want to do? Create or update Cognito user pool groups
? Provide a name for your user pool group: amplifygeo
? Do you want to add another User Pool Group No
✔ Sort the user pool groups in order of preference · amplifygeo
✅ Successfully updated auth resource reactgeob25a166b locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

✅ Successfully updated resource update locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Must pick at least 1 of 1 options. Selecting all options [amplifygeo]
✔ What kind of access do you want for amplifygeo users? Select ALL that apply: · Read geofence, Create/Update geofence, Delete geofence, List geofences

✅ Successfully added resource geofenceCollection61600b14 locally.

✅ Next steps:
"amplify push" builds all of your local backend resources and provisions them in the cloud
"amplify publish" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud

amplify push

amplify update geo
? Select which capability you want to update: Map (visualize the geospatial data)
Only one option for [Select the Map you want to update]. Selecting [lorawanLocationMap].
✔ Restrict access by? · Individual Groups

amplify auth console
Using service: Cognito, provided by: awscloudformation
? Which console User Pool
User Pool console:（URL）

import "./App.css";
import MainView from "./MainView";
import { withAuthenticator } from "@aws-amplify/ui-react";

function App() {
  return (
    <div className="App">
      <MainView></MainView>
    </div>
  );
}

export default withAuthenticator(App);

import { createMap, AmplifyGeofenceControl } from "maplibre-gl-js-amplify";
import { Amplify } from "aws-amplify";
import "maplibre-gl/dist/maplibre-gl.css";
import awsconfig from "./aws-exports";

import "maplibre-gl-js-amplify/dist/public/amplify-ctrl-geofence.css";

Amplify.configure(awsconfig);

function App() {
  async function initializeMap() {
    const map = await createMap({
      container: "map",
      center: [139.715852, 35.63266],
      zoom: 16.69,
      hash: true,
    });
    // ジオフェンスのコントローラ作成
    const GeofenceControl = new AmplifyGeofenceControl();
    // Geofenceコントローラをマップに追加
    map.addControl(GeofenceControl);

    return map;
  }

  initializeMap();
  return (
    <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          height: "120px",
          backgroundColor: "#232F3E",
        }}
      >
        <h1 style={{ paddingLeft: "20px", color: "#FF9900" }}>
          LoRaWANで家から子供の初めてのおつかいを見守ろう
        </h1>
      </div>
      <div id="map" style={{ height: "100%" }} />
    </div>
  );
}

export default App;

amplify add api

? Select from one of the below mentioned services: REST
✔ Provide a friendly name for your resource to be used as a label for this category in the project: · lorawanLocationAPI
✔ Provide a path (e.g., /book/{isbn}): · /items
Only one option for [Choose a Lambda source]. Selecting [Create a new Lambda function].
? Provide an AWS Lambda function name: lorawanLocationFunction
? Choose the runtime that you want to use: NodeJS
? Choose the function template that you want to use: Serverless ExpressJS function (Integration with API Gateway)

Available advanced settings:
- Resource access permissions
- Scheduled recurring invocation
- Lambda layers configuration
- Environment variables configuration
- Secret values configuration

? Do you want to configure advanced settings? No
? Do you want to edit the local lambda function now? Yes

? Press enter to continue 
Successfully added resource lorawanLocationFunction locally.

Next steps:
Check out sample function code generated in <project-dir>/amplify/backend/function/lorawanLocationFunction/src
"amplify function build" builds all of your functions currently in the project
"amplify mock function <functionName>" runs your function locally
To access AWS resources outside of this Amplify app, edit the <project-dir>/amplify/backend/function/lorawanLocationFunction/custom-policies.json
"amplify push" builds all of your local backend resources and provisions them in the cloud
"amplify publish" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud
✅ Succesfully added the Lambda function locally
✔ Restrict API access? (Y/n) · no
✔ Do you want to add another path? (y/N) · no
✅ Successfully added resource lorawanLocationAPI locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

app.get("/items", function (req, res) {

const aws = require("aws-sdk");
const location = new aws.Location();

/**********************
 * Example get method *
 **********************/

app.get("/items", function (req, res) {
  // Add your code here
  const params = {
    TrackerName: "70b3d57ed004f46f",
    DeviceId: "70b3d57ed004f46f",
  };
  location.getDevicePosition(params, function (err, data) {
    console.log(data.Position);
    if(err){
      console.log(err)
    }
    res.json({ success: "get call succeed!", url: req.url, position: data.Position });
  })
});

[
  {
    "Action": ["geo:GetDevicePosition"],
    "Resource": ["arn:aws:geo:{region}:{12_digit_account_id}:tracker/{device_eui}"]
  }
]

amplify push

import { createMap, AmplifyGeofenceControl } from "maplibre-gl-js-amplify";
import Amplify from "aws-amplify";
import { Marker } from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import "maplibre-gl-js-amplify/dist/public/amplify-ctrl-geofence.css";

import awsconfig from "./aws-exports";
import { addMarker } from "./addMarker";
import { displayTracker } from "./displayTracker";

Amplify.configure(awsconfig);

function App() {
  async function initializeMap() {
    const initialPosition = [139.715852, 35.63266];
    const initialZoom = 16.69;
    const getPositionIntervalInMilliseconds = 30000;
    const map = await createMap({
      container: "map",
      center: initialPosition,
      zoom: initialZoom,
      hash: true,
    });
    const GeofenceControl = new AmplifyGeofenceControl();
    map.addControl(GeofenceControl);
    const smileyMarker = new Marker(addMarker("smiley.png"))
      .setLngLat(initialPosition)
      .addTo(map);
    setInterval(function () {
      displayTracker(smileyMarker);
    }, getPositionIntervalInMilliseconds);
    return map;
  }
  initializeMap();
  return (
    <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          height: "120px",
          backgroundColor: "#232F3E",
        }}
      >
        <h1 style={{ paddingLeft: "20px", color: "#FF9900" }}>
          LoRaWANで家から子供の初めてのおつかいを見守ろう
        </h1>
      </div>
      <div id="map" style={{ height: "100%" }} />
    </div>
  );
}

export default App;

export const addMarker = (image) => {
  var el = document.createElement("div");
  el.className = "marker";
  el.style.width = "40px";
  el.style.height = "40px";
  el.style.backgroundImage = `url(${image})`;
  el.style.backgroundSize = "cover";
  return el;
};

import { API, Auth } from "aws-amplify";

export async function displayTracker(smiley_marker) {
  const apiName = "lorawanLocationAPI";
  const path = "/items";
  const user = await Auth.currentAuthenticatedUser();
  const token = user.signInUserSession.idToken.jwtToken;
  const myInit = {
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${(await Auth.currentSession()).getIdToken().getJwtToken()}`,
    },
    response: true,
  };

  API.get(apiName, path, myInit)
    .then((response) => {
      console.log(response.data.position);
      const position_data = response.data.position;
      smiley_marker.setLngLat(position_data);
    })
    .catch((error) => {
      console.log(error.response);
    });
}

npm start

import json
import boto3

client = boto3.client('connect', region_name='ap-northeast-1')

def lambda_handler(event, context):
    print(json.dumps(event))
    is_enter_or_exit = event["detail"]["EventType"]
    print(is_enter_or_exit)
    if(is_enter_or_exit == "EXIT"):
        response = client.start_outbound_voice_contact(
            DestinationPhoneNumber='+81{phone_number}',
            ContactFlowId='{contact_flow_id}',
            InstanceId='{instance_id}',
            QueueId='{queue_id}',
        )
        print(response)

{
  "detail": {
    "EventType": "EXIT"
  }
}

cdk destroy --all

amplify delete