Flutter × FirebaseでTwitterみたいなSNSアプリを作成する【ログイン機能】【画像保存】

簡単なSNSアプリを作ってみよう!

3.65 (152 reviews)
Udemy
platform
日本語
language
Other
category
instructor
Flutter × FirebaseでTwitterみたいなSNSアプリを作成する【ログイン機能】【画像保存】
1,309
students
3 hours
content
Feb 2023
last update
$19.99
regular price

What you will learn

Flutterでのアプリ開発

SNS開発

FlutterとFirebaseプロジェクトの連携

Cloud Firestoreでのデータ管理

Cloud Storageを用いた画像アップロード機能

プログラミング言語Dartの記述

Description

※この動画コースは、Flutter学習サービス『Flutterラボ』でも公開しています。


概要

簡易版Twitterの作成が学習できる動画コースです。

実践的なUI作成と機能の実装が幅広く学ぶことができます。


主なUI実装

  • リスト表示

  • ストリーミング通信

  • プロフィール画像の円形表示

  • ボトムメニュー

  • ログイン画面

  • 投稿画面

機能実装

  • サインアップ・ログイン

    • Firebase Authentication(Email, Google Account)

  • メッセージ投稿・閲覧

    • Cloud Firesore

  • アカウント管理

    • Cloud Firesore

  • プロフィール画像保存

    • Cloud Storage

Content

はじめに

コース内容の紹介

アプリの基盤を作成する

コードを整理
クラスを定義
TimeLinePageのUI作成
投稿ページのUI作成
BottomNavigationを実装
AccountPageのUI作成
LoginPageのUI作成
CreateAccountPageのUI作成
ImagePickerの導入

Firebaseを連携させアプリのバックエンドを開発

Android用Firebaseプロジェクトの作成
iOS用Firebaseプロジェクトの作成
FlutterとFirebaseを連携
Firebase Authを用いてアカウントを作成
Firebase Authを用いてログイン可能に
Cloud Storageに画像を保存可能に
アカウント作成時にFirestoreにユーザーを追加
ログイン時にFirestoreからユーザー情報を取得表示
アカウント情報を編集可能に
投稿をFirestoreに保存可能に
自分の投稿をアカウントページに表示
タイムラインに投稿を表示
編集画面からログアウト可能に
編集画面からアカウントを削除可能に

Firebase Authenticationのさらなる活用

アカウント作成時にメール認証を実装
Googleログインを実装

これからの学習について

これからの学習について

Reviews

磯部
September 27, 2023
動画の時間は全体で3時間となっているが、これは(当たり前と言えば当たり前だが、)動画内で3時間喋るだけ、といったような内容となっている。 基本的にコーディング時に待ってくれる、ということはなく、「ここに○○と入力します」と説明したら、その後すぐに別の説明へ移ってしまう。 何を入力しているか分からぬまま先へ進むので、結果巻き戻したり、一時停止する必要が生まれるので、作業時間としてはかなりかかるものと感じた。(自分の経験が浅いことは自覚しているが、そのための学習動画なのでは…) 内容自体は悪くはないが、知識をただこちらに投げてくるだけのコース、という印象を強く受けたので、人を選ぶ内容だと感じた。
Masaru
May 29, 2023
Firebase をバックエンドに使ってアプリ作成を行うのに必要な基本要素が詰まっていると思う。まだ自分の所で動かしていないので分からないが、最新の環境ではコード修正が必要かも知れない。 メール認証やGoogleログインは実務でも利用する機会があると思うので、ここで実例を示してくれたのはありがたかった。
重田
April 9, 2023
今回のレビューをつけた理由 良かった点 ・SNSアプリに必要な機能を網羅的に実装している ・記入されている内容をとにかく書けば実装ができる 不満に感じた点 ・説明のスピードが早い ・利用しているメソッドなどの説明がないことが多い ・所々編集でカットされているため、同様の記述をしていてもimportし忘れてエラーとなり、原因を探すことに時間がかかる 全体として初心者(自分も含め)の方は難易度は高いので、基礎をしっかり勉強することや調べながら視聴することで深く理解ができると思います。
Shinji
March 13, 2023
Window11+Flutter 3.7.6+Androidで2022年7月最新は最後まで実装できました。 動画からFlutterでFirebaseを使う方法は理解できましたが、以下がマイナス点でした。 ・説明が全く足りません。クラスを使用する場合でもそのクラスがどういったものなのかを言わないし、メソッドのパラメータなども説明がされないです。同じ実装はできるようになりますが、少し違うと学習が必要です。 ・講師は「難しいと思うので見返してください」というが、説明が無いので見返しても理解できません。結局、クラスなどを自分で調べる必要があり、このコースだけで完結していません。 ビジネス契約でFlutterの日本語だとコレしかないので仕方なく選んでいるが、他にあればそちらを選びたいと思うような内容でした。 Flutterラボが公開しているFlutter × Firebaseは3つほど現時点でありますが以下の違いがあります。下2つを受ければ十分でした。 ・Flutter × Firebaseで開発するモバイルアプリ入門 ・FireStore, FlutterFireを使用, 更新されていないので最新のFlutterだとエラーとなる。 ・Flutter × Firebaseでチャットアプリを作成する【データベース】【画像保存】 ・FireStore, shared_preferences, Storage, FlutterFireを使用 ・Flutter × FirebaseでTwitterみたいなSNSアプリを作成する【ログイン機能】【画像保存】 ・Auth, Storage, FireStore, Google認証, FlutterFireは未使用
Kazuya
June 24, 2022
機能を段階的に作成していくので分かりやすかったです。 ただし、開発未経験の人には少し難しいかもしれません。 また、Q&Aに未回答のものが散見されたり、フィンガープリントのコマンド載せてないのはマイナスポイントですかね。 まぁ継続してサポートしていくのは大変だとは思います。 あと、最後の google login については少し適当になってるかな。 既にアカウントがある場合は成功するのですが、アカウントがない場合は問題が2つ発生します。 1. getUserした際にアカウントが存在しないと _CastError が発生するので TypeError で catch しないとその先に進めない ``` } on TypeError catch (e){ print('ユーザ取得エラー: $e'); return false; // handle exception } ``` 2. アカウント登録画面に遷移する際に isSignInWithGoogle: true を渡さないとメールアドレスとパスワードの項目が消えない ``` Navigator.push( context, MaterialPageRoute( builder: (context) => const CreateAccountPage(isSignInWithGoogle: true))); ``` でも、その辺を加味しても勉強になったので購入してよかったです。
中村
June 22, 2022
flutter と firebase で簡易的ながらも SNS アプリが作れるところまで説明されているのが良かった。 入門ということで、色々説明を省略しているのかもしれないが、どうしてそのようなコードの書き方をしているのか疑問に感じて、少しモヤモヤするものが残るところもあった。
tktktk_t
June 21, 2022
レビューを見た聡明な方へ まず、あなたがFlutterの初学者なら、 今すぐこの動画をみるのをやめましょう。 (言わずもがな任意です。) 当方、現役エンジニアです。 (laravel, Djangoがメインです。) エンジニアとして仕事をしているため、 ある程度技術的な共通知識はあるのにも関わらず、 この講座は著しくわかりにくいと感じました。 理由は大きく分けて2点あります。 1.話が早い これこそが、最悪にわかりにくくする最強の要因です。 企業に勤めていれば、上司に口酸っぱく言われるでしょうが、 説明する側はわかっていても、される側はわかっていないです。 あなたは、話したいことをすでに自分の頭の中で体系化されているからあなたのペースで話せますが、あなたではない人は、あなたではないので、あなたのペースでは理解ができません。 2.体系化されていない 体系化されていないです。 説明する人の頭の中ではされているんでしょうが、 省略が大きいです。 各セクションの冒頭で、そのセクションのゴールを示していますが、 ゴールだけ示して、あとは1~10しゃべる、という内容になっています。 そうではなく、ゴールするために、おおまかにどういう過程を踏むのか、それを最初に明らかにしたうえで、ソースの説明をする際は「今はどこどこの過程にいるよ」と説明があるべきなのではないでしょうか。 (~すべき、という表現は嫌悪されるでしょうが。 強くそう感じました。)
遠藤真人
May 1, 2022
私は40歳の営業職をしており、 今までプログラミング、ましてやPCに関しても無知でした。 そんな私がプログラミングに興味を持ち、半年前よりFlutterでアプリ制作に何故か取り組んでおります。 Firebaseの操作に関しては、初歩的な説明はさまざまなコンテンツで学べるのですが、 Firestoreの設計から、idに紐づけたログインユーザー毎のデータ取得の考え方等、こちらの動画は大変参考になりました。 今までさんざん調べましたが、わからなかった内容でした。 めちゃくちゃ感謝します! まだ、私には難しいですが、何度も復習したいと思いかす! またよろしくおねがいいたします!

Charts

Price

Flutter × FirebaseでTwitterみたいなSNSアプリを作成する【ログイン機能】【画像保存】 - Price chart

Rating

Flutter × FirebaseでTwitterみたいなSNSアプリを作成する【ログイン機能】【画像保存】 - Ratings chart

Enrollment distribution

Flutter × FirebaseでTwitterみたいなSNSアプリを作成する【ログイン機能】【画像保存】 - Distribution chart
4261238
udemy ID
8/24/2021
course created date
8/31/2021
course indexed date
Bot
course submited by