Aktualizovaná (za leden-2022) aplikace Vuejs v3 na Amplify, AppSync a Cognito

Původní příspěvek:https://compositecode.blog/2022/01/12/a-shiny-new-vuejs-v3-web-app-using-deployed-to-amplify-appsync-cognito/

Žádný problém, začněme.

Předpoklady

Tyto podrobnosti plus příze a několik dalších poznámek jsou k dispozici a jsou odvozeny ze zde umístěných dokumentů Amplify. Co jsem udělal, je vzít ty dokumenty a přidat nějaké konkrétní podrobnosti a informace pro tuto šťastnou cestu. Obsahuje další odkazy na kroky, které jsem provedl, a konkrétně to, na čem to spouštím pro tento konkrétní tutoriál. Jak je uvedeno níže, existuje část, kde se to odchyluje od těchto kroků a dostávám se k dalším krokům nad rámec počátečního nastavení aplikace, Amplify a AppSync. Tuto část tohoto návodu si všimnu, nebo můžete přejít přímo do této části pomocí této kotvy thatPartiDeviate.

Pro tento konkrétní tutoriál budete potřebovat následující. Pokud jste zvyklí na různé operační systémy a jejich příslušné potřeby týkající se tohoto softwaru, můžete si to seřadit sami a většinou je to stejné pro každý operační systém, ale pro tento tutoriál používám MacOS Big Sur v11.6.2.

Váš operační systém, jak je uvedeno, můj je Big Sur pro tento výukový program.
git. Pravděpodobně jakákoli verze vydaná v posledním desetiletí bude fungovat dobře.
Node.js. Pravděpodobně cokoli od verze 14 by fungovalo skvěle, ale tento tutoriál je napsán proti verzi 16.11.1. V době psaní tohoto článku je LTS 16.13.1 a aktuální je 17.3.0.
Vue.js v3. Pro tento tutoriál používám verzi náhledu v3. Pro CLI rychle yarn global add @vue/cli dělá svou práci.
Zesílit CLI. Verze pro tento tutoriál je 7.6.5. Je možné jej nainstalovat pomocí NPM s 🤙🏻 npm install -g @aws-amplify/cli nebo si to stáhněte přes cURL 👍🏻 curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL a samozřejmě, Windows musí být Windowsy s 😑 curl -sL https://aws-amplify.github.io/amplify-cli/install-win -o install.cmd && install.cmd .

Několik prvních kroků, které stačí udělat jednou. Pokud jste již nastavili amplify cli, pak to není potřeba podruhé.

Nejprve spusťte základní kostru aplikace Vue.js v3.

vue create mywhateverproject

Vydání tohoto příkazu pak poskytne výzvy k výběru náhledu Vue.js v3 (nebo pravděpodobně pouze v3 po úplném vydání, který bude podle potřeby dodáván spolu s dalšími nástroji). Jakmile to uděláte, postupujte podle standardních kroků navigace do adresáře cd myWhateverProejct a poté spuštěním yarn příkaz a nakonec yarn serve --open otevře běžící webovou aplikaci ve vašem výchozím prohlížeči.

Dále inicializujte aplikaci Vue.js jako Amplify Project a získejte nastavení a přijetí některých výchozích hodnot. Probíhá amplify init a přijetím výchozích hodnot se to provede. Jak se zobrazí po dokončení, aplikace Vue.js v3 nyní bude mít několik výchozích nastavení a vybraných položek.

Se základní složkou a nastavením Amplify je další na řadě přidání knihoven Amplify pro použití v komponentách uživatelského rozhraní.

yarn add aws-amplify @aws-amplify/ui-components

Nyní přejděte do src/main.js a do kódu přidejte Amplify a initial configuration, které po spuštění aplikace provedou skutečnou inicializaci.

Toto nahrazuje tento kód...

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

s tímto kódem.

import { createApp } from 'vue'
import App from './App.vue'
import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';
import {
    applyPolyfills,
    defineCustomElements,
} from '@aws-amplify/ui-components/loader';

