Ein Tutorial für angehende Google Glass-Entwickler: Erstellen Sie Ihre erste Glass-App

Google Glass ist eine futuristische Technologie, die verspricht, die Art und Weise zu revolutionieren, wie wir unsere Geräte verwenden, um mit der Welt zu interagieren. Aber was ist aus Sicht eines Entwicklers so besonders daran, für das Glas zu entwickeln? Die Antwort lautet „Nichts!“ Tatsächlich ist Google Glass aus der Sicht eines erfahrenen Android-Entwicklers nur ein weiteres Android-Gerät mit einem sehr kleinen Bildschirm und eingeschränkten Funktionen!

Die Tatsache, dass jeder mit Android-Entwicklungskenntnissen Mitglied dieser „Elite“-Community futuristischer Wearable-Tech-Evangelisten werden kann, ist Teil dessen, was Google Glass so großartig macht. Klar, man muss ein paar neue Dinge lernen, wie zum Beispiel den Unterschied zwischen „Immersion“ und „Active Card“, aber wie man sehen wird, ist die Lernkurve nicht steil.

Der Zweck dieses Google Glass-Tutorials besteht darin, die Grundlage für die Entwicklung einer beliebigen Glass-Anwendung zu schaffen, indem eine einfache App erstellt wird, die alle gängigen Schritte umfasst. Mein Ziel ist es, Ihnen etwas Zeit beim Recherchieren und Ausprobieren zu ersparen und es Ihnen zu ermöglichen, Ihre erste Glass-Anwendung so schnell wie möglich auszuführen.

In diesem Tutorial gehen wir zunächst darauf ein, wie Sie Ihre Entwicklungsumgebung einrichten und Ihre Google Glass mit Ihrem Computer verbinden. Dann erstellen wir eine einfache „Hello World“-Glass-App, die benutzerdefinierte Sprachbefehle und die Integration mit dem Glass-Startmenü enthält. Sobald Sie Ihre erste Anwendung entwickelt und auf Ihrem Glass ausgeführt haben, lernen Sie die Grundlagen der Navigation in Glass-Anwendungen, sprachgesteuerten Menüs und der Erstellung dynamischer Inhalte kennen.

So kommen Sie an Bord

Noch befindet sich Glass in einer Art „Beta-Testing“-Phase, für die Google den Begriff „Explorer Program“ erfunden hat. Wie auch immer Sie es nennen, Glass ist noch nicht etwas, das Sie wie ein Smartphone im Geschäft bekommen können. Leider haben Android-Entwicklungstools immer noch keinen Emulator, mit dem Sie Ihre Anwendung ohne tatsächliche Hardware entwickeln können.

Um Ihre Anwendung auszuführen und zu debuggen, müssen Sie sich also über das Explorer-Programm ein echtes Google Glass besorgen. Um am Programm teilzunehmen, besuchen Sie die Anmeldeseite und melden Sie sich für den Zugang an. Bereiten Sie nach der Genehmigung Ihre Kreditkarte vor und warten Sie, bis Ihr Glas geliefert wird. Die Explorer-Version von Glass kostet derzeit 1.500 USD, aber der Preis wird voraussichtlich deutlich sinken, bevor das Gerät in die Läden kommt.

Für die Glaslosen

Aufgrund des Fehlens eines Emulators ist es erforderlich, dass Sie über echte Google Glass-Hardware verfügen, um die App in diesem Tutorial (oder eine andere Glass-App) zu entwickeln, aber wenn die Anschaffung eines Emulators Ihr Budget übersteigt, fühlen Sie sich nicht entmutigt Es lohnt sich auf jeden Fall, weiterzumachen. Was im Tutorial deutlich wird, ist, dass die Entwicklung für Glass fast dasselbe ist wie die Entwicklung für jede andere Android-Plattform!

