Compartir datos con gestos configuración de la aplicación Corona SDK

En este tutorial, vamos a lanzar una serie que permitirá que dos dispositivos móviles transfieran información con un gesto de "Bump". Esta aplicación requerirá una combinación de programación del lado del cliente y del servidor, y cubriremos todos los pasos para codificar ambos aspectos. De aquí en adelante, esta aplicación se llamará cariñosamente como "Thump".

La función principal de nuestra aplicación "Thump" será la comunicación de datos entre dispositivos a través de un servidor web intermediario. El acto de agrupar dos dispositivos móviles aparecerá ante el usuario final como una comunicación de dispositivo a dispositivo local, cuando de hecho el servidor web haya procesado el intercambio de datos. Si bien la idea de comunicación con un dispositivo local puede parecer el enfoque más práctico al principio, en la práctica está llena de colisiones multiplataforma y pesadillas de seguridad. Entonces, en lugar de eso, usaremos una aplicación Rails alojada en la plataforma Heroku para manejar la recepción de mensajes desde nuestros dispositivos y entregar el mensaje a su destinatario..

La forma en que esto funciona es bastante interesante. El servidor esencialmente hará una estimación de quién será el destinatario más probable de un mensaje basándose en una combinación de coordenadas GPS y una marca de tiempo del servidor. Simultáneamente (o casi simultáneamente) agrupando nuestros dos dispositivos, enviaremos información de latitud y longitud al servidor para que pueda determinar que nuestros dos dispositivos localmente similares intentaron comunicarse entre sí en algo casi en tiempo real. Simple a la derecha?

Si bien este método no es exactamente perfecto, proporciona una probabilidad estadística de que nuestros dos dispositivos pretenden comunicarse entre sí. Uno de los grandes problemas con un servicio como este (y nuestra aplicación no es una excepción) sería un evento como una feria comercial o un lugar donde muchas personas estén tratando de "golpear" al mismo tiempo. Si bien puede ser poco probable, potencialmente podría permitir la transmisión de un mensaje a un destinatario no deseado..

Comenzaremos creando una funcionalidad básica para nuestra aplicación móvil. En nuestro archivo main.lua, agregaremos algunas líneas de código esenciales para que podamos comenzar.

 local ui = require ('ui') system.setLocationAccuracy (10) local isSimulator = "simulator" == system.getInfo ("environment") local deviceId = system.getInfo ("deviceID")

La primera línea requiere que incluyamos la biblioteca de IU que ayuda en gran medida a la creación de componentes nativos en Corona. Este código se incluirá en un archivo zip de código fuente adjunto a este tutorial Mobiletuts +. A continuación, estableceremos un umbral de precisión de ubicación para nuestros dispositivos. Necesitamos que el dispositivo haga todo lo posible para obtener una ubicación con una tolerancia de error de no más de 10 metros. Si la distancia es mayor que esto, corremos el riesgo de captar golpes accidentales de dispositivos que no están cerca de nosotros. Para facilitar las cosas mientras desarrollamos, detectaremos si nuestra aplicación se ejecuta en el simulador de Corona o en el dispositivo. Esto será principalmente para evitar comportamientos impares de funciones que actualmente no son compatibles con el simulador. Por último, necesitamos identificar un dispositivo con un valor único. Un ID de dispositivo como este evitará que el servidor intente devolver un mensaje al dispositivo que lo envió en lugar del destinatario deseado.

 local bg = display.newRect (0, 0, display.contentWidth, display.contentHeight) local logo = display.newImageRect ("logo.png", 172, 107) logo.x = display.contentWidth / 2 logo.y = ( display.contentHeight / 2) - 150

A continuación, creamos un rectángulo de fondo que le da a nuestra aplicación un bonito fondo blanco. Las siguientes 3 líneas mostrarán un logotipo en la parte superior central de la pantalla.

 título localLabel = ui.newLabel límites = 15, 5, 290, 55, texto = "Mensaje", fuente = native.systemFontBold, textoColor = 12, 12, 100, 255, tamaño = 24, alinea = " center " titleLabel: setReferencePoint (display.TopCenterReferencePoint) titleLabel.y = logo.y + 60

El código anterior usa el acceso de la biblioteca de la interfaz de usuario a los componentes de visualización nativos del dispositivo. En este caso, simplemente estamos mostrando la palabra "Mensaje" en un tono azul oscuro. El alcance de este artículo no incluye todas las complejidades de la biblioteca de visualización nativa, por lo que sugiero echar un vistazo al sitio de Corona si eres nuevo en el SDK. Las coordenadas Y se están configurando a 60 píxeles más que la posición del logotipo que acabamos de mostrar..

 if isSimulator then - Simulator (simula el área del campo de texto) textField = display.newRect (20, titleLabel.y + 60, 280, 30) textField: setFillColor (200, 200, 200) else field function localHandler (event) if (" envió "== event.phase) luego native.setKeyboardFocus (nil) end end textField = native.newTextField (20, titleLabel.y + 60, 280, 30, fieldHandler) end textField: setReferencePoint (display.TopCenterReferencePoint) textField.x = display.contentWidth / 2 textField.y = titleLabel.y + 60

Una de las limitaciones del simulador es que no puede mostrar correctamente todos los componentes nativos de los dispositivos móviles. Para evitar que se produzcan errores, detectaremos si ejecutamos la aplicación en el simulador y mostraremos un cuadro gris en lugar de un campo de entrada. Esto nos ayudará con nuestro posicionamiento de los elementos. Si la aplicación no se está ejecutando en el simulador, vamos a mostrar un componente nativo "textField" que permitirá al usuario final escribir un mensaje. La devolución de llamada de fieldHandler es necesaria para detectar una fase de "enviado" o, en otras palabras, el usuario que presiona el botón "regresar". Al capturar este evento, podemos ocultar el teclado después de que el usuario haya terminado de escribir su mensaje..

 local removeKeyboard = function (event) - Ocultar teclado native.setKeyboardFocus (nil) end bg: addEventListener ("tap", removeKeyboard)

Como un bono adicional de la interfaz de usuario, podemos agregar un detector de eventos a nuestro fondo blanco que espera un evento de "toque". De esta manera, si el usuario toca la pantalla fuera del área del teclado, eliminará el enfoque y hará que desaparezca..

 local latitudeText = "" local longitudeText = "" si isSimulator entonces local alert = native.showAlert ("Error", "GPS no está disponible en el simulador") else local locationHandler = function (event) latitudeText = string.format ('% .8f ', event.latitude) longitudeText = string.format ('% .8f ', event.longitude) end Runtime: addEventListener ("location", locationHandler) end

¡Ahora a las cosas buenas! Primero, detectaremos si estamos ejecutando en el simulador y simplemente mostraremos un mensaje de error que indica que el GPS no está disponible. Cuando ejecutamos en el dispositivo, creamos un detector de tiempo de ejecución que continuamente toma nuestra ubicación del servicio de ubicación del dispositivo y llama a este método de LocationHandler con estos datos. Lo convertimos para tener 8 decimales de precisión, lo que debería ser más que preciso para nuestros propósitos..

 local getThump = function (event) if event.isShake == true entonces local alert = native.showAlert ("Thump!", "Location:"? latitudeText? ","? longitudeText? "\ r \ nMessage:"? text. texto, "OK") system.vibrate () end end Runtime: addEventListener ("acelerómetro", getThump)

Por último, crearemos otro detector de eventos de tiempo de ejecución que toma datos del acelerómetro del dispositivo y los pasa a nuestro método getThump. Dentro de este método, detectaremos si el evento fue un evento de "sacudida". Un evento de sacudidas es otro nombre para lo que sucederá cuando "peguemos" dos dispositivos juntos con la esperanza de transmitir un mensaje. Como todavía no hemos escrito nuestro componente de servidor, simplemente mostraremos estos datos en un cuadro de alerta para mostrar que nuestra aplicación está funcionando hasta el momento. Para probar esto, simplemente puede escribir un mensaje y sacudir el dispositivo que ejecuta la aplicación..

La próxima vez?

Estén atentos para la parte II de esta serie la próxima semana, donde abordaremos la funcionalidad del lado del servidor en Rails en Heroku!