Firebaseデータベースを作成し、axiosで接続する方法をご紹介します。
1.Firebaseとは
Firebaseとは
GoogleにのモバイルおよびWebアプリケーション開発プラットフォームです。
2018年10月現在、Firebaseプラットフォームには18の製品があり、150万のアプリで使用されています。(Wiki)
今回は「Firebase Realtime Database」の作成・接続方法をご紹介します。
Firebase Realtime Databaseとは
クラウドホスト型データベースです。データは JSON として保存され、接続されているすべてのクライアントとリアルタイムで同期されます。
専用ソフト等をインストールする必要なく、googleアカウントとネット環境さえあれば使用できます。
2.axiosとは
axiosとは
axiosは、HTTP通信を簡単に行うことができるJavascriptライブラリです。
3.Firebase(データベース)の作成方法
(1)Firebaseにログイン
①firebaseにアクセスする
firebase.google.com
②「使ってみる」を押下する
③googleアカウントでログインする
Firebaseにログイン完了です
(2)プロジェクトを作成
①「プロジェクトを作成」を押下する
②プロジェクト名を入力する
③「続行」を押下する
④「プロジェクトを作成」を押下する
プロジェクトが作成されます
(3)データベースを作成
①「データベースの作成」を押下する
②「テストモードで開始」を選択する
※テストモードを選択することで、すべてのユーザーにデータへのアクセスを許可します。
③「完了」を押下する
データベースが作成されます。
(4)データを作成
①「Realtime Database」を選択する
②「＋」を選択し、データ名を入力する
③データを追加する
※上記画面では「fruits」データに「apple」「banana」「grape」データを追加しています。
データが追加されます。
4.Firebase(データベース)への接続方法
axiosライブラリを使用し、データベースにアクセスします。
※データベースのルールを変更する
データ取得・更新には以下のルール変更が必要になります。
設定を「".read": true」「".write": true」に変更します。
※axiosライブラリをインストールする
ライブラリは以下のコマンドでインストールできます。
npm install --save axios
(1)データを取得する
全データを取得する
const axios = require('axios'); // ライブラリインポート const url = 'http://プロジェクト名.firebaseio.com/fruits.json'; const result = await axios.get( url );
GET送信はURL直アクセスでも取得できます。
特定データを取得する
const url = 'http://プロジェクト名.firebaseio.com/fruits/キー.json'; //取得したいデータのキーを指定 const result = await axios.get( url );
(2)データを追加・更新する
const url = 'http://プロジェクト名.firebaseio.com/fruits/キー.json'; const result = await axios.put( url, 登録データ );
※指定したキーが存在しない場合は追加、存在する場合は更新になります。
(3)データを削除する
const url = 'http://プロジェクト名.firebaseio.com/fruits/キー.json'; const result = await axios.delete( url );
参考
