Si has llegado a este artículo a través de Google o de alguna red social, lo que vas a encontrar aquí es un tutorial o guía paso a paso para poder crear una aplicación desde macOS (Mac) o Linux, sin necesidad de saber programar o escribir código fuente.
Recientemente publicamos un artículo sobre cómo se puede desarrollar software sin necesidad de programar código, pero más que una guía práctica, como pretende ser esta, es una aproximación sobre a qué nos referimos con ese tipo de desarrollos y cuáles son las posibilidades, herramientas y plataformas disponibles para ello. Una de las plataformas citadas dentro de la categoría de plataformas low-code, es Velneo, nuestra plataforma de desarrollo de aplicaciones. Y es en la que vamos a basar esta guía.
En esta guía vamos a aprender a:
- Registrarnos en velneo.es.
- Descargar las herramientas de edición necesarias para nuestro propósito.
- Crear nuestro servidor cloud gratuito.
- Instanciar un software desarrollado en Velneo, para comenzar a partir de una plantilla y no necesitar hacerlo desde cero.
- Realizar sencillas modificaciones, sin necesidad de tocar código fuente en la herramienta de desarrollo.
- Y por último, hacer público ese programa que hemos personalizado con nuestras modificaciones, para que cualquiera pueda acceder a él.
Paso 1: Registrarnos en velneo.es
Este paso no tiene demasiado misterio, pues es común a registrarnos en cualquier otra web, red o servicio de Internet. Sin embargo es imprescindible para poder disponer de nuestra cuenta, que nos permitirá descargar las herramientas necesarias, así como disponer de nuestro servidor cloud, como veremos en el siguiente paso.
Básicamente deberemos dirigirnos a la página de registro de Velneo, que es esta: https://velneo.es/register/Y registrarnos, bien utilizando nuestra cuenta de Google/Gmail o bien realizando un alta manual con la cuenta de correo electrónico que deseemos.
Indicaciones específicas para registros que no utilizan el botón de Google/Gmail
En mi caso, me voy a registrar con una alias de mi cuenta, ya que mi cuenta de Gmail ya está asociada a mi usuario actual de Velneo. Concretamente voy a registrar el usuario "guiapasoapaso" exclusivamente para este tutorial :)Deberemos marcar el check de que estamos de acuerdo con las políticas de privacidad del sitio web, así como el check del reCaptcha de "No soy un robot" para poder formalizar el registro.
Si no marcas estos dos checks, no podrás hacer clic en el botón "REGÍSTRATE".
Una vez que hemos hecho click en el botón de registro, aparecerá una página indicando que debemos de consultar nuestro email (con el que nos hayamos dado de alta) para poder validarlo.
Bien, nos dirigimos a la bandeja de entrada o Inbox de nuestro email en cuestión y habremos recibido un email de Velneo.es con el asunto "Activación y datos de acceso a Velneo":
El email consta de dos partes, por un lado un botón "Activar la cuenta" en el que debemos de hacer clic para activar nuestra cuenta:
Al hacer clic en el mismo nos informará de que nuestra cuenta se ha activado y nos llevará automáticamente a la página de Iniciar sesión.
En esta página deberemos introducir nuestro "Nombre de usuario" o nuestro "Email" con el que nos hemos registrado, así como nuestra contraseña. Si te estás preguntando qué contraseña, esta se genera automáticamente en el registro y venía indicada en el email de "Activación y datos de acceso a Velneo", a continuación del botón "Activar la cuenta" nos encontramos con esto:
Así que esos son los datos que debemos introducir para loguearnos en velneo.es desde la página de Iniciar sesión:
No intentéis identificaros con esa contraseña, pues ya se ha modificado :)
Paso 2: Descargar las herramientas necesarias para poder crear nuestra aplicación
Si todo ha ido como debería, al hacer clic en el botón "INICIAR SESIÓN", te llevará a nuestra página de Bienvenida y descarga.
Si no lo hace puedes acceder directamente a ella desde aquí: https://velneo.es/bienvenida-de-descarga/ e identificarte desde la misma, para proceder con la descarga de la herramienta.
Si nos hemos registrado con nuestra cuenta de Google/Gmail, llegaremos aquí directamente, sin necesidad de realizar los pasos anteriores:
En este paso solo deberemos indicar nuestro nombre y teléfono, así como la tecnología en la que actualmente programas, si es que programas en alguna, no es un requisito necesario (existe la opción "Nunca he programado") y entonces se habilitará el botón de descarga:
Nota: Ese botón te descarga los componentes para Windows 64 bits. Si necesitas los componentes para OS X o Linux deberás dirigirte a la página de descargas: https://velneo.es/mi-velneo/descargas/Usuarios de OS X y Linux: En la página de descargas hay un montón de componentes para OS X o para Linux, ¿tengo qué descargar todos? No es necesario, con que descargues Velneo vClient, Velneo vDevelop y Velneo vAdmin, es decir los tres primeros, es suficiente.
Los usuarios de OS X (Mac) y Linux solo necesitáis descargar estos tres componentes.
Una vez que hemos descargado los componentes, procederemos a instalarlos en nuestro ordenador. Y una vez que los hayamos instalado, vamos a crear nuestro servidor cloud gratuito para poder conectarnos a él desde las herramientas que acabamos de instalar.
Paso 3: Crear gratis nuestro servidor cloud para Velneo
Para ello solo debemos acceder a nuestro panel de control Cloud: https://velneo.es/mi-velneo/cloud/ bien haciendo clic en este enlace, o bien desde velneo.es haciendo clic en nuestro nombre de usuario en la parte superior derecha de la web y desde ahí haciendo clic en la opción Panel de control vServer Cloud.
En esa página solo tendremos que hacer clic en el botón "CREAR VSERVER" y esperar a que el proceso (Creando vServer) finalice, cuando lo haga veremos lo siguiente:
¡Ya está! ya tenemos nuestro servidor cloud creado, iniciado y operativo para ponernos a trabajar, así que vamos allá.
Nota que nos servirá para el próximo paso: habremos recibido un nuevo correo electrónico procedente de "Velneo Cloud" en el que se indicarán nuestras credenciales del servidor cloud que acabamos de crear:
Paso 4: Instanciar un software desarrollado en Velneo, para comenzar a partir de una plantilla y no necesitar hacerlo desde cero
Ya tenemos el software necesario instalado en nuestro ordenador (vClient, vDevelop y vAdmin), así que nuestro servidor cloud creado, así que ya podemos continuar al siguiente paso, que no es otro que abrir el editor (vDevelop) y comenzar con el asistente de primeros pasos, que nos hará la vida mucho más fácil.
Para ello solo debemos abrir el vDevelop y en el panel principal de la izquierda, bajo el epígrafe crear, veremos que la segunda opción es "Asistente de primeros pasos". Bien, haremos clic en esa opción y nos abrirá una ventana, ofreciéndonos consultar la guía para crear nuestra primera aplicación, que es como esta, pero más concisa. Solo tendremos que hacer clic en el botón de "Empezar".
En la siguiente pantalla nos pedirá que introduzcamos los datos de acceso de nuestro servidor cloud (el que acabamos de crear en el punto anterior), así que eso haremos y haremos clic en el botón "Conectar".
En la siguiente pantalla se nos ofrecerá la posibilidad de seleccionar una aplicación para empezar, como decíamos al comienzo de este punto, de esta manera instanciaremos, es decir crearemos una copia de una de esas aplicaciones, en nuestro servidor, así de fácil.
Disponemos de tres aplicaciones:
- vGestión: Aplicación básica para conocer Velneo, basada en el curso Mi primera aplicación que podrás encontrar publicada en YouTube en el enlace anterior.
- vContactos: Aplicación de gestión de contactos básica con 140.000 registros.
- vTutor: Aplicación con ejemplos de distintas funcionalidades de la plataforma Velneo. Puedes ver más información aquí: https://velneo.es/vtutor/
En nuestro caso nos vamos a decantar por la opción "vContactos", así que la seleccionamos y hacemos clic en el botón "Instalar".
A continuación se nos abrirá un asistente de instalación de la aplicación que hemos seleccionado, en este caso vContactos. Deberemos hacer cloc en el botón "Siguiente >", después en "Acepto" si estás conforme con las políticas mostradas, a continuación deberemos seleccionar el directorio de datos para vContactos, para ello hacemos clic en el icono de la carpeta que abrirá una nueva ventana donde podremos seleccionar el directorio por defecto "datos" (o crear el nuestro propio personalizado), en nuestro caso seleccionaremos "datos", haremos clic en "Aceptar" y a continuación en el botón "Instalar".
Al hacerlo, se pasará a una nueva ventana que relizará la instalación de vContactos en nuestro servidor y nos aparecerá esta pantalla:
Haciendo clic en el botón "Finalizar" habremos terminado la instalación y nos aparecerá la ¡aplicación instalada y lista para ejecutarse en nuestro propio servidor!
El icono naranja corresponde al "proyecto de aplicación", mientras que el icono azul al "proyecto de datos".
¿No te lo terminas de creer? ¿te parece demasiado fácil y sencillo? Pues para salir de dudas, te invitamos a hacer clic en el quinto icono (el cuarto habilitado) de la aplicación (vDevelop) es el botón que permite ejecutar la solución (aplicación) actual y tiene forma de un botón de play rodeado de un círculo, este:
Al hacer clic sobre él, se ejecutará la aplicación que acabamos de copiar en nuestro servidor, ¡así de fácil!
Podéis utilizar la aplicación: crear nuevos contactos (con los datos Nombre, Grupo, Fecha, Teléfono, Email, Observaciones, Foto), consultar la lista de contactos (dispone de datos de muestra ya cargados), así como realizar una búsqueda en alguno de los contactos ya existentes.
Y ya nos aproximamos al final de este tutorial paso a paso para aprender a crear nuestra propias aplicaciones sin necesidad de programar, no os inquietéis que ya queda muy poco.
Paso 5: Realizar sencillas modificaciones, sin necesidad de tocar código fuente en la herramienta de desarrollo.
Ya hemos creado nuestra cuenta, nuestro servidor, hemos instalado las aplicaciones necesarias, nos hemos conectado a nuestro propio servidor cloud y hemos instanciado una aplicación, en este caso vContactos en nuestro servidor.
Y ahora llega el verdadero interés de todo esto, vamos a realizar alguna sencilla modificación en este programa, para ver lo fácil que nos va a resultar personalizarlo según nuestras necesidades y todo ello sin necesidad de escribir código fuente.
Para ello, lo primero que vamos a hacer es cerrar la ventana que tiene la aplicación "vContactos" en ejecución, regresando así al editor (vDevelop), donde podemos ver dos iconos, uno naranja correspondiente al proyecto de aplicación y otro azul correspondiente al proyecto de datos.
Ahora pongamos que lo primero que deseamos cambiar es el nombre de la aplicación que se muestra en la ventana, al ejecutar la misma, así como el nombre mostrado en la pestaña que carga la aplicación, nos referimos a estos nombres:
Para ello haremos doble clic en el proyecto de aplicación (icono naranja):
Lo cual abrirá una nueva pestaña en el editor con el nombre "vContactos_app 1.0" que mostrará cuatro filas:
Para modificar el nombre de la aplicación (ventana principal) solo tenemos que hacer clic en la primera fila (AUTOEXEC), lo cual nos mostrará un conjunto de propiedades de dicho objeto (de tipo "Marco" en este caso), como Identificador, Nombre, Estilos, etcétera.
Pues ahí lo tenemos, si modificamos el valor de "Nombre", estaremos modificando el primer texto que queremos personalizar. Así que seleccionamos la propiedad "Nombre" en el panel derecho y escribimos el texto que queremos que aparezca en la aplicación, en este caso voy a poner "Aplicación de contactos paso a paso".
Si ahora de nuevo en el panel izquierdo seleccionamos el objeto de la segunda fila, por ejemplo "VCONTACTOS_MENU", se nos mostrarán nuevas propiedades, correspondientes a este objeto, en el panel derecho. Aquí podemos ver como la propiedad "Nombre" de este nuevo objeto (de tipo "Formulario" en esta ocasión), que corresponde a la pestaña donde se ejecuta nuestra aplicación (segundo "vContactos" de la captura señalada con círuclos rojos) también utiliza el nombre vContactos, así que nos situamos sobre él y lo cambiamos, por ejemplo por "Mi aplicación de contactos", pero vamos a ir un pasito más allá.
En ese mismo panel de propiedades, podemos encontrar otra propiedad llamada "Color de fondo" con un código en la misma: "#FFFFFF", esto corresponde al color blanco en hexadecimal, que define el color de fondo de esta pestaña, pero nosotros queremos que el fondo de la misma sea de color amarillo.
Bien, solo debemos hacer clic sobre esa cuadrado blanco en la propiedad y automáticamente se nos abrirá una paleta de colores, donde podremos seleccionar el color que deseemos utilizar. Así podremos seleccionar fácilmente un color amarillo con nuestro ratón y hacer clic en aceptar. Ya el editor se encarga de traducir la elección de nuestro color al código hexadecimal que corresponde (en mi caso he elegido el amarillo correspondiente al código #ffffc0).
Pues bien, ya hemos hecho nuestras dos primeras modificaciones en nuestra aplicación, ahora solo queda guardar los cambios, haciendo para ello clic en el cuarto icono principal del editor vDevelop, con forma de disquete:
y volver a hacer clic en el icono de ejecutar nuestra aplicación, para ver en directo los cambios que acabamos de realizar:
Y.... ¡magia!
Como podemos apreciar en la nueva ejecución, hemos cambiado el nombre que aparece en la ventana de la aplicación (Aplicación de contactos paso a paso), el nombre que aparece en la pestaña donde se ejecuta la aplicación (Mi aplicación de contactos), así como el color de fondo de la misma, del blanco anterior, al amarillo que hemos seleccionado. Ya hemos comenzado a personalizar nuestra propia aplicación y todo ello lo hemos hecho con nuestro ratón y escribiendo texto normal con nuestro teclado, sin necesidad de programar nada ni de escribir absolutamente nada de código fuente, ¿prometen las posibilidades, verdad?
Como verás, el potencial de desarrollar tu propio software o aplicación totalmente personalizada y adaptada a tus gustos y necesidades, desde OS X o Linux (también Windows, por supuesto), sin necesidad de saber programar, es muy alto y muy sencillo.
Una vuelta de tuerca con muchísimo potencial, más allá de textos o colores, vamos a personalizar los campos a la hora de crear un nuevo contacto y de visualizar el mismo.
Para ello, tras cerrar la aplicación en ejecución y sin salir de donde nos encontramos en el vDevelop, desplegaremos la carpeta "Contactos" que nos mostrará siete nuevos objetivos. Vamos a seleccionar el primero "CONTACTO" (también de tipo "Formulario") pero en esta ocasión vamos a hacer doble clic sobre el mismo y veremos como se nos abre una nueva pestaña, donde podremos ver dicho formulario de manera visual. Es el mismo formulario que vemos cuando, ejecutando la aplicación, hacemos clic sobre la opción "Nuevo contacto".
Pues bien, desde esta ventana, vamos a seleccionar una área con nuestro ratón, concretamente la correspondiente a la etiqueta "Observaciones", el campo del mismo nombre, así como los botones "Eliminar", "Aceptar" y "Cancelar", también se nos seleccionará el control de "Añadir foto", no hay problema. Una vez seleccionados esos cuatro controles, vamos a moverlos con el propio ratón hacia abajo, para así dejar espacio para un nuevo campo que vamos a incluir a continuación. No te preocupes, puedes ver cómo hacerlo de manera muy fácil en este mini vídeo que acabo de crear.
Ahora ya disponemos de espacio en nuestro formulario para incluir nuevos campos. Y para no complicarnos la vida, vamos a continuar con nuestra metodología de copiar y pegar, ¿fácil no? :)Seleccionaremos, igual que hemos hecho en el paso anterior, la etiqueta "Teléfono" y el campo #TELEFONO y ejecutaremos la combinación de teclas correspondientes a "Copiar y Pegar" (Command+C, Command+V en OS X, Control+C, Control+V en Linux y Windows) y veremos que la etiqueta y el campo que tenemos seleccionados se han duplicado y seleccionado las copias automáticamente. Pues bien, directamente con el ratón, ubicaremos esta etiqueta y campos duplicados, en el espacio que habíamos dejado libre anteriormente.
Y ahora vamos a personalizarlos, para distinguirlos con facilidad. Pero para ello necesitamos crear el nuevo campo "Móvil" que pretendemos crear. Para ello, antes de nada, deberemos regresar a la pestaña "vContactos" de nuestro vDevelop y hacer doble clic sobre el icono del proyecto de daos (icono azul):
Esto nos abrirá una nueva pestaña "vContactos_dat 1.0", donde aparecerán tres nuevas filas. Seleccionaremos la primera de ellas, "CONTACTOS" y en el panel derecho de propiedades, en la parte inferior donde aparecen listados los "Campos", podremos seleccionar el campo "TELEFONO" y hacer ejecutar "Copiar y Pegar" con nuestro teclado. Esto creará un nuevo campo "TELEFONO1", que pasaremos a personalizar desde la parte superior del panel derecho, cambiando su identificador a "MOVIL" y su nombre a "Móvil".
Seleccionamos la etiqueta "Teléfono" que acabamos de duplicar y ubicar y en el panel derecho de "Propiedades" cambiamos su "Identificador" y su "Nombre", por ejemplo por "NF_MOVIL" y "Móvil"
Ahora que ya disponemos del nuevo campo creado, podemos volver a donde estábamos (pestaña "vContactos", doble clic en icono amarillo y seleccionar pestaña "CONTACTO").
Bien, ahora solo nos falta seleccionar nuestra etiqueta duplicada "Teléfono" y en el panel derecho de propiedades, en la propiedad "Campo" seleccionar el campo "MOVIL" que acabamos de crear y automáticamente esa etiqueta mostrará el contenido "Móvil" que definimos anteriormente.
A continuación seleccionamos el campo "#TELEFONO1" e igualmente modificaremos sus propiedades "Identificador" a "ED_MOVIL", "Nombre" a "Móvil" y "Contenido" a "#MOVIL" quedándonos el formulario de esta manera:
Guardamos los cambios que hemos aplicado y si ejecutamos nuestra aplicación y hacemos clic en "Nuevo contacto", ¡eh voilá! nuestro formulario dispone de un nuevo campo: "Móvil", donde podremos incluir un teléfono móvil para dicho contacto:
Podemos introducir los datos deseados en un nuevo contacto, hacer clic en "Aceptar" y ¡listo! ya tendremos nuestro nuevo contacto guardado, con los datos del nuevo campo que hemos creado. Si vamos a la lista de contactos de nuestra aplicación haciendo clic en la opción "Contactos" y buscamos el contado "Guia paso a paso" y hacemos clic en el mismo, veremos que efectivamente, el teléfono móvil que hemos creado en nuestro nuevo campo, ¡se ha guardado! Parece magia, pero es Velneo:
¿Te gustaría que el campo "Móvil" que acabamos de crear se pudiera ver directamente en el listado (rejilla) anterior? Te invitamos a intentarlo por ti mismo, es muy fácil: solo tienes que localizar el objeto rejilla en el proyecto de aplicación y arrastrar el nuevo campo a la misma. Inténtalo y si necesitas ayuda, no dudes en pedírnosla a través de los comentarios de este artículo o a través de los foros.
Paso 6: hacer público este programa que acabamos personalizado con nuestras modificaciones, para que cualquiera pueda acceder a él.
¡Este paso también es mucho más sencillo de lo que parece! Para que cualquier persona que nosotros queramos pueda acceder a este programa, solo necesitará dos cosas: descargar e instalar vClient y conocer los datos de acceso a la aplicación (servidor, usuario y contraseña), en nuestro caso, al no haberlos modificado, son los mismos que recibimos en el email de "Nuevo vServer".Así que descargamos e instalamos vClient, lo ejecutamos e introducimos los datos y hacemos clic en el botón "Conectar", lo cual abrirá una nueva ventana donde podremos seleccionar nuestra aplicación "vContactos_app" y al hacer doble clic en la misma, o tras seleccionarla clicar en "Aceptar", se abrirá nuestra aplicación personalizada:
Y hasta aquí nuestra guía/tutorial paso a paso (para dummies jajaja) de cómo registrarnos en velneo.es, descargar e instalar las aplicaciones necesarias, crear nuestro servidor cloud gratuito, copiar o instanaciar una aplicación de ejemplo en nuestro nuevo servidor, personalizar dicha aplicación (textos, colores y hasta ¡campos!) y hacerla accesible para otras personas (o para nosotros mismos en remoto).
Y todo ello sin necesidad de saber programar, pues no hemos necesitado escribir ni una sola línea de código fuente para ello.
Y ahora que has visto por ti mismo que puede llegar a ser bastante sencillo crear o personalizar tu propia aplicación, ¿a qué estás esperando para sumergirte en este apasionante mundo?
Esto es solo el comienzo y a partir de aquí puedes profundizar muchísimo más en el desarrollo de aplicaciones de gestión, tanto desde Mac (OS X), como desde Linux o Windows. Aquí te dejamos con una lista de recursos, tanto gratuitos como de pago, con los que podrás continuar profundizando en el conocimiento y características de Velneo como plataforma de desarrollo:
- Curso gratuito de "Mi primera aplicación" en YouTube con más de 70 vídeos disponibles.
- Para pasar al siguiente nivel, te recomendamos el curso oficial de Velneo para desarrollo de aplicaciones de gestión empresarial impartido por CamposMVP.
- Velneo dispone de una extensa documentación de su plataforma.
- Y si te atascas, siempre hay personas dispuestas a echarte una mano en los foros de Velneo.
Estaremos encantados de recibir tus comentarios, sugerencias y dudas en los comentarios, ¡anímate!
