데이터 API를 위치 기반 애플리케이션에 추가하는 방법

TomTom 트래픽 API


개발자라면 API가 왜 가치가 있는지 알 수 있을 것이다. API를 프로젝트에 통합함으로써 업계 선두주자가 제공한 해결 방안을 활용하고 그들이 제공한 미리 존재하는 코드를 사용하여 당신이 구축하고 있는 모든 것을 간소화하고 가속화할 수 있다.
데이터 API는 API가 개발자(API로 구동되는 데이터 응용 프로그램을 이용할 수 있는 최종 사용자는 물론이고)의 가치에 대한 가장 좋은 증명이다.데이터 API는 구축 블록을 제공하여 실시간 데이터 데이터를 활용하여 더 나은 사용자 환경을 만들 수 있습니다.당신은 재미있는 도구와 응용 프로그램을 구축하고 교통 상황을 이해할 수 있습니다.
TomTom은 네비게이션, 지도, 교통 제품 분야의 업계 리더이며 영향력 있고 사용하기 쉬운 네비게이션 시스템을 계속 구축한다.여러 해 동안, 이 회사는 이미 설비 제조에서 소프트웨어 개발로 중점을 확장했다.현재 그들은 그들이 가장 잘하는 선진적인 교통 정보를 공유하기로 결정했다.TomTom은 혁신적인 소프트웨어와 서비스를 생산하고 전면적인 API를 제공하여 특정 지역에 대한 상세한 교통 정보를 검색할 수 있습니다.
본고에서 우리는 TomTom의 데이터 API가 어떻게 작동하는지, 그리고 웹 서비스의 데이터 세트(TomTom 데이터에 기반한 실시간 데이터 데이터)를 어떻게 이용하여 특정한 구역에 대한 상세한 데이터 정보를 검색하는지 깊이 있게 연구하고 이를 웹과 모바일 응용 프로그램에 사용할 수 있습니다.예시에서 우리는 ReactJS에서 자바스크립트와 bash 스크립트를 사용할 것이다.

TomTom 트래픽은 어떻게 작동합니까?


TomTom Traffic API는 구름을 바탕으로 하는 실시간 교통 감시 정보 서비스로 고속도로와 2급 도로의 교통을 측정하는데 그 작업 원리는 전 세계 수십억 익명의 교통 측정(GPS 추적 또는 탐지 데이터)에서 나온 것이다.이 서비스는 이미 10년 동안 존재해 왔다. 이 회사는 세계 각지의 사람들이 어디에 있는지, 언제, 어떻게 운전하는지에 관한 대량의 빅데이터를 방문할 수 있다.
이런 양질의 서비스를 제공하기 위해 데이터는 전통적인 출처(예를 들어 도로 감응 회로, 교통 감시 카메라), 현대적인 출처(예를 들어 수백만 명의 익명 휴대전화 사용자의 데이터)와 역사 데이터에서 나온다.그리고 TomTom 데이터 센터는 정보를 정리하여 더욱 필터링하고 개선한 다음에 이를 관련 실시간 교통 정보로 고객에게 나누어 2분에 한 번씩 업데이트를 보냅니다.교통 데이터는 믿을 만하고 정확하며 빈번하며 범위가 넓다.작은 도로라도 교통 체증, 도로 폐쇄, 지연과 같은 많은 세부 사항을 제공했다.
TomTom 데이터 품질을 고려하여 우리는 이 데이터 기반의 데이터 API 세트를 사용하여 유용하고 신뢰할 수 있으며 고품질의 응용 프로그램을 만들 자신이 있습니다.

TomTom 및 데이터 API 시작


데이터 API는 웹 서비스로 실시간 데이터 데이터로 사용자 친화적인 응용 프로그램을 구축하여 창의력을 발휘할 수 있습니다.이 서비스는 개발자를 고려하여 구축된 것으로 RESTful API를 통해 사용할 수 있으며 매우 광범위한 시장 커버율을 가지고 있다.
TomTom Developer Portal에서 이 API를 사용하여 시작하고 실행하는 데 필요한 모든 것을 찾을 수 있습니다.당신이 해야 할 첫 번째 일은 포털에 계좌를 만드는 것입니다.홈 페이지에서 전자 메일 주소를 입력하고 무료 API 키 얻기 버튼을 클릭합니다.
등록 또는 로그인 후 API 키를 수신할 새 응용 프로그램을 만듭니다.애플리케이션에 액세스할 API를 활성화하려면 이름이 필요합니다.이 예에서 우리가 사용할 제품은 교통 흐름 API와 교통 사건 API이다.관심 있는 경우 교통 흐름 API 및 교통 이벤트 API 제품을 선택하고 를 클릭하여 응용 프로그램을 만듭니다.
교통 사건 API는 교통 체증, 사건, 사고와 지연에 대한 정확한 정보를 제공하여 지도에 표시할 수 있다.교통 흐름 API는 특정 도로 네트워크의 관찰 속도(현재, 자유 흐름)와 운행 시간에 대한 정보를 제공한다.
본고는 TomTom 트래픽 및 트래픽 이벤트 API를 사용하는 방법을 중점적으로 설명하지만 개발자는 유사한 기능을 포함하는 웹 및 모바일 SDK에 액세스할 수 있습니다.다음 링크를 통해 각 SDK에 대한 자세한 내용을 확인할 수 있습니다.
  • Maps SDK for Web
  • Maps SDK for Android
  • Maps SDK for iOS
  • 예제 용례 #1


    사용자의 위치를 찾아서 그들이 있는 위치에 따라 실시간 교통 체증과 사건 데이터를 보여 줍니다.사용자가 모바일 장치에 있을 때 (설령 그들이 본 컴퓨터의 응용 프로그램을 사용하지 않고 사이트에 접속한다고 해도) GPS 위치를 물어볼 수 있다.이 예에서는 사용자의 IP 주소에 따라 사용자를 지정합니다.
    우리는 교통 사건 API 세트의 교통 사건 상세 정보 API를 사용할 것이다.이 API의 요청 URL은 다음 형식을 사용합니다.
    https://api.tomtom.com/traffic/services/{versionNumber}/incidentDetails/{style}/{boundingBox}/{zoom}/{trafficModelID}/{format}?key={API_KEY}&language={string}&projection={string}&geometries={string}&expandCluster={boolean}&originalPosition={boolean} 
    
    매개 파라미터의 의미를 더욱 깊이 이해하자.
    https://api.tomtom.com
    /traffic/services                        // traffic services
    /{versionNumber}                         // version of the service to call
    /incidentDetails                           // incident details service
    /{style}                                 // style of tile to be rendered
    /{boundingBox}                           // bottom-left latitude,                   
                                                bottom-left longitude,   
                                                top-right latitude, 
                                                top-right longitude
    /{zoom}                                  // zoom level
    /{trafficModelID}                        // traffic model ID (default -1)
    /{format}                                // xml, json, jsonp
    ?key={API_KEY}                           // API key
    &language={string}                       // language of descriptions
    &projection={string}                     // type of coordinate system   
                                                (EPSG900913 or EPSG4326)
    &geometries={string}                     // type of vector geometry added to  
                                                incidents
    &expandCluster={boolean}                 // send clustered points
    &originalPosition={boolean}              // return original position of  
                                                incident and the one shifted to  
                                                beginning of traffic tube
    
    이 요청에 기반한 응답 예:
    {
        "tm": {
            "@id": "1537875895566",
            "poi": [
                {
                    "id": "europe_CLUSTER_9_-1546746781",
                    "p": {
                        "x": 11.368265,
                        "y": 48.002922
                    },
                    "ic": 13,
                    "ty": 1,
                    "cbl": {
                        "x": 11.28824,
                        "y": 47.969362
                    },
                    "ctr": {
                        "x": 11.44829,
                        "y": 48.03646
                    },
                    "cs": 13,
                    "l": 27210
                },
                {
                    "id": "europe_HD_DE_TTR131344535899136",
                    "p": {
                        "x": 11.237004,
                        "y": 48.082583
                    },
                    "ic": 9,
                    "ty": 1,
                    "cs": 0,
                    "d": "roadworks",
                    "c": "new roadworks layout",
                    "f": "Wörthsee (A96)",
                    "t": "Germering-Süd (A96)",
                    "l": 5840,
                    "dl": 113,
                    "r": "A96/E54"
                }
            ]
        }
    }
    
    API를 사용하는 방법을 더 잘 이해했으니 간단한 응용 프로그램을 만들어 봅시다.우리는 ReactJS를 사용하여 API를 사용하고 다음과 같이 데이터를 조작할 수 있습니다.

    색인JS 회사


    import React, { Component } from "react";
    import ReactDOM from "react-dom";
    import publicIP from "public-ip";
    import geoPoint from "geopoint";
    import IncidentCategory from './components/incident_category';
    import IncidentData from './components/incident_data';
    import IncidentLegend from './components/incident_legend';
    // Your API KEY can be hardcoded, but I recommend setting it as an env variable.
    const API_KEY = '*****';
    class App extends Component {
     constructor() {
       super();
       this.state = {
           error: null,
           isLoaded: false,
           trafficData: []
       };
     }
     componentDidMount() {
       publicIP.v4()
       .then(ip => fetch(`https://ipapi.co/${ip}/json`))
       .then(res => res.json())
       .then(result => this.getBoundingBox(result.latitude, result.longitude))
       .then(
           values =>
           fetch(`https://api.tomtom.com/traffic/services/4/incidentDetails/s3/${values[0]._degLat},${values[0]._degLon},${values[1]._degLat},${values[1]._degLon}/10/-1/json?key=${API_KEY}&projection=EPSG4326`)
       ) 
       .then(res => res.json())
       .then(
           payload => {
               this.setState({
                   isLoaded: true,
                   trafficData: payload["tm"]["poi"]
               });
           },
           error => {
               this.setState({
                   isLoaded: true,
                   error
               });
           }
       )
     }
     getBoundingBox(latitude, longitude) {
       const bboxValues = new geoPoint(latitude, longitude).boundingCoordinates(10, true);
       return bboxValues;
     }
     render() {
       const { error, isLoaded, trafficData } = this.state;
       let date = new Date();
       let currentDate = date.toDateString();
       let currentTime = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
       if (error) {
        return 
            Error: {error.message};
       }
       else if (!isLoaded) {
           return  Loading...;
       } 
       else {
           return (
              Traffic Incidents
                   {currentDate}
                   Time: {currentTime}
    COMPONENTS/INCIDENT_DATA.JS
    
    
    import React from 'react';
    const IncidentData = (props) => {
       const incidents = props.data;
    
       return (
    
               {incidents.map((el) => {  
                   return (
    
                           {el["p"]["x"]}, {el["p"]["y"]}   // location
                           {el["l"]}                                    // length of delay
                           {el["d"]}                                   // description
                           {el["ic"]}                                  // type
                           {el["ty"]}                                 // severity
    
                   )
               })}
    
       );
    };
    export default IncidentData;
    
    추가 코드는 여기에서 확인할 수 있습니다. https://sourcegraph.com/github.com/infoverload/trafficincidents@f8ea4e88ea5471f7a91bbc3161c3390afbcbe3d8/-/blob/src/index.js 브라우저의 결과는 다음과 같습니다.

    예제 용례 #2


    TomTomAPI와 상호 작용할 수 있는 간단한 방법은 CLI 도구에 통합하는 것입니다.이 예에서 교통 흐름 API 세트의 API를 사용합니다.흐름 구간 데이터 API는 제공된 좌표에 따라 구간 속도와 운행 시간에 대한 정보를 제공합니다.
    이 API의 요청 URL은 다음 형식을 사용합니다.
    https://api.tomtom.com/traffic/services/{versionNumber}/flowSegmentData/{style}/{zoom}/{format}?point={latitude},{longitude}&unit={string}&thickness={integer}&openLr={boolean}&key={API_KEY} 
    
    우리는 위도와 경도 값을 입력으로 받아들이는 기본적인 bash 스크립트를 작성할 수 있다.
      #!/bin/bash
    echo "---------- Traffic Flow Segment Data -----------"
    echo "This service provides information about the speeds and travel times of the road segment closest to the given coordinates."
    bail() {
      echo "${1}"
      exit 1
    }
    check_floating_point() {
      [ $(echo ${1} | grep "^[0-9]*[.][0-9]*$") ] || bail "Invalid input. Try again."
    }  
    
    read -p "Latitude: " latitude
    check_floating_point ${latitude}
    
    read -p "Longitude: " longitude
    check_floating_point ${longitude}
    echo "Here is the traffic flow segment data for the area near ${latitude} and ${longitude}"
    curl --silent "https://api.tomtom.com/traffic/services/4/flowSegmentData/absolute/10/json?point=${latitude}%2C${longitude}&key=*****" -H "accept: */*" | jq
    
    결과:

    면책 성명 및 기타 용례


    제공된 예는 생산용 예가 아니라 API를 통합하고 사용하는 방법에 대한 생각만 제공합니다.그것들을 이용할 수 있는 무수한 다른 방법도 있다.
    그 밖에 본고는 데이터 API 서비스에서 제공하는 일부 API만 연구하고 있음을 주의하십시오.현재 교통 상황의 심각성을 표시하거나 속도를 줄이는 정확한 위치(TomTom 지도에서 컬러 파이프를 사용)와 같은 다른 일을 할 수 있는 API도 더 많다.또한 TomTom API에서 제공하는 교통 이벤트 및 유속 정보를 사용하여 웹의 다른 교통 관련 실시간 개방 데이터와 결합하여 더욱 전면적인 교통 관리 모니터링 응용 프로그램을 구축할 수 있습니다.가능성은 무한하다!그러나 예전과 같이 책임감 있는 API 소비자가 되도록 확보하고 다른 서비스와 잘 어울리는 방식으로 시스템을 설계하십시오.
    본고는 최초https://developer.tomtom.com/blog에 발표되었다.원작자는 일찍이

    좋은 웹페이지 즐겨찾기