Aplicaciones Web

Ionic Framework y Google Maps

En el post de Aplicaciones híbridas vimos cómo instalar ionic y creamos nuestra primera aplicación compilada para ios y android, ahora bien, veremos primero la estructura de los archivos cuando bajas una aplicación de Ionic, además de integrar  Google maps.

Vamos a crear el proyecto para bajar la solución de geolocalización, para esto primero debemos de abrir la terminal de Mac y escribir los siguientes comandos.

Captura de pantalla 2016-02-20 a las 9.43.30 p.m.

Captura de pantalla 2016-02-20 a las 9.43.52 p.m.

 

 

Abrimos la carpeta que se llama myAppForMaps y veamos las carpetas que se bajan al crear una aplicación de Ionic, recuerde siempre revisar la documentación http://ionicframework.com/docs/concepts/structure.html

Captura de pantalla 2016-02-20 a las 9.48.09 p.m.

 

Estructura de carpetas de Ionic Framework

Platforms

Aquí tiene las plataformas que estás agregando a tu proyecto en mi caso por default tengo a ios pero también puedes agregar android.

Captura de pantalla 2016-02-20 a las 9.52.56 p.m.

Hooks

Todos los plug in de Cordova que estés agregando a tu aplicación estarán en ésta carpeta. Para poder agregar un plug in deberás de agregar la siguiente línea de comando: ionic plugin add <name_plug_in>

WWW

En ésta carpeta vamos a usarla la mayoría de las veces ya que aquí está en index de la aplicación y dentro de ella encontraremos las siguientes carpetas;

  1. css: Estilos de la aplicación y las propias de tu sistema.
  2. img: Tus imágenes de la aplicación.
  3. js: Ésta carpeta es un poco más compleja ya que podrás tener archivos de AngularJs, los principales archivos son:

app.js ( Contendrá las variables de entorno de AngularJS)

controller.js: Tiene los controladores de Angularjs y los estados

lib: En ésta carpeta vas a poder instalar librerías usando el comando bower.

Una vez que ya tenemos un poco más claro la estructura de las carpetas de Ionic compilemos la aplicación.

ionic build ios

Ejecutemos nuestra aplicación desde el emulador.

ionic emulate ios

Captura de pantalla 2016-02-20 a las 10.29.36 p.m.

En el siguiente post estaremos revisando más a detalle los componentes que ofrece ionic framwork

Hasta la próxima y recuerden dejar sus comentarios.

Please follow and like us:
0

Un comentario en “Ionic Framework y Google Maps

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *