Cómo construí mi primera aplicación móvil multiplataforma usando JavaScript y XDK

Tengo que admitirlo desde el principio: tengo más de una década de experiencia desarrollando aplicaciones.

He escrito aplicaciones principalmente para empresas. Esto significó que utilicé programas de software comercial y lenguajes de programación patentados, principalmente impulsados ​​por la política de la organización para la que estaba desarrollando, empleada o ambas.

Mientras tanto, crecieron los lenguajes de código abierto. Y, aunque tenía algunas habilidades de JavaScript, CSS y HTML, mis habilidades en estas áreas no eran lo suficientemente buenas como para migrar directamente a un trabajo en desarrollo web. La cual he elegido recientemente como una opción de carrera porque:

  • alguien escondió mi queso, por lo que se hizo necesario volver a entrenar
  • hay mucha gente que quiere sitios web y cosas así
  • existe esta promesa de desarrollo de aplicaciones multiplataforma para dispositivos inteligentes

Entonces, comencé a renovar mis habilidades. Elegí Free Code Camp, o finalmente me eligió a mí. Sinceramente, no estoy seguro de cuál. El "cómo" salté a las aguas de Free Code Camp no es importante para esta historia. Sin embargo, es información de fondo importante.

La otra pieza importante de esta historia es la promesa del desarrollo de aplicaciones multiplataforma.

He intentado durante dos años, o tal vez más, localizar una herramienta decente que cumpliera la promesa del desarrollo de aplicaciones multiplataforma. Estoy seguro de que si me quedé con algunas de las herramientas que probé en el pasado, tal vez podría haber resultado algo útil.

Pero aquí está el problema: tengo mucha prisa. No tengo tiempo para aprender. Realmente necesito una herramienta de desarrollo que realmente funcione fuera de la caja con un mínimo esfuerzo. Supongo que estoy acostumbrado a los productos comerciales en ese sentido.

Volver a Free Code Camp. Todo lo que voy a decir es que llegué a las tirolinas. Y terminé esos. También tengo un pequeño déficit de atención. Una vez que terminé las tirolinas, me di cuenta de que: "Lejos, ahora puedo crear aplicaciones basadas en la web". Ahora dominaba los lenguajes de código abierto: marcas y lenguajes de scripting como HTML, CSS y JavaScript. Y necesitaba un descanso de la escuela en esta etapa.

Entonces, miré a mi alrededor en busca de herramientas que pudieran cumplir la promesa del desarrollo de aplicaciones multiplataforma. Y, después de probar un poco, volví a familiarizarme con Intel XDK (sí, tuve esto instalado en mi máquina durante aproximadamente 6 meses, inactivo). Para ser justos, mis habilidades de scripting eran algo deficientes cuando lo instalé por primera vez (a pesar de mi comprensión integral de VBA, codificación orientada a objetos e integración de bases de datos relacionales).

Intel XDK también había mejorado mucho, y antes de crear mi primera aplicación con él, actualicé a la (entonces) versión actual.

Entonces, ¿por qué elegí Intel XDK sobre sus competidores? A lo largo de los años, he probado y desechado unas diez herramientas diferentes. Aquí hay un resumen de mis experiencias:

  • Un producto de la competencia no permitía al usuario final (yo) editar mi propia aplicación. Podría empezar a construir uno, pero entonces no había forma conocida de editarlo. Este no es un problema que uno espera, nunca. Sabes, después de un descanso, como, no sé, apagar mi computadora para poder dormirme y luego regresar al día siguiente para continuar construyendo mi aplicación, pero ¿no hay forma de acceder a mi trabajo en mi máquina? Adivina cuánto tiempo duró esa herramienta de desarrollo en mi máquina… Sí, busqué apoyo. Las respuestas que encontré me decepcionaron incluso más que no poder editar mi propio código. Grrr…
  • Documentación: Probé otra herramienta donde la documentación tenía aproximadamente 12 meses (según la fecha de publicación). En ese tiempo, Córdoba se había movido a años luz más allá de donde quedó esa documentación obsoleta. Y, como tantas cosas cubiertas de polvo, las instrucciones sobre cómo usar esta herramienta en particular en la que estoy pensando realmente no eran tan relevantes o útiles. En la papelera se fue.
  • Otras herramientas basadas en servidor me ponen nervioso. ¿Qué sucede si el servidor falla o la organización responsable se declara en quiebra? ¿Cómo recupero mi maldito código? No me gusta tanto riesgo. El mundo gira demasiado rápido. Las cosas se caen todo el tiempo. No necesito que mi IP sea arrojada al mundo debido a una mala elección de hosts de aplicaciones de mi parte. Y las soluciones basadas solo en servidor tienden a costar mucho más de lo que puedo pagar. ¿Y quién es realmente el propietario de la IP cuando el código que escribo está alojado en la máquina de otra persona?

Más acerca de Intel XDK

Cuando jugué con esta versión de Intel XDK, descubrí, gratamente, que podía ejecutar mi aplicación. Primero ve. Y no es una aplicación simple, utiliza la geolocalización para buscar algunas cosas. Y otras cosas trixy. Sabía de antemano que necesitaría algunos complementos. Jugar con PhoneGap anteriormente en el artículo me presentó a Cordova (PhoneGap solía ser gratis, ahora propiedad de Adobe, no tan gratis). Esto fue hace meses. Mirar Intel XDK sugirió que algunas cosas podrían hacerse con el código propietario de Intel, y tal vez algunas deberían ser manejadas por complementos de terceros (por Cordova, por ejemplo).

Resulta, cuando comencé, que parte del código propietario de Intel estaba en proceso de quedar obsoleto (pero esto no estaba claro para mí, el usuario final, en ese momento). El fragmento de código que elegí (on.device.ready, no su nombre completo, porque ya lo olvidé) estaba a punto de desaparecer.

Me encanta Intel XDK, porque funciona, pero, como muchas herramientas en estos días, la documentación no se mantiene al día con la funcionalidad. Y no es que la documentación esté necesariamente muy atrás. En el caso de Intel XDK, la documentación es completa y precisa (yay), pero un poco difícil de encontrar (aww).

Entonces, sí, estoy tratando de usar esta llamada, y mi aplicación está funcionando. Y no puedo recordar: ¿Actualicé a la siguiente versión y mi aplicación se rompió, o mi código simplemente no funcionó perfectamente y también actualicé a la próxima versión (sí, Intel lanzó una actualización a Intel XDK aproximadamente una veces al mes, intente mantenerse al día con ese horario como comerciante individual).

En verdad, casi me rindo con Intel XDK. Pero, pensé: "Al diablo con esto" (soy australiano). Y: “Casi he terminado esta aplicación. Lo aguantaré ". Y así, encontré información que indica que la llamada 'on.device.ready' aún no estaba muerta, pero su familia de amigos estaba muerta y enterrada (en desuso, en letras azules mayúsculas). No tiene sentido llorar por los seres queridos. Es hora de cambiar de marcha y avanzar agresivamente.

Entonces, aprendí rápidamente sobre los complementos de Cordova y cómo usarlos en Intel XDK. No resulta tan difícil. En mi primera aplicación, estoy usando complementos bastante conocidos y utilizados.

Y sí, la buena noticia es que una vez que descubrí cómo agregar los complementos de Cordova, no miré hacia atrás.

Entonces, aquí hay algunos atajos para crear una aplicación con Intel XDK. Mis perlas de sabiduría para ayudarte, lector, a evitar los senderos más oscuros que tomé y mantenerte bien en la luz:

  • No me importa qué aplicación intentas desarrollar, dile a Intel XDK que cree una versión de Cordova. En caso de que necesite utilizar un complemento. Y, sí, probablemente necesitará StatusBar. Porque iOS.
  • Necesitará, como mínimo, conocimientos de HTML y CSS. Además de algo de JavaScript para usar los complementos correctamente. Sí, puedes usar JQuery en su lugar si eso es lo tuyo. La cantidad de JavaScript o JQuery depende de la aplicación que esté creando. Deberá poder crear sitios web para poder usar algo como Intel XDK. ¿Aún no sabes cómo crear un sitio web? Aquí está la solución: únase a Free Code Camp y aprenda hasta las tirolinas e inclusive. Una vez que haya hecho eso, estará listo para jugar con Intel XDK. Sí es usted.
  • Para su primera aplicación, dígale a Intel XDK que cree con una de sus plantillas. Esto le dará un código listo para usar, que ayudará a acortar el "espera, ¿y ahora qué?" parte.
  • index.html: esta es la primera interfaz de usuario que se presenta al eventual usuario final (cliente) de su aplicación. Su conocimiento del desarrollo de sitios web que adquirió hasta e incluyendo Free Code Camp Ziplines lo ayudará a descubrir qué hacer con este archivo.
  • GitHub: querrá seguir las instrucciones para cada complemento que use. Para encontrar la documentación de su complemento, busque en Google “github cordova [complemento]”, donde “[complemento]” es el nombre del complemento que está buscando. Por ejemplo, la búsqueda "github cordova statusbar" debería llevarlo al complemento de la barra de estado con bastante facilidad. La documentación del complemento cordova en github es excelente.
  • StackOverflow: haga aquí sus preguntas "tontas". No olvide buscar primero las respuestas a su pregunta. La vasta comunidad de mentores en StackOverflow hace un esfuerzo particular para señalar que su pregunta ya ha sido formulada (y respondida).
  • Foro de productos Intel XDK: haga aquí sus preguntas específicas sobre Intel XDK “tontas”. Los chicos de Intel son tus amigos (felizmente). Y los otros desarrolladores que usan Intel XDK también están felices de ayudar si pueden.
  • Intel XDK crea tres paquetes cuando se crea para dispositivos Windows. Todavía estoy tratando de entender por qué compila tres, pero solo necesito cargar uno en la tienda de Windows. Consulte los foros de Intel XDK para obtener la respuesta. Yo pregunté. Está documentado ahora. No es la respuesta completa. Solo la respuesta que necesitará para continuar. Es suficiente.

Mantenlo simple y estúpido

Bien, aquí está el consejo básico que su mamá y su papá deberían haberle dado antes de que se fuera de casa:

  • cree la menor cantidad de código posible.
  • esto incluye archivos de activos. Mi primera aplicación tenía demasiados archivos CSS y demasiados archivos JS. Seriamente. El "aww, snap" que estaba teniendo con "on.device.ready" me dio la oportunidad de consolidar mi IP en menos archivos y deshacerme de los bits que en realidad no se usaban en ninguna parte. Es una buena práctica.
  • Use el código de otras personas (no en el sentido de plagio): use las plantillas listas para usar que Intel XDK proporciona para reducir la curva de aprendizaje. Al menos para tu primera aplicación.
  • ¿Atascado en un "cómo"? Pregúntele a Google y encontrará la respuesta en StackOverflow. Modifique el aprendizaje para sus propósitos y luego pase al siguiente problema. Lo sabrás para la próxima vez.
  • Leer libros. Jajaja. Como si tuviera tiempo. Hablando en serio. Encuentra el tiempo.
  • Todavía estoy leyendo sobre el lenguaje de programación Swift ... Ni siquiera está relacionado. Pero al menos se trata de código.
  • Utilice los activos de otras personas. Para mi primera aplicación, encontré una biblioteca de animación CSS y una biblioteca de fuentes ordenada. Me aseguré de que mi aplicación atribuyera estas bibliotecas en la página de información "Acerca de" de mi aplicación. Según las condiciones de la licencia. Y porque es lo correcto.

Uso de Intel XDK para crear su primera aplicación

Descargue e instale Intel XDK.

En Intel XDK:

  1. Haga clic en "Iniciar un nuevo proyecto".
  2. Elija "Plantillas" y luego "Diseños e interfaces de usuario".
  3. Elija la aplicación Tab View (o puede elegir otro tipo de plantilla si lo desea). Marque "Usar App Designer" (esto instalará un código listo para construir y comenzar con - yay).
  4. Haga clic en Continuar.
  5. En la ventana del proyecto, haga clic en el botón Actualizar a Cordova.
  6. Cuando se crea el proyecto, agregue el siguiente complemento de Cordova (nuevamente en el menú del proyecto):

    Barra de estado

Los complementos que elija dependerán completamente de lo que esté creando. Los complementos le ayudan a utilizar las funciones de los dispositivos en los que se ejecutará su aplicación. Es probable que necesite al menos uno. Porque iOS.

Construyendo su aplicación

Aparte de los aros de requisitos sobre-diseñados de Apple (¿qué maldito certificado necesito de nuevo?) Y la “elección de Windows de tres paquetes”, el proceso de construcción en sí mismo es simple. Vaya a la pestaña Construir. Sube tu código, crea tu paquete, descarga tu paquete.

Yo no se ustedes. Soy pobre. Puedo probar mi paquete de iOS. No puedo probar mis paquetes de Android o Windows. Algún día espero poder probar en más de una plataforma. Lo siento probar conejillos de indias (es decir, todos mis clientes en dispositivos de Google y Windows).

Para usted, el desarrollador: el emulador en Intel XDK debe considerarse solo como una guía. Lo descubrirás. Marchar sobre. No tomar prisioneros. Este no es momento para asustarse por el miedo a: "¿y si no funciona?" Ten algo de fe. Maldito sea por intentarlo. No seas condenado por fallar.

Para Android, querrá compilar utilizando la opción "Paso de peatones para Android". Dos palabras sobre el por qué: "caja flexible". Si necesita saber más, consulte la documentación. Flex box tiene una forma de colarse en cada proyecto (en mi limitada experiencia).

¿En qué no puedo ayudarte?

  • La forma de hacer las cosas de Apple está muy sobre-diseñada. Tienes que crear tu propio certificado usando un método complicado. Todo el mundo se equivoca. Al menos una vez. Perseverar.
  • El período de revisión de Apple es largo. Aproximadamente 7 días (eso no es un error de imprenta, ¡lleva días!). Es una primera experiencia emocionante. ¿Qué pasa si la aplicación es rechazada? ¿Sabré qué hacer si es rechazado? ¿Por qué tarda tanto? ¿Ese estado de revisión significa que Apple lo revisará o que se supone que debo hacerlo? ¡Aaaargh! ¿Está listo todavía? ¿Que esta pasando? Oh, y las noches de insomnio. Y la comprobación minuto a minuto del correo electrónico. Eso nunca llega.
  • Google tarda unas horas. La misma aplicación se revisará e implementará dentro de las 24 horas. Quizás un poco más. Menos de 48. Dicho esto, si escribes una aplicación muy complicada, tal vez más.
  • Windows tarda unas horas. Y luego aproximadamente un día para estar disponible para descargar en la tienda de Windows. Pero no tendrás clientes. Entonces es un punto discutible. Construya para teléfonos con Windows de todos modos. Completará su currículum.

¿Que estoy haciendo ahora?

Estoy creando otra aplicación.

Esta historia apareció originalmente en Creatureoftech.com.