เขียนแอพ Android ร่วมกับ Parse.com ในการ Query ข้อมูล

ตัวอย่างการใช้งาน Parse.com ในการ Query ข้อมูลในระบบ Cloud พัฒนาร่วมกับการเขียนแอพพลิเคชัน Android ด้วย Android Studio เพื่อใช้ข้อมูลเป็นระบบหลังบ้าน

ศึกษาบทเรียน การพัฒนาแอพพลิเคชัน Android
ศึกษาการใช้ Cloud Service ของ Parse.com ร่วมกับ Android

บทเรียนนี้คล้ายคลึงกับบทเรียนก่อนหน้านี้ที่มีการส่งข้อมูลแบบ Push และ Data บน Cloud มาช่วยใช้กับแอพพลิเคชัน ให้เข้าระบบผ่านเว็บไซต์ http://www.parse.com

Screen Shot 2558-10-23 at 10.38.41 PM

ให้เราสร้าง App ใหม่ขึ้นมาแล้วเลือก Quick Start > Mobile > Android > Java > New Project แล้วทำตาม Step ตามภาพข้างบนคือดาวน์โหลด Template ของตัว Project ลงมาเปิดโปรแกรม Android Studio เลือก Open Existing Project แล้วเลือก build.gradle ก็จะสร้างโปรเจ็คใหม่ของเราครับ

เปิดไฟล์ values > strings.xml ขึ้นมาครับ ทำการใส่ APP ID และ Client Key ลงไปในส่วนที่แอพพลิเคชันกำหนดไว้

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="parse_app_id">YOUR_APPLICATION_ID</string>
    <string name="parse_client_key">YOUR_CLIENT_KEY</string>

    <string name="app_name">My Applications</string>

    <string name="hello_world">Hello World!</string>
    <string name="action_settings">Settings</string>
</resources>

Flow ตัวอย่างของ แอพพลิเคชันรอบนี้จะเป็นแอพพลิเคชันตรวจสอบ การซื้อ Lottery หรือซื้อหวยครับ โดยการทำงานคือ กรอก ชื่อ นามสกุล, เบอร์โทร, เลขหวย, งวดของเรา ลงไปเก็บข้อมูลผ่านระบบของ Parse.com แล้วเมื่อถึงเวลาหวยออกให้เราเอาข้อมูลของเราไปเปรียบเทียบว่าเราถูกหวยหรือเปล่า

นั่นคือ Flow เบื้องต้นของแอพพลิเคชันครับ ทีนี้เรามาออกแบบหน้าจอกันหน่อย

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:padding="@dimen/activity_vertical_margin"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Lotto Check"
        android:textSize="40sp"
        android:layout_gravity="center"
        android:id="@+id/text_title"
        android:layout_marginBottom="20dp"
        android:textColor="#ffaa00" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:hint="Insert Full Name"
        android:ems="10"
        android:layout_marginBottom="16dp"
        android:id="@+id/add_full_name"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:hint="Insert Telephone"
        android:ems="10"
        android:layout_marginBottom="16dp"
        android:id="@+id/add_telephone"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Insert Lotto Number"
        android:layout_marginBottom="16dp"
        android:id="@+id/add_lotto_number"
        android:inputType="number" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Insert Lotto Date"
        android:ems="10"
        android:layout_marginBottom="16dp"
        android:id="@+id/add_lotto_date"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Insert Data"
        android:id="@+id/add_button_save"
        android:layout_gravity="center_horizontal"
        android:textColor="#ffffff"
        android:background="#a8d100" />

    <RelativeLayout android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center"
        android:padding="@dimen/activity_horizontal_margin"
        android:background="#e9e9e9"
        android:layout_weight="1">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Insert Number for Search"
            android:ems="10"
            android:id="@+id/add_object_id"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Check Winning Lotto"
            android:id="@+id/add_button_query"
            android:layout_below="@+id/add_object_id"
            android:background="#fa7900"
            android:textColor="#ffffff" />
    </RelativeLayout>

</LinearLayout>

หน้าจอของแอพพลิเคชันจะเป็นดังนี้ครับ

Screen Shot 2558-10-23 at 10.44.59 PM

ให้เราเปิดไฟล์ Class ของ MainActivity.java ขึ้นมา เพิ่มการเชื่อม widget ของ Layout ลงไปใน code ดังนี้ใน OnCreate()

final EditText FullName = (EditText) findViewById(R.id.add_full_name);
final EditText Telephone = (EditText) findViewById(R.id.add_telephone);
final EditText LottoNumber = (EditText) findViewById(R.id.add_lotto_number);
final EditText LottoDate = (EditText) findViewById(R.id.add_lotto_date);
Button btnSendAction = (Button) findViewById(R.id.add_button_save);

final EditText objectId = (EditText) findViewById(R.id.add_object_id);
Button btnCheckResult = (Button) findViewById(R.id.add_button_query);

ต่อมาเป็นส่วนของการส่งข้อมูล ให้เราใช้คำสั่งที่เกิดจากกดปุ่ม btnSendAction ถ้ามีการส่งเข้าระบบของ Parse เป็นที่เรียบร้อย ให้เคลียร์ค่าที่เรากรอกแล้วยัดข้อมูลลงระบบ

btnSendAction.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        ParseObject player = new ParseObject("Lotto");
        player.put("fullname", FullName.getText().toString());
        player.put("telephone", Integer.parseInt(Telephone.getText().toString()));
        player.put("lottonumber", LottoNumber.getText().toString());
        player.put("lottodate", LottoDate.getText().toString());

        player.saveInBackground(new SaveCallback() {
          @Override
          public void done(ParseException e) {
            if (e == null) {
              // Save success!
              FullName.setText("");
              Telephone.setText("");
              LottoNumber.setText("");
              LottoDate.setText("");
            } else {
              // some errors!
              Log.e("Parse Error", e.toString());
            }
          }
        });
      }
    });

ทดสอบแอพพลิเคชันของเราว่าทำงานได้หรือเปล่าให้ รันแอพพลิเคชันของเราผ่าน GenyMotion หรือเครื่องมือถือของเรา กรอกข้อมูลแล้วส่งข้อมูล

Screen Shot 2558-10-24 at 1.50.26 PM

กรอกข้อมูล กด Insert Data แล้วไปตรวจสอบค่าในระบบของ Core Data บน Parse.com

Screen Shot 2558-10-23 at 11.16.08 PM

ผลลัพธ์คือเราได้ค่าที่เราต้องการเก็บข้อมูลไปปรากฏบนระบบของ Parse.com แล้ว

ทีนี้เราจะทดสอบโดยการกรอกเลขหวยที่เราซื้อไปแล้วกดปุ่ม “Check Winning Lotto” เพื่อเช็คว่าเลขของถูกหวยหรือเปล่า ให้เขียนฟังก์ชันดังนี้

btnCheckResult.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        ParseQuery<ParseObject> query = ParseQuery.getQuery("Lotto");
        query.whereEqualTo("lottonumber", objectId.getText().toString());
        query.findInBackground(new FindCallback<ParseObject>() {
                 @Override
                 public void done(List<ParseObject> objects, ParseException e) {
                   if (e == null) {
                     for (ParseObject parseObject : objects) {
                       String fullname = parseObject.getString("fullname");
                       int telephone = parseObject.getInt("telephone");
                       String lottonumber = parseObject.getString("lottonumber");
                       String lottodate = parseObject.getString("lottodate");
                       Toast.makeText(getApplicationContext(),
                               "คุณ: " + fullname + " เบอร์โทร: " + telephone + " ซื้อเลข: " + lottonumber + " งวด: " + lottodate + " ถูกรางวัลที่1",
                               Toast.LENGTH_LONG
                       ).show();
                     }

                   } else {
                     // check errors.
                     Log.e("Query Error: ", e.toString());
                   }           
                 }
           }
        );

      }
    });

ให้เรา Query เทียบ Field หรือ Key บน Parse.com ที่ชื่อ “lottonumber” ว่าตรงกับ เลขที่เรากรอกก่อน Query หรือไม่ที่

ParseQuery<ParseObject> query = ParseQuery.getQuery("Lotto");
        query.whereEqualTo("lottonumber", objectId.getText().toString());

เก็บข้อมูลที่ GetCallBack หรือ FindCallBack มาเก็บไว้ใน List ของ android แล้วค่อยเขียน Loop ในการวน Value ด้วย For Loop ของ objects มาเก็บลงตัวแปลแล้วใช้ Toast ในการแจ้งว่าถูกหวยหรือไม่

@Override
                 public void done(List<ParseObject> objects, ParseException e) {
                   if (e == null) {
                     for (ParseObject parseObject : objects) {
                       String fullname = parseObject.getString("fullname");
                       int telephone = parseObject.getInt("telephone");
                       String lottonumber = parseObject.getString("lottonumber");
                       String lottodate = parseObject.getString("lottodate");
                       Toast.makeText(getApplicationContext(),
                               "คุณ: " + fullname + " เบอร์โทร: " + telephone + " ซื้อเลข: " + lottonumber + " งวด: " + lottodate + " ถูกรางวัลที่1",
                               Toast.LENGTH_LONG
                       ).show();
                     }

                   } else {
                     // check errors.
                     Log.e("Query Error: ", e.toString());
                   }

ภาพรวมของ Code หน้า MainActivity.java จะเป็นดังนี้

package com.parse.starter;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

import com.parse.FindCallback;
import com.parse.ParseQuery;
import android.widget.Toast;


import com.parse.ParseAnalytics;
import com.parse.ParseException;
import com.parse.ParseObject;
import com.parse.SaveCallback;

import java.util.List;


public class MainActivity extends ActionBarActivity {

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

    ParseAnalytics.trackAppOpenedInBackground(getIntent());

    final EditText FullName = (EditText) findViewById(R.id.add_full_name);
    final EditText Telephone = (EditText) findViewById(R.id.add_telephone);
    final EditText LottoNumber = (EditText) findViewById(R.id.add_lotto_number);
    final EditText LottoDate = (EditText) findViewById(R.id.add_lotto_date);
    Button btnSendAction = (Button) findViewById(R.id.add_button_save);
    btnSendAction.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        ParseObject player = new ParseObject("Lotto");
        player.put("fullname", FullName.getText().toString());
        player.put("telephone", Integer.parseInt(Telephone.getText().toString()));
        player.put("lottonumber", LottoNumber.getText().toString());
        player.put("lottodate", LottoDate.getText().toString());

        player.saveInBackground(new SaveCallback() {
          @Override
          public void done(ParseException e) {
            if (e == null) {
              // Save success!
              FullName.setText("");
              Telephone.setText("");
              LottoNumber.setText("");
              LottoDate.setText("");
            } else {
              // some errors!
              Log.e("Parse Error", e.toString());
            }
          }
        });
      }
    });

    final EditText objectId = (EditText) findViewById(R.id.add_object_id);
    Button btnCheckResult = (Button) findViewById(R.id.add_button_query);
    btnCheckResult.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        ParseQuery<ParseObject> query = ParseQuery.getQuery("Lotto");
        query.whereEqualTo("lottonumber", objectId.getText().toString());
        query.findInBackground(new FindCallback<ParseObject>() {
                 @Override
                 public void done(List<ParseObject> objects, ParseException e) {
                   if (e == null) {
                     for (ParseObject parseObject : objects) {
                       String fullname = parseObject.getString("fullname");
                       int telephone = parseObject.getInt("telephone");
                       String lottonumber = parseObject.getString("lottonumber");
                       String lottodate = parseObject.getString("lottodate");
                       Toast.makeText(getApplicationContext(),
                               "คุณ: " + fullname + " เบอร์โทร: " + telephone + " ซื้อเลข: " + lottonumber + " งวด: " + lottodate + " ถูกรางวัลที่1",
                               Toast.LENGTH_LONG
                       ).show();
                     }

                   } else {
                     // check errors.
                     Log.e("Query Error: ", e.toString());
                   }
                 }
           }
        );

      }
    });


  }



  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
  }

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
      return true;
    }

    return super.onOptionsItemSelected(item);
  }
}

ทดสอบแอพพลิเคชันของเราครับ

Screen Shot 2558-10-24 at 1.52.21 PM

เรียบร้อยไม่อยากเลย ขอบอกลองทำกันดูนะครับ