android wear - workshop por @cesarnogcps

67
WORKSHOP SECOMP UNESP 2016 19/10/2016 Ok, Google. Como fazer um aplicativo Android Wear?

Upload: cesar-augusto-nogueira

Post on 14-Apr-2017

161 views

Category:

Technology


2 download

TRANSCRIPT

WORKSHOPSECOMP UNESP 2016

19/10/2016

Ok, Google.

Como fazer um aplicativo

Android Wear?

Cesar A. NogueiraAnalista de Software

Instituto de Pesquisas EldoradoSouJava Campinas JUG Leader

Ex-estagiário de Engenharia de Software na IBM Lenexa, KS - USA

www.cesarnogueira.me

UI baseada em um stream de cards

Clima Trânsito Lembretes Vôos

Batimentos Cardíacos

Atender/rejeitar ligações

Busca por voz

Navegação Música

Navegação sem mobile

Música sem mobile

Lembretes

Voice memos

UX para wear

NÃO é UX para um

(mini) smartphone

http://minuum.com/typing-on-android-wear/

Lançadas

automaticamenteGlanceable

Princípios de UI

Micro-interações

Princípios de UI

Não interrompa o usuário…

Crie grandes áreas de toque

Não seja um

“shoulder tapper"

Desenvolvendo para Android Wear

Android Wear

SmartWatch

ou Emulador

O que vamos precisamos?

Android Studio

Escolha seu modelo

LG

G Watch R

Motorola

Moto 360

LG Watch

Urban Silver

Escolha seu modelo

Asus

ZenWatchLG G Watch

Samsung

Gear Live

Sony

SmartWatch 3

Android Wear App

Digite no Terminal

adb forward tcp:5601 localabstract:/adb-hubadb connect localhost:5601

Caso não dê certo com a porta 5601, tente com outra porta:

adb forward tcp:4444 localabstract:/adb-hubadb connect localhost:4444

adb -d forward tcp:5601 tcp:5601

Depuração USB ou Bluetooth

adb forward tcp:4444 localabstract:/adb-hub; adb connect localhost:4444

Notificações Sincronizadas

Comandos de Voz

Aplicações Wear

Envio e sincronização de dados

APIs

Notificações Sincronizadas

Comandos de Voz

Aplicações Wear

Envio e sincronização de dados

APIs

Notificações simples

Notificações com ação

Notificações com ação

✓ Se quiser a ação no mobile e no wearable, use a classe NotificationCompat.Action.

✓ Se quiser a ação apenas no wearable use o método addAction(Action) da classe NotificationCompat.WearableExtender.

Notificações empilhadas

Notificações com páginas

Detalhes sobre notificações…

✓ Notificações disparadas pelo mobile, são exibidas no mobile e no wear, mas são executadas no mobile.

✓ Notificações disparadas pelo wear, só sãoexibidas e executadas no wear.

✓ Você pode exibir notificações apenas no mobile ou apenas no wear.

Notificações Sincronizadas

Comandos de Voz

Aplicações Wear

Envio e sincronização de dados

APIs

Respondendo com voz

Comandos de vozCall me a car/taxi Take a note

Set alarm for 8 AM Set timer for 10 minutes

Start/stop bike Start/stop a run

Start/stop workout Show heart rate

Show step count App Name :)

https://developer.android.com/training/wearables/apps/voice.html

Notificações Sincronizadas

Comandos de Voz

Aplicações Wear

Envio e sincronização de dados

APIs

Aplicações Wear

MinhaApp

MobileAPK WearAPK

Dependências

dependencies {compile wearApp compile compile

fileTree(dir: 'libs', include: ['*.jar']) project(':wear') ‘com.android.support:appcompat-v7:23.+''com.google.android.gms:play-services-wearable:+'

}

dependencies {compile compile compile

fileTree(dir: 'libs', include: ['*.jar']) 'com.google.android.support:wearable:1.3.0' 'com.google.android.gms:play-services-wearable:+'}

Componentesandroid.support.wearable.view

WatchViewStub BoxInsetLayout WearableListView CircledImageView GridViewPager

GridPagerAdapter FragmentGridPagerAdapter

CardFragment DelayedConfirmationView ConfirmationActivity DismissOverlayView

Tela Quadrada ou Redonda?

Tela Quadrada ou Redonda?

BoxInsetLayout

<android.support.wearable.view.WatchViewStub xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/watch_view_stub" android:layout_width="match_parent" android:layout_height="match_parent" app:rectLayout="@layout/rect_activity_main_wear" app:roundLayout="@layout/round_activity_main_wear">

</android.support.wearable.view.WatchViewStub>

res/layout/rect_activity_main_wear.xml

res/layout/round_activity_main_wear.xml

WearableListView

WearableListView WearableListView.ClickListener WearableListView.Adapter CircledImageView

GridViewPager

GridViewPager GridPagerAdapter FragmentGridPagerAdapter CardFragmentCardFrame

2D Picker

Estrutura de um app wear

2D Picker

DelayedConfirmationView

<android.support.wearable.view.DelayedConfirmationView android:id="@+id/delayed_confirm" android:layout_width="40dp" android:layout_height="40dp" android:src="@drawable/cancel_circle" app:circle_border_color="@color/lightblue" app:circle_border_width="4dp" app:circle_radius=“16dp"/>

DelayedConfirmationView mDelayedView =

(DelayedConfirmationView) findViewById(R.id.delayed_confirm);

mDelayedView.setListener(new DelayedConfirmationView.DelayedConfirmationListener(){

@Overridepublic void onTimerFinished(View view) {}

onTimerSelected(View view) {@Overridepublic void}

});

ConfirmationActivity

Intent intent = new Intent(context, ConfirmationActivity.class); intent.putExtra(ConfirmationActivity.EXTRA_ANIMATION_TYPE,

ConfirmationActivity.SUCCESS_ANIMATION); intent.putExtra(ConfirmationActivity.EXTRA_MESSAGE,

getString(R.string.msg_sent)); context.startActivity(intent);

My app always-on!!!

public class MainWearActivity extends WearableActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState); setContentView(R.layout.activity_main_wear); setAmbientEnabled();...}

@Overridepublic void onEnterAmbient(Bundle ambientDetails) {

super.onEnterAmbient(ambientDetails);}

@Overridepublic void onExitAmbient() {

super.onExitAmbient();

@Overridepublic void onUpdateAmbient() {

super.onUpdateAmbient();}

}

DismissOverlayView

<style name="AppTheme" parent="Theme.DeviceDefault">name="android:windowSwipeToDismiss">false</item><item

</style>

Notificações Sincronizadas

Comandos de Voz

Aplicações Wear

Envio e sincronização de dados

APIs

Comunicação Mobile/Wear

MinhaApp

MobileAPK WearAPK

Google Play Services

compile ‘com.google.android.gms:play-services-wearable:9.6.1’

<meta-data android:name="com.google.android.gms.version"android:value="@integer/google_play_services_version" />

GoogleApiClient googleApiClient =new GoogleApiClient.Builder(context)

.addApi(Wearable.API)

.addConnectionCallbacks(cc)

.addOnConnectionFailedListener(cfl)

.build();

Node API

Message API

Data API

Channel API

Wearable.NodeApi.getConnectedNodes(mGoogleApiClient).setResultCallback( new ResultCallback<NodeApi.GetConnectedNodesResult>() {

@Overridepublic void onResult(NodeApi.GetConnectedNodesResult result) { Node

node = result.getNodes().get(0);}

});

Wearable.NodeApi.addListener(

mGoogleApiClient, new NodeApi.NodeListener() {@Overridepublic void onPeerConnected(Node node) {}

onPeerDisconnected(Node node) {@Overridepublic void}

});

Node API

Wearable.MessageApi.sendMessage(mGoogleApiClient, node.getId(), "/mensagens", new byte[]{ 1, 2, 3 } );

Message API

Wearable.MessageApi.addListener(mGoogleApiClient,

new MessageApi.MessageListener() {@Overridepublic void onMessageReceived(MessageEvent messageEvent) {

String String byte[]

remetente = messageEvent.getSourceNodeId(); caminho = messageEvent.getPath();dados = messageEvent.getData();

}});

PutDataMapRequest putDataMapRequest =PutDataMapRequest.create("/dados");

DataMap dataMap = putDataMapRequest.getDataMap();

dataMap.putInt("numero", dataMap.putString("nome",

1);

"Glauber");

Wearable.DataApi.putDataItem( mGoogleApiClient, putDataMapRequest.asPutDataRequest());

Data API

Wearable.DataApi.addListener(mGoogleApiClient,

new DataApi.DataListener() {@Overridepublic void onDataChanged(DataEventBuffer dataEvents) {

for (DataEvent dataEvent : dataEvents){if (dataEvent.getType() == DataEvent.TYPE_CHANGED){

DataMapItem dataMapItem =

DataMapItem.fromDataItem(dataEvent.getDataItem()); Uri uri = dataMapItem.getUri();if (uri.getPath().equals("/dados")) {

DataMap dataMap = dataMapItem.getDataMap();int numeroString nome

= dataMap.getInt("numero");= dataMap.getString("nome");

}}

}}

});

WearableListenerService extends Service implements

NodeApi.NodeListener,MessageApi.MessageListener, DataApi.DataListener

Node API

Message API

Data API

<service android:name=“com.example.android.MeuService”><intent-filter>

<actionandroid:name="com.google.android.gms.wearable.BIND_LISTENER"/>

</intent-filter></service>

Channel API

API usada para enviar arquivos de dispositivo wearable para um outro wearable or celular.

Maps!

WatchFaces

Funcionar em telas redondas e quadradas

Pense no modo interativo e ambiente

Use preto e branco para telas OLED em modo ambiente e

mantenha 95% dos pixels pretos

Acomode bem os elementos do sistema

Adicione configurações ao aplicativo do Android Wear

•Android Wear para iOS já está disponível para iPhone 5 ou superior.

•Alguns dos relógios que suportam iOS:✓ ASUS ZenWatch 2✓ Huawei Watch✓ LG Watch Urbane✓ Moto 360 (2nd Gen)✓ Moto 360 for Women✓ Moto 360 Sport.

Dúvidas?

Cesar A. NogueiraAnalista de Software

Instituto de Pesquisas Eldorado

SouJava Campinas JUG Leader

@cesarnogcps

+CesarAugustoNogueirawww.cesarnogueira.me

Obrigado,SECOMP Unesp 2016