Vue3+Apollo+Realm = <3(Realm 튜토리얼 4부분)

git clone https://github.com/nicholasoxford/realmVueTemplate.git
cd realmVueTemplate
npm i
npm run dev

const id = "test-iuege";
const config = {
  id,
};
const appRealm = new Realm.App(config);// Gets a valid Realm user access token to authenticate requests

// HTTP connection to the API
const httpLink = createHttpLink({
  // You should use an absolute URL here
  uri: 'https://realm.mongodb.com/api/client/v2.0/app/test-iuege/graphql',
  fetch: async (uri, options) => {
    const accessToken = await getValidAccessToken();
    options.headers.Authorization = `Bearer ${accessToken}`;
    return fetch(uri, options);
  },
})

async function getValidAccessToken() {
  // Guarantee that there's a logged in user with a valid access token
  console.log(appRealm)
  if (!appRealm.currentUser) {
    // If no user is logged in, log in an anonymous user. The logged in user will have a valid
    // access token.
    await appRealm.logIn(Realm.Credentials.anonymous());
  } else {
    // An already logged in user's access token might be stale. To guarantee that the token is
    // valid, we refresh the user's custom data which also refreshes their access token.
    await appRealm.currentUser.refreshCustomData();
  }
  return appRealm.currentUser.accessToken
}

RealmID로 대체const id = "test-iuege";:

그런 다음 Mongo UI에서 GraphQL 탭을 클릭하여 URL을 복사하여 페이지 오른쪽에 붙여 넣습니다.코드에서 변수URI의 텍스트를 클립보드의 텍스트로 바꿉니다.
마지막으로 인증 탭을 클릭하고 Allow users to log in anonymously 옆에 있는 편집 버튼을 클릭한 다음 열기로 전환합니다.Realm을 사용할 때는 변경 사항을 배치해야 합니다.다시 한 번 보시면main.js 저희가 appRealm이라고 부르는 것을 발견할 수 있습니다.익명 자격 증명으로 로그인().나는 당신이 이 코드들을 수동으로 작성할 수 있다고 믿지만, 이 소프트웨어 패키지들은 클라이언트에서 이런 것을 설정하는 것을 매우 쉽게 한다.
모든 전단 코드를 변경하기 전에 터미널에서 실행합시다. npm run dev링크로 이동하면 http://localhost:3000/ 표준 Vue 입문 페이지를 볼 수 있습니다.나는 우리의 응용 프로그램을 실행하는 것이 유익하다고 생각한다. 이렇게 하면 우리는 실시간으로 변화를 볼 수 있다.이를 핫 모듈 재로드 또는 HMR이라고 합니다.마지막으로 돌아보면main.js, 너는 볼 수 있을 것이다import OpenLayersMap from 'vue3-openlayers'.이를 통해 OpenLayers 구성 요소를 응용 프로그램 어디에서나 사용할 수 있습니다.
보기Open Layer's Vue 3 Website에서 템플릿에 추가할 수 있는 구성 요소 목록을 보았습니다.해난을 한 번도 상상하지 않으려고 ol-geom-multi-point부품을 선택했습니다.이 페이지를 보면 <template> 코드를 볼 수 있습니다. 그 중에서 가장 높은 단계의 구성 요소는 ol-map입니다.ol지도 구성 요소 페이지를 클릭하여 사이트의 다른 부분을 찾아보는 것을 권장합니다.내가 보기에, 당신은olgeom의 여러 페이지에서 충분한 정보를 얻을 수 있지만, 다른 예시를 보면 이 코드를 어떻게 활용하는지 보는 것이 매우 도움이 된다.
사이트의 템플릿 코드 아래에서 우리는 예시script 코드 부분을 볼 수 있다.composition API를 사용하기 때문에 결과가 조금 다를 수 있습니다.계속해서 VsCode로 돌아가서 (듣고 싶지 않음) 내비게이션으로 이동합시다. /components/HelloWorld.vue여기에서 <template> 부분의 모든 내용을 삭제하거나 주석해야 합니다.
그런 다음 OpenLayers에서 모든 컨텐트를 제거하고 제거한 컨텐트를 교체합니다.업데이트된 <template> 코드 중 가장 걱정되는 구성 요소는 다음과 같습니다.

<ol-geom-multi-point/>

복사한 코드에서 :coordinates= 는 긴 좌표수 그룹, 위도 좌표수 그룹, 또는 하나의 그룹과 같습니다.잠시 후 우리는 좌표를 변수로 설정할 것이다.만약 스크롤을 사용한다면, 스크립트 부분에서 내가 당신이 필요로 하는 코드를 주석해 놓은 것을 볼 수 있을 것이다.존재하는 코드를 계속 삭제하거나 주석합니다.온라인 예시와 같은 반환문은 없습니다.이게 <script setup>의 아름다움이야...고마워, 에반!
또 다른 차이는 나의 중심 변수가 다르다는 것이다.이것은 인터넷의 예가 중국 중부의 일부 관광지를 보여 주었기 때문에 아마도 해난에서 네가 볼 수 있는 가장 먼 곳일 것이다.나는 중심점을 태자항에 놓았는데, 그곳에는 침몰선이 매우 많았다.아마도 다섯 번째 부분에서 우리가 지도를 이동할 때 데이터베이스에서 가장 가까운 침몰선을 조회할 수 있을 것이다.Mongodb는 간단해!GeoJSON과 유사한postgres를 지원합니다.
설령 내가 중심을 아이티에 놓았다 하더라도 너의 스크린에는 침몰선이 없다.우리는 우리의 영역 실례를 호출해야 한다!이것은 매우 쉽다. 왜냐하면 우리는 main.js에서 대부분의 설정을 완성했기 때문이다.우리는 수입 성명에 두 가지를 추가해야 한다.

import gql from "graphql-tag";
import { useQuery, useResult } from "@vue/apollo-composable";

Vue3 아폴로 문서를 돌이켜보면 queries의 모든 내용을 알 수 있다.지금 무언가가 클릭 중이었으면 좋겠고, 리얼엠은 그래프QL의 일부를 자동화해 쿼리를 만들었다.우리의 예시에 있어서, 우리는 거의 모든 필드를 생략할 수 있지만, GraphQL 옵션에서 그것을 복제하면 된다.

const { result} = useQuery(gql`
  query AllShips {
    shipwrecks {
      _id
      chart
      coordinates

    }
  }
`);

우리는 결과 대상에서 모든 정보를 얻을 수 있지만, 나 recommend using const points = useResult(result) 는 그렇지 않다.네가 필요로 하는 정보는 교체를 처리하는 것이 아니라 거기에 있다.또한 useResult는 오류를 반환하는 데 도움을 줄 수 있습니다.지금 우리는 사용해야 한다computed property.계산 속성은 값의 변화를 감시하고 반응하며, 성능을 향상시키기 위해 결과를 캐시합니다.계산 속성에서 우리는 좌표를 그릴 것이다.자세히 생각해 봐, 우리는 하나의 그룹을 만들고 있어.

const messages = computed(() => points.value ? points.value.map(x => x.coordinates) : [[]])

우리가 해야 할 마지막 일은 좌표를 우리의 값과 같게 설정하는 것이다.

          <ol-geom-multi-point :coordinates="messages"></ol-geom-multi-point>

만약 우리가 '저장' 을 누르고 브라우저로 돌아가면, 우리는 침몰선을 볼 수 있을 것이다.그것은 예쁘지 않지만, 데이터베이스를 호출해서 정보를 얻고, 비추고 있으며, 웹 응용 프로그램이 이에 반응하고 있습니다.
과거 4개의 강좌에서 우리는 가진 것이 없는 것에서 하나의 사이트로 바뀌었고 우리가 제어하는 데이터베이스에서 침몰선 데이터를 시각화할 수 있었다.우리는 Vue에서 최신 최고의 제품을 사용합니다.활용<script setup>, API 및 GraphQL 작성우리는 또한 권한을 부여하고 데이터를 정리하며 모델을 검증했다.5부에서는 리얼엠을 이용해 이 앱을 배치하는 방법을 보여주거나, 경도와 위도에 따라 몬고를 이용해 데이터를 조회하는 방법을 보여줄 수 있다.알려줘!
자손 후손을 위해 이곳은 나의 <script> 부분이다.

<script setup>
import { useQuery, useResult } from "@vue/apollo-composable";
import { computed } from 'vue'
import gql from "graphql-tag";
const { result} = useQuery(gql`
  query AllShips {
    shipwrecks {
      _id
      chart
      coordinates

    }
  }
`);
const points = useResult(result)
const messages = computed(() => points.value ? points.value.map(x => x.coordinates) : [[]])
const center = [-72.333336, 18.533333];
const projection = "EPSG:4326";
const zoom = 9;
const rotation = 0;
const radius = 10;
const strokeWidth = 4;
const strokeColor = "red";
const fillColor = "white";
</script>

우리는 또한 "높이"값을 증가시킬 수 있다

<ol-map
    :loadTilesWhileAnimating="true"
    :loadTilesWhileInteracting="true"
    style="height: 1000px"
  >

청소를 위해서 우리는 프로그램으로 돌아갈 수 있다.vue와 <img> 요소를 논평하고 저희 사이트의 상태를 보십시오.많이 좋아진 것 같아요.나는 이것이 한 사람을 Vue를 사랑하게 할 수 있기를 바란다. 그것은 매우 징그럽다.
니콜라스 옥스포드