Parse는 객체와 실제 세계의 위도 및 경도 좌표를 연결할 수 있게 해줍니다. ParseGeoPoint를 ParseUser,에 추가하면 다른 사용자와 가장 가까운 사용자를 쉽게 찾고, 앱 사용자들의 위치를 보여주며, 사용자의 위치 정보를 저장하는 등 다양한 가능성을 활용할 수 있습니다.

또한 ParseGeoPoint를 모든 ParseObject,에 연결할 수 있습니다. 예를 들어, 귀하의 앱이 물리적 제휴점이 있는 상점과 관련이 있다면, 해당 상점의 위치를 보여주거나 사용자에게 가장 가까운 상점을 보여주는 페이지를 만들 수 있습니다. 이 연관 사용의 또 다른 예: 귀하의 앱이 캐릭터를 나타내기 위해 ParseObjects를 생성한 게임이라면, 이러한 캐릭터에 ParseGeoPoints를 추가하면 플레이어의 경로를 따라 표시할 수 있습니다.

이 튜토리얼은 Back4App을 통해 ParseGeoPoint의 일부 기능을 사용하는 방법을 설명합니다.

이 튜토리얼을 따르면 다음과 같은 작업을 수행할 수 있습니다:

설치 Angular Google Maps - AGM .

생성된 키를 ./src/app/app.module.ts에 추가하여 SDK를 가져옵니다.

사용자의 위치를 가져오기 위해 Ionic Geolocation  플러그인을 설치해야 합니다.

이제 ./src/app/app.module.ts에 Geolocation을 설치하고 가져왔으므로, 위치를 가져오는 메서드를 구현하고 결과를 클래스 속성에 저장해 보겠습니다.

이제 사용자 위치가 있으므로, 이미 언급한 [Angular Google Maps]를 사용하여 지도를 표시할 페이지를 만들어 보겠습니다.

먼저, 헬퍼를 실행합니다:

이제 현재 지도가 표시하고 있는 현재 위치를 보유하는 마커와 지도 주변의 핀 포인트가 될 마커 배열을 수신하도록 만들어 보겠습니다.

이제 maps.html을 열고 데이터를 표시하도록 만들어 보겠습니다.

이제 지도 위치를 표시할 페이지가 생겼습니다.

얼마나 간단한지 볼 수 있습니다. 기본적으로 우리가 해야 할 일은 User 컬렉션에 대한 쿼리 객체를 인스턴스화하고 near()를 호출하여 가장 가까운 지리적 위치를 찾는 것이었습니다.

당신이 만들고 있는 예제 앱이 물리적 제휴점이 있는 상점 그룹과 관련되어 있다고 가정해 보십시오. 이 상점의 모든 물리적 제휴점을 지도에 표시하는 것은 흥미로울 것입니다. 이를 위해 Back4pp 대시보드에서 Stores 클래스를 생성하고, 기존 상점을 ParseObjects로 저장한 후, 그 위치를 저장하면 앱이 물리적 제휴점을 쿼리하고 지도에 그 위치를 표시할 수 있게 됩니다. 다음 단계가 도움이 될 것입니다.

Back4App 웹사이트  에 로그인하고, 앱을 찾아 대시보드를 엽니다.



Core > Browser > 클래스를 생성으로 이동합니다. 아래 이미지와 같이.

What type of class do you need? 필드에서 Custom 옵션을 선택합니다.

What should we call it? 필드에 “Stores”를 입력한 후 Create class 버튼을 클릭합니다.

그러면 “Stores”라는 새 클래스가 표시되고, 여기에 두 개의 열을 삽입해야 합니다: 데이터 유형이 String인 Name이라는 열과 데이터 유형이 GeoPoint인 Location이라는 또 다른 열입니다. 당신의 클래스는 다음과 같이 되어야 합니다:

이제 이 클래스를 정보로 채웁니다. 그렇게 하려면, 아래 이미지와 같이 오른쪽 상단 또는 페이지 중앙의 메뉴에서 Add a row 버튼을 클릭합니다.

그런 다음 필요한 정보로 행을 채우십시오: 상점의 이름과 위도 및 경도. 일부 데이터를 입력한 후, 귀하의 Stores 클래스는 아래 이미지를 따라야 합니다. 더 많은 데이터를 입력하려면 상단의 행 추가 버튼을 클릭하거나 마지막 데이터 행 아래의 + 버튼을 클릭할 수 있습니다.

이제 귀하의 앱에서 상점의 위치 정보를 사용할 준비가 되었습니다.

이제 상점 위치가 저장되었으므로, 객체를 가져오고 표시하는 메서드를 코딩해 보겠습니다.

쉽죠? 이제 가장 가까운 것을 가져와 보겠습니다.

이전과 같이 가장 가까운 사용자를 가져오는 것과 같다는 것을 알 수 있습니다.

아마도 우리는 이러한 메서드를 호출할 방법이 없다는 것을 눈치챘을 것입니다. 그러니 home.ts에 버튼을 추가하고 실행해 보겠습니다!

이 단계에서 Back4App을 통해 ParseGeoPoint의 일부 기능을 사용할 수 있습니다!