Help us understand the problem. What is going on with this article?

『React』 +『Redux』 + 『Firebase』でLINE風のChat機能を作ろう! 【準備編】

はじめに

前回の記事では『電卓』の実装をしました。
その後以下の面白い記事と動画を見つけたので、早速参考にしてLINE風のChat機能の一部分を実装してみました!

一気に全部書くとすごく長くなりそうなので【準備編】【Component編】【状態管理編】の3部構成にして記事を書きたいと思います。今回は【準備編】です!

前回の記事
『React』+『Redux』でiPhoneに入ってるような電卓を作ってみよう!

次回の記事
『React』 +『Redux』 + 『Firebase』でLINE風のChat機能を作ろう! 【Component編】

完成品

ezgif.com-optimize (7).gif

準備編

恒例のcreate-react-app

terminalで以下のコマンドを入力しましょう!

$ create-react-app chat
$ cd chat
$ yarn start

はい!これでReactを用いてアプリケーションを作る準備ができました!

スクリーンショット 2019-05-15 10.01.44.png

create-react-appがわからない人はこちらの記事へ

必要なパッケージのインストール

今回必要なパッケージは

  • redux
  • react-redux
  • @material-ui/core
  • @material-ui/icons
  • firebase

です。

Material-UIはマテリアルデザインをReactアプリケーションに導入することができるUIコンポーネントです。Material-UIを使うことで、手軽にGoogleのマテリアルデザインを踏襲したアプリケーションを作ることができます。
スクリーンショット 2019-05-29 23.35.33.png

早速インストールしましょう!

yarn add redux react-redux @material-ui/core @material-ui/icons firebase

Firebase

スクリーンショット 2019-05-29 23.35.58.png

Firebaseとは、すばやく高品質のモバイルアプリを開発することができるプラットフォームで、開発に役立つ数多くの機能が用意されています。今回は『Hosting』『Realtime Database』を使用しました!

気になる使い方

https://firebase.google.com/?hl=jaにアクセスしGoogleのアカウントでログインしコンソール画面に移動します。スクリーンショット 2019-05-29 23.46.59.png

プロジェクトの追加を押して、自分の好きなプロジェクト名を入力しましょう!スクリーンショット 2019-05-29 23.49.09.png

これでプロジェクトが完成しました!スクリーンショット 2019-05-29 23.50.26.png

ウェブアプリを追加するために、アプリに好きなニックネームを入力します。
スクリーンショット 2019-05-29 23.52.38.png

これでSDKが入手できます。

Firebase Realtime Databaseとの紐付け

firebase/config.jsを作成し、Firebaseとの接続情報を記載します。

src/firebase/config.js
export const firebaseConfig = {
  apiKey: "****************",
  authDomain: "****************",
  databaseURL: "****************",
  projectId: "****************",
  appId: "****************",
  storageBucket: "****************",
  messagingSenderId: "****************"
};

firebase/index.jsでデータベース参照用のインスタンスを作成します。
このファイルをインポートすることで、どこからでもデータベースにアクセスすることができます。

src/firebase/index.js
import firebase from 'firebase';
import {firebaseConfig} from './config.js';

export const firebaseApp = firebase.initializeApp(firebaseConfig);
export const firebaseDb = firebaseApp.database();

これにて準備完了です!

次回は

『Material-ui』を使ってComponentを作成し、アプリケーションの見た目を整えていきます!

リファレンス

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away