코딩강의 (127) 썸네일형 리스트형 295. Sending Push Notifications Automatically via Cloud Functions 1. 이제는 파베에서 수동으로 메시지를 보내지 말고 자동으로 보내보자. 이 부분은, 파이어베이스 백엔드에 접근하고, 유료전환으로 해야한다. (거의 안쓰니 무료 / 요금제는 나중에 실제 프로덕션 할 때 확인해보자. 서버비 부담될정도로 유저가 많아졌으면 좋겠다) 파베 위 펑션 부분을 진행하면 된다. 위 펑션 부분을 누르면 npm 모듈을 다운받으라고 나온다. npm install -g firebase-tools 이걸 설치하자. 그러면 아래와 같은 폴더/파일이 생성된다. 그리고, 펑션 화면에 나오는대로 firebase init를 하게되면 관련 설정값들을 지정해준다. 그리고 index.js에는 사용자가 원하는 함수 명령어를 넣으면 된다. - index.js const functions = require("fire.. ~294. Working with Notification Topics 1. 알림 기능을 만들어보자. ios와 android 세팅 방법이 다르다. android는 시뮬레이터를 통해 하려면, debug모드 (f5)에서 가능하다. 아래 사이트 참조 https://firebase.google.com/docs/cloud-messaging/flutter/client?hl=ko Flutter에서 Firebase 클라우드 메시징 클라이언트 앱 설정 Google I/O 2023에서 Firebase의 주요 소식을 확인하세요. 자세히 알아보기 의견 보내기 Flutter에서 Firebase 클라우드 메시징 클라이언트 앱 설정 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐 firebase.google.com 개별 토큰을 받는 방법과, 토픽 구독형방법이 있다. 개별 토큰은, 기기별로 토큰을.. ~290. Styling Chat Message Bubbles 1. 채팅을 입력하면 화면에 나오게 세팅해보자. 먼저 데이터를 파베로 보내고, 해당 파베 데이터를 가지고 와서 화면에 보여주는식으로 진행할 예정이다. - new_message.dart import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:firebase_auth/firebase_auth.dart'; import 'package:flutter/material.dart'; class NewMessage extends StatefulWidget { const NewMessage({super.key}); @override State createState() { return _NewMessageState(); } } class _NewMes.. 286. Adding ChatMessages & Input Widgets 1. 로그인 후, 채팅 화면을 꾸며보자. -chat.dart import 'package:chat_app/widgets/chat_messages.dart'; import 'package:chat_app/widgets/new_message.dart'; import 'package:firebase_auth/firebase_auth.dart'; import 'package:flutter/material.dart'; class ChatScreen extends StatelessWidget { const ChatScreen({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const .. ~285. Storing a Username 1. 회원 가입 시, 이미지 업로드를 해보자. 먼저 파베 사이트에서 Storage부분에 접속 한 후, 아래와 같이 rule을 설정해보자. (해당 룰은 로그인 한 유저는 모든 접근이 가능하다는 룰임). 기타 다른 룰들을 설정해보려면, 문서보기를 눌러서 더 내용을 확인해보자. 그리고 firestore database부분에도 위와 같이 룰을 적용시켜보자. firestore에는 구글 클라우드로 들어가서 native로 변경해주어야 한다. 2. 패키지 설치 flutter pub add firebase_storage --> 파일 자체 저장용 (아마존 s3 같은거) flutter pub add image_picker flutter pub add cloud_firestore --> db같이 data 저장용 : url 주.. ~276. Adding User Logout 1. splash 화면을 만들어보자. 기존 구성의 문제는, 스냅샷 값을 받아오기전에 잠깐 auth화면을 보여준다. 때문에, 그 값을 받아오기전에 보여줄 수 있는 splash화면을 만들어보자. 2. 로그아웃 기능을 만들어보자. 로그아웃을 하게 되면 기기 값에 토큰값이 사라져, 기기를 다시 껐다 켜도 로그아웃된 상태가 된다. - main.dart import 'package:flutter/material.dart'; import 'package:firebase_auth/firebase_auth.dart'; import 'package:firebase_core/firebase_core.dart'; import 'package:chat_app/screens/splash.dart'; import 'package:.. ~274. Showing Different Screens Based On The Authentication 1. 로그인이 되면 다른 화면으로 넘어가보자. - chat.dart import 'package:flutter/material.dart'; class ChatScreen extends StatelessWidget { const ChatScreen({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('FlutterChat'), ), body: const Center( child: Text('Logged in!'), ), ); } } 1) 로그인이 되면 해당 화면으로 이동 시킬 것이다. - main.dart import 'package:chat_app/scree.. ~273. Logging Users In 1. 로그인 부분을 구현해보자. -authentication 흐름 - auth.dart import 'package:flutter/material.dart'; import 'package:firebase_auth/firebase_auth.dart'; final _firebase = FirebaseAuth.instance; class AuthScreen extends StatefulWidget { const AuthScreen({super.key}); @override State createState() { return _AuthScreenState(); } } class _AuthScreenState extends State { final _form = GlobalKey(); var _isLogin = .. ~272. Signing Users Up 1. firebase cli 및 sdk를 이용하기 위해 몇 가지 세팅을 진행하자. https://firebase.google.com/docs/flutter/setup?hl=ko&platform=ios Flutter 앱에 Firebase 추가 의견 보내기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Flutter 앱에 Firebase 추가 plat_ios plat_android plat_web iOS+ Android 웹 기본 요건 아직 Flutter 앱이 없다면 firebase.google.com 1) npm install -g firebase-tools 설치하고 firebase 명령어에 입력 후 화면이 나오면 설치 성공 2) firebase login으로 파베 계정 로그.. ~262. Using a FutureBuilder for Loading Data 1. 모바일 기기 SQL Database에 데이터를 저장해보고, 화면에 띄워보자. - user.places.dart import 'dart:io'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:path_provider/path_provider.dart' as syspaths; import 'package:path/path.dart' as path; import 'package:sqflite/sqflite.dart' as sql; import 'package:sqflite/sqlite_api.dart'; import 'package:favorite_places/models/place.dart'; Future _getDat.. 이전 1 2 3 4 ··· 13 다음
