Creación de una aplicación de Android para pequeñas empresas con la aplicación MIT y Google Fusion Table: 7 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:42

¿Alguna vez ha querido crear su propia aplicación que puede estar disponible en Google Play Store? Si tiene un negocio, este tutorial cambiará su vida. Después de leer esto detenidamente, podrá crear su propia aplicación. Antes de comenzar con este Instructable, debe leer dos Instructables más. El enlace de estos dos se da a continuación. Estos Instructables son los tutoriales básicos del desarrollo de aplicaciones.

www.instructables.com/id/How-to-Use-MIT-Ap…

www.instructables.com/id/Course-on-MIT-App…

Entonces, para hacer una solicitud, asumimos que tenemos una pequeña tienda de té con 20 números de variedad de té, luego, con la ayuda de su propia aplicación, los clientes pueden pedir el té antes de llegar a su tienda de té o para entregarlo a domicilio.

Este tutorial asume que está familiarizado con los conceptos básicos de App Inventor, incluido el uso del Diseñador de componentes para crear una interfaz de usuario y el uso del Editor de bloques para especificar el comportamiento de la aplicación. Si no está familiarizado con los conceptos básicos, intente leer algunos de los tutoriales básicos antes de continuar.

Antes de hacer este Instructable, hemos pasado por muchas ideas diferentes, como haremos una aplicación para tienda de medicina, restaurante, cosmética, repuestos de automóvil, tienda de libros, etc. Finalmente hemos decidido hacer una App para la tienda de té. Se decide que el nombre de esta aplicación es "TeaCelebration".

La misma aplicación se puede utilizar para todo tipo de negocios con una inversión casi nula. Así que empecemos.

Paso 1: Recolección de herramientas

La herramienta principal para construir este proyecto es estar familiarizado con MIT APP Inventor, Google Fusion Table, Google Console, Google Play store. Un pequeño conocimiento de estos es suficiente, No es necesario profundizar en estos temas. Sin embargo, hemos cubierto todos los pasos necesarios para construir este proyecto de una manera sencilla.

Otras cosas necesarias antes de comenzar este proyecto son: -

1. Conectividad a Internet.
2. Aplicación MIT Inventor instalada en el móvil.
3. Cuenta de Gmail
4. Fusion table: una Fusion Table es un servicio de Google para respaldar la recopilación, administración, intercambio y visualización de datos. Los datos se almacenan en la nube de Google. Todos los datos se almacenan en una tabla (o tablas) pública a la que se puede acceder a través de Google Drive y permite que diferentes usuarios agreguen información a las tablas.

Paso 2: Creación de la pantalla de TeaCelebration

La aplicación TeaCelebration utiliza otros tipos de componentes. Se supone que ha aprendido a utilizarlos en los tutoriales mencionados anteriormente. Utilice la ventana del diseñador para crear la interfaz para TeaCelebration. Cuando esté completo, el diseñador debería parecerse a la figura adjunta denominada Screen1.

Espero que esté familiarizado con el componente utilizado para hacer esta pantalla y cómo están funcionando. Si tiene algún problema con esta pantalla, consulte la figura: - Componente1 y Componente2.

Paso 3: Cómo crear una cuenta de servicio para Fusion Tables con Google Developers Console

Fusion Tables es una excelente forma basada en la nube de almacenar datos para su aplicación App Inventor. Antes de poder usar Fusion Tables, debe configurar varias cosas.

1. Abra console.developers.google.com.

Haga clic en "Crear nuevo proyecto" o seleccione el proyecto de la lista desplegable si ya tiene un proyecto. Google le pedirá un nombre de proyecto. Elija un nombre que no incluya espacios. Aquí seleccionamos el nombre del proyecto TeaCelebration. Que se puede ver en la figura adjunta.

2. Después de crear el proyecto, haga clic en el menú en la esquina superior izquierda de la consola de desarrolladores (tres líneas horizontales).

3. haga clic en administrador de API

4. Si aún no lo está viendo, haga clic en el Administrador de API en el menú de la Consola del desarrollador.

5. busque "Fusion Tables" en la lista de API y haga clic en Fusion Tables API

6. Haga clic en "Habilitar"

Una vez habilitado, el botón cambiará y le pedirá que cree credenciales. (La API solo está habilitada para el proyecto seleccionado actualmente. Si solo tiene uno, no hay problema)

7. Haga clic en el botón "Ir a Credenciales" para continuar.

8. Si vino desde el botón "Ir a Credenciales" (7), busque la oración que dice "Si lo desea, puede omitir este paso y crear una clave de API, ID de cliente o cuenta de servicio". Haga clic en "cuenta de servicio".

8.1 (Alternativa a 8) Si no vino del botón "Ir a Credenciales", seleccione "Credenciales" después de seleccionar el Administrador de API en el menú de la Consola del desarrollador. Luego haga clic en "Nuevas credenciales" y luego en "Clave de cuenta de servicio"

9. Haga clic en "Crear cuenta de servicio".

10. Déle un nombre simple sin espacios, como TeaCelebration.

Marque "Habilitar la delegación en todo el dominio de Google Apps". Escriba el nombre de su producto, que es el nombre de la aplicación que está creando. Luego haga clic en Crear. Después de un momento, informará "Cuenta de servicio creada". Haga clic en "cerrar"

11. ID de cuenta de servicio: ahora debería ver una página titulada "IAM y administración" que muestra las cuentas de servicio para su proyecto. Debería verse como a continuación, con la nueva cuenta de servicio en la lista y una dirección de correo electrónico (larga), titulada "ID de cuenta de servicio". Necesitará esa dirección de correo electrónico más adelante en App Inventor.

Si necesita volver a esta página de IAM y administración, puede encontrarla yendo a la consola de desarrollador https://console.developers.google.com y seleccionando IAM y administración en el menú de tres líneas horizontales en la parte superior izquierda. Luego, seleccione Cuentas de servicio o Permisos para ver la dirección de correo electrónico (identificación de la cuenta de servicio).

12. Obtenga su clave: con una cuenta de servicio ahora configurada, puede obtener una clave para traerla a App Inventor. Desde la página de Credenciales de API Manager, seleccione su cuenta de servicio. haga clic en "Crear credenciales". Elija que desea una clave de cuenta de servicio. Elija para qué cuenta desea una clave (probablemente solo tenga una, la que acabamos de crear; selecciónela de la lista desplegable y seleccione Tipo de clave: P12. Haga clic en "Crear").

Inmediatamente descargará un nuevo archivo que termina en.p12. Este es el archivo que deberá cargar en App Inventor. Si este archivo tiene espacios en su nombre, cambie el nombre del archivo para eliminar los espacios. App Inventor rechazará el archivo si tiene espacios o caracteres extraños en el nombre, por lo que es mejor que lo revises ahora.

También tendrá la opción de crear una contraseña para la clave, con la contraseña inicial "notasecret". Puede dejar esto como está, a menos que desee convertir su cuenta de servicio en la aplicación App Inventor.

¡Uf! Ese fue un proceso largo. Al final de todo esto, debe tener una cuenta de servicio, junto con una identificación de cuenta (dirección de correo electrónico) y una clave de cuenta de servicio p12

Paso 4: Cómo crear tablas para compartir

Ahora tiene la posibilidad de compartir tablas Fusion. Aquí discutimos cómo crear tablas para compartir.

Abra Google Drive en drive.google.com

1. "Conexión" de Fusion Tables a Drive

Haga clic en "NUEVO", luego en "Más", luego en "Conectar más aplicaciones" (es posible que Fusion Tables ya esté disponible en este menú, en cuyo caso, puede omitir este paso).

Busque "tablas de fusión" y haga clic en "CONECTAR" en la tarjeta Fusion Tables.

2. Crea una nueva tabla

Haga clic en "NUEVO" en Drive, seleccione "Más" y haga clic en "Google Fusion Tables".

Le preguntará si desea importar un archivo de datos existente o comenzar con una nueva tabla completamente vacía. ¡Las opciones aquí son tuyas y solo tuyas! Luego, lo llevará a su nueva Fusion Table.

La forma de configurar los datos y la estructura de la tabla depende de su aplicación.

3. Comparta la mesa con la cuenta de servicio.

Para que App Inventor pueda acceder a esta tabla, debe compartirla con el correo electrónico de la cuenta de servicio que creó. En Fusion Table, haga clic en "Compartir". …@Developer.gserviceaccount.com) Asegúrese de que "Puede editar" esté seleccionado. Deshaga clic en "notificar a las personas" (la cuenta de servicio no es una persona real, por lo que no le importa la notificación) Haga clic en "Aceptar" y cuando diga "¿omitir el envío de la notificación?" haga clic en Aceptar". Haga clic en "Listo"

Paso 5: Determinar la URL y el ID de la tabla de Fusion Table

En el editor de bloques, establecerá la propiedad HomeURL del componente WebViewer para que apunte a la URL de su tabla. Para encontrar la URL de su tabla Fusion:

1. En su navegador, navegue hasta la tabla Fusion que acaba de crear.

2. Vaya al menú y seleccione Herramientas> Publicar.

3. Verá un aviso que dice: "Esta mesa es privada y no será visible".

4. Haga clic en el vínculo azul que dice "Cambiar visibilidad". En la lista de "Quién tiene acceso", haga clic en el vínculo azul "Cambiar …" junto a "Privado: solo las personas enumeradas a continuación …"

5. Elija "Público en la Web" o "Cualquiera con el enlace". Cualquiera de estas configuraciones funcionará para este tutorial. En el futuro, debe decidir esta configuración en función de la confidencialidad de sus datos.

6. Haga clic en el botón verde Guardar y luego en el botón azul Listo.

7. De vuelta en la página de Fusion Table, vaya a la barra de menú y seleccione Herramientas> Publicar. Seleccione la URL del cuadro de texto superior (con la etiqueta "Enviar en un correo electrónico o IM"), copie la URL y vuelva a App Inventor. Pegará la URL en el bloque de definición de TABLE_URL.

8. Puede encontrar el ID de la tabla navegando hasta su tabla y luego seleccionando Archivo> Acerca de esta tabla en el menú.

Sube tu archivo de clave.p12

En el diseñador, cargue el archivo de clave que descargó de Developer Console. Cárguelo en Media, de la misma manera que cargaría un archivo de imagen. Haga clic en el componente FusiontablesControl1 y busque la propiedad KeyFile. Haga clic donde dice "ninguno" en KeyFile y seleccione el archivo.p12 que cargó anteriormente.

Paso 6: Hacer bloques en la APLICACIÓN MIT

Abra el Editor de bloques para que pueda programar el comportamiento de la aplicación. Antes de leer este paso, vea todas las capturas de pantalla adjuntas porque estoy seguro de que puede hacer bloques fácilmente como se muestra en la captura de pantalla sin leer el procedimiento a continuación.

1. Es importante realizar algunos pasos de inicialización cada vez que se inicia la aplicación. Estos se hacen en el bloque "Screen1. Initialize". Para esta aplicación, necesitamos establecer los valores iniciales para la propiedad de la cuenta de servicio del componente FusionTable (establecida en SERVICE_ACCOUNT_EMAIL global) y la propiedad HomeURL del componente WebViewer (establecida en TABLE_URL global). Consulte la captura de pantalla adjunta para una mejor comprensión.

2. Configure el procedimiento "resetForm" como se muestra a continuación. Después de registrar una entrada, este procedimiento restablece la interfaz al estado original.

3. Bloques de selector de listas

En el diseñador, configura las opciones para los tipos de té y bocadillos al completar la propiedad "Selección" con listas separadas por comas. Estas opciones preprogramadas se mostrarán en la interfaz de usuario para que el usuario pueda seleccionar su té y bocadillos. Sus selecciones se almacenan en las variables Té y Aperitivos.

4. Insertar datos en la tabla de fusión

El componente FusiontablesControl se utiliza para enviar los datos a Fusion Table. Esta acción creará una nueva fila en la tabla de fusión, estableciendo los valores de las diversas columnas involucradas. App Inventor hace que esto sea fácil de hacer, pero debe tener cuidado de que la consulta de inserción tenga el formato correcto. Primero, hay una lista de nombres de columna, seguida de una lista de valores. El orden de los nombres de las columnas y los nombres de los valores debe estar en el mismo orden para que coincidan. Se adjunta un ejemplo de cómo podría verse esto. Primero, configure un nuevo Procedimiento con resultado que tome una cadena como argumento y devuelva la misma cadena rodeada de comillas simples. El procedimiento quotify se utiliza en el procedimiento InsertDataInTable para colocar comillas alrededor de todos los valores de la consulta. También se encarga de "escapar" de las comillas simples o apóstrofos que ingresa el usuario. Puede enviar apóstrofos simples como parte de un valor en la consulta, por lo que el bloque "reemplazar todo" agrega una comilla simple adicional. Dos comillas simples seguidas se interpretan como una sola comilla. Las figuras siguientes muestran cómo realizar el procedimiento. Observe que tiene que decirle al bloque de procedimiento que agregue un parámetro. Haz esto con el ícono azul que aparece una pequeña ventana donde especificas cuántos elementos necesitas para que actúen como parámetros. En este caso, solo necesita uno. App Inventor nombrará automáticamente el parámetro "x", pero puede cambiarle el nombre a "str" haciendo clic en la x y escribiendo directamente en el bloque. Del mismo modo, puede cambiar el nombre del procedimiento de "procedimiento" a "cotizar" escribiendo directamente en el bloque.

Utilice el bloque InsertRow del componente Fusion Table. Para construir la lista de valores, usamos el bloque de texto de unión de App Inventor.

Para esta aplicación, los nombres de las columnas deben coincidir con los nombres de las columnas de la tabla que creamos anteriormente. Sus respectivos valores se toman de las variables globales del procedimiento. Nota: Si no usó estas palabras exactas para las columnas de su tabla, asegúrese de usar los nombres de las columnas de su tabla cuando cree su consulta.

5. Una vez que el usuario haya ingresado su nombre, opciones de té y comentarios, hará clic en el botón Enviar. La aplicación prueba para asegurarse de que los campos Nombre, Té y Aperitivos tengan valores, y le pide al usuario que vuelva a intentarlo si falta alguna de las respuestas requeridas. Observe que se utiliza el bloque de comparar textos (búsquelo en Paleta incorporada, Cajón de texto). Este bloque compara dos cadenas de texto para ver si son iguales. Si toda la información requerida está presente, llama al procedimiento InsertDataInTable (ver figura adjunta).

6. Manejo de la respuesta del servicio Fusion Tables

El evento FusiontablesControl. GotResult se activará cuando la aplicación reciba una respuesta del servicio Fusion Tables de Google. Para una consulta de inserción, el servicio devolverá el ID de fila de la nueva fila que se insertó o un mensaje de error si algo salió mal. En este ejemplo simple, usamos el bloque "contiene" (encuéntrelo en Paleta incorporada, Cajón de texto) para verificar si la cadena de resultado tiene el ID de fila en él. Si es así, sabemos que se recibió el rowID y luego invocamos el procedimiento WebViewer. GoHome, que vuelve a cargar el "HomeURL" como se especifica en las propiedades del WebViewer. Tenga en cuenta que este conjunto de bloques también llama al resetFormprocedure. Después de grabar una entrada, restablece la interfaz al estado original.

¡Listo! Empaquete la aplicación yendo a Paquete para teléfono en el Diseñador. Ahora puede probar la aplicación a los efectos de TeaCelebration. Una vez que comprenda este tutorial, estará listo para crear nuevas tablas dinámicas y modificar la aplicación para recopilar diferentes tipos de datos de los usuarios.

Paso 7: carga de la aplicación en Google Play Store

Es muy fácil cargar la aplicación en Google Play Store. Simplemente busque en Google "Cómo cargar la aplicación en Google Play Store" y obtendrá toda la información de Google. A continuación se muestra el enlace de Google: -

support.google.com/googleplay/android-deve…

Solo necesitas subir el archivo APK en Play Console.

Para guardar el archivo APK, vaya a Build in MIT App y seleccione la opción "Guardar.apk en mi computadora".

Finalmente, después de hacer todo esto, su aplicación está lista para usar. Si no desea cargar la aplicación en la tienda Google Play, simplemente comparta la aplicación con sus amigos / clientes, etc.

Esto es solo para fines de aprendizaje y ahora tiene tantas opciones para aumentar, disminuir, mostrar y ocultar la tabla de fusión.

Este instructable es muy único. Ahora depende de usted utilizar el procedimiento. Se reunirá en Next Instructable.

Gracias por leer.