Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

สารบัญ

Table of Contents
สารบัญ................................................................................................................................... 2
มาสเตอร์ อึ่ง Talk .................................................................................................................. 4
Set Path Java สําหรับ การติดตั้ง android Studio ............................................................... 6
ติดตั่ง android Studio ........................................................................................................... 9
การอัพเดทเวอร์ชั่น android Studio.................................................................................... 12
Hello World ทดสอบการสร้างโปรเจ็ค ............................................................................... 14
การอัพเดม SDK .................................................................................................................. 16
การสร้าง Emulator ไว้ทดสอบโค้ด ..................................................................................... 19
Workshop Application “What is this” ............................................................................ 23
ออกแบบ UI ก่อน................................................................................................................. 25
Create colors.xml ............................................................................................................... 33
ทดสอบโค้ดที่ได้บน Emulator ............................................................................................ 34
Create My Style ................................................................................................................. 35
กำหนด ID ให้กับ Widget .................................................................................................... 37
การออกแบบ UI ในแนวนอน Landscape ........................................................................... 38
เปิดคลาส MainActivity มาโค้ดดิ้งซะ ................................................................................. 40
ประกาศตัวแปร และ Initial Widget ................................................................................... 41
Create New Class for Alert Dialog................................................................................... 42
สร้างฟิวเตอร์ ให้ LogCat .................................................................................................... 46
Create Model for App ....................................................................................................... 47
Create Getter & Setter ...................................................................................................... 47
Create Interface ................................................................................................................. 48

http://androidthai.in.th page == 2 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
การส่งค่าจาก Controllor ไปที่ Model ................................................................................ 52
Create Object Media Player ............................................................................................. 53
Toast Message .................................................................................................................... 55
Create New Activity .......................................................................................................... 57
การทำ Intent ไปยัง Activity อื่น......................................................................................... 58
การใช้ ตัวแปร Array ........................................................................................................... 61
การทำ Intent แบบ ส่ง Data ข้ามไปอีก Activity ................................................................ 64
การรับค่า ที่ Intent ส่งเข้ามา................................................................................................ 65

http://androidthai.in.th page == 3 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
มาสเตอร์ อึ่ง Talk

ก่อนอื่น ต้อง ขอขอบคุณ ในความสนใจ การเขียนแอพพลิเคชั่น แอนดรอยด์ ใน คู่มือเล่มนี่ ใช้ IDE ของ Google
ที่ชื่อว่า android Studio เวอร์ ชั่น 0.5.4 เป็นตัวเขียน ครับ
โดยเนื้อหา จะมุ่งเน้นไปที่การเขียนโค้ดแอนเดรอยด์ ที่มีการเขียนที่มีโครง สร้าง เป็น MVC หรือ ที่เราคุ้นเคย
Model – View - Controller

โดยปกติ เรามักจะเขียนโค้ด ให้ Controller คุยกับ View โดยตรง ไม่ผิดครับ ถ้าเป็นแอพเล็กๆ การ Scale
การอัพเวอร์ชั่น จะยากมาก มาสเตอร์ เลยคิดว่า ถ้าเราเริ่มต้นเสียวันนี่ และ ทําความรู้จักกับการเขียนแอพ ให้เป็น
MVC น่าจะดีไม่น้อย เดี๋ยวเราเรียนรู้กัน

http://androidthai.in.th page == 4 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

ก่อนที่เราจะเข้าไปบทเรียนกัน สําหรับ หลายๆ ท่านที่สนใจ จะลงเรียน คอร์สเบสิกแอนดรอยด์ กับ

มาสเตอร์ เรามี คอร์สแบบนี่ ทุกๆ วันเสาว์ - อาทิตย์ 9.00 – 15.00 นะครับ ราคา 1500 บาท รับจํากัดแค่ 9 คน ต่อ
คอร์ส ครับ หาข้อมูลเพิ่ม เติมที่ http://androidthai.in.th หรือ จะเข้าไปฝากคําถามไว้ที่
http://facebook.com/android.Training.by.EWTC มาสเตอร์ จะ พยายามตอบให้ทุกคําถามครับ หรือ
จะโทรมาคุยได้ครับ ที่ 081-859-5309 ครับ

http://androidthai.in.th page == 5 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
Set Path Java สําหรับ การติดตั้ง android Studio
สําหรับใครที่ใชั ระบบปฎิบัติการ Windows ต้อง Set Path จาวา หน่อย ก่อนที่จะติดตั้ง android Studio ครับ
เปิด System

http://androidthai.in.th page == 6 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

กำหนด Path ให้ จาวา

โดยดูว่า jdk เราอยู่ที่ไหน

http://androidthai.in.th page == 7 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

ต่อไปเพิ่ม PATH

http://androidthai.in.th page == 8 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

ติดตั่ง android Studio

http://androidthai.in.th page == 9 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

http://androidthai.in.th page == 10 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

http://androidthai.in.th page == 11 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

การอัพเดทเวอร์ชั่น android Studio

http://androidthai.in.th page == 12 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

http://androidthai.in.th page == 13 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
Hello World ทดสอบการสร้างโปรเจ็ค

http://androidthai.in.th page == 14 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

http://androidthai.in.th page == 15 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
การอัพเดม SDK

http://androidthai.in.th page == 16 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

ติดตั่ง Platform 4.3

http://androidthai.in.th page == 17 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

http://androidthai.in.th page == 18 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
การสร้าง Emulator ไว้ทดสอบโค้ด

http://androidthai.in.th page == 19 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

http://androidthai.in.th page == 20 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

http://androidthai.in.th page == 21 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

http://androidthai.in.th page == 22 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

Workshop Application “What is this”

http://androidthai.in.th page == 23 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

http://androidthai.in.th page == 24 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
ออกแบบ UI ก่อน

เปลี่ยนมุมมองเป็น Nexus one

http://androidthai.in.th page == 25 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

ลบ TextView ออกไปก่อน

เพิ่ม LinearLayout แบบ Vertical

http://androidthai.in.th page == 26 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

เปิด Strings.xml ออกมาอัพเดท

http://androidthai.in.th page == 27 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

และ dimens.xml มากําหนด ขนาดต่างๆ

http://androidthai.in.th page == 28 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
Copy รูปภาพ ไปเก็บไว้ที่ drowable-mdpi

http://androidthai.in.th page == 29 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
รวมไปถึง Background ด้วย

เอา TextView ใส่

และ ตาม ด้วย รูปภาพ

http://androidthai.in.th page == 30 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

http://androidthai.in.th page == 31 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
เพิม่ Button และ Background

http://androidthai.in.th page == 32 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
Create colors.xml

http://androidthai.in.th page == 33 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

ทดสอบโค้ดที่ได้บน Emulator

http://androidthai.in.th page == 34 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
Create My Style

เปิด styles.xml ออกมา

http://androidthai.in.th page == 35 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

และเพิ่มโค้ดพวกนี่ไปที่ androidMaifest.xml

http://androidthai.in.th page == 36 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
ลองรับแอพใหม่ ก็จะไม่มี Tittle Bar ละ

กำหนด ID ให้กับ Widget

http://androidthai.in.th page == 37 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

การออกแบบ UI ในแนวนอน Landscape

http://androidthai.in.th page == 38 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

ปรับ UI ให้ได้แบบนี่

ลองทดสอบ Landscape ใน Emulator

http://androidthai.in.th page == 39 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
เปิดคลาส MainActivity มาโค้ดดิ้งซะ

สร้าง เมธอด สําหรับ onClick

http://androidthai.in.th page == 40 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

ประกาศตัวแปร และ Initial Widget

http://androidthai.in.th page == 41 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
Create New Class for Alert Dialog

สร้างเมธอด และ หาไอคอน มาใช้งาน

http://androidthai.in.th page == 42 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

ตัวโค้ดทั้งหมด

http://androidthai.in.th page == 43 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
กลับมาที่ MainActivity ประกาศตัวแปร และ SetOnCheckChange ที่ RadioGroup

เพิ่ม Comment ที onClick

http://androidthai.in.th page == 44 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
ถ้ามีการคลิกให้ไปทํางานที่ เมธอด checkChooseAnswer

ลองรันและดูที่ LogCat

http://androidthai.in.th page == 45 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
สร้างฟิวเตอร์ ให้ LogCat

ลองรันใหม่ จะได้แบบนี้

http://androidthai.in.th page == 46 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
Create Model for App

Create Getter & Setter

http://androidthai.in.th page == 47 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
Create Interface

http://androidthai.in.th page == 48 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

ประกาศตัวแปร

http://androidthai.in.th page == 49 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
ประกาศตัวแปร สําหรับ การ AlertDialog

ที่ Arror คือตําแหน่ง ที่ user ไม่มีการเลือก RadioButton

ใส่โค้ดแบบนี้เข้าไป

http://androidthai.in.th page == 50 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

ประกาศตัวแปร intTime เป็นการบอกจํานวนข้อ

http://androidthai.in.th page == 51 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
การส่งค่าจาก Controllor ไปที่ Model

อันนี้เป็น การ Return ค่ากลับ

http://androidthai.in.th page == 52 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
Create Object Media Player

สร้าง raw สำหรับเก็บไฟร์ เสียง

http://androidthai.in.th page == 53 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
ประกาศตัวแปร

เมธอด soundButton ให้เสียงปุ่ม

http://androidthai.in.th page == 54 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

เช่นเดียวกัน เมธอด soundRadioButton สําหรับ การเลือก RadioButton

Toast Message

http://androidthai.in.th page == 55 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

http://androidthai.in.th page == 56 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
Create New Activity

มาสเตอร์ ให้ชื่อว่า ShowAnswer ทําหน้าที่ในการ แสดง Score

http://androidthai.in.th page == 57 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

การทำ Intent ไปยัง Activity อื่น

http://androidthai.in.th page == 58 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
ลองรันโค้ดดู

เปิด xml ออกมา ออกแบบ UI

http://androidthai.in.th page == 59 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
ออกแบบให้ได้แบบนี้

ลองทดสอบโค้ด

http://androidthai.in.th page == 60 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
การใช้ ตัวแปร Array

กําหนดค่าให้กับ array

http://androidthai.in.th page == 61 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

กำหนดเมธอด

http://androidthai.in.th page == 62 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

สร้างเมธอด checkScore

ลองสั่งรัน แล้วดูข้อความบน LogCat

http://androidthai.in.th page == 63 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

ส่วนของโค้ด checkScore

การทำ Intent แบบ ส่ง Data ข้ามไปอีก Activity

http://androidthai.in.th page == 64 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
การรับค่า ที่ Intent ส่งเข้ามา

สร้างเมธอดสําหรับ ปุ่ม PlayAgain และ Exit

http://androidthai.in.th page == 65 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง
กำหนด onClick ให้กับ Button ทั้ง 2 ก่อนทดสอบโค้ด บน Emulator

http://androidthai.in.th page == 66 Hotline 081-859-5309

Basic android on MVC (Model-View-Controller) โดย มาสเตอร์ อึ่ง

http://androidthai.in.th page == 67 Hotline 081-859-5309