Autenticación - Login con cuenta de Google para una aplicación Android con Android Studio



En este tutorial vamos a implementar la autenticación en nuestra App Android mediante una cuenta de Google.

   REQUISITOS   

  • Android Studio.
  • Google Play Services.

   Lo primero de todo es comprobar que tenemos instalados los servicios de Google. Para ello  nos vamos al SDK Manager y lo comprobamos, si no lo tenemos los instalamos.


 
   Después vamos a actualizar el build.gradle del proyecto y añadir lo siguiente en dependencies:

classpath 'com.google.gms:google-services:1.5.0-beta2'

   A continuación actualizamos el build.gradle pero de la app y en dependencies añadimos:

compile 'com.google.android.gms:play-services-auth:8.3.0'

Y arriba del todo también ponemos el plugin:

apply plugin: 'com.google.gms.google-services'

   Después de todo esto nos vamos a crear nuestro proyecto en las apis de la consola de google. Se hace en la siguiente dirección:

https://console.cloud.google.com/apis/

   Nos creamos un proyecto nuevo.



   Ahora nos vamos esta web de desarrollador de google:

https://developers.google.com/mobile/add



  Le damos a Pick Platform y después a Android App. Elegimos el nombre de la App que es la que hemos creado antes, en mi caso TestYoutube. También ponemos el nombre del paquete del proyecto que tenemos en Android Studio, en mi caso wilowi.testgoogleauth, y le damos a "choose and configure services"


   En la siguiente pantalla seleccionamos Google Sign-In. Ahora nos va a pedir el hash SHA-1 que tenemos que generar ( lo podéis ver en el video).
Para ello vamos a seguir la guía de Google:

https://developers.google.com/android/guides/client-auth

   Para este tutorial hemos creado la clave para debug. Cuando sea una app para publicarla la tenemos que generar después con la clave que no sea debug.
   Nos vamos a la consola y copiamos el código de la guía:


   Copiamos y la pegamos en la página que nos la pidió y pulsamos "Enable Google Sign-in". Por ultimo pulsamos en "Generate configuration files" y bajamos el json que se llama google-services.json

   Este json lo vamos a guardar en nuestro proyecto de Android Studio en app:

Ahora ya en nuestro proyecto nos podemos hacer el botón para la autenticación con Google y toda su funcionalidad.

Tener en cuenta si se utiliza la opción del token de Google ( que es lo más habitual ), hay que usar la función:

