7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Android SDK

Crear una aplicación de toma de notas para Android con MongoDB Stitch

Read Time: 12 mins

Spanish (Español) translation by Esther (you can also view the original English article)

Si estás buscando una plataforma segura sin servidor que sea a la vez rica en características y rentable, puede que quieras probar MongoDB Stitch. Además de ofrecer prácticas características del lado del servidor, como funciones, webhooks de servicios y autenticación de usuarios, viene estrechamente integrado con MongoDB Atlas, una potente y madura solución de almacenamiento de datos en la nube.

En este tutorial, te mostraré cómo usar MongoDB Stitch y un clúster MongoDB Atlas para crear una aplicación de toma de notas para Android desde cero. También te mostraré cómo integrar Google Sign-In, un proveedor de autenticación soportado por Stitch, en la aplicación.

Requisitos previos

Para aprovechar al máximo este tutorial, necesitarás:

Si aún no lo has hecho, también te sugiero que pases primero por el tutorial anterior sobre el uso de Stitch en tus aplicaciones Android.

1. Creación de una aplicación Stitch

Necesitarás una aplicación Stitch para poder utilizar los servicios que ofrece la plataforma Stitch en tu proyecto Android. Así que inicia sesión en tu cuenta de MongoDB Atlas y navega a la sección Stitch Apps.

Stitch home pageStitch home pageStitch home page

Pulsa el botón Crear nueva aplicación. En el cuadro de diálogo que aparece, dale un nombre significativo a la aplicación, selecciona uno de tus clústeres de MongoDB Atlas en la lista desplegable y pulsa el botón Crear.

Stitch app creation dialogStitch app creation dialogStitch app creation dialog

Si no tienes ningún clúster actualmente, puedes aprender a crear y configurar uno aquí:

Una vez que la aplicación esté lista, ve a la sección Clientes y cambia a la pestaña Java (Android) para determinar cuál es su ID de aplicación. Necesitarás el ID más adelante en este tutorial.

2. Configuración de la autenticación

Utilizarás Google como proveedor de autenticación para la aplicación que vas a crear hoy. En otras palabras, permitirá a sus usuarios finales iniciar sesión en la aplicación utilizando sus cuentas de Google.

Desde la consola de administración de Stitch, la configuración de cualquier proveedor de autenticación solo lleva un momento. Sin embargo, antes de poder hacerlo, tienes que obtener algunos detalles importantes del proveedor de autenticación. Para obtener los detalles de Google, abre una nueva pestaña en tu navegador, accede a tu cuenta de Google y ve al panel de la API de Google Cloud Platform.

Pulsa el botón Crear Proyecto para crear un nuevo proyecto de Google Cloud. Después de darle un nombre al proyecto, pulsa el botón Crear.

Google project creation formGoogle project creation formGoogle project creation form

Una vez que el proyecto esté listo, ve a la sección de Credenciales y abre la pestaña de la pantalla de consentimiento de OAuth. Aquí, por ahora, puedes rellenar solo el campo Nombre de la aplicación y pulsar el botón Guardar.

OAuth consent screenOAuth consent screenOAuth consent screen

A continuación, pulsa el botón Crear credenciales, selecciona la opción ID de cliente OAuth y elige Android como tipo de aplicación.

Ahora se te pedirá que introduzcas el nombre del paquete que pretendes utilizar para tu aplicación Android y una huella digital SHA-1. Para este tutorial, te sugiero que utilices la huella digital de tu certificado de depuración. Para obtenerla, abre un terminal y ejecuta el siguiente comando:

Después de copiar la huella digital y pegarla en el formulario, pulsa el botón Crear.

OAuth client ID creation formOAuth client ID creation formOAuth client ID creation form

En este punto, tu aplicación Android podrá utilizar Google Sign-In. Sin embargo, tienes que permitir que tu aplicación Stitch también lo utilice. Por lo tanto, presiona de nuevo el botón Crear credenciales. Esta vez, elige aplicación web como tipo de aplicación.

Cuando se te pida que introduzcas un URI de redirección autorizado, utiliza la URL de devolución de llamada de Stitch: https://stitch.mongodb.com/api/client/v2.0/auth/callback

Al presionar el botón Crear ahora, verás una ventana emergente que contiene dos cadenas: un ID de cliente y un secreto de cliente. Anota ambas y vuelve a la consola de administración de Stitch.

Popup showing client ID and client secretPopup showing client ID and client secretPopup showing client ID and client secret

En la sección Usuarios de la consola, cambia a la pestaña Proveedores y selecciona Google. Después de habilitarlo, escribe el ID del cliente y el secreto del cliente, y pulsa el botón Guardar.

Provider configuration screen of Stitch admin consoleProvider configuration screen of Stitch admin consoleProvider configuration screen of Stitch admin console

3. Añadir una regla

Los usuarios de tu aplicación no deben poder ver las notas de los demás. Solo deben poder ver las notas que ellos mismos han creado. Para aplicar esta regla, ve a la sección Reglas y pulsa el botón Añadir colección.

Ahora puedes dar un nombre a tu base de datos MongoDB y especificar el nombre de la colección donde vas a almacenar todas las notas. Deja que el nombre de la base de datos sea notes_db y el de la colección sea notes.

Rule creation formRule creation formRule creation form

A continuación, selecciona la plantilla Usuarios solo pueden leer y escribir sus propios datos, que se ajusta a los requisitos de tu aplicación, y di que el nombre del campo donde vas a almacenar el ID de autenticación del usuario es user_id.

Rule template configuration formRule template configuration formRule template configuration form

Por último, pulsa el botón Añadir colección.

Si quieres echar un vistazo más de cerca a la regla que acabas de crear, no dudes en pulsar el botón de Modo Avanzado, que te muestra un equivalente JSON de la regla.

4. Configuración de un proyecto Android

Ahora que la aplicación Stitch está lista, puedes empezar a construir tu aplicación Android. Así que crea un nuevo proyecto de Android Studio con una actividad vacía, asegurándote de que su nombre de paquete coincide con el que has escrito antes.

Para poder utilizar el SDK de Stitch en el proyecto, añade la siguiente dependencia de implementación en el archivo build.gradle a nivel de aplicación:

Para admitir el inicio de sesión de Google, añade también una dependencia para los servicios de Google Play.

Necesitarás algunos widgets de Material Design, como tarjetas y botones de acción flotantes, en la aplicación. Así que añade también las siguientes dependencias:

Por último, añade el ID de tu aplicación Stitch y el ID del cliente que mencionaste en la consola de administración de Stitch como elementos en el archivo strings.xml.

5. Creación de diseños

Los usuarios solo deben poder utilizar la aplicación para tomar notas si han iniciado sesión. Por lo tanto, tan pronto como se abra la aplicación, debe mostrarles un botón de inicio de sesión. La forma más rápida de hacerlo es utilizar el widget SignInButton en el diseño de la actividad principal:

Después de un inicio de sesión exitoso, redirigirás al usuario a otra actividad que contiene un widget ListView, que mostrará las notas del usuario, y un widget FloatingActionButton, que el usuario puede pulsar para crear una nueva nota. Así que crea otra actividad vacía y añade el siguiente código a su archivo XML de diseño:

Cada elemento del widget ListView será una nota. Para simplificar las cosas, digamos que el diseño de la nota solo tiene un widget CardView que contiene un widget TextView. Así que crea un nuevo archivo XML de diseño llamado layout_note.xml y añade el siguiente código en él:

6. Implementación de Google Sign-In

Cuando el usuario pulsa el botón de inicio de sesión, debes iniciar el flujo de trabajo de inicio de sesión de Google. Así que, dentro de la primera actividad, añade un controlador de eventos on-click al botón.

Dentro del controlador, puedes seguir adelante y crear un objeto GoogleSignInOptions configurado para utilizar las opciones de inicio de sesión predeterminadas. Debido a que tu aplicación Stitch, que puede ser considerada como tu servidor back-end, también debe ser parte del proceso de inicio de sesión, asegúrate de llamar al método requestServerAuthCode() y pasarle tu ID de cliente. El siguiente código muestra cómo hacerlo:

Ahora puedes crear un cliente de GoogleSignIn llamando al método getClient() y pasándole el objeto GoogleSignInOptions como argumento. Utilizando el cliente, puede iniciar fácilmente el flujo de trabajo de inicio de sesión obteniendo una intención de inicio de sesión y pasándola al método startActivityForResult() de la actividad. Así es como se hace:

Para recibir el resultado de la actividad que acabas de lanzar, debes anular el método onActivityResult(). Dentro de él, tendrás acceso a un nuevo objeto Intent, que puedes pasar al método getSignedInAccountFromIntent() para identificar a tu usuario.

En caso de que el usuario falle o se niegue a iniciar sesión, ahora tendrás una excepción. Manéjala mostrando un mensaje Toast informativo y cerrando la app.

Sin embargo, en caso de que el inicio de sesión sea exitoso, tendrás acceso a un código de autenticación del servidor que puedes utilizar para crear un objeto GoogleCredential. Si pasas el objeto al método loginWithCredential() del cliente Stitch por defecto de tu proyecto, podrás registrar e iniciar la sesión del usuario en tu aplicación.

Una vez que el método se completa con éxito, la aplicación debe cambiar a la segunda actividad, que tiene los elementos de la interfaz de usuario para mostrar las notas y añadir nuevas notas. El siguiente código muestra cómo hacerlo de forma concisa:

Si construyes y ejecutas la aplicación ahora, deberías poder utilizar una de tus cuentas de Google para acceder a ella.

App showing sign in screensApp showing sign in screensApp showing sign in screens

7. Añadir notas

En la segunda actividad, necesitarás tanto un cliente Stitch como un cliente MongoDB Atlas. Necesitarás el primero para obtener el ID de autenticación del usuario, y el segundo para realizar operaciones de lectura y escritura en tu cluster de MongoDB Atlas. Así que añade ambos como campos privados de la actividad.

Cuando los usuarios presionan el botón de acción flotante, debes mostrar un diálogo que les pida que escriban sus notas. Con la librería Material Dialogs, que has añadido como dependencia anteriormente, hacerlo es muy intuitivo.

El siguiente código muestra cómo añadir un receptor de clic al botón y crear un diálogo de entrada básico:

Dentro del manejador de eventos del diálogo, tendrás acceso a la nota que el usuario escribió. Para almacenarla en tu clúster de MongoDB Atlas, debes ponerla dentro de un nuevo documento de MongoDB. Además, para asegurarse de que la nota es visible solo para el usuario que la creó, el documento debe incluir un campo user_id cuyo valor coincida con el ID de autenticación del usuario. El siguiente código, que va dentro del manejador de eventos, muestra cómo crear el documento:

Ahora que el documento está listo, debes insertarlo en la colección notes, que pertenece a la base de datos notes_db. Así es como puedes obtener referencias a la base de datos y a la colección, y utilizar el método insertOne() para insertar el documento:

Si ejecutas la aplicación ahora, deberías poder crear nuevas notas y guardarlas.

App showing input dialogApp showing input dialogApp showing input dialog

8. Visualización de notas

Para poder mostrar las notas que ha creado un usuario, primero hay que obtener todos los documentos de la colección de notes que pertenecen al usuario. Sin embargo, no tienes que escribir una consulta compleja para hacerlo. Gracias a la regla creada anteriormente, Stitch se asegura automáticamente de que cualquier consulta que se ejecute en la colección devolverá solo los documentos que el usuario posea.

Crear un nuevo método para mostrar las notas.

Dentro del método, puedes llamar directamente al método find() en la colección de notas para crear una consulta que pueda obtener las notas del usuario. Para ejecutar la consulta de forma asíncrona, debes llamar al método into() y pasarle una lista vacía. Los resultados de la consulta estarán disponibles en la lista una vez que se complete con éxito.

Dentro del escuchador de éxito, ahora debes crear una instancia de la clase ArrayAdapter para renderizar la lista de notas. Sin embargo, no puedes pasar una lista de objetos Document directamente al constructor de la clase. Primero debes convertirla en una lista de objetos String. El siguiente código muestra cómo hacerlo utilizando el método map():

Una vez que el adaptador está listo, puedes ponerlo a trabajar asignándolo a la propiedad adapter del widget ListView.

El método showNotes() ya está listo. Añade una llamada a él dentro del método onCreate() para que los usuarios puedan ver sus notas en cuanto se abra la actividad. Además, si quieres que la lista muestre las nuevas notas tan pronto como se creen, te sugiero que también añadas una llamada a ella dentro del oyente de éxito que has adjuntado al método insertOne().

Con los cambios anteriores, si vuelves a ejecutar la aplicación, podrás tanto añadir nuevas notas como ver las existentes.

App displaying notesApp displaying notesApp displaying notes

Conclusión

En este tutorial, has visto lo fácil que es crear una simple aplicación móvil respaldada por MongoDB Stitch. También has aprendido a mantener los datos de tus usuarios finales seguros y privados usando Google como proveedor de autenticación y las reglas de acceso declarativas de Stitch.

Para saber más sobre MongoDB Stitch, consulta su completa documentación oficial.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.