Integração de Geopontos no Ionic com ParseGeoPoint e Back4App

usando pontos geográficos com o framework ionic introdução parse permite associar coordenadas de latitude e longitude do mundo real a um objeto adicionando um parsegeopoint a um parseuser , você poderá descobrir facilmente qual usuário está mais próximo de outro, mostrar as localizações dos usuários do seu aplicativo e também armazenar as informações de localização do usuário, entre outras possibilidades você também pode associar um parsegeopoint a qualquer parseobject por exemplo, se seu aplicativo estiver associado a uma loja com afiliados físicos, você poderá criar uma página para mostrar a localização dessas lojas ou para mostrar ao usuário qual loja está mais próxima dele outro exemplo de uso dessa associação se seu aplicativo for um jogo no qual você criou parseobjects para representar personagens, adicionar parsegeopoints a esses personagens permitiria que eles fossem mostrados ao longo do caminho do jogador este tutorial explica como usar alguns recursos do parsegeopoint através do back4app após seguir este tutorial, você será capaz de fazer isso pré requisitos 1 configurar a chave da api do google instale angular google maps agm importe o sdk adicionando a chave gerada em /src/app/app module ts 2 recuperar a localização do usuário para recuperar a localização do usuário, precisaremos instalar o ionic geolocation plugin agora que instalamos e importamos geolocation para os provedores em /src/app/app module ts, vamos implementar o método de obter localização e armazenar os resultados em um atributo da classe 3 crie uma página para exibir o mapa agora que temos a localização do usuário, vamos criar uma página para exibir o mapa, usando o já mencionado \[angular google maps] primeiro, execute o helper agora vamos fazer com que receba um marcador que contém a posição atual que o mapa está exibindo e um array de marcadores que serão os pontos de referência ao redor do mapa vamos abrir o maps html agora e fazer com que exiba os dados 4 exibindo a localização atual do usuário no mapa agora temos uma página para exibir as localizações do mapa vamos voltar para home ts e implementar um método para exibir a localização do usuário no mapa vamos aproveitar a facilidade do parse agora e procurar os pares mais próximos da localização do usuário você pode ver como é simples basicamente, tudo o que tivemos que fazer foi instanciar um objeto de consulta para a coleção user e fazê lo procurar a localização geográfica mais próxima chamando near() 5 configure o back4app para associar parsegeopoint a parseobjects suponha que o aplicativo de exemplo que você está construindo esteja associado a um grupo de lojas com afiliados físicos seria interessante mostrar todos os afiliados físicos desta loja no mapa para fazer isso, crie uma classe de lojas no back4pp dashboard, salve as lojas existentes como parseobjects, suas localizações e, após isso, o aplicativo poderá consultar os afiliados físicos e exibir suas posições no mapa os passos a seguir ajudarão você com isso vá para o site do back4app faça login, encontre seu aplicativo e abra seu dashboard vá para core > browser > criar uma classe, como mostrado na imagem abaixo no campo que tipo de classe você precisa?, escolha a opção personalizada no campo como devemos chamá la?, digite “ lojas ” e então clique no botão criar classe então, uma nova classe chamada “ lojas ” será exibida e você deve inserir 2 colunas nela uma coluna com tipo de dado string chamada nome, assim como outra coluna com tipo de dado geopoint chamada localização sua classe deve ficar assim agora, preencha esta classe com informações para fazer isso, clique no botão adicionar uma linha no menu no canto superior direito ou no meio da página, como mostrado na imagem abaixo em seguida, preencha a linha com as informações necessárias o nome da loja e sua latitude e longitude após inserir alguns dados, sua classe stores deve se parecer com a imagem abaixo se você quiser inserir mais dados, pode clicar no botão adicionar uma linha no topo, ou no botão + abaixo da última linha de dados agora você está pronto para usar as informações de localização das lojas em seu aplicativo 6 exibir todas as localizações das lojas no mapa agora que temos a localização das lojas armazenada, vamos codificar um método para obter os objetos e exibi los fácil, certo? agora, vamos obter o mais próximo você pode ver como é apenas como obter o usuário mais próximo, como fizemos anteriormente 7 adicionar botões à página inicial você provavelmente notou que não temos como chamar esses métodos, vamos adicionar os botões ao home ts então e fazer acontecer! 8 teste seu aplicativo faça login em back4app website https //www back4app com/ encontre seu aplicativo e clique em dashboard > core > browser > user e crie alguns usuários com localização associada a eles para permitir que o método getclosestuser funcione execute seu aplicativo em um dispositivo real ou no navegador para se inscrever e fazer login experimente todos os recursos! está feito! neste estágio, você pode usar alguns recursos do parsegeopoint através do back4app!