Firebase를 사용하여 Flutter에서 채팅 앱을 개발하는 방법은 무엇입니까?

게시 됨: 2021-08-31

채팅 응용 프로그램 시장은 다수의 거대 기업이 지배하고 있지만 지속적으로 발전하는 기술과 사용자 요구는 시장 점유율의 일부를 획득하기 위해 새로운 메시지와 응용 프로그램에 대한 열린 문을 열어줍니다. 새로운 채팅 앱이 WhatsApp과 충돌할 필요도 없습니다. 특정 고객 모임에 서비스를 제공하는 특정 메시징 앱이나 게임, 데이트 및 의료와 같은 다양한 벤처 간의 백커뮤니케이션을 위한 오프닝이 번성합니다.

의심의 여지 없이 채팅 응용 프로그램은 이 도시의 흥미로운 문제로 바뀌었고 전 세계를 폭풍으로 몰아넣었습니다.

Statista에 따르면 월간 기준으로 20억 명의 소비자가 WhatsApp을 사용 하고 2020년에 48억의 소득을 창출할 것으로 예상되므로 채팅 응용 프로그램은 미래에 아무데도 가지 않을 것이라는 데 동의하는 것이 안전합니다.

현재 매우 기능적인 firebase 플러터 채팅 앱을 개발하는 방법 또는 메시징 앱을 만드는 방법, 그리고 스타트업을 위해 Firebase를 사용하여 채팅 애플리케이션을 개발하기 위해 조직에서 어떤 기술을 사용해야 하는지에 대한 문의가 있습니다 .

이 질문에 대한 응답은 간단합니다. Flutter Firebase 메시징 앱을 활용하여 구동 채팅 애플리케이션을 구축할 수 있습니다.

다음은 추세에 있음을 알려주는 몇 가지 통계입니다.

  • 2021년까지의 통계 보고서에 따르면 20억 명의 사용자가 매월 WhatsApp 메신저에 액세스했습니다.
  • Linkedin 통계에 따르면 2018년에 1,062억 7,000만 달러에 달하는 모바일 앱 시장 규모는 18.4%의 CAGR을 보고 했으며 2026년까지 4,073억 1,000만 달러에 이를 것으로 예상됩니다 .
  • 미국 시장의 채팅 앱 사용자 수 는 4억 6,120만 명으로 2027년 에는 중국이 5억 9,290만 명에 이를 것으로 예상됩니다 .
  • 메신저 피플 에 따르면 최신 메시징 앱 사용 통계에 따르면 WhatsApp은 전 세계적으로 20억 명의 사용자를 보유하고 있으며 Facebook Messenger는 1.3이며 WeChat은 10억 명에 불과합니다.

Revenue of selected mobile messaging apps

firebase를 사용하여 flutter에서 채팅 앱을 개발하는 단계를 살펴보겠습니다.

채팅 앱의 Firebase: 로그인, 가입

이것은 Flutter Firebase 채팅 애플리케이션의 기본적인 부분 중 하나입니다. 사용자 이름으로 애플리케이션에 빠르게 로그인하여 정보를 안전하게 보호하기 때문입니다. 그렇다면 더 나아가 Google 로그인을 만드는 방법을 알아보겠습니다.

Google 로그인 대안을 선호하는 경우 CMD/터미널 또는 VS 코드를 사용할 수 있습니다. 이 모두는 순조로운 코드 감독자 역할을 하며 조사, 버전 제어 및 할당 실행과 같은 개발 서비스에 도움을 제공합니다.

그 시점에서 main.dart의 모든 주석을 곧바로 실행하고 MyHomePage() 상태 저장 가젯을 폐기하고 라이브러리 내부에 폴더를 구성합니다.

모든 사진을 특정 이름으로 정렬한 후에는 Sign-in.dart 내부에 Sing-in이라는 위젯을 만들어야 합니다. 여기서 프레임워크, appBar, 본문 및 플로팅 버튼을 활용할 수 있습니다. 또한 appBar는 기본적으로 모든 화면에서 동일하므로 다른 문서 파일로 만드는 것이 좋습니다. 이렇게 하면 다른 화면에서도 쉽게 사용할 수 있습니다.

기능을 추가하려면 위젯을 설치하세요.

플러터 채팅 애플리케이션을 만드는 것과 관련하여 원활하게 실행하려면 플러그인의 올바른 배열을 조정하는 것이 중요합니다.

플러그인의 적절한 배열을 통합하면 기본 Firebase 채팅 애플리케이션을 구성하고 조합할 수 있습니다.

플러그인 모듈을 설치하려면 "Firebaseauth, google sign in, cloud firestore, Firebasestorage"를 Firebase로 채팅 앱에 추가하는 지침을 따르세요. 우연히 플러그인을 추가하는 데 어려움을 겪고 있다면 Flutter 앱 개발자를 고용하여 중요한 Flutter 채팅 애플리케이션을 구축하는 데 도움을 받을 수 있습니다.

add functionality

Google 계정을 통해 로그인하는 Flutter Firebase 채팅 애플리케이션을 개발하는 경우 그 시점에서 아래에 언급된 플러그인을 고려하세요. 이 플러그인은 고객에 대한 정보, 메시징 및 이미지 업로드를 위한 실시간 정보를 제공합니다.

채팅 앱 개발을 위한 이상적인 플러그인:

  • Flutter용 Firebase 인증
  • 구글 로그인
  • Flutter용 Cloud Firestore 플러그인
  • 갤러리에서 이미지를 선택하는 이미지 선택기
  • 토스트를 표시하는 Fluttertoast
  • Flutter용 Firebase 클라우드 스토리지

앱 화면 레이아웃 디자인

이상적인 채팅 응용 프로그램에서는 다양한 화면을 사용할 수 있습니다. 입대 화면, 로그인 화면, 설정 화면, 랜딩 페이지 화면, 채팅 화면으로 구성되어 있습니다. 이 화면의 로드는 다양한 코드 배열을 구성하여 생성되므로 지침을 따르는 것이 중요합니다.

  • 로그인 화면 레이아웃

클라이언트가 애플리케이션에 효과적으로 로그인할 때 반환 변수 firebaseUser는 displayName, PhotoUrl 등을 포함하여 클라이언트의 일부 기본 데이터를 다룹니다.

Login Screen Layout

로그인 화면에 진입하는 동안 사용자는 신규 사용자인지 기존 사용자인지 확인해야 하며 이는 서버에 쿼리를 전송하기만 하면 됩니다. 새 사용자인 경우 데이터베이스에 작성해야 합니다.

login screen-new user

  • 메인 화면 레이아웃

현재 이것은 데이터 세트에서 사용 가능한 모든 사용자를 나열하는 것이 아니라 별명, 나에 대한 및 아바타를 포함한 전체 데이터를 추가로 제공하는 채팅 응용 프로그램의 기본 페이지입니다. 심오한 작업이 필요하고 클라이언트 데이터에 대해 더 많은 필드를 디자인하려는 경우 해당 시점에서 모든 특정 고객 정보를 볼 수 있는 화면을 만드십시오.

Main Screen Layout

  • 화면 레이아웃 설정

이 페이지는 사용자가 기호 변경, 닉네임 및 나에 대한 묘사와 같은 정보를 편집하는 데 도움이 됩니다. 기본 페이지를 자세히 작성하신 경우에도 추가 필드에 변경 접수를 제공할 수 있습니다.

  • 채팅 화면 레이아웃

현재 채팅 화면은 클라이언트가 상대방에게 문자와 사진 메시지를 보낼 수 있는 곳입니다. 따라서 채팅 화면이 다른 것을 처리한다는 것을 의미합니다.

루트는 백 프레스를 처리해야한다는 사실에 비추어 WillPopScope입니다. 스티커나 콘솔이 표시되는 경우에는 그 시점에서 이전 화면으로 탐색하는 대신 숨겨야 합니다.

cost to develop a chat app like whatsapp

Firebase와 Flutter 연결하기

Firebase 채팅 앱 Android를 연결하려면 다음 단계를 따르세요.

Google 계정으로 가입 또는 Firebase에 로그인

프로젝트를 생성한 다음 > 프로젝트 개요를 입력한 다음 "패키지 이름"을 입력합니다.

google-services.json을 다운로드하고 다운로드한 google-services,json 파일을 Android 앱 모듈 루트 디렉터리로 이동합니다.

프로젝트 수준 build.gradle에 google-services 종속성을 추가하면 완료됩니다.

결론

이 문서에 인용된 이러한 단계 가 앱 메시징에서 Firebase를 사용한 Flutter 앱 개발 서비스를 지원하기를 바랍니다. 그러나 코딩 부분으로 작업하는 동안 여러 버그가 발생하기 때문에 이러한 단계를 완료하는 것이 말처럼 간단하지 않을 수 있습니다.