Zomato API를 사용하는 레스토랑 검색 어플리케이션(React Native)

나는 이미 한동안 지체했다.React와 한동안 합작한 후에 분명히 다음 단계는 이렇다.
그래서 저는 Udemy로 가서 호평을 받은 Stephen Gridercourse를 시작했습니다.
그는 Yelp API로 식당 프로그램을 만들었지만 Yelp가 인도에서 사용할 수 없기 때문에 저는 Zomato API를 계속 사용하기로 했습니다.Zomato는 인도에서 유행하는 식품 배송 플랫폼이다.
우리 식당 검색 프로그램은 음식에 대한 정보를 검색하고 성가가 높고 가격이 적당하며 돈을 많이 쓰는 세 가지 식당을 검색할 수 있는 검색란이 있을 것이다.
expo cli를 사용하여 React 네이티브 프로젝트를 생성합니다.따라서 터미널로 가서 다음 명령을 실행합니다.

npx expo-cli init restroSearch

다음 화면이 표시됩니다.enter 키를 누릅니다.
화면
그런 다음 항목의 이름을 입력하라는 메시지가 표시됩니다.같은 이름restroSearch를 입력하고 enter 키를 누르십시오.
이름
설치가 완료되면 새 폴더restroSearch를 만듭니다.이 옵션으로 변경하고 npmstart를 실행합니다.브라우저에서 열립니다 http://localhost:19002 /.
로컬 호스트
현재, 나는 물리적 안드로이드 장치에서 출력을 실행하고 있다.물리적 장치에서 실행하려면 Play Store and install Expo
이제 핸드폰에 있는 앱을 켜세요.아래 화면이 표시됩니다.
엑스포 앱
QR코드를 스캔하면 카메라를 켤 수 있다.브라우저의 QR 코드를 가리키면 모든 설치가 완료되면 아래 화면을 볼 수 있습니다.
초기 애플리케이션
프로젝트에서 StackNavigator를 사용합니다.따라서 이러한 의존 항목을 계속 설치합니다.

npm install react-navigation

npx expo-cli install react-native-gesture-handler react-native-reanimated

Visual Studio 코드에서 항목을 열고 응용 프로그램을 교체합니다.js의 내용은 다음과 같다.
신규 애플리케이션
이제 파일 검색 화면을 만듭니다.js내 src-> 화면.이 두 폴더를 더 만들어야 합니다.
검색 화면
이것은 Android 응용 프로그램의 응용 프로그램을 바꾸고 SearchScreen 구성 요소를 표시합니다.
검색 화면
먼저 검색 표시줄을 만듭니다.우선 src에components 폴더를 만듭니다.파일 검색 표시줄을 만듭니다.안에 js예요.여기에 다음 내용을 추가합니다.
여기에서 우리는 react native에서 온 View, Text Input, 스타일시트를 사용합니다.우리는 엑스포를 검색하기 위해 아이콘도 사용했다.
react native의 조형은 대부분camelCase 기호를 통해 완성됩니다.
검색 표시줄
현재, 우리의 응용 프로그램은 아래와 같다.
식당 검색
상위 구성 요소인 SearchScreen에서 SearchBar로 상태를 전달하고 리셋을 사용하여 SearchBar에서 변경합니다.
따라서 SearchScreen을 엽니다.상태를 추가하여 검색 모음에 전달합니다.
검색 화면 변경 내용
이제 검색 표시줄 구성 요소에서 사용할 것입니다.
검색 표시줄 변경 내용
우리의 검색은 사용자가 장치의 enter 키를 눌렀을 때만 시작해야 합니다.따라서 우리는 다음 단계에 같은 논리를 추가할 것이다.SearchScreen에 새 콜백을 추가합니다.나중에 zomato API를 호출합니다.
검색 화면
다음은 검색 표시줄 구성 요소에 같은 내용을 추가합니다.
검색 표시줄
이제 우리는 그것을 테스트할 수 있다.안드로이드 프로그램을 열고 그 위에 내용을 입력하고 녹색 enter 키를 누르십시오.
검색
제출 후, 우리는 단말기에서 컨트롤러 로그를 볼 수 있습니다.
콘솔 로그
다음은 식당 목록을 가져오고 모든 내용을 검색하기 위해 API 호출을 실행합니다.따라서 https://developers.zomato.com/api로 이동하여 API 키를 가져옵니다.
Zomato의 문서는 매우 좋습니다. swagger가 포함되어 있기 때문에 그곳에서 API 자체를 검사할 수 있습니다.
Zomato가 머리를 들고 활보하다
우리는 주로 식당 검색 API를 사용할 것이다.나는 반가로르의 식당만 검색할 것이기 때문에 아래의 GETapi를 사용할 것이다.헤더에 API 키를 전달해야 합니다.

