FirebaseでAndroidアプリを作ってみる

はじめに

Googleが買収したFirebaseを使うと非常に簡単にデータベースや通知などサーバ側の実装ができるとのことで、QuickStartを参考にお天気報告アプリ的なものを作成し、最低限の動作を試してみました。

準備

1. https://www.firebase.com/ にサインアップします。

2. DashboardのCREATE NEW APPからAPP NAMEとAPP URLを指定し、新規にアプリケーションを作成します。APP NAMEとURLは任意の名称でOKですが、URLは一意である必要があります。
   

実装

1. Android Studioで新規プロジェクトを作成します。テンプレートはBlank Activityを選択します。

2. activity_main.xmlにLarge Textとボタンを配置します。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.kmiki.cloudapp.MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="123dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sunny"
        android:id="@+id/buttonS"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/textView"
        android:layout_toStartOf="@+id/textView" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Foggy"
        android:id="@+id/buttonF"
        android:layout_alignTop="@+id/buttonS"
        android:layout_toRightOf="@+id/textView"
        android:layout_toEndOf="@+id/textView" />
</RelativeLayout>

1. build.gradleに以下を追記します。

build.gradle

dependencies {
    compile 'com.firebase:firebase-client-android:2.5.0+'
}

1. AndroidManifest.xmlに以下の行を追加します。

AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />

1. MainActivity.javaを編集します。

MainActivity.java

    private Firebase mRef; //FirebaseライブラリをAndroidコンテキストで初期化します。

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Firebase.setAndroidContext(this); //
    }

   @Override
    protected void onStart(){
        super.onStart();
        Button mButtonFoggy = (Button) findViewById(R.id.buttonF);
        Button mButtonSunny = (Button) findViewById(R.id.buttonS);
        final TextView mTextCondition = (TextView) findViewById(R.id.textView);

        mRef = new Firebase("https://<Dashboardで設定したURL>.firebaseio.com/"); //mRefにあらかじめ設定したアプリのURLを入力します。

        //リスナー追加
        mRef.addValueEventListener(new ValueEventListener() {
            @Override
            //ボタンのsetValueで値が変わったらTextViewに表示
            public void onDataChange(DataSnapshot dataSnapshot) {
                String newCondition = (String) dataSnapshot.getValue();
                mTextCondition.setText(newCondition);
            }

            @Override
            public void onCancelled(FirebaseError firebaseError) {

            }
        });

        mButtonSunny.setOnClickListener(new View.OnClickListener(){
            public void onClick(View v){
                mRef.setValue("Sunny");
            }
        });
        mButtonFoggy.setOnClickListener(new View.OnClickListener(){
            public void onClick(View v){
                mRef.setValue("Foggy");
            }
        });
    }

1. 実際に起動してFoggy、Sunnyを設定するとFirebaseのダッシュボード上データもリアルタイムで反映されているのが確認できます。