Azure Mobile Apps を利用して Androidアプリ開発 その2

その１でAzure Mobile Apps のインスタンスを作り、使用するための下準備をしました。

今回は、実際にフロントサイドで掲示板風アプリを作ります。
エラー処理などもかなーり適当なので、通信方法の参考程度にどうぞ。

MySQLのテーブルを作成

その前にデータベースのテーブルを作成しましょう。
Azureポータルから
リソースグループ -> 作ったMobile App -> Setting -> Mobile
の中の Easy tables -> Add

テーブル名を覚えておきましょう
アプリ側でテーブル名に対応したクラスを後で作成します。

また、テキストを保存するためスキーマを追加します。

プロジェクト作成

Android Priject を作成しましょう。
Empty Activity で作ってます

アプリ開発

準備

ライブラリ入れる

その1でダウンロードした、Mobile Apps 向け Android クライアント SDK を使用して実装していきます。libsに入れましょう。

gradleに記述

先ほど入れたライブラリの他にも、必要なライブラリがあります。
まとめて記述しましょう。

dependencies {
    compile files('libs/azure-mobile-android-3.1.0.jar')
    compile 'com.google.guava:guava:18.0'
    compile 'com.google.code.gson:gson:2.4'
    compile 'com.squareup.okhttp:okhttp:2.5.0'
}

書いたらSyncしときましょう

インターネットアクセス許可

インターネットアクセス許可が必要です。

AndroidManifest.xml

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

コードを書いていく

クライアントデータクラスを定義

先ほど作成したテーブルに対応するようにエンティティクラスを作成します。

ゲッター、セッターも準備しておきましょう。

BBSItem.java

public class BBSItem {
    private String id;
    private String text;

    public String getId() {
        return id;
    }

    public void setId(String s) {
        id = s;
    }

    public String getText() {
        return text;
    }

    public void setText(String s) {
        text = s;
    }
}

テーブル参照を作成

リモートのテーブルを参照するための準備です。

MainActivity.java

public class MainActivity extends AppCompatActivity {

    MobileServiceClient mClient;
    MobileServiceTable<BBSItem> mBBSTable;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        try {
            mClient=new MobileServiceClient("ここにURL",this);
        } catch (MalformedURLException e) {
            e.printStackTrace();
        }
        mBBSTable=mClient.getTable(BBSItem.class);
    }
}

ポイントは

mClient=new MobileServiceClient("ここにURL",this);

の部分ですね。
AzureポータルのMobileApp画面の要点のなかのURLをここに入れます。
http://アプリ名.azurewebsites.net
です。

レイアウトを作成

今回はListViewを使います。

row_list_bbs

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bbs"
        android:id="@+id/textBBS"/>

</LinearLayout>

activity_main.xml　にも記述しましょう

activity_main.xml

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="6">

        <ListView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/list_view_BBS"
            tools:listitem="@layout/row_list_bbs"></ListView>
    </FrameLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:orientation="horizontal">

            <EditText
                android:id="@+id/editText"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="3" />

            <Button
                android:id="@+id/button2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="add" />

            <Button
                android:id="@+id/button"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="refresh"
                android:textSize="12dp" />
        </LinearLayout>
    </FrameLayout>

カスタムAdapter

続いてListViewのAdapter

BBSItemAdapter.java

public class BBSItemAdapter extends ArrayAdapter<BBSItem> {
    private Context mContext;
    private int mLayoutResourceID;

    public BBSItemAdapter(Context context, int resource) {
        super(context, resource);
        mContext = context;
        mLayoutResourceID = resource;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View row =convertView;
        final BBSItem currentItem=getItem(position);

        if (row==null){
            LayoutInflater inflater =((Activity)mContext).getLayoutInflater();
            row=inflater.inflate(R.layout.row_list_bbs,parent,false);
        }
        row.setTag(currentItem);
        final TextView textView=(TextView)row.findViewById(R.id.textBBS);
        textView.setText(currentItem.getText());
        return row;
    }
}

通信を書いていく

仕上げに、MainActivity.javaに、通信処理をAsyncTaskを使って書き上げましょう。

MainActivity.java

public class MainActivity extends AppCompatActivity {

    MobileServiceClient mClient;
    MobileServiceTable<BBSItem> mBBSTable;

    EditText mEditText;
    BBSItemAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mEditText = (EditText) findViewById(R.id.editText);

        try {
            mClient = new MobileServiceClient("ここにURL", this);
        } catch (MalformedURLException e) {
            e.printStackTrace();
        }
        mBBSTable = mClient.getTable(BBSItem.class);

        mAdapter = new BBSItemAdapter(this, R.layout.row_list_bbs);
        ListView listViewBBS = (ListView) findViewById(R.id.list_view_BBS);
        listViewBBS.setAdapter(mAdapter);
        showAll();
    }

    public void refreshBtn(View v) {
        showAll();
    }

    public void addBtn(View v) {

        AsyncTask<Void, Void, Void> task = new AsyncTask<Void, Void, Void>() {
            String text = mEditText.getText().toString();

            @Override
            protected Void doInBackground(Void... params) {
                BBSItem item = new BBSItem();
                item.setText(text);
                try {
                    BBSItem entity = mBBSTable.insert(item).get();
                } catch (InterruptedException e) {
                    e.printStackTrace();
                } catch (ExecutionException e) {
                    e.printStackTrace();
                }

                return null;
            }
        };
        runAsyncTask(task);
    }

    private void showAll() {
        AsyncTask<Void, Void, Void> task = new AsyncTask<Void, Void, Void>() {
            @Override
            protected Void doInBackground(Void... params) {
                try {
                    final List<BBSItem> results = mBBSTable.execute().get();
                    runOnUiThread(new Runnable() {

                        @Override
                        public void run() {
                            mAdapter.clear();
                            for (BBSItem item : results) {
                                mAdapter.add(item);
                            }
                        }
                    });
                } catch (Exception exception) {
                    e.printStackTrace();

                }
                return null;
            }
        };
        runAsyncTask(task);

    }

    private AsyncTask<Void, Void, Void> runAsyncTask(AsyncTask<Void, Void, Void> task) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
            return task.executeOnExecutor(AsyncTask.THREAD_POOL_EXECUTOR);
        } else {
            return task.execute();
        }
    }
}

完成

実際に動かしてみましょう。まだテーブルに何もないはずなので、AddしRefreshしてみると、更新されていることがわかります。
今回は通信をやってみるという趣旨で書いたので、ちゃんと運用するときはエラー処理周りをもっと書いたほうが良いです。実際久しぶりに起動するときはサーバーの応答が遅くてタイムアウト？で拾ってこれません、、、汗

以上です。