Amplify.configure(aws_exports);
applyPolyfills().then(() => {
    defineCustomElements(window);
});
createApp(App).mount('#app')

Tím jsou dokončeny kroky, které potřebujeme pro spuštěnou aplikaci. Chcete-li pokrýt celý stoh, umožňuje zakrýt sestavu zadního konce a konstrukci schématu. Pak se ponořím do toho PartiDeviate. Další na řadě je přidání prvků Amplify.

npm install aws-amplify @aws-amplify/ui-components

Před samotným spuštěním jsem pokračoval a přidal back-end a databázi, GraphQL API a související zajištění.

amplify add api

Všimněte si na snímku obrazovky, jakmile jsem se rozhodl upravit schéma nyní, jednoduše se otevřel soubor v editoru dle mého výběru, kterým je Visual Studio Code pro tento tutoriál. Protože to spouštím z terminálu v kódu Visual Studio, jednoduše to otevřelo soubor v aktivním editoru, ve kterém jsem, win win! Soubor, který je ve výchozím nastavení otevřen pro schéma, obsahuje následující kód schématu GraphQL.

# This "input" configures a global authorization rule to enable public access to
# all models in this schema. Learn more about authorization rules here: https://docs.amplify.aws/cli/graphql/authorization-rules

input AMPLIFY { globalAuthRule: AuthRule = { allow: public } } # FOR TESTING ONLY!

type Todo @model {
    id: ID!
    name: String!
    description: String
}

Komentář, vstup AMPLIFY a typ Todo zatím nechám tak, jak je. Je důležité si uvědomit, že tento soubor schema.graphql je umístěn na app/amplify/backend/schema.graphql . Vrátím se k tomu později v thatPartiDeviate.

Dále chci přesunout aplikaci, API a backend do Amplify a AppSync.

amplify push

# This "input" configures a global authorization rule to enable public access to
# all models in this schema. Learn more about authorization rules here: https://docs.amplify.aws/cli/graphql/authorization-rules

input AMPLIFY { globalAuthRule: AuthRule = { allow: public } } # FOR TESTING ONLY!

type Todo @model {
    id: ID!
    name: String!
    description: String
}

Dále chci přesunout aplikaci, API a backend do Amplify a AppSync.

amplify push

Během této fáze hodně věcí se dějí. Schéma GraphQL se změní na API a to je nasazeno spolu s databází nasazenou do DynamoDB.

Chcete-li, aby byl backend odeslán, tj. nasazen do AppSync, zadejte amplify push příkaz. Opět pokračujeme s výchozími možnostmi. Pokud amplify console je vydáno těsně poté, co je možné provést kontrolu API.

Dobře, teď je čas na autorizaci. Přidání, že je poněkud ohromující minimální, jen amplify add auth . K tomu jsem zvolil Výchozí konfiguraci a poté Uživatelské jméno způsob, jakým se uživatelé přihlašují, a poté Ne, hotovo možnost následovaná vydáním dalšího amplify push , to potvrdil a nechal projít procesem.

Poté, co tyto další kroky zahrnovaly přidání následujícího kódu do souboru App.vue, abyste dostali počáteční interakce, zabezpečení a související věci na místo pro aplikaci todo. Znovu považuji za důležité poznamenat, že to vše později v příspěvku zde změním. Ale je to solidní způsob, jak začít budovat aplikaci a poté, co je spuštěna a spuštěna, se vrátit do smyčky, nasadit před přechodem k dalším krokům.

<template>
  <amplify-authenticator>
    <div id="app">
      <h1>Todo App</h1>
      <input type="text" v-model="name" placeholder="Todo name">
      <input type="text" v-model="description" placeholder="Todo description">
      <button v-on:click="createTodo">Create Todo</button>
      <div v-for="item in todos" :key="item.id">
        <h3>{{ item.name }}</h3>
        <p>{{ item.description }}</p>
      </div>
    </div>
    <amplify-sign-out></amplify-sign-out>
  </amplify-authenticator>
