Manual de Aplicaciones Moviles

Presenta

Godinez Hernandez Cristian Asael

Grupo

“402”

Escuela

Cecytem Plantel Tecámac

Introducción

Este manual está enfocado sobre todo a aquellas personas que no tienen una noción muy clara de lo que es programar. Razón por la que seré muy específico en todos y cada uno de los pasos que hay que seguir para desarrollar nuestras primeras aplicaciones móviles.

En realidad este programa no es muy complicado, más sin embargo sí muy tedioso al momento de estar armando las aplicaciones ya que se te podrían presentar problemas tales como:

Que tu App no corra por un archivo no compatible (de cualquier tipo podría ser una imagen, un video etc.)

Que las imágenes simplemente no aparezcan Que tus sonidos queden todos desacomodados Que no sepas como poner una imagen de fondo en la App

Pero no te desesperes son cosas que a todo buen programador le pasan en sus inicios, con el tiempo iras puliendo esos detallitos que te disgustan o que no comprendes de la programación.

Bueno no te distraigo más, pasa a la siguiente hoja para empezar a programar

¿Qué es una App?

Una aplicación móvil, apli o app (en inglés) es una aplicación informática diseñada para ser ejecutada en teléfonos inteligentes, tabletas y otros dispositivos móviles. Por lo general se encuentran disponibles a través de plataformas de distribución, operadas por las compañías propietarias de los sistemas operativos móviles como 

Android iOS BlackBerry OS Windows Phone entre otros.

Existen aplicaciones móviles gratuitas u otras de PAGO, donde en promedio el 20-30% del costo de la aplicación se destina al distribuidor y el resto es para el desarrollador. El término app se volvió popular rápidamente, tanto que en 2010 fue listada como Word of the Year (Palabra del Año) por la American Dialect Society.

Tiendas de aplicaciones:

Existen diferentes tipos de tiendas para descargar aplicaciones, estas pueden ser creadas por el mismo sistema operativo o por independientes. Las tiendas organizan las aplicaciones y cada una tiene normas diferentes de retribución y publicación.

Google Play

Google Play (anteriormente Android Market) es una plataforma de distribución de software en línea desarrollado por Google Inc. para dispositivos con sistema operativo Android. Fue lanzado en octubre de 2008. Hasta octubre de 2012, Google Play contaba con más de 700,000 aplicaciones. 

En la plataforma se encuentran disponibles tanto aplicaciones gratuitas como de pago. Su interfaz es sencilla y rápida de utilizar.

App Store

La App Store fue el primer servicio de distribución de aplicaciones, siendo lanzada el 10 de julio de 2008. En 2012, el CEO de Apple, Tim Cook, anunció que existen más de 650,000 aplicaciones disponibles para dispositivos con iOS.

Desde su creación en 2008, más de un millón de aplicaciones estuvieron disponibles en el App Store. Numerosas empresas utilizan este canal para distribuir las aplicaciones colaborativas, de gestión y de productividad a los usuarios externos y internos.

Apple transformó el mercado de las aplicaciones para dispositivos móviles, estrenándose con un pequeño catálogo de solamente 500 aplicaciones y logrando en tan solo cuatro días 10 millones de aplicaciones descargadas. 

En julio de 2012, Apple creó "App Store Volume purchasing for business". Disponible únicamente en EEUU, este programa permite a las empresas comprar aplicaciones en grandes cantidades con el fin de distribuirlas a sus colaboradores a través de códigos promocionales. Es posible también integrar en esta tienda "business to business", aplicaciones desarrolladas por terceros y que no son publicadas en el App Store clásico.

Windows Phone Store

La Windows Phone Store es la plataforma de distribución de Microsoft para los dispositivos que cuentan con el sistema operativo móvil Windows Phone. Fue lanzado en octubre de 2010. Para octubre de 2012, contaba con más de 120,000 aplicaciones disponibles. 

En mayo de 2013 Microsoft anunció que ya contaba con más de 145.000 aplicaciones en Windows Phone Store 

¿ADT?

Este es otro concepto que debes tener bien presente en todo el proceso es un plugin para el IDE Eclipse que está diseñado para darle un potente entorno, integrado en el que la construcción de aplicaciones de Android.

