Taller Android SHDH Ciudad Obregon

@jmsalcido & @jeshuar & #SHDHObregon

Desarrollo en AndroidDevelopers

NEXT >

Developers

Contenido esperado…

NEXT >

ojo: hay teoría que debemos ver

:^)

Developers

¿Que sabes de Android?

NEXT >

*anímense a comentar*

Que es AndroidDevelopers

Android es el sistema operativo mas popular para plataformas móviles.

Con Android puedes usar todas las aplicaciones de Google que conoces y utilizas y hay mas de 600,000 apps y juegos disponibles para mantenerte entretenido en la tienda:

- Google Play

NEXT >

Por que es popularDevelopers

Millones de personas ya usan Android

por que es el núcleo de tú dispositivo.NEXT >

Developers

Conozcamos a Android

Robot de Android, nosotros lo llamamos

Andy de cariño.

El Logo de Android no debe usarse, ni su

tipografia.

Android es conocido por estos dos amigos:

Pero eso es solo la marca.NEXT >

Developers

Quiero desarrollar YA.

Tranquilo.

Hay muchos pasos antes de siquiera comenzar a desarrollar una app.

Un montononal de TEORIA, que veremos en los siguientes… 10 o 15 minutos.

Debemos hacer lo siguiente:

Diseñar Desarrollar Distribuir

DDD

Las 3 D de Android

NEXT >

Developers

Primer D, Diseño.

NEXT >

Como desarrolladores debemos conocer las 3D de Android.

Comenzamos con la D de D I S E Ñ O.

- UI (User Interface)

- UX (User eXperience) D

Developers

Tipografía

NEXT >

Tipografía Roboto.

Es muy importante recordar la tipografía usada, ya que es utilizada en diferentes tamaños de pantalla y se creo con ese fin especifico.

Se utiliza la tipografía: Roboto.

Developers

UI – User Interface

NEXT >

Una app en Android tiene normalmente estos atributos:

1. Action Bar2. View Control3. Content Area4. Split Action BarLos botones virtuales son: - Back - Home - Apps abiertas

Developers

UX – User eXperience

NEXT >

Los principios de diseño fueron desarrollados por el equipo de Android UX en Google para mantener los intereses de los usuarios en mente. Es importante considerarlos y usarlos.

Enchant Me

Simplify My Life Make Me Amazing

Developers

Android Puro

NEXT >

Muchos desarrolladores quieren distribuir varias apps en diferentes plataformas al mismo tiempo, apps “multiplataforma”. Mientras planeas tu app es importante recordar que cada plataforma tiene sus reglas y convenciones.

No hay que imitar elementos de la UI de otras plataformas

Uno de los errores mas comunes es utilizar los bloques de la UI de otras plataformas como iOS y Windows Phone 7 (8)

Developers

Android Puro

NEXT >

No modificar los iconos de la plataforma o re-utilizar.

Hay iconos especiales para acciones como:

- Compartir - Guardar - Buscar - Eliminar - Favoritos

Estos son diferentes en cada plataforma, lo ideal es no modificarlos pues el usuario esta acostumbrado a ellos.

Developers

Android Puro

NEXT >

No uses tab bars debajo del contenido.

iOS utiliza las barras de tabs debajo del contenido, esa es una de sus propiedades.

En Android, se muestran en la Action Bar ó arriba del contenido.

Developers

Adios Diseño

NEXT >

Recordando el DISEÑO:

Enchant Me

Simplify My LifeMake Me Amazing

Android Puro

Developers

Segunda D, Desarrollo

NEXT >

La parte del código (yeei!!): D E S A R R O L L O

- Java - XML - Ambiente - Eclipse y ADT - Que es una app - Desarrollar apps!

D

Developers

Desarrollo

NEXT >

Hay algunas abreviaciones y conceptos que usaremos:

- ADT : Android Developer Tools - AVD : Android Virtual Device - Actividad: Uno de los componentes de una aplicación.

Llamaremos actividades a las “ventanas” de momento.

Primero que nada, hay que descargar las herramientas: * no sean gachos con la banda ancha, pásenlo entre ustedes *

Developers

Ah!, las herramientas!!!

Descargar ADT

NEXT >

http://developer.android.com/sdk/index.html

Developers

Herramientas

NEXT >

Las herramientas descargadas contienen lo siguiente:

- Eclipse & ADT (IDE) - UI Builder (IDE) - Android SDK - Pruebas & Debug (IDE)

Developers

Java

NEXT >

Se cree que Google decidió usar Java por las siguientes razones:

- Lenguaje conocido - No hay punteros - Corre en una maquina virtual - Cantidad enorme de herramientas para java - La diferencia entre C y Java no es tanta, si fuera así, compilar en ASM es la solución

Nota: Android no corre java en tiempo de ejecución. Solamente el código es java.

Developers

XML

NEXT >

Se utiliza XML por que es un lenguaje sencillo de convertir y manipular, este lenguaje puede ser convertido a un archivo binario tan pequeño que se puede montar en un dispositivo móvil sin ninguna preocupación.

Muchas herramientas para la creación de UI utilizan XML para definir los elementos utilizados.

Es un lenguaje muy legible.

Parecido a HTML.

Developers

Ambiente

NEXT >

Android y sus desarrolladores han evolucionado mucho gracias a Google.

Google proporciona hoy en día un paquete llamado ADT, donde se proveen las herramientas necesarias:

- SDK de Android - Eclipse (IDE) - Plugins necesarios (Eclipse)

Developers

Eclipse y ADT

NEXT >

Vista común de Eclipse, el IDE que Google recomienda para el desarrollo de apps.

Developers

Eclipse y ADT

NEXT >

Abrimos ADV Manager presionando el pequeño celularcito:

Developers

Eclipse y ADT

NEXT >

Abrimos ADV Manager presionando el pequeño celularcito:

Llenamos los datos de la siguiente manera.

Developers

Proyecto de Android

NEXT >

Código

Librerías

Recursos

Manifiesto

Developers

Que es una app

NEXT >

Una app de Android esta escrita en Java, el SDK compila este código y sus recursos en un paquete llamado Android Package (APK).

Una app tiene 4 tipos de componentes (unidades que conformar un

sistema):

- Actividades - Servicios - Content Providers - Broadcast Receivers

Developers

Creando nuestra primera app

NEXT >

- Creamos un proyecto en ADT- Le damos Start/Inicio a nuestro

AVD: Prueba- Creamos un nuevo proyecto de

Android.

Developers


NEXT >

Llenaremos los datos como lo vemos en la imagen.

Es importante recordar el campo Minimum Required SDK es la versión mas baja que será soportada por nuestra app.

Developers


NEXT >

Seguimos al asistente…

NEXT >

Developers


NEXT >

Tendremos esta ventana en ADT.

Este es el editor de UI.

Developers


NEXT >

Para ejecutar nuestra app solo clickeamos en:

Developers

Examinando el código…

NEXT >

package personal.nombre.prueba;

import android.os.Bundle;import android.app.Activity;

public class MainActivity extends Activity {

@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);

}}

Developers

Modificando nuestra primer app.

NEXT >

Vamos a utilizar solo 2 elementos disponibles para crear aplicaciones, un botón y una entrada de texto simple.

Y usaremos 2 ventanas para lograr esto.

Developers

Construyendo la UI

NEXT >

Las interfaces graficas de Android están construidas usando una jerarquía de vistas.

- View: Una sola unidad de vista. - ViewGroup: Grupo de vistas que puede contener mas grupos.

Developers

Agregando un LinearLayout

NEXT >

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" ></LinearLayout>

Un LinearLayout es un viewgroup que deja poner vistas en orientación horizontal ó vertical.

Borraremos el contenido del archivo res/layout/activity_main.xml y escribiremos el contenido del siguiente snippet de codigo.

Developers

Agregando un TextField

NEXT >

<EditText android:id="@+id/edit_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/edit_message" />

Un TextField es un campo que puede ser modificado por el usuario. Dentro del Layout agregado anteriormente agregamos el siguiente código:

Los atributos de cada Objeto XML son importantes.

Developers

Strings como recursos

NEXT >

<string name="edit_message">Enter a message</string> <string name="button_send">Send</string>

Modificaremos el archivo res/values/strings.xml que es el archivo que contiene los strings que estarán guardados como recursos.

Guardar los strings como recurso facilitara la internacionalización de nuestra app.

Developers

Agregando un botón

NEXT >

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" />

Agregaremos un botón después del TextField anterior.

Todo esto lo podemos crear con el editor de Eclipse, pero es mejor escribirlo para aprender.

Developers

¿cómo vamos?

NEXT >

La vista del editor grafico, nos debe mostrar la siguiente interfaz.

Developers

Se ve como que feíto…

NEXT >

android:layout_weight="1"

Para hacer que la caja de texto tome mas espacio, es necesario aplicarle PESO a nuestra vista.

Agregamos lo siguiente al EditText:

Y se vera como el snippet de:

https://gist.github.com/jmsalcido/5016020







Developers

Haciendo funcionar el botón Send

NEXT >

Para hacer funcionar el botón Send necesitamos hacer lo siguiente:

- Agregarle la función onClick al boton en el objeto XML

- Agregarle la rutina/método al archivo que nos genero Eclipse en la carpeta src/

android:onClick="sendMessage"

public void sendMessage(View view) { // Responder al evento

}

Developers


NEXT >

Necesitaremos hacer uso de los Intents y conocer lo que es una Actividad.

Que es un Intent Que es una actividad

Developers


NEXT >

Primero crearemos la actividad nueva, siguiendo el asistente. Le damos a:

Developers


NEXT >

Necesitamos hacer que nuestra aplicación obtenga el texto del campo y lo mande por un Intent, agregaremos el siguiente código al método sendMessage de MainActivity:

public final static String EXTRA_MESSAGE = "com.example.myfirstapp.MESSAGE";

public void sendMessage(View view) {Intent intent = new Intent(this, DisplayMessageActivity.class);EditText editText =

(EditText) findViewById(R.id.edit_message);String message = editText.getText().toString();intent.putExtra(EXTRA_MESSAGE, message);startActivity(intent);

}

Developers


NEXT >

super.onCreate(savedInstanceState);

// Obtener el intent y el mensaje Intent intent = getIntent(); String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);

// Crear TextView TextView textView = new TextView(this); textView.setTextSize(40); textView.setText(message);

// Darle la vista a la activity setContentView(textView);

En la segunda actividad: DisplayMessageActivity

Developers

Terminada la primer app

NEXT >

Developers

<jesus>

NEXT >

Developers

NO estamos locos

NEXT >

No, no estamos locos, toda la información la pueden encontrar en:

http://developer.android.com/

En ingles, obviamente.



Developers

CODEAR!!!

NEXT >

Quien se anime a codear una app hoy, en hora buena vamos a darle y la distribuimos, ¿qué les parece?

Developers

<Titulo>

Developers

titel

NEXT >

Taller Android SHDH Ciudad Obregon

Technology

Transcript of Taller Android SHDH Ciudad Obregon