418546 ภาคต้น 2555

ขอต้อนรับเข้าสู่เว็บไซต์วิชา 01418546 การพัฒนาโปรแกรมประยุกต์สำหรับอุปกรณ์เคลื่อนที่ ภาคการศึกษาที่ 1 ปีการศึกษา 2555

ประกาศ

• นิสิตรหัสต่อไปนี้ มีปัญหาเรื่องการตั้งค่า repository ให้แก้ไขให้เสร็จภายในวันที่ 8 กรกฎาคม 2555 ไม่เช่นนั้นจะถือไว้ขาดส่งงานในครั้งแรก
  • g5514401642 เอาสิ่งที่ไม่เกี่ยวข้องมาใส่ใน repository (กลับไปอ่านคำสั่งอีกครั้งว่าผมให้คุณทำอะไร)

ข้อควรทราบ

สิ่งที่จะสอน

• การออกแบบและพัฒนาโปรแกรมประยุกต์"ที่ดี"สำหรับอุปกรณ์เคลื่อนที่
• ในการสอนครั้งนี้จะใช้ระบบปฏิบัติการ Android และใช้การพัฒนาแบบ native (ไม่สอนการพัฒนาโดยใช้ HTML5)

สิ่งที่จะไม่สอน (ควรรู้ก่อนเรียน)

• โปรแกรมภาษา Java
• การออกแบบฐานข้อมูลและภาษา SQL
• หลักการเขียนโปรแกรมแบบ OOP

การให้งานและส่งงาน

• การให้งานและส่งงานจะใช้ Git (เหมือนกับ Mercurial ที่เคยใช้ในวิชา Computer Programming)
• วิธีการส่งงานดูได้จาก ที่นี้ แต่ให้เปลี่ยนจาก works418496mobileapp เป็น works418546mobileapp แทน
• วิชานี้ไม่มีการสอบข้อเขียนใช้การส่งการบ้านและโปรเจค ดังนั้นจึงมีการบ้านและโปรเจคที่ต้องส่งอย่างน้อย 2 สัปดาห์/ครั้ง
• นิสิตต้องทำ final project หนึ่งชิ้นต่อกลุ่ม และ แต่ละงานต้องไม่ซ้ำกัน

การให้คะแนน

• การบ้านและโครงงานย่อย 60 %
• final project 40 %

คะแนน

• คะแนนครึ่งแรก
• เกรด

โปรเจค

โปรเจคครั้งที่ 1

• ตัวอย่าง
• ให้สร้างโปรแกรมที่ทำงานได้เหมือนกับโปรแกรมตัวอย่าง โดยที่โปรแกรมมีความสามารถในการทำงานดังนี้
  • วาดรูป polygon ได้อย่างน้อย 2 ถึง 12 เหลี่ยม
  • แสดงชื่อรูป polygon ที่วาด (ดูวิธีการตั้งชื่อได้จาก Wikipedia)
  • เปลี่ยนลักษณะของเส้นที่ใช้วาดได้ 2 แบบ คือ เส้นปะ และ เส้นทึบ
  • เปลี่ยนขนาดของเส้นที่ใช้วาดได้ ตั้งแต่ 1 ถึง 20 pixel
  • สามารถหมุนรูป polygon โดยใช้ gesture
  • สามารถย้ายรูป polygon โดยใช้ gesture
  • โปรแกรมต้องสามารถเก็บฐานะของการวาดได้ นั้นคือเมื่อผู้ใช้ปิดโปรแกรมไปแล้ว เปิดมาอีกครั้งต้องเห็นรูปแบบการวาดครั้งล่าสุดอยู่
• การส่งงาน
  • ให้ตั้งชื่อโปรเจคว่า HelloPoly แล้วเก็บไว้ที่ไฟร์เดอร์ projects
  • ให้สร้างไฟล์ README (ไม่ต้องใส่ .txt) โดยใช้ encoding แบบ UTF-8 ใส่ไว้ในโปรเจคโดยในไฟล์นี้ ให้เขียนว่าได้ทำฟังก์ชั่นใดตามตัวอย่างที่ให้ไปและทำโดยใช้วิธีไหน
  • ตัวอย่างในการเขียน README

วาดรูป และ แสดงชื่อ polygon ได้ 15 เหลี่ยม โดยใช้ slider bar ที่หน้าจอ
เปลี่ยนลักษณะของเส้นได้ 2 แบบ โดยใช้ Preference Screen
เปลี่ยนขนาดของเส้นได้ 1 ถึง 20 pixel โดยใช้ปุ่มกดที่หน้าจอ
ไม่สามารถหมุนรูปได้
สามารถย้ายรูปได้โดยการกดค้างแล้วลาก
โปรแกรมสามารถเก็บฐานะการวาดรูปได้บางส่วน ยกเว้นตำแหน่งของรูปเมื่อมีการย้ายรูป

หรือถ้าใครทำได้เหมือนในตัวอย่างทุกประการ อาจเขียนว่า

ทำได้เหมือนตัวอย่างทุกประการ

• ไฟล์ README สำคัญมาก ถ้าใครไม่เขียนจะไม่ได้รับการตรวจ เพราะผมจะตรวจเฉพาะฟังก์ชั่นการทำงานที่เขียนไว้ในไฟล์ README เท่านั้น หรือ ถ้าใครเขียนมาแล้วทำไม่ได้จริง จะถูกหักคะแนนเพราะถือว่าเป็นการหลอกลวงอาจารย์
• กำหนดส่งวันที่ 28 กรกฎาคม 2555 ก่อนเที่ยงคืน

โปรเจคครั้งที่ 2

• ตัวอย่าง
• ความสามารถของโปรแกรมที่จำเป็น

1. เพิ่ม/ลบ รายชื่อผู้ใช้ของ Flickr ที่เราต้องการดูรูปภาพได้
2. เรียกดูภาพที่ถูกแชร์แบบ public ได้
3. มีรายการรายการแสดงภาพที่ถูกเรียกดูครั้งล่าสุด
4. ข้อมูลต่างๆ ที่ถูกโหลดมาแล้วให้เก็บไว้ในฐานข้อมูล

• ความสามารถเพิ่มเติม (หากทำจะได้คะแนนพิเศษ)

1. หากรูปมีการกำกับ Geolocation จะถูกแสดงในแผนที่โดยใช้ Google Map

การใช้ Flickr API

• ลงทะเบียนเพื่อขอ API Key http://www.flickr.com/services/apps/create/apply/
  • API Key จำเป็นต้องใช้ทุกครั้งเมื่อมีการร้องขอข้อมูลไปยัง Flickr
• การร้องขอผ่าน REST Request
  • http://www.flickr.com/services/api/request.rest.html
  • แนะนำให้ใช้ JSON เป็น format ในการส่งข้อมูลกลับมา โดยส่งค่า format=json ไปในการร้องขอ
• การรับข้อมูลส่งกลับ JSON Response
  • http://www.flickr.com/services/api/response.json.html
  • ข้อความที่ส่งกลับมาจะอยู่ในรูปแบบ "jsonFlickrApi({...})" ดังนั้นก่อนที่จะนำข้อความไปประมวลเพื่อใช้ได้ JSONObject จำเป็นต้องตัด ข้อความในส่วนของ "jsonFlickrApi()" ทิ้งก่อนเพื่อให้เหลือเฉพาะส่วน "{...}" เท่านั้น ตัวอย่างเช่น

   JSONObject jsonObject = new JSONObject(response.replace("jsonFlickrApi", "").substring(1, tmp.length()-1));

• การใช้งานรูปภาพ
  • http://www.flickr.com/services/api/misc.urls.html
• การใช้งาน Buddyicons (รูป avatar ของ ผู้ใช้)
  • http://www.flickr.com/services/api/misc.buddyicons.html
• API Methods ที่จำเป็น
  • ค้นหาผู้ใช้ด้วย Email
    • http://www.flickr.com/services/api/flickr.people.findByEmail.html
  • ค้นหาผู้ใช้ด้วย username
    • http://www.flickr.com/services/api/flickr.people.findByUsername.html
  • ข้อมูลส่วนตัวของผู้ใช้
    • http://www.flickr.com/services/api/flickr.people.getInfo.html
  • รูปภาพที่แชร์แบบ public
    • http://www.flickr.com/services/api/flickr.people.getPublicPhotos.html

การใช้ Tab Activity

http://developer.android.com/resources/tutorials/views/hello-tabwidget.html

การใช้ Google Map

http://developer.android.com/resources/tutorials/views/hello-mapview.html

การส่งงาน

• ให้สร้างโปรเจคชื่อ Paparazzi ไว้ในโฟร์เดอร์ projects
• เขียน README กำกับอธิบายวิธีการใช้งานโปรแกรมไว้ด้วย โดยเฉพาะกรณีที่โปรแกรมทำงานไม่เหมือนโปรแกรมตัวอย่าง หากโปรแกรมทำได้เหมือนโปรแกรมตัวอย่างทุกประการ สามารถเขียนใน README สั้นๆ ได้ว่า "โปรแกรมทำงานได้เหมือนตัวอย่างทุกประการ"
• การตรวจงานผมจะเริ่มตรวจที่ README ก่อน ดังนั้นหากใครไม่เขียน README งานจะไม่ได้รับการตรวจ
• กำหนดส่งวันที่ 1 กันยายน 2555 ก่อนเที่ยงคืน

โปรเจคครั้งที่ 3

การตั้งชื่อโปรเจค

ให้ตั้งชื่อโปรเจคว่า FinalProject แล้วใส่ไว้ในโฟล์เดอร์ projects

การส่งงาน

สิ่งที่ต้องส่งมีดังนี้

• เอกสารอธิบายโปรแกรม การออกแบบระบบ และ การใช้งานเบื้องต้น
  • ให้สร้างเป็น pdf ใส่ไว้ในโปรเจคโดยตั้งชื่อว่า report.pdf
  • ในกรณีของโปรเจคที่ทำมากกว่าหนึ่งคนให้เขียนในรายงานอย่างละเอียดว่าใครทำส่วนไหน โค้ดแต่ละส่วนใครเป็นคนเขียนไฟล์ไหนบรรทัดไหนบ้าง
• ลิงก์ของไฟล์ apk (ใช้สำรองในการกรณีที่มีปัญหาในการคอมไฟล์)
  • เขียนไว้ใน README
• ลิงก์ของการนำเสนอโปรเจคบน YouTube (ความยาวไม่ควรเกิน 10 นาที และ ควรใช้ความละเอียดมากที่สุดเท่าที่เป็นไปได้)
  • เขียนไว้ใน README
• ในตอนท้ายของวีดีโอการนำเสนอโปรเจคให้ทดสอบโปรแกรมโดยใช้ Monkey ตามคำสั่งต่อไปนี้

 adb shell monkey -p your.package.name -s 01418546 1000

ข้อแนะนำ

• โปรแกรมต้องทำงานได้จริง นั้นหมายความว่า ถ้าโปรเจคใดมีการติดตั้ง server ที่สร้างขึ้นเอง server นั้นต้องสามารถเข้าถึงได้ในเวลาที่ผมตรวจโปรเจค
• โปรแกรมควรมี UI ที่ไม่น่าเกลียด และมีประสิทธิภาพในการทำงานที่เร็ว
• โปรแกรมควรครอบคลุมเนื้อหาที่ได้ถูกสอนไปในวิชานี้

การให้คะแนน

• เอกสารและการนำเสนอ 5%
• โปรแกรม 35%

กำหนดส่ง

วันที่ 1 ตุลาคม 2555

การบ้าน

การบ้านครั้งที่ 1

• ให้ตั้งชื่อโปรเจคว่า Homework01 แล้วใส่ไว้ในโฟร์เดอร์ exercises ใน repository ของคุณ
• สีที่ใช้ในการ random ต้องมีไม่ต่ำกว่า 5 สี
• ห้ามสร้างโปรเจคจากโปรเจคตัวอย่างเด็ดขาด ให้สร้างโปรเจคใหม่เสมอ แต่สามารถคัดลอกโค้ดบางส่วนของตัวอย่างมาใช้ได้ แต่ผมแนะนำว่าควรพิมพ์เองจะดีกว่า เพราะจะทำให้คุณคุ้นเคยกับการเขียน Android ได้ดีขึ้น
• ทุกครั้งที่ส่งงานให้ตรวจสอบดูด้วยว่าโปรเจคของคุณขึ้นไปอยู่ใน repository เรียบร้อยหรือยัง เพราะผมจะ clone repository ของคุณมาตรวจ ถ้าครบกำหนดส่งแล้วผมไม่สามารถเห็น project ของคุณบน repository ผมจะถือว่าคุณขาดส่งงานในครั้งนั้น
• การ clone งานมาตรวจผมจะใช้คำสั่ง git clone git@bitbucket.org:your_user_name/works418546mobileapp.git โดยที่ your_user_name คือ username ที่ผมให้คุณส่ง E-Homework ใน Maxlearn
• ให้ตรวจสอบความถูกต้องเรื่องสิทธิ์ในการเข้าถึงว่าคุณให้สิทธิ์ในการอ่านกับผม (ssutee) หรือเปล่า และ ชื่อ repository ถูกต้องหรือเปล่า
• ห้ามส่งงานทางอีเมลโดยเด็ดขาด ใครส่งมานอกจากผมจะไม่ตรวจ ผมจะหักคะแนนเพิ่มอีกด้วย
• การ compile งานเพื่อตรวจผมจะทำผ่านทาง command line โดยใช้คำสั่ง ant ดังนั้นก่อนส่งโปรเจคให้คุณสั่งคำสั่งบน command line ว่า android update project -p . (android เป็น tool ที่มาพร้อมกับ Android SDK คุณต้องกำหนด PATH ไปที่โฟร์เดอร์ tools ของ Android SDK ก่อนถึงจะเรียกใช้คำสั่งนี้ได้) ถ้าทำได้ถูกต้องไฟล์ชื่อ build.xml จะปรากฎขึ้น
• เพื่อความแน่ใจให้ทดลองสั่งคำสั่ง ant debug เพื่อตรวจสอบว่าสามารถสร้าง binary ไฟล์ของโปรเจคได้หรือไม่ (โปรแกรม ant บน Windows ผมไม่แน่ใจว่ามันอยู่ที่โฟรเดอร์ไหน แต่เข้าใจว่ามันจะมาพร้อมกับ Java SDK ส่วนบน OS X สามารถเรียกใช้ผ่านทาง command line ได้อยู่แล้ว)
• เมื่อทุกอย่างเรียบร้อยแล้วจึง commit และ push ขึ้นไปยัง repository เพื่อรอการตรวจต่อไป

การบ้านครั้งที่ 2

• ให้ตั้งชื่อโปรเจคว่า Homework02 แล้วใส่ไว้ในโฟร์เดอร์ exercises ใน repository ของคุณ
• ให้สร้าง DotView เหมือนตัวอย่างที่แสดงให้ดูในห้องเรียน แต่ให้ จุด สามารถเปลี่ยนแปลงสีและขนาดแบบสุ่มได้ เหมือนในการบ้านครั้งที่ 1 ที่ทำกับ ListView
  • เมื่อสัมผัสหน้าจอให้สร้างจุดใหม่ที่มีสีและขนาดคงที่ขึ้นมาหนึ่งจุดตรงจุดที่สัมผัส
  • การเพิ่ม แก้ไข หรือ ลบ จุด ทั้งบน ListView และ DotView ต้องสัมพันธ์กัน
  • การแก้ไขและลบ จุด ให้ทำผ่านทาง ListView ก็พอ แต่ถ้าใครสามารถทำผ่านทาง DotView ได้จะมีคะแนนพิเศษให้

การบ้านครั้งที่ 3

• ให้ตั้งชื่อโปรเจคว่า Homework03 แล้วใส่ไว้ในโฟร์เดอร์ exercises ใน repository ของคุณ
• ให้ทำการบ้านครั้งที่ 2 ใหม่โดยใช้ฐานข้อมูลในการเก็บค่าจุด

การบ้านครั้งที่ 5

• ให้ตั้งชื่อโปรเจคว่า Homework05 แล้วใส่ไว้ในโฟร์เดอร์ exercises ใน repository ของคุณ
• ทำต่อจากการบ้านครั้งที่ 4 โดยย้ายฟังก์ชั่นการทำงานเกี่ยวกับจุดทั้งหมดไปไว้ใน Service
• กำหนดให้ Service เริ่มทำงานทุกครั้งที่มีการ boot เครื่อง
• บังคับให้ Service สุ่มค่าจุดขึ้นมาทุกๆ 5 วินาที
• ถ้าเกิดจุดสีที่กำหนดขึ้น ให้แสดง Notification แจ้งเตือน
• การส่งการบ้านครั้งนี้ต้องเขียนไฟล์ README กำกับไว้ด้วย โดยให้เขียนดังนี้ (ให้ไม่มีไฟล์ README จะได้ 0 คะแนนทันที)
  • เขียนว่า Service จะดับรอสีอะไร เพื่อแสดง notification
  • ในกรณีโปรแกรมทำงานไม่สมบูรณ์ให้เขียนบอกด้วยว่าทำอะไรได้บ้างและทำอะไรไม่ได้
  • หากทำโปรแกรมได้สมบูรณ์ทุกอย่างก็ให้เขียนบอกไว้ใน README ด้วยว่าโปรแกรมทำงานได้สมบูรณ์ทุกอย่าง

ตัวอย่างในห้องเรียน

ดูได้ที่นี้

การเรียนการสอน

วัน	หัวข้อ	เอกสาร
17 มิถุนายน 2555	Introduction to Android	PDF (แก้ไข)
24 มิถุนายน 2555	Intents and IntentFilters	ใช้ slide ของครั้งแรก
1 กรกฎาคม 2555	ListView	ใช้ slide ของครั้งแรก
8 กรกฎาคม 2555	UI	PDF
15 กรกฎาคม 2555	Building your own widgets	PDF
22 กรกฎาคม 2555	Life cycle State instance data Persistent data	PDF PDF
28 กรกฎาคม 2555	Database and CursorAdapter
5 สิงหาคม 2555	Content Provider and Loader
12 สิงหาคม 2555	Services
19 สิงหาคม 2555	Threads
26 สิงหาคม 2555	RESTful applications	Google IO 2010
2 กันยายน 2555	Google Cloud Messaging
9 กันยายน 2555	Fragments
16 กันยายน 2555	RoboGuice: Google Guice on Android	Deep dive into RoboGuice
23 กันยายน 2555	Testing

เครื่องมืออำนวยความสะดวก

• Android database generator
• Android asynchronized REST client