풀스택 Flutter 및 MongoDB 클라우드 미니 코스 | 무료 시청!!!

Flutter와 MongoDB 콤보를 제작해 달라는 수많은 요청을 받은 후 풀스택 Flutter와 MongoDb Cloud 미니 코스를 제작하는 데 시간을 할애했습니다. MongoDB Cloud Atlas 데이터베이스에서 연락처를 관리하는 연락처 목록 애플리케이션을 빌드합니다. 또한 MongoDB 데이터 저장소와 통신하기 위해 Dart 백엔드 서버를 구현할 것입니다. 이 앱은 Flutter 모바일 및 웹 플랫폼 모두에 대해 빌드됩니다.

시작하기

프로젝트 및 클러스터를 생성하려면 MongoDB Cloud Account이 필요합니다. 이렇게 하면 MongoDB가 설치된 환경과 해당 MongoDB 인스턴스에 연결할 사용자가 제공됩니다.

미니 코스의 내용은 다음과 같습니다.

소개
앱 데모
MongoDB Cloud Atlas 프로젝트 및 클러스터 설정
터미널을 통해 MongoDB 클러스터에 연결
코드베이스 및 종속성 검사
코드베이스에서 MongoDB에 연결
서버 및 초기 경로 생성
POST 및 DELETE 엔드포인트 추가
초기 연락처 화면 구현
"연락처 없음"보기 구현
연락처 추가 기능 구현
스타일 목록 타일 위젯
NoContacts 위젯 리팩터링
ContactListing 위젯 만들기
Faker 패키지 사용
연락처 삭제 기능 추가
ContactsApi 클래스 구현
연락처 PODO 만들기
api 클래스에 연락처 생성 방법 구현
Flutter 웹에서 앱 실행
아웃트로

Github repo 에서 starter 분기를 복제하고 확인하십시오. 이렇게 하면 Fullstack Flutter 및 MongoDB Cloud 미니 과정을 따라갈 수 있는 올바른 설정이 제공됩니다.

이 미니 코스에 포함된 Dart 패키지는 다음과 같습니다.

sevr - HTTP 서버 작성을 위해 ExpressJS에서 영감을 받은 Dart 라이브러리입니다. 이것을 사용하여 MongoDB 클라우드 클러스터와 통신하는 서버를 작성합니다.

dio - 강력한 Dart용 HTTP 클라이언트입니다. 이를 사용하여 Dart 백엔드 서버에 요청합니다.

faker - 다양한 가짜 데이터를 생성하는 라이브러리. 이를 사용하여 Fullstack Flutter 앱의 연락처 이름을 생성합니다.

mongo_dart - MongoDB 데이터베이스와 통신하기 위한 라이브러리입니다. 이를 통해 MongoDb Cloud Atlas와 대화할 수 있습니다.

서버 구현

server/lib/server.dart에서 MongoDB Cloud Atlas에 대한 연결을 시작합니다.

import 'package:mongo_dart/mongo_dart.dart';
import 'package:sevr/sevr.dart';

void start() async {
  // Log into database
  final db = await Db.create(
      'mongodb+srv://<user>:<password>@cluster0.xpkap.mongodb.net/<dbname>?retryWrites=true&w=majority');
  await db.open(); // Initiate the connection
  final coll = db.collection('contacts'); // Define a handle to the contacts collection
}

데이터베이스 연결 문자열은 클러스터에서 "CONNECT"버튼을 클릭한 다음 연결 방법으로 "애플리케이션 연결"을 선택하여 찾을 수 있습니다.



MongoDB 클라우드 클러스터에 대한 연결을 여는 것은 데이터베이스에 대한 게이트웨이 역할을 하는 서버를 생성할 수 있음을 의미합니다.

void start() async {
  // Log into database
  ..
  // Create server
  const port = 8081;
  final serv = Sevr();
}

HTTP 서버는 sevr 변수에 포함되어 있어 첫 번째 경로를 정의할 수 있습니다.

void start() async {
  // Log into database
  ..
  // Create server
  const port = 8081;
  final serv = Sevr();

  // Define routes
  serv.get('/', [
    (ServRequest req, ServResponse res) async {
      final contacts = await coll.find().toList();
      return res.status(200).json({'contacts': contacts});
    }
  ]);
}

첫 번째 경로는 요청을 하는 모든 클라이언트에 대해 반환될 경로 및 데이터를 설명합니다. 이 경우 서버의 루트 경로에 대한 GET 요청입니다. MongoDb 컬렉션의 연락처 목록을 반환하고 있습니다.

서버와 경로를 활성화하려면 들어오는 연결을 수신 대기해야 합니다.

void start() async {
  // Log into database
  ..
  // Create server
  ..
  // Define routes
  ..
  // Listen for connections
  serv.listen(port, callback: () {
    print('Server listening on port: $port');
  });
}

터미널에서 이것을 실행하면 아래와 같은 출력이 제공됩니다.



전체 미니 과정에서 자세히 알아보십시오.

→ Watch the Fullstack Flutter MongoDB Cloud Mini-Course
→ Get the source code

나눔은 배려입니다🤗

이 게시물을 재미있게 읽으셨다면 이 페이지의 소셜 버튼을 통해 공유해 주세요. Dart 및 Flutter를 사용하여 전체 스택 애플리케이션을 빌드하는 방법을 보여주는 자습서를 보려면 YouTube 채널로 이동하십시오.

Subscribe to the newsletter 무료 35페이지 Dart eBook 시작하기를 이용하고 새 콘텐츠가 출시될 때 알림을 받으십시오.

좋아요, 공유 및 Dart 및 Flutter에 대한 더 많은 콘텐츠를 위해.

creativebracket.com에 원래 게시됨