Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Ionic 2
Code

Codifica Tu Primera App Ionic 2: Preparándose

by
Difficulty:BeginnerLength:ShortLanguages:

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

Con la reciente liberación de Ionic 2, podrías ser uno de aquellos desarrolladores de apps híbridas que quiere probar. Pero tal vez estás abrumado por la cantidad de aprendizaje necesario para comenzar.

Es por eso que quiero darte un buen comienzo guiándote paso a paso a través de la creación de tu primera app Ionic 2. Si ya estás familiarizado con Ionic entonces los conceptos podrían hacer "clic" fácilmente contigo. Pero si eres un completo principiante, no te preocupes---no asumiré ningún conocimiento previo del framework.

Vista General de la App

En este tutorial y el siguiente, estarás creando una app para compartir fotografías que permita a los usuarios elegir una imagen desde sus dispositivos y compartirla en Instagram. Aquí está cómo lucirá la app:

Completed photo sharer app

Configura Tu Entorno

Antes de que puedas comenzar a desarrollar apps con Ionic 2, primero tienes que configurar tu entorno de desarrollo. Esto incluye las siguientes piezas de software:

  • Android SDK: las apps construidas con Cordova y Ionic dependen de las mismas herramientas de desarrollador usadas por desarrolladores de apps nativas.
  • Node.js: este es principalmente usado por Ionic para estampación---cosas como compilar código y revisar errores.
  • Un dispositivo Android o emulador para pruebas. Puedes instalar el emulador Android por defecto con el instalador Android SDK.

No te voy a mostrar cómo configurar tu entorno de desarrollo. La guía de la plataforma Cordova ya hace un gran trabajo con eso:

Esas dos páginas te mostrarán todo lo que necesitas para saber configurar Cordova para iOS o Android. Una vez que tu entorno de desarrollo está todo listo, podemos continuar al siguiente paso.

Instala Cordova y Ionic

¡Phew! Ahora puedes realmente instalar Cordova y Ionic. usa el siguiente comando:

Una vez que terminan de instalarse, asumiendo que no obtuviste ningún error, puedes verificar si fueron de hecho instalados con los siguientes comandos: cordova --version y ionic --version. Eso te mostrará las versiones de los frameworks Cordova y Ionic instaladas en tu sistema. Para mi, estas devuelven 6.4.0 y 2.2.1.

Si quieres ver información de versión más detallada tal como la versión del Framework Ionic y versión Ionic CLI, usa lo siguiente:

Aquí está una salida de ejemplo:

Crea un Nuevo Proyecto Ionic

El Ionic CLI proporciona el comando ionic start para crear fácilmente un proyecto:

Aquí está la plantilla para ayudarte a entender lo que cada opción individual hace:

La plantilla de inicio que fue usada aquí es blank. Esta contiene solo lo mínimo para obtener algo mostrado en la pantalla. Hay otras, pero pueden ser un poco abrumadoras.

Recuerda que el Ionic CLI abastece tanto proyectos Ionic 1 como Ionic 2, así que aún tendrás que especificar la opción --v2 para poder hacer bootstrap de un proyecto Ionic 2 ya que Ionic 1 aún es el valor por defecto. Pero una vez que estás dentro de un proyecto Ionic 2, el Ionic CLI es lo suficientemente inteligente para saber qué versión usar.

Agregando la Plataforma

Por defecto, Ionic no viene con ninguna plataforma a la que puedas desplegar. Puedes agregar una usando el comando ionic platform add seguido por la plataforma a la que quieres desplegar:

Si quieres desplegar a otra plataforma, solo reemplaza android con cualquier plataforma que quieras.

Instalando los Complementos

Para esta app, necesitarás dos complementos: uno para seleccionar una imagen desde la librería del usuario, y uno para compartir la imagen en la app de Instagram.

Primero está el complemento Image Picker. Este le da a la app la habilidad de seleccionar imágenes desde la librería de fotos del usuario.

Después está el complemento Instagram. Este te permite reenviar la imagen a la app Instagram para publicar.

Esos dos complementos que recién has instalado son parte de un conjunto curado de envoltorios ES6 y TypeScript para complementos Cordova llamado Ionic Native. Su trabajo principal es hacer más fácil el interactuar con complementos Cordova envolviendo callbacks de complementos en Promises o Observables.

Flujo de Trabajo de Desarrollo

Ahora estás listo para comenzar en realizad a codificar la app. Pero antes de que lleguemos a eso, echemos primero un vistazo el flujo de desarrollo y estructura de carpeta de Ionic 2.

En Ionic 2, la mayoría del trabajo de desarrollo es realizado dentro del folder src. Estos archivos son recompilados cada vez que haces cambios a los archivos en esta carpeta. A diferencia de Ionic 1, la compilación es necesaria porque los archivos fuente están escritos en TypeScript (compilado a código ES5) y Sass (compilado a código CSS). Cada vez que haces un cambio, el código también es revisado por errores, que son reportados de vuelta al desarrollador a través de la consola o vista previa de la app. Una vez que la compilación es terminada, los archivos resultantes son copiados a la carpeta www, y los cambios son reflejados en la vista previa de la app.

Estructura de Carpeta

Para estar cómodo trabajando con un proyecto Ionic 2, necesitas familiarizarte con la estructura de carpetas. Para empezar, necesitas saber para lo que se usa cada carpeta de manera que sepas donde poner archivos fuente y donde buscar archivos que necesitas.

  • node_modules: aquí es donde las dependencias Ionic 2 son almacenadas. La mayoría del tiempo no necesitas tocar esta carpeta a menos que haya un problema con alguna de las dependencias y tengas que re-instalarla.
  • platforms: aquí es donde el código de plataforma específica es colocado y en donde el instalador de app es puesto cuando construyes la app para ejecutar en un dispositivo o emulador. Eso significa que todos los archivos en tus carpetas www y plugins son copiados aquí cada vez que construyes tu app.
  • plugins: aquí es donde los complementos son almacenados, obviamente---tanto los complementos Ionic por defecto como cualquier otro que instales.
  • resources: aquí es donde pondrás recursos de app tales como el icono y la pantalla splash.
  • src: aquí es donde estarás codificando la mayoría del tiempo. Todas las plantillas, hojas de estilo y archivos TypeScript que harán tu app son almacenados aquí.
  • www: aquí es donde van tus archivos compilados. Los archivos aquí son servidos en la vista previa de la app.
  • hooks: aquí es donde los scripts hook de desarrollo Cordova son almacenados. Estos son usados si tienes scripts personalizados que quieras ejecutar durante alguna parte del ciclo de vida de desarrollo (ej. cuando una plataforma o plugin es agregado).

Ejecutando el Servidor de Desarrollo

Mientras desarrollas una app, es útil ver una vista previa en vivo de la app que es actualizada mientras haces cambios al código. Para lanzar el servidor de desarrollo, usa el siguiente comando:

Eso comenzará el proceso de observar cambios en los archivos fuente y comenzará a compilarlos en tiempo real. Por defecto, Ionic servirá la vista previa en http://localhost:8100/. Verás algo como lo siguiente, y después puedes continuar y previsualizar tu app en el navegador en la URL reportada.

ionic serve output

Siguientes Pasos

Ahora que nuestro entorno de desarrollo está configurado, ¡estamos listos para saltar a codificar la app! Permanece en sintonía mañana para la siguiente publicación, en donde te mostraré cómo codificar realmente la app, construyendo la UI y toda la funcionalidad de compartir fotografías. ¡Va a ser divertido!

Mientras tanto, ¡revisa algunos de nuestros otros tutoriales sobre Ionic 2!

Si quieres una introducción a fondo y práctica al framework Ionic 2, prueba nuestro curso Comenzando Con Ionic 2.

En este curso, Reggie Dawson te enseñará todo sobre el framework Ionic y te mostrará cómo construir una app móvil desde cero. A lo largo del camino, aprenderás sobre la librería de componente de Ionic, sobre programar JavaScript tecleado estáticamente con TypeScript, y sobre integrar una app Ionic 2 con una API rica de medios.

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.