https://developers.zomato.com/api/v2.1/search?entity_id=4&entity_type=city&q=Kabab

다음에 우리는 터미널로 가서axios를 설치할 것이다

npm install axios

다음은 zomato API를 사용하려면 axios 실례 방법을 사용합니다.src에서 폴더api와 파일zomato를 만듭니다.안에 js예요.
zomato 파일
다음으로, 우리는 다시 사용할 수 있는 갈고리를 만들 것이다.src에 폴더 연결을 만들고 파일useResults를 만듭니다.안에 js예요.여기서, 우리는zomato url을 클릭하고 결과에 결과를 설정합니다.응용 프로그램이 불러올 때 데이터를 얻을 수 있도록 초기 검색을 사용하고 있습니다.
연결
이제 SearchScreen 구성 요소에서 이러한 연결을 사용합니다.
연결 사용
지금, 나는 우리android 응용 프로그램에서 결과를 얻었다.
API
다음은 화면에 이 결과를 표시하기 위한 구성 요소를 만들 것입니다.구성 요소 결과 목록을 만들 것입니다.회사 명
결과 목록
이제 SearchScreen에서 제목을 전달합니다.
검색 화면
우리의 응용 프로그램에서, 우리는 가격에 따라 세 가지 다른 종류의 식당을 표시할 것이다.현재,zomato는 가격 구간값에 따라 분류합니다.우리는 그룹을 필터링하고 서로 다른 가격표를 서로 다른 ResultsList에 전달할 것입니다.
가격
다음은 ResultsList 구성 요소에서 사용합니다.
결과 목록
이것은 우리의 응용 프로그램에 다음과 같은 내용을 표시할 것이다.
결과
이제 데이터를 사용하고 정확하게 표시합시다.우리는 평면 목록을 사용하여 수평 목록을 표시하지만, 다른 구성 요소를 사용하여 모든 항목을 표시합니다.
평면 목록
다음은 ResultsDetail 구성 요소를 만듭니다.그것은 단지 이 항목을 통행증으로 표시하고, 그것과 일부 조형만 표시할 수 있다.
결과 상세 정보
응용 프로그램의 거의 전체 버전으로 표시됩니다.
애플리케이션
너는 우리가 안드로이드 핸드폰에서 수직으로 굴러갈 수 없다는 것을 이미 알아차렸을 것이다.따라서 이 문제를 해결하려면 ScrollView 패키지 목록을 사용해야 하며, 보기를 빈 div로 변경해야 합니다
스크롤 문제
이제 사용자가 어떤 식당을 눌렀을 때 이 식당에 대한 더 자세한 정보를 표시하는 논리를 추가할 것입니다.이렇게 하려면 새 화면을 만들어야 합니다.우선 응용 프로그램에 연결합시다.회사 명
App
그런 다음 탐색 논리를 ResultsList 구성 요소에 추가합니다.우리는 withNavigation을 사용하고 식당 id를 ResultsShow 구성 요소에 전달합니다.With had는 Touchable Opacity가 있는 Results Detail을 포장했기 때문에 클릭하면 Results Show를 볼 수 있습니다
탐색
이제 스크린 폴더에 ResultsShowScreen 구성 요소를 만듭니다.여기에서, 우리는 부모 구성 요소에서 id를 받아서, 식당의 상세한 정보를 얻기 위해zomatoapi에 대한 다른api 호출에 사용합니다.
결과 화면 표시
이어서 우리는 식당의 세부 사항을 보여주기 위해 요소를 추가할 것이다.
일부 요소
다음으로, 우리는 이 요소들을 위해 양식을 추가할 것이다.
일부 스타일
지금 어떤 식당을 누르면 식당의 상세한 정보를 열 수 있습니다.
식당 상세 정보
githubhere에서 같은 코드를 찾을 수 있고 here에서 apk 파일을 다운로드할 수 있습니다.