실시간 대중교통 시간표 앱을 만드는 방법

PubNub Developer Relations - Mar 1 - - Dev Community

실시간 정보, 대중교통 시스템의 변화하는 시나리오, 사물 인터넷(IoT)이 만나는 곳, 바로 교통 사물 인터넷(IoTT)이 있습니다. 실시간 데이터로 작동하는 고도로 발전된 사용자 친화적인 대중교통 앱이라고 생각하면 됩니다. IBM, Moovit, Google Maps와 같은 거대 기업들이 '지능형 교통'을 활용하고자 하는 가운데, IoTT는 우리가 교통을 인식하는 방식을 혁신하여 매일 통근하는 사람들의 접근성을 높일 준비가 되어 있습니다.

특히 모바일 앱 개발에 종사하는 개발자는 이 새로운 발전이 자신에게 어떤 영향을 미치고 어떻게 참여할 수 있는지 궁금할 것입니다. iOS를 사용하든 안드로이드를 사용하든 PubNub과 같은 실시간 데이터 스트림 네트워크는 이러한 변화를 탐색할 수 있는 관문이 될 수 있습니다. 대중교통 정보를 처리하는 이 새로운 물결은 IoT의 흥미로운 미래를 현실에 가깝게 가져다주며, 기기가 채널에 연결하여 현재 위치나 목적지 등을 방송하고 통신할 수 있는 모바일 기기용 대중교통 앱을 개발할 수 있는 시대를 상상하게 합니다. 이 모든 실시간 정보를 바탕으로 교통수단을 그룹화하여 효율성을 극대화하는 미래를 상상해 보세요.

PubNub은 이러한 진화의 최전선에 있는 강력한 도구로, 유명한 인증과 자격을 바탕으로 IoT 분야의 최첨단 기술과 신뢰할 수 있는 서비스를 통해 혁신을 거듭하고 있습니다. 이를 통해 운송 시스템의 작동 방식을 재정의할 수 있는 소프트웨어 애플리케이션을 개발할 수 있는 유망한 기회를 제공합니다. 이러한 종류의 애플리케이션은 교통 업계에서 점점 더 중요해지고 있으며 통근자, 대중교통 기관 및 교통 서비스 제공업체에 도움이 되는 것으로 입증되고 있습니다.

그렇다면 어떻게 시작할까요? 간단한 예시를 통해 시작해보겠습니다. 이 시대에는 공공 데이터가 풍부하고 쉽게 이용할 수 있습니다. 공공 구역 데이터부터 지하철 시간까지, 많은 도시에서 사용하기 쉬운 API를 통해 공공 데이터를 제공합니다. 이 글에서는 베이 지역에서 가장 큰 철도 시스템에 대한 다양한 지표, 통계 및 일정을 제공하는 API인 BART(Bay Area Rapid Transit) API를 기반으로 실시간 업데이트가 가능한 교통 일정 애플리케이션을 만들어 대중교통 앱에 큰 도움이 될 수 있는 방법을 살펴봅니다.

교통 앱을 만드는 방법 프로그래밍 범위

이 문서에서는 BART API를 활용하여 실시간 대중 교통 일정 애플리케이션을 구축하는 방법을 안내하여 Google Maps, Moovit, Uber와 같이 사용자에게 실시간 업데이트 및 서비스 알림을 제공하는 방법을 설명합니다. 출발 시간부터 서비스 중단 가능성까지 유용한 정보를 제공하여 사용자 경험을 개선하는 것이 목표입니다. 지하철역이나 버스 정류장과 같은 역 위치를 가져와 지오해시로 변환하는 방법을 배우게 됩니다. 정보를 수집한 후 샌프란시스코에서 사용자의 위치를 정확히 파악한 다음(또는 우리의 경우 스푸핑), 사용자의 위치를 인근 역과 일치시키면 관련 데이터를 가져오기 위해 더 많은 API 호출이 필요합니다.

예상 출발 시간을 얻으면 지도 인포박스에 시간을 표시합니다. 전체 과정은 코드 스니펫과 설명이 포함된 단계별 튜토리얼을 통해 간단하게 설명되어 있습니다.

교통편 일정 앱 시작하기

실시간 대중교통 앱을 만들기 위한 설정은 이전 자바스크립트 지오해싱 튜토리얼과 유사합니다. 효과적인 여행 계획 알고리즘과 실시간 데이터의 힘을 활용하면 대중교통과 관련된 실시간 업데이트를 효과적으로 관리할 수 있는 iOS, Android 및 기타 모바일 디바이스용 사용자 친화적인 고유한 모바일 앱을 만들 수 있습니다.

먼저, 앱의 ETA 모듈을 위해 "node"와 "npm"이 필요합니다. 이 용어가 생소하다면 PubNub의 Node.js에 대한 포괄적인 소개를 살펴보세요.

사용되는 노드 패키지는 다음과 같습니다:

  • 브라우저에서 노드 패키지를 사용하려면Browserify.

  • 위도와 경도를 문자열로 인코딩하는ngeohash.

  • 브라우저 외부의 HTTP 요청을 위한요청.

  • XML 리턴을 JSON으로 변환하는xml2js.

이러한 패키지는 API를 호출하고, 데이터를 처리하고, 애플리케이션에 필요한 작업을 수행하는 데 필요한 기능을 제공합니다. 예제 코드를 보면 이러한 패키지가 누락되어 있음을 알 수 있습니다. 프로젝트 베이스 폴더로 이동하여 명령줄에 npm install\을 입력하기만 하면 됩니다. 그러면 package.json\의 요구 사항에 따라 패키지가 설치됩니다.

다음 섹션에서는 지리적 위치 데이터 작업, 푸시 알림의 효율적인 처리, 차량 위치의 효과적인 표시, 애플리케이션으로 멋진 사용자 경험을 만드는 방법에 대해 자세히 살펴보겠습니다. 기대해주세요!

대중교통 일정 애플리케이션을 위한 사용자 해시 및 지도 위치 파악하기

HTML5 지리적 위치 API는 디바이스 IP, RFID, WIFI, 블루투스 MAC 주소, GPS 또는 사용자 입력을 기반으로 지리적 위치(경도 및 위도)에 액세스할 수 있는 편리한 도구입니다. Uber나 Google 지도와 같은 교통 앱과 유사한 방식으로 사용자의 위치를 실시간으로 추적하기 위해 이 도구를 사용하는 방법은 다음과 같습니다:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
  //...
Enter fullscreen mode Exit fullscreen mode

이 코드는 브라우저가 지리적 위치를 지원하는지 확인한 다음 사용자의 현재 위치를 가져옵니다. 이 튜토리얼에서는 테스트 목적으로 베이 지역의 위치를 나타내도록 좌표를 설정하겠습니다.

    that.lat = 37.6;
    that.lng = -122.4;
    var lat = that.lat;
    var lng = that.lng;
Enter fullscreen mode Exit fullscreen mode

앱에서 지도에 표시하려면 역 데이터가 필요합니다. 이러한 데이터를 app.js\에서 가져옵니다.

    var app = require("./app.js");
Enter fullscreen mode Exit fullscreen mode

다음으로 데이터에 대한 지역 변수를 설정합니다:

    var json_data, hash_table, hash_matches, destinations;
    …
    json_data_formatted = app.formatted_json;
    hash_table = app.hash_table;
    hash_matches = app.hash_matches;
    destinations = app.destinations;
Enter fullscreen mode Exit fullscreen mode

다음으로 PubNub와 구글 지도를 통합합니다:

    pubs();
    google.maps.event.addDomListener(window, 'load', initialize());
Enter fullscreen mode Exit fullscreen mode

130줄에서 pubs()\ 함수를 호출하고 고유한 게시 및 구독 키로 PubNub를 초기화합니다. PubNub 키가 없는 경우 PubNub 계정에 가입 하여 키를 받을 수 있습니다.

function pubs() {
     var pubnub = new PubNub({
       publishKey: "publish_key",
       subscribeKey: "subscribe_key",
       userId: "UUID"
   });
},
Enter fullscreen mode Exit fullscreen mode

Google 지도의 로직은 이전 글 중 하나에서 차용한 것입니다. PubNub 연결은 채널 "mymaps"로 전송된 좌표 메시지를 수신한 다음 수신된 정보를 기반으로 사용자의 마커를 이동합니다.

Google 지도의 initialize()\ 함수가 호출되어 지도에 속성을 추가합니다. 중요한 것은 각 '해시_매치'에 대한 마커를 추가한다는 것입니다.

    var business_marker = new google.maps.Marker({position: {lat: match_lat, lng: match_lng}, map: map});
    business_marker.setMap(map);
Enter fullscreen mode Exit fullscreen mode

