IOT( internet de las cosas 2a parte)

Hola de nuevo. Siguiendo el proyecto de la entrada anterior, en esta añadiremos lo que se vera en la pantalla del móvil cuando abramos la aplicación. Debido a que el lenguaje de programación de android es muy complicado para gente que no ha programado nunca, no os preocupéis si cuando lo leáis os parezca que estáis descifrando runas antiguas, intentare comentaros por encima cada linea de código para que entendáis un poco lo que hace y en un futuro podáis modificarlo a vuestro gusto.

Sigamos!!

Lo primero es darle click en la pestaña marcada en rojo en la foto, con lo que os abrirá una pantalla como la siguiente:

En esta pantalla es donde se da forma al aspecto visual de la aplicación, donde se añaden botones, texto, etc. En resumen, es lo que vera la persona cuando abra la aplicación. Hay varias formas de añadir botones, texto, imágenes, etc... a la pantalla pero en esta ocasión vamos a hacerlo a través de código de programación, por lo que es necesario darle a la pestaña marcada en rojo. Nos abrirá la siguiente ventana:

Bien, una vez aquí tenemos que modificar el código quedando de la siguiente manera:

Si nos fijamos en las 2 partes veremos que se ha modificado lo siguiente:

1. Hemos borrado los 4 paddings de 16dp.
2. Hemos cambiado el RelativeLayout por un LinearLayout.
3. Un LinearLayout necesita obligatoriamente una propiedad llamada orientation por lo que se la hemos añadido estableciendo su valor en vertical. 
4. Hemos borrado el elemento TextView, ya que no es necesario para esta aplicación.
5. Hemos añadido un EditText para que podamos introducir el numero IP del wifi al que deseemos mandarle los datos. Ademas le hemos añadido unas propiedades de ancho y alto, otra propiedad llamada id que se usara mas adelante y por ultimo una propiedad llamada hint, que sirve para enseñar un texto indicativo. 
6. Para finalizar, hemos añadido 2 Button (Botones), dándoles las propiedades ancho y alto, así como la propiedad id y una nueva propiedad llamada text que sirve para añadir texto encima del botón.

Y con esto ya tenemos la parte gráfica completada. Si, ya se que es muy básico y queda muy fea, pero la idea es hacer una aplicación que funcione y, si queréis que sea mas bonita aprended a programar android y hacedla a vuestro gusto xD. 

COSAS QUE PODÉIS MODIFICAR SIN PELIGRO A ROMPER EL PROGRAMA:

• Podéis cambiar el texto de los botones. En la propiedad text, entre comillas se coloca el texto que se desea que aparezca. 
• De la misma forma podéis cambiar el mensaje de la propiedad hint.
• Podéis cambiar el nombre de la id de los elementos. En la propiedad id entre comillas aparece "@+id/" seguido de un texto. Sólo podéis cambiar el TEXTO, de lo contrario os dará un error. 
• Las demás propiedades si no sabéis programar es mejor no tocarlas. 

Para que no se haga una entrada muy larga y aburrida añadiremos unas ultimas lineas de código de programación y en la próxima entrada nos centraremos en crear una conexión wifi y dar las ordenes de mandar los datos a los botones. 

Bien, para que nuestra aplicación pueda enviar datos a través de wifi, hay que darle unos permisos especiales, de lo contrario no funcionará. Esto se consigue de la siguiente manera:

  

Si nos fijamos en la imagen hay una pestaña llamada manifests marcada en un recuadro rojo, si le damos click nos aparecerá un archivo en su interior. Dando doble click en éste lo abriremos. 

En este archivo añadiremos la siguiente linea de código quedando de esta manera:

Y con esto finalizamos esta entrada. Nos vemos en la próxima y seguimos programando! un saludo ;)

IOT ( internet de las cosas 1a parte)

Hola de nuevo gente, cada vez es mas común que los aparatos de casa tengan conexión a Internet para poder ser controlados a distancia a través de ethernet o wifi. Esta vez aprenderemos como podemos controlar lo que queramos desde una aplicación móvil creada por nosotros mismos. Comentar también, que para que no sea muy difícil de entender vamos a hacer un programa muy sencillo con 2 botones, uno para encender y el otro para apagar lo que tengamos conectado. De esta manera aprenderemos lo siguiente:

1. Crear una conexión WIFI.
2. Añadir botones a la aplicación del móvil y que estos hagan algo cuando los apretemos.   

Dado que no tengo un "pc mac" no puedo programar aplicaciones para iphone, así que solo servirá para móviles con sistema operativo android.

Hacer toda la explicación en una pagina, se haría muy largo y pesado de leer, voy a dividirlo en varias partes. Empecemos!!

Para crear una aplicación android necesitamos tener un programa instalado en nuestro pc, hay varios, pero el que yo uso es android studio y sera con el que trabajaremos en este blog. Este programa se descarga de la siguiente pagina:

https://developer.android.com/studio/index.html?hl=es-419

Una vez en la pagina le damos al botón de descargar android studio y al finalizar la instalación ya lo tendremos todo listo para empezar a programar. Si lo ejecutáis os tendría que salir una pagina de inicio parecida a esta:

A continuación iremos paso a paso hasta finalizar nuestro proyecto. Bueno como es lógico clicaremos en "Start a new Android Studio project". Aparecera la siguiente pagina:

Aquí lo mas importante es la casilla de "Application name" que servirá para darle un titulo a nuestra aplicación, en mi caso a modo de demostración dejo el nombre que viene por defecto y le doy al botón de Next. (Vosotros ponerle el nombre que queráis, eso si la primera letra deberá ser en mayúsculas, sino dará un error). A continuación os saldrá la siguiente pantalla:

Bueno, en esta pantalla es donde se selecciona si tu aplicación sera una aplicación para móviles, para televisores, para gafas de realidad virtual.. etc, en nuestro caso como es para móviles solo dejamos seleccionada la primera opción. Luego el "Minium SDK", es la versión mínima que se requerirá al móvil para poder ser ejecutada la aplicación. Escogéis la que queráis. Por ultimo le dais a Next.

En esta pantalla, es donde seleccionamos el estilo de nuestra aplicación. Para no complicarnos la vida elegimos "Empty Activity", que viene a ser una pantalla vacía. Ya le añadiremos nosotros lo que queramos luego. Como siempre, luego le damos a Next.

  

En esta pantalla dejamos todo por defecto como esta y le damos a Finish. Una vez finalizado el proceso de carga (tarda un rato) deberíamos tener una pantalla parecida a la siguiente:

Una vez aquí ya tenemos nuestro proyecto con todos los archivos listos para que pueda ser ejecutado, solo que si ahora lo instalamos a nuestro móvil y lo abrimos, veríamos una pantalla en blanco, por lo que en la próxima entrada añadiremos mas código de programación y le daremos vida a nuestra aplicación. Un saludo.