Cómo crear tu primera App
Introducción
No es casualidad que todas las grandes empresas cuenten con su propia App. Los beneficios que aportan a los negocios son enormes:
- Acceso a nuevos clientes: Una aplicación móvil puede abrir nuevos canales de venta y marketing, permitiendo a la empresa alcanzar a nuevos clientes que prefieren interactuar a través de dispositivos móviles.
- Mejora en la fidelización de los clientes actuales
- Incremento en ventas directas e indirectas: Las aplicaciones móviles pueden facilitar las ventas directas a través de características como tiendas en línea o reservas. Además, características como notificaciones push pueden ser utilizadas para promociones especiales, aumentando las ventas indirectas.
- Reducción de costos: Una app puede automatizar procesos que anteriormente requerían intervención manual, como toma de pedidos, reservaciones o consultas de clientes, lo que puede reducir costos operativos y mejorar los márgenes de beneficio.
- Análisis de datos del cliente
El problema era que desarrollar una App con funciones avanzadas y múltiples integraciones conllevaba muchos meses de desarrollo e inversiones de decenas de miles de euros.
¡Para solucionar eso creamos Scoreapps!
Guia Paso a Paso
Para nuestro ejemplo vamos a crear la App de un Centro Médico.
En concreto 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 1 - MI CUENTA
Haremos clic sobre el icono de la función "Mi Cuenta"
Se desplegarán los ajustes de configuración de esta función:
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 ...