Wenn Sie Google Glass noch nicht verwendet haben, aber genauso begeistert davon sind wie ich, sehen Sie sich diese beiden Videos an, da sie Ihnen genügend Input geben sollten, um die Grundlagen der Benutzeroberfläche zu verstehen.

• Einführung in Google Glass
• Anleitung zu Google Glass: Erste Schritte

Hier gibt es noch mehr nützliche Videos zur Einrichtung und Navigation und viele weitere Details zur Benutzeroberfläche hier.

Regeln des Engagements

Dieses Tutorial für Google Glass-Entwickler geht von folgenden Annahmen aus:

• Ich gehe davon aus, dass Sie die Grundlagen der Navigation und Einrichtung des Glass verstehen. Wenn Sie Glass noch nie verwendet haben, sehen Sie sich die oben verlinkten Videos an.
• Ich gehe davon aus, dass Sie die Grundlagen der Android-Entwicklung verstehen: Aufbau der Projektdateien, Konfiguration von Android-Anwendungen etc.
• Ich werde Android Studio verwenden, aber die Anweisungen sollten in fast jede Android-Entwicklungsumgebung übersetzt werden können. Android Studio befindet sich noch in der „Beta“, aber Glass auch. Haben Sie keine Angst, es zu verwenden - es ist wirklich ein großartiges Produkt. Android Studio steht hier zum Download bereit.

Einrichten Ihres Google Glass

Gut, fangen wir an!

Als erstes müssen Sie den Debug-Modus auf Ihrem Glass aktivieren. Sie müssen so etwas auf jedem Android-Gerät tun, das Sie für die Entwicklung Ihrer Apps verwenden, damit Ihnen das vielleicht vertraut ist. Um die Fehlerbehebung zu aktivieren, wischen Sie zu „ Einstellungen “ -> „Geräteinfo“ und tippen Sie dann auf, um das Gerätemenü zu öffnen. Wählen Sie „ Debug einschalten “ und es wird aktiviert.

Als nächstes müssen Sie Ihre Entwicklungsumgebung vorbereiten. Die aktuelle Version von Google Glass erfordert, dass Sie die API-Version 19 verwenden, also stellen Sie sicher, dass sie installiert ist. Außerdem muss Ihr Glass Development Kit installiert sein. Verwenden Sie Ihren Android SDK Manager, um diese beiden Pakete zu installieren, falls Sie dies noch nicht getan haben.

Hallo Welt!

Machen wir also unser erstes Stück „Glaswaren“. (Ja, Google hat einen anderen Begriff geprägt! „Glassware“ ist der Name für jede Anwendung, die auf Google Glass läuft). Wir beginnen damit, ein gutes altes „Hello World!“ zu entwickeln. Anwendung. Wie die meisten großen Android-Entwicklungsumgebungen füllt Android Studio neue Apps automatisch mit einer Vorlage, um diesen berühmten Satz anzuzeigen. Als Ergebnis erhalten Sie "Hello World!" Das Einrichten und Ausführen ist lediglich eine Übung in der grundlegenden App-Bereitstellung.

Klicken Sie in Android Studio auf „ Neues Projekt “ und füllen Sie das Projektformular aus. Sie können etwas Ähnliches verwenden:

Achten Sie bei der Auswahl von Formfaktoren und API darauf, „ Glass “ und API 19 auszuwählen

Wählen Sie „ Immersionsaktivität “ als Startaktivität aus.

Sie erinnern sich, dass ich erwähnt habe, dass Sie den Unterschied zwischen Immersion und Live Card lernen müssen? Der Artikel zur Benutzeroberfläche von Google erklärt die verschiedenen Arten von Glasbildschirmen. Hier ist eine kurze Zusammenfassung:

• Live-Karten werden der Glass-Timeline hinzugefügt und zeigen Echtzeitinformationen über etwas durch Hochfrequenz-Updates an. Sie laufen ständig im Hintergrund, auch wenn Benutzer mit verschiedenen Karten interagieren. Dies ermöglicht Benutzern Multitasking mit ständigem Zugriff auf verschiedene Arten von Echtzeitinformationen.

