--- title: "Como crear una app para restaurante: guía paso a paso" description: "En nuestra última guía paso a paso hablábamos sobre cómo crear una app los viajeros, para promocionar una ciudad, una region o cualquier negocio de turismo. Hoy" canonical_url: "https://es.goodbarber.com/blog/guia-paso-a-paso-para-crear-la-app-de-un-restaurante-a535/" lang: es date: 2020-03-14 last_updated: 2022-04-07 --- # Como crear una app para restaurante: guía paso a paso [Atrás](/blog/articulos-populares-r18/) # Guía paso a paso para crear una App de restaurante Escrito por GoodBarber Team el Sábado 14 Marzo 2020· Última actualización: Jueves 7 Abril 2022 ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11249181-18711495.jpg?v=1487946913.1254613) En nuestra última guía paso a paso hablábamos sobre[cómo crear una app los viajeros](https://es.goodbarber.com/blog/como-crear-aplicaciones-de-ciudad-y-turismo-a443/), para promocionar una ciudad, una region o cualquier negocio de turismo. Hoy, nos centramos en como [crear](https://es.goodbarber.com/blog/como-crear-app-android-ios-tutorial/) [la app de un restaurante,](https://es.goodbarber.com/blog/restaurantes-3-ingredientes-digitales-para-triunfar-a533/) vamos a ver que hay en el menú del día. ## 1. Escoge un tema ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11249181-18711728.jpg?v=1492767928.340538) Escoger un tema es el primer paso para crear una *Beautiful* App. En tu *back* *office* puedes escoger entre los 25 temas diferentes creados por nuestros diseñadores. El tema que escojas es sólo el punto de partida, podrás personalizar y ajustar todos los detalles. Recomendamos escoger un estilo que se acerque al color que quieres para tu app. Por ejemplo, en esta app hemos escogido el tema "*Green*". ## 2. Construye tu Home ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11249181-18711813.jpg?v=1492768350.1772914) La *Home* es la primera pantalla que tus usuarios verán cuando abran la app. Es una característica importante tanto en lo visual como en lo práctico. Con GoodBarber 4.0, la *Home* te permite escoger contenido que resaltar cuando se abre la ap. Además, te permite mostrar enlaces que dirigen a otras destinaciones de tu app. La *Home* modular está creada por 2 tipos de *widgets* diferentes, los de contenido y los de navegación (enlaces) - hay 66 *widgets* en total. Las plantillas conectadas con los *widgets* tienen una declinación para móvil, tablet y escritorio. Aquí puedes ver que hemos añadido nuestro primer *​widget,* para mostrar una sección mCMS de artículos (el menú de nuestro restaurante): ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11249181-18711877.jpg?v=1492768460.4856942) Después de seleccionar la plantilla (Banner > Minimal), hemos personalizado la fuente utilizada para mostrar el Título del mismo modo que el número de items mostrados, de 3 a 4. ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11249181-18711957.jpg?v=1492768545.7298515) Ahora, vamos a añadir otro *widget* de contenido para destacar los Eventos, y seleccionar una plantilla, en este caso seleccionamos Lista > Card. ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11249181-18711976.jpg?v=1492768739.8936508) Ahora vamos a añadir enlaces, el primero dirigirá a la sección About: ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11249181-18711995.jpg?v=1492768828.1909802) Como puedes ver, de acuerdo a la plantilla seleccionada (aquí, Banner>SmallSlideshow) es posible mostrar un botón para editar varios ajustes del diseño (la fuente, el texto...): ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11249181-18712177.jpg?v=1492769014.2743764) Hemos añadido otro *widget* de navegación con otro conjunto de enlaces. Hemos creado un *widget* diferente para poder habilitar otra plantilla, Lista >Visual Icon. Como puedes ver, puedes destacar enlaces internos (hacia secciones), así como enlaces externos (hacía la página de Facebook, por ejemplo): Nuestra *Home* muestra 4 *widgets*. ## 3. Construye tu Menú ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11249181-18907583.jpg?v=1492769223.0773647) Con GoodBarber 4.0 el Menú se utiliza como navegación secundaria dentro de la app. La *Home* proporciona los principales puntos de entrada a través de las secciones que decidas, del mismo modo que las llamadas a la acción, por eso puedes incluso escoger si mostrar o no este menú. Si decides inhabilitar el Menú (o modo de navegación en tu *Back office*), podrás escoger entre 7 tipos diferentes de "menús" o modos de navegación, para distribuir el tráfico a tu app. Independientemente del número de secciones que tenga tu app, puedes construir un menú para controlar toda la navegación de la app. Tu menú puede destacar enlaces y accesos directos, que apunten a destinaciones, al mismo tiempo que también puedes colocar títulos y separadores para priorizar la información en el menú (estos dos últimos tienen como objetivo resaltar el diseño). Aquí hemos seleccionado la plantilla *Slate:* Hemos añadido el logo del restaurante en la cabecera con un acceso directo a la *Loyalty card*, Ajustes y llamada, También, hemos destacado la sección Cuerpo y el Copyright en el pie de página. ## 4. Añade tu contenido ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11249181-18909393.jpg?v=1492769827.1328735) Hasta el momento, hemos utilizado el contenido de prueba de la app para guiarnos con el diseño, sin tener una app vacía con la que trabajar. Aquí hay varios ejemplos de como proceder cuando estás listo a añadir contenido. - Aquí hemos utilizado la sección mCMS artículos para mostrar el menú del restaurante. Después, hemos personalizar la vista de la lista de artículos, escogiendo una pantalla completa (plantilla nº8). ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11249181-18909424.jpg?v=1492774890.443268) - Otra funcionalidad clave que quizás quieres habilitar para las reservas, es la sección Formulario. Puedes añadir campos según tus necesidades y como siempre, presonaliza el diseño. ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11249181-18909438.jpg?v=1492775722.116968) Ahora, para las apps relacionadas con negocios, puedes encontrar más funcionalidades listas para instalar en el menú Add-On. Aquí es donde puedes activar el Add-On *Loyalty Card*, por ejemplo. Ten en cuenta que esta funcionalidad está ligada con el Registro (sólo en el plan *Advanced).* ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11249181-18909488.jpg?v=1492776113.4006543) Una vez el Add-On se ha instalado, en el *back office* aparece un nuevo menú llamado Negocios . ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11249181-18909612.jpg?v=1492776238.0015461) Desde ahí, puedes editar todos los ajustes así como el diseño de tu programa fidelidad. Cuando seleccionas una plantilla puedes personalizar los iconos de los puntos, los colores y más. ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11249181-18909624.jpg?v=1492776383.9631581) Casi listo! Dos cosas más y la app estará lista. ## 5. Pantalla de lanzamiento e icono de la app ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11249181-18909625.jpg?v=1492776463.4666853) La pantalla de lanzamiento es la primera cosa que tus usuarios ven al abrir la app (antes de la *Home*). Se mostrará durante unos segundos mientras el contenido de tu app se carga (en un navegador también). Para dar una buena impresión, presta atención a las especificaciones en las diferentes pantalla, para garantizar una visualización optima. ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11249181-19543686.jpg?v=1492776961.3342018) Para el icono de la app necesitas cumplir con las diferentes dimensiones, para cada uno de los sistemas operativos y para las especificaciones de la web app (como el favicon). Crear un buen icono puede ser complicado, tienes muy poco espacio para la creatividad, además de tener que ser lo suficientemente claro para entender de que va la app. En este paso, no olvides colocar el nombre de tu app. - Descubre como personalizar al máximo [la *Home* de tu app con este artículo.](https://es.goodbarber.com/blog/la-home-modular-a547/) - No te pierdas nada sobre los modelos de navegación, con este artículo: [Menú y navegación secundaria.](https://es.goodbarber.com/blog/el-menu-y-la-navegacion-secundaria-a548/) [![CREATE YOUR APP](https://no-cache.hubspot.com/cta/default/666614/3e188181-ccd2-467b-bafd-f541def40d3b.png)](http://cta-redirect.hubspot.com/cta/redirect/666614/3e188181-ccd2-467b-bafd-f541def40d3b) ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11249181-19543918.jpg?v=1492777993.0581882)