4.3 Plantilla para crear Aplicaciones de Cafeterías para Android & iPhone

En este tutorial os explicacamos paso a paso como emplear la plantilla para crear Aplicaciones de Cafeterías, Restaurantes o Bares.

¡Busca y encuentra tu local más cercano gracias a las ubicaciones en el mapa!.

 

imagen de la Plantilla para crear Aplicaciones de CafeteríasFind nearest to you coffee shop. See locations on the map. [/caption]

Pasos para utilizar la plantilla para crear Aplicaciones de Cafeterías para Android & iPhone

Esta plantilla utiliza 4 nuevas funciones:

 

 

paso 1 para crear una app para Android o iPhone de una cafetería Tipo de Menú con Rejilla de imágenes

imagen para crear una app para Android o iPhone de un bar

1. Para cambiar el color de fondo selecciona el campo y escoge "Color de Fondo":

imagen para crear una app para Android o iPhone de un restaurante

2. También  puedes cambiar el color del texto:

muestra de app para crear una app para Android o iPhone de un bar

3. Ajusta los valores de transparencia u Opacidad usando valores del 0 al 1:

imagen del paso 4 para crear una app para Android o iPhone de un cafetería

4. Agregar (+), Borrar (), Mover ( imagen del paso 5 para crear una app bar )  los campos del menú:

paso 6 imagen de aplicación de cafetería

5.  Cada campo tiene algunas propiedades ( nombre del campo, imagen y enlace a otra página o función) que puedes personalizar:

paso 7 imagen de muestra de app iPhone

imagen para hacer una app para Android o iPhone de un bar Función de Buscador de Localizaciones

imagen para hacer una app para Android o iPhone de un restaurante

NOTA: Esta función requiere la versión de CreaTusApps App v.2.9 o superior.

El "Buscador de Ubicaciones" es una función nativa que recoge los datos de configuración de un archivo de origen XML, localizaciones y 3 campos de búsqueda predefinidos. Observa el ejemplo:

NOMBRE – Campo de texto – filtra los nombres de las localizaciones.

TIPO – Escoge un valor de la lista – filtra los tipos de localización.

DONDE – Escoge una localización en el mapa – Ordena los resultados de la búsqueda por orden de cercanía. Siendo el local más cercano el primero en la lista y el más lejano el último.

Como una fuente de entrada de datos, el XML puede estar dentro de los recursos de la aplicación o en una URL determinada . El xml (nombre de archivo o URL) es especificado en CreaTusApps.

imagen para hacer una app para Android o iOS de un bar

Al presionar el botón “BUSCAR” filtrará la búsqueda sobre los campos basados en la tabla del XML. Los resultados los mostrará en una tabla nativa.

imagen para hacer una app para Android o iPhone de una cafetería

Al escoger un elemento de la tabla se mostrará en el mapa.

También dispone del botón “Mostrar todo el Mapa” que mostrará, al mismo tiempo, todas las ubicaciones en el mapa.

muestra de app Android

Es posible presionar cualquier ubicación en el mapa, esto mostrará datos adicionales acerca de cada ubicación

muestra de app iOS


Ejemplo de Archivo XML


<document>
    <location>
        <name>Paris</name>
        <latitude>2.350987</latitude>
        <longitude>48.856667</longitude>
        <target></target>
        <type>capital city</type>

        <imageurl></imageurl>


        <description>France</description>

    </location>
    <location>
        <name>Moskow</name>
        <latitude>55.755786</latitude>
        <longitude>37.617633</longitude>
        <target></target>
        <type>capital city</type>
        <imageurl></imageurl>


        <description>Russia</description>
    </location>
    <location>
        <name>Tokio</name>
        <latitude>35.689488</latitude>
        <longitude>139.691706</longitude>
        <target></target>
        <type>capital city</type>
        <imageurl></imageurl>


        <description>Japan</description>
    </location>
    <location>
        <name>New York</name>
        <latitude>40.714353</latitude>
        <longitude>-74.005973</longitude>
        <target></target>
        <type>big city</type>
        <imageurl></imageurl>


        <description>US</description>
    </location>
    <location>
        <name>Sydney</name>
        <latitude>-33.868901</latitude>
        <longitude>151.207091</longitude>
        <target></target>
        <type>city</type>
        <imageurl></imageurl>


        <description>Australia</description>
    </location>
</document>

– It can NOT be used on a TAB

– The searchable fields are hardcoded, i.e. name, type and location are the only 3 fields that can be used, NO field can be either added or removed.

Ejemplo de aplicación Página de Menú estilo Revista

Paso 13 crea tu app gratis

1. Utilice estos botones para agregar (+), borrar (), mover (componentes de una app de cafetería) un campo de la lista.

Componentes de la ventana de campos:

menú de una app android

2. Es muy similar al menú con rejilla cada elemento tiene sus propiedades configurables con algunas nuevas propiedades añadidas (imagen, título, enlace y breve descripción), todo es configurable.

submenú de una app iOS

3. Puedes cambiar el estilo global del menú  del menú (color de fondo, textos y enlaces), por favor, utiliza el botón que está al lado del botón de guardar:

menú con descripciones para Android

Ejemplo de menú con imágenes para iPhone MENÚ estilo banners

Artículos de menú en una app Android

1. Para añadir (+), borrar (), mover (Ubicaciones en apps Android & iPhone) los elementos

Ventana del Menú:

Menú de elementos iPhone

2. Cada elemento posee algunas propiedades ( imagen, título y enlace a otra página), todo es editable:

Características del menú de apps

3. Puedes cambiar el estilo global del menú  del menú (color de fondo, textos y enlaces), por favor, utiliza el botón que está al lado del botón de guardar:

Opciones del submenú de las aplicaciones

4. Para ajustar el título de la página, acceda al Modo Edición HTML  y borra el comentario HTML comment <!– y–> después introduce el título que prefieras:

Ejemplo del menú de la app

5. Si quieres editar más propiedades (color de fondo del elemento, opacidad, altura o color y tamaño del texto) en esta página, puedes hacerlo en el archivo style.css

Configuración de una app iOS

Mediante Propiedades de Diseño y realiza los cambios que desees en las clases  .StyleWebKitPanel.

 


Esto es todo, mediante el siguiente enlace puedes probar la plantilla y comenzar a crear tu app.

 

 

 

Avatar of CreaTusApps

CreaTusApps has written 103 articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>