GoogleSignInOptions gso = 
new GoogleSignInOptions.Builder(
GoogleSignInOptions.DEFAULT_SIGN_IN)
.requestIdToken(c_id).requestEmail().build();

   Se necesita un código, el id en requestIdToken(c_id). Este código lo vamos a obtener de la primera página que hemos visto, donde hemos creado el proyecto (https://console.cloud.google.com/apis/). Le daremos a credenciales y a obtener credenciales y seguidamente Id de cliente OAuth 2.0.

   Nos pedirá el sha1 y el nombre del paquete como anteriormente. Importante, hay que utilizar la clave que pone "Web" no Android. Esta clave es la que copiaremos en el proyecto en la función anterior.

Os pongo el enlace para que os podáis descargar el proyecto y veáis todo el código hecho.


Sandra Campos

Etiquetas

Comparte si te gusta

Compilar aplicación cordova phonegap para BlackBerry

  
 Para esta entrada es recomendable ver la entrada de INSTALAR CORDOVA, ya que se explica lo básico para instalar cordova/phonegap.

   PROGRAMAS NECESARIOS   

   En la entrada de instalar cordova, vimos que necesitamos node.js y java jdk. A parte de estos dos, para compilar una aplicación para BlackBerry necesitamos las siguientes herramientas:

  • Blackberry10 WebWorks SDK: sdk necesari para poder compilar la aplicación para BlackBerry.
  • Blackberry10 simulator: Simulador para poder ejecutar la aplicación de BlackBerry.
  • Momentics IDE: entorno para crear aplicaciones para BlackBerry. Se instala el native SDK y también simuladores. Se puede exportar el proyecto para editarlo si queremos.
  • VMWare Player: para ejecutar los simuladores, ya que son máquinas virtuales que sólo se abren con vmware.
   Hay que instalarse los programas para que podamos compilar sin problemas.

   INSTALACIÓN   

   Después de instalarnos las aplicaciones tenemos que comprobar que se hayan creado las variables globales del sistema, sino las creamos.

   Para ellos le damos botón derecho en Equipo y pinchamos en Propiedades y en la izquierda le damos a Configuración avanzada del sistema. Luego hacemos clic en Variables de entorno.




   PROYECTO   

   Nos vamos a la consola y nos situamos en el directorio del proyecto que tenemos creado. Para añadir y compilar para la plataforma blackberry10 usamos los siguientes comandos:

cordova platform add blackberry10

cordova build blackberry10

   Antes de ejecutar tenemos que crear el enlace al simulador que utilizaremos.

   Si abrimos con VMware el simulador de blackberry que hemos instalado, veremos que abajo del todo en la esquina inferior izquierda aparece la ip. Esta ip la vamos a utilizar para crear el enlace.


   En la consola escribimos los siguientes comandos después de compilar:

target add nombre_simulador ip_address --type simulator

run --target=nombre_simulador

   Sustituimos nombre_simulador por el nombre que queramos y ip_address por la ip que aparece en el simulador de vmware.

   Cuando ejecutemos el comando run, nos pedirá dos contraseñas:
  • emulator password
  • keystore password
   En nuestro caso se puede poner cualquiera o pulsar INTRO porque el simulador no tiene contraseña ni pin.

   Para depurar la aplicación, blackberry nos facilita el trabajo poniendo la ip del simulador en el navegador junto con el puerto 1337. Nos aparece el inspector con el cual tendremos acceso al html, consola de javascript, etc.



MOMENTICS IDE

   Desde momentics también podemos crear simuladores. En la barra de ejecución del entorno vemos donde pone la ip y le damos a Add new target.


   Nos aparece una ventana con dos pestañas, seleccionamos la que pone Simulators. Si tenemos una blackberry le daríamos a Device.


   Si queremos instalar uno nuevo le damos a Install New Simulator.


   Podemos también importar el proyecto en momentics.
   Es como en eclipse, le damos botón derecho e importar. Seleccionamos la opción de importar proyecto existente.


   Por último buscamos el proyecto en la carpeta platform y le damos a importar.


   Por si hay dudas podéis mirar el vídeo para aclarar cosas. También podéis comentar si hay algún fallo.

NOTA: El archivo para subir a la AppWorld de BlackBerry está en la carpeta de platforms/blackberry10/build/simulator o device. Es un archivo .bar


Compilar aplicación cordova phonegap para Android


   Para esta entrada es recomendable ver la entrada anterior INSTALAR CORDOVA, ya que se explica lo básico para instalar cordova/phonegap.

   PROGRAMAS NECESARIOS   

   En el post anterior vimos que para instalar cordova necesitamos node.js y java jdk. A parte de estos dos, para compilar una aplicación en Android necesitamos las siguientes herramientas:
  • Git: es un software de control de versiones. Es necesario porque al crear un proyecto en cordova o añadir algún plugin, cordova/phonegap necesita descargar esa información de los repositorios, y lo hace utilizando esta herramienta. No hace falta instalar ningún cliente git.
  • Android SDK: kit de desarrollo para android. No hace falta android studio si no queremos, podemos descargar únicamente el SDK.
  • Apache Ant: Es una herramienta que se encarga de realizar ciertas tareas a la hora de compilar y construir nuestro proyecto. Similar a "make" pero para java.
   Vamos a utilizar eclipse a la hora de exportar el proyecto, aunque también se hace puede hacer con android studio, pero en el tutorial lo he hecho con eclipse. Para descargaros eclipse lo podéis hacer desde AQUÍ.

   INSTALACCIÓN   

   Estos programas no tienen ningún problema a la hora de instalarse, lo podéis ver en el video.
   Después de instalarlos hay que configurar las variables globales del sistema, PATH (si no se han puesto por defecto.
   Para ellos le damos botón derecho en Equipo y pinchamos en Propiedades y en la izquierda le damos a Configuración avanzada del sistema. Luego hacemos clic en Variables de entorno.



Tenemos que añadir apache ant::


   También las herramientas de Android. Recordad que es la ruta en donde las tengáis instaladas, en mi caso son estas:

C:\Users\Sandra\android-sdks\tools;C:\Users\Sandra\android-sdks\platform-tools;

  Por último añadir también en las variables de usuario la siguiente de android. Esta última creo que no hace falta pero por si os falla ponedla:


   PROYECTO   

   En el anterior tutorial vimos como crear un proyecto. Ahora únicamente lo que tenemos que hacer es añadir la plataforma android al proyecto y compilar.
cordova platform add android
cordova build android



   Con el comando cordova run android se puede lanzar directamente la aplicación con el emulador de android.



   ECLIPSE   

   En este apartado vamos a ver como importar el proyecto que se nos ha creado en android, a eclipse, para poder trabajar desde eclipse.

Abrimos eclipse, pinchamos con el botón derecho donde están los proyectos y le damos a New/Proyect y seleccionamos Android Project from Existing Code.



   En la siguiente ventana tenemos que buscar la ruta del proyecto android que estará dentro de la carpeta platform/android de nuestra aplicación en cordova que hemos creado anteriormente.
Nos saldrán varios directorios para importar pero sólo tenemos que importar dos de ellos, el que pone platforms\android y el de platform\android\CordovaLib. Este último sólo es necesario la primera vez, puesto que si hacemos otros proyectos ya lo tendremos importado. El resto de proyectos los desmarcamos.


   Le damos a terminar y ya tenemos nuestro proyecto. Nos aparece con un error y es porque no encuentra la librería de cordova. Para ello le damos a botón derecho en el proyecto y Propiedades. Nos ponemos en la pestaña de Android.


   Nos aparece la librería con una cruz roja. La eliminamos y le damos al botón Add y elegimos la librería MainActivity-CordovaLib (que es la que hemos importado al principio).

   Por último, los ficheros que hay que modificar si tenemos que cambiar algo, son los que se encuentran en la carpeta assets, pero la primera vez no están visibles. Si nos fijamos hay un archivo con el nombre _where-is-www.txt.


   Si lo abrimos, nos dice los pasos a seguir para mostrar los ficheros www.

   Si tenéis alguna duda podéis ver el video o dejar un comentario.



Sandra Campos

Comparte si te gusta

Instalar apache cordova - phonegap


   Apache cordova es un conjunto de herramientas o framework que permite utilizar las tecnologías web para el desarrollo multiplataforma (aplicaciones híbridas) sin necesidad de desarrollar en el lenguaje nativo de cada una de estas plataformas. Es código open source por lo que se puede utilizar con total libertad sin coste alguno.

   Antes de empezar con la explicación, vamos a ver algunas ventajas e inconvenientes frente a programar en lenguaje nativo.

  VENTAJAS                                    

  • Sólo tienes que escribir el código "una vez" para todas las plataformas. Pongo "una vez" entre comillas porque no es del todo cierto. En algunas plataformas tendrás que modificar algunas cosillas, dependiendo de la aplicación que desarrolles, pero bueno lo que se toca suele ser mínimo.
  • Si conoces javascript, html y css te será mucho más fácil implementar una aplicación que con lenguaje nativo de cada plataforma.
  • Libre y gratuito.

  DESVENTAJAS                            
  • No se puede acceder a todas las características ni funcionalidades como lo hace el SDK de cada plataforma. Esto conlleva que para cada plataforma se deban de implementar funciones específicas.
  • Las aplicaciones pueden resultar pesadas, que tardan mucho en ejecutarse, pero esto depende de la complejidad de la aplicación.
  • Al utilizar javascript puede haber incompatibilidad con los navegadores.
  • Necesitas configurar cada entorno y la configuración de cordova/phonegap puede ser distinta para cada uno de ellos ( en ios necesitas un MAC y xcode).
  • Inconsistencia con el diseño visual para cada plataforma. Se necesitan frameworks para que parezca una aplicación nativa (jQuery mobile, nova framework, JQTouch,...).
   Por mi experiencia personal, recomiendo utilizar phonegap/cordova si la aplicación a desarrollar es sencilla ya que si es muy compleja no va a funcionar bien y es mucho más trabajo, por lo que en ese caso lo haría en nativo.

  INSTALACCIÓN                           

   En cualquier sistema operativo que lo instalemos y para cualquier plataforma, necesitamos las siguientes herramientas comunes:

  • Node.js: Es un lenguaje del lado del servidor y que es necesario para instalar cordova con el instalador de paquetes.
  • Java JDK.

   Después para cada plataforma en concreto se necesitarán instalar otras herramientas adicionales, pero eso lo veremos en otras entradas. Por ejemplo para Android necesitaríamos el SDK, git y apache ant.

   Después de instalar las herramientas tenemos que ponerlas en las variables globales del sistema, el PATH. El de node.js se pone solo en la instalación pero por si no lo hace lo ponemos a mano. Para ellos le damos botón derecho en Equipo y pinchamos en Propiedades y en la izquierda le damos a Configuración avanzada del sistema.


   Le damos al botón que pone Variables de entorno y en las variables del sistema creamos una que se llame JAVA_HOME y que contenga la ruta al jdk que hemos instalado:


   Después añadimos en la variable Path el directorio bin de JAVA_HOME y la ruta a node.js:




También hay que añadir al Path el enlace al npm -> C:\Users\Sandra\AppData\Roaming\npm;

Ahora para instalar cordova nos vamos a la línea de comandos ( en windows el cmd, en linux el terminal de linux y en mac el terminal del mac). Escribimos el siguiente comando:

npm install -g cordova


   Para crear nuestra primera aplicación en cordova nos vamos a situar en el directorio donde la queremos crear y podemos utilizar uno de estos comandos:

cordova create test
cordova create test com.test.test
cordova create test com.test.test "test"

   La diferencia entre estos comandos es que el primero crea automáticamente el nombre de la clase y el paquete y en los otros le indicamos el nombre del paquete y el nombre de la clase.


   Ahora mismo tenemos creado un proyecto y aplicación en cordova pero no tiene asignada ninguna plataforma para compilar. Para añadir una plataforma se utiliza el comando:

cordova platform add nombre_plataforma

   Si queremos quitar una plataforma usamos cordova platform rm nombre_plataforma.
   Las plataformas pueden ser algunas de estas:
  • android
  • ios
  • wp8
  • blackberry10
  • firfoxos
   Para compilar en una plataforma concreta se utiliza cordova build nombre_plataforma, y si queremos compilar en todas las plataformas que estén asignadas a nuestro proyecto sólo ponemos cordova build.

   Hay que decir que si no tenemos instaladas las herramientas necesarias, a parte de node.js y jdk, de las plataformas a compilar, nos va a dar un error porque no las encuentra. Como he dicho anteriormente, en otras entradas veremos algunas plataformas y sus herramientas a instalar.

   Cordova nos proporciona una serie de plugins que son necesarias para acceder a las funcionalidades del teléfono, como para guardar ficheros, para acceder a la red, etc. para instalar un plugin se usa el comando:
cordova plugin add nombre_plugin

   Y para borrarlo cordova plugin rm nombre_plugin.

   En la siguiente página tenéis todos los comandos y plugins disponibles -> CORDOVA . Como siempre en el video tenéis la forma de hacer todas las cosas.




Sandra Campos

Comparte si te gusta

Proyecto 1/365 días: fotos desde el 19/11/2015 al 02/12/2015

   Como he puesto en el post anterior, se me acumuló el trabajo. No he hecho unas grandes fotos porque muchos días casi que se me pasaba el tiempo y al final lo tenía que hacer con el móvil.

   Una anécdota en estos días es que el móvil se me cayó al agua, y por poco pierdo una de las fotos del día. Me salvo que esa foto la hice para mandar por un grupo de whatsapp y luego pude recuperarla, sino el proyecto al garete otra vez :( Espero que no me pase más.

Días del 19/11/2015 al 25/11/2015:

Foto 029 Proyecto 1/365 dias

Foto 030 Proyecto 1/365 dias

Foto 031 Proyecto 1/365 dias

Foto 032 Proyecto 1/365 dias

Foto 033 Proyecto 1/365 dias

Foto 034 Proyecto 1/365 dias

Foto 035 Proyecto 1/365 dias

Días del 26/11/2015 al 02/12/2015:

Foto 036 Proyecto 1/365 dias

Foto 037 Proyecto 1/365 dias

Foto 038 Proyecto 1/365 dias

Foto 039 Proyecto 1/365 dias
Foto 040 Proyecto 1/365 dias

Foto 041 Proyecto 1/365 dias

Foto 042 Proyecto 1/365 dias


Sandra Campos

Comparte si te gusta

Proyecto 1/52 semanas: foto 05,06 y 07 varias semanas Noviembre-Diciembre

   He estado tan liada que se me han acumulado las fotos, no de hacerlas sino de poner el post correspondiente, así que en esta entrada del proyecto una foto cada semana durante 52 semanas voy a poner nada más y nada menos que las correspondientes a 4 semanas.

   La que más me gusta es la de mi sobrino ^^


Semana del 16 al 22 de Noviembre:

Foto 05 Proyecto 1/52 semanas

Semana del 23 al 29 de Noviembre:

Foto 06 Proyecto 1/52 semanas

Semana del 30 de Noviembre al 6 de Diciembre:

Foto 07 Proyecto 1/52 semanas

Sandra Campos

Comparte si te gusta