</template>

<script>
import { API } from 'aws-amplify';
import { createTodo } from './graphql/mutations';
import { listTodos } from './graphql/queries';
import { onCreateTodo } from './graphql/subscriptions';

export default {
  name: 'App',
  async created() {
    this.getTodos();
    this.subscribe();
  },
  data() {
    return {
      name: '',
      description: '',
      todos: []
    }
  },
  methods: {
    async createTodo() {
      const { name, description } = this;
      if (!name || !description) return;
      const todo = { name, description };
      this.todos = [...this.todos, todo];
      await API.graphql({
        query: createTodo,
        variables: {input: todo},
      });
      this.name = '';
      this.description = '';
    },
    async getTodos() {
      const todos = await API.graphql({
        query: listTodos
      });
      this.todos = todos.data.listTodos.items;
    },
    subscribe() {
      API.graphql({ query: onCreateTodo })
        .subscribe({
          next: (eventData) => {
            let todo = eventData.value.data.onCreateTodo;
            if (this.todos.some(item => item.name === todo.name)) return; // remove duplications
            this.todos = [...this.todos, todo];
          }
        });
    }
  }
}
</script>

Díky tomu jsem nyní mohl spustit yarn serve a podívejte se na stránky. V tomto okamžiku jsem se zaregistroval jen proto, abych měl účet k použití, a přidal jsem položku úkolu. V tuto chvíli vše fungovalo hladce!

Posledním krokem, než se dostanete do správné odchylky od tohoto příkladu úkolu, je nyní správné zveřejnění aplikace v Amplify. To se provede spuštěním amplify add hosting . Přijměte hostování pomocí konzoly Amplify (spravovaný hosting s vlastními doménami, průběžné zavádění) a Ruční nasazení po výzvě. Nyní konečně zadejte příkaz amplify publish .

Bum, web aplikace Todo je aktivní!

that PartWhereiDeviate

Nyní je čas pustit se do toho nejhrubšího odchýlení od snadné cesty!

Nové schéma GraphQL!

Moje schéma, které chci přidat, se týká vytváření kolekcí pro řadu sad dat. První je soubor dat, o kterém běžně mluvím, a ano, skutečně se soustředí kolem vlaků! Pokud vás nezajímají vlaky část a schéma a další zájem o změny přeskočte dolů do sekce "Deploying The Changes" v příspěvku.

Dobře, popis datového modelu, který chci mít a používat, začnu minimální částí, kterou je pouze seznam železnic. Toto by byl seznam, nebo přesněji tabulka železnic, ke kterým můžeme také přidat železnice a sbírat o nich periferní informace. Pro tuto tabulku přidám následující pole, AKA sloupce dat k uložení. Chtěl bych shromáždit následující pro železnici:

název železnice
wikipedia URI
identifikátor URI mapy
periferní detaily nestrukturované povahy
rok, měsíc a den založení železnice
záznamové razítko

Kromě toho chci vést seznam vlaků - konkrétně pojmenovaných vlaků - které každá železnice provozuje. Tato data by zahrnovala:

název vlaku
aktivní – ano / ne
podrobnosti o periferii nestrukturovaného typu
wikipedia URI
URI mapy trasy
identifikátor URI jízdního řádu
identifikátor URI vlaku – např. webové stránky nebo něco, co by mohlo být věnováno konkrétnímu vlaku.
záznamové razítko

Nasazení změn

Nyní je čas nasadit tyto dodatečné změny databáze a schématu. Jedním z nejjednodušších způsobů, jak tyto změny provést, je použít Amplify Studio, které má skvělou sekci pro datové modelování, což zase dává dohromady a zajišťuje, že je vaše schéma použitelné. Pak vám to umožní nasadit toto nové schéma se změnami v databázi a aktivní službě!

Zde přejděte do rozhraní.

