Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. iOS SDK
Code

Aplicaciones iOS Sencillas Basadas en Ubicación Con la Plantilla appyMap

by
Length:MediumLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

What You'll Be Creating

Introducción

¿Es mejor ganar $5,000 trabajando diez horas al día, o ganar $3,000 trabajando solo una? El tiempo es dinero, y ese es el recurso más importante que tenemos.

Usar una plantilla de aplicación tiene dos ventajas:

  • Te ahorra tiempo.
  • Aprendes algo nuevo, rápidamente.

Para construir una aplicación usando una plantilla, ingresas tu información, cambias el logo, personalizas fuentes, colores... y eso es todo.

Supón que quieres crear una guía de puntos de interés (iglesias, museos, monumentos o incluso estacionamiento, tiendas, etc.) en tu ciudad. Podrías crear tu aplicación desde cero, y pasar mucho tiempo diseñando la interfaz, escribiendo el código, e implementando frameworks. O podrías usar una plantilla y tener todo listo en unas cuantas horas---¡algunas veces minutos!

Y tal vez incluso más importante, ahorras tiempo no solo en la realización de la aplicación misma, sino también en aprender nuevos conceptos: puedes ver en prácticas cómo funcionan cosas nuevas para que puedas aprender y asimilar nuevas ideas mucho más rápido.

Pero queríamos hacer una guía a nuestra ciudad, ¿verdad? Veamos cómo hacerlo en diez minutos con appyMap.

Vista General

Con appyMap puedes crear tu propia aplicación para ayudar a los usuarios a descubrir puntos de interés agrupados por categorías, tal como una aplicación de referencia para tiendas o restaurantes, una guía de la ciudad o cualquier otro uso que requiera localizar lugares en un mapa. Puedes encontrar la plantilla de aplicación iOS basada en ubicación  appyMap para descarga en CodeCanyon.

La estructura de appyMap es muy sencilla, y consiste en cuatro pantallas, Inicio, Sección, Detalle, y Direcciones (que son proporcionados por Apple Maps).

appyMap screens Home Section Detail and Directions

La pantalla de inicio muestra nuestras secciones principales, dentro de las cuáles están los puntos de interés.

Seleccionar un punto de interés abre la pantalla de detalle con fotos, descripciones, y un campo extra (que puede ser usado para dirección, horarios de apertura, etc.) y un botón para obtener direcciones de viaje. Si un número de teléfono está presente, también puedes llamar al punto de interés dentro de la app.

Ahora echemos un vistazo a cómo insertar nuestra información en la app.

Ingresando Datos de Aplicación

Hay dos maneras de ingresar tus datos: a través de archivos locales Plist o usando CloudKit, la plataforma en la nube de Apple. Cada una tiene sus pros y contras.

Opción 1: Archivos Plist Locales

Los archivos Plist son archivos que incluyes en tu aplicación. Son un documento estructurado de datos---no muy diferente a una hoja de cálculo.

Editing a Plist in Xcode

Puedes editar archivos Plist con Xcode. Esta es la manera más sencilla y es útil cuando solo necesitas cambiar o agregar pequeñas cantidades de datos. Otra manera de agregar datos a un archivo Plist es convirtiendo una hoja de cálculo e importándola a Xcode. Esto es realmente útil cuando tienes que administrar una gran cantidad de datos.

Usar archivos Plist para entregar los datos de tu aplicación te da dos ventajas:

  1. Tu aplicación no solo necesita una conexión a internet para funcionar apropiadamente.
  2. Menos retraso: la información del Plist de tu información será cargada instantáneamente al arranque, mientras que la información almacenada en la nube siempre tendrá algún retraso.

La desventaja de usar datos locales es que, si quieres agregar o editar puntos de interés, tendrás que liberar una nueva versión de la app.

Configurando el Menú Principal

Dentro del proyecto Xcode que viene con appyMap, abre el archivo Main.plist---este archivo define el menú principal. Dentro de este archivo vemos una lista de elementos, que definen las categorías ("secciones") de lugares de interés. Cada elemento tiene tres campos:

  • id: el id único de la sección, usado también para ordenar elementos
  • name: el nombre de la sección
  • isFree: Si se establece a "yes" la sección es gratuita, de otro modo está bloqueada y puede ser desbloqueada con una compra integrada en la aplicación.

Cada sección puede tener un icono, que debería tener el mismo nombre de archivo como el nombre de la sección (ver la imagen de abajo).

Mainplist specifies sections icons are in separate image files

Puedes agregar tantas secciones como quieras: las nuevas secciones serán agregadas al final de la lista, y la vista de colección del menú principal se desplazará si lo necesita.

Puntos de Interés

Una vez que has configurado las secciones principales, puedes comenzar a agregar puntos de interés. Para cada sección, appyMap buscará un archivo Plist con el mismo nombre de archivo que el nombre que elijas para la sección. Así que por ejemplo si tienes una sección llamada "Casas", appyMap buscará un archivo llamado Casas.plist, y leerá los lugares de interés para la sección Casas desde ese archivo.

Estos archivos de lugares de interés tienen los siguientes campos:

  1. id
  2. name
  3. description
  4. latitud
  5. longitud
  6. tel (opcional)
  7. time (opcional)

Para la imagen de viñeta del lugar de interés, la aplicación buscará una imagen JPEG con un nombre de archivo consistente del nombre de la sección seguido por el id del lugar de interés. Así que si tienes tres lugares en la sección Museo, necesitas tres imágenes llamadas Museo1.jpgMuseo2.jpg, y Museo3.jpg.

Opción 2: CloudKit

En vez de almacenar la información de tu aplicación en archivos Plist locales, puedes servirla desde CloudKit de Apple.

Apple CloudKit dashboard

Si decides usar CloudKit, tu información ya no será local, sino que será leída desde la nube. Esto te permite modificar la base de datos de lugares de interés sin tener que liberar nuevas versiones de la aplicación. Sin embargo, la aplicación requerirá de una conexión a internet para poder mostrar puntos de interés.

Usando CloudKit

Usando tu cuenta de desarrollador Apple, puedes usar el back-end de CloudKit para administrar tus datos. Si tienes una cuenta de Desarrollador Apple, puedes administrar CloudKit con el tablero CloudKit.

Para poder conectar tu aplicación con CloudKit, tienes que ir a tu Página de Desarrollador, y habilitar iCloud.

Enable iCloud on the Developer Page

Después, regresa a Xcode, selecciona tu objetivo, y habilita iCloud para tu app:

Enable iCloud for your app

Ahora necesitas agregar dos tipos de registro para retener la información de la aplicación. Comenzando con el tipo Main, para retener los datos de secciones de menú: ve a tu tablero CloudKit, selecciona Tipos de Registro, da clic en el botón más y nombra al registro "Main". Ahora necesitamos recrear esencialmente la misma estructura que usamos en el archivo Plist. Da clic en Agregar Campo... y crea cuatro campos:

  1. name (tipo: String)
  2. pic (tipo:Asset)
  3. order (tipo: Int(64))
  4. isFree (tipo: Int(64))

Esto es un poco diferente del formato Plist, debido a que hemos creado un campo extra llamado "pic", que contendrá al icono para cada sección.

Al final deberías tener una tabla como esta:

appyMaps Main table in CloudKit

Después tienes que crear un tipo de registro para cada sección que tu aplicación mostrará. Así que por ejemplo, si tienes dos secciones (digamos "Casas" y "Monumentos") para tu aplicación, crearías dos registros correspondientes, llamados "Casas" y "Monumentos" (como en la captura de pantalla de arriba).

Para crear otro tipo de registro, comienza dando clic en el botón +. Dale al registro el nombre de tu sección (en este caso "Casas"):

Ahora da clic en Add Field... y crea campos como hiciste antes. Esta vez, los campos que tienes que crear son los siguientes:

  1. name (tipo: String)
  2. description (tipo: String)
  3. pic (tipo: Asset)
  4. coordinates (tipo: Location)
  5. tel (tipo: String)
  6. time (tipo: String)
  7. order (tipo: Int64)

Nota que los campos tel (teléfono) y time (tiempo) son opcionales. Si están presentes, se mostrarán en la pantalla de detalle, de otro modo están ocultos.

Pista: Una Manera Rápida de Obtener Coordenadas de Mapa

Ingresar ubicaciones para appyMap involucra buscar muchas latitudes y longitudes. Para encontrar rápidamente la latitud y longitud de una ubicación dada, solo búscala en Google Maps, da clic derecho sobre el punto de interés, y selección ¿Qué hay aquí? Esto devolverá toda la información del lugar, junto con su latitud y longitud. Puedes solo copiar y pegar estos valores a los campos lat  y lon en CloudKit, o a tu archivo Plist.

Getting map coordinates from Google maps

Conclusión

En este tutorial, aprendiste cómo comenzar con una nueva aplicación basada en ubicación usando la plantilla appyMap de CodeCanyon. Aprendiste cómo funciona la plantilla, y cómo agregar tus propios datos de ubicación a la plantilla.

Si descargas la plantilla, obtendrás mucha más información sobre cómo configurar y personalizar tu aplicación. appyMap viene con una guía de instrucción detallada que te llevará a través de todos los pasos de configurar y personalizar la plantilla apropiadamente.

Pero es sencillo. Para construir una aplicación usando una plantilla, solo ingresa tus datos, personaliza el color, fuentes, y logo... ¡y compila! Tu aplicación puede estar lista en solo unas cuantas horas.

Hay cientos de otras plantillas iOS en CodeCanyon. ¡Ve a revisarlas! Podrías ahorrarte muchas horas de trabajo.

¡Buena suerte en tu siguiente aplicación! Y mientras tanto, revisa algunos de nuestros otros tutoriales de aplicación iOS aquí en Envato Tuts+.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.