www . i t s c i .m j u . ac . t h / sayan

การใช&งาน AsyncTask SAYAN UNANKARD

9

WEB SERVICES

Web service คือ กลุ0มของฟ5งก6ชันที่ให?บริการผ0านทาง เว็บเซิร6ฟเวอร6 แต0ไม0ใช0ในรูปแบบของ web page หรือ html

• ใช? http protocol ในการเชื่อมต0อและโอนย?ายข?อมูล

• Clients ร?องขอไปยัง url ที่กำหนดไว? จากนั้น web server จะคืนค0าข?อมูลผ0านมาในรูปแบบ

ของ xml หรือ json

• REST : Representational State Transfer เปiนรูปแบบทั่วไปของ web services

2

DATA FORMAT

JSON : JavaScript Object Notation

• ข?อมูลเก็บในรูปแบบของ Javascript objects ในรูปของ Map<key, value>

• สามารถเก็บข?อมูล object ซ?อนใน object ได?

• เปiนที่นิยมในป5จจุบัน

XML : eXtensible Markup Language

• เก็บข?อมูลในรูปของ nested Tree

• ได?รับความนิยมเมื่อ 5 – 10 ป}ที่แล?ว

3

JSON FORMAT

การอ0านค0า JSON FORMAT

• ใน JSON จะประกอบด?วย JSONArray ซึ่งเก็บ JSONObject ได?หลาย ๆ Object โดยแต0ละ

object จะมีเครื่องหมายป}กกา { } กำหนดไว? แต0ละ object จะค่ันด?วยเครื่องหมาย

comma

4

JSONArray

JSONObject

การกำหนดคHาสำหรับอHานไฟลP JSON ผHาน URL

นักพัฒนาโปรแกรมจะต?องกำหนดสิทธ์ิการเข?าใช?งานผ0าน Internet เสมอ

จำเปiนต?องใช?คลาสที่ชื่อว0า AsyncTask ช0วยในการทำงาน โดยที่ AsyncTask เปiน abstract class

ที่ทาง Android นั้นจัดเตรียมมาให?เราเพื่อทำการประมวลผล หรือทำงานเปiน background โดยไม0

ต?องไปยุ0งกับตัว UI หลัก

เช0น กรณีต?องการอ0านค0าข?อมูลจากเว็บไซต6เว็บหนึ่ง เพื่อมาแสดงบนแอพพลิเคชันจะใช? AsyncTaskช0วยในการคำนวณ ประมวลผล โดยเมื่อ AsyncTask ทำงานอยู0 มันจะไม0กระทบกับหน?าจอ UI ของ

เรา

5

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

AsyncTask

6

AsyncTask

เมธอดที่จำเปiนในการทำงาน

protected String doInBackground(String... params) { return "result"; }

• เปiนเมธอดที่ คอยทำงานเปiน Background ให?เรา เช0น เชื่อมต0อ HTTP ไปยังเว็บไซต6 โดยรับ

ที่อยู0 URI เว็บจากค0า String ตัวแรก

protected void onProgressUpdate(Integer... values) { }

• เมธอดนี้จะเอาไว?แสดงค0า ProgressBar ว0าทำงานไปเท0าไหร0แล?ว โดยมากก็จะเปiนการนับ 0 ถึง 100 โดยค0า 0 - 100 มันก็ได?มาจาก Integer ซึ่งเปiน parameter ตัวที่สอง

protected void onPostExecute(String result) { }

• เมธอดนี้จะถูกเรียกเมื่อการทำงานที่ Background นั้นจบลงแล?ว โดยรับ parameter เปiน

String ที่ได?ผลลัพธ6มาจากเมธอด doInBackground ส0วนมากเมธอดนี้จะเอาไว?อัพเดท set

ค0าต0างๆ ครับ เช0น setText ให?กับ EditText เปiนต?น

7

ตัวอยHางหน&าจอ

8

กำหนด CallBackService INTERFACE

สร?าง Interface Class สำหรับการเข?าใช?งาน Service โดยใน MainActivity จะต?อง implement Interface นี้ในการใช?งานเพื่อเรียกใช? AsyncTask อีกครั้ง

9

public interface CallBackService {void onPreCallService();void onCallService();void onRequestCompleteListener(ArrayList<NewsModel> newsModelArrayList);void onRequestFailed(String result);

}

public class MainActivity extends AppCompatActivity implements CallBackService {@Overridepublic void onPreCallService() { }

@Overridepublic void onCallService() { }

@Overridepublic void onRequestCompleteListener(ArrayList<NewsModel> newsModelArrayList) { }

@Overridepublic void onRequestFailed(String result) { }

}

Implement interface

การเรียกใช&ใน AsyncTask

10

protected String doInBackground(String... params) {try {

Log.i(TAG,"Call Service");if(callBackService!=null){

callBackService.onCallService();}return downloadContent(params[0]);

} catch (IOException e) {return "Unable to retrieve data. URL may be invalid";

}}

String url_json = "http://www.mocky.io/v2/566a659b1000004109990b2d";

new JSONCallServiceAsyncTask(this).execute(url_json);

เรียกใช? Method โดย

ส0งค0า url ไป

public JSONCallServiceAsyncTask(Context context) {callBackService = (CallBackService) context;

}

การเรียกใช&ใน AsyncTask

เมธอด onPreExecute() สำหรับกำหนดค0าเริ่มต?นก0อนการประมวลผล

เมธอด onPostExecute() สำหรับเมื่อประมวลผลเสร็จส้ินแล?ว

11

@Overrideprotected void onPreExecute() {

super.onPreExecute();if (callBackService != null) {

callBackService.onPreCallService();}

}

@Overrideprotected void onPostExecute(String s) {

super.onPostExecute(s);if (callBackService != null) {

ArrayList<NewsModel> newsList = onParserContentToModel(s);callBackService.onRequestCompleteListener(newsList);

}

}

การอHานคHา JSON จาก URL ท่ีกำหนด

12

private String downloadContent(String myUrl) throws IOException {InputStream is = null;try {

URL url = new URL(myUrl);Log.e("url", myUrl);HttpURLConnection conn = (HttpURLConnection) url.openConnection();conn.setReadTimeout(10000);conn.setConnectTimeout(15000);conn.setRequestMethod("GET");conn.setDoInput(true);conn.connect();int response = conn.getResponseCode();Log.d(TAG, "The response is : " + response);Log.e("response", "" + response);is = conn.getInputStream();Log.e("is", is.toString());String result = convertInputStreamToString(is);return result;

}catch(Exception e) {Log.e("error exp", e.getMessage());return "error";

}finally {if (is != null) {

is.close();}

}}

กำหนดค0าให?ไป

อ0านข?อมูลจาก url

ที่ระบุเชื่อมต0อ internet

อ0านค0าทั้งหมดมาเก็บที่ตัวแปร

InputStream

แปลงค0า InputStream

ให?เปiน String

การแปลงคHาจาก INPUTSTREAM เปnน STRING

13

private String convertInputStreamToString(InputStream is) throws IOException {BufferedReader br = new BufferedReader(new InputStreamReader(is));StringBuilder sb = new StringBuilder();String line;while((line = br.readLine())!=null){

sb.append(line + "\n");}br.close();return sb.toString();

}

อ0านค0ามาทีละบรรทัด

เชื่อมต0อข?อความและ

ตัดบรรทัดด?วย \n

การอHานคHา JSON STRING เก็บลงใน JAVA CLASS

14

public ArrayList<NewsModel> onParserContentToModel(String dataJSon) {Log.e("data json", dataJSon);ArrayList<NewsModel> newsList = new ArrayList<NewsModel>();try {

JSONObject jsonObject = new JSONObject(dataJSon);JSONArray jsonArray = jsonObject.optJSONArray("item");if (jsonArray != null) {

for (int i = 0; i<jsonArray.length(); i++) {NewsModel newsModel = new NewsModel();JSONObject json = jsonArray.optJSONObject(i);

newsModel.setTitle(json.getString("title"));newsModel.setDescription(json.getString("description"));newsModel.setLink(json.getString("link"));newsModel.setPubDate(json.getString("pubDate"));newsModel.setImage_url(json.getString("image_url"));

newsList.add(newsModel);}

}

} catch (JSONException e) {e.printStackTrace();

}return newsList;

}

สร?าง JsonObject จาก

JsonString

ระบุชื่อ JsonArrayLoop อ0านค0า

JsonArray

อ0านค0า JsonArray

ทีละ object

NEWS_CONTENT.XML

กำหนด layout ของแต0ละหัวข?อข0าว news_content.xml

15

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"android:padding="10dp"android:baselineAligned="false">

<LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1.5"android:baselineAligned="false">

<ImageViewandroid:id="@+id/imgCover"android:layout_width="match_parent"android:layout_height="wrap_content"android:adjustViewBounds="true"android:contentDescription="news image" />

</LinearLayout>

NEWS_CONTENT.XML (ตHอ)

กำหนด layout ของแต0ละหัวข?อข0าว news_content.xml

16

<LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="2.5"android:orientation="vertical"android:paddingLeft="10dp"android:paddingRight="10dp">

<TextViewandroid:id="@+id/txtTitle"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="16sp"/>

<TextViewandroid:id="@+id/txtDate"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="20dp"android:textSize="12sp"/>

</LinearLayout>

</LinearLayout>

MainActivity

ในเมธอด onCreate() จะทำหน?าที่ในการเรียกใช? JSonCallServiceAsyncTask โดยส0ง url ที่ต?องการอ0านข?อมูลมาแสดงผล และนำผลที่ได?มาแสดงใน ListView

17

public class MainActivity extends AppCompatActivity implements CallBackService {

private ListView listViewNews;private String url_json = "http://www.mocky.io/v2/566a659b1000004109990b2d";ArrayList<NewsModel> newsModelArrayList = null;private NewsAdapter adapter;

@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);

listViewNews = (ListView) findViewById(R.id.tViewNews);new JSONCallServiceAsyncTask(this).execute(url_json);newsModelArrayList = new ArrayList<>();listViewNews.setAdapter(adapter = new NewsAdapter());

}

MainActivity (ตHอ)

ในเมธอด onPreCallService() ใช?สำหรับเตรียม ProgressDialog เพื่อแสดงสถานะการโหลดข?อมูลจากเซิร6ฟเวอร6

18

ProgressDialog alertDialog = null;

public void showProgressDialog(){alertDialog = new ProgressDialog(this);alertDialog.setMessage("Loading...");alertDialog.setCancelable(false);alertDialog.show();

}

public void dismissProgressDialog() {if (alertDialog != null) {

alertDialog.dismiss();}

}

@Overridepublic void onPreCallService() {

this.showProgressDialog();}

MainActivity (ตHอ)

ในเมธอด onRequestCompleteListener() ใช?สำหรับรับค0า List ของข?อมูลเมื่อโปรแกรมโหลดข?อมูลมาจากเซิร6ฟเวอร6เสร็จแล?ว

ในเมธอด onRequestFailed() ใช?สำหรับป�ด ProgressDialog กรณีที่โหลดข?อมูลผิดพลาด

19

@Overridepublic void onRequestCompleteListener(ArrayList<NewsModel> newsModelArrayList) {

if (newsModelArrayList != null && newsModelArrayList.size() > 0) {Log.i("Check data", "" + newsModelArrayList.size());this.newsModelArrayList = newsModelArrayList;adapter.notifyDataSetChanged();

}this.dismissProgressDialog();

}

@Overridepublic void onRequestFailed(String result) {

this.dismissProgressDialog();}

MainActivity (ตHอ)

สร?าง inner class ชื่อว0า NewsAdapter สำหรับแสดงผลใน news_content layout จากข?อมูลที่อ0านมาได?

20

/* Class NewAdapter for showing in ListView*/class NewsAdapter extends BaseAdapter {

public void setDataNotifyData(){notifyDataSetChanged();

}

@Overridepublic int getCount() {

return newsModelArrayList.size();}

@Overridepublic Object getItem(int position) {

return newsModelArrayList.get(position);}

@Overridepublic long getItemId(int position) {

return 0;}

MainActivity (ตHอ)

สร?าง inner class ชื่อว0า NewsAdapter สำหรับแสดงผลใน news_content layout จากข?อมูลที่อ0านมาได?

21

@Overridepublic View getView(int position, View convertView, ViewGroup parent) {

View currentView = getLayoutInflater().inflate(R.layout.news_content,parent, false);

TextView txtTitle = (TextView) currentView.findViewById(R.id.txtTitle);TextView txtDate = (TextView) currentView.findViewById(R.id.txtDate);ImageView imgView = (ImageView) currentView.findViewById(R.id.imgCover);

NewsModel newsModels = (NewsModel) getItem(position);

txtTitle.setText(Html.fromHtml(newsModels.getTitle()));txtDate.setText(newsModels.getPubDate());Picasso.with(MainActivity.this).load(newsModels.getImage_url()).into(imgView);

return currentView;}

}

ตัวอยHางหน&าจอ

ให? นศ. เขียนโปรแกรมสร?างหน?าจอที่ 2 เมื่อคลิกไปที่ ListView ในหน?าแรกจะแสดงรายละเอียดทั้งหมดของข0าวนั้น ๆ ออกมาทั้งหมด

22

การสร&าง JSON ด&วย JAVA SERVLET

23

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

Map<String,List<Student>> map = new HashMap<String,List<Student>>();

List<Student> list = new ArrayList<Student>();

list.add(new Student("001","Sayan","sayan@mju.ac.th"));list.add(new Student("002","Somchai","sayan@mju.ac.th"));list.add(new Student("003","Manee","sayan@mju.ac.th"));

map.put("student", list);String json = new Gson().toJson(map);

response.setContentType("application/json");response.setCharacterEncoding("UTF-8");response.getWriter().write(json);

}

ใช& GSON –

Java JSON Library