포켓덱스 소개

AWS AppSync 및 AWS Lambda가 지원하는 전체 스택 Pokédex 앱을 몇 분 만에 배포하십시오.

저는 최근에 사람들이 다음에 어떤 예시를 보고 싶어하는지 물었고 지금까지 가장 큰 요청은 AWS Amplify 및 AWS AppSync에서 페이지 매김을 처리하는 방법과 Pokémon보다 더 좋은 방법이 무엇인지였습니다!

그것이 하는 일

🦊 100개의 포켓몬 스크롤 스크롤

💅 애니메이션

📄 페이지 매김

🔥 서버리스 백엔드

🚀 GraphQL

💻 몇 분 안에 백엔드 배포

작동 방식

앱의 코드는 here에 있습니다.

이 프로젝트는 AWS AppSync를 사용하여 서버리스 함수로 지원되는 서버리스 GraphQL API를 제공합니다. 이러한 함수는 Pokemon API 과(와) 상호 작용하는 데 사용됩니다.

프로젝트에서 amplify 라는 폴더를 볼 수 있습니다. 이 폴더에는 모든 사람의 계정에 재배포할 수 있는 앱의 백엔드가 포함되어 있습니다. amplify 폴더에 backend 폴더가 표시됩니다. 이 폴더에서 세 가지 주요 기능에 대한 구성을 볼 수 있습니다.

GraphQL API(AWS AppSync로 구축)

함수(AWS Lambda로 구축)

backend/api 폴더에는 기본 GraphQL Schema 뿐만 아니라 GraphQL API 구성이 표시됩니다.

이것이 기본 GraphQL 스키마입니다. 기본 스키마는 다음과 같습니다.

type Query {
  listPokemon(limit: Int, nextToken: Int): PokemonConnection
    @function(name: "listpokemon-${env}")
  pokemon(id: Int): Pokemon @function(name: "getpokemon-${env}")
}

type PokemonConnection {
  nextToken: Int
  items: [Pokemon]
}

type Pokemon {
  abilities: [PokemonAbility]!
  baseExp: Int!
  height: Int!
  id: Int!
  image: String!
  moves: [PokemonMove]!
  name: String!
  weight: Int!
}

type PokemonMove {
  id: String!
  details: PokemonMoveDetails @function(name: "pokemonmovedetails-${env}")
}

type PokemonAbility {
  id: String!
  details: PokemonAbilityDetails @function(name: "pokemonabilitydetails-${env}")
}

type PokemonMoveDetails {
  name: String!
  flavorText: String!
  effect: String!
}

type PokemonAbilityDetails {
  name: String!
  effect: String!
}

이전에 Amplify로 작업한 적이 없다면 @function 지시문을 모를 수 있습니다. 이것은 Amplify CLI의 라이브러리GraphQL Transform의 일부입니다.

@function - 서버리스 함수를 AppSync 확인자로 사용하려면 이 지시문으로 필드를 장식합니다. 이는 Amplify CLI를 통해 구성된 기능에 매핑됩니다.

앱 배포

백엔드 배포 및 앱 실행

저장소 복제 및 종속성 설치

~ git clone https://github.com/kkemple/pokedex.git
~ cd pokedex
~ npm install

Amplify 프로젝트 초기화

~ amplify init
? Enter a name for the environment: dev (or whatever you would like to call this env)
? Choose your default editor: <YOUR_EDITOR_OF_CHOICE>
? Do you want to use an AWS profile? Y

앱이 제대로 작동하는지 확인하기 위해 백엔드 모의

amplify mock

앱을 시작하고 UI가 제대로 작동하는지 확인합니다.

~ expo start

AWS로 푸시

~ amplify push
? Are you sure you want to continue? Y
? Do you want to generate code for your newly created GraphQL API? N
> We already have the GraphQL code generated for this project, so generating it here is not necessary.

GraphQL 스키마 사용자 지정

이 스키마는 편집할 수 있습니다. 추가 필드 또는 기본 유형이 필요한 경우 다음을 수행하여 백엔드를 업데이트할 수 있습니다.

스키마를 업데이트합니다(amplify/backend/api/gweatherapp/schema.graphql에 있음).

백엔드 재배포

amplify push

There is a settings page in the app, a fun challenge would be to allow users to store locations and set one for the forecast!

귀하 또는 귀하가 아는 사람이 이 앱을 시작하고 실행하는 데 도움이 필요하면 에서 저에게 연락하세요. 기꺼이 도와드리겠습니다!