ตัวอย่างการใช้งาน Parse.com ในการ Query ข้อมูลในระบบ Cloud พัฒนาร่วมกับการเขียนแอพพลิเคชัน Android ด้วย Android Studio เพื่อใช้ข้อมูลเป็นระบบหลังบ้าน
บทเรียนนี้คล้ายคลึงกับบทเรียนก่อนหน้านี้ที่มีการส่งข้อมูลแบบ Push และ Data บน Cloud มาช่วยใช้กับแอพพลิเคชัน ให้เข้าระบบผ่านเว็บไซต์ http://www.parse.com
ให้เราสร้าง 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>
หน้าจอของแอพพลิเคชันจะเป็นดังนี้ครับ
ให้เราเปิดไฟล์ 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 หรือเครื่องมือถือของเรา กรอกข้อมูลแล้วส่งข้อมูล
กรอกข้อมูล กด Insert Data แล้วไปตรวจสอบค่าในระบบของ Core Data บน Parse.com
ผลลัพธ์คือเราได้ค่าที่เราต้องการเก็บข้อมูลไปปรากฏบนระบบของ 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);
}
}
ทดสอบแอพพลิเคชันของเราครับ
เรียบร้อยไม่อยากเลย ขอบอกลองทำกันดูนะครับ
