実践編:React NativeとFirebaseで作るiOS/Androidアプリ:お店レビューアプリ開発編

アプリはReact Native、バックエンドにFirebaseを採用し、サーバーと連携したアプリを開発します。実際に「お店レビューアプリ」を作りながら学びます。実務にも活用できるアプリ開発・運用方法を手に入れよう!

4.36 (250 reviews)
Udemy
platform
日本語
language
Mobile Apps
category
instructor
実践編:React NativeとFirebaseで作るiOS/Androidアプリ:お店レビューアプリ開発編
2,553
students
7 hours
content
Nov 2021
last update
$54.99
regular price

What you will learn

React Nativeによる実践レベルのアプリ開発

Firebaseの基礎

Hooksを用いたコンポーネントの書き方

Contextによる状態管理

React Navigationによる画面遷移

Firestoreによるデータ管理とその設計

Cloud Storageへの画像ファイルアップロード・ダウンロード

Firebase Authenticationを用いたログイン処理

Cloud Functionを用いたバックエンド処理

Algoliaと連携した全文検索の実装

Description

本コースでは、React Nativeとfirebaseを組み合わせた、効率良いアプリ開発の手法について学びます。


多くのアプリ開発では、フロントエンドだけでなくバックエンドのサーバーが必要となってきます。


アプリ開発者にとって、サーバー側のインフラ構築や開発がネックになりがちですが、近年話題のfirebaseを用いることで非常に効率よくサーバー側を構築することが出来ます。

React NativeとFirebaseは非常に相性がよく、筆者自身もこの組み合わせで複数のアプリを開発し、その効率の良さに魅力を感じています。


コーディングでは実際に「レストランのレビューアプリ」を作りながら学びます


このアプリの中に

- React NativeとFirebaseの組み合わせ型

- Firebaseによるデータ管理やファイル管理

- Algoliaによる全文検索

など、現場でも使えるノウハウをギュッと詰め込みました。


アプリを開発しながら楽しく学びましょう!



【この講座の対象者】

・アプリ開発の経験はあるが、サーバー側の経験はない人

・React Nativeでの開発を経験してみたい人

・Firebaseの基礎を学びたい人



【この講座では扱わないこと】

・JavaScriptの基本的な文法

・React Nativeの基礎

※React Nativeの基礎の解説は薄めです。state, props, hooksなどのキーワードがピンとこない場合は基礎編を先におすすめします。


【必要なもの】

・mac

・googleアカウント



【更新情報】

2020/12/19 ボーナスレクチャー「プッシュ通知を送る」を追加

2020/10/3 レクチャー38「Expo SDK 39における画像アップロードのエラーについて」を追加

Content

はじめに

本コースの概要と講師紹介
React Nativeについて
firebaseについて

React Nativeアプリにfirebaseを組み込んでみよう

本セクションの概要
firebaseのプロジェクト作成
firebaseのwebコンソールを触ってみる
expoのプロジェクトを作成
React Nativeにfirebaseを組み込む
React Nativeでfirestoreのデータを取得する
firestoreのデータ構造について補足
リファクタリング
まとめ

firestoreで検索やソートを実装してみよう

本セクションの概要
サンプルデータの準備
shopの一覧表示
shopを評価の高い順にソート
まとめ

React Nativeの画面遷移を実装しよう

本セクションの概要
React Navigationのインストール
AppNavigatorを作成
StackNavigatorの利用
画面間でパラメーターを渡す
TabNavigatorの利用
モーダルの画面を実装
ログイン後の画面遷移
まとめ

firebase authでユーザー認証を実装しよう

本セクションの概要
匿名ログイン
Contextによるユーザー情報の保持
ログイン後の画面切り替え
まとめ

firestoreのデータを更新する

本セクションの概要
ユーザー情報の編集
firestoreの設計のコツ(非正規化)
レビューの投稿フォーム
レビューを投稿する
カメラロールから写真を選択する
Cloud Strageに画像をアップロードする
レビュー一覧の表示
投稿したレビューを画面に即時反映する
本セクションのまとめ

Cloud functionでバックエンド処理を実装しよう

本セクションの概要
Cloud functionの環境準備
ユーザー名の更新を各レビューに反映する
平均スコアの計算を非同期に行う
まとめ

セキュリティルールについて

セキュリティルールを設定する

algoliaで全文検索を実装しよう

本セクションの概要
algoliaのプロジェクト作成
Cloud functionでalgoliaにindexを追加する
React Nativeでalgoliaの検索を実行する
まとめ

おわりに

おわりのメッセージ

Reviews

Hirom
October 5, 2022
React Nativeに関する初歩的知識がある前提で講義が進められるので、密度の濃い大変参考になる情報が満載でした。 これからも何回か繰り返し学習を行い、理解をさらに深めたいと思います。 1点だけ気になる点を挙げるとすれば、本講義の公開当初からReact Native, Firebase共にバージョンがかなり上がっていますので、講義内容についてもそれらに併せて更新頂けるとさらに嬉しいです。 ありがとうございました。
Kei
May 30, 2022
ちょくちょくバージョン違いによる調査が必要にはなりますが、React NativeからFirebaseに至るまで幅広く解説があり、コンセプトやコンポーネント作成の考え方について良質なインプットが出来ています!
K
July 18, 2021
バックエンドは基本Railsで書いていたが、firebaseの便利な機能をreact nativeで使いこなすいい導入になった。 コードがTypeScriptで書かれていたのも良かった点で、入門編からのステップアップのためによく練られた講座だと思う。
Ageshoot
December 13, 2020
受講した時点では、講習内容にてほぼスムーズに進めることができました。内容に関しても、知りたかったFirebaseのFunctionsを実際に動かすことができ、非常に有意義なものになりました。進行はやや早め(後半は特に)ですが、以前の講習でも繰り返し視聴しながら復習したので、全体を知るという意味ではこのスピードでも問題ありませんでした。
Hiroaki
November 14, 2020
ありがとうございました!こういう実装Firebaseで行うにはどうすれば良いのかが詰まっており、大変勉強になりました!型付けのところでundefinedやnullといったところで、私は少しエラーが出ていたので、そこの定義の部分をもう少し説明していただけると嬉しいです。全体的に学ぶことが大変多くためになりました。

Charts

Price

実践編:React NativeとFirebaseで作るiOS/Androidアプリ:お店レビューアプリ開発編 - Price chart

Rating

実践編:React NativeとFirebaseで作るiOS/Androidアプリ:お店レビューアプリ開発編 - Ratings chart

Enrollment distribution

実践編:React NativeとFirebaseで作るiOS/Androidアプリ:お店レビューアプリ開発編 - Distribution chart

Related Topics

3363386
udemy ID
7/25/2020
course created date
8/30/2020
course indexed date
Bot
course submited by