มาลองทำแอปบล็อกของตัวเองกันดีกว่า ตอนที่ 2 : มาทำ push to refresh กันเถอะ

หน้าแอปเราในตอนนี้ มีทั้งหน้าแรกที่แสดงบล็อกทั้งหมดที่เขียน และหน้าสองที่เป็นหน้าเนื้อหา
ด้วยความที่อาจจะมีบทความใหม่ระหว่างที่ดูแอปบล็อกของเราอยู่ ผู้ใช้แอปใช้ความเคยชิน ที่ใช้นิ้วสไลด์ด้านบนลงมาเพื่อ refresh ดังนั้น เราจึงต้องมีส่วนนี้ขึ้นมา ส่วนนี้คืออะไร มันคือ SwipeRefreshLayout ซึ่งมันจะทำงานครอบตัวที่ scroll ได้ ในที่นี้ คือ listview ของเรานั่นเอง

แหล่งข้อมูล :
- เอามาจากคอร์สพี่เนยคะ
- Implementing Pull to Refresh Guide

ก่อนอื่น เปิดหน้าที่มี listview ก่อนเลย ในที่นี้คือ fragment_main.xml นั่นเอง

จากนั้นเราเรียก SwipeRefreshLayout ครอบ listview ของเรา ซึ่งเราจะใส่ครอบตัวที่เลื่อนได้ โดยมันอยู่ใน android support library version4 แปะไปดังรูป อย่าลืมใส่ ID ให้มันด้วยนะ

ต่อมา เป็นส่วน implement code แล้วหล่ะ เข้าไปเปิด MainFragment.java
ประกาศตัวแปรขึ้นมา พร้อม findViewById ให้เรียบร้อย

เรียก method setOnRefreshListener เพื่อ implement ตัว swipeRefreshLayout (ตามกรอบสีแดง) ให้ทำงานตามเราต้องการ นั้นคือ เมื่อเราเอานิ้วเลื่อนจอลง มันจะ refresh data ถ้ามีอันใหม่ มันจะอยู่บนสุด จึงเอา function ที่เรียก service มาแยกเป็น function ใหม่ นามว่า reloadData (ตามกรอบสีนํ้าเงิน)

ดังนั้น เราจึงต้อง handle เพื่อในส่วนที่เราเรียก service ขึ้นมาทำงานด้วย เพราะที่เรา implement ไป มันจะโหลดหมุนๆไปเรื่อยๆ ไม่จบ จึงต้องใส่ swipeRefreshLayout.setRefreshing(false); เพื่อหยุดหมุดเมื่อโหลดเสร็จ ทั้งกรณีที่โหลดได้ และโหลดไม่ได้

จากรูปก่อนที่มีกรอบส้มๆ เนื่องจากการทำงานของ swipeRefreshLayout กับ listview จะมี bug นึงเกิดขึ้น คือ เราไม่สามารถเลื่อน listview ขึ้นลงได้อย่างเดิม จึงต้องเพิ่มคำสั่ง ว่า ให้ทำงานเมื่อ listview แรกอยู่บนสุดเท่านั้น

เรามาลองรันดูดีกว่าว่า จะโอเคไหม โดยทดสอบกับการ publish บล็อก blogger json api ดู ว่าตอนใหม่มา มันจะโผล่ขึ้นด้านบนหรือไม่ ถ้าโผล่มาแสดงว่าทำถูกต้องแล้วจ้า

นั่นไง การเรียกใช้งานง่ายนิดเดียว แต่ทว่า เวลาเราใช้งาน มันจะโหลดใหม่ทั้งหมด เราอาจจะ implement เพิ่มให้ไม่โหลดใหม่ทั้งหมดได้ ในฟังก์ชั่น onRefresh()

เนื้อหาทั้งหมด
ตอนที่ 1 : blogger json api
ตอนที่ 3 : การดึง content มาแสดงใน custom chrome tab
ตอนที่ 4 : ทำ push notification เมื่อบล็อกเรามีการอัพเดตบทความใหม่
ตอนที่ 5 : การ publish application ของเรา ลง play store

มาลองทำแอปบล็อกของตัวเองกันดีกว่า ตอนที่ 1 : blogger json api

เนื่องจากเรายังไม่มีแอปเป็นของตัวเองให้ได้โหลดกันซะที จึงได้ลองทำแอปบล็อกของตัวเองขึ้นมา ซึ่งได้ใช้ json api เพื่อดึงหัวเรื่องบล็อกขึ้นมาแสดงที่หน้าแอป ด้วย custom listview ดึงหน้า cover หัวข้อ วันที่เขียน จากนั้นพอกดไป จะเป็นหน้าเว็บเนอะ จะไม่ใช้ webview จะเป็น custom chrome tab ซึ่งเร็วกว่า ดูดีกว่า ใช้โครง fragment มี push notification สำหรับแจ้งเตือนบทความใหม่ ดังนั้นเรามาเริ่มกันเลยดีกว่า กับการทำแอปเว็บบล็อกของตัวเอง

แหล่งอ้างอิงข้อมูล
https://developers.google.com/blogger/docs/2.0/json/getting_started
https://developers.google.com/blogger/docs/2.0/json/using
https://support.google.com/cloud/answer/6158849?hl=en#android
https://developers.google.com/api-client-library/java/
https://developers.google.com/gdata/samples/blogger_sample

ขั้นตอนที่ 1 : มีบล็อกของตัวเองใน blogspot และ มี google account
เบื้องต้นเลยเนอะ สร้างบล็อกของตัวเองใน blogspot ซึ่งต้องมี google account ก่อน

ขั้นตอนที่ 2 : สร้างโปรเจกแอปของเราใน android studio
ก่อนอื่นต้องคิดโครงสร้างแอปว่าหน้าตาเป็นอย่างไร หน้าตาประมาณไหน ให้เขียนโค้ดในส่วน UI และส่วนการทำงาน ทั้งตัว activity และ fragment ไว้คร่าวๆก่อน

ขั้นตอนทื่ 3 : เข้าไปที่ https://console.developers.google.com/apis/library เพื่อเชื่อมต่อ blogger api เข้าไปที่แอปของเรา เราต้องสร้างโปรเจกใหม่ก่อน จากนั้นคลิกที่ blogger api

จากนั้นกรอกข้อมูลตามขั้นตอนให้เรียบร้อย

การนำค่า SHA-1 fingerprint มากรอก ทำได้ไม่ยากเลย ทางหน้า terminal ของ android studio หรือ command line ไปที่ directory ของโปรเจก ดังนี้
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -list -v
จากนั้นกรอก password ว่า android แล้วเขาจะ generate certificate ออกมาดังนี้

ต่อมา เรานำค่า SHA1 มากรอก แล้วใส่ส่วนอื่นๆให้เรียบร้อย

ขั้นตอนที่ 4 : เข้าไปที่หน้า Credentials กดปุ่มสีฟ้า Create Credentials เลือก API Key จากนั้นเลือก Android Key เพราะเราทำ android application นี่เนอะ จากนั้นกดปุ่ม Create แล้วเราจะได้ API key ออกมา

ขั้นตอนที่ 5 : เรามาลองเล่น API ก่อนดีกว่า ตามนี้เลย
https://www.googleapis.com/blogger/v3/blogs/<blog_id>?key=<api_key>
ซึ่ง blog ID มาจาก URL ที่เราเขียนบล็อกนี่แหละ แบบนี้
https://www.blogger.com/blogger.g?blogID=<blog_id>#allposts
ถ้าทำถูก จะออกมาเป็น json ที่สวยงาม

ขั้นตอนที่ 6 : เราจะได้ API ของ blogger แล้ว
ไปที่ https://developers.google.com/blogger/docs/3.0/reference/posts/list#try-it เปิด Authorize requests using OAuth 2.0 ก่อนนะจ๊ะ ซึ่งเราสามารถกดเปิดได้ทันทีเลย จากนั้นใส่ blog ID ลงไป ถ้าต้องการให้มีรูปภาพหน้าปกแสดงขึ้นมา เลือก fetchImages เป็น true นะ แล้วกดปุ่ม execute ด้านล่างออกมา URL พื้นฐานก็ประมาณนี้
https://www.googleapis.com/blogger/v3/blogs/<blog_id>/posts?key=<api_key>
เราสามารถปรับแต่งตามความพอใจ และโควต้าฟรีที่ได้ คือ 10,000 requests/day นะจ๊ะ และใน 100 วินาทีมี user เข้าไปเต็มแม็กซ์ที่ 100 คนจ้า (ที่เราเทสเล่นๆนี่เขานับนะจ๊ะ)

และเรามีทิปเล็กน้อยกับการแสดงผล json ที่สวยงาม ท่านที่ใช้ Chrome สามารถลงส่วนเสริมที่ชื่อว่า JSONView ช่วยให้ชีวิตง่ายขึ้น

ขั้นตอนที่ 7 : กลับมาสร้าง class DAO กันดีกว่า
ตอนนี้มาถึงการสร้าง class ในส่วนการดึง json มาใช้งาน
DAO คืออะไร เมื่อเราเรียกใช้งาน API ซึ่งมันผ่าน web service เราจะมองบล็อกตอนนึงที่เราเขียน แปลง จาก json มาเป็น 1 object ซึ่งเรียก object นั้นว่า DAO หรือ Data Access Oject นั่นเอง เราสามารถนำไปใช้งานต่างๆที่เราต้องการได้ทันที

ก่อนอื่นเราต้องสร้าง function get และ set ขึ้นมา ซึ่งเราจะใช้วิธีลัดกัน
ไปที่เว็บ http://www.jsonschema2pojo.org/ เว็บนี้จะแปลง json api ของเรา เป็น class สำเร็จให้เราใช้งานต่อได้ทันที เราก็อป json มาใส่ด้านซ้าย ใส่ package name เลือก source เป็น json และเลือก annotation เป็น gson จากนั้นกด preview ดู พบว่ามันจะสร้างให้ 2 class เพราะใน api เรามันมีสองชั้น และกด download เพื่อนำ class ที่เขา generate มาใช้ จากนั้นเอามาแปะใน Android Studio ซึ่งเราสร้าง folder package DAO ดังรูป

**ข้อควรระวัง ใส่ " " ครอบทุกตัว ไม่งั้นมันจะไม่ generate ให้นะ ดังนั้นเราเลยทำ sample ให้ทุกคนเอาไปใช้ได้เลย

ต่อไปเป็นการประยุกต์ใช้นะ ของใครของมันเนอะ

ขั้นตอนที่ 8 : สร้าง listview ของ content กันเถอะ และ เรียกใช้ Retrofit & Glide
ทำหน้า UI ให้เรียบร้อย และสร้าง listAdapter ขึ้นมา เพื่อเอามาแปะใน listview ที่เราสร้างขึ้นในหน้าแรก ซึ่งแต่ละอันจะแสดงรูป cover หัวข้อ วันที่ พวกนี้ขึ้นมา

อย่าลืม add dependencies ของ Retrofit และตัวอื่นๆด้วย ใส่รวมกันทีเดียวเลยจะได้ไม่ต้องรัน gradle หลายๆรอบ

และ add permission internet ที่ manifest
<uses-permission android:name="android.permission.INTERNET" />

จากนั้น เราก็ใส่ท่า Retrofit เข้าไป ซึ่งสร้าง package manager แยกขึ้นมา
ในส่วนของการดึงมาใช้งาน url ของ blooger json api เราเป็นแบบนี้
https://www.googleapis.com/blogger/v3/blogs/<blog_id>/posts?key=<api_key>
เราต้องแยกออกมาเป็นสองส่วน

ส่วนแรก https://www.googleapis.com/blogger/v3/blogs/<blog_id>/ ใส่ใน HttpManager.java แต่ส่วนที่มีปัญหา คือ ส่วนวันที่ เราต้องใส่ format ให้ถูก

ส่วนที่สอง posts?key=<api_key> ใส่ใน ApiService.java ซึ่งเป็น interface เรา get url ส่วนหลังมา เพื่อนำมาทำงานใน function loadContentList

และเราก็กลับมาที่ MainFragment.java ของเรา ในที่นี้เราทดสอบว่า เราเขียนแสดง json ออกมาถูกหรือเปล่า

โดย branch แรก คือ success case ให้แสดงหัวข้ออันแรกออกมา
branch สอง คือ 404 not found เราต้อง handle กรณีนี้ด้วย
และ branch สุดท้าย คือ กรณีที่โหลดไม่ได้

เราขอข้ามรายละเอียดส่วนอื่นๆไป ทั้งเรื่องของ fragment เอย listAdapter เอย เพราะมันค่อนข้างเยอะ
ตัว source code template ที่เราใช้ เราใช้ของพี่เนยคะ และมีข้อมูลเกี่ยวกับ Retrofit ตามลิ้งนี้
ถ้าจะให้ละเอียดขึ้น เรียนคอร์สของพี่เนยเลยคะ พี่เขาสอนดีคะ อิอิ

สรุป หน้าตาที่ได้ ออกมาเป็นประมาณนี้

เรื่องรูป ด้วยที่รูปแรกที่แปะมันไม่เคยเท่ากันเลยสักนิด งั้นขึ้นตามมีตามเกิดไปหล่ะกันนะ

มีทิปเล็กน้อยสำหรับการดึงรูปภาพ เนื่องจากตัว Images นั้น มันเป็น ListArray ซึ่งเราจะเรียกใช้ตรงๆเลยมันไม่ได้ ดังนั้นใส่ position ให้มันก่อนดึง url รูปมาใช้

เนื้อหาถัดไป
ตอนที่ 2 : มาทำ push to refresh กันเถอะ
ตอนที่ 3 : การดึง content มาแสดงใน custom chrome tab
ตอนที่ 4 : ทำ push notification เมื่อบล็อกเรามีการอัพเดตบทความใหม่
ตอนที่ 5 : การ publish application ของเรา ลง play store

#artboxthailand กับ #TGIFmarket เดินไหนดี?

บนถนนสุขุมวิทมี flea market 2 แห่ง ในบริเวณใกล้เคียงกัน ห่างกันแค่ 1 ป้าย bts เท่านั้น คือ

1. Artbox ตลาดนัดคอนเทนเนอร์ที่เราได้รีวิวกันไปแล้ว จัดที่ Em spare ลง bts พร้อมพงษ์
https://www.facebook.com/Artboxthailand/?fref=ts
http://www.artboxth.com/

2. TGIF fest ตลาดนัดแบบชิคๆเกร๋ๆ จัดที่ปากซอยสุขุมวิท 36 ลง bts ทองหล่อ
https://www.facebook.com/TGIFmarket/
http://www.tgifmarket.com/

ดังนั้น เรามาสรุปรายละเอียดเทียบกันแบบชอตต่อชอตกันดีกว่า
**ข้อมูลประมาณวันที่ 10 มิถุนายน 2559 และเราเดินแค่วันศุกร์เท่านั้น

มีวันไหนบ้าง เวลาเปิดปิด
Artbox :
เปิดสี่โมงเย็นถึงมิดไนท์
เป็นสามอาทิตย์สุดท้าย ก่อนที่จะย้ายที่อีกหน คือวันที่ 10-12, 17-19 และ 24-26 มิถุนายน 2559

TGIF fest :
เปิดบ่ายโมงถึงมิดไนท์ คือวันที่ 10-12, 17-19, 24-26 มิถุนายน และ 1-3, 8-10, 15-17 กรกฏาคม 2559

การเดินทาง
Artbox : ลง bts พร้อมพงษ์ ทางออก 6
TGIF fest : ลง bts ทองหล่อ ทางออก 2

บรรยากาศโดยรวม

Artbox :
- เป็นตู้คอนเทนเนอร์ เปลี่ยนไปตามคอนเซป อย่างตอนนี้มีวาดรูปเหมือนด้วย
- แบ่งสองส่วนคือเสื้อผ้า เครื่องใช้ กับของกิน มีบูธของลิปตันตั้งอยู่ด้วย และมีโซนแอลกอฮอลด้วย
- มีดนตรีสดและเพลงจากคลื่น Get FM
- บางทีมีตรวจกระเป๋าตรงทางเข้า
- คนเดินหลากหลาย ทั้งเด็กสายนํ้าผึ้ง นักศึกษา คนทำงาน ชางต่างชาติ
- มีห้องนํ้าให้เข้า เป็นรถห้องนํ้า
- มีระเบียงชั้นบนให้ดูวิว
- และ พิ้นเดินยากมากกก บางทีเป็นทราย เป็นหิน ตอนนี้เป็นไม้กระดาน เดินยากไปอี๊กกกกก
- และตอนนี้ โซนนั่งกิน น้อยลงเยอะเลย

TGIF fest :
- เขียวๆกรีนๆ
- แบ่งโซนเสื้อผ้า เครื่องประดับ อยู่เตนท์ด้านใน มีแอร์และห้องลองด้วย ของกินอยู่ด้านนอกแอร์เนอะ แถมมีชั้นบนชั้นล่างอีก
- คนเดินไม่หลากหลายเท่า Artbox อาจจะมีเหมือนใน Artbox แต่มีชาวต่างชาติเยอะกว่า มีน้องสาวคอนแวนมาเดินด้วย
- ที่นั่งกิน สวยงาม หลากหลาย มีเยอะ
- มีที่ถ่ายรูปเป็นจุดๆ พร้อมพร๊อพ เตรียมตัวเตรียมกล้อง จบหน้างานแน่นอน
- เนื่องจากตั้งอยู่หน้าคอนโดแห่งหนึ่ง เลยมีโซนถ่ายรูป โพสรูปลง IG ให้พี่เขาปริ๊นได้
- มีดีเจมาเปิดเพลงจากแอป JOOX
- มีร้านเบียร์ด้วย อยู่ด้านหลังเตนท์เย็น

โซนเสื้อผ้า เครื่องประดับ ของใช้

 

Artbox :
- เสื้อผ้า มาหลากหลายมากๆ ราคาเริ่มที่ 200 บาท
- ของกระจุกกระจิกเพียบเลยยย หลากหลายมาก ไม่ซํ้ากัน เช่นแหวนเรซิ่นวงละร้อย แหวนเลโก้
- ของแต่งบ้าน เริ่ดมากกก บอกเลยว่าเราชอบร้านที่ขายโคมไฟมาก มันเจ๋งอ่ะ (ถ้าซื้อไปตั้งไหนก็ไม่รู้ บ้านรก ><) เมื่อก่อนมีที่ใส่ทิชชู่เป็นรูปหน้าฮีโร่ มีถึงทั้งเครื่องมือทำความสะอาดเครื่องครัว
- กระเป๋ามีหลากหลาย พีคสุด กระเป๋าหูรูดร้านเสื้อผ้า เอาเศษผ้ามาทำขาย 10 บาท
- workshop มีบ้างแต่ไม่มากเหมือนแต่ก่อน

TGIF fest :
- เสื้อผ้ามาแบบเรียบหรูมาก แถมมีบูธร้าน SOS Sense of Siam มาตั้งด้วย มีห้องลองต่างหากอีก ราคาเสื้อผ้า น่าจะเริ่มที่ราคา sale 300 บาทขึ้นไป
- เครื่องประดับ เป็น handmade สวยงาม เรียบหรู ดูแพงอีกหล่ะ มีร้านเครื่องหนังด้วย
- มีร้านขายเคสมือถือด้วยนะเออ เสียดายดันซื้อไปก่อน ของร้านนึงลายสวยมากกกก
- มี workshop กระดาษทำมือด้วย

ของกิน บอกเลยว่าสองที่นี่ บางร้านเปิดทั้งสองที่เลย เช่น ร้านขายเฟรนฟราย iFly ซึ่งคนแน่นขายดีทั้งสองที่เลย chicken hour ที่ขายได้เรื่อยๆ ร้านขายร้านทั้ง chamaa กับอีกร้านที่ใช้สายนํ้าเกลือ ร้านขายไก่ทอดเกาหลีก็มีทั้งสองที่เลย เป็นต้น เอาจริงๆถ้าเน้นของกิน ร้านที่ขายซํ้ากันมีกว่า 50% เลย บางร้านเปิดสลับกันบ้างก็มี เช่น ร้านขายหอยนางรม งั้นเราเลือกเด่นๆที่ต่างกันมาดีกว่า

 

Artbox :
- อาทิตย์ต้นเดือนพบว่ามีอาหารเกาหลีมาเปิดด้วย
- ร้านขายไข่ปลาหมึก หอยครก ไข่ปลาหมึกเลี่ยนมากไปหน่อย
- food truck มีหลากหลายมาก ทั้งร้านชีสเอย ชาเขียวเอย
- นํ้าผลไม้ใส้หลอดไฟ O_O
- มีบูธของชาลิปตันมาเปิดด้วย

TGIF fest :
- ร้านกาแฟพี่โอปอล O's coffee เลือกความหวานได้ด้วย
- ร้านเฉาก๊วยนมสดนินจา อร่อยมากกก ชอบเฉาก๊วยกับนมสด เราเคยอุดหนุนที่ artbox แต่เขาขายที่นี่เป็นหลัก
- hashme ร้านไอติมสุดอลัง ยังไม่ได้ลองจ้า แต่น่าทานมาก
- ร้านหมูย่างพอฎี
- มีร้านขายนํ้าเลมอนด้วย
- food truck มีอยู่สามคัน สามร้าน

สรุป เหมาะกับใครบ้าง
Artbox :
- น้องนักเรียน หรือใครก็ตามที่เน้นของกินเป็นหลัก
- ชอบเดินดูของแปลกใหม่ อยากได้ของแต่งบ้านเพิ่ม
- อยากไปเดินห้างต่อ หรือไปที่ไดโนซอแพนเนต
- ชอบถ่ายรูป

TGIF fest :
- สาวชิคๆ
- เน้นซื้อเสื้อผ้าสวยๆ เครื่องประดับเริ่ดๆ
- ชอบนั่งกินแบบชิวๆ
- มีพร๊อพถ่ายรูปเกร๋ๆ

สุดท้าย ฝาก IG mikkipastel ด้วยนะคะ ในนั้นมีรีวิวของกินเยอะเลย อย่าลืมติดตามกันนะคะ ขอบคุณคะ :)