DEV Community: Takumon

How to integrate TomTom API in React application

Takumon — Wed, 01 Apr 2020 06:14:29 +0000

Last month, I challenged DeveloperWeek Hackathon 2020 in SanFrancisco.
Our team built a React application using TomTom which is APIs of Maps, Directions, Places, and Traffic for mobile application.
If you are interested in the Hackathon's project, please see Devpost.

In this article, based on my experience in the hackathon, I explain how to build a React application using TomTom APIs in the following steps.
Let's dive in!

Show a Map

At first, you should import javascript and css file of TomTom APIs from CDN in index.html

<!DOCTYPE html>
<html lang="en">
<head>
  (snip)
  <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.45.0/maps/maps.css'>
  <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.45.0/maps/css-styles/routing.css'/>
  <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.45.0/maps/css-styles/poi.css'/>
  <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.45.0/maps/css-styles/traffic-incidents.css'/>

  <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.45.0/maps/maps-web.min.js"></script>
  <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.45.0/services/services-web.min.js"></script>
  (snip)
</head>
<body>
  (snip)
</body>
</html>

In a react component, you add a div that is the container for the map.

    <div id="map">

Finally, in the component, you add the following process to load a map.

  componentDidMount() {
    // snip
    const tt = window.tt

    const map = tt.map({
      key: process.env.REACT_APP_TOM_TOM_API_KEY,
      container: 'map',
      style: 'tomtom://vector/1/basic-main'
    })
    map.addControl(new tt.FullscreenControl())
    map.addControl(new tt.NavigationControl())

    this.map = map
    this.tt = tt
    this.points = [] // for management of points
    // snip
  }

If you want to specify the center of the map, you should add the following process.

  componentDidMount() {
    // snip
    const self = this
    map.on('load', () => {
      this.map.flyTo({
        center: {
          lng: longitudeValue,
          lat: latitudeValue,
        },
        zoom: 14, // you can also specify zoom level
      })
    })
    // snip
  }

Put Points on Map

You can put points on the map you created.
This process is very simple.

    new this.tt.Marker({
      color: '#2aceeb', 
      width: '20',
      height: '20'
    })
    .setLngLat([longitudeValueOfPoint, latitudeValueOfPoint])
    .addTo(this.map) // Don't forget to specify a map to be display

Show a Modal on Point

You can show modal on the points you created.
Here's an example of using the TomTom API to search for restaurants in the vicinity and putting points for the search results.

    const response = await this.tt.services.fuzzySearch({
        key: apiKey,
        center: this.map.getCenter(), // Search in the vicinity of the area indicated on the map
        query: 'restaurant',
        categorySet: '7315025',　// Italian's category code,
    })
    .go()

    response.results.forEach(result => {
    const popup = new this.tt.Popup({offset: 30}).setHTML(this.createPopupContent(result));
    const marker = new this.tt.Marker()
                    .setLngLat(result.position)
                    .setPopup(popup)
                    .addTo(this.map)

    this.markers.push(marker) // Define this line so that you can control marker later.

Route Search

TomTom APIs also provides Navigation function.
Here's an example of getting a route in text format.

    const locations = `${lngOfOrigin},${latOfOrigin}:${lngOfDestination},${latOfDestination}`

    const { routes } = await this.tt.services.calculateRoute({
      locations,
      instructionsType: 'text',
      key: apiKey,
    }).go()

    const routesDirections = routes.map(route => {
      const { instructions } = route.guidance
      return instructions.map(i => {
        let result = ''

        switch (i.maneuver) {
          case 'TURN_LEFT':
            result+='↰ '
            break
          case 'TURN_RIGHT':
            result+='↱  '
            break
          case 'ARRIVE_RIGHT':
          case 'ARRIVE:LEFT':
          case 'WAYPOINT_REACHED':
            result+='☑ '
            break
        }
        result += i.message.replace('waypoint','pickup area')
        return result
      })
    })
  }

TomTom APIs is feature-rich. You can make a great mobile app depending on your ideas. I hope you'll give it a try.

Biometric Signature ID in VR payment use case

Takumon — Wed, 18 Dec 2019 01:39:12 +0000

We are proud to announce that TIS exhibited a VR payment demo application powered by Biometric Signature ID(BSI) at the exclusive invitation-only 16th JCB World Conference held in Hawaii on 16 and 17 October.

Environment and Challenges around VR/AR

As like People's life was dramatically changed by Web/Mobile technologies, the same change is taking place in VR innovation.

As Mark Zuckerberg, Facebook CEO, declared "The time is Now" at Oculus Connect 6, recent VR/AR industry's evolution is remarkable. There are many topics, small and reasonable hardware devices like Oculus Quest, killer contents like Beat Savor, AR development eco-system by Apple/Google, and enlargement of the enterprise market...

TIS, the leading company of financial systems in Japan, has started thinking about a payment system in VR. Currently, the main challenge in VR is about UI. Many practices have been introduced; for example, tracking motions, showing displays, and a character inputs. but no best solution has yet emerged. Although further discussions are needed to share a common vision of the future payment system, No practical method has been stable to realize smooth purchases in VR content so far.

Overview of Demo

We have exhibited a concept model solving this problem simultaneously sustaining robust security at the conference.

It is frustrating to input conventional passwords or PINs in VR space. Biometric information like fingerprint, face or iris is difficult to capture without attaching sensors. Besides, if it is stolen once, it cannot be changed easily and re-used.

Therefore, TIS integrated BSI's signature recognition technology into VR EC's check out procedure. The "signature" is widely regarded as a primitive card payment experience only in the real world; however, this technology is a biometric authentication based on machine learning that learns users' writing speed, order, and behavior, patterns, that has realized 99.97% protection against imposters and 98% true user approval.

Due to the authentication system being a combination of knowledge-based and biomatric-based, it is still difficult to crack even if the signature was stolen, because imposters can’t duplicate the drawing patterns.

Although some training will be necessary (please remember when you trained using keyboard, mouse, and touchpad), users will soon get used to signing in VR space, making their digital signature as their own trademark while having an enjoyable experience.

Our Vision

We hope to realize a secure and frictionless VR payment experience for users, and a simple VR payment system for merchants. It could be a service like Stripe in VR space.

Currently, this is a just prototype connected with the authentication system. However, we received great feedback from the conference and are convinced that this technology has a capability for this vision. As a next step, we are looking for a partnership move on actual use.
(NOTE in diagram Auth response is correct spelling)

We are looking for:

VR contents developer looking to integrate a payment system into their product
Retail company looking to start VR store
Payment company looking to provide new service to their merchants
Company looking to integrate a robust authentication system based on both knowledge and biometrics

If you find any interest int this demo, let us discuss the possibility of collaboration.

About Biometric Signature ID

Biometric Signature ID, based in Dallas, Texas, is the leading developer of biometric ID authentication software solutions using multi-factor authentication(MFA).

The company’s patented core technology is its gesture biometric authentication technology BioSig-ID™. This solution requires no hardware or software downloads and authenticates users by capturing their uniquemovements (gestures) as they draw a four-character password with their finger or mouse.

BioSig-ID identifies legitimate users within 99.78% accuracy while stopping imposters who already know the password within 99.97% accuracy. BioSig-ID can be deployed at any layer to gate access to any content or asset and includes a suite of forensic and reporting tools using AI, that detects and provides real-time warnings of potential fraud.

Contact

TIS Contacts: Shoichiro "Sean" Onishi, Sales onishi.shoichiro@tis.co.jp
Biometric Signature ID Contacts: Tyler Weiland, VP Marketing (+1)469-206-9343 Tyler.Weiland@biosig-id.com
Website: biosig-id.com

API World Hackathon Report No.1 - How to record a web-camera video in React

Takumon — Thu, 28 Nov 2019 01:44:25 +0000

This is a report written by a frontend engineer who joined hackathon for the first time.
I will be explaining RecordRTC for recording web-camera video in React.

What is API World

"API world" is the event organized by API. Their event page is attached below;

the world's largest vendor-neutral API conference and expo - https://apiworld.co/

AIP world has a two-days hackathon with 100 people.

Hackathon result

Our team was formed by 3 frontend developers(including myself) and 3 backend developers.

We took on the challenge of a sponsor that provides a cloud communications infrastructure called RingCentral.

Our project was selected as 1st prize of the RingCentral challenge for an interesting communication application and was selected as the top 5 of all teams.

Our project

We developed a web application that tells you the users if they are interested in the commercial they are watching.

The demo page is below.

When users click a movie, a separate modal window will be shown and the movie will be played.
At the same time, the web-camera recording will start for capturing the facial expressions of users watching the movie,
Technology stacks we used are listed below:

React (https://reactjs.org/)
WebRTC (https://webrtc.org/)
Amazon S3 (https://aws.amazon.com/s3/)
Amazon Rekognition (https://aws.amazon.com/rekognition/).

I was in charge of the following frontend implementation.

Movie list page
Web-camera recording function

Please visit our product page in Devpost (the following URL) for the details.

https://devpost.com/software/honestlook

How to record a web-camera video in React

I used a library called RecordRTC for web-camera recording in React.

Implementation of web-camera recordings is easy.

A simple example of web-camera recording function is shown below;

import React from 'react';
import RecordRTC from 'recordrtc';

class CameraRecorder extends React.Component {
  constructor(props) {
    super(props);
    this.state = { recordVideo: null };

    this.requestUserMedia = this.requestUserMedia.bind(this);
    this.startRecord = this.startRecord.bind(this);
    this.stopRecord = this.stopRecord.bind(this);
    this.getUserMedia = this.getUserMedia.bind(this);
  }

  requestUserMedia() {
    this.getUserMedia(stream => {
      this.setState({ src: window.URL.createObjectURL(stream) });
    });
  }

  startRecord() {
    this.getUserMedia(stream => {
      this.state.recordVideo = RecordRTC(stream, { type: 'video' });
      this.state.recordVideo.startRecording();
    });
  }

  stopRecord() {
    this.state.recordVideo.stopRecording(() => {
      this.state.recordVideo.save();
    });
  }

  getUserMedia(callback) {
    navigator.getUserMedia({ audio: false, video: true }, callback, error => alert(JSON.stringify(error)));
  }

  render() {
    return (
      <div>
        <button onClick={this.startRecord}>Start Record</button>
        <button onClick={this.stopRecord}>Stop Record</button>
      </div>
    )
  }
}

export default CameraRecorder;

What I felt in the hackathon

It was the first hackathon in my life and I am extremely pleased to end up as a member of the top 5 winning teams. Being able to translate my teammates’ ideas into concrete code gave me a great sense of satisfaction and I look forward to participating in future hackathons to relive the same experience as the one I experienced here.