Google Glass เป็นเทคโนโลยีล้ำยุคที่สัญญาว่าจะปฏิวัติวิธีที่เราใช้อุปกรณ์ของเราเพื่อโต้ตอบกับโลก แต่จากมุมมองของผู้พัฒนามีอะไรพิเศษในการพัฒนาสำหรับแก้วนี้? คำตอบคือ“ ไม่มีอะไร!” ในความเป็นจริงจากมุมมองของ นักพัฒนา Android ที่มีประสบการณ์ , Google Glass เป็นเพียงอุปกรณ์ Android อีกเครื่องหนึ่งที่มีหน้าจอเล็กมากและฟีเจอร์ จำกัด !
ความจริงที่ว่าทุกคนที่มีความรู้ด้านการพัฒนา Android สามารถเป็นสมาชิกของชุมชน 'ชั้นยอด' ของผู้สอนศาสนาที่ใช้เทคโนโลยีสวมใส่ได้แห่งอนาคตนี้เป็นส่วนหนึ่งของสิ่งที่ทำให้ Google Glass ยอดเยี่ยมมาก แน่นอนว่าคุณจะต้องเรียนรู้สิ่งใหม่ ๆ บางอย่างเช่นความแตกต่างระหว่าง“ Immersion” และ“ Active Card” แต่อย่างที่คุณเห็นเส้นโค้งการเรียนรู้ไม่ได้สูงชัน
จุดประสงค์ของบทช่วยสอน Google Glass นี้คือการวางรากฐานสำหรับการพัฒนาแอปพลิเคชัน Glass ใด ๆ ผ่านการสร้างแอปง่ายๆที่ครอบคลุมทุกขั้นตอนทั่วไป เป้าหมายของฉันคือช่วยให้คุณประหยัดเวลาในการค้นคว้าและลองผิดลองถูกและช่วยให้คุณสามารถเรียกใช้แอปพลิเคชัน Glass ตัวแรกโดยเร็วที่สุด
ในบทช่วยสอนนี้ก่อนอื่นเราจะพูดถึงวิธีตั้งค่าสภาพแวดล้อมการพัฒนาของคุณและเชื่อมต่อ Google Glass กับคอมพิวเตอร์ของคุณ จากนั้นเราจะสร้างแอพ Glass“ Hello World” ง่ายๆซึ่งจะรวมคำสั่งเสียงที่กำหนดเองและการทำงานร่วมกับเมนูเริ่มของ Glass เมื่อคุณได้รับแอปพลิเคชันแรกที่พัฒนาและใช้งานบน Glass คุณจะได้เรียนรู้พื้นฐานของการนำทางในแอปพลิเคชัน Glass เมนูสั่งงานด้วยเสียงและการสร้างเนื้อหาแบบไดนามิก
วิธีการขึ้นเครื่อง
Glass ยังอยู่ในขั้นตอน 'การทดสอบเบต้า' ซึ่ง Google ได้คิดค้นคำว่า 'โปรแกรมสำรวจ' ไม่ว่าคุณจะตั้งชื่อนี้ Glass ยังไม่ใช่สิ่งที่คุณจะได้รับในร้านเหมือนสมาร์ทโฟน น่าเสียดายที่เครื่องมือพัฒนา Android ยังไม่มีโปรแกรมจำลองที่คุณสามารถใช้เพื่อพัฒนาแอปพลิเคชันของคุณได้โดยไม่ต้องใช้ฮาร์ดแวร์จริง
ดังนั้นในการเรียกใช้และดีบักแอปพลิเคชันของคุณคุณจะต้องใช้ Google Glass จริงผ่านโปรแกรม Explorer เพื่อเข้าร่วมโปรแกรมเยี่ยมชม หน้าลงทะเบียน และลงทะเบียนเพื่อเข้าใช้งาน เมื่อได้รับการอนุมัติแล้วให้เตรียมบัตรเครดิตของคุณและรอรับแก้วของคุณ ขณะนี้ Glass รุ่น Explorer มีราคา 1,500 เหรียญสหรัฐ แต่คาดว่าราคาจะลดลงอย่างมากก่อนที่อุปกรณ์จะวางจำหน่าย
สำหรับ Glassless
เนื่องจากไม่มีโปรแกรมจำลองใด ๆ คุณจึงจำเป็นต้องมีฮาร์ดแวร์ Google Glass จริงเพื่อพัฒนาแอปในบทช่วยสอนนี้ (หรือแอป Glass ใด ๆ ) แต่หากการได้มานั้นอยู่นอกงบประมาณของคุณอย่ารู้สึกท้อ จะน่าติดตามต่อไป สิ่งที่จะเห็นได้ชัดในบทช่วยสอนคือการพัฒนาสำหรับ Glass นั้นเกือบจะเหมือนกับการพัฒนาสำหรับแพลตฟอร์ม Android อื่น ๆ !
หากคุณยังไม่เคยใช้ 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) เราจะเริ่มต้นด้วยการพัฒนา“ Hello World!” แบบเก่า ใบสมัคร เช่นเดียวกับสภาพแวดล้อมการพัฒนา Android ที่สำคัญส่วนใหญ่ Android Studio จะเติมแอปใหม่โดยอัตโนมัติด้วยเทมเพลตเพื่อแสดงวลีที่มีชื่อเสียงนี้ ด้วยเหตุนี้จึงได้รับ“ Hello World!” การใช้งานเป็นเพียงการออกกำลังกายในการปรับใช้แอพพื้นฐาน
ใน Android Studio ให้คลิก“ โครงการใหม่ ” และกรอกแบบฟอร์มโครงการ คุณสามารถใช้สิ่งที่คล้ายกับสิ่งนี้:
เมื่อเลือกฟอร์มแฟคเตอร์และ API โปรดเลือก“ กระจก ” และ API 19
เลือก“ กิจกรรมแช่ ” เป็นกิจกรรมเริ่มต้นของคุณ
คุณจำได้ว่าฉันพูดถึงว่าคุณจะต้องเรียนรู้ความแตกต่างระหว่าง Immersion และ Live Card? ของ Google บทความส่วนติดต่อผู้ใช้ อธิบายประเภทต่างๆของหน้าจอแก้ว สรุปโดยย่อมีดังนี้
-
ไพ่สด จะถูกเพิ่มลงในไทม์ไลน์ Glass และแสดงข้อมูลแบบเรียลไทม์เกี่ยวกับบางสิ่งผ่านการอัปเดตความถี่สูง พวกเขาทำงานอยู่เบื้องหลังตลอดเวลาแม้ว่าผู้ใช้จะโต้ตอบกับการ์ดต่างๆ สิ่งนี้ช่วยให้ผู้ใช้สามารถทำงานหลายอย่างพร้อมกันโดยสามารถเข้าถึงข้อมูลเรียลไทม์ประเภทต่างๆได้อย่างต่อเนื่อง
-
แช่ คือหน้าจอที่ปรับแต่งได้อย่างเต็มที่ซึ่งทำงานนอกประสบการณ์ไทม์ไลน์ สิ่งเหล่านี้ช่วยให้คุณออกแบบ UI ของคุณเองและประมวลผลข้อมูลผู้ใช้ตามที่เห็นสมควร นี่คือสิ่งที่เราจะใช้!
ในหน้าจอถัดไปของวิซาร์ดให้ใช้ค่าเริ่มต้นสำหรับ“ ชื่อ ” และ“ หัวข้อ ” แล้วคลิก“ เสร็จสิ้น ”.
หลังจาก Gradle ดูแลการพึ่งพาของคุณและเตรียมโปรเจ็กต์ของคุณให้พร้อมได้เวลาเสียบปลั๊ก Glass แล้วตอนนี้นี่คือการพัฒนาแห่งอนาคต!
สมมติว่ามีไดรเวอร์ Android ADB ทั้งหมดของคุณและ Glass ของคุณได้รับการยอมรับจากระบบของคุณคุณควรได้รับ Glass ในรายการอุปกรณ์ของคุณ
หากนี่เป็นครั้งแรกที่คุณเชื่อมต่ออุปกรณ์กับคอมพิวเตอร์ Glass ของคุณจะขอการอนุมัติ / สร้างความไว้วางใจ เพียงแค่แตะกระจกของคุณเพื่ออนุญาตการเชื่อมต่อและคุณควรพร้อม
คลิก“ วิ่ง ” และทำให้“ APK เริ่มต้น” ของคุณใช้งานได้โดยมี“ MainActivity” เป็นกิจกรรมเริ่มต้นสำหรับการเปิดตัวบนอุปกรณ์“ USB”
หลังจากนั้นไม่กี่วินาทีคุณจะเห็นสิ่งนี้บนหน้าจอ Glass ของคุณ:
เย่! แอปพลิเคชันของคุณกำลังทำงานบน Glass! และสิ่งที่คุณต้องทำคือกรอกค่าเริ่มต้นเพียงไม่กี่ค่าเมื่อคุณสร้างแอป!
เนื่องจากเราไม่ได้ระบุแตกต่างออกไป Glass จะแสดงแอปของคุณภายใต้ชื่อ“ แสดงการสาธิต” หากคุณปัดกลับไปที่หน้าจอเริ่มจากนั้นแตะเพื่อเปิดเมนูแอพคุณจะเห็นรายการดังต่อไปนี้:
โปแลนด์เล็กน้อย
โอเคคุณใช้งานได้แล้ว แต่ดูเหมือนว่าแอปพลิเคชัน Glass จะไม่เหมือนจริงและคุณไม่ต้องการให้แอปพลิเคชันเริ่มต้นด้วยการ“ แสดงการสาธิต”
ในบทช่วยสอนนี้เราจะปรับแต่งเล็กน้อยเพื่อให้ได้ความรู้สึกที่แท้จริง
การตั้งค่าธีม
ขั้นแรกคุณไม่ต้องการใช้หน้าจอแก้วเล็ก ๆ ของคุณด้วยแถบชื่อกิจกรรมส่วนหัวที่น่าเกลียด“ Hello World Immersion” และคุณไม่ต้องการให้หน้าจอเป็นสีเทาพร้อมแบบอักษรสีดำ ในการแก้ไขปัญหานี้เราจำเป็นต้องเปลี่ยนธีมบน Android ของเราและให้ Glass OS ดูแล
เปิด res/values/styles.xml สำหรับการแก้ไข ควรมีเนื้อหาดังต่อไปนี้:
android:Theme.Holo.Lightแค่เปลี่ยน android:Theme.DeviceDefault ถึง AndroidManifest.xml. สิ่งนี้ควรดูแลเค้าโครงและสีของแอปพลิเคชันโดยอัตโนมัติโดยใช้ธีมเริ่มต้นของ Glass
เว็บรับเลขบัตรเครดิต
การกำหนดลักษณะเมนู
ตกลงสิ่งต่อไปที่เราต้องการทำในบทช่วยสอนการพัฒนา Glass นี้คือการตั้งค่าแอปพลิเคชันของเราให้มีชื่อที่เหมาะสมและการเริ่มต้นที่ควบคุมด้วยเสียงที่ดี เปิด Android Manifest ( DEVELOPMENT แท็ก:
DEVELOPMENTเหตุผลที่คุณต้องการใช้ voice_trigger.xml สิทธิ์เพื่อให้คุณสามารถเล่นด้วยการควบคุมด้วยเสียงที่กำหนดเอง Google ค่อนข้างเข้มงวดเกี่ยวกับคำสั่งเสียงที่อนุญาตในแอป Glass ที่ได้รับอนุมัติและคำสั่งใหม่ทั้งหมดจะต้องได้รับการอนุมัติ เนื่องจากบทช่วยสอนนี้มีวัตถุประสงค์เพื่อการเรียนรู้และคุณจะไม่ส่งใบสมัครนี้ไปยังร้านเครื่องแก้วอย่างเป็นทางการคุณจึงไม่ควรกังวล เพียงแค่เปิด res/xml/ สิทธิ์และคุณจะสามารถเข้าถึง 'คำสั่งเสียงที่ไม่อยู่ในรายการ' สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้โปรดอ่าน เพจ GDK นี้ .
เปิด android:label='@string/app_name' สำหรับการแก้ไข นี่คือที่ที่กำหนดคำสั่งเสียงเพื่อเริ่มแอปพลิเคชันของคุณ ควรอยู่ใน @string/app_name โฟลเดอร์ คุณควรได้รับเนื้อหาคล้ายกับสิ่งนี้:
Hello Glassแทนที่จะพูดว่า“ Show me a demo” เพื่อเริ่มแอปให้พูดชื่อแอป เปลี่ยนเนื้อหาของไฟล์เป็น:
android:label='@string/app_name'หากคุณกลับไปที่ไฟล์รายการคุณอาจสังเกตเห็นว่า res/values/strings.xml ของคุณ ได้รับการอัปเดตโดยอัตโนมัติเพื่อใช้สตริงทรัพยากร app_name แทนฮาร์ดโค้ด Hello Glass คุ้มค่าเหมือนเดิม หากการตั้งค่านี้ไม่ได้รับการอัปเดตตรวจสอบให้แน่ใจว่าได้ตั้งค่าเป็น voice_trigger.xml
ชื่อแอปของคุณคืออะไรกันแน่? หากคุณเปิด network='true' ของคุณ FEATURE_VOICE_COMMANDS ควรระบุเป็น:
onCreateสิ่งนี้น่าจะสรุปได้สำหรับแอปพลิเคชัน Hello Glass ครั้งแรกของคุณ มาดูวิธีการทำงานกันเลย!
จากหน้าจอเริ่มคุณสามารถพูดได้ “ ตกลงแก้ว” เพื่อเปิดเมนูเสียง ขณะนี้แอปพลิเคชันของคุณอยู่ในรายการคำสั่งที่เปิดใช้งานด้วยเสียง
ด้วยบทช่วยสอนนี้เพื่อแนะนำคุณนี่คือลักษณะของหน้าจอเริ่มต้นแอป Glass ของคุณในตอนนี้
ถ้าคุณพูด ' สวัสดีแก้ว 'แอปพลิเคชันของคุณควรเริ่มต้นและคุณควรได้รับประสบการณ์ Glass ที่เป็นมาตรฐาน:
หากคุณไม่ต้องการใช้เสียงของคุณเพื่อเปิดใช้งานแอปพลิเคชันคุณสามารถเพียงแค่แตะที่หน้าจอเริ่มและคุณจะเห็นว่าแอปพลิเคชันของคุณอยู่ในเมนู:
เสียงหรือสัมผัส? ใช้ทั้งสองอย่าง!
เป็นสิ่งสำคัญมากที่คุณจะต้องใส่ใจกับอินเทอร์เฟซของแอปพลิเคชันของคุณและการโต้ตอบของผู้ใช้กับมัน โปรดจำไว้ว่าผู้ใช้ของคุณไม่ได้อยู่ในสถานะที่จะใช้เสียงของพวกเขาเสมอไปตัวอย่างเช่นในขณะที่ดูการบรรยายหรือการนำเสนอ หรืออาจมีมือเต็มและไม่สามารถใช้การสัมผัสได้ ฉันขอแนะนำให้คุณจัดเตรียมการโต้ตอบทั้งแบบสัมผัสและเมนูเสียงทุกครั้งที่ทำได้โดยอนุญาตให้ผู้ใช้นำทางผ่านแอปพลิเคชันของคุณโดยใช้เสียงและทัชแพดควบคู่กัน
แอปพลิเคชันจริง - ApeeScape Finder
ตอนนี้คุณพอใจกับการพัฒนา Glass แล้วและคุณได้สร้าง Hello Glass แล้วก็ถึงเวลาสร้างแอปพลิเคชันจริงที่จะทำให้คุณสมบัติใหม่ของ Glass ทำงานได้ มาสร้างแอปที่ช่วยให้คุณเรียกดูโปรไฟล์ของนักพัฒนา ApeeScape ชั้นนำตามแพลตฟอร์มการพัฒนา
โครงสร้างของแอปพลิเคชัน Glass ตัวอย่างของเราจะเรียบง่าย:
- เราต้องการให้หน้าจอเริ่มต้นของเรามี ApeeScape โลโก้ ด้วยเสียงแล้วแตะเมนูที่เปิดใช้งานเพื่อให้เราสามารถเลือกแพลตฟอร์มการพัฒนาที่เราต้องการผู้พัฒนา
- หลังจากเลือกแพลตฟอร์มแล้วเราต้องการรับรายชื่อนักพัฒนาพร้อมรูปภาพและชื่อของพวกเขา โปรไฟล์นักพัฒนาจะถูกนำเสนอในรูปแบบของรายการการ์ดส่วนตัวที่เลื่อนได้
- เมื่อดูโปรไฟล์นักพัฒนาเราต้องการเพิ่มในรายการโปรดหรือส่งคำขอจ้าง
พื้นฐาน
มาสรุปสิ่งที่คุณได้เพิ่มไว้แล้วนอกเหนือจากความรู้ Android ของคุณอย่างรวดเร็ว:
- วิธีตั้งค่าสภาพแวดล้อมการพัฒนาของคุณเพื่อสร้าง Glassware
- วิธีกำหนดค่าแอปพลิเคชันของคุณให้ใช้ธีม Glassware GUI มาตรฐาน
- วิธีเริ่มแอปพลิเคชันของคุณโดยใช้คำสั่งเสียงและชื่อเมนูที่กำหนดเอง
ใช้ความรู้นี้เพื่อเริ่มต้นใช้งานแอปใหม่ของคุณ คุณสามารถอัปเดตแอป Hello Glass จากด้านบนหรือเริ่มแอปใหม่โดยทำตามขั้นตอนเดียวกัน ตั้งชื่อแอปพลิเคชันนี้ว่า“ ตัวค้นหายอดนิยม ” และสร้าง MainActivity ของคุณ ไฟล์มีลักษณะเช่นนี้
getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS); res/menu ข้อ จำกัด บอกให้แก้วตรวจสอบการเชื่อมต่อเครือข่ายเมื่อเริ่มแอปนี้ซึ่งเราจะต้องเชื่อมต่อกับรายชื่อผู้พัฒนา ApeeScape หากไม่มีการเชื่อมต่อ Glass จะแสดงข้อความเตือน
หน้าจอหลัก
มาทำให้หน้าจอหลักของแอปพลิเคชันของเรามีลักษณะดังนี้:
เมื่อคุณเห็นไฟล์ “ ตกลงแก้ว” ข้อความบนหน้าจอของคุณหมายความว่าแอปพลิเคชันมีเมนูเปิดใช้งานด้วยเสียงในสถานที่นั้น การพูดวลี “ ตกลงแก้ว” ที่นี่เปิดใช้งานเมนูเสียงสำหรับตำแหน่งนี้ วลีนี้ถูกกำหนดไว้ล่วงหน้าโดย Glass และคุณไม่สามารถเปลี่ยนแปลงได้
คุณสามารถคิด “ ตกลงแก้ว” เป็น“ เมนูแอปพลิเคชัน” เช่นเดียวกับที่คุณใช้ในการพัฒนาสมาร์ทโฟน / แท็บเล็ตและมีบทบาทเหมือนกันทุกประการ ในขณะที่คุณ 'แตะ' 'ไอคอนเมนูแอปพลิเคชัน' บนหน้าจอของคุณ (มักจะเป็น 3 จุดหรือเส้น) เพื่อเปิดเมนูแอปพลิเคชัน Android คุณต้องพูดว่า “ ตกลงแก้ว” เพื่อเปิดเมนูสั่งงานด้วยเสียงในแอพ Glassware ของคุณ
เพื่อเปิดใช้งานไฟล์ “ ตกลงแก้ว” เมนูที่คุณต้องขอ main.xml จาก API ในการดำเนินการนี้ให้เพิ่มบรรทัดต่อไปนี้ใน 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 ของคุณ โฟลเดอร์สร้างนิยามเมนู XML ใหม่ชื่อ 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); } เพื่อให้สิ่งต่างๆง่ายขึ้นเราจะเปิดใช้งานแพลตฟอร์มสำหรับนักพัฒนา ApeeScape สามแพลตฟอร์ม แต่คุณสามารถทำการเปลี่ยนแปลงได้ตามต้องการ
ควรมีเนื้อหาดังต่อไปนี้:
res/drawable/logo.pngคุณอาจสงสัยว่าทำไมฉันถึงเลือกชื่อเมนูที่ค่อนข้างยาวแทนที่จะใช้ Android, JavaScript และ iOS เหตุผลนั้นง่ายมาก พวกจากทีมพัฒนา Glass ยังคงปรับปรุงการจดจำเสียง ขอแนะนำให้ฝึกใช้คำสองหรือสามคำในเมนูของคุณเพื่อให้ Glass จดจำได้ง่ายขึ้น
ฉันได้กล่าวไปแล้วว่า “ ตกลงแก้ว” เมนูไม่แตกต่างจากเมนูแอปพลิเคชัน Android มาตรฐานของคุณ การแนบเมนูกับกิจกรรมนั้นแทบจะเหมือนกัน เพียงแค่แทนที่ 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ตอนนี้ถึงเวลาทำให้หน้าจอหลักของแอปพลิเคชัน Google Glass ของเราสวยขึ้นแล้ว นำเข้าโลโก้ ApeeScape ลงในแอปพลิเคชันของคุณเป็น 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); } ฉันใช้ภาพนี้:
ใน 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 วิธีปรับแต่งเค้าโครงการ์ด:
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; } } ดังที่ได้กล่าวไปแล้วเราต้องการรวมเมนูที่เปิดใช้งานด้วยการแตะไว้ด้วย “ ตกลงแก้ว” ดังนั้นเพียงเปิดใช้ท่าทางสัมผัสเหมือนที่คุณทำในแอป Android ของคุณ เพิ่มวิธีการต่อไปนี้ใน CardScrollAdapter ของคุณ ชั้น:
DeveloperAdapter.javaที่ควรจะเป็น! ตอนนี้คุณสามารถเริ่มแอพของคุณและลองใช้ทั้งสองวิธีในการเปิดใช้งานเมนู ถ้าคุณพูด “ ตกลงแก้ว” คุณจะได้รับรายการเมนูสามรายการที่แสดงบนหน้าจอและหากคุณแตะกระจกเมนูที่เลื่อนได้จะเปิดขึ้น ในการเลื่อนดูรายการเมนูคุณสามารถปัดไปข้างหลังและไปข้างหน้า
หน้าตาเมนูเสียงมีดังนี้
และนี่คือเมนูท่าทาง:
หากคุณเลือกรายการเมนูจะไม่มีอะไรเกิดขึ้นเนื่องจาก java/adapters ของคุณ วิธีการยังไม่ได้นำมาใช้
หน้าจอนักพัฒนา
เราจะยังคงใช้เค้าโครง Glass Card เริ่มต้นโดยมีรูปภาพทางด้านซ้ายข้อความทางด้านขวาและข้อมูลส่วนท้ายบางส่วน สำหรับข้อมูลเพิ่มเติมเกี่ยวกับแนวทางปฏิบัติที่ดีที่สุดในการออกแบบการ์ดของคุณโปรดดูที่ Google Glass คู่มือสไตล์ .
โปรไฟล์นักพัฒนาของเราถูกกำหนดโดยคุณสมบัติง่ายๆ:
- ชื่อ
- ภาพ
- แพลตฟอร์มการพัฒนา
ดังนั้นตรวจสอบให้แน่ใจว่ามีโครงสร้างชั้นเรียนที่เหมาะสมในแอปของเรา สร้างคลาสใหม่ชื่อ public class DeveloperAdapter extends CardScrollAdapter { private List mCards; private List mData; public DeveloperAdapter(List 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 ของคุณ โฟลเดอร์:
ResultsActivityเราไม่ต้องการให้เพิ่มผลการค้นหาบนหน้าจอหลักของแอปพลิเคชันดังนั้นเราจะสร้างกิจกรรมใหม่ที่จะทำการค้นหาและแสดงผล สร้างกิจกรรมใหม่ MainActivity ถัดจาก ResultsActivity ของคุณ (อาจอยู่ใน public static final String SEARCH = 'search'; private String mPlatform='Android'; )
ตรวจสอบให้แน่ใจว่า ResultsActivity.
ต่อไปเราต้องระบุเมนูสำหรับการ์ดโปรไฟล์นักพัฒนาของเรา สร้างเมนูใหม่ MainActivity โดยมีเนื้อหาดังต่อไปนี้:
private CardScrollView mCardScroller; private List 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); } สร้างวิธีการค้นหาชั่วคราวที่เราจะกลับมาใช้ในภายหลังเพื่อนำไปใช้ การเพิ่มการ์ดใหม่ในรายการโปรไฟล์ทำได้ง่ายๆเพียงแค่เพิ่มรายการใน Array เราจะตั้งชื่อวิธีการนี้ว่า 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); } :
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 // … ของคุณ และส่งผ่านใน @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); } คุณสมบัติ:
ic_person_50.pngแนบเมนูนักพัฒนาของคุณกับ resdrawable คุณจะสามารถเปิดเมนูที่การ์ดโปรไฟล์ใดก็ได้
onCreateเช่นเดียวกับก่อนหน้านี้ให้เปิดใช้ท่าทางสัมผัสเพื่อจัดการทัชแพดบน Glass ของคุณเมื่อ 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(); 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เพิ่มตัวจัดการเมนูในการดำเนินการที่เกี่ยวข้องกับนักพัฒนา ตอนนี้เราจะฝากข้อความ Toast ง่ายๆไว้ก่อน
onPauseทุกแอปพลิเคชันควรใช้องค์ประกอบภาพไอคอนและอื่น ๆ ที่สวยงามทีมงาน Google Glass ได้จัดเตรียมไอคอนมาตรฐานทั่วไปจำนวนมากซึ่งฟรีสำหรับนักพัฒนา Glass เพื่อใช้ในแอปพลิเคชันของตน คุณสามารถค้นหาไอคอนแก้วมาตรฐานทั้งชุดและแบบอักษร ในห้องสมุดของพวกเขา
ตอนนี้คุณต้องการเพียงไอคอนเดียว MainActivity ดังนั้นไปข้างหน้าและดาวน์โหลดไปยัง MainActivity ของคุณ โฟลเดอร์ เราจะใช้ไอคอนนี้แทนการดาวน์โหลดรูปภาพของผู้พัฒนา
สิ่งสุดท้ายที่เหลืออยู่ในบทช่วยสอนการพัฒนาแอป Glass ของเราตอนนี้คือการลบล้าง
ของเรา ตัวจัดการบน ซึ่งเราจะตรวจสอบว่าแพลตฟอร์มการพัฒนาใดถูกส่งต่อจาก และเติมรายชื่อของเราคุณสามารถออก
|_+_|และ วิธีการเดียวกับใน
|_+_|ของคุณ
หากคุณเริ่มแอปพลิเคชันของคุณตอนนี้คุณสามารถตรวจสอบว่าโปรไฟล์นักพัฒนาของคุณสร้างขึ้นได้อย่างไรตามเมนูที่เลือกบน
อีกครั้งคุณมีตัวเลือกในการแสดงเมนูของคุณโดยใช้ “ ตกลงแก้ว” หรือโดยการแตะทัชแพดหรือโดยใช้การเปิดใช้งานด้วยเสียง นี่คือลักษณะของโปรไฟล์“ นักพัฒนา Android คนที่ 10” ในขณะนี้: 
การแตะจะแสดงเมนูสัมผัส:
แปลงการประทับเวลาเป็นวันที่ javascript
และพูดว่า “ ตกลงแก้ว” เปิดเมนูเสียง:
ปัดลงจากรายการเพื่อกลับไปที่หน้าจอหลักของแอพของคุณ
การรับโปรไฟล์จากอินเทอร์เน็ต
ในการสรุปสิ่งต่างๆเรามาเติมข้อมูลจริงในเมนูสำหรับนักพัฒนา ApeeScape 10 อันดับแรกสำหรับ JavaScript , Android และ ios .
คุณจะต้องดาวน์โหลดรูปภาพโปรไฟล์ของพวกเขาและทำให้พร้อมใช้งานผ่าน HTTP หรือเพียงแค่ใช้ URL โดยตรงจาก toptal.com .
เนื่องจากการสร้างโปรแกรมรวบรวมข้อมูลเว็บเพียงเพื่อให้ได้ชื่อนักพัฒนาชั้นนำใน ApeeScape อาจเป็นทางอ้อมสำหรับบทความนี้มากเกินไปฉันจึงสร้างไฟล์ JSON เพื่อให้คุณใช้สำหรับ Android , JavaScript และ ios .
ในแอปของคุณสิ่งแรกที่คุณต้องทำคือขอการเข้าถึงอินเทอร์เน็ตจากระบบปฏิบัติการ Android ของคุณ เพิ่มบรรทัดต่อไปนี้ในไฟล์ Manifest ของคุณ
|_+_|
โปรดทราบว่า Glass ไม่อนุญาตให้คุณบล็อกเธรดหลักโดยใช้คำขอ HTTP โดยตรง คุณจะต้องจัดการการดาวน์โหลด JSON และแต่ละภาพในแบบอะซิงโครนัส คุณสามารถใช้งาน async สร้างบริการดาวน์โหลดหรือจุดประสงค์ของคุณเองหรืออะไรก็ได้ที่คุณต้องการในงานประจำวันของคุณ
การสร้างฟังก์ชันนี้ไม่ได้มีไว้สำหรับ Google Glass เท่านั้นดังนั้นฉันจะข้ามข้อมูลโค้ดไป หากคุณก้าวไปข้างหน้าและทำให้ฟังก์ชันสุดท้ายนี้ใช้งานได้การ์ดโปรไฟล์ของคุณควรมีลักษณะดังนี้:
สรุปบทช่วยสอน
ฉันหวังว่าคุณจะสนุกตามบทแนะนำการพัฒนา Google Glass และสร้างแอปพลิเคชัน Glassware ตัวแรกของคุณ ถึงตอนนี้คุณควรสบายใจกับแนวคิดที่ว่าการเขียนแอปพลิเคชันสำหรับ Glass นั้นไม่ได้แตกต่างจากแพลตฟอร์ม Android อื่น ๆ มากนัก
ณ จุดนี้คุณได้เรียนรู้วิธีขยายหน้าจอหลักที่เปิดใช้งานด้วยเสียงของ Google Glass วิธีสร้างเมนูสั่งงานด้วยเสียงของคุณเองและวิธีรวมการควบคุมด้วยเสียงกับท่าทางสัมผัส คุณควรเข้าใจแนวคิดและส่วนประกอบพื้นฐานสำหรับ Glass UI เช่นการ์ดเลย์เอาต์และองค์ประกอบต่างๆ คุณได้เห็นวิธีสร้างการ์ดแบบไดนามิกและวิธีนำทางระหว่างกิจกรรมต่างๆ
หากต้องการเจาะลึกยิ่งขึ้นไปที่แหล่งข้อมูลสำหรับนักพัฒนาซอฟต์แวร์ของ Google ที่ Developers.google.com/glass . เมื่อคุณเริ่มสร้างแอปพลิเคชันที่ซับซ้อนมากขึ้นจะพิสูจน์ได้ว่าเป็นแหล่งข้อมูลที่มีประโยชน์มาก
โปรดทราบว่า Glass ยังอยู่ในขั้นตอนการพัฒนาและมีแนวโน้มว่าจะมีการปรับปรุงอีกมากมายก่อนที่จะออกสู่ตลาดผู้บริโภค ด้วยเหตุนี้ฉันจึงมีข้อสังเกตที่สำคัญสำหรับคุณ:
มีงานเหลืออยู่มากมายสำหรับการจดจำเสียงและคุณอาจจับได้ว่าตัวเองกำลังตะโกนใส่เพื่อนในจินตนาการขณะพยายามเริ่มทำกิจกรรมหรือกรอกข้อมูลบางอย่าง ไม่ต้องกังวลเพราะทุกคนที่พยายามพัฒนา Google Glass จะรู้สึกเหมือนกันดังนั้นคุณจึงไม่ได้อยู่คนเดียว
เทคโนโลยีจะดีขึ้นและแก้วจะพร้อมสำหรับการขายปลีกในเวลาไม่นาน แน่นอนว่าจะต้องสร้างกระแสคลื่นขนาดใหญ่เมื่อมันเข้าสู่ร้านค้าดังนั้นฉันหวังว่าคุณจะตื่นเต้นเหมือนกับฉันที่ได้เป็นหนึ่งในคนแรก ๆ ที่ได้เป็นผู้นำเทคโนโลยีที่น่าตื่นเต้นนี้!
ตะโกนออกไป : ภาพหน้าจอในบทความนี้สร้างขึ้นโดยใช้ไฟล์ [ป้องกันอีเมล] .