• Immersions sind vollständig anpassbare Bildschirme, die außerhalb der Timeline-Erfahrung ausgeführt werden. Diese ermöglichen es Ihnen, Ihre eigene Benutzeroberfläche zu entwerfen und Benutzereingaben so zu verarbeiten, wie Sie es für richtig halten. Das werden wir verwenden!

Belassen Sie im nächsten Bildschirm des Assistenten die Standardwerte für „ Name “ und „ Titel “ und klicken Sie auf „ Fertig stellen “.

Nachdem Gradle sich um Ihre Abhängigkeiten gekümmert und Ihr Projekt fertig gemacht hat, ist es an der Zeit, Ihr Glass-Plug-in aufzusetzen. Das ist jetzt eine futuristische Entwicklung!

Vorausgesetzt, dass alle Ihre Android ADB-Treiber vorhanden sind und Ihr Glass von Ihrem System erkannt wird, sollten Sie Ihr Glass in Ihre Geräteliste aufnehmen.

Wenn Sie Ihr Gerät zum ersten Mal mit einem Computer verbinden, werden Sie von Glass um Genehmigung/Vertrauensstellung gebeten. Tippen Sie einfach auf Ihr Glas, um die Verbindung zuzulassen, und Sie sollten bereit sein.

Klicken Sie auf „ Ausführen “ und stellen Sie Ihr „Standard-APK“ mit „MainActivity“ als Startaktivität für den Start auf einem „USB“-Gerät bereit.

Nach ein paar Sekunden sollten Sie auf Ihrem Glass-Bildschirm so etwas sehen:

Hurra! Ihre Anwendung wird auf Glass ausgeführt! Und alles, was Sie tun mussten, ist, beim Erstellen der App einige Standardwerte einzugeben!

Da wir nichts anderes angegeben haben, zeigt Glass Ihre App unter dem Namen „Demo anzeigen“ an. Wenn Sie zum Startbildschirm zurückwischen und dann tippen, um das App-Menü zu öffnen, wird es wie folgt aufgelistet:

Ein bisschen Polnisch

Ok, Sie haben es zum Laufen gebracht, aber das sieht nicht wie eine echte Glass-Anwendung aus, und Sie möchten nicht, dass die Anwendung durch „Demo anzeigen“ gestartet wird.

In diesem Tutorial werden wir es nur ein wenig optimieren, um das echte Gefühl zu bekommen.

Einstellen des Themas

Erstens möchten Sie keinen Ihrer kleinen Glasbildschirme mit dieser hässlichen Titelleiste der Aktivität „Hello World Immersion“ in Anspruch nehmen, und Sie möchten auf keinen Fall, dass Ihr Bildschirm grau mit schwarzer Schrift ist. Um dies zu beheben, müssen wir nur das Thema auf unserem Android wechseln und Glass OS sich darum kümmern lassen.

Öffnen res/values/styles.xml zum Bearbeiten. Es sollte folgenden Inhalt haben:

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

Ändern Sie einfach android:Theme.Holo.Light in android:Theme.DeviceDefault . Dies sollte sich automatisch um das Anwendungslayout und die Farben kümmern, indem das Glass-Standarddesign verwendet wird.

Aussehen des Menüs definieren

Ok, das nächste, was wir in diesem Glass-Entwicklungstutorial tun möchten, ist, unsere Anwendung so einzurichten, dass sie einen richtigen Namen und einen netten sprachgesteuerten Start hat. Öffnen Sie Ihr Android-Manifest ( AndroidManifest.xml ) und fügen Sie das folgende obige <application… -Tag hinzu:

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

Der Grund, warum Sie DEVELOPMENT -Berechtigungen verwenden möchten, ist, dass Sie mit benutzerdefinierten Sprachsteuerungen spielen können. Google ist ziemlich streng, welche Sprachbefehle in genehmigten Glass-Apps erlaubt sind, und alle neuen Befehle müssen genehmigt werden. Da dieses Tutorial zu Lernzwecken dient und Sie diese Anwendung nicht an den offiziellen Glassware-Shop senden, sollten Sie sich darüber keine Sorgen machen. Aktivieren Sie einfach die DEVELOPMENT -Berechtigungen und Sie haben Zugriff auf „nicht aufgeführte Sprachbefehle“. Weitere Informationen hierzu finden Sie auf dieser GDK-Seite.

voice_trigger.xml zum Bearbeiten öffnen. Hier wird der Sprachbefehl zum Starten Ihrer Anwendung definiert. Es sollte sich im Ordner res/xml/ befinden. Sie sollten Inhalte ähnlich wie diese erhalten:

 <trigger command="SHOW_ME_A_DEMO" />

Anstatt „Zeig mir eine Demo“ zu sagen, um unsere App zu starten, sagen wir einfach den Namen der App. Ändern Sie den Inhalt der Datei in:

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

Wenn Sie zu Ihrer Manifestdatei zurückkehren, stellen Sie möglicherweise fest, dass Ihr android:label="@string/app_name" automatisch aktualisiert wurde, um auch die Ressourcenzeichenfolge @string/app_name anstelle des fest codierten Hello Glass -Werts wie zuvor zu verwenden . Wenn diese Einstellung nicht aktualisiert wurde, stellen Sie sicher, dass Sie den Wert auf android:label="@string/app_name" .

Und wie heißt Ihre App genau? Wenn Sie res/values/strings.xml strings.xml öffnen, sollte Ihr app_name wie folgt aufgeführt werden:

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

Dies sollte die Dinge für Ihre erste Hello Glass-Anwendung abschließen. Mal sehen, wie es jetzt funktioniert!

Auf Ihrem Startbildschirm können Sie „Ok Glas“ sagen, um das Sprachmenü aufzurufen. Ihre Anwendung befindet sich jetzt in der Liste der sprachaktivierten Befehle.

Mit diesem Tutorial, das Sie anleitet, sieht der Startbildschirm Ihrer Glass-App jetzt so aus.

Wenn Sie „ Hallo Glass “ sagen, sollte Ihre Anwendung starten und Sie sollten ein standardisiertes Glass-Erlebnis erhalten:

Wenn Sie Ihre Anwendung nicht mit Ihrer Stimme aktivieren möchten, tippen Sie einfach auf Ihren Startbildschirm und Sie werden sehen, dass Ihre Anwendung im Menü verfügbar ist:

Stimme oder Berührung? Verwende beide!

Es ist sehr wichtig, dass Sie genau auf die Benutzeroberfläche Ihrer Anwendung und die Interaktion Ihrer Benutzer damit achten. Denken Sie daran, dass Ihre Benutzer nicht immer in der Lage sind, ihre Stimme zu verwenden – zum Beispiel, während sie sich einen Vortrag oder eine Präsentation ansehen. Alternativ haben sie möglicherweise alle Hände voll zu tun und sind nicht in der Lage, Berührungen zu verwenden. Ich schlage vor, dass Sie, wann immer möglich, sowohl Touch- als auch Sprachmenüinteraktion bereitstellen, damit Ihre Benutzer parallel mit Sprache und Touchpad durch Ihre Anwendung navigieren können.

Eine echte Anwendung - Toptal Finder

Nachdem Sie nun mit der Glass-Entwicklung vertraut sind und Hello Glass erstellt haben, ist es an der Zeit, eine echte Anwendung zu erstellen, die neue Glass-Funktionen zum Laufen bringt. Lassen Sie uns eine App erstellen, mit der Sie Profile der besten Toptal-Entwickler basierend auf der Entwicklungsplattform durchsuchen können.

Die Struktur unserer beispielhaften Glass-Anwendung ist einfach:

1. Wir möchten, dass unser Startbildschirm das Toptal-Logo mit einem Sprach- und Tipp-aktivierten Menü enthält, mit dem wir die Entwicklungsplattform auswählen können, für die wir einen Entwickler benötigen.
2. Nachdem wir eine Plattform ausgewählt haben, möchten wir eine Liste der Entwickler mit ihrem Bild und Namen erhalten. Entwicklerprofile werden in Form einer scrollbaren Liste persönlicher Karten angezeigt.
3. Wenn wir ein Entwicklerprofil anzeigen, möchten wir in der Lage sein, es zu Favoriten hinzuzufügen oder eine Einstellungsanfrage zu senden.

Die Grundlagen

Lassen Sie uns kurz zusammenfassen, was Sie bereits zu Ihrem Android-Wissen hinzugefügt haben:

1. So richten Sie Ihre Entwicklungsumgebung ein, um Glassware zu erstellen.
2. So konfigurieren Sie Ihre Anwendung für die Verwendung des standardmäßigen Glassware-GUI-Designs.
3. So starten Sie Ihre Anwendung mit benutzerdefinierten Sprachbefehlen und Menünamen.

Mit diesem Wissen bringen Sie Ihre neue App zum Laufen. Sie können entweder die Hello Glass-App von oben aktualisieren oder eine neue App starten, indem Sie denselben Schritten folgen. Nennen Sie diese Anwendung „ Top Finder “ und lassen Sie Ihre voice_trigger.xml -Datei so aussehen.

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

Die Einschränkung network="true" weist Glass an, beim Starten dieser App nach Netzwerkkonnektivität zu suchen, die wir benötigen, um eine Verbindung zu den Toptal-Entwicklerlisten herzustellen. Wenn keine Verbindung besteht, zeigt Glass eine Warnmeldung an.

Startbildschirm

Lassen Sie uns den Startbildschirm unserer Anwendung so aussehen lassen:

Wenn Sie die Meldung „Ok Glas“ auf Ihrem Bildschirm sehen, bedeutet dies, dass die Anwendung an dieser Stelle ein sprachaktiviertes Menü hat. Wenn Sie hier den Satz „ok Glas“ sprechen, wird das Sprachmenü für diesen Ort aktiviert. Dieser Ausdruck ist von Glass vordefiniert und Sie können ihn nicht ändern.

Sie können sich „ok glass“ als ein „Anwendungsmenü“ vorstellen, genau wie Sie es in Ihrer Smartphone-/Tablet-Entwicklung verwendet haben, und es hat genau die gleiche Rolle. So wie Sie auf Ihrem Bildschirm auf das „Anwendungsmenüsymbol“ (häufig 3 Punkte oder Linien) „tippen“ würden, um ein Android-Anwendungsmenü zu öffnen, müssen Sie „ok glass“ sagen, um das sprachaktivierte Menü in Ihrer Glassware-App zu öffnen.

Um das Menü „Ok Glas“ zu aktivieren, müssen Sie FEATURE_VOICE_COMMANDS von der API anfordern. Fügen Sie dazu die folgende Zeile in Ihrem onCreate in Ihrer MainActivity :

 getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS);

Jede Aktivität, die diese Funktion enthält, wird unten in der Mitte mit dem Text „Ok Glass“ gerendert.

Als nächstes müssen Sie ein Menü für den Hauptbildschirm erstellen. Erstellen Sie in Ihrem Ordner res/menu eine neue XML-Menüdefinition mit dem Namen main.xml . Der Einfachheit halber werden wir nur drei Toptal-Entwicklerplattformen aktivieren, aber Sie können die Änderungen nach Belieben vornehmen.

Es sollte folgenden Inhalt haben:

 <?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>

Sie fragen sich vielleicht, warum ich eher lange Menütitel gewählt habe, anstatt einfach nur Android, JavaScript und iOS. Nun, der Grund ist sehr einfach. Die Jungs vom Glass-Entwicklungsteam verbessern die Spracherkennung noch. Es wird empfohlen, zwei oder drei Wörter in Ihren Menüs zu verwenden, damit Glass sie leichter erkennt.

Ich habe bereits erwähnt, dass sich das „Ok-Glas“ -Menü nicht von Ihrem Standard-Android-Anwendungsmenü unterscheidet. Das Anhängen eines Menüs an eine Aktivität ist praktisch dasselbe. Überschreiben Sie einfach den Handler onCreatePanelMenu in Ihrer MainActivity und erweitern Sie das soeben erstellte Hauptmenü:

 @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); }

Jetzt müssen wir einen Menühandler hinzufügen. Erstellen Sie zuvor eine leere Methode namens findDevelopers . Wir werden später darauf zurückkommen, um eine Suche zu starten und die Ergebnisse anzuzeigen. Danach können Sie Ihren Menühandler überschreiben.

 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); }

Jetzt ist es an der Zeit, den Startbildschirm unserer Google Glass-Beispielanwendung hübsch zu gestalten. Importieren Sie ein Toptal-Logo als res/drawable/logo.png in Ihre Anwendung. Ich habe dieses Bild verwendet:

Nehmen Sie in Ihrer MainActivity -Klasse die folgenden Änderungen vor.

Stellen Sie sicher, dass die folgenden privaten Variablen am Anfang der Klasse deklariert sind:

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

Ändern Sie die buildView Methode, um das Kartenlayout anzupassen:

 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(); }

Und ändern Sie Ihren onCreate Handler wie folgt:

 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); }

Wie ich bereits sagte, möchten wir ein durch Tippen aktiviertes Menü zusammen mit „Ok Glas“ einschließen, also aktivieren Sie einfach Gesten, wie Sie es in Ihrer Android-App tun würden. Fügen Sie Ihrer MainActivity -Klasse die folgenden Methoden hinzu:

 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; }

Das sollte es sein! Sie können jetzt Ihre App starten und beide Methoden der Menüaktivierung ausprobieren. Wenn Sie „ok Glas“ sagen, werden drei Menüpunkte auf dem Bildschirm angezeigt, und wenn Sie auf das Glas tippen, wird ein scrollbares Menü geöffnet. Um durch die Menüpunkte zu navigieren, können Sie vor und zurück wischen.

So sieht das Sprachmenü aus:

Und hier ist das Gestenmenü:

Wenn Sie einen Menüpunkt auswählen, passiert nichts, da Ihre findDevelopers Methode noch implementiert werden muss.

Entwicklerbildschirme

Wir werden weiterhin das standardmäßige Glass Card-Layout verwenden, mit einem Bild auf der linken Seite, Text auf der rechten Seite und einigen Fußzeileninformationen. Weitere Informationen zu Best Practices für die Gestaltung Ihrer Karten finden Sie im Google Glass-Styleguide.

Unser Entwicklerprofil wird durch einfache Eigenschaften definiert:

1. Name
2. Bild
3. Entwicklungsplattform

Stellen wir also sicher, dass unsere App die richtige Struktur der Klassen hat. Erstellen Sie eine neue Klasse mit dem Namen DeveloperModel.java in Ihrem java/models -Ordner. Wir möchten, dass diese Klasse serialisierbar ist, da sie Profile enthält, die sich in einer Liste befinden.

 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; } }

Wir möchten, dass unsere Karten eng an unsere Entwicklerprofildaten gebunden sind. Da der standardmäßige CardScrollAdapter in Bezug auf sein Datenmodell etwas generisch ist, müssen wir ihn erweitern und uns zu eigen machen. Erstellen Sie DeveloperAdapter.java in Ihrem java/adapters Ordner:

 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); } }

Wir möchten nicht, dass unsere Suchergebnisse auf dem Startbildschirm der Anwendung hinzugefügt werden, also erstellen wir eine neue Aktivität, die die Suche durchführt und die Ergebnisse anzeigt. Erstellen Sie eine neue Aktivität, ResultsActivity , neben Ihrer MainActivity (wahrscheinlich in java/com.helloglass ).

Stellen Sie sicher, dass es extends Activity .

Als Nächstes müssen wir ein Menü für unsere Entwicklerprofilkarten angeben. Erstellen Sie ein neues Menü, developer.xml , mit folgendem Inhalt:

 <?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>

Um die Übergabe von Parametern zwischen ResultsActivity und MainActivity zu ermöglichen, fügen Sie die folgenden Zeilen am Anfang der ResultsActivity -Klasse hinzu:

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

Stellen Sie sicher, dass Sie Ihre neue Aktivität zu Ihrer Manifestdatei hinzufügen:

 <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>

Das Einrichten des Startbildschirms von ResultsActivity und das Konfigurieren von Karten ist dem sehr ähnlich, was wir bei MainActivity . Überprüfen Sie zunächst, ob Sie Ihre Karten und Ihren Scroller zu Beginn definiert haben:

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

Erstellen Sie eine temporäre Suchmethode, auf die wir später zurückkommen werden, um sie zu implementieren. Das Hinzufügen neuer Karten zur Profilliste ist so einfach wie das Hinzufügen von Elementen zu einem Array. Wir nennen diese Methode auch findDevelopers , aber diese gehört zu 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); }

Gehen Sie nun zurück zu Ihrer MainActivity und aktualisieren Sie dort ResultsActivity , um Ihre findDevelopers zu starten und die platform -Eigenschaft zu übergeben:

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

Hängen Sie Ihr Entwicklermenü an ResultsActivity an. Sie können das Menü auf jeder Profilkarte öffnen.

 @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); }

Aktivieren Sie wie zuvor Gesten, um das Touchpad auf Ihrem Glass zu handhaben, wenn ResultsActivity angezeigt wird. Rufen Sie dazu einfach openOptionsMenu() in Ihrer onGesture(Gesture gesture) -Methode auf:

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

Fügen Sie außerdem einen Menü-Handler zu entwicklerbezogenen Aktionen hinzu. Wir werden vorerst einfache Toast-Nachrichten hinterlassen.

 @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); }

Jede Anwendung sollte einige schöne visuelle Elemente, Symbole usw. verwenden. Das Google Glass-Team hat eine sehr große Menge allgemeiner standardisierter Symbole bereitgestellt, die Glass-Entwickler kostenlos in ihren Anwendungen verwenden können. In ihrer Bibliothek finden Sie einen vollständigen Satz von Standard-Glassymbolen sowie Schriftarten

Im Moment brauchen Sie nur ein Symbol ic_person_50.png , also fahren Sie fort und laden Sie es in Ihren Ordner res\drawable herunter. Wir werden dieses Symbol verwenden, anstatt ein Bild des Entwicklers herunterzuladen.

Das letzte, was in unserem Tutorial zur Glass-App-Entwicklung vorerst übrig bleibt, ist das Überschreiben unseres onCreate auf ResultsActivity , wo wir prüfen, welche Entwicklungsplattform von MainActivity weitergeleitet wurde, und unsere Liste füllen.

 @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); }

Sie können die Methoden onResume und onPause genauso belassen wie in Ihrer MainActivity .

Wenn Sie Ihre Anwendung jetzt starten, können Sie anhand des auf MainActivity ausgewählten Menüs überprüfen, wie Ihre Entwicklerprofile im Handumdrehen erstellt werden. Auch hier haben Sie die Möglichkeit, Ihr Menü mit „Ok-Glas“ oder durch Antippen des Touchpads oder per Sprachaktivierung anzuzeigen. So sieht das Profil „10. Android-Entwickler“ im Moment aus:

Antippen öffnet das Touch-Menü:

Und wenn Sie „ok Glas“ sagen, wird das Sprachmenü aufgerufen:

Streichen Sie von der Liste nach unten, um zum Startbildschirm Ihrer App zurückzukehren.

Abrufen von Profilen aus dem Internet

Lassen Sie uns zum Abschluss das Menü mit echten Informationen für die Top 10 Toptal-Entwickler für JavaScript, Android und iOS füllen.

Sie müssen ihre Profilbilder herunterladen und über HTTP verfügbar machen oder einfach URLs direkt von toptal.com verwenden.

Da das Erstellen eines Webcrawlers, nur um die Namen der Top-Entwickler in Toptal zu erhalten, für diesen Artikel möglicherweise ein zu großer Umweg ist, habe ich JSON-Dateien erstellt, die Sie für Android, JavaScript und iOS verwenden können.

In Ihrer App müssen Sie als Erstes den Zugriff auf das Internet von Ihrem Android-Betriebssystem aus anfordern. Fügen Sie Ihrer Manifest-Datei die folgende Zeile hinzu

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

Beachten Sie, dass Glass es Ihnen nicht erlaubt, den Haupt-Thread durch direkte Verwendung von HTTP-Anforderungen zu blockieren. Sie müssen JSON-Downloads und einzelne Bilder asynchron verarbeiten. Sie können eine asynchrone Aufgabe verwenden, Ihren eigenen Download-Dienst oder -Intent erstellen oder was auch immer Sie bei Ihrer täglichen Arbeit bevorzugen.

Das Erstellen dieser Funktion ist nicht spezifisch für Google Glass, daher überspringe ich Code-Snippets. Wenn Sie vorankommen und dieses letzte bisschen Funktionalität zum Laufen bringen, sollten Ihre Profilkarten so aussehen:

Tutorial-Abschluss

Ich hoffe, Sie hatten Spaß daran, dieses Google Glass-Entwicklungstutorial zu verfolgen und Ihre erste Glassware-Anwendung zu erstellen. Inzwischen sollten Sie mit der Vorstellung vertraut sein, dass das Schreiben von Anwendungen für Glass nicht viel anders ist als für jede andere Android-Plattform.

An dieser Stelle haben Sie gelernt, wie Sie den sprachaktivierten Startbildschirm von Google Glass erweitern, wie Sie Ihre eigenen sprachaktivierten Menüs erstellen und wie Sie Sprachsteuerung mit Berührungsgesten kombinieren. Sie sollten auch die Konzepte und grundlegenden Bausteine ​​für die Glass-Benutzeroberfläche verstehen, z. B. Karten, Layouts und Elemente. Sie haben gesehen, wie Sie Karten dynamisch erstellen und zwischen verschiedenen Aktivitäten navigieren.

Um tiefer einzutauchen, besuchen Sie die Entwicklerressourcen von Google unter developer.google.com/glass. Wenn Sie anfangen, komplexere Anwendungen zu erstellen, wird es sich als sehr hilfreich erweisen.

Bitte denken Sie daran, dass sich Glass noch in der Entwicklungsphase befindet und wahrscheinlich noch viele weitere Verbesserungen implementiert werden müssen, bevor es auf den Verbrauchermarkt kommt. In diesem Sinne habe ich einen wichtigen Hinweis für Sie:

Es gibt noch viel Arbeit bei der Spracherkennung und Sie könnten sich dabei erwischen, wie Sie Ihren imaginären Freund anschreien, während Sie versuchen, Ihre Aktivität zu starten oder einige Informationen einzugeben. Keine Sorge – jeder, der sich an der Entwicklung von Google Glass versucht, geht es genauso, also sind Sie nicht allein.

Die Technologie wird sich verbessern, und Glas wird in kürzester Zeit für den Einzelhandel bereit sein. Es wird sicher große Wellen schlagen, sobald es in die Läden kommt, also hoffe ich, dass Sie genauso aufgeregt sind wie ich, einer der Ersten zu sein, der an der Spitze dieser aufregenden Technologie steht!

Shout Out : Screenshots in diesem Artikel wurden mit Droid@Screen erstellt.