Hola a todos. Mi nombre es David, de King of App, el primer gestor de contenidos de código abierto del mercado enfocado a la creación de apps híbridas para dispositivos móviles. En este vídeo vamos a mostraros brevemente el funcionamiento básico de nuestro builder, la herramienta con la que podréis crear vuestras apps de forma rápida y sencilla. El primer paso es entrar a nuestro sitio web: www.kingofapp.es, desde el cual podréis acceder a la plataforma pinchando en el enlace "log in" situado en el menú principal superior. Una vez hecho esto accederéis a la página tanto de registro como de acceso. En primer lugar crearemos una cuenta rellenando el formulario de registro, indicando los datos solicitados. Esto nos enviará un correo de verificación a la bandeja de entrada de la dirección indicada. Una vez validada, podremos empezar a usar todas las funcionalidades de la plataforma.
Para empezar, vamos a ver la configuración general de nuestra cuenta. Desde ella, podremos cambiar el idioma principal de toda la herramienta, así como otras operaciones habituales de gestión de cuenta tales como cambiar nuestros datos o administrar los perfiles de facturación, que trataremos más adelante. Para crear nuestra primera app, una vez identificados dentro del builder, debemos pinchar en mis apps, donde ya nos sugerirán que pinchemos en crear nueva app. Al hacerlo, lo primero que el gestor nos pide es seleccionar la plantilla. ¡Un momento! ¿Qué es esto? Una plantilla es como un paquete preconfigurado que incluye una serie de funcionalidades predeterminadas, proporcionadas por módulos, así como una estética visual preasignada. Al igual que ocurre con otros CMS orientados a desarrollo web, la elección inicial de la plantilla es clave y se orienta más hacia una tipología de app concreta. Ya sabéis lo que se dice: Una gran plantilla conlleva una gran responsabilidad. Por ejemplo, si queremos hacer una para un estudio tatuajes podemos escoger esta y ver que incluyen el pack. También podemos pinchar en ver "demo" para mostrar una vista previa a tiempo real.
Si es la que nos gusta y nos da todo lo que necesitamos pinchamos en: "usar". En otro caso podríamos pinchar en volver y probar otra, pero nos quedaremos con ésta finalmente. Esto nos lleva a la página de módulos, donde podemos gestionar todos los módulos incluidos en la plantilla. ¡Espera, espera! ¡Cuánta información! ¿Qué hago yo ahora con todo esto? Tranquilos, no olvidemos que la elección de plantilla no es más que una configuración inicial de partida, que podemos después modificar a nuestro gusto.
Personalizando la app tanto como queramos a posteriori. Las plantillas tienen un coste inicial pero son un excelente método para generar apps predefinidas y plenamente funcionales muy rápidamente. Pero espera, ¿entonces tengo que pagar siempre? ¿no puedo hacer mi propia app de cero? Claro que sí. Veamos cómo: Antes de empezar a hablar de todas las posibilidades que ofrece el builder de King of App, es conveniente hablar del aquitectura de una app tal y como el CMS la maneja. Una app puede estar compuesta por hasta tres tipos de componentes: módulos, servicios y estilos.
Los módulos aportan la lógica de funcionalidad que queremos ofrezca la app al usuario como mostrar contenido propio o de otro social media. Los servicios son funciones transversales, generalmente aprovisionadas por terceros, tales como analíticas o notificaciones push. Los estilos se encargan de aportar el look and feel o estilo de la app. En esta ocasión, vamos a crear una nueva app basada en el Android Starter Kit, que pese a su nombre no está restringido sólo a esa plataforma, sino que se trata de una plantilla gratuita con lo mínimo necesario para tener una app muy básica con la que trabajar desde cero.
Ahora tenemos algo más sencillo por lo que empezar, pero antes de nada vamos a entrar en: administración > datos generales. Para rellenar cierta información relevante de la app como la categoría, el idioma, las descripciones y finalmente las palabras clave. Rellénala bien, ya que esta información aparecerá después en los markets cuando la app sea publicada. Volvamos a los módulos, donde veremos dos grandes botones: añadir módulo y añadir menú. Esto se debe a que el menú principal de nuestra app tiene un comportamiento un tanto especial que veremos más adelante. Por ahora, vamos a trabajar con el que viene por defecto: Polymer Menu del que solamente diremos ahora para simplificar que es un contenedor de otros módulos.
Aunque el CMS permite complicarla todo lo que se quiera en este ejemplo trabajaremos con una sencilla arquitectura de menú único con dos secciones: un módulo de html propio y uno de YouTube. Ambos gratuitos. Pinchamos en añadir módulo y vemos todos los que hay disponibles. Podemos filtrarlos por valoración, categoría o autor. Ordenarlos por diversos criterios o buscar directamente el nombre del módulo. Una vez lo encontremos, pinchamos en "usar" y éste se añadirá a nuestra estructura de app. Sin embargo, en la vista previa a tiempo real no parece que haya cambiado nada. ¿ He hecho algo mal? No, simplemente que por defecto el módulo recién añadido se coloca al final de la app, pero fuera del módulo menú contenedor.
Esto es porque ambos están al mismo nivel en la jerarquía de contenedores, es decir, que tanto Polymer Menu como YouTube Video son hijos directos del contedor principal de la app y por tanto sólo se mostrará aquel en el que se encuentre marcada la casilla "principal", es decir, que si pinchamos en dicha casilla para el módulo de YouTube éste se verá en la a pero perderemos el menú.
Por tanto, lo que debemos hacer es arrastrar el módulo al contenedor donde queremos que aparezca. Todo esto parece muy lioso ¿me lo puedes explicar mejor? Aguanta un poco, terminemos antes de configurar los módulos y ahora vamos con eso. Si te fijas, cada módulo tiene un botón de edición o eliminación. Si pinchamos en el de YouTube podremos ver su configuración particular. Editamos lo que corresponda y antes de guardar vamos a ver una de las grandes características de nuestro CMS Open Source. Si bien existen otras soluciones similares en el mercado que permiten a partir de un mismo proyecto generar aplicaciones para varias plataformas, normalmente éstas suelen restringir al usuario a opciones cerradas, no dejándole personalizar la aplicación a nivel interno tanto como desee.
Si tienes conocimientos de programación web: html, css y javascript o dispones de un programador que los tenga tierra sin duda pueden tocar las tripas, es decir el código de tu aplicación para no tener ningún tipo de límite a la hora de crearla. En King of App te ofrecemos esa posibilidad. Pinchamos de edición avanzada y accedemos a este editor en vivo desde el que podemos añadir código propio y personalizar nuestro módulo.
Pinchamos en "guardar" para ver los resultados y después en "volver". Ahora que estamos tocando código aprovechemos y vayamos al otro módulo que teníamos, el de html, que nos permite añadir contenido totalmente personalizado mediante un editor Wysiwyg (What you see is what you get). Es posible insertar imágenes o vídeos pero sólo a partir de una url, por lo que cuidado si este contenido está offline o no aparecerá en la app. No olvides pinchar en "guardar" y por supuesto del mismo modo que hicimos con de YouTube podemos insertar todo el html personalizado que queramos. Hay muchos otros modelos interesantes como los de WordPress que nos permiten a partir de otro website que hayamos desarrollado en dicho CMS obtener el contenido de sus páginas o entradas.
Sin embargo, dado que la configuración de este módulo es algo más compleja, la dejaremos para este otro vídeo que te indicamos aquí abajo. Recuerda también que cada módulo tiene al final de su configuración unas instrucciones precisas de cómo configurarlo. Si además de todos los que te ofrecemos eres programador y te ves capaz de desarrollar tus propios módulos echa un vistazo a este otro vídeo en el que te explicamos cómo hacerlo. Por último, vamos a añadir también un par de servicios. En este caso Google Analytics, que también tendremos que configurar para que funcione, aunque por esta vez omitiremos ese paso. Hasta aquí hemos conseguido configurar y construir los componentes de nuestra app, pero nos falta dotarla de navegación y darle un look & feel y acorde a la identidad visual que queramos. Para lo primero, vamos a configurar un módulo que ya mencionamos antes, pero que dejamos para más adelante: "El menú" Si nos vamos a quitar nuestra aplicación y a configurar nuestro módulo contenedor, en este caso Polymer Menu, dentro de él podemos ver todas las opciones disponibles para la personalización del menú.
De todas ellas, nos interesa especialmente la creación de ítems de menú, que serán los accesos directos que se mostrará al usuario para acceder a los distintos módulos que hemos añadido previamente. En este caso sólo tenemos dos, así que solamente tendremos que añadir uno. Éste ha sido un ejemplo sencillo de cómo crear un menú a partir de un módulo contenedor, sin embargo la plataforma permite crear estructuras y navegaciones más complejas que te contamos en el vídeo cuyo enlace se encuentran más abajo.
Vamos con el segundo aspecto de la personalización hacia el usuario: la apariencia. En nuestro builder ésta es totalmente personalizable a nivel de cada componente por separado. Sin embargo, es posible aplicar a toda la app un estilo genérico que comprenda la elección de colores, tipografías y otras cuestiones estéticas a este concepto lo llamaremos "estilo" y podemos aplicarlo de la siguiente manera: Seleccionamos el estilo que queramos aplicar, teniendo en cuenta lo siguiente: como ya hemos construido y personalizado nuestra aplicación, puede ocurrir que no queramos que el estilo sobreescriba ciertos aspectos gráficos, por lo que en el momento de adquirirlo nos lo pregunta expresamente. Como en este caso sí queremos que se apliquen todos los cambios, desmarcaremos todo menos "mantener el menú". Recuerda que como máximo sólo podemos tener un estilo activo.
Por último, vamos a apariencia, personalizar, para añadir imagen de icono, de carga, destacada y promocional. También podemos cambiar el fondo, la tipografía o los colores por si no nos gusta algunos de los que aplicó el estilo asignado. O incluso, determinar distintas apariencias según la plataforma. Si bien estos dos últimos pasos son opcionales. Si no te convence ninguno de los estilos de la plataforma y tienes conocimientos de programación puedes también crear los tuyos propios, para lo que te recomendamos ver este vídeo dándote todos los pasos para hacerlo.
Una vez ya tenemos todos los módulos de nuestra app añadidos, enlazado el menú y la apariencia definida, viene la última parte: generar los respectivos ejecutables para cada plataforma, lo que a partir de ahora llamaremos "compilación", así como su publicación en los respectivos market places. Actualmente nuestro builder compila a iOS y Android. Desde el dashboard o panel general, podemos ver el informe que realiza el builder sobre el estado de nuestra app.
Es altamente recomendable resolver las incidencias que ahí se nos indican antes de proceder a la compilación y posterior publicación en los markets. Una vez lo hayamos hecho podemos ir a compilación. Desde aquí, podemos elegir entre diversos planes, bien sea por paquetes, por número de compilaciones o una suscripción mensual. También es posible descargarte el código fuente de tu app y compilarlo tú mismo si dispones de los conocimientos de programación necesarios. Para este ejemplo vamos a seleccionar una compilación. Ahora, vamos a seleccionar el método de publicación para el que básicamente tenemos dos opciones: o lo hacemos nosotros por ti o la públicas tú mismo con tu cuenta de desarrollador.
Para este ejemplo seleccionamos la primera opción. Para terminar, nos vamos al carrito y, si estamos conformes con todo, rellenamos nuestra ficha. ¿Te acuerdas cuando el principio del todo hablamos de los perfiles de facturación? Nos referíamos a esto Si tienes una única empresa, este paso sólo tendrás que hacerlo una primera vez. En otro caso, siempre puedes ir a tu configuración de cuenta y añadir más para facturar con distintos CIFs o NIFs.
Aceptamos el pago por Payal y una vez confirmado todo el proceso de pago ya podremos realizar la publicación en los marketplaces. Y ya para terminar nos vamos al panel general y hacemos clic en publicar. Eso es todo, ya tenemos nuestra app creada, funcionando y disponible para su descarga en los markets principales. Esperamos que nuestro builder te haya parecido sencillo y que se adapte a tus necesidades particulares. No olvides también dejarnos tus comentarios y tu feedback para que podamos seguir mejorándolo cada día.
Gracias por ver el vídeo, nos vemos en el siguiente tutorial de King of App, el primer gestor de contenidos de código abierto de creación de apps híbridas para dispositivos móviles..