Gweather 소개 - Gif가 포함된 마이크로 날씨 앱!

8062 단어 amplifyreactexpoaws


스타일리시한 실시간 날씨 업데이트를 제공하는 풀 스택 앱을 배포하세요.

실제 앱을 만들기 위해 모든 조각이 어떻게 결합되는지 보여주기 때문에 내가 구축한 이전 앱 예제가 AWS Amplify를 학습하는 데 얼마나 훌륭했는지에 대한 피드백을 많이 받았습니다. 이를 염두에 두고 서버리스 기능으로 GraphQL 리졸버를 지원하는 Amplify의 가장 좋아하는 기능 중 하나를 보여주기로 결정했습니다. 이를 통해 거의 모든 것을 데이터 소스로 사용할 수 있으며 매우 강력한 기능입니다!

그것이 하는 일



Gweather는 마이크로 날씨 앱이며 다음과 같은 기능을 제공합니다.
  • 🌎 지리적 위치를 사용하여 날씨 데이터 가져오기
  • ⛈ 미세 날씨 업데이트
  • 🌠 날씨 관련 Giphy 이미지
  • 👮‍ 인증됨
  • 🔥 서버리스 백엔드
  • 🚀 GraphQL
  • 💻 몇 분 안에 백엔드 배포

  • 작동 방식



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

    이 프로젝트는 AWS AppSync를 사용하여 날씨 및 gif 데이터를 가져오는 서버리스 함수로 지원되는 서버리스 GraphQL api를 제공합니다.

    프로젝트에서 amplify 라는 폴더를 볼 수 있습니다. 이 폴더에는 모든 사람의 계정에 재배포할 수 있는 앱의 백엔드가 포함되어 있습니다. amplify 폴더에 backend 폴더가 표시됩니다. 이 폴더에서 세 가지 주요 기능에 대한 구성을 볼 수 있습니다.
  • 인증 서비스(Amazon Cognito 제공)
  • GraphQL API(AWS AppSync로 구축)
  • 함수(AWS Lambda로 구축)
  • backend/api 폴더에는 기본 GraphQL Schema 뿐만 아니라 GraphQL API 구성이 표시됩니다.

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

    type Query {
      weather(lat: Float!, lon: Float!): Weather
        @function(name: "getweather-${env}")
    }
    
    type Weather {
      timezone: String
      current: WeatherSummary!
      hourly: WeatherSummary!
      weekly: WeatherSummary!
      icon: String!
      temperature: Int!
      feelsLike: Int!
      gif: String!
    }
    
    type WeatherSummary {
      summary: String!
      icon: String!
    }
    


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

    @function - 서버리스 함수를 AppSync 확인자로 사용하려면 이 지시문으로 필드를 장식합니다.

    앱 배포



    앱을 실행하려면 Giphy APIDark Sky API 모두에 대한 API 키가 필요합니다. 둘 다 이 앱을 실행하기에 충분한 무료 플랜이 있습니다.

    백엔드 배포 및 앱 실행


  • 저장소 복제 및 종속성 설치

  • ~ git clone https://github.com/kkemple/qweather.git
    ~ cd gweather
    ~ npm install
    


  • amplify/backend/function/getweather/src/index.js에서 Dark Sky API 및 Giphy API 키로 서버리스 기능을 업데이트합니다.

  • const buildDarkSkyUrl = (lat, lon) =>
      `https://api.darksky.net/forecast/[key]/${lat},${lon}`;
    
    const buildGiphyUrl = tag =>
      encodeURI(
        `https://api.giphy.com/v1/gifs/random?api_key=[key]S&tag=${tag}&rating=G`
      );
    


  • 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
    


  • 앱 시작

  • ~ 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!



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

    좋은 웹페이지 즐겨찾기