Amplify Geo + Amplify CDN + Svelte!

13461 단어 mappingsvelteawscdn
Svelte 앱에 지도를 추가하고 싶었던 적이 있습니까?

그래서 우리는 Amplify Geo 개발자 프리뷰 릴리스에 대한 훌륭한 피드백을 이미 보고 있습니다. 시간을 내어 사용해 주신 모든 분들께 감사드립니다. 대부분 번들로 제공되지 않는 Svelte 앱에서 새로운 CDN 제공 Amplify 라이브러리를 사용해 보기 위해 함께 던진 몇 가지 해킹 코드를 공유해야겠다고 생각했습니다.

CDN-powered unbundling can be nice. Until recently, Amplify-powered JS apps have been conventionally bundled at build time. CDN unbundling is particularly handy for Svelte+Rollup, because none of the Amplify libraries need to be parsed each build iteration, meaning lightning-fast refreshes. Also, the resulting bundle is pretty small. My bundle.js for this app is just 19Kb, unminified.



1. 날씬한 스타터



좋아하는 것을 잡아라Svelte template . 저는 typescript + pug + stylus 괴짜이지만 Svelte에서 제공하는 표준이 시작하기에 좋은 곳입니다.

npx degit sveltejs/template my-geo-app
cd my-geo-app


2. Amplify CDN 라이브러리를 index.html에 추가합니다.



우리는 CDN 기반 접근 방식을 사용하고 있기 때문에 이러한 라이브러리를 public/index.html 파일에 추가하여 브라우저에서 로드하도록 할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <title>My Example Map</title>

    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="stylesheet" href="/global.css" />
    <link rel="stylesheet" href="/build/bundle.css" />
    <link href="https://cdn.amplify.aws/packages/maplibre-gl/1.14.0/maplibre-gl.css" rel="stylesheet" integrity="sha384-sZlnv03zeGbcXDiuZ98TrNVZFIfpsVhN0itUxRFONLo6lOZskJPIMlOwDy+nloRF" crossorigin="anonymous" referrerpolicy="no-referrer"></link>
    <link href="https://cdn.amplify.aws/packages/maplibre-gl-geocoder/1.0.1/maplibre-gl-geocoder.css" rel="stylesheet" integrity="sha384-9INm4qwCgRPHsynDw8uatP2FHVIMItwPU+PH8RtOzYAGEjU4Hiirfmuc3Rsa/pBq" crossorigin="anonymous" referrerpolicy="no-referrer"></link>

    <script src="https://cdn.amplify.aws/packages/core/4.2.1-geo.20/aws-amplify-core.min.js" integrity="sha384-ZJ0BipyxRjDHPcTLilxOMRf9grNEwTTUOmr8l8MUprgnpAnpK4Fz20ndOQElCtWb" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/auth/5.0.4-geo/aws-amplify-auth.min.js" integrity="sha384-rqyJfFR2070OQyXIQqomdGCYa6TaR/1asvv2oaz9wB6R8YSiIBC08mWwgVtr1NNk" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/maplibre-gl/1.14.0/maplibre-gl.js" integrity="sha384-jWZKsznBFj0Nl3kUaRKmmk89Hew9zDhTnmOz0pOLceWY7iag+l/8QNPeD0cQYaVG" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/maplibre-gl-geocoder/1.1.0/maplibre-gl-geocoder.min.js" integrity="sha384-kB2/fEHOpfHm1Gzute77/GLQw40BlWkV4XCaqQ/+P8zPIwUm4X5gZxcYx7Nj3tpC" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/geo/0.0.2-geo.6654/aws-amplify-geo.min.js" integrity="sha384-3WpvDe5YSr8Xdmc31s/1cKXlG5DCmeQA2PZkuQUIgwPPwGNY/kbrTYYItxSO8JJJ" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.0.7/maplibre-gl-js-amplify.umd.min.js" integrity="sha384-UQ8x/n1AjWGF3Ti2loSD8SOXsISAZw8yqr+4xWwMOajLlmS36nbWeno3U1e003Pl" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script defer src="/build/bundle.js"></script>
  </head>
  <body></body>
</html>


3. AmplifyMap 구성 요소를 생성합니다.



다음과 같이 AmplifyMap.svelte라는 새 파일을 src 디렉토리에 추가합니다.

<script>
  import { onMount } from "svelte"

  export let width = "800px"
  export let height = "600px"

  async function initializeMap() {
    const map = await AmplifyMapLibre.createMap({
      container: "map", // The ID of a DOM element to inject a MapLibre map.
      center: [-123.1187, 49.2819],
      zoom: 11,
      region: "us-west-2",
    })
  }

  onMount(() => {
    initializeMap()
  })
</script>

<div id="map" style="width: {width}; height: {height};" />


4. 앱에 AmplifyMap 추가


App.svelte 에서 방금 생성한 AmplifyMap 구성 요소를 가져와 템플릿에 추가합니다. 정적 높이 및 너비 값을 지도 구성 요소에 전달하고 있지만 더 좋은 방법은 binding them dynamically 에 의해 창 크기 조정에 반응하도록 만드는 것입니다.

<script>
  import AmplifyMap from "./AmplifyMap.svelte"
</script>

<main>
  <h1>My Example Map</h1>
  <div id="wrapper">
    <AmplifyMap width="900px" height="600px" />
  </div>
</main>


5. 증폭 추가



마지막으로 가장 중요한 것은 AWS Amplify를 프로젝트에 추가해야 한다는 것입니다. 몇 가지 방법이 있지만 가장 쉬운 방법은 Amplify CLI를 사용하는 것입니다. 저희 Getting Started guide here 의 첫 페이지를 따라가시면 됩니다. 그러면 AWS 계정에서 Amplify CLI를 설치하고 Amplify Geo 백엔드 서비스를 프로비저닝하는 프로세스를 안내합니다.

IMPORTANT NOTE Because the Geo functionality is under Developer Preview, you need to make sure you have the @geo branch of the CLI installed, as described in the Geo Getting Started guide. We'll remove this requirement when Geo is generally available.



지침을 따른 후에는 main.js(또는 main.ts ) 파일이 다음과 같아야 합니다.

import App from "./App.svelte"

//@ts-ignore
const Amplify = aws_amplify_core.Amplify

import awsconfig from "./aws-exports"
Amplify.configure(awsconfig)

const app = new App({
  target: document.body
})
export default app


6. 행복한 매핑!



모든 것이 올바르게 연결되어 있으면 앱을 실행할 때npm run dev 브라우저 세션에 다음과 같은 내용이 표시되어야 합니다localhost:5000.

다주입
ADO.NET는 Excel 파일을 읽고 데이터 소스로 사용

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage