상자에 회의 응용 프로그램을 소개하다

몇 분 안에 귀하의 다음 활동에 테마화, 맞춤형 제작, 전체 창고와 플랫폼 간의 모바일 응용 프로그램을 배치할 수 있습니다.

🛠 React Native, GraphQLAWS Amplify 및 AWS AppSync로 구축됩니다.

This app is open source. View the repo here.

지난주Chain React에 나는'그래프QL로 실시간 연결 회의'라는 제목의 강연을 했다.


나드 다비드

여느 때와 마찬가지로 이 모든 것이 놀랍고 2020년을 기대하고 있다.다음은 회의의 사진 몇 장!
2019년 7월 13일 오후 13:50
6
54
강연에서 나는 2019년 1월에 열린 React 네이티브 아마존 회의와 우리가 어떻게 그들의 회의 응용 프로그램에서 아이디어를 얻고 이를 React 회의 응용 프로그램 체인에 응용하는지에 대해 이야기했다.

우리가 추가하고자 하는 주요 기능은 실시간 채팅이다. 이렇게 하면 참석자들이 모든 강연을 토론할 수 있고, 심지어는 강연자에게 질문을 한 후에 강연자가 이 문제들에 대답할 수 있다.

프레젠테이션 과정에서 2018 버전의 Chain React 회의 앱을 어떻게 사용하는지 보여드렸고, 이를 GraphQL 백엔드를 사용하여 매번 강연의 논평을 처리하는 것으로 업데이트했습니다.나는 프롬Infinite Red과 며칠 동안 합작하여 이 일을 완성했다.
나는 또한 우리가 신분과 학대를 어떻게 처리하는지 보여주었고 보고 평론의 기능을 추가했으며 admin panel판을 구축하여 보고의 평론을 감시하고 설비를 막으며 보고서를 삭제하는 평론을 허용했다.
응용 프로그램을 구축하는 과정에서 나는 기능을 다시 사용할 수 있다는 생각을 하게 되었다. 왜냐하면 나는 너무 많은 활동과 회의가 나타났다는 것을 알고 있기 때문이다.나는 왜 모든 사람이 사용할 수 있는 것을 만들어 보지 않겠는가?
도전: 이러한 문제는 백엔드를 포함하는 모든 내용(신분 검증, 데이터베이스,api)을 구축하는 것은 일반적으로 복제하기 어렵다는 것이다.
솔루션: AWS Amplify를 사용하면 기본 구성으로 전체 백엔드를 배포할 수 있습니다.예를 들어 만약에 인증, 데이터베이스, API와 서버 기능이 없는 응용 프로그램이 결합되고 여러 응용 프로그램에서 이 백엔드를 복제하거나 다른 응용 프로그램과 공유하고 싶다면 내가 유일하게 해야 할 일은amplify 파일 폴더를 공유하는 것이다. 누구나 같은 백엔드로 시작하고 실행할 수 있고 그들의 단말기에서 몇 개의 명령만 실행할 수 있다.
나는 사용자 정의가 쉽고 Amplify를 사용하여 이런 방식으로 배치할 수 있는 주제화된 회의와 이벤트 프로그램을 구축하기로 결정했다.

어플리케이션 배포

The code for the app is located here. Before deploying the app, I'd also take a look at the next section (How it works) so you know how everything works.

응용 프로그램을 배포하려면 다음 절차를 따르십시오.

# 1. Clone the repo & install the dependencies

~ git clone https://github.com/dabit3/conference-app-in-a-box.git

~ cd conference-app-in-a-box

~ npm install

# 2. Initialize and deploy the Amplify project

~ 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 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.

# 3. Start the app

~ react-native run-ios

# or

~ react-native run-android

백엔드가 설치되어 있습니다. 프로그램을 열고 계정을 만들고 로그인할 수 있습니다.

데이터베이스 채우기

그런 다음 다음 다음 명령을 실행하여 API와 AppSync 콘솔에 액세스합니다.

~ amplify console api

AppSync 콘솔에서 질의를 클릭하여 GraphiQL 편집기를 엽니다."사용자 풀 로그인 사용하기"를 알릴 때, 새 사용자 이름으로 로그인하고,aws에서 내보내는 aws_user_pools_web_client_id 을 사용할 수 있습니다.고객에게 js를 제공합니다.

창조 돌변

다음 내용을 사용하여 새 대화를 만듭니다.

mutation createTalk {
  createTalk(input: {
    name: "Performance In React Native",
    summary: "In this talk, we will look at the various tips and tricks for taking full advantage of React Native and using the performance attributes of the new architecture.",
    speakerName: "Ram Narasimhan",
    speakerBio: "Software Engineer at Facebook",
    time: "9:00 AM - 9:30 AM",
    timeStamp: "1573491600",
    date: "November 10",
    location: "Armory",
    speakerAvatar: "https://pbs.twimg.com/profile_images/875450414161772544/UjefWmmL_400x400.jpg"
  }) {
    id name speakerBio speakerName speakerAvatar location date time timeStamp
  }
}

데이터 조회

프로그램을 다시 불러올 때, 시작할 때 이 대화를 보여 주어야 합니다.
AppSync 콘솔에서 모든 대화를 질의하려면 다음 질의를 실행합니다.

query listTalks {
  listTalks {
    items {
      id
      name
      summary
      speakerName
      speakerBio
      time
      timeStamp
      date
      location
      speakerAvatar
    }
  }
}

작업 원리

이 프로그램의 코드는 here에 있습니다.
프로젝트에서amplify라는 폴더를 볼 수 있습니다.이 폴더는 프로그램의 백엔드를 포함하고 있으며, 누구의 계정에서도 재배치할 수 있습니다.amplify 폴더에서 백엔드 폴더를 볼 수 있습니다.이 폴더에는 두 가지 주요 기능의 구성이 표시됩니다.

인증 서비스(아마존 Cognito에서 지원)

GraphQL API(AWS AppSync로 구축)

backend/api 폴더에서GraphQL api 설정과 기본 설정 GraphQL Schema 을 볼 수 있습니다.
기본 GraphQL 모드입니다.기본 모드는 다음과 같습니다.

type Talk @model {
  id: ID!
  name: String!
  speakerName: String!
  speakerBio: String!
  time: String
  timeStamp: String
  date: String
  location: String
  summary: String!
  twitter: String
  github: String
  speakerAvatar: String
  comments: [Comment] @connection(name: "TalkComments")
}

type Comment @model {
  id: ID!
  talkId: ID
  talk: Talk @connection(sortField: "createdAt", name: "TalkComments", keyField: "talkId")
  message: String
  createdAt: String
  createdBy: String
  deviceId: ID
}

type Report @model {
    id: ID!
    commentId: ID!
    comment: String!
    talkTitle: String!
    deviceId: ID
}

type ModelCommentConnection {
    items: [Comment]
    nextToken: String
}

type Query {
  listCommentsByTalkId(talkId: ID!): ModelCommentConnection
}

Not that the Report feature is not implemented in the app, but it is there so if you wanted to add a report feature and the admin dashboard you wouldn't have to configure anything else.

이전에 Amplify를 사용한 적이 없다면 @model과 @connection 명령을 모를 수도 있습니다.Amplify CLIGraphQL Transform 라이브러리의 일부입니다.
@model - 이 명령을 사용하면 CRUD와 목록 조회 및 변이 정의, 다이나마이트 DB 테이블, GraphQL 작업에 대한 해상도를 얻을 수 있습니다.
@ 연결 - 이 명령을 사용하여 필드 간의 관계(일대다, 다대다)를 지정합니다.

GraphQL 모드 사용자 정의

이 모드는 편집할 수 있습니다.이벤트에 추가 필드가 필요한 경우 다음과 같이 백엔드를 업데이트할 수 있습니다.

업데이트 모드 (amplify/backend/api/rnconfinabox/schema.graphql에 있음).

백엔드 재배치

~ amplify push

만약 당신이나 당신이 아는 누군가가 도움을 필요로 한다면, 이 프로젝트를 사용하는 다음 활동에서 프로그램을 시작하고 실행하면, 나는 기꺼이 도움을 제공할 것입니다.

My Name is . I am a Developer Advocate at Amazon Web Services working with projects like AWS AppSync and AWS Amplify. I specialize in cross-platform & cloud-enabled application development.