Jakmile jsem přešel do rozhraní, vytvořil jsem další tabulky, jako je tato.

Poté stačí kliknout na Uložit a nasadit a poté Nasadit v následujícím modálním dialogu a Amplify nasadí změny schématu AppSync.

Když jsem to nasadil, ve stejném rozhraní Amplify Studio jsem pak kliknul na GraphQL API a poté na Název zdroje pro mywahteverproject otevřít AppSync Console.

Dále ve schématu směrem ke dnu pak mohu najít a potvrdit, že mé typy jsou vložené a připravené k použití. Typ Todo je stále tam, protože jsem ho ještě nemusel opravdu odstraňovat a funguje jako dobrá pracovní reference. Ale co je důležitější, můžete vidět další typy a korelační vztah, který byl přidán prostřednictvím rozhraní Amplify pro modelování dat.

...more schema

type Todo @aws_iam
@aws_api_key {
    id: ID!
    name: String!
    description: String
    _version: Int!
    _deleted: Boolean
    _lastChangedAt: AWSTimestamp!
    createdAt: AWSDateTime!
    updatedAt: AWSDateTime!
}

type Train @aws_iam
@aws_api_key {
    id: ID!
    train_name: String!
    active: Boolean!
    peripheral_details: AWSJSON
    wikipedia_uri: AWSURL
    route_map_uri: AWSURL
    timetable_uri: AWSURL
    train_uri: AWSJSON
    record_stamp: AWSTimestamp
    _version: Int!
    _deleted: Boolean
    _lastChangedAt: AWSTimestamp!
    createdAt: AWSDateTime!
    updatedAt: AWSDateTime!
    railroads(
        railroadID: ModelIDKeyConditionInput,
        filter: ModelRailroadTrainFilterInput,
        sortDirection: ModelSortDirection,
        limit: Int,
        nextToken: String
    ): ModelRailroadTrainConnection
        @aws_iam
@aws_api_key
}

type Railroad @aws_iam
@aws_api_key {
    id: ID!
    railroad: String!
    wikipedia_ur: AWSURL
    map_uri: AWSURL
    peripheral_details: AWSJSON
    founding_year: Int
    founding_month: Int
    founding_day: Int
    record_stamp: AWSTimestamp
    _version: Int!
    _deleted: Boolean
    _lastChangedAt: AWSTimestamp!
    createdAt: AWSDateTime!
    updatedAt: AWSDateTime!
    RailroadTrains(
        trainID: ModelIDKeyConditionInput,
        filter: ModelRailroadTrainFilterInput,
        sortDirection: ModelSortDirection,
        limit: Int,
        nextToken: String
    ): ModelRailroadTrainConnection
        @aws_iam
@aws_api_key
}

...more schema

Vztah lze vidět prostřednictvím připojení objektů zde v ModelRailroadTrainConnection a související klíče.

Další kroky k aktualizaci v místním úložišti z těchto změn, které byly právě provedeny mimo synchronizaci prostřednictvím rozhraní Amplify Studio, vyžadují dva rychlé příkazy, z nichž oba jsou zobrazeny na obrazovce rozhraní GraphQL ve studiu. Nejlepší je získat příkaz, protože bude mít appId již zahrnuto v možnosti copypasta na obrazovce, která vypadá takto.

amplify pull --appId app-id-which-is-in-studio --envName dev

Provedením se vše aktualizuje a stáhne vzdálené schéma GraphQL do místního souboru schema.graphql umístěného v umístění amplify/backend/api/. Dále spusťte tento příkaz.

amplify update api

Tím se vše aktualizuje, aby se věci synchronizovaly, což mě také vyzve ke generování kódu, abych mohl mít kód na straně klienta připravený k použití, kdykoli později vytvořím uživatelské rozhraní.

Další nahoru

Některé z věcí, které popíšu v příštím článku, když budu pokračovat v tomto úsilí, je to, co bylo provedeno se všemi těmito kroky z pohledu projektu. Jak je vidět, některé věci mohou být v tomto bodě trochu matoucí, například výše uvedené schéma zobrazené v AppSync, ale po synchronizaci, pokud se podíváte na soubor schema.graphql lokálně, to ukazuje.

type Train @model @auth(rules: [{allow: public}]) {
  id: ID!
  train_name: String!
  active: Boolean!
  peripheral_details: AWSJSON
  wikipedia_uri: AWSURL
  route_map_uri: AWSURL
  timetable_uri: AWSURL
  train_uri: AWSJSON
  railroads: [RailroadTrain] @connection(keyName: "byTrain", fields: ["id"])
  record_stamp: AWSTimestamp
}

type Railroad @model @auth(rules: [{allow: public}]) {
  id: ID!
  railroad: String!
  wikipedia_ur: AWSURL
  map_uri: AWSURL
  peripheral_details: AWSJSON
  founding_year: Int
  founding_month: Int
  founding_day: Int
  record_stamp: AWSTimestamp
  RailroadTrains: [RailroadTrain] @connection(keyName: "byRailroad", fields: ["id"])
}

type Todo @model @auth(rules: [{allow: public}]) {
  id: ID!
  name: String!
  description: String
}

type RailroadTrain @model(queries: null) @key(name: "byRailroad", fields: ["railroadID", "trainID"]) @key(name: "byTrain", fields: ["trainID", "railroadID"]) @auth(rules: [{allow: public}]) {
  id: ID!
  railroadID: ID!
  trainID: ID!
  railroad: Railroad! @connection(fields: ["railroadID"])
  train: Train! @connection(fields: ["trainID"])
}

Je zřejmé, že je to velmi odlišné od toho, co je zobrazeno z jednoho místa na druhé, takže budu diskutovat o tom a dalších věcech. Takže se přihlaste (na pravé straně blogu), sledujte (@adron) a budete informováni o dalším příspěvku, jakmile bude publikován.

SITREP (Situační zpráva)

Dobře, co jsem zatím zabalil? Zde je seznam dokončených věcí:

Vytvořena aplikace Vue.js.
Formulář Vue.js sestavený pro zadání úkolů.
Autentizace byla přidána do Cognito.
Vytvořen a publikován AppSync GraphQL.
Do rozhraní AppSync GraphQL API byly přidány další typy.
Aktualizace a regenerovaný kód pro naše rozhraní API.

Co dál? Toto je krátký seznam, po něm bude ještě mnoho práce!

Vylepšete aplikaci Vue.js, poskládejte pro ni nějaký pěkný design, přidejte rozumné CSS, grafiku atd., aby rozhraní vyniklo. Především ale potřebuje cítit se použitelný a být použitelný .
Přidejte formuláře pro každé z příslušných rozhraní, abyste mohli manipulovat s daty. To by mohlo představovat mnoho různých věcí, přidání navigace, směrování a dalších nabídek a podobně.
Přidat obrazovky, které mohou poskytovat pěkné zprávy o datech, která dávám dohromady. Bylo by například hezké získat seznam skutečně pojmenovaných vlaků nebo železnic a zobrazit jejich obrázky, mapy a další příslušné prvky.

...a seznam pokračuje. Do příštího sezení si užijte svůj mlátící kód! 🤘🏻

Reference

Začínáme s Vue.js &Amplify
Oficiální příspěvek na blogu o vydání Vue.js v3 pro Amplify od Williama Lee.

Aktualizovaná (za leden-2022) aplikace Vuejs v3 na Amplify, AppSync a Cognito

Předpoklady

that PartWhereiDeviate

Nasazení změn

SITREP (Situační zpráva)

Reference

VueJS:Dvourozsahový posuvník

Jak načíst soubory .vue přímo z prohlížeče

Vue Data Object:Podrobnosti, které musíte znát

Knihovna pro správu Vuex-State pro Vue (Vue2 a Vue3)

5 tipů Vue pro vývojáře React

Jak komponenty vyhrály „války rámců“