그런 다음 정보 창에 대한 이벤트 리스너가 추가됩니다.

    google.maps.event.addListener(business_marker, 'mouseover', function() {
      infowindow.open(map,business_marker);
    });
    google.maps.event.addListener(business_marker, 'mouseout', function() {
      infowindow.close(map,business_marker);
Enter fullscreen mode Exit fullscreen mode

대중교통 앱의 기차 시간표 검색하기

지도에 항목을 표시하는 작업을 완료했다면 다음 단계는 출발 시간에 대한 정보를 추가하는 것입니다. 이 작업은 app.js\로 돌아가서 각 일치 항목에 대한 데이터로 해시_매치를 채우면 됩니다.

이 예제에서는 Millbrae 역에 대한 데이터만 저장합니다. Millbrae 데이터에 대해 Ajax 호출을 수행합니다:

    $.ajax({
      type: "GET",
      url: "data/MLBR.json",
      dataType: "json",
      success: function(file) {
        main_two(file);
      }
    });
Enter fullscreen mode Exit fullscreen mode

이 함수인 'main_two'는 데이터를 포맷하고 Google 지도와 상호 작용할 수 있도록 준비합니다.

대중 교통 일정 표시하기

이제 gmap.js\를 다시 방문합니다. 여기에서 다양한 목적지 이름을 반복합니다. 이 경우 밀브래\는 하드코딩되었지만, hash\_matches\와 destinations\ 사이의 약어를 일치시키는 변수를 사용하여 관련 시간을 표시하는 것이 이상적입니다.

    var times = destination.times;
    dest_string = dest_string + "<p><i>" + destination.abbreviation + ":" + "</i><p>";
    times.forEach(function(time) {
      dest_string = dest_string + " " + time;
    });
Enter fullscreen mode Exit fullscreen mode

다음으로 정보 창을 지정합니다:

    var infowindow = new google.maps.InfoWindow({
      content: "<b>" + BusinessName + "</b>" +
    "<p>" + dest_string + "</p></p></p>"
    });
Enter fullscreen mode Exit fullscreen mode

끝입니다! 지도에 항목을 성공적으로 표시하고 출발 시간에 대한 정보를 추가했습니다. 맵박스, 맵킷, 구글맵과 같은 API를 사용한 실시간 매핑과 지리적 위치에 대해 더 자세히 알고 싶으시다면 다른 튜토리얼을 확인해 보세요.

PubNub 체험하기

PubNub을 직접 체험해보고 싶으신가요? 라이브 투어를 통해 5분 이내에 모든 PubNub 기반 앱의 핵심 개념을 이해할 수 있습니다. PubNub 계정에 가입하고 프로젝트를 시작할 수 있습니다. PubNub과 협력하면 실시간 업데이트, 푸시 알림, 사용자 친화적인 인터페이스를 통해 앱에 활기를 불어넣고 교통 앱의 새로운 가능성을 열 수 있습니다.

Apple 사용자든 Android 사용자든, 버스, 지하철, 자전거 공유로 출퇴근하든 실시간 대중교통 앱을 편리하게 사용할 수 있는 것은 매우 중요합니다. PubNub의 강력한 API와 교통 기관에서 쉽게 액세스할 수 있는 GTFS 데이터를 활용하면 대중교통 혁신에 기여하여 통근자, 교통 서비스 및 기관 모두를 위한 효율적이고 사용자 친화적인 디지털 솔루션을 만들 수 있습니다. 교통 체증, 도착 시간에 대한 불확실성, 실시간 업데이트를 통한 원활한 대중교통을 상상해 보세요. 기다릴 이유가 없죠? PubNub과 함께 교통 시스템을 혁신하는 여정에 동참해 보세요.

콘텐츠

교통 앱을 만드는 방법: 프로그래밍 범위교통일정 앱 시작하기교통일정 앱의사용자해시 및 지도 위치교통 앱의기차 시간표검색교통 일정 앱의 시간표표시PubNub체험하기

펍넙이 어떤 도움을 줄 수 있나요?

이 문서는 원래 PubNub.com에 게시되었습니다.

저희 플랫폼은 개발자가 웹 앱, 모바일 앱 및 IoT 디바이스를 위한 실시간 인터랙티브를 구축, 제공 및 관리할 수 있도록 지원합니다.

저희 플랫폼의 기반은 업계에서 가장 크고 확장성이 뛰어난 실시간 에지 메시징 네트워크입니다. 전 세계 15개 이상의 PoP가 월간 8억 명의 활성 사용자를 지원하고 99.999%의 안정성을 제공하므로 중단, 동시 접속자 수 제한 또는 트래픽 폭증으로 인한 지연 문제를 걱정할 필요가 없습니다.

PubNub 체험하기

라이브 투어를 통해 5분 이내에 모든 PubNub 기반 앱의 필수 개념을 이해하세요.

설정하기

PubNub 계정에 가입하여 PubNub 키에 무료로 즉시 액세스하세요.

시작하기

사용 사례나 SDK에 관계없이 PubNub 문서를 통해 바로 시작하고 실행할 수 있습니다.

Image
what is ReactJS?
Image
129. Sum Root to Leaf Numbers

php, leetcode, algorithms, programming
Image
79. Word Search

php, leetcode, algorithms, programming
Image
How to ditch Neon

postgres, neon, database, docker
Image
Learn SwiftUI (Day 11/100)

swift
Image
2000. Reverse Prefix of Word

php, leetcode, programming, algorithms
Image
🎙️💥 The Backstage Community Wars Have Officially Begun

devops, internaldeveloperportals, platformengineering, productivity
Image
Code Smell 250 - Premature Memoization

webdev, beginners, programming, python
Image
Angular Data Binding , one Way - two Way - event Binding

angular
Image
🄸 🄰🄼 🄱🄾🄾🅂
Image
Learn SwiftUI (Day 10/10)

swift
Image
Ensuring Business Continuity: Backup, Disaster Recovery, RTO, and RPO

backup, linux, recovery, devops
Image
Chicken Adobo
Image
help

help
Image
Android Development
Image
Power of Serverless Computing in GCP

gcp
Image
Postgres partitioning performance: Hash vs. List

postgres, performance, hash, index
Image
Day 956 : Fam

hiphop, code, coding, lifelongdev
Image
VPS
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .