Si está buscando una plataforma sin servidor segura que tenga muchas funciones y sea rentable, puede probar MongoDB Stitch. Además de ofrecer prácticas funciones del lado del servidor, como funciones, webhooks de servicios y autenticación de usuarios, viene estrechamente integrado con MongoDB Atlas, una solución de almacenamiento de datos basada en la nube poderosa y madura.
En este tutorial, le mostraré cómo usar MongoDB Stitch y un clúster MongoDB Atlas para crear una aplicación para tomar notas para Android desde cero. También lo explicaré cómo integrar Google Sign-In, un proveedor de autenticación compatible con Stitch, en la aplicación.
Requisitos
Para aprovechar al máximo este tutorial, necesitará:
- Android Studio 3.1 o superior
- una cuenta de MongoDB Atlas
- un dispositivo o emulador con Android 5.0 o superior
Si aún no lo ha hecho, también le sugiero que consulte primero el tutorial anterior sobre el uso de Stitch en sus aplicaciones de Android.
1. Creación de una aplicación de puntadas
Necesitarás una aplicación Stitch para poder utilizar los servicios que ofrece la plataforma Stitch en tu proyecto de Android. Inicie sesión en su cuenta de MongoDB Atlas y vaya a Stitch Apps sección.
Presiona el botón Crear nueva aplicación botón. En el cuadro de diálogo que aparece, asigne un nombre significativo a la aplicación, seleccione uno de sus clústeres de MongoDB Atlas de la lista desplegable y presione Crear botón.
Si actualmente no tiene ningún clúster, puede obtener información sobre cómo crear y configurar uno aquí:
-
MongoDBCree un clúster de base de datos en la nube con MongoDB AtlasAshraff Hathibelagal
Una vez que la aplicación esté lista, vaya a Clientes y cambia a Java (Android) pestaña para determinar cuál es su ID de aplicación. Necesitará la identificación más adelante en este tutorial.
2. Configuración de la autenticación
Utilizará Google como proveedor de autenticación para la aplicación que creará hoy. En otras palabras, permitirá que sus usuarios finales inicien sesión en la aplicación con sus cuentas de Google.
Desde la consola de administración de Stitch, configurar cualquier proveedor de autenticación toma solo un momento. Sin embargo, antes de que pueda hacer eso, debe obtener algunos detalles importantes del proveedor de autenticación. Para obtener los detalles de Google, abra una nueva pestaña en su navegador, inicie sesión en su cuenta de Google y vaya al Panel de API de Google Cloud Platform.
Presiona el Crear Proyecto para crear un nuevo proyecto de Google Cloud. Después de dar un nombre al proyecto, presione el Crear botón.
Una vez que el proyecto esté listo, vaya a Credenciales y abre la pantalla de consentimiento de OAuth pestaña. Aquí, por ahora, puede completar solo el Nombre de la aplicación y presione el botón Guardar botón.
Luego, presiona el botón Crear credenciales , seleccione el ID de cliente de OAuth y elija Android como el tipo de aplicación.
Ahora se le pedirá que ingrese el nombre del paquete que desea usar para su aplicación de Android y una huella digital SHA-1. Para este tutorial, le sugiero que use la huella digital de su certificado de depuración. Para obtenerlo, abre una terminal y ejecuta el siguiente comando:
keytool -exportcert -alias androiddebugkey \ -keystore ~/.android/debug.keystore \ -list
Después de copiar la huella digital y pegarla en el formulario, presione Crear botón.
En este punto, su aplicación de Android podrá usar el inicio de sesión de Google. Sin embargo, debe permitir que su aplicación Stitch también lo use. Por lo tanto, presione el botón Crear credenciales botón de nuevo. Esta vez, elija aplicación web como el tipo de la aplicación.
Cuando se le solicite ingresar un URI de redireccionamiento autorizado, use la URL de devolución de llamada de Stitch:https://stitch.mongodb.com/api/client/v2.0/auth/callback
Al pulsar el botón Crear ahora, verá una ventana emergente que contiene dos cadenas:una ID de cliente y un secreto de cliente. Tome nota de ambos y vuelva a la consola de administración de Stitch.
En los Usuarios sección de la consola, cambie a Proveedores pestaña y seleccione Google . Después de habilitarlo, escriba la identificación del cliente y el secreto del cliente, y presione Guardar botón.
3. Agregar una regla
Los usuarios de su aplicación no deben poder ver las notas de los demás. Solo se les debe permitir ver las notas que ellos mismos crearon. Para hacer cumplir esta regla, ve a las Reglas y presiona el botón Agregar colección botón.
Ahora puede dar un nombre a su base de datos MongoDB y especificar el nombre de la colección donde almacenará todas las notas. Deje que el nombre de la base de datos sea notes_db y el de la colección ser notas .
A continuación, seleccione Los usuarios solo pueden leer y escribir sus propios datos plantilla de reglas, que coincida con los requisitos de su aplicación, e indique que el nombre del campo donde almacenará el ID de autenticación del usuario es user_id .
Finalmente, presiona el botón Agregar colección botón.
Si desea ver más de cerca la regla que acaba de crear, no dude en presionar el Modo avanzado botón, que le muestra un equivalente JSON de la regla.
4. Configuración de un proyecto de Android
Ahora que la aplicación Stitch está lista, puede comenzar a crear su aplicación para Android. Por lo tanto, cree un nuevo proyecto de Android Studio con una actividad vacía y asegúrese de que el nombre del paquete coincida con el que escribió anteriormente.
Para poder usar el SDK de Stitch en el proyecto, agregue la siguiente implementation dependencia en el nivel de aplicación build.gradle archivo:
implementation 'org.mongodb:stitch-android-sdk:4.0.5'
Para admitir el inicio de sesión de Google, agregue también una dependencia para los servicios de Google Play.
implementation 'com.google.android.gms:play-services-auth:15.0.1'
Necesitará algunos widgets de Material Design, como tarjetas y botones de acción flotantes, en la aplicación. Así que agregue las siguientes dependencias también:
implementation 'com.android.support:design:27.1.1' implementation 'com.android.support:cardview-v7:27.1.1' implementation 'com.afollestad.material-dialogs:core:0.9.6.0'
Por último, agregue la identificación de su aplicación Stitch y la identificación del cliente que mencionó en la consola de administración de Stitch como elementos en strings.xml archivo.
<string name="stitch_client_app_id">YOUR_APP_ID</string> <string name="google_client_id">YOUR_CLIENT_ID</string>
5. Creación de diseños
Los usuarios solo deben poder usar 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 usar el SignInButton widget en el diseño de la actividad principal:
<com.google.android.gms.common.SignInButton
android:id="@+id/sign_in_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
Después de iniciar sesión correctamente, redirigirá al usuario a otra actividad que contenga ListView. widget, que mostrará las notas del usuario y un FloatingActionButton widget, que el usuario puede presionar para crear una nueva nota. Así que cree otra actividad vacía y agregue el siguiente código a su archivo XML de diseño:
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/notes_container"
android:dividerHeight="16dp"
android:divider="@android:color/transparent"/>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="@drawable/ic_add_black_24dp"
android:id="@+id/add_note_button"
android:tint="@android:color/white"/>
</RelativeLayout>
Cada elemento del ListView widget será una nota. Para mantener las cosas simples, digamos que el diseño de la nota solo tiene un CardView widget que contiene un TextView artilugio. Así que cree un nuevo archivo XML de diseño llamado layout_note.xml y añádele el siguiente código:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/note_text"
style="@style/TextAppearance.AppCompat.Body1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp" />
</android.support.v7.widget.CardView> 6. Implementación del inicio de sesión de Google
Cuando el usuario presiona el botón de inicio de sesión, debe iniciar el flujo de trabajo de inicio de sesión de Google. Entonces, dentro de la primera actividad, agregue un controlador de eventos al hacer clic en el botón.
Dentro del controlador, puede continuar y crear un GoogleSignInOptions objeto configurado para usar las opciones de inicio de sesión predeterminadas. Debido a que su aplicación Stitch, que puede considerarse como su servidor back-end, también debe ser parte del proceso de inicio de sesión, asegúrese de llamar al requestServerAuthCode() y pásele su ID de cliente. El siguiente código le muestra cómo hacerlo:
val signInOptions =
GoogleSignInOptions.Builder(
GoogleSignInOptions.DEFAULT_SIGN_IN
).requestServerAuthCode(
getString(R.string.google_client_id)
).build()
Ahora puede crear un GoogleSignIn cliente llamando al getClient() y pasando GoogleSignInOptions objetarlo como argumento. Con 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 startActivityForResult() de la actividad. método. Así es como:
val signInClient = GoogleSignIn.getClient(
this@MainActivity, signInOptions
)
startActivityForResult(
signInClient.signInIntent,
1 // request code
)
Para recibir el resultado de la actividad que acaba de activar, debe anular onActivityResult() método. En su interior, tendrás acceso a un nuevo Intent objeto, que puede pasar a getSignedInAccountFromIntent() método para identificar a su usuario.
override fun onActivityResult(requestCode: Int,
resultCode: Int,
data: Intent?) {
super.onActivityResult(requestCode, resultCode, data)
val signedInAccount =
GoogleSignIn.getSignedInAccountFromIntent(data)
// More code here
}
En caso de que el usuario falle o se niegue a iniciar sesión, tendrá una excepción ahora. Manéjelo mostrando un Toast informativo mensaje y cerrar la aplicación.
if(signedInAccount.exception != null) {
Toast.makeText(this,
"You must sign in first", Toast.LENGTH_LONG).show()
finish()
return
}
Sin embargo, en caso de iniciar sesión correctamente, tendrá acceso a un código de autenticación del servidor que puede usar para crear una GoogleCredential. objeto. Pasando el objeto a loginWithCredential() método del cliente Stitch predeterminado de su proyecto, puede registrar e iniciar sesión como usuario en su 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 notas y agregar nuevas notas. El siguiente código le muestra cómo hacerlo de manera concisa:
Stitch.getDefaultAppClient().auth
.loginWithCredential(
GoogleCredential(signedInAccount.result.serverAuthCode)
)
.addOnSuccessListener {
// Open activity that shows the notes
startActivity(
Intent(this@MainActivity,
NotesActivity::class.java
)
)
} Si crea y ejecuta la aplicación ahora, debería poder usar una de sus cuentas de Google para iniciar sesión.
7. Agregar notas
En la segunda actividad, necesitará un cliente Stitch y un cliente MongoDB Atlas. Necesitará el primero para obtener el ID de autenticación del usuario y el segundo para realizar operaciones de lectura y escritura en su clúster de MongoDB Atlas. Así que agréguelos como campos privados de la actividad.
private val stitchClient = Stitch.getDefaultAppClient()
private val atlasClient = stitchClient.getServiceClient(
RemoteMongoClient.factory,
"mongodb-atlas"
) Cuando los usuarios presionan el botón de acción flotante, debe mostrar un cuadro de diálogo que les solicite que escriban sus notas. Con la biblioteca Material Dialogs , que agregó como una dependencia anteriormente, hacerlo es muy intuitivo.
El siguiente código le muestra cómo agregar un oyente al hacer clic en el botón y crear un cuadro de diálogo de entrada básico:
add_note_button.setOnClickListener {
val dialog = MaterialDialog.Builder(this@NotesActivity)
.title("New Note")
.input("Type something", null, false,
{ _, note ->
// More code here
}
).build()
dialog.show()
}
Dentro del controlador de eventos del cuadro de diálogo, tendrá acceso a la nota que el usuario escribió. Para almacenarla en su clúster de MongoDB Atlas, debe colocarla dentro de un nuevo documento de MongoDB. Además, para asegurarse de que la nota sea visible solo para el usuario que la creó, el documento debe incluir un user_id campo cuyo valor coincide con el ID de autenticación del usuario. El siguiente código, que va dentro del controlador de eventos, le muestra cómo crear el documento:
val document = Document() document["text"] = note.toString() document["user_id"] = stitchClient.auth.user!!.id
Ahora que el documento está listo, debes insertarlo en las notes colección, que pertenece a la notes_db base de datos. Así es como puede obtener referencias a la base de datos y la colección, y usar insertOne() método para insertar el documento:
val collection = atlasClient.getDatabase("notes_db")
.getCollection("notes")
collection.insertOne(document).addOnSuccessListener {
Toast.makeText(this@NotesActivity,
"One note saved", Toast.LENGTH_LONG).show()
} Si ejecuta la aplicación ahora, debería poder crear nuevas notas y guardarlas.
8. Visualización de notas
Para poder mostrar las notas que ha creado un usuario, primero debe buscar todos los documentos en las notes colección que pertenece al usuario. Sin embargo, no tiene que escribir una consulta compleja para hacer eso. Debido a la regla que creó anteriormente, Stitch garantiza automáticamente que cualquier consulta que ejecute en la colección devolverá solo los documentos que posee el usuario.
Crea un nuevo método para mostrar las notas.
private fun showNotes() {
// More code here
}
Dentro del método, puede llamar directamente a find() método en las notes colección para crear una consulta que pueda recuperar las notas del usuario. Para ejecutar la consulta de forma asíncrona, debe llamar a into() método y pasarle una lista vacía. Los resultados de la consulta estarán disponibles en la lista una vez que se complete correctamente.
val notes = mutableListOf<Document>()
atlasClient.getDatabase("notes_db")
.getCollection("notes")
.find()
.into(notes)
.addOnSuccessListener {
// More code here
}
Dentro del oyente en caso de éxito, ahora debe crear una instancia de ArrayAdapter clase para representar la lista de notas. Sin embargo, no puede pasar una lista de Document objetos directamente al constructor de la clase. Primero debe convertirlo en una lista de String objetos. El siguiente código le muestra cómo hacerlo usando el map() método:
val adapter = ArrayAdapter<String>(this@NotesActivity,
R.layout.layout_note, R.id.note_text,
notes.map {
it.getString("text") // Extract only the 'text' field
// of each document
}
)
Una vez que el adaptador esté listo, puede ponerlo a funcionar asignándolo al adapter propiedad de ListView widget.
notes_container.adapter = adapter
Las showNotes() El método ya está listo. Agregue una llamada dentro de onCreate() método para que los usuarios puedan ver sus notas tan pronto como se abra la actividad. Además, si desea que la lista muestre nuevas notas tan pronto como se creen, le sugiero que también agregue una llamada dentro del oyente en caso de éxito que adjuntó al insertOne() método.
Con los cambios anteriores, si vuelve a ejecutar la aplicación, podrá agregar nuevas notas y ver las existentes.
