Stream으로 Flitter 채팅 애플리케이션 구축: 애플리케이션 구축(3부)

본고는 Stream을 이용하여 전 기능 진동 응용 프로그램을 구축하는 시리즈의 일부분이다.모든 다른 부분과 완성된 코드는 아래에서 찾을 수 있다.
Part 1: Introduction
Part 2: Configuration
SpikeChat Github Project
설정이 이미 완성되었기 때문에, 지금은 인코딩을 시작할 때이다👨🏻‍💻. 우리 시작합시다!

애플리케이션 흐름:

다음은 응용 프로그램의 작업 원리다.누군가가 그것을 처음 열었을 때, 그들은 비밀번호를 입력해야만 계속할 수 있었다.비밀번호를 입력하면 사용자 이름을 선택할 수 있습니다.사용자 이름을 선택하면 인증되어 Spikeball 채팅 화면에 표시됩니다.
처음 프로그램을 열면 사용자 이름을 표시하는 화면으로 가져와 Spikeball 채팅 화면에 들어갈 수 있습니다."계속"을 클릭하면 원래 사용자 이름을 응용 프로그램을 통해 재검증합니다.
코드가 어떻게 작동하는지 자세히 알아보자!

주요했어쏜살같이 달리다

주요dart 파일은 매우 간단합니다.공유 기본 설정을 초기화하고 비밀번호를 입력했는지 여부에 따라 어떤 화면을 불러올지 결정하는 것입니다.
암호를 입력하지 않으면 (응용 프로그램을 처음 사용) 입력 화면으로 가져옵니다.

그들이 비밀번호를 입력하는 데 성공하면, 공유 기본 설정의'isValidated'설정을true로 설정합니다.따라서 다음에 그들이 프로그램을 열 때, 그들은 다시 입력할 필요가 없을 것이다.만약 그들이 정확한 비밀번호를 입력하지 않았다면, 그들은 이 프로그램에 접근할 수 없었을 것이다. 따라서 나는 나와 비밀번호를 공유하는 친구만이 이 프로그램을 사용할 수 있다는 것을 안다.
다음은 포털 포인트 화면의 코드입니다.
만약 그들이 이미 비밀번호를 입력했다면, 나는 메인 화면을 불러올 것이다.프로그램을 처음 열면 사용자 이름을 설정하고 사용자 이름으로 사용자를 만듭니다.만약 그들이 사용자 이름을 설정했다면, 나는 채팅에 들어가기 위해 사용자 이름과 "계속"단추를 표시할 것이다.마찬가지로 나는 공유 기본 설정을 사용하여 사용자 이름을 저장한다. 그러면 나는 그들이 설정한 사용자 이름으로 나의 친구를 다시 검증할 수 있다.


다음은 Home 코드입니다.던지기:

흐름으로 사용자 인증

사용자의 신분을 검증하기 위해서, 나는 플러그인을 사용하여 흐르는 응용 프로그램의 기밀이 있는 영패를 생성합니다.흐름 클라이언트는 "tokenProvider"매개 변수를 가지고 있습니다. 함수를 전달할 수 있습니다. 이 함수를 사용하여 인증 영패를 생성해야 합니다.나는 모든 코드를 하나의 단독 클래스인'ChatModel'에 두었다.비록 나는 공급자의 기능을 실현하지 못했지만, 나는 이 클래스를 확장하여 장래에 이 응용 프로그램에 여러 개의 채팅을 구축하고 추가하고 싶은 것을 방지했다. 이것은 공급자에게 좋은 용례가 될 것이다.
내 친구가 사용자 이름을 입력할 때, 나는 클라이언트에 대해 인증을 하고 사용자를 설정한다.클라이언트에서 setUserWithProvider 방법을 호출하여 id를 입력한 사용자 이름으로 설정하고 채널 형식을 "모빌"로 설정하며 채널을 "Spikeball"으로 명명합니다.채널 대표 채팅방."extraData"매개 변수는 이미지와 같은 다른 필드를 설정하는 데 사용할 수 있습니다.

*await *client.setUserWithProvider(User(
    id: 'id_$userId',
    extraData: {
      'name': '$userId',
      'image': 'https://picsum.photos/100/100'
    }));

*final *channel = client
    .channel('mobile', id: 'Spikeball', extraData: {
  'image':
      'https://scheels.scene7.com/is/image/Scheels/85375900555?wid=400&hei=400&qlt=50'
});
channel.watch();

마찬가지로, 응용 프로그램으로 돌아갈 때, 나는 거의 같은 코드로 사용자를 인증한다.유일한 차이점은 이미 입력한 사용자 이름을 사용하기 때문에 다시 입력할 필요가 없기 때문에 다른 사용자를 만들지 않는다는 것입니다.

*await *client.setUserWithProvider(User(
    id: 'id_${sharedPrefs.username}',
    extraData: {
      'name': '${sharedPrefs.username}',
      'image': 'https://picsum.photos/100/100'
    }));

*final *channel =
    client.channel('mobile', id: 'Spikeball', extraData: {
  'image':
      'https://scheels.scene7.com/is/image/Scheels/85375900555?wid=400&hei=400&qlt=50'
});
channel.watch();

시작 jwt 흐름 채팅 위젯 사용하기

흐르는 채팅을 실현하는 작은 위젯은 매우 간단하다.우리는 작은 위젯 트리 위에 "StreamChat"작은 위젯을 놓고 클라이언트를 전달하고 "StreamChannel"작은 위젯을 하위 위젯으로 추가하고 채널을 지정한 다음에 우리가 사용하고자 하는 (시각적) 흐르는 채팅 위젯을 추가합니다.이것은 내가 작성한 ChannelPage 위젯의 위젯입니다.

Navigator.*of*(context).push(MaterialPageRoute(
      builder: (_) => StreamChat(
            client: client,
            child: StreamChannel(
              channel: channel,
              child: ChannelPage(),
            ),
          )));
}

ChannelPage 위젯:
Channel Page 위젯 중 I "Channel Header"는 AppBar의 흐름 위젯이고,'메시지 ListView'는 메시지를 표시하는 곳입니다.'메시지 입력'은 메시지를 입력하는 텍스트 입력 필드입니다.
다음은 모양입니다.

공유 기본 설정 구현

만약 내가 공유 기본 설정을 어떻게 실현하는지 알고 싶다면, 나는 이 점을 따라 공유 기본 설정을 응용 프로그램의 어느 곳에서든 쉽게 접근할 수 있도록 할 것이다.나는 방금 main에서 호출되는'init'방법을 만들었다.dart 공유 기본 설정을 초기화하고 사용자 이름과 검증을 위한 getter와setter를 만듭니다.코드의 어느 곳에서든\u SharedReferences에 액세스할 수 있습니다.
다음은 내가 공유하는 선호 코드입니다.

최종 제품:

리소스:

SpikeChat Github 프로젝트 문제 해결

현재 Android APK를 구축할 때 오류가 있지만 Android 시뮬레이터나 장치에서 프로그램을 실행하면 정상적으로 작동할 수 있습니다.Android 응용 프로그램이 정상적으로 작동하도록 Gradle을 최신 버전으로 업데이트해야 합니다.만약 당신에게 다른 문제가 있다면, 이 문장을 평론해 주십시오. - 저는 기꺼이 돕겠습니다:)
여보세요, 저는 Ash입니다.👋🏼 연결하라고!
🌐 |👥
|✉️ ashtonjones.dev
👨‍💻 구글 인증 안드로이드 엔지니어 |
✍ 작가 |
🧘‍♂️ 스토그와 명상자
📱 응용 프로그램을 구축해야 합니까?연락 주세요[email protected].
here