บทแนะนำสำหรับนักพัฒนา Google Glass ที่ต้องการ: การสร้างแอป Glass ตัวแรกของคุณ

Google Glass เป็นเทคโนโลยีแห่งอนาคตที่สัญญาว่าจะปฏิวัติวิธีที่เราใช้อุปกรณ์ของเราในการโต้ตอบกับโลก แต่จากมุมมองของนักพัฒนา การพัฒนากระจกมีความพิเศษอย่างไร? คำตอบคือ "ไม่มีอะไร!" จากมุมมองของนักพัฒนา Android ที่มีประสบการณ์ Google Glass เป็นเพียงอุปกรณ์ Android อีกเครื่องหนึ่งที่มีหน้าจอขนาดเล็กมากและคุณสมบัติที่จำกัด!

ความจริงที่ว่าทุกคนที่มีความรู้ด้านการพัฒนา Android สามารถเป็นสมาชิกของชุมชน "ชนชั้นสูง" ของผู้ประกาศข่าวประเสริฐด้านเทคโนโลยีสวมใส่ได้นั้นเป็นส่วนหนึ่งของสิ่งที่ทำให้ Google Glass ยอดเยี่ยมมาก แน่นอนว่า คุณจะต้องเรียนรู้สิ่งใหม่ๆ สองสามอย่าง เช่น ความแตกต่างระหว่าง "Immersion" และ "Active Card" แต่อย่างที่คุณเห็น เส้นโค้งการเรียนรู้ไม่ได้สูงชัน

จุดประสงค์ของบทช่วยสอน Google Glass นี้คือการวางรากฐานสำหรับการพัฒนาแอปพลิเคชัน Glass ใดๆ ผ่านการสร้างแอปง่ายๆ ซึ่งครอบคลุมขั้นตอนทั่วไปทั้งหมด เป้าหมายของฉันคือการช่วยคุณประหยัดเวลาในการวิจัยและการลองผิดลองถูก และช่วยให้คุณสามารถเรียกใช้แอปพลิเคชัน Glass ตัวแรกของคุณได้โดยเร็วที่สุด

ในบทช่วยสอนนี้ อันดับแรก เราจะพูดถึงวิธีตั้งค่าสภาพแวดล้อมการพัฒนาและเชื่อมต่อ Google Glass กับคอมพิวเตอร์ของคุณ จากนั้นเราจะสร้างแอป "Hello World" Glass แบบง่ายๆ ซึ่งจะรวมคำสั่งเสียงที่กำหนดเองและการรวมเข้ากับเมนูเริ่มต้นของ Glass เมื่อคุณพัฒนาแอปพลิเคชันแรกและทำงานบน Glass คุณจะได้เรียนรู้พื้นฐานของการนำทางในแอปพลิเคชัน Glass เมนูที่เปิดใช้งานด้วยเสียง และการสร้างเนื้อหาแบบไดนามิก

วิธีการขึ้นเครื่อง

Glass ยังอยู่ในช่วง "การทดสอบเบต้า" ซึ่ง Google ได้คิดค้นคำว่า "Explorer Program" ไม่ว่าคุณจะเรียกมันว่า Glass ยังไม่ใช่สิ่งที่คุณจะหาซื้อได้ในร้านเหมือนสมาร์ทโฟน น่าเสียดายที่เครื่องมือพัฒนา Android ยังไม่มีอีมูเลเตอร์ที่คุณสามารถใช้เพื่อพัฒนาแอปพลิเคชันของคุณโดยไม่ต้องใช้ฮาร์ดแวร์จริง

ดังนั้น ในการเรียกใช้และดีบักแอปพลิเคชันของคุณ คุณจะต้องใช้ Google Glass จริงผ่านโปรแกรม Explorer หากต้องการเข้าร่วมโปรแกรม ให้ไปที่หน้าลงทะเบียนและลงทะเบียนเพื่อเข้าใช้งาน เมื่อได้รับการอนุมัติแล้ว ให้เตรียมบัตรเครดิตของคุณและรอการจัดส่งแก้วของคุณ ปัจจุบัน Glass รุ่น Explorer มีราคา 1,500 เหรียญสหรัฐ แต่คาดว่าราคาจะลดลงอย่างมากก่อนที่อุปกรณ์จะวางจำหน่าย

สำหรับคนไร้กระจก

เนื่องจากไม่มีอีมูเลเตอร์ คุณจำเป็นต้องมีฮาร์ดแวร์ Google Glass จริงเพื่อพัฒนาแอปในบทช่วยสอนนี้ (หรือแอป Glass ใดๆ ก็ตาม) แต่ถ้าได้อันหนึ่งเกินงบประมาณของคุณ อย่าท้อแท้ - มัน ก็น่าติดตามอยู่ดี สิ่งที่จะชัดเจนในบทช่วยสอนคือการพัฒนาสำหรับ Glass เกือบจะเหมือนกับการพัฒนาสำหรับแพลตฟอร์ม Android อื่นๆ

หากคุณยังไม่ได้ใช้ Google Glass แต่รู้สึกตื่นเต้นกับมันเหมือนที่ฉันเป็น ให้ดูวิดีโอทั้งสองนี้ เนื่องจากวิดีโอเหล่านี้ควรให้ข้อมูลที่เพียงพอแก่คุณเพื่อทำความเข้าใจพื้นฐานของอินเทอร์เฟซผู้ใช้

• ข้อมูลเบื้องต้นเกี่ยวกับ Google Glass
• วิธีใช้งาน Google Glass: เริ่มต้นใช้งาน

มีวิดีโอที่มีประโยชน์มากกว่าสำหรับการตั้งค่าและการนำทางที่นี่ และรายละเอียดเพิ่มเติมมากมายเกี่ยวกับอินเทอร์เฟซผู้ใช้ที่นี่

กฎของการมีส่วนร่วม

บทช่วยสอนของนักพัฒนา Google Glass นี้ตั้งสมมติฐานดังต่อไปนี้:

• ฉันคิดว่าคุณเข้าใจพื้นฐานของการนำทางและการตั้งค่าของ Glass หากคุณไม่เคยใช้ Glass ให้ดูวิดีโอที่ลิงก์ด้านบนนี้
• ฉันคิดว่าคุณเข้าใจพื้นฐานของการพัฒนา Android: โครงสร้างของไฟล์โครงการ การกำหนดค่าแอปพลิเคชัน Android ฯลฯ
• ฉันจะใช้ Android Studio แต่คำแนะนำควรแปลเป็นเกือบทุกสภาพแวดล้อมการพัฒนา Android Android Studio ยังอยู่ใน "เบต้า" แต่ Glass ก็เช่นกัน อย่ากลัวที่จะเริ่มใช้มัน - เป็นผลิตภัณฑ์ที่ยอดเยี่ยมจริงๆ Android Studio สามารถดาวน์โหลดได้ที่นี่

การตั้งค่า Google Glass ของคุณ

เอาล่ะ มาเริ่มกันเลย!

สิ่งแรกที่คุณต้องทำคือเปิดใช้งานโหมดแก้ไขข้อบกพร่องบน Glass ของคุณ คุณต้องทำสิ่งนี้บนอุปกรณ์ Android ทุกเครื่องที่คุณใช้สำหรับการพัฒนาแอพของคุณ ดังนั้นสิ่งนี้อาจคุ้นเคย หากต้องการเปิดใช้งานการดีบัก ให้ปัดไปที่ " การตั้งค่า " -> " ข้อมูลอุปกรณ์ " จากนั้นแตะเพื่อเปิดเมนูอุปกรณ์ เลือก " เปิดการตรวจแก้จุดบกพร่อง " และมันจะเปิดใช้งาน

ถัดไป คุณต้องเตรียมสภาพแวดล้อมการพัฒนาให้พร้อม Google Glass เวอร์ชันปัจจุบันกำหนดให้คุณใช้ API เวอร์ชัน 19 ดังนั้นตรวจสอบให้แน่ใจว่าได้ติดตั้งไว้ นอกจากนี้ คุณต้องติดตั้ง Glass Development Kit ของคุณ ใช้ Android SDK Manager เพื่อติดตั้งสองแพ็คเกจนี้ หากคุณยังไม่ได้ดำเนินการ

สวัสดีชาวโลก!

มาทำ “เครื่องแก้ว” ชิ้นแรกกัน (ใช่ Google ได้กำหนดคำศัพท์ใหม่แล้ว! “Glassware” เป็นชื่อสำหรับแอปพลิเคชันใดๆ ที่ทำงานบน Google Glass) เราจะเริ่มต้นด้วยการพัฒนา "สวัสดีชาวโลก!" ที่ดี แอปพลิเคชัน. เช่นเดียวกับสภาพแวดล้อมการพัฒนา Android หลักๆ ส่วนใหญ่ Android Studio จะเติมแอปใหม่โดยอัตโนมัติด้วยเทมเพลตเพื่อแสดงวลีที่มีชื่อเสียงนี้ ส่งผลให้ได้รับ “Hello World!” การเริ่มต้นใช้งานเป็นเพียงแบบฝึกหัดในการปรับใช้แอพพื้นฐาน

ใน Android Studio คลิก " โครงการใหม่ " และกรอกแบบฟอร์มโครงการ คุณสามารถใช้สิ่งที่คล้ายกันนี้:

เมื่อเลือกฟอร์มแฟคเตอร์และ API อย่าลืมเลือก “ Glass ” และ API 19

เลือก “ Immersion Activity ” เป็นกิจกรรมเริ่มต้นของคุณ

คุณจำที่ฉันกล่าวว่าคุณจะต้องเรียนรู้ความแตกต่างระหว่าง Immersion และ Live Card? บทความส่วนต่อประสานผู้ใช้ของ Google อธิบายหน้าจอแก้วประเภทต่างๆ ข้อมูลสรุปโดยย่อมีดังนี้

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

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

ในหน้าจอถัดไปของวิซาร์ด ให้ปล่อยค่าเริ่มต้นไว้สำหรับ " Name " และ " Title " แล้วคลิก " Finish "

หลังจากที่ Gradle ดูแลการพึ่งพาของคุณและเตรียมโครงการของคุณให้พร้อม ก็ถึงเวลาเสียบปลั๊ก Glass ของคุณ นี่คือการพัฒนาแห่งอนาคต!

สมมติว่าไดรเวอร์ ADB ของ Android ทั้งหมดมีอยู่แล้ว และระบบรู้จัก Glass ของคุณ คุณควรทำให้ Glass อยู่ในรายการอุปกรณ์ของคุณ

หากนี่เป็นครั้งแรกที่คุณเชื่อมต่ออุปกรณ์กับคอมพิวเตอร์ Glass ของคุณจะขออนุญาต/สร้างความน่าเชื่อถือ เพียงแตะกระจกของคุณเพื่อเชื่อมต่อ คุณก็พร้อมแล้ว

คลิก " เรียกใช้ " และปรับใช้ "APK เริ่มต้น" ของคุณด้วย "กิจกรรมหลัก" เป็นกิจกรรมเริ่มต้นสำหรับการเปิดใช้งานบนอุปกรณ์ "USB"

หลังจากนั้นไม่กี่วินาที คุณควรเห็นสิ่งนี้บนหน้าจอ Glass ของคุณ:

เย่! แอปพลิเคชันของคุณทำงานบน Glass! และสิ่งที่คุณต้องทำคือกรอกค่าเริ่มต้นบางส่วนเมื่อคุณสร้างแอป!

เนื่องจากเราไม่ได้ระบุให้แตกต่างกัน Glass จะแสดงแอปของคุณภายใต้ชื่อ “แสดงการสาธิต” หากคุณปัดกลับไปที่หน้าจอเริ่มแล้วแตะเพื่อเปิดเมนูแอพ คุณจะเห็นรายการดังนี้:

ลิตเติ้ลโปแลนด์

โอเค คุณเริ่มใช้งานได้แล้ว แต่นี่ไม่ใช่แอปพลิเคชัน Glass จริงๆ และคุณไม่ต้องการให้แอปพลิเคชันนั้นเริ่มทำงานโดย "แสดงการสาธิต"

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

การตั้งค่าธีม

อันดับแรก คุณคงไม่อยากเปิดหน้าจอแก้วเล็กๆ ของคุณด้วยแถบชื่อกิจกรรม “Hello World Immersion” ที่น่าเกลียด และคุณไม่ต้องการให้หน้าจอเป็นสีเทาด้วยแบบอักษรสีดำ ในการแก้ไขปัญหานี้ เราเพียงแค่เปลี่ยนธีมบน Android และให้ Glass OS ดูแล

เปิด res/values/styles.xml เพื่อแก้ไข ควรมีเนื้อหาดังนี้

 <?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="android:Theme.Holo.Light"> </style> </resources>

เพียงเปลี่ยน android:Theme.Holo.Light เป็น android:Theme.DeviceDefault การดำเนินการนี้ควรดูแลเลย์เอาต์และสีของแอปพลิเคชันโดยอัตโนมัติโดยใช้ธีมเริ่มต้นของ Glass

การกำหนดลักษณะที่ปรากฏของเมนู

ตกลง สิ่งต่อไปที่เราต้องการทำในบทช่วยสอนการพัฒนา Glass นี้คือการตั้งค่าแอปพลิเคชันของเราให้มีชื่อที่เหมาะสมและการเริ่มต้นที่ควบคุมด้วยเสียงที่ดี เปิด Android Manifest ( AndroidManifest.xml ) และเพิ่มแท็ก <application… ต่อไปนี้:

 <uses-permission android:name="com.google.android.glass.permission.DEVELOPMENT" />

เหตุผลที่คุณต้องการใช้สิทธิ์ DEVELOPMENT คือเพื่อให้คุณสามารถเล่นกับการควบคุมด้วยเสียงที่กำหนดเองได้ Google ค่อนข้างเข้มงวดเกี่ยวกับคำสั่งเสียงที่อนุญาตในแอป Glass ที่ได้รับอนุมัติ และคำสั่งใหม่ทั้งหมดจะต้องได้รับการอนุมัติ เนื่องจากบทช่วยสอนนี้มีขึ้นเพื่อการเรียนรู้และคุณจะไม่ส่งแอปพลิเคชันนี้ไปยังร้านเครื่องแก้วอย่างเป็นทางการ คุณไม่ควรกังวลเรื่องนี้ เพียงเปิดการอนุญาต DEVELOPMENT แล้วคุณจะสามารถเข้าถึง "คำสั่งเสียงที่ไม่อยู่ในรายการ" สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ โปรดอ่านหน้า GDK นี้

เปิด voice_trigger.xml เพื่อแก้ไข นี่คือที่ที่คำสั่งเสียงเพื่อเริ่มแอปพลิเคชันของคุณถูกกำหนดไว้ ควรอยู่ในโฟลเดอร์ res/xml/ คุณควรได้รับเนื้อหาที่คล้ายกับสิ่งนี้:

 <trigger command="SHOW_ME_A_DEMO" />

แทนที่จะพูดว่า "แสดงตัวอย่าง" เพื่อเริ่มแอปของเรา ให้พูดชื่อแอปแทน เปลี่ยนเนื้อหาของไฟล์เป็น:

 <trigger keyword="@string/app_name" />

หากคุณกลับไปที่ไฟล์ Manifest คุณอาจสังเกตเห็นว่า android:label="@string/app_name" ของคุณได้รับการอัปเดตโดยอัตโนมัติเพื่อใช้สตริงทรัพยากร @string/app_name แทนค่า Hello Glass แบบฮาร์ดโค้ดเหมือนเมื่อก่อน . หากการตั้งค่านี้ไม่ได้รับการอัปเดต อย่าลืมตั้งค่าเป็น android:label="@string/app_name"

และชื่อแอปของคุณคืออะไรกันแน่? หากคุณเปิด res/values/strings.xml app_name ของคุณควรแสดงเป็น:

 <string name="app_name">Hello Glass</string>

สิ่งนี้ควรสรุปสิ่งต่าง ๆ สำหรับแอปพลิเคชัน Hello Glass ครั้งแรกของคุณ มาดูกันว่ามันทำงานอย่างไรตอนนี้!

จากหน้าจอเริ่ม คุณสามารถพูดว่า "ตกลง แก้ว" เพื่อเปิดเมนูเสียง แอปพลิเคชันของคุณอยู่ในรายการคำสั่งที่สั่งงานด้วยเสียง

ด้วยบทช่วยสอนนี้ที่จะแนะนำคุณ นี่คือลักษณะที่หน้าจอเริ่มต้นของแอพ Glass ของคุณตอนนี้

หากคุณพูดว่า " สวัสดีแก้ว " แอปพลิเคชันของคุณควรเริ่มต้นและคุณควรได้รับประสบการณ์ Glass ที่ได้มาตรฐาน:

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

เสียงหรือสัมผัส? ใช้ทั้งสองอย่าง!

เป็นสิ่งสำคัญมากที่คุณจะต้องใส่ใจกับอินเทอร์เฟซของแอปพลิเคชันและการโต้ตอบของผู้ใช้ของคุณอย่างใกล้ชิด จำไว้ว่าผู้ใช้ของคุณไม่ได้อยู่ในฐานะที่จะใช้เสียงได้เสมอไป ตัวอย่างเช่น ขณะดูการบรรยายหรือการนำเสนอ อีกทางหนึ่ง พวกมันอาจเต็มมือและไม่สามารถใช้สัมผัสได้ ฉันแนะนำให้คุณจัดเตรียมการโต้ตอบกับเมนูเสียงและสัมผัสทุกครั้งที่ทำได้ ให้ผู้ใช้ของคุณสามารถนำทางผ่านแอปพลิเคชันของคุณโดยใช้เสียงและทัชแพดควบคู่กันไป

แอปพลิเคชั่นจริง - Toptal Finder

ตอนนี้คุณคุ้นเคยกับการพัฒนา Glass และได้สร้าง Hello Glass แล้ว ก็ถึงเวลาสร้างแอปพลิเคชันจริงที่จะนำคุณสมบัติใหม่ๆ ของ Glass มาใช้ มาสร้างแอปที่ให้คุณเรียกดูโปรไฟล์ของนักพัฒนา Toptal ชั้นนำตามแพลตฟอร์มการพัฒนากันเถอะ

โครงสร้างของแอปพลิเคชัน Glass ตัวอย่างของเราจะเรียบง่าย:

1. เราต้องการให้หน้าจอเริ่มต้นของเรามีโลโก้ Toptal พร้อมเสียงและเมนูที่เปิดใช้งานการแตะเพื่อให้เราเลือกแพลตฟอร์มการพัฒนาที่เราต้องการสำหรับนักพัฒนา
2. หลังจากเลือกแพลตฟอร์มแล้ว เราต้องการรับรายชื่อนักพัฒนาพร้อมรูปภาพและชื่อของพวกเขา โปรไฟล์นักพัฒนาจะแสดงในรูปแบบของรายการบัตรส่วนบุคคลที่เลื่อนได้
3. เมื่อดูโปรไฟล์นักพัฒนา เราต้องการเพิ่มพวกเขาในรายการโปรดหรือส่งคำขอจ้าง

พื้นฐาน

มาสรุปสิ่งที่คุณได้เพิ่มไว้นอกเหนือจากความรู้ Android ของคุณอย่างรวดเร็ว:

1. วิธีการตั้งค่าสภาพแวดล้อมการพัฒนาของคุณเพื่อสร้างเครื่องแก้ว
2. วิธีกำหนดค่าแอปพลิเคชันของคุณให้ใช้ธีม Glassware GUI มาตรฐาน
3. วิธีเริ่มแอปพลิเคชันของคุณโดยใช้คำสั่งเสียงและชื่อเมนูที่กำหนดเอง

ใช้ความรู้นี้เพื่อเริ่มต้นใช้งานแอปใหม่ของคุณ คุณสามารถอัปเดตแอป Hello Glass จากด้านบน หรือเริ่มแอปใหม่โดยทำตามขั้นตอนเดียวกัน ตั้งชื่อแอปพลิเคชันนี้ว่า " Top Finder ” และทำให้ไฟล์ voice_trigger.xml ของคุณมีลักษณะดังนี้

 <?xml version="1.0" encoding="utf-8"?> <trigger keyword="@string/app_name" > <constraints network="true" /> </trigger>

ข้อ จำกัด ของ network="true" บอกให้แก้วตรวจสอบการเชื่อมต่อเครือข่ายเมื่อเริ่มต้นแอปนี้ ซึ่งเราจะต้องเชื่อมต่อกับรายชื่อนักพัฒนา Toptal หากไม่มีการเชื่อมต่อ Glass จะแสดงข้อความเตือน

หน้าจอหลัก

มาทำให้หน้าจอหลักของแอปพลิเคชันของเรามีลักษณะดังนี้:

เมื่อคุณเห็นข้อความ "กระจกตกลง" บนหน้าจอ แสดงว่าแอปพลิเคชันมีเมนูเปิดใช้งานด้วยเสียงอยู่ที่ตำแหน่งนั้น การพูดวลี “โอเค แก้ว” ที่นี่จะเปิดใช้งานเมนูเสียงสำหรับตำแหน่งนี้ วลีนี้กำหนดไว้ล่วงหน้าโดย Glass และคุณไม่สามารถเปลี่ยนแปลงได้

คุณสามารถมอง "โอเค แก้ว" เป็น "เมนูแอปพลิเคชัน" ได้ เช่นเดียวกับที่คุณใช้ในการพัฒนาสมาร์ทโฟน/แท็บเล็ต และมีบทบาทเหมือนกันทุกประการ ในขณะที่คุณ "แตะ" "ไอคอนเมนูแอปพลิเคชัน" บนหน้าจอของคุณ (มักจะเป็น 3 จุดหรือเส้น) เพื่อเปิดเมนูแอปพลิเคชัน Android คุณต้องพูดว่า "ตกลง แก้ว" เพื่อเปิดเมนูที่เปิดใช้งานด้วยเสียงในแอป Glassware ของคุณ

