React Native에서 실시간 항공편 추적 응용 프로그램 구축

만약 비행기가 세계 각지에서 비행하는 것을 볼 수 있는 방식이 있다면 그것은 매우 멋있지 않겠는가.기본적으로 항공편의 실시간 위치 변화를 실시간으로 볼 수 있습니까?물론 적어도 나 같은 극객에게는 그렇다.

적극적인 해결 방안을 찾는 과정에서 실현하기 쉽지만 제 생각을 실현할 수 있습니다. - 우연히 발견Aviation Edge-API가 있는 글로벌 비행 데이터베이스입니다.하지만 이것은 RESTAPI이기 때문에 나의 실시간 요구를 만족시킬 수 없다.
이벤트 흐름 기술이 등장함에 따라 많은 데이터 공급자들은 소비자들이 REST 윤문 데이터를 빈번하게 사용하도록 하는 것이 아니라 전송 프로토콜의 실시간 흐름식 전송 데이터를 사용하는 것을 더욱 좋아한다. 이것은 쌍방에게 모두 저효과이다.
이번 검색에서 찾았습니다Ably Hub.그것은 각종 공급 업체가 제공하는 공공 위탁 관리의 무료, 개방, 상업 데이터 흐름의 시장으로 소비를 제공할 수 있다.그중 대다수는 무료로 사용된다.다행히도 나는 이 프로젝트에서 나를 가장 미치게 하는 물건을 찾았다.비행 데이터의 실시간 데이터 흐름은 비행 레이더에서 나온 데이터를 사용한다Heathrow Flights.비록 이 데이터 흐름에서 전달되는 항공편 정보는 런던 히스로 공항에 도착하는 항공편에만 한정되어 있지만, 이것은 나의 프로젝트에 있어서 이미 충분하다.
만약 당신이 Ably를 들어 본 적이 없다면, 당신은 their site 중에서 더 많은 것을 알 수 있고, 나에게 당신이 배운 것을 공유할 수 있다.
본고에서 저는 Ably Hub의 히스로 공항 항공편 제품을 어떻게 사용하는지 React Native에서 구축Realtime flight tracking 응용 프로그램을 공유하고자 합니다.
우리가 시작하기 전에 어떤 것들은 매우 좋았다.

JavaScript 지식

무료 계정 하나

React, React Hooks 및 React Native 지식

어플리케이션의 특징:

도착 및 출발 스크린: 스크린마다 공항 목록이 있고 비행기의 위치와 목적지가 표시됩니다

검색 상자: IATAID(국제항공운송협회 ID)를 사용하여 빠른 항공편 찾기

지도 구역: 우리는 지도 한 장을 가지고 이동 항공편의 현재 위치를 추적할 것이다.원점에서 대상까지의 폴리선

1단계 - 무료 계정 만들기

Ably의 무료 계정이 없으면 here 을 만들 수 있습니다.계정이 이미 있으면 Heathrow Flights product on Ably Hub 으로 이동할 수 있습니다.이것은 자체 구독 제품이다.

위의 그림에서 보듯이 제품 페이지의 오른쪽 모서리에서 "히스로 항공편 구독"단추를 찾습니다.이것은 당신의 계정이 한 개 이상의 응용 프로그램에서 항공편 데이터 흐름에 접근할 수 있게 할 것입니다.다음 단계를 계속 설정합시다.

2단계 - 애플리케이션 설정

우리는 우리가 이미 무료 계좌를 가지고 있고 구독을 했다고 가정한다Ably's Hub Stream Product: Heathrow Flight.현재, 우리는 기능이 강한 응용 프로그램을 만들고 싶다.

대시보드에 성공적으로 들어갔다면'응용 프로그램 만들기'라는 파란색 단추가 보일 것입니다.단추를 사용하여 응용 프로그램을 만들고 프로젝트/응용 프로그램의 프로젝트 이름을 입력하십시오. 아래와 같습니다.

3단계 - Ably React Native Hub Stream Kit 사용

나는 초보자 도구 패키지를 만들어서 우리의 프로젝트 건설을 더욱 빠르고 깨끗하게 했다.초보자 도구 모음에는 Expo Managed Workflow를 사용하여 React Native 를 빠르게 설정할 수 있습니다.React 로컬 팀은 복잡성에 따라 Expo가 React를 사용하여 소형 또는 대형 프로젝트를 구축하는 것을 강력히 권장합니다.
다음 명령을 사용하여 GitHub에서 항목을 빠르게 복제합니다.

$ git clone https://github.com/ably/tutorials/tree/flight-tracking-app-starter-kit.git

그런 다음 디렉토리를 프로젝트 폴더cd flight-tracking-app-starter-kit로 변경합니다.
기계에 yarn, expo-cli 및 nodejs 이 설치되어 있는지 확인해야 합니다.

설치:

노드.js(https://nodejs.org)

사선(npm install -g yarn

Expo CLI(npm install -g expo-client)

우리는 Expo 클라이언트를 사용하여 구축할 때 응용 프로그램을 테스트할 것입니다.Expo 클라이언트는 현재 iOS 및 Android 스토어에서 사용할 수 있습니다.엑스포 계정 here 을 만드십시오.

단계 4 - 로컬 설정

프로젝트를 시작하려면 터미널의 프로젝트 디렉터리에서 실행합니다yarn.

$ cd flight-tracking-app-starter-kit

다음으로 $ expo start 을 실행하고 모바일 장치에서 실행 중인 응용 프로그램을 시작합니다.

단계 5 - 개인 API_ 키 가져오기

프로젝트의 루트 디렉터리에서 env.js를 찾고 2단계에서 만든 응용 프로그램에서 얻은 개인 API_ 키로 코드를 교체합니다.API_ 키는 다음과 같습니다.

단계 6 - 코드 업데이트 및 수정

폴더 구조는 다음과 같습니다.
hooks/ably.hooks.js로 이동하여 다음 코드로 업데이트합니다CHANNEL_SCOPE.

const CHANNEL_NAME = '[product:ably-flightradar24/heathrow-flights]flights:airport:LHR'

상술한 통로는 이륙과 런던 히스로 공항에 도착하는 항공편과 같은 공항 정보의 데이터 흐름을 구독했다.

단계 7 - 연결 (게시 / 구독)

확장 가능하고 탄력적인 메시지 전달 메커니즘Pub/Sub을 교묘하게 사용한다.실시간 서비스는 응용 프로그램 내의 메시지 통신을 이름channels으로 구성합니다../hooks/ably.hooks.js에 코드를 추가하여 연결 및 구독 이름 채널을 지정합니다.

export const useAblyChannel = (channel, dependencies) => {

  const [onMessage, setOnMessage] = useState('Please wait..')

  const [isLoading, setLoading] = useState(true)
  //fetch channel data
  const [channelData, setChannelData] = useState(null)

  useEffect(() => {
   //add ably connection here 

    console.log('Ran Use Effects', channel)
     // know the current state of the application 
    ably.connection.on(function(stateChange) {
      console.log('New connection state is ' + stateChange.current)
      setOnMessage(stateChange.current)
      setLoading(true)
    })
    // use the channel scope in the application 
    const useChannel = ably.channels.get(`${CHANNEL_NAME}:${channel}`)
    useChannel.subscribe(message => {
      if (message.data.length > 0) {
        setOnMessage('Loading Data...')
        setLoading(false)
        setChannelData(message.data)
      }
    })

  }, dependencies)

  return [isLoading, onMessage, channelData]
}

동시 빠른 업데이트./context/ApplicationContext.js는havelisteners

export default ApplicationContext = ({ children }) => {
.....

  //add subscription listeners here 
const setChannel = iATA => {
    console.log(`This ${iATA} was clicked`)
    return ably.channels.get(`${HUB_STREAM}:${iATA}`)
  }

  const departureListener = message => {
    console.log('Still Listening Departure', message.data)
    message.data && subscribe(message.data)
  }

  const arrivalListener = message => {
    console.log('Still Listening', message.data)
    message.data && subscribe(message.data)
  }

  const subscribe = data => {
    setIsLoading(false)
    setArrivalsData(data)
  }
 // add unsubscribe listeners here
  const unsubscribe = (useChannel, type) => {
    console.log(`unmounting sub ${type}`)
    useChannel.off()
    useChannel.unsubscribe()
    type === 'arrival' ? setArrivalsData(null) : setDeparturesData(null)
    setIsLoading(true)
  }

  const setArrivals = (iATA, action) => {
    action === 'reset'
      ? unsubscribe(setChannel(iATA), 'arrival')
      : setChannel(iATA).subscribe(arrivalListener)
  }

  const setDepartures = (iATA, action) => {
    action === 'reset'
      ? unsubscribe(setChannel(iATA), 'departure')
      : setChannel(iATA).subscribe(departureListener)
  }

...

}

다음은 다음 코드로 업데이트됩니다./screens/ArrivalScreen.js.

import { ListCards } from '../components/ListCards'
import { arrival as channelData } from '../constants/RawData'
import { Container, Text, Content } from 'native-base'

상술한 입력은 데이터 흐름 형식으로 구성된 가상 데이터이다.이것은 당신이 예상한 데이터의 외관을 대체적으로 이해할 수 있게 한다.

import React, { useEffect } from 'react'
import { StyleSheet } from 'react-native'
import { Container, Text, Content } from 'native-base'
import { ListCards } from '../components/ListCards'
import { arrival as channelData } from '../constants/RawData'

다음은 ArrivalScreen입니다.js 파일, 우리가 실시간으로 보고 싶은 비행기의 출발점과 목적지를 표시하는 목록 카드를 표시합니다.목록 카드를 표시하려면 다음 코드를 추가합니다.

export default ArrivalScreen = ({navigation}) => {
...
const Arrivals = channelData
    ? channelData.map((item, index) => {
        return (
          <ListCards
            key={index}
            text={`${item.origin} - ${item.destination} (${item.iataId})`}
            icon="ios-airplane"
            action={() =>
              navigation.navigate('PopModal', {
                iataId: item.iataId,
                action: 'arrival'
              })
            }
            rotate
          />
        )
      }) : []
...

  return (
    <Container style={styles.container}>
     <Content>{Arrivals}</Content>
    </Container>
  )
...
}

./screens/ArrivalScreen.js에서 ./screen/DepartureScreen.js 단계를 반복하고 "Arrivals"상수를 "departitions"로 이름을 바꿉니다.이름 바꾸기

...
import { departure as channelData } from '../constants/RawData'

export default DepartureScreen = ({ navigation }) => {

    const Departures = channelData
      ? channelData.map((item, index) => {
          return (
            <ListCards
              key={index}
              text={`${item.origin} - ${item.destination} (${item.iataId})`}
              icon="ios-airplane"
              action={() =>
                navigation.navigate('PopModal', {
                  iataId: item.iataId,
                  action: 'arrival',
                })
              }
            />
          )
        })
      : []

....
  return (
    <Container style={styles.container}>
      <Content>{Departures}</Content>
    </Container>
  )
}

7단계를 계속하기 전에 모바일 응용 프로그램에 다음과 같은 변경 사항을 저장하고 보십시오.

단계 7 - 상태 관리 추가

먼저 React의 컨텍스트 API를 업데이트합니다.열기./context/ApplicationContext.js교체:

const HUB_STREAM = '<HUB_API_STREAM_CHANNEL>'

사용:

const HUB_STREAM = '[product:ably-flightradar24/heathrow-flights]flights:plane'

위의 통로는 비행기 정보의 데이터 흐름을 구독하는데, 예를 들어 현재 위치, 노선과 비행기 속도 등이다.
다음으로 ./screens/ArrivalScreen.js 돌아가서 코드를 업데이트하여 React 갈고리를 사용하여 응용 프로그램의 상태를 관리합니다. useAblyChannel(channel, [])

export default ArrivalScreen = ({navigation}) => {
...
  const [
    isLoading,
    displayMessage,
    channelData
  ] = useAblyChannel('arrivals', [])
...
...
  return (
    <Container>
      {isLoading ? (
        <LoadingScreen message={displayMessage} />
      ) : (
        <>
          <Content>{Arrivals}</Content>
        </>
      )}
    </Container>
  )
...
}

./screen/DepartureScreen.js

export default DepartureScreen = ({navigation}) => {
...
  const [
    isLoading,
    displayMessage,
    channelData
  ] = useAblyChannel('departures', [])
...
...
  return (
    <Container>
      {isLoading ? (
        <LoadingScreen message={displayMessage} />
      ) : (
        <>
          <Content>{DeparturesScreen}</Content>
        </>
      )}
    </Container>
  )
...
}

가져오기DepartureScreen 및 ArrivalScreen에서 삭제합니다. 데이터는 실시간 데이터 흐름에서 갈고리를 사용하기 때문입니다../screens/ArrivalScreens.js import { arrival as channelData } from '../constants/RawData' ./screens/DepartureScreens.js import { departures as channelData } from '../constants/RawData'이어서 ./components/ListCards.js를 열고 향료를 조금 첨가하여 카드를 클릭할 수 있도록 한다.

export const ListCards = ({ text, rotate, action }) => {
...
  return (
    <Card noShadow>
      <CardItem button onPress={() => handleActions(action)}>
       ...
      </CardItem>
    </Card>
  )
...
}

button 속성을 CardItem에 추가하여 버튼을 클릭합니다.
항목을 저장하고 살짝 처리하세요.목록 카드를 누르고 항공편 추적을 시작합니다.너의 응용 프로그램은 우리가 위에서 재생한 Gif처럼 보일 것이다.

8단계: 정리 및 최종 확정

응용 프로그램에 검색 기능을 빠르게 추가합니다.업데이트 ./screen/ArrivalScreen.js 및 ./screen/DepartureScreen.js

...
import FabButton from '../components/FabButton'

export default DepartureScreen = ({navigation}) => {
...
...
...
return (
    <Container>
      {isLoading ? (
        <LoadingScreen message={displayMessage} />
      ) : (
        <>
          <Content>{Arrivals}</Content>
          <FabButton navigation={navigation} channelData={channelData}/>
        </>
      )}
    </Container>
  )
...
}

저장, 이제 응용 프로그램의 모양과 느낌은 다음과 같습니다.

보실 수 있습니다complete demo and source code for this app on GitHub.

총결산

실시간 항공편 추적 프로그램을 성공적으로 구축했습니다. 이 프로그램은 실제 항공편의 위치를 추적하여 지도에 표시할 수 있습니다.너무 멋있어!