2 ˘ˇˆ˙ Android Studio - · PDF file02-08-2015 · Welcome to Android...

$: 2 ˘ˇˆ˙ Android Studio - · PDF file02-08-2015 · Welcome to Android Studio (1 &' Welcome) - .M .\ ... ./01 crash 6' < ?#1 $ . *! +. . ... USB Debugging $ ;$
1 การสร้างแอพพลิเคชันแรกด้วย Android Studio

สําราญ วานนท์ | คอมพิวเตอร์ธุรกิจ

แผนการสอนหน่วยที่ 2

การสร้างแอพพลิเคชันแรกด้วย Android Studio

แนวคิด

1. เครื่องมือในการพัฒนาแอพพลิเคชันแอนดรอยด์ต่าง ๆ ท่ีได้ติดตั้งในเครื่องคอมพิวเตอร์สามารถใช้งานได้อย่างไม่มีปัญหาใด ๆ นักศึกษาสามารถสร้างแอพพลิเคชันโดยไม่ต้องออกแบบหน้าตา ไม่ต้องเขียนโค้ดใด ๆ แล้วสามารถทดสอบรันเพ่ือดูผลได้ทางอีมูเลเตอร์ทันที

2. ในการสร้างแอพพลิชันข้ึนมาหนึ่งตัว นักศึกษาควรจะรู้ว่าในโปรเจ็คท่ีเราสร้างข้ึนมาด้วยเครื่องมือ Android Studio นั้นจะประกอบไปด้วยสภาพแวดล้อมใดบ้างและต้องเข้าใจในสภาพแวดล้อมนั้น ๆ ว่ามีหน้าท่ีอะไร ทํางานอย่างไร

วัตถุประสงค์

เม่ือศึกษาหน่วยท่ี 2 จบแล้วนักศึกษาสามารถ

1. อธิบายได้ว่าในการพัฒนาแอพพลิเคชันบนอุปกรณ์เคลื่อนท่ีแอนดรอยด์นั้นในโปรเจ็คจะประกอบไปด้วยสภาพแวดล้อมอะไรบ้าง

2. รู้จักสภาวะแวดล้อมของแอพพลิเคชันแต่ละส่วนทําหน้าท่ีอย่างไรประกอบไปด้วยอะไร

3. สามารถรันแอพพลิเคชันท่ีได้พัฒนาแล้วผ่านทางอีมูเลเตอร์ได้อย่างไม่มีปัญหา

กิจกรรมการเรียน

1. อ่านแผนการสอนประจําหน่วยท่ี 2

2. ศึกษาเนื้อหาและฝึกปฏิบัติตาม

3. ศึกษาเพ่ิมเติ่มจากเอกสารอ่ืนหรือสื่อเสริมออนไลน์ (ถ้ามี)

4. ทํากิจกรรมใบงานท่ีกําหนดไว้ในเอกสารคําสอน

2 1089018 การเขียนโปรแกรมบนอุปกรณ์เคลื่อนท่ี


หน่วยที่ 2

การสร้างแอพพลิเคชันแรกด้วย Android Studio

1. เร่ิมสร้างแอพพลิเคชัน

เพ่ือเป็นการเริ่มฝึกพัฒนาแอพพลิเคชันและเป็นการเริ่มเรียนรู้การใช้เครื่องมือต่าง ๆ ซึ่งในหน่วยนี้จะเป็นการเริ่มเขียนแอพพลิเคชันให้แสดงข้อความ Hello world ซึ่งจะเป็นแอพพลิชันแรก ๆ ท่ีเกือบจะทุกภาษาท่ีใช้การเขียนแอพพลิเคชันสําหรับนักพัฒนาหน้าใหม่ นอกจากนี้ยังเป็นการทดสอบสภาพแวดล้อมการทํางานงานของตัวคอมไพเลอร์ (Compiler) และส่วนสําคัญต่าง ๆ ตรวจสอบข้อผิดพลาดของ IDE (Integrated Development Environment) อีกด้วย

1.1 จะต้องสร้างโปรเจ็คใหม่ใน Android Studio เม่ือเปิด Android Studio ข้ึนมาจะพบกับหน้าต่าง Welcome to Android Studio (หน้าต่าง Welcome) ถ้าเป็นการเปิดครั้งแรกเราจะเจอหน้าต่างนี้หรือถ้าเราเคยเปิดมาแล้วครั้งก่อนแต่ไม่เปิดโปรเจ็คใด ๆ ไว้เลย กับอีกกรณีถ้าครั้งก่อนหน้านี้เราได้เปิดโปรเจ็คไว้แล้วไม่ได้ปิดโปรเจ็คเลยแต่ปิดแต่โปรแกรม Android Studio ถ้าอย่างนี้เราเปิดข้ึนมาอีกครั้งเราจะไม่เจอหน้า Welcome แต่จะเจอหน้าโปรเจ็คงานเลย

รูปท่ี 2.1 หน้า Welcome to Android Studio

ไปท่ีเมนู Start a new Android Studio project

รูปท่ี 2.2 Start a new Android Studio project



1.2 กําหนดค่าเริ่มต้นให้กับโปรเจ็คใหม่ท่ีสร้างข้ึนทางหน้าต่าง Create New Project

รูปท่ี 2.3 Create New Project

• ช่อง Application name ให้กําหนดชื่อของแอพพลิชันของเราท่ีต้องการให้ผู้เห็นเม่ือเราสร้างเสร็จและส่งข้ึนไปบน Google Play Store

• ช่อง Company Domain ให้กําหนดชื่อโดเมนของเว็บไซต์ของเราเอง (ถ้ามี) หลังจากท่ีเราใส่ข้อมูลท่ีช่องนี้แล้วให้สังเกตตรงช่อง Package name ท่ีอยู่ถัดมาจะเห็นว่าชื่อของแพคเกจของจะเปลี่ยนให้โดยอัตโนมัติโดยจะเขียนแบบชื่อโดเมนกลับคําให้ (reverse) แล้วต่อด้วยชื่อแอพพลิเคชันโดยจะตัดช่องว่างออก ชื่อแพคเกจจะเป็น ID ประจําตัวของแอพพลิเคชันของเรา ดังนั้นแอพพลิเคชันต่าง ๆ จะต้องไม่มีแพคเกจซ้ํากัน หากซ้ํากันกับแอพพลิเคชันของคนอ่ืน อาจจะส่งผลให้เราไม่สามารถส่งแอพพลิเคชันของเราข้ึน Google Play Store ได้ ตัวอย่าง Domain เป็น samranwanon.com เราก็จะได้แพคเกจเนม เป็น com.samranwanon.helloworld

• ช่อง Project Location ให้ระบุโฟลเดอร์ท่ีเราต้องการจัดเก็บไฟล์ต่าง ๆ ของโปรเจ็คนี้หากเราไม่เปลี่ยนแปลงค่าใด ๆ เราสามารถใช้ค่าตามดีฟอลด์ได ้

จากนั้นให้กดปุ่ม Next เพ่ือไปยังหน้าถัดไป



รูปท่ี 2.4 Target Android Devices

1.3 เลือกอุปกรณ์สําหรับรันแอพพลิเคชัน (From factor) รวมท้ังเวอร์ชั่นข้ันต่ําของแอนดรอยด์ท่ีสามารถรันแอพพลิเคชันของเราได้ ซึ่งแอนดรอยด์มีคุณสมบัติ forward compatibility กล่าวคือแอพพลิเคชันท่ีสร้างจากเวอร์ชันหนึ่งจะสามารถรันบนแอนดรอยด์เวอร์ชันท่ีใหม่กว่าได้ ตัวอย่างเช่นเราสร้างแอพพลิเคชันท่ีกําหนด Minimum SDK เป็นแอนดรอยด์ 2.3 ก็แสดงว่าแอพพลิเคชันของเราจะสามารถรันได้ตั้งแต่แอนดรอยด์เวอร์ชัน 2.3 ข้ึนไป ถ้าไม่แน่ใจเรื่อง Minimum SDK เราสามารถคลิกท่ี Help me choose ก็จะปรากฏหน้าต่างแสดงจํานวนอุปกรณ์ท่ีจะรันแอพพลิเคชันเราได ้

รูปท่ี 2.5 Android Platform/API Version Distribution

จากนั้นให้คลิกปุ่ม Next เพ่ือไปยังหน้าจอถัดไป



1.4 เลือกรูปแบบแอคทิวิตี (UI Screen) ซึ่ง Android Studio ได้เตรียมแอคทิวิตีสําเร็จรูปไว้ให้แล้ว ซึ่งมีหลายรูปแบบ เช่น แอคทิวิตีแบบเต็มจอ แอคทิวิตีแบบ master-details เป็นต้น

รูปท่ี 2.6 Add an activity to mobile

ให้เราเลือก Blank Activity เพ่ือสร้างหน้าจอว่าง ๆ จากนั้นให้คลิกปุ่ม Next เพ่ือไปยังหน้าถัดไป

1.5 กําหนดค่าต่าง ๆ ให้กับ Activity

รูปท่ี 2.7 Customize the Activity

• ช่อง Activity Name ให้พิมพ์ MainActivity เพ่ือกําหนดเป็นชื่อไฟลื .java ซึ่งจะเป็นชื่อของคลาสในไฟล์นั้นด้วย ซึ่งตามข้อกําหนดในภาษา java นั้นชื่อของคลาสกับชื่อไฟล์จะต้องเป็นตัวเดียวกัน ไฟล์นี้



จะเก็บโค้ดคําสั่งท่ีเป็นรายละเอียดการทํางานในแอคทิวิตีนั้น ๆ เช่นเม่ือเรามีการแตะท่ีปุ่ม หรือเม่ือแอคทิวิตีแสดงออกมา

• ช่อง Layout Name ให้พิมพ์ activity_main เพ่ือกําหนดเป็นชื่อให้กับ Layout file ของแอคทิวิตีซึ่ง Layout file จะมีนามสกุลเป็น .xml ทําหน้าท่ีในการกําหนดหน้าตา UI ของแอคทิวิตี กําหนดว่ามีคอนโทรลอะไรบ้าง เช่นปุ่ม ป้าย หรือเท็กซ์ฟิลด์เป็นต้น รวมไปถึงการจัดวางคอนโทรลต่าง ๆ

ภาพรวม XML เป็นภาษาท่ีใช้เน้น (มาร์กอัป) ส่วนท่ีเป็นข้อมูล โดยสามารถกําหนดชื่อแท็ก (Element) และชื่อแอตทิบิวต์ ได้ตามความต้องการของผู้สร้างเอกสาร xml โดยเอกสารนั้นจะต้องมีความเป็น Well-formed ส่วน DTD และ Schema จะมีหรือไม่มีก็ได้ ข้ึนอยู่กับว่ามีผู้ใช้เอกสารนั้นมากน้อยแค่ไหน เอกสาร xml จึงเป็นแค่เท็กซ์ไฟล์ชนิดหนึ่ง ท่ีมีแท็กเปิดและเท็กปิดครอบข้อมูลไว้ตรงกลางเท่านั้น ทําให้เอกสาร xml ถูกใช้ในการติดต่อกับระบบท่ีต่างกัน เนื่องจากความง่ายในการสร้างเอกสาร การนําเอกสาร xml ไปใช้งาน จะสนใจแต่ข้อมูลท่ีถูกเน้นด้วยแท็กมากกว่า Well-formed เป็นไวยากรณ์พ้ืนฐานของเอกสาร xml อย่างเช่น เอกสาร xml ต้องเริ่มต้นด้วย <?xml version="1.0" ?> เอกสาร xml 1 เอกสาร จะต้องมีแท็กรูทเพียงแท็กเดียว หมายความว่า แท็กและข้อมูลต่างๆ จะต้องอยู่ภายในแท็กแรกสุดเพียงแท็กเดียว การเปิดและปิดแท็กจะต้องไม่มีการคร่อมกัน เช่น <b>ตัวหนา<i>และ</b>เอียง</i> จะไม่ Well-formed เนื่องจากเอกสาร xml สามารถกําหนดชื่อแท็ก และชื่อแอตทิบิวต์ได้ตามความต้องการของผู้สร้างเอกสาร ทําให้ในการเน้นข้อมูลใดข้อมูลหนึ่ง สามารถมีเอกสาร xml หลายรูปแบบ (ผู้เขียนอาจใช้ชื่อแท็กต่างกัน ท้ังท่ีสื่อความหมายไปท่ีสิ่งเดียวกัน) หากว่าเอกสาร xml นั้น ถูกนําไปใช้ติดต่อกับระบบอ่ืนๆ อาจทําให้สื่อความหมายไม่ตรงกัน ดังนั้นจึงต้องมีการกําหนดรูปแบบท่ีเป็นมาตรฐานข้ึน (ตกลงรูปแบบระหว่างกัน) โดย DTD และ Schema จะเป็นตัวกําหนดว่าเอกสาร xml นั้น จะต้องมีแท็กอะไรบ้าง ภายในแท็กนั้นจะมีแท็ก แอตทิบิวต์ หรือข้อมูลอะไรได้บ้าง โดย DTD จะต่างกับ Schema ตรงท่ี Schema เป็นเอกสาร xml ด้วย Element ประกอบไปด้วย แท็กเปิด ข้อมูล และแท็กปิด ยกตัวอย่างเช่น <student> Example_sudent </student> ในท่ีนี้ <student> คือแท็กเปิด Example_sudent คือข้อมูล และ </student> คือแท็กปิด โดยแท็กปิดนั้นจะต้องมีชื่อเหมือนแท็กเปิดของมันแต่ตามหลังจากเครื่องหมาย '/' จะสังเกตได้ว่า XML นั้นคล้ายกับ HTML เป็นอย่างมากสําหรับข้อแตกต่างท่ีชัดเจนคือ HTML ได้กําหนดแท็กไว้ล่วงหน้าแล้วแต่ XML ไม่ว่าใครๆก็สามารถกําหนดแท็กของเราเองได้ XML นั้นไม่ใช่ภาษาโดยสมบูรณ์มันเป็นมาตรฐานข้อมูลมากกว่า โดยตัวโปรแกรมประยุกต์จะเป็นผู้กําหนดรูปแบบของตัวเองข้ึนและจะสามารถใช้ได้กับโครงสร้างข้อมูลท่ีถูกอนุญาต (เพราะว่ามีรูปแบบของข้อมูลท่ีเข้ากันได้) XML นั้นเป็นภาษาท่ี case sensitive ดังนั้นการท่ีเราเขียนว่า <student> กับ <Student> จึงถือว่าเป็นคนละแท็กกัน นอกจากนี้แล้ว element ใน XML สามารถบรรจุอยู่ใน element อ่ืนๆได้ยกตัวอย่างเช่น <student> <name>example name</name> <id>123456789</id>



</student> Attribute นอกจากแท็กแล้ วยั ง มี สิ่ ง ท่ี เรี ยกว่ า attribute ด้ วย โดย ท่ี มีรูปแบบดั งนี้ <student name="example_name"></student> • ช่อง Title ให้พิมพ์ข้อความท่ีเราต้องการให้ข้อความนี้แสดงบน title bar (action bar) ของแอคทิวิตี

ในตัวอย่างนี้ให้พิมพ์ My First Application Android • ช่อง Menu Resource Name ให้ กําหนดชื่อ ไฟล์รีซอร์สของเมนู ในตัวอย่างนี้ ให้ เ ราพิมพ์

menu_main

จากนั้นให้คลิก Finish เพ่ือสร้างโปรเจ็ค Hello World

2. ออกแบบหน้าจอ

หลังจาก Adroid Studio ได้สร้างสภาพแวดล้อมโปรเจ็คพร้อมในการพัฒนาเป็นท่ีเรียบร้อยแล้ว หากมีการแสดงหน้าต่าง Tip of the Day เราสามารถปิด (close) ไปได้เลย

รูปท่ี 2.8 สภาพแวดล้อมของโปรเจ็ค

เราสามารถทํางานกับโปรเจ็คนี้ได้ทันท่ี โดยวินโดว์ project ท่ีอยู่ทางซ้ายจะแสดงโครงสร้างของโปรเจ็คว่าประกอบไปด้วยไฟล์ หรือโฟลเดอร์อะไรบ้าง โครงสร้างโปรเจ็คประกอบไปด้วย 3 ส่วนคือ

• Manifest file อยู่ในโฟลเดอร์ manifest ของแอนดรอยด์คือไฟล์ชื่อ AndroidManifest.xml จะเก็บข้อมูลเก่ียวกับแอพพลิเคชัน แอนดรอยด์จะมาอ่านข้อมูลเหล่านี้ตอนติดตั้งและรันแอพพลิเคชัน

• ซอร์สโค้ดภาษาจาวาอยู่ในโฟลเดอร์ java



• ไฟล์รีซอร์สต่าง ๆ เช่น layout file , รูปภาพ, ค่าสตริง ฯลฯ จะอยู่ในโฟลเดอร์ res

และท้ังหมดจะอยู่ในโฟลเดอร์ app ส่วนท่ีเหลือซึงอยู่ทางด้านขวาของวินโดว์ project คือส่วนท่ีเอาไว้ทํางานกับไฟล์ต่าง ๆ ในโปรเจ็คซึ่งลักษณะการแสดงจะข้ึนอยู่กับประเภทของไฟล์นั้น

รูปท่ี 2.9 วินโดว์ทํางานกับไฟล ์

activity_main.xml คือ layout file ท่ีทําหน้าท่ีกําหนดส่วนติดต่อผู้ใช้งานหรือ UI ของแอคทิวิติและ android studio จะโหลดไฟล์ข้ึนมาในรูปแบบ Visual จะมีรูปหน้าจอของอุปกรณ์อยู่ตรงกลางแสดงภาพตัวอย่างหรือพรีวิวของส่วนติดต่อผู้ใช้ เท็กซ์วิวท่ีแสดงข้อความ Hello world นี้จะถูกบรรจุอยู่ใน RelativeLayout อีกท่ีซึ่ง เป็น Layout ชนิดหนึ่งเป็นวิวชนิดพิเศษท่ีไม่มีรูปร่างหน้าตา แต่จะทําหน้าท่ีในการจัดเรียงวิงและ layout อ่ืน ๆ ท่ีอยู่ภายในตัวมันตามรูปแบบของ layout ชนิดนั้น ๆ RelativeLayout จะเรียงวิวแบบสัมพันธ์ต่อกัน (เรื่อง Layout จะกล่าวในหน่วยท่ีเก่ียวกับการใช้งาน layout) เราสามารถดูโครงสร้างท่ีว่านี้จากโค้ดได้โดยการคลิกท่ีแท็บ Text ด้านล่าง



รูปท่ี 2.10 ดูโค้ด layout

จากรูปท่ี 1.10 เราจะเห็นว่า RelativeLayout จะครอบคลุม TextView อีกท่ีหนึ่งหรือเรียก TextView ว่าเป็น อิลิ เ มนต์ ลู ก (child element) ของ RelativeLayout ถ้ า เ ร าต้ อ งการดู โ ค้ดจาวา เ ร าส ามารถ เปิ ด MainActivity.java ข้ึนมาดูได้ซึ่งโค้ดการทํางานของแอคทิวิตีจะถูกควบคุมด้วยคําสั่งต่าง ๆ ท่ีเขียนอยู่ในรูปแบบของภาษาจาวา

3. สร้างและรันเคร่ืองแอนดรอยด์จําลอง

ในการพัฒนาแอพพลิเคชันแอนดรอยด์นั้น นักพัฒนาไม่จําเป็นจะต้องมีเครื่องแอนดรอยด์จริงเพ่ือใช้ในการทดสอบการทํางานของแอพพลิเคชัน เนื่องจาก Android SDK ได้เตรียมเครื่องแอนดรอยด์จําลอง (Android Virtual Device – AVD) หรือเรียกอีกอย่างว่า อีมูเลเตอร์ (emulator) มาให้อยู่แล้วมันคือโปรแกรมท่ีจําลองการทํางานของเครื่องแอนดรอยด์จริงข้ึนมาในคอมพิวเตอร์ของเรา สามารถเลือกเวอร์ชันแอนดรอยด์ท่ีเราต้องการทดสอบบน AVD ได้รวมไปถึงการเลือกคุณสมบัติอ่ืน ๆ อย่างเช่นขนาดหน้าจอ ความจุของ SD card เป็นต้น แต่การเลือกใช้อีมูเลเตอร์ AVD นี้อาจจะมีปัญหาทางด้านการทํางานท่ีช้านิดหน่อย แต่ถ้าเราต้องการความเร็วในขณะรันแอพพลิชัน เราสามารถติดตั้งเครื่องจําลองทางเลือกอ่ืนบนโปรแกรม Virtual Box ก่อนแล้วติดตั้ง Plugin เข้ามาอีกท่ีหนึ่งจะทําให้ความเร็วข้ึนตัวอย่างเช่น Genymotion

การจัดการ AVD เช่น สร้าง AVD ตัวใหม่หรือแก้ไขคุณสมบัติของ AVD ท่ีสร้างไว้แล้ว นักพัฒนาสามารถใช้เครื่องมืออีกตัวหนึ่งใน Android SDK คือ AVD Manager โดยสามารถรันโปรแกรมดังกล่าวได้โดย

ไปท่ี Tools > Android > AVD Manager หรือคลิกปุ่ม AVD Manager โปรแกรม AVD Manager จะเปิดข้ึนมา



รูปท่ี 2.11 AVD Manager

จะมีเครื่องจําลองท่ี AVD Manager สร้างมาให้ 1 รายการซึ่งเป็นเครื่อง Nexus 5 ท่ีรันแอนดรอยด์ 5.0 Lollipop (API level 21) แต่ถ้าไม่มีเครื่องจําลองมาให้เราสามารถสร้างใหม่ได้ โดยเราสามารถเลือกแอนดรอยด์เวอร์ชัน ได้ตามต้องการหากเครื่องคอมพิวเตอร์เป็นเครื่องท่ีมีทรัพยากรน้อยอย่างเช่น RAM น้อยกว่า 4 GB จะทําให้การทํางานไม่ค่อยจะดีเท่าไรนัก อาจจะช้า หรือเกิดปัญหา crash บ่อยแนะนําให้นักพัฒนาควรเปลี่ยนไปเป็นรุ่น API ท่ีต่ํากว่าก็ได ้

3.1 สร้าง AVD ใหม่

1. คลิกปุ่ม Create Virtual Device จะปรากฏวินโดว์ Virtual Device Configuration

รูปท่ี 2.12 Virtual Device Configuration

2. ให้นักพัฒนาเลือกอุปกรณ์ท่ีเราต้องการจะใช้ทดสอบแอพพลิเคชัน ในตัวอย่างนี้ให้เลือก Nexus 5 จากนั้นก็คลิกปุ่ม Next



รูปท่ี 2.13 Virtual Device Configuration

3. ให้นักพัฒนาเลือก System image (ระบบแอนดรอยด์ของเครื่องจําลอง) ท่ีเป็นเวอร์ชันใดและทํางานกับ CPU แบบใดของเครื่องจําลอง System Image ตัวไหนท่ีเลือกได้แสดงว่าเราดาวน์โหลดมาแล้วด้วยโปรแกรม Android SDK Manager ถ้าอันไหนท่ียังไม่ได้ดาวน์โหลดจะมีลิงค์ให้เราคลิกดาวน์โหลดได้ทันที รอจนดาวน์โหลดเสร็จ

รูปท่ี 2.14 Download System Image

ก็จะกลับมายังหน้าจอท่ีให้เลือก System image อีกรอบในตัวอย่างนี้เราเลือก ตามรูปท่ี 2.15 แล้วคลิกปุ่ม Next



รูปท่ี 2.15 เลือก System Image

4. จะแสดงหน้าจอสรุปคุณสมบัติ AVD ตามท่ีกําหนด สําหรับตัวเลือกในส่วนของ Emulator Performance ให้ตามค่าดีฟอลต ์ความหมายแต่ละตัวเลือก

รูปท่ี 2.16 คุณสมบัติ AVD

• Use Host GPU เพ่ิมความเร็วในการแสดงผลของ AVD ประมวลผลกราฟิกบนหน้าจอโดยใช้ชิพประมวลผลกราฟิกหรือ GPU (Graphics Processing Unit) จริง ๆ ของเครื่องคอมพิวเตอร์แทนการใช้ GPU ของเครื่องจําลอง แต่อาจจะพบปัญหาในบางเครื่องหากพบปัญหาควรยกเลิกตัวนี้ไป

• Store a snapshot for faster startup เพ่ิมความเร็วในการบูต AVD ด้วยการบันทึกสถานะของ RAM ตอนบูตเสร็จแล้วเก็บไว้ แล้วนําสถานะนั้นมาใช้เม่ือคุณรัน AVD ในครั้งต่อไป ทําให้ไม่ต้องรันกระบวนการบูตใหม่ทุกครั้ง

ส่วนคุณสมบัติอ่ืน ๆ เราสามารถปรับเปลี่ยนได้ จากนั้นให้คลิกปุ่ม Finish เพ่ือสร้าง AVD



3.2 รัน AVD

ด้วยการคลิกท่ีเครื่องหมาย ในคอลัมน์ Action ของตัว AVD ท่ีต้องการ

รูปท่ี 2.17 รัน AVD

การรันอาจใช้เวลานิดหน่อยซึ่งความเร็วอาจข้ึนกับความเร็วของคอมพิวเตอร์ท่ีเราใช้งานด้วย เพราะว่าการรัน AVD นั้นเทียบได้กับการบูตเครื่องแอนดรอยด์จริง ๆ AVD เป็นซอฟต์แวร์จําลองจึงช้ากว่าเครื่องจริงมาก เม่ือรันเสร็จแล้ว AVD จะแยกวินโดว์ออกมาจากวินโดว์ Android Studio และมีปุ่มของตัวเองบนทาสก์บาร์ ในระหว่างการพัฒนาแอพพลิเคชันให้เราเปิด AVD ค้างไว้เลย เพราะเม่ือเรารันแอพพลิเคชัน Android Studio จะส่งมารันท่ี AVD ท่ีทํางานอยู่ จะช่วยในเรื่องความเร็วในการรัน

รูปท่ี 2.18 แอนดรอยด์ท่ีรันเรียบร้อย



4. การรันแอพพลิเคชันบนเคร่ืองจําลอง

หลังจากท่ีนักพัฒนาแอพพลิเคชันได้ทําการโค้ดโปรแกรมแล้วเราก็สามารถทดสอบการรันได้โดยการส่งไปทดสอบบนเครื่องจําลองได ้

1. ที Android Studio ให้เราเลือกท่ีโฟลเดอร์ app ในวินโดว์ Project แล้วก็เลือกวิธีใดวิธีหนึ่ง

• คลิกเมนู Run > Run ‘app’

• คลิกปุ่ม Run ‘app’ บนทูลบาร ์• กดคีย์ Shift + F10

จะปรากฏไดอะล็อก Choose Device ท่ีให้เลือกว่าจะให้แอพพลิเคชันรันบนอุปกรณ์ตัวใด ในท่ีนี้ก็จะเป็นตัวเดียวกับท่ีเราได้รันไว้แล้ว

รูปท่ี 2.19 Choose Device

ถ้าหน้าต่าง choose device ไม่ปรากฏก็อาจจะมาจากการท่ีเราไม่ได้รัน AVD เอาไว้

2. คลิกเลือกอุปกรณ์จาก AVD แล้วคลิกปุ่ม OK เพ่ือจะส่งแอพพลิเคชันไปติดตั้งและรันบน AVD ถ้าเราต้องการให้แอพพลิเคชันส่งไปรันกับอุปกรณ์ตัวท่ีเลือกนี้อีกในครั้งต่อ ๆ สามารถเลือกตรง Use same device for future launches โดยจะไม่มีการถามให้เลือกอีก Android Studio ก็จะมีหน้าต่างแจ้งผลการรันมาให้หากมีข้อผิดพลาดหรือปัญหาก็จะบอกความน่าจะเป็นให้ทราบว่าเกิดจากอะไร

รูปท่ี 2.20 แจ้งผลการรัน



3. หากไม่มีข้อผิดพลาดใด ๆ เราก็ไปท่ี AVD จะปรากฏแอพพลิเคชันตัวท่ีเรารันเม่ือสักครู่นี้ข้ึนมาให ้

รูปท่ี 2.21 ผลการรันท่ี AVD

4. กลับไปท่ี Home screen แล้วคลิกท่ีปุ่ม เพ่ือจะเข้าไปยัง app drawer ท่ีรวบรวมไอคอนของแอพท้ังหมดไว้ เราจะเห็นว่ามีไอคอนของแอพพลิเคชัน Hello world อยู่ในนี้ด้วย ซึ่งก็เป็นการยืนยันแล้วแอพพลิเคชันของเราได้ติดตั้งลงไปเรียบร้อยแล้ว นักพัฒนาสามารถคลิกท่ีไอคอนนั้นเพ่ือรันแอพพลิเคชันอีกครั้งได้ แต่ถ้าหากเรามีการแก้ไขแอพพลิเคชันอีก เราจะต้องทําการส่งแอพพลิเคชันตัวนั้นมาติดตั้งใหม่และรันอีกครั้งเป็นเช่นนี้ไปเรือ่ย ๆ จนกว่านักพัฒนาจะพัฒนาแอพพลิเคชันสมบูรณ์ท่ีสุด

รูปท่ี 2.22 แสดงการติดตั้งแอพพลิเคชัน



5. ปุ่มคีย์ลัด (Shortcuts) สําหรับ AVD

ในการใช้งานโปรแกรมอีมูเลเตอร์นั้นเราสามารถใช้งานปุ่มคีย์ลัดได้จากทางแป้นพิมพ์

ปุ่ม ความหมาย ปุ่ม ความหมาย Home ปุ่ม Home ไปยังหน้า Home Screen Ctrl + F5 เพ่ิมเสียง (Volume up) Esc ปุ่ม Back ย้อนกลับไปยังหน้าจอก่อน

หน้านี ้Ctrl + F6 ลดเสียง (Volume down)

F2 ห รื อ PgUp

เปิดเมนูของแอพพลิเคชัน Ctrl + F11 หมุนหน้าจอ

F7 ปุ่ม Power ตารางท่ี 2.1 Shortcuts AVD

6. ลบแอพพลิเคชันออกจากเคร่ืองจําลอง

หลังจากท่ีได้ทําการติดตั้งแอพพลิเคชันลงไปบนเครื่องจําลองแล้ว หากเราต้องการจะลบออกก็สามารถทําได้เหมือนกับการลบแอพพลิเคชันออกจากเครื่องจริงทุกประการ

1. ไปยังเมนู Setting จากนั้นให้คลิกท่ี Setting หลังจากนั้นจะปรากฏหน้าจอการตั้งค่าของระบบแอนดรอยด ์

รูปท่ี 2.23 หน้าจอ Apps

2. ให้เลือนหน้าจอการตั้งค่าระบบในส่วนของ Device จากนั้นให้เลือนไปยัง Apps และคลิกท่ี Apps



รูปท่ี 2.24 หน้าจอ Apps ท่ีแสดง Hello World

3. เลือนหาแอพพลิเคชันท่ีชื่อ Hello World แล้วให้คลิกท่ี Hello World แล้วจะเข้าสู่หน้าต่าง App Info

รูปท่ี 2.25 หน้าจอ App Info

4. คลิก UNINSTALL จะมีหน้าจอยืนยัน จากให้เลือก OK เพือจะทําการลบแอพพลิเคชันออกจากเครื่องจําลอง

รูปท่ี 2.26 หน้าจอยืนยันการลบ



7. รันแอพพลิเคชันบนเคร่ืองจริง

หากนักพัฒนามีเครื่องแอนดรอยด์จริง เราสามารถส่งแอพพลิเคชันไปรันบนอุปกรณ์จริงนั้นได้ ซึ่งจะมีข้ันตอนต่าง ๆ ท่ีนักพัฒนาต้องทําดังต่อไปนี ้

1.อนุญาตให้ติดตั้งแอพพลิเคชันท่ีไม่ได้มาจาก Google Play Store นักพัฒนาต้องทําการกําหนดค่าให้แอนดรอยด์ให้ยอมรับการติดตั้งแอพพลิเคชันท่ีมาจากแหล่งอ่ืนท่ีไม่ใช่ Google Play Store โดยไปท่ี Setting > Security (สําหรับแอนดรอยด์ 3.2 หรือต่ํากว่าให้ไปท่ี Setting > Applications) แล้วทําการเช็คเครื่องหมายถูกหรือเปิดท่ีหัวข้อ (อาจจะมี UI ท่ีแตกต่างกันออกไป) Unknown source หากเครื่องแอนดรอยด์ใดใช้เมนูภาษาไทยอาจจะเป็น แหล่งท่ีไม่รู้จัก

รูปท่ี 2.27 หน้าจอกําหนด Unknown source

2. เปิดให้คุณสมบัติ USB Debugging นักพัฒนาจะต้องเปิดการใช้คุณสมบัติ USB Debugging บนอุปกรณ์แอนดรอยด์จริง โดยไปท่ี Setting > Application > Developer options (สําหรับ Android 3.2 หรือต่ํากว่าให้ไปท่ี Setting > Application > Development) แล้วเช็คเครื่องหมายถูกหรือเปิดท่ีหัวข้อ (อาจจะมี UI ท่ีแตกต่างกันออกไป) USB debugging หากเครื่องแอนดรอยด์ใดใช้เมนูภาษาไทยอาจจะเป็น การแก้ไขจุดบกพร่อง USB



รูปท่ี 2.28 หน้าจอกําหนด USB Debugging

3. ติดตั้ง USB Driver คือไดรเวอร์ท่ีช่วยให้โปรแกรม ADB (Android Debug Bridge) มองเห็นและเข้าถึงอุปกรณ์แอนดรอยด์ผ่านสาย USB ได้ ซึ่งโปรแกรม ADB เป็นโปรแกรมท่ีเป็นตัวกลางระหว่างเครื่องแอนดรอยด์ท้ังท่ีเป็นเครื่องจริงหรือเครื่องจําลอง กับเครื่องพีซีท่ีนักพัฒนาใช้ในการพัฒนาแอพพลิเคชัน ซึ่งโปรแกรมนี้จะมีมาพร้อมกับ Android SDK สําหรับเครื่องจําลองนั้น ADB สามารถเข้าถึงได้อยู่แล้วแต่หากเป็นเครื่องแอนดรอยด์จริงเราจะต้องติดตั้งไดร์เวอร์ท่ีถูกต้องเหมาะสมจึงจะสามารถเข้าถึงเครื่องแอนดรอยด์จริงได ้

สําหรับแอนด์ตระกูล Nexus ท่ีกูเกิลเป็นผู้พัฒนาเองนั้นให้นักพัฒนาใช้ USB Driver ท่ีรวมอยู่ใน Android SDK ท่ีเรียกว่า Google USB Driver นักพัฒนาสามารถอัพเดทตัวใหม่ล่าสุดได้จาก Google หรือผ่านทาง Android SDK Manager ซึ่งจะทําให้เราสะดวกยิ่งข้ึนเม่ือมีรุ่นใหม่ ๆ ออกมาแล้ว Android SDK Manager จะแจ้งให้เราทราบ

4. ข้ันตอนในการติดตั้ง USB Driver ผ่านทาง Android SDK Manager

• ไปท่ีเมนู Tools > Android > SDK Manager

• เลือนลงไปยังหัวข้อ Extras จากนั้นให้ดูท่ีสถานะ Google USB Driver ว่าได้ถูกติดตั้งลงบนเครื่องคอมพิวเตอร์หรือยัง

• ถ้ายังไม่มีการติดตั้งให้นักพัฒนาเลือก (ทําเครื่องหมายถูก) จากนั้นคลิก Install แล้ว SDK Manager จะทําการดาวน์โหลดไดร์เวอร์มาไว้ท่ีเครื่องคอมพิวเตอร์เราเท่านั้น

• ให้นําเครื่องแอนดรอยด์จริงมาเชือมต่อกับเครื่องคอมพิวเตอร์ผ่านสาย USB เสร็จแล้วให้ไปท่ี Control Panel แล้วเปิดโปรแกรม Device Manager เราจะมองเห็นอุปกรณ์แอนดรอยด์ตัวจริงในหัวข้อ Other devices



• ให้เลือกอุปกรณ์ตัวท่ีต้องการแล้วเลือกคําสั่ง Update Driver Software จากนั้นให้เรา Browse my computer for driver software โดยให้ไปยัง path ท่ีเก็บไดร์เวอร์ไว้ซึ่งถ้าเป็นของ Google USB Driver ก็จะอยู่ท่ี <sdk>\extras\google\usb_driver

• ให้ทําการติดตั้งไปจนเสร็จสมบูรณ์

• เปิดโปรแกรม ADB ข้ึนมาและให้แสดงรายการอุปกรณ์แอนดรอยด์ท่ีต่อเชื่อมอยู่ออกมาโดยไปยังสถานท่ีติดตั้ง Android SDK

cd <sdk>\platform-tools

• พิมพ์คําสั่ง adb devices

adb จะแสดงเครื่องจริงและเครื่องจําลองออกมาให้ท้ังหมด

รูปท่ี 2.29 แสดงรายการอุปกรณ์แอนดรอยด์

• ถ้าหากสถานะของอุปกรณ์เป็น offline หรือ unauthorized ถ้า มีหน้าจอถาม Allow USB debugging ให้เราคลิกเลือก Always allow from this computer แล้วคลิก OK

• พิมพ์คําสั่ง adb devices อีกครั้งหากยังไม่แสดงรายการออกมาให้พิมพ์คําสั่งต่อไปนี ้adb kill-server

adb start-server

จากนั้นพิมพ์คําสั่ง adb devices อีกรอบ

5. สั่งรันแอพพลิเคชันไปยังเครื่องจริงเม่ือเราได้เชื่อมต่ออุปกรณ์จริงเข้ากับคอมพิวเตอร์แล้ว เราสั่งรันแอพพลิเคชันจะปรากฏไดอะล็อก Choose Device โดยมีชื่ออุปกรณ์แอนดรอยด์จริงให้เราเลือก จากนั้นก็คลิก OK เพ่ือทําการติดตั้งและรันบนอุปกรณ์จริงดังกล่าว

8. การแก้ปัญหาหน้าจออีมูเลเตอร์จอใหญ่เกินไป

กรณีท่ีเราเปิดตัวอีมูเลเตอร์แล้วจอใหญ่เกินไปสามารถแก้ได้โดยการสั่งคําสั่งผ่านโปรแกรม Telnet จะมีข้ันตอนดําเนินดังต่อไปนี ้

1. ไปยัง Control Panel > Programs



รูปท่ี 2.30 Control Panel Programs

2. คลิกเมนู Turn windows features on or off

รูปท่ี 2.31 Turn windows features on or off

3. เปิด Feature Telnet Client และ Telnet Server

รูปท่ี 2.32 Telnet Feature



4. เปิดโปรแกรม Command Line (Dos box) แล้วใช้โปรแกรม Telnet ไปยัง localhost และพอร์ตท่ีอีมูเลเตอร์แสดงอยู่

รูปท่ี 2.33 Telnet localhost

5. ใช้คําสั่ง set หน้าจอด้วยคําสั่ง window scale 0.2 ในท่ีนี้ 0.2 คือขนาดหน้าจอท่ีต้องการ

รูปท่ี 2.34 set window scale

ใบงานท้ายหน่วย

1. ให้อธิบายว่าการพัฒนาแอพพลิเคชันบนอุปกรณ์เคลื่อนท่ีแอนดรอยด์นั้นในโปรเจ็คจะประกอบไปด้วยสภาพแวดล้อมอะไรบ้างทําหน้าท่ีอะไร

2. ให้พัฒนาแอพพลิเคชันท่ีประกอบไปด้วยกล่องข้อความสองกล่อง และปุ่มหนึ่งปุ่ม โดยมีการทํางาน

ดังนี้ กล่องข้อความท่ี 1 ให้แสดงข้อความ what your name ?



กลอ่งข้อความท่ี 2 ให้แสดงข้อความ my name is xxxx? (xxxx = ชื่อของนักศึกษาเอง) ปุ่มให้ Click me!

3. ให้รันแอพพลิเคชันท่ีพัฒนาเสร็จแล้วไปยังอีมูเลเตอร์แล้วแสดงผลหลังจากตรวจความถูกต้องเสร็จ ให้ทําการลบแอพพลิเคชันนั้นออกจากเครื่องจําลอง



เอกสารอ้างอิง

พร้อมเลิศ หล่อวิจิตร. (2558). คู่มือการเขียนแอพ Android ด้วย Android Studio. โปรวิชั่น : กรุงเทพฯ. จักรชัย โสอินทร,์ พงษ์ศธร จันทร์ยอย, และณัฐณิชา วีระมงคลเลิศ. (2555). Android App

Development ฉบับสมบูรณ.์ ไอดีซี พรีเมียร์ : นนทบุรี. จักรชัย โสอินทร,์ พงษ์ศธร จันทร์ยอย, และณัฐณิชา วีระมงคลเลิศ. (2555). Android App

Development อย่างมืออาชีพ. ไอดีซี พรีเมียร์ : นนทบุรี.

2 ˘ˇˆ˙ Android Studio - · PDF file02-08-2015 · Welcome to Android...

Documents

Transcript of 2 ˘ˇˆ˙ Android Studio - · PDF file02-08-2015 · Welcome to Android...