Cómo crear tu primera App
Importante
Esta guía ha sido diseñada con el objetivo de enseñarte a crear tus propias Aplicaciones Móviles sin necesidad de programación.
Si sigues el tutorial paso a paso, en poco más de media hora tendrás listo tu primer prototipo y además, conocerás los fundamentos necesarios para crear (y vender si lo deseas) Aplicaciones para todo tipo de Pymes.
Para empezar, crearemos una App para un Centro Médico con:
- Registro de Usuarios (Login)
- Información de la Clínica
- Integración de Redes Sociales para generar viralidad
- Función de Reserva de citas
- Y un área privada de Archivos para que la clínica pueda compartir documentación específica con cada paciente
Y por si fuera poco, al final te explicaré algunas funciones avanzadas como por ejemplo:
- Integrar un Asistente de Inteligencia Artificial especializado en medicina para responder consultas de los usuarios
- Personalizar al 100% el diseño de la App modificando el código
- Y crear automatizaciones conectando la App con otras herramientas que pueda usar la clínica
Para que te hagas una idea del valor de esto en el mercado...
Si una clínica quisiera encargar el desarrollo de una App a medida como esta, no podría hacerlo por menos de 30.000€ y unos 6-8 meses de desarrollo.
Comencemos...
Guia Paso a Paso
Para nuestro ejemplo vamos a crear la App del Centro Médico de la ficticia Doctora experta en Pediatría Anna Smith
1- Materiales
Para que te resulte aún más fácil llevar a cabo la creación de esta App vamos a facilitarte todos los materiales gráficos necesarios que utilizaremos para las distintas secciones de esta App:
2- Creación del código
1 - En primer lugar deberás iniciar sesión sesión en Scoreapps con tu usuario y contraseña desde https://app.scoreapps.com/login
2 - A continuación dirígete a la sección "Apps" del menú lateral izquierdo del Panel.
3 - Luego haremos clic en el botón + Nueva App
4 - A continuación, debemos colocar un nombre para nuestra App y luego hacer clic en el botón CREAR
(En nuestro ejemplo vamos a colocar el nombre DRA. ANNA SMITH)
5 - Luego aparecerá el asistente inicial en el que deberás escoger una Plantilla con la que iniciar tu App. Se trata de una serie de diseños predefinidos que incorporan algunas funciones que el sistema considera apropiadas para cada nicho, sin embargo luego es posible cambiar absolutamente todo, tanto el diseño de la Plantilla escogida como la funcionalidad (pudiendo añadir nuevas funciones o eliminar las que vienen)
Para nuestro ejemplo vamos a seleccionar la Plantilla en blanco para construir nuestra App completamente desde 0
A continuación se cargará la plantilla en blanco en el constructor:
3- Pasos del Constructor
Como puedes ver la construcción de la App se distribuye en 6 Pasos: Diseño, Colores, Funciones, Aplicación, Avanzado y Publicar
Paso - Diseño
Dentro de este paso encontraremos todo lo relacionado con la navegación de la App, el diseño de la portada la tipografía o fuente y algunos ajustes más.
Comenzaremos haciendo clic en "Elegir Navegación (Layout)"
Aparecerá una ventana emergente con un repositorio de distintos Layouts o menús de navegación.
Debes tener en cuenta que cada Layout tiene sus propios ajustes de configuración
Para nuestra demo vamos a seleccionar el Layout 1 que es el que viene seleccionado por defecto y haremos clic fuera de la ventana emergente para continuar.
A continuación nos moveremos un poco hacia abajo y encontraremos una sección llamada "Página de Inicio" donde vamos a colocar el diseño de portada o página de inicio de la App.
Verás que aparece un icono rosa con un interrogante en el que podrás encontrar un video explicativo sobre cómo diseñar la imagen para la Página de inicio.
Para esta Demo ya te ofrecemos esa imagen diseñada, solo tienes que hacer clic en el botón azul "Cambiar imagen de inicio" y subir la imagen que has descargado en el MATERIAL GRÁFICO llamada INICIO.jpg
Una vez cargada la imagen, haz clic en el botón del "Ver cambios" que se encuentra sobre el emulador del lado derecho del constructor y verás cómo se muestra la imagen de portada que hemos cargado.
Un poco más abajo encontraremos la configuración de "Configuración de Localización"
En el desplegable "Moneda" debemos escoger la moneda que deseamos establecer y en "Idioma predeterminado" el idioma deseado.
Para nuestra Demo escogeremos como moneda el Euro y en Idioma predeterminado Español
Paso - Colores
Aquí encontraremos la posibilidad de modificar los colores de los distintos elementos que componen la App
Para modificar un color solo tienes que hacer clic sobre el círculo de color y seleccionar el color deseado o añadir el código del color deseado en RGB o HEXADECIMAL
Para nuestra Demo vamos a personalizar solo los siguientes ajustes de color utilizando para el color azul el siguiente código de color:
rgba(55, 111, 255, 1)
Puedes copiar y pegar directamente el código
Un poco más abajo configura también el siguiente ajuste de color de "Botón"
Paso - Funciones
En este paso es donde añadiremos a nuestra App las distintas secciones o funciones deseadas.
Si haces scroll hacia abajo verás que cuentas con una gran variedad de funciones disponibles y que puedes añadir dentro de la App y también cuentas con un buscador de funciones en la parte lateral izquierda del constructor que te ayudará a localizar la función que buscas.
Para nuestra Demos vamos a añadir las siguientes funciones:
- Pagina Personalizada
- Compartir
- Reservas Pro
- Archivos
- Mi cuenta
Para añadir estas funciones en tu App simplemente escribe en el buscador la función que deseas localizar y el buscador la encontrará.
Para añadir esa función en la App solo tendrás que hacer clic sobre el recuadro de la función:
Una vez hayas añadido las funciones mencionadas pulsa en el emulador del lado derecho del constructor en "Ver cambios" y se mostrará de la siguiente manera:
La barra "Tus funciones" se mostrará de la siguiente manera:
Si lo deseas puedes cambiar el orden de las funciones pinchando sobre el icono de las flechas de cada función y arrastrándolo a la posición deseada:
De igual modo si desearas eliminar una función de tu App solo tendrías que hacer clic en el icono del aspa para eliminarla:
En este punto de la Guía vamos a explicarte cómo puedes visualizar desde tu propio dispositivo móvil cómo está quedando tu App
Para ello tendrás que seguir los pasos que indicamos en nuestro Artículo: ¿Cómo previsualizar una App? utilizando como icono de la PWA el icono que encontrarás dentro del MATERIAL GRÁFICO llamado "ICONO APP"
A partir de ahora, con la versión PWA de la App instalada en tu dispositivo podrás ir viendo como se aplican todos los cambios que vamos configurando (tendrás que salir y entrar de nuevo en la App para que se muestren los cambios)
Ahora continuaremos configurando las distintas funciones que hemos añadido en nuestra App:
Función - PÁGINA PERSONALIZADA
Haremos clic sobre el icono de la primera función añadida "Página Personalizada"
Se desplegarán los ajustes de configuración de esta función:
Vamos a comenzar cambiando el icono de esta sección de la App y para ello haremos clic en el icono azul
Se abrirá una ventana en la que podemos o bien añadir nuestro propio icono personalizado o escoger uno de la librería de iconos del constructor.
Para nuestro ejemplo hemos escogido el siguiente icono pero tú puedes escoger el que desees:
Ahora vamos a cambiar el Título de esta sección y vamos a colocar "CONTACTO"
Continuando con la configuración de esta sección de la App vamos a añadir un bloque de "Imagen de Cabecera"
Haremos clic en el botón azul "Añadir cabecera" y subiremos la imagen llamada "CABECERA CONTACTO" que se encuentra en la carpeta SECCIÓN - CONTACTO dentro del MATERIAL GRÁFICO
A continuación vamos a añadir un bloque de "Texto"
Utilizaremos este bloque de texto para incluir información sobre la Doctora Anna Smith
Puedes colocar el texto que desees, nosotros para este ejemplo hemos añadido el siguiente texto:
La Dra. Anna Smith es una reconocida especialista en Pediatría en Madrid. Licenciada en Medicina y especializada en Pediatría en el Hospital Universitario de Getafe, la doctora cuenta con una extensa formación en distintos campos de la especialidad. En concreto, es experta en el seguimiento del niño sano, patologías digestivas, dolor abdominal funcional, estreñimiento, lactancia materna y problemas del sueño.
Ahora vamos a añadir un bloque de "Botón"
Y vamos a configurarlo de la siguiente manera:
Como icono personalizado subiremos la imagen llamada "TELÉFONO" que se encuentra en la carpeta "SECCIÓN - CONTACTO" dentro del MATERIAL GRÁFICO
A continuación vamos a añadir otro bloque de "Botón" y lo configuraremos de la siguiente forma:
Como icono personalizado subiremos la imagen llamada "EMAIL" que se encuentra en la carpeta "SECCIÓN - CONTACTO" dentro del MATERIAL GRÁFICO
Para finalizar con la configuración de esta sección de la App añadiremos un último bloque de "Botón" que configuraremos de la siguiente manera:
Como icono personalizado subiremos la imagen llamada "UBICACIÓN" que se encuentra en la carpeta "SECCIÓN - CONTACTO" dentro del MATERIAL GRÁFICO
En el campo "Enlace" puedes colocar la url de cualquier dirección de Google Maps que desees, nosotros para este ejemplo hemos añadido el siguiente enlace que puedes copiar y pegar directamente:
https://www.google.es/maps/place/Plaza+de+Alonso+Mart%C3%ADnez,+5,+Centro,+28004+Madrid/@40.4273369,-3.6982906,17z/data=!3m1!4b1!4m6!3m5!1s0xd42288e8c468a01:0x24ef5692c4bd1e82!8m2!3d40.4273328!4d-3.6957157!16s%2Fg%2F11rgc0r297?hl=es&entry=ttu
Para finalizar marca la opción "En el navegador fuera de la App" y pulsa el botón "Guardar" que se encuentra en la parte superior de la página
Si lo deseas puedes refrescar la App ya instalada en tu dispositivo móvil y acceder a la sección CONTACTO para ver los ajustes que hemos aplicado en esta sección.
Función - COMPARTIR
Ahora haremos clic sobre el icono de la función añadida "COMPARTIR"
Al igual que hicimos con la sección anterior vamos a cambiar el icono haciendo clic en el icono azul
Para nuestro ejemplo haciendo uso del buscador hemos escogido el siguiente icono pero tú puedes escoger el que desees:
También vamos a editar el título de esta función, en este caso vamos a mantener el mismo texto pero vamos a colocarlo en letras Mayúsculas.
A continuación vamos a configurar las opciones de esta función.
En primer lugar haremos clic en el botón azul "Imagen de portada 1080 x 600" y subiremos la imagen del MATERIAL GRÁFICO llamada "IMAGEN SECCIÓN COMPARTIR"
Luego completa los campos que encontrarás a continuación de la siguiente forma y pulsa el botón "Guardar"
Si ahora previsualizas la App desde tu dispositivo verás que esta sección se muestra de la siguiente forma:
Si pulsas en el botón azul COMPARTIR verás que se te ofrece la opción de compartir la App a través de distintas aplicaciones como Whatsapp, email, etc...
Función - RESERVAS PRO
Del mismo modo que lo hemos hecho con las anteriores funciones vamos a cambiar el Icono y el Título de esta sección:
Esta función es una de las más complejas de todo nuestro constructor ya que dispone de multitud de ajustes que permiten su configuración de distintas formas en función de las necesidades del proyecto pudiendo cambiar textos, añadir distintas formas de pago, etc...
Para configurar esta sección de la App empezaremos por la pestaña "Ajustes"
Para nuestra Demo vamos a configurar las distintas secciones de la pestaña "Ajustes" de la siguiente manera:
¡IMPORTANTE! En el desplegable Timezone (Zona horaria) escoge la zona horaria que corresponda con tu ubicación.
Para finalizar con la configuración de esta pestaña pulsa el botón "Guardar"
Ahora pasaremos a la pestaña "Pago"
En esta pestaña encontraremos las distintas opciones de configuración relacionadas con el pago de las reservas.
Para nuestro ejemplo vamos a escoger la forma de pago Efectivo (Cash) haciendo clic sobre el icono del lápiz y vamos a configurarlo de la siguiente forma y finalizaremos la configuración pulsando el botón "Guardar"
Ahora pasaremos directamente a la pestaña "Etiquetas" desde donde podemos modificar algunos textos que se muestran en esta función.
Para nuestra Demo vamos a modificar las siguientes etiquetas haciendo clic sobre el icono del lápiz:
Proveedores > Doctora
Servicios > Citas
Ahora pasaremos a la pestaña "Panel"
Al hacer clic en esta sección se abrirá otra pestaña del navegador y desde la que configuraremos todo lo relacionado al Servicio de reserva de Citas.
Lo primero que veremos será un panel de gráfica vacío en el que se empezarán a recopilar datos a medida que se vayan realizando reservas a través de la App.
Para empezar con la configuración iremos a la sección del menú lateral izquierdo "Ubicaciones" y haremos clic en el botón "Agregar ubicación"
Completaremos la información de la Ubicación de la siguiente manera:
Para la imagen, utilizaremos la imagen llamada CABECERA DE CITAS que se encuentra dentro de la carpeta SECCIÓN - CITAS del MATERIAL GRÁFICO.
Luego pulsaremos el botón "Guardar"
Ahora haremos clic en el icono de los 3 puntos y seleccionaremos la opción "Días hábiles" para configurar la apertura horaria de la ubicación
Ahora vamos a configurar la apertura horaria de la ubicación de Lunes a Viernes de 8:00 AM a 8:00 PM.
Luego, más abajo pulsaremos el botón "Guardar"
Ahora iremos a la sección del menú lateral izquierdo "Categorías" y haremos clic en el botón "Añadir Categoría"
Completaremos la información de esta sección de la siguiente manera:
Para la imagen, utilizaremos la imagen llamada ICONO CATEGORÍA que se encuentra dentro de la carpeta SECCIÓN - CITAS del MATERIAL GRÁFICO.
Luego pulsaremos el botón "Guardar"
Ahora iremos a la sección del menú lateral izquierdo "Servicios" y haremos clic en el botón "Añadir Servicio"
Completaremos la información de esta sección de la siguiente manera:
Para la imagen, utilizaremos la imagen llamada ICONO SERVICIO que se encuentra dentro de la carpeta SECCIÓN - CITAS del MATERIAL GRÁFICO.
Luego pulsaremos el botón "Guardar"
Antes de pasar a la siguiente sección haz clic en los tres puntos que se encuentran a la derecha del Servicio y selecciona la opción "Editar"
Asegúrate de que el Servicio queda correctamente vinculado con la Ubicación que anteriormente hemos configurado.
Luego pulsa el botón "Guardar"
Ahora iremos a la sección del menú lateral izquierdo "Proveedores" y haremos clic en el botón "Añadir Proveedor"
Completaremos la información de esta sección de la siguiente manera:
Para la "Descripción" puedes añadir el texto que desees o puedes añadir el texto que encontrarás dentro de la carpeta "SECCIÓN - CITAS del MATERIAL GRÁFICO llamado "DESCRIPCIÓN PROVEEDOR".
Una vez hayamos completado todos los campos de esta sección pulsaremos el botón "Guardar"
Luego haremos clic en el icono de los 3 puntos y seleccionaremos la opción "Días hábiles"
A continuación configuraremos la disponibilidad horaria del Proveedor de 8:00AM a 8:00PM
Luego, más abajo pulsaremos el botón "Guardar"
Luego pulsaremos el botón de la parte superior "Volver"
De nuevo volveremos a hacer clic en el icono de los 3 puntos y ahora seleccionaremos la opción "Servicios"
Luego marcaremos el servicio (Consulta con Dra.) para vincularlo con el proveedor (La doctora) y haremos cllic en el botón "Guardar"
¡Ya hemos completado la configuración de la función de Reservas!
Ahora vamos a configurar la función "Mi Cuenta"
Función - MI CUENTA
Haremos clic sobre el icono de la función "Mi Cuenta"
Del mismo modo que lo hemos hecho con las anteriores funciones vamos a cambiar el Título de esta sección y vamos a colocar CUENTA:
A continuación vamos a marcar la casilla "Auto registro" para que los usuarios puedan registrarse en la App
Luego más abajo pulsaremos el botón "Guardar"
¡Veamos ahora cómo sería el proceso de registro de un usuario en la App!
Primero pulsaremos en el botón "Ver Cambios" en el emulador para refrescar los últimos cambios aplicados:
Luego haremos clic en el icono del menú "CUENTA"
A continuación, haremos clic en el enlace "Crear una cuenta" y nos registraremos con los siguientes datos:
- Nombre: Arturo
- Apellido: Gómez
- Correo electrónico arturogomez@gmail.com
- Contraseña 123456
Marcaremos la casilla de aceptación de los Términos de servicio y pulsaremos el botón "Registrarse"
¡Listo ya tenemos un usuario registrado en nuestra App!
Ahora pasaremos a la configuración de la última función "Archivos"
Función - ARCHIVOS
Haremos clic sobre el icono de la función "Archivos"
Al igual que hicimos en secciones anteriores vamos a cambiar el icono de esta sección de la App haciendo clic en el icono azul
Para nuestro ejemplo haciendo uso del buscador hemos escogido el siguiente icono pero tú puedes escoger el que desees:
También vamos a editar el título de esta función, en este caso vamos a colocar el texto MI HISTORIAL
A continuación comenzaremos con los ajustes de esta sección.
Comenzaremos haciendo clic en la pestaña "Ajustes"
En la pregunta "¿Los nuevos usuarios están habilitados de forma predeterminada?" seleccionaremos la opción SÍ
A continuación, en el campo "Nombre del tipo de archivo" colocaremos .PDF
Luego haremos clic en el botón "Imagen" para cargar la imagen llamada "ICONO PDF" que se encuentra dentro de la carpeta SECCIÓN - MI HISTORIAL del MATERIAL GRÁFICO.
Un vez cargado el icono de PDF haremos clic en el botón azul "AÑADIR"
A continuación haremos clic en la pestaña "Archivos"
En la pestaña "Seleccionar un usuario" escogeremos al usuario que hemos registrado y pulsaremos el botón azul "Administrar"
Luego, en la sección Lista de Carpetas haremos clic en el botón azul "Añadir una carpeta"
Se abrirá una ventana emergente en la que colocaremos el título "HISTORIAL MÉDICO" y pulsaremos el botón "Guardar"
Un poco más abajo, dentro de la sección Lista de Archivos, en "Filtrar por Carpeta" seleccionaremos la carpeta que acabamos de crear "HISTORIAL MÉDICO" y pulsaremos el botón azul "Cargar un Archivo"
Se abrirá la siguiente ventana emergente:
Pulsaremos el botón "Seleccionar archivo" y cargaremos el PDF llamado "EJEMPLO DE RADIOGRAFÍA TORAX" que se encuentra dentro de la carpeta SECCIÓN - MI HISTORIAL del MATERIAL GRÁFICO.
Luego completaremos el resto de campos de la siguiente manera:
A continuación iremos a la pestaña "Usuarios" para marcar como Activo a nuestro usuario:
¡Enhorabuena, has completado la construcción de la App!
Ahora, si haces clic en "Ver cambios" en el emulador y vas a la sección de la App "MI HISTORIAL" verás la carpeta de HISTORIAL MÉDICO y el archivo RADIOGRAFÍA TORAX que acabamos de cargar al usuario Arturo Gómez:
Ahora que estás registrado en la App como el usuario Arturo Gómez también puedes probar el proceso de realizar una reserva desde la sección CITAS de la App
Otras Funciones Avanzadas
Ahora que ya has creado tu primera App y tienes los conocimientos básicos necesarios para utilizar Scoreapps, voy a explicarte cómo puedes llevar tu App al siguiente nivel.
Inteligencia Artificial
La IA está revolucionándolo todo. Desde la implementación de servicios hasta la relación con clientes, la IA está incorporándose cada día en más y más procesos productivos. Y una forma de añadir muchísimo valor a tus Aplicaciones es sin duda la incorporación de un asistente de IA que pueda asesorar a los usuarios 24x7.
Si deseas añadir IA en tu App, sólo tienes que seguir este tutorial (no te llevará más de 20 minutos).
Introduce tu propio Código en la App
Si eres un usuario avanzado, debes saber que también puedes introducir tu propio código HTML, CSS y JS en la Aplicación.
Podrás customizar el diseño tanto como quieras modificando el CSS y si deseas crear tu propio módulo o integrar cualquier web externa, puedes usar la función de Código para eso.
Automatizaciones
Si estás creando una App para una clínica, puede que tu cliente quiera conectar la App con su base de datos, o su CRM o su herramienta de Email Marketing... Con Scoreapps puedes conectar tus Apps con otras herramientas y crear automatizaciones de forma muy sencilla.
Para eso están los Webhooks.
Un webhook es como un mensajero automático que avisa a otras aplicaciones cuando ocurre algo importante en tu app o herramienta. Por ejemplo, si un cliente rellena un formulario, el webhook puede enviar esa información directamente a Make o Zapier para que hagan algo con ella, como guardar el contacto en un CRM o enviar un email.
En resumen, los webhooks te ayudan a conectar herramientas y crear automatizaciones sin tener que hacer nada manualmente. Solo configuras las reglas, y el webhook se encarga de avisar y pasar los datos en tiempo real. ¡Es una manera sencilla de ahorrar tiempo y hacer más eficiente tu negocio!
Popular Articles
Guía de Negocio para Resellers y Partners
En esta Guía de Negocio vamos a analizar los 8 puntos más importantes a tener en cuenta si te estás planteando lanzar tu Propio Negocio de Apps: ¿Cuánto puedes ganar con un Negocio de Apps? Demo de Scoreapps: Cómo crear Apps y Monetizarlas ¿Qué ...Ver una Demo de Scoreapps para Resellers
En este vídeo te explicamos el modelo de negocio, los tipos de Apps que puedes crear y las distintas herramientas que incluye Scoreapps en su Plan de Resellers: Y en este otro vídeo te enseñamos cómo funciona el software por dentro:Proporciona acceso a tus Aplicaciones
Con el Plan Reseller o Plan Partner puedes otorgar fácilmente a tus clientes o colaboradores acceso a tus aplicaciones. Accede a tu Panel de Apps, y después accede a cualquier Aplicación: Una vez dentro del constructor de Apps, ve a Mi Cuenta - ...Cómo Crear una App de Tienda
El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de ...Cómo diseñar la pantalla de inicio o portada de una App
En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:
Related Articles
¿Cómo previsualizar una App?
La forma más rápida y más real de ver cómo está quedando una App mientras la estás construyendo, y antes de publicarla en las versiones nativas Android e iOS, es publicarla en la versión PWA, ya que esta publicación se hace en pocos clics y podrás ...Cómo Personalizar el Dominio de tu Proyecto
Tus Funnels y Websites tienen un subdominio por defecto el cual puedes personalizar por uno propio. Paso 1 En primer lugar, ve a la sección de Web / Funnels de Scoreapps y despliega las opciones haciendo clic en el icono de engranaje del proyecto ...¿Prefieres que creemos nosotros tu App?
Si prefieres centrarte en tu negocio, nuestro equipo puede encargarse de todo el proceso de diseño, configuración y publicación de la App por ti. El único requisito es la contratación de un plan anual Starter, Business o Growth (desde 790€). Si estás ...Cómo Saber Quién Rellena tus Formularios de Registro / Checkouts
¿Has lanzado una campaña de marketing y quieres saber de dónde vienen tus contactos? Es SUPER sencillo con la propiedad utm_source. ¿En qué consiste? Cuando crees tus URLs en tus anuncios de google/facebook por ejemplo, añade al final: ...Transferir una aplicación de una Cuenta de Desarrollador de Apple a otra diferente
TRANSFERENCIA PASO A PASO PASO 1. Acceder a la cuenta de App Store Connect > My Apps PASO 2. Elegir la APP a transferir > Seleccionar opción Transfer App PASO 3. Revisar y aceptar los términos y condiciones del acuerdo. PASO 4. Seleccionar la opción ...