เพื่อเปิดใช้งานเมนู “ok glass” คุณต้องขอ FEATURE_VOICE_COMMANDS จาก API ในการดำเนินการนี้ ให้เพิ่มบรรทัดต่อไปนี้ในตัวจัดการ onCreate ใน MainActivity ของคุณ:

 getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS);

ทุกกิจกรรมที่มีคุณลักษณะนี้จะแสดงด้วยข้อความ "โอเค" ที่กึ่งกลางด้านล่าง

สิ่งต่อไปที่คุณต้องทำคือสร้างเมนูสำหรับหน้าจอหลัก ในโฟลเดอร์ res/menu ให้สร้างนิยามเมนู XML ใหม่ชื่อ main.xml เพื่อให้ทุกอย่างง่ายขึ้น เราจะเปิดใช้งานสามแพลตฟอร์มสำหรับนักพัฒนา Toptal แต่อย่าลังเลที่จะทำการเปลี่ยนแปลงตามที่คุณต้องการ

ควรมีเนื้อหาดังนี้

 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:andro> <item android: android:title="Top Android developer" /> <item android: android:title="Top JavaScript developer" /> <item android: android:title="Top iOS developer" /> </menu>

คุณอาจสงสัยว่าทำไมฉันถึงเลือกชื่อเมนูที่ค่อนข้างยาวแทนที่จะเป็นแค่ Android, JavaScript และ iOS เหตุผลนั้นง่ายมาก ทีมพัฒนา Glass ยังคงปรับปรุงการจดจำเสียงอยู่ ขอแนะนำให้ใช้คำสองหรือสามคำในเมนูเพื่อให้ Glass จดจำได้ง่ายขึ้น

ฉันได้กล่าวไปแล้วว่าเมนู "ok glass" นั้นไม่แตกต่างจากเมนูแอปพลิเคชัน Android มาตรฐานของคุณ การแนบเมนูเข้ากับกิจกรรมก็เหมือนกัน เพียงแทนที่ตัวจัดการ onCreatePanelMenu ใน MainActivity ของคุณและขยายเมนูหลักที่คุณเพิ่งสร้างขึ้น:

 @Override public boolean onCreatePanelMenu(int featureId, Menu menu){ if (featureId == WindowUtils.FEATURE_VOICE_COMMANDS || featureId == Window.FEATURE_OPTIONS_PANEL) { getMenuInflater().inflate(R.menu.main, menu); return true; } return super.onCreatePanelMenu(featureId, menu); }

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

 public void findDevelopers(String platform){ } @Override public boolean onMenuItemSelected(int featureId, MenuItem item) { if (featureId == WindowUtils.FEATURE_VOICE_COMMANDS || featureId == Window.FEATURE_OPTIONS_PANEL) { switch (item.getItemId()) { case R.id.find_android: findDevelopers("Android"); break; case R.id.find_javascript: findDevelopers("Java Script"); break; case R.id.find_ios: findDevelopers("iOS"); break; } return true; } return super.onMenuItemSelected(featureId, item); }

ถึงเวลาแล้วที่จะทำให้หน้าจอหลักของแอปพลิเคชัน Google Glass ตัวอย่างของเราสวยขึ้น นำเข้าโลโก้ Toptal ลงในแอปพลิเคชันของคุณเป็น res/drawable/logo.png ฉันใช้ภาพนี้:

ในคลาส MainActivity ของคุณ ทำการเปลี่ยนแปลงต่อไปนี้

ตรวจสอบให้แน่ใจว่าได้ประกาศตัวแปรส่วนตัวต่อไปนี้เมื่อเริ่มต้นคลาส:

 private CardScrollView mCardScroller; private View mView; private GestureDetector mGestureDetector;

เปลี่ยนเมธอด buildView เพื่อปรับแต่งเลย์เอาต์การ์ด:

 private View buildView() { Card card = new Card(this); card.setText(R.string.app_name); card.setImageLayout(Card.ImageLayout.LEFT); card.addImage(R.drawable.logo); return card.getView(); }

และเปลี่ยนตัวจัดการ onCreate ของคุณให้เป็นดังนี้:

 protected void onCreate(Bundle bundle) { super.onCreate(bundle); getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON); getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS); mView = buildView(); mCardScroller = new CardScrollView(this); mCardScroller.setAdapter(new CardScrollAdapter() { @Override public int getCount() { return 1; } @Override public Object getItem(int position) { return mView; } @Override public View getView(int position, View convertView, ViewGroup parent) { return mView; } @Override public int getPosition(Object item) { if (mView.equals(item)) { return 0; } return AdapterView.INVALID_POSITION; } }); // Handle the TAP event. mCardScroller.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { openOptionsMenu(); } }); mGestureDetector = createGestureDetector(this); setContentView(mCardScroller); }

อย่างที่ฉันพูดไปก่อนหน้านี้ เราต้องการรวมเมนูที่เปิดใช้งานการแตะพร้อมกับ “ok glass” ดังนั้นเพียงแค่เปิดใช้งานท่าทางเหมือนที่คุณทำในแอป Android ของคุณ เพิ่มวิธีการต่อไปนี้ในคลาส MainActivity ของคุณ:

 private GestureDetector createGestureDetector(Context context) { GestureDetector gestureDetector = new GestureDetector(context); //Create a base listener for generic gestures gestureDetector.setBaseListener( new GestureDetector.BaseListener() { @Override public boolean onGesture(Gesture gesture) { if (gesture == Gesture.TAP) { openOptionsMenu(); return true; } else if (gesture == Gesture.TWO_TAP) { // do something on two finger tap return true; } else if (gesture == Gesture.SWIPE_RIGHT) { // do something on right (forward) swipe return true; } else if (gesture == Gesture.SWIPE_LEFT) { // do something on left (backwards) swipe return true; } else if (gesture == Gesture.SWIPE_DOWN){ finish(); } return false; } }); gestureDetector.setFingerListener(new GestureDetector.FingerListener() { @Override public void onFingerCountChanged(int previousCount, int currentCount) { // do something on finger count changes } }); gestureDetector.setScrollListener(new GestureDetector.ScrollListener() { @Override public boolean onScroll(float displacement, float delta, float velocity) { // do something on scrolling return true; } }); return gestureDetector; } @Override public boolean onGenericMotionEvent(MotionEvent event) { if (mGestureDetector != null) { return mGestureDetector.onMotionEvent(event); } return false; }

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

นี่คือลักษณะของเมนูเสียง:

และนี่คือเมนูท่าทางสัมผัส:

หากคุณเลือกรายการเมนูจะไม่มีอะไรเกิดขึ้นเนื่องจากวิธีการ findDevelopers ของคุณยังไม่ได้ใช้งาน

หน้าจอนักพัฒนา

เราจะใช้เลย์เอาต์การ์ดแก้วเริ่มต้นต่อไป โดยมีรูปภาพทางด้านซ้าย ข้อความทางด้านขวา และข้อมูลส่วนท้ายบางส่วน สำหรับข้อมูลเพิ่มเติมเกี่ยวกับแนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบการ์ดของคุณ โปรดดูคู่มือสไตล์ Google Glass

โปรไฟล์นักพัฒนาของเราถูกกำหนดโดยคุณสมบัติง่ายๆ:

1. ชื่อ
2. รูปภาพ
3. แพลตฟอร์มการพัฒนา

ดังนั้น มาตรวจสอบให้แน่ใจว่ามีโครงสร้างคลาสที่เหมาะสมในแอปของเรา สร้างคลาสใหม่ชื่อ DeveloperModel.java ในโฟลเดอร์ java/models ของคุณ เราต้องการให้คลาสนี้เป็น อนุกรมได้ เนื่องจากคลาสนี้จะมีโปรไฟล์ที่อยู่ในรายการ

 public class DeveloperModel implements Serializable { private String name; public String getName(){ return name; } public void setName(String name){ this.name=name; } private String platform; public String getPlatform(){ return platform; } public void setPlatform(String platform){ this.platform=platform; } private String image; public String getImage(){ return image; } public void setImage(String image){ this.image=image; } }

เราต้องการให้การ์ดของเราเชื่อมโยงกับข้อมูลโปรไฟล์นักพัฒนาของเราอย่างแน่นหนา เนื่องจาก CardScrollAdapter ที่เป็นค่าเริ่มต้นนั้นค่อนข้างทั่วไปเกี่ยวกับโมเดลข้อมูล เราจำเป็นต้องขยายและทำให้เป็นของเราเอง สร้าง DeveloperAdapter.java ในโฟลเดอร์ java/adapters ของคุณ:

 public class DeveloperAdapter extends CardScrollAdapter { private List<Card> mCards; private List<DeveloperModel> mData; public DeveloperAdapter(List<Card> cards){ this.mCards = cards; } @Override public int getCount() { return mCards.size(); } @Override public Object getItem(int i) { return mCards.get(i); } @Override public View getView(int i, View view, ViewGroup viewGroup) { return mCards.get(i).getView(); } @Override public int getPosition(Object o) { return this.mCards.indexOf(o); } }

เราไม่ต้องการให้เพิ่มผลการค้นหาของเราในหน้าจอหลักของแอปพลิเคชัน ดังนั้นเราจะสร้างกิจกรรมใหม่ที่จะทำการค้นหาและแสดงผลลัพธ์ สร้างกิจกรรมใหม่ ResultsActivity ถัดจาก MainActivity ของคุณ (อาจเป็น java/com.helloglass )

ตรวจสอบให้แน่ใจว่าได้ extends Activity

ต่อไป เราต้องระบุเมนูสำหรับการ์ดโปรไฟล์นักพัฒนาของเรา สร้างเมนูใหม่ developer.xml โดยมีเนื้อหาดังต่อไปนี้:

 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:andro> <item android: android:title="Add to favorites" /> <item android: android:title="Hire" /> <item android: android:title="Go back" /> </menu>

หากต้องการเปิดใช้งานการส่งพารามิเตอร์ระหว่าง ResultsActivity และ MainActivity ให้เพิ่มบรรทัดต่อไปนี้ที่จุดเริ่มต้นของคลาส ResultsActivity :

 public static final String SEARCH = "search"; private String mPlatform="Android";

อย่าลืมเพิ่มกิจกรรมใหม่ของคุณลงในไฟล์รายการ:

 <activity android:name=".ResultsActivity" android:immersive="true" android:icon="@drawable/ic_launcher" android:label="@string/title_activityresults" android:parentActivityName=".MainActivity"> <meta-data android:name="android.support.PARENT_ACTIVITY" android:value="com.eloptico.MainActivity" /> </activity>

การตั้งค่าหน้าจอเริ่มต้นของ ResultsActivity และการกำหนดค่าการ์ดนั้นคล้ายกับที่เราทำบน MainActivity มาก ขั้นแรกให้ตรวจสอบว่าคุณมีการ์ดและตัวเลื่อนที่กำหนดไว้ในตอนเริ่มต้น:

 private CardScrollView mCardScroller; private List<Card> mCards; private GestureDetector mGestureDetector;

สร้างวิธีการค้นหาชั่วคราวที่เราจะกลับมาใช้ในภายหลัง การเพิ่มการ์ดใหม่ในรายการโปรไฟล์นั้นง่ายพอๆ กับการเพิ่มรายการในอาร์เรย์ เราจะตั้งชื่อวิธีนี้ว่า findDevelopers แต่วิธีนี้เป็นของ ResultsActivity :

 private void findDevelopers(String platform){ for (int i=1; i<=10; i++){ Card card = new Card(this); card.setText(platform+" "+Integer.toString(i)); card.setTimestamp(platform); card.setImageLayout(Card.ImageLayout.LEFT); card.addImage(R.drawable.ic_person_50); mCards.add(card); } mCardScroller.setSelection(0); }

กลับไปที่ MainActivity ของคุณและอัปเดต findDevelopers ที่นั่นเพื่อเริ่ม ResultsActivity ของคุณและส่งต่อคุณสมบัติของ platform :

 public void findDevelopers(String platform){ Intent resultsIntent = new Intent(this, ResultsActivity.class); resultsIntent.putExtra(ResultsActivity.SEARCH, platform); startActivity(resultsIntent); }

แนบเมนูนักพัฒนาของคุณกับ ResultsActivity คุณจะสามารถเปิดเมนูที่การ์ดโปรไฟล์ใดก็ได้

 @Override public boolean onCreatePanelMenu(int featureId, Menu menu){ if (featureId == WindowUtils.FEATURE_VOICE_COMMANDS || featureId == Window.FEATURE_OPTIONS_PANEL) { getMenuInflater().inflate(R.menu.developer, menu); return true; } return super.onCreatePanelMenu(featureId, menu); }

เช่นเดียวกับก่อนหน้านี้ ให้เปิดใช้งานท่าทางสัมผัสเพื่อจัดการทัชแพดบน Glass ของคุณเมื่อ ResultsActivity ปรากฏขึ้น ในการทำเช่นนั้นเพียงเรียก openOptionsMenu() ใน onGesture(Gesture gesture) ของคุณ:

 private GestureDetector createGestureDetector(Context context) { // … @Override public boolean onGesture(Gesture gesture) { if (gesture == Gesture.TAP) { openOptionsMenu(); return true; } else if // …

เพิ่มตัวจัดการเมนูให้กับการดำเนินการที่เกี่ยวข้องกับนักพัฒนา เราจะฝากข้อความ Toast ง่ายๆ ไว้ก่อน

 @Override public boolean onMenuItemSelected(int featureId, MenuItem item) { if (featureId == WindowUtils.FEATURE_VOICE_COMMANDS || featureId == Window.FEATURE_OPTIONS_PANEL) { switch (item.getItemId()) { case R.id.developer_fav: Toast.makeText(getApplicationContext(), "Favorite", Toast.LENGTH_LONG).show(); break; case R.id.developer_hire: Toast.makeText(getApplicationContext(), "Message", Toast.LENGTH_LONG).show(); break; case R.id.go_back: break; } return true; } return super.onMenuItemSelected(featureId, item); }

ทุกแอปพลิเคชันควรใช้องค์ประกอบภาพ ไอคอน ฯลฯ ที่สวยงาม ทีมงาน Google Glass ได้จัดเตรียมชุดไอคอนมาตรฐานทั่วไปชุดใหญ่ซึ่งให้นักพัฒนาซอฟต์แวร์ Glass ใช้ฟรีในแอปพลิเคชันของตน คุณสามารถค้นหาชุดไอคอน Glass มาตรฐานและแบบอักษรครบชุดได้ในไลบรารี

สำหรับตอนนี้ คุณเพียงแค่ต้องมีหนึ่งไอคอน ic_person_50.png ดังนั้นให้ดาวน์โหลดไปยังโฟลเดอร์ res\drawable ของคุณ เราจะใช้ไอคอนนี้แทนการดาวน์โหลดรูปภาพของผู้พัฒนา

สิ่งสุดท้ายที่เหลืออยู่ในบทช่วยสอนการพัฒนาแอพ Glass ของเราในตอนนี้คือการแทนที่ตัวจัดการ onCreate ของเราใน ResultsActivity ซึ่งเราจะตรวจสอบว่าแพลตฟอร์มการพัฒนาใดที่ส่งต่อจาก MainActivity และเติมรายการของเรา

 @Override protected void onCreate(Bundle bundle) { super.onCreate(bundle); getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON); getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS); mCardScroller = new CardScrollView(this); mCards = new ArrayList<Card>(); if(getIntent().hasExtra(SEARCH)){ mPlatform = getIntent().getStringExtra(SEARCH); } findDevelopers(mPlatform); mCardScroller.setAdapter(new DeveloperAdapter(mCards)); // Handle the TAP event. mCardScroller.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { openOptionsMenu(); } }); mGestureDetector = createGestureDetector(this); setContentView(mCardScroller); }

คุณสามารถปล่อยให้วิธีการ onResume และ onPause เหมือนกับใน MainActivity ของคุณ

หากคุณเริ่มแอปพลิเคชันของคุณตอนนี้ คุณสามารถตรวจสอบว่าโปรไฟล์นักพัฒนาของคุณถูกสร้างขึ้นอย่างไรโดยอ้างอิงจากเมนูที่เลือกบน MainActivity อีกครั้ง คุณมีตัวเลือกในการแสดงเมนูของคุณโดยใช้ "ok glass" หรือโดยการแตะทัชแพดหรือโดยใช้การเปิดใช้งานด้วยเสียง นี่คือลักษณะของโปรไฟล์ "นักพัฒนา Android คนที่ 10" ในขณะนี้:

การแตะจะแสดงเมนูสัมผัส:

และพูดว่า "ตกลงแก้ว" เมนูเสียงจะปรากฏขึ้น:

ปัดลงจากรายการเพื่อกลับไปที่หน้าจอหลักของแอพของคุณ

รับโปรไฟล์จากอินเทอร์เน็ต

ในการสรุป เรามาใส่ข้อมูลจริงในเมนูสำหรับนักพัฒนา Toptal 10 อันดับแรกสำหรับ JavaScript, Android และ iOS

คุณจะต้องดาวน์โหลดรูปโปรไฟล์ของพวกเขาและทำให้พร้อมใช้งานบน HTTP หรือเพียงแค่ใช้ URL โดยตรงจาก toptal.com

เนื่องจากการสร้างโปรแกรมรวบรวมข้อมูลเว็บเพียงเพื่อให้ได้ชื่อนักพัฒนาชั้นนำใน Toptal อาจเป็นทางอ้อมสำหรับบทความนี้มากเกินไป ฉันจึงได้สร้างไฟล์ JSON เพื่อให้คุณใช้สำหรับ Android, JavaScript และ iOS

ในแอปของคุณ สิ่งแรกที่คุณต้องทำคือร้องขอการเข้าถึงอินเทอร์เน็ตจากระบบปฏิบัติการ Android ของคุณ เพิ่มบรรทัดต่อไปนี้ในไฟล์ Manifest ของคุณ

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

โปรดทราบว่า Glass จะไม่อนุญาตให้คุณบล็อกเธรดหลักโดยใช้คำขอ HTTP โดยตรง คุณจะต้องจัดการการดาวน์โหลด JSON และรูปภาพแต่ละรูปในแบบอะซิงโครนัส คุณสามารถใช้งาน async สร้างบริการดาวน์โหลดหรือความตั้งใจของคุณเอง หรืออะไรก็ได้ที่คุณต้องการในงานประจำวันของคุณ

การสร้างฟังก์ชันนี้ไม่ได้เจาะจงสำหรับ Google Glass ดังนั้นฉันจะข้ามข้อมูลโค้ด หากคุณก้าวไปข้างหน้าและใช้งานฟังก์ชั่นสุดท้ายนี้ การ์ดโปรไฟล์ของคุณควรมีลักษณะดังนี้:

สรุปการสอน

ฉันหวังว่าคุณจะสนุกกับการทำตามบทแนะนำการพัฒนา Google Glass และสร้างแอปพลิเคชัน Glassware แรกของคุณ ถึงตอนนี้ คุณน่าจะสบายใจกับแนวคิดที่ว่าการเขียนแอปพลิเคชันสำหรับ Glass นั้นไม่ได้แตกต่างไปจากแพลตฟอร์ม Android อื่นๆ มากนัก

ณ จุดนี้ คุณได้เรียนรู้วิธีขยายหน้าจอหลักที่เปิดใช้งานเสียงของ Google Glass วิธีสร้างเมนูที่เปิดใช้งานด้วยเสียงของคุณเอง และวิธีรวมการควบคุมด้วยเสียงกับท่าทางสัมผัส คุณควรเข้าใจแนวคิดและส่วนประกอบพื้นฐานสำหรับ Glass UI เช่น การ์ด เลย์เอาต์ และองค์ประกอบ คุณได้เห็นวิธีการสร้างการ์ดแบบไดนามิกและวิธีนำทางระหว่างกิจกรรมต่างๆ

หากต้องการเจาะลึกลงไป ให้ไปที่แหล่งข้อมูลสำหรับนักพัฒนาซอฟต์แวร์ของ Google ที่ developer.google.com/glass เมื่อคุณเริ่มสร้างแอปพลิเคชันที่ซับซ้อนมากขึ้น มันจะพิสูจน์ได้ว่าเป็นแหล่งข้อมูลที่มีประโยชน์มาก

โปรดทราบว่า Glass ยังอยู่ในขั้นตอนการพัฒนา และมีแนวโน้มว่าจะต้องมีการปรับปรุงอีกมากมายก่อนที่จะออกสู่ตลาดผู้บริโภค ด้วยเหตุนี้ ฉันมีบันทึกสำคัญหนึ่งข้อสำหรับคุณ:

การจดจำเสียงยังมีงานเหลืออีกมาก และคุณอาจพบว่าตัวเองตะโกนใส่เพื่อนในจินตนาการขณะพยายามเริ่มกิจกรรมหรือกรอกข้อมูลบางอย่าง ไม่ต้องกังวล ทุกคนที่ลองใช้ Google Glass ในการพัฒนาจะรู้สึกเหมือนเดิม คุณไม่ได้อยู่คนเดียว

เทคโนโลยีจะพัฒนาขึ้น และแก้วจะพร้อมสำหรับการขายปลีกในเวลาไม่นาน แน่นอนว่าจะต้องสร้างกระแสคลื่นลูกใหญ่ทันทีที่วางจำหน่าย ดังนั้นฉันหวังว่าคุณจะตื่นเต้นพอๆ กับที่ฉันเป็นคนแรกๆ ที่ได้เป็นผู้นำเทคโนโลยีที่น่าตื่นเต้นนี้!

Shout Out : ภาพหน้าจอในบทความนี้สร้างขึ้นโดยใช้ Droid@Screen