ADT amplía las capacidades de Eclipse para que pueda configurar rápidamente nuevos proyectos para Android, crear una interfaz de usuario de la aplicación, agregar paquetes basados en la API de Android Framework, depurar sus aplicaciones utilizando las herramientas del SDK de Android, e incluso exportar firmados (o no firmados) archivos .apk con el fin de distribuir la aplicación.

El desarrollo en Eclipse con ADT es muy recomendable y es la manera más rápida para empezar. Con la configuración guiada proyecto que proporciona, así como la integración de herramientas, editores XML personalizados, y el panel de salida de depuración, ADT le da un impulso increíble en el desarrollo de aplicaciones de Android

¿Cómo exporto una aplicación?

Bien al finalizar la aplicación se tiene que exportar para poder usarse en cualquier dispositivo compatible (Únicamente Android).

Esto es muy sencillo simplemente hay que hacer lo siguiente:

Dar en el botón File y luego en Export:

Luego solo seguiremos los pasos:

-Le damos en Export Android Application

-Buscamos la aplicación que queremos

-Creamos un keystore y una contraseña

-Ahora solo llenaremos los siguientes campos (solo los necesarios)

-Por ultimo le daremos en Finish si todos los campos son correctos

-Ahora solo buscaremos en la ubicación donde guardamos la App y la pasaremos a

nuestro dispositivo, ya sea por medio de un cable USB o por medio de Bluetooth (Si tu

computadora lo tiene)

Acelerómetro

Esta es la primera aplicación que crearemos, el Acelerómetro es el sensor de tu celular que le permite saber su posición, este se mueve en tres ejes X, Y, Z (horizontalmente, verticalmente y diagonalmente respectivamente).

Para iniciar vamos a llevar a cabo el proceso que explicamos antes (¿Cómo creo una carpeta nueva en ADT (Eclipse)?)

Una vez hecho eso vamos a declarar primero nuestras librerías así:

Ahora vamos a ir a nuestro Layout (La parte grafica de nuestra App, esta se haya en la carpeta

res>layout) y pondremos 3 TextView (Simplemente lo tomamos del apartado Form Widgets y lo

arrastramos hasta la simulación de pantalla) poniéndoles el siguiente id: x, y, z respectivamente así:

Posteriormente pondremos las siguientes líneas de código para que nos de uso del sensor y podamos ver esos movimientos reflejados en la pantalla por medio de los TextView.

La primer parte de este código es declarar las variables a usar y los elementos gráficos que usamos en el Layout:

Esto va justo después de las librerías que declaramos hasta arriba.

Luego les daremos función así (Esta parte va justo después de lo anterior):

Por ultimo ya que tenemos la parte gráfica y la función de cada cosa lo vamos a exportar y a instalar en nuestro dispositivo Android.

Se debe de ver más o menos así:

-Al moverlo debe de cambiar la cantidad de los tres campos X, Y, Z

Hola Mundo

Esta aplicación es muy sencilla ya que solo utilizaremos nuestro activity_main.xml

Ahora si solo exportemos e instalemos en nuestro celular:

Para que veamos algo parecido a esto:

Calculadora

Esta aplicación no es tan complicada pero si muy larga, pero no se preocupen solo copien bien el código y no habrá problema alguno.

Primero hagamos la parte gráfica, esta vez son muchos botones y 2 EditText así:

Ustedes ya saben cómo poner todo esto de un modo rápido, solo arrastren los componentes al simulador de Android y Listo. Solo no olviden ponerle id. a todos sus componentes (aclaro en este caso solo es necesario darle función a las teclas de +, -, *, / y al =, los demás también imprimirán un numero pero nada mas).

Hora póngale función a todo desde el Java así:

Declaren Variables, Componentes visuales y Librerías

Ahora pongamos las funciones para activar nuestros EditText, para habilitar y deshabilitar los botones al igual que informarnos que no hay ningún valor por medio de un Toast en caso de que no se haya escrito nada.

Ahora el proceso de Suma:

El proceso de Resta:

El proceso de Multiplicación:

El proceso de División:

La impresión de Números (1-5):

La impresión de Números (6-0):

Función en los Símbolos (punto, borrar):

Función en los Símbolos (resultado, igual):

Por ultimo exportamos e Instalamos:

Debe de verse algo así:

Canvas

Esta app es extremadamente sencillo y no requiere gran trabajo

Primero hagamos la paste física así, para lo cual no usaremos nada lo dejaremos así como esta:

Y ahora la parte de la función, esto es muy sencillo porque todo lo que haremos es aparecer 3 figuras en pantalla:

Primero pongamos las librerías así:

Ahora pongamos las figuras en pantalla:

Una vez puesto eso, debe verse así:

Radio Button

Lo que vamos a hacer es algo muy similar al Checbox

Primero vamos a hacer el entorno gráfico, vamos s a usar los siguientes elementos:

Ahora una vez habiendo puesto eso debe de verse algo así(En este caso yo puse una imagen de fondo) con el siguiente código

android:background=”"@drawable/nombre de la imagen"

Esto va debajo del xmlns: tools

Ahora si vamos a ver cómo debe de quedar (no olviden ponerle un id. a todo)

Ahora ya que es muy similar al Checbox el código de función también lo es (A excepción de que en este caso al escoger una opción aparecerá una imagen):

Primeramente como siempre vamos a poner nuestras variables y nuestras librerías , a fin de darle una función a los Buttons.

Luego les daremos la tarea de que cada Radio ponga una imagen al seleccionarlo únicamente a el:

Así de igual manera al elegirlo nos aparecerá un Toast poniendo un mensaje en pantalla para reconocer que se ha hecho el cambio.

Una vez hecho esto exportamos e instalamos la App, la cual debe de verse asi:

List View

Esta app es muy simple , la función que va a tener es tipo Base de Datos, aunque esta solo almacenara mientras la usamos no después, una vez cerrando la app se borrara todo lo hecho.

Primero hagamos la parte gráfica.

Para empezar abramos el nuevo proyecto y a continuación jalemos del apartado Composite un EditText, un Button y un List View.

Para que quede más o menos así:

Una vez hecho eso y puestos nuestros id. Vamos a darle función a todo

Primero pongámosle nuestras librerías, nuestros elementos gráficos y nuestras variables nuevas:

Después démosle el efecto al botón y al ListView para que todo lo que escribamos en el Edit Text aparezca:

Una vez acabados estos sencillos pasos vamos a exportar e instalar la app en nuestro dispositivo Android, para que salga algo muy parecido a esto:

Notificación

Esto debe de ser algo que siempre deberías tomar en cuenta para hacer una aplicación ya que por lo regular estas tienden a mandar notificaciones porque tu no??

Primeramente hagamos el entorno grafico para ello usaremos 2 .xml

En uno pondremos 1 Button que accionara la notificación y en el otro la notificación así que primero va

El Button:

Luego la Notificación asi:

Ahora si vamos a hacer la magia en 2 Java correspondientes a cada .xml

Primero el del botón iniciamos poniendo nuestras variables, elementos graficos y nuestras librerías asi:

Luego ponemos lo que hará el botón:

Y por último traer la notificación:

Ahora si vayamos por el segundo Java donde se efectuara la acción de nuestra Notificación

Ahora si exportemos e instalemos en nuestro dispositivo.

Debe de verse algo así:

Spinner

Esto en si es otro elemento que solo podemos arrastras a nuestra pantalla y ya, lo complicado casi siempre es darles una función

Para empezar hagamos lo visual primero.(Aclaro esto fue una adaptación que hice en una de mis clases, está unido con la notificación pero es sencillo)

Para ello vamos a ocupar exactamente los mismos .xml de la notificación

Sin embargo vamos a cambiar un poco los Java:

Primer Java (aquí es donde estarán los cambios de la Aplicacion):

Como bien se habrán dado cuenta yo lo hizo con marcas y modelos de celulares n es grande la diferencia sin embargo va a notarse en la Aplicación que debe de quedar más o menos como en las siguientes imágenes:

Progress Bar

Este es un elemento muy ocupado en la mayoría de las Apps ya que sirve para esperar mientras carga la App y es lo que aprenderemos a hacer.

Hagamos primero la interfaz grafica

Para lo que usaremos:

-Progress Bar

-Text View

-Button

Así:

Ahora hagamos la función de cada cosa primeramente pongamos nuestras librerías y nuestras variables:

Y luego nuestras funciones para que marque el avance y la barra se mueva:

Aquí hace falta una llave cerrada (es que no me cupo en la foto xD)

Una vez hecho esto va a quedar así:

Sonidos de Animales

Esta es una aplicación muy fácil de hacer, el único requerimiento extra a lo que hemos hecho es que hay que descargar una imagen por sonido (obvio referente al sonido), también hay que descargar los sonidos correspondientes a la imagen.

Las imágenes que descargues mételas en la carpeta drawable-mdpi y para ponerlas en el Button pon el código Android: background=”@drawable/nombre de tu imagen” dentro del código del Button

Ahora si hagamos lo visual vamos a jalar 9 Button a la pantalla en el siguiente orden:

En este caso lo vamos a hacer con animales y serán los que aparecen en la imagen y le vamos a poner el nombre de cada animal en el id.

Una vez hecho esto vamos a ponerle los audios(los audios los vamos a meter en la carpeta raw, si no existe la creamos)

Esto es del siguiente modo:

Primero vamos a poner nuestras librerías, nuestras variables para los sonidos y toooodos nuestros botones con su efecto para función:

Y ahora a asignarles sus sonidos a los animales:

Faltan 2 llaves cerradas al final.

Cuando ya están las imágenes y los sonidos solo hay que exportar e instalar y listo:

Tab Host

Esto es algo ocupado para poner varias cosas en una App, por ejemplo en el caso de los reproductores esto es muy útil, pues así dividen las canciones de los artistas etc.

Para empezar hagamos 4 .xml y agreguemos lo siguiente:

.xml 1:

Agregaremos un TabHost y pondremos los elementos que aparecen a la derecha:

En él .xml 3 y el 4:

Haremos exactamente lo mismo que en el primero, solo cambiando la imagen

Ahora hagamos los Java, de igual manera deben de ser 4, uno para cada .xml

En el primero haremos lo siguiente.

Pondremos nuestras librerías, variables y elementos gráficos:

Ahora le pondremos una función a los otros 3:

Si todo esta así tal cual lo pusimos arriba, ahora podremos avanzar y configurar los otros 3 Java:

Si te das cuenta es muy fácil configurar los últimos 3 Java y prácticamente es el mismo código. Ahora por último si ya te quedo todo esto, podemos exportar e instalar:

Toglee Button

El Radio Button es un botón con la función de accionar algo en este caso serán 3 linternas de colores distintos.

Para empezar vamos a tomar 3 Botones de estos del apartado Form Widgets y lo arrastraremos hasta la simulación de pantalla de Android, donde le daremos un id. a cada objeto para más adelante darle una función el Java

Iniciemos, habiendo hecho esto debe de verse asi:

Ahora vamos a darle función en el Java, esto en realidad no es difícil es solo un código y muy sencillo:

Va más o menos así, para iniciar le vamos a poner librerías y variables y el resto de cosas que ya saben que van al inicio del código:

Como podrán darse cuenta también declaramos los colores con los siguientes nombres

- Rojo=rj

-Verde =vr

-Azul=az

Puede que se pregunten ¿Para que? Pues para poder darle tonalidad a nuestras lámparas como podrán ver en el siguiente código:

Lo ven es muy simple y ya con las tonalidades se verá muy bien tu App, que, si tiene todo correcto ya puedes instalar en tu celular y se verá así:

Video View

Para esta App vamos a usar un video que quieras pero de duración menor a 5:00 min para no hacerlo tan pesado

Y vamos a aprender a usar los controles de reproductor básicos.

En si es una Aplicación muy simple pero muy padre.

En la parte visual solo vamos a poner un Video View sacado del apartado Images & Media

Va a quedar así:

Ahora para darle función primero vamos a guardar nuestro video en la carpeta Raw.

Una vez hecho esto debemos poner el código junto con nuestras librerías, variables y nuestro componente gráfico:

Y así es como quedara:

Web View

Esta última Aplicación del manual la vamos a hacer muy sencilla también, para poder descansar del trabajo ya hecho.

Iniciaremos haciendo el entorno gráfico, pondremos un Web View, arrastrando el objeto del apartado Composite, así:

Y ahora la función para que pueda (como el nombre lo dice) visualizar un sitio web.

Primeramente vamos a poner lo de costumbre librerías, componentes, variables etc:

Y ahora sí, el código para poder ver una página Web:

Es importante que en la parte donde dice loadURL cargues el Link de tu página bien o no podrás ingresar al sitio correcto.

Una vez hecho esto correctamente, puedes exportar e instalar la Aplicación, que se verá así: