 |
| JetBrains WebStorm e Ionic |
Para el desarrollo con Ionic no es necesario la utilización de ningún
Entorno Integrado de Desarrollo (IDE) en específico, pues como hemos visto, utiliza tecnologías web cómo
HTML,
CSS y
JS; por lo que podemos utilizar cualquier
IDE con el que nos sintamos más cómodo trabajando o cualquier
editor de texto como el
Sublime.
En este caso les enseñaré como utilizar
JetBrains WebStorm como IDE de desarrollo para crear nuestras app con Ionic y las ventajas que su utilización nos proveé.
WebStorm es un IDE
especializado en tecnologías como
JavaScript, Node.js, HTML y CSS que ofrece diferentes opciones como
completado inteligente de código,
detección de errores en tiempo real, caracterísiticas avanzadas de navegación, búsqueda y
refactorización, así como asistencia para trabajar como diferentes tecnologías como
Angular,
React y
Meteor.
En mi caso utilizo JetBrains WebStorm en su versión 11, pero puedes conseguir la última versión desde su
sitio oficial. Para utilizarlo puedes hacerlo durante el período de prueba de 30 días, comprando una licencia o activándolo mediante el siguiente truco. En
Help -> Register seleccionas la opción License server y pones la siguiente dirección y das
OK.
 |
| http://idea.lanyus.com/ |
Esto te debe activar el IDE según el usuario de tú máquina y ya está.
Ahora, una vez que tenemos el IDE listo, pongámonos a configurar todo lo necesario para trabajar correctamente con Ionic. Primero que todo debemos asegurarnos de que tengamos habilitados los plugins
PhoneGap/Cordova y
NodeJS. Para eso nos dirigimos a
File -> Settings.. -> Plugins y escribimos los nombres de los plugins en la barra de búsqueda o simplemente los búscamos y nos aseguramos que estén activados, sino los activamos.
 |
| Verificando plugins para el trabajo con Ionic |
Procedemos a continuación a abrir nuestro proyecto Ionic ya generado. Para eso vamos a
File -> Open... y le indicamos la ruta hacia nuestro proyecto. Ahora habilitamos la integración de nuestro proyecto Ionic, por lo que nos dirigimos a
File -> Settings -> Languages & Frameworks -> JavaScripts -> PhoneGap/Cordova. Ahí debemos comprobar que el WebStorm haya detactado automaticamente la localización del archivo ejecutable de
ionic.cmd, sino debemos especificar nosotros la ruta. En
PhoneGap/Cordova Working Directory, especificamos la ruta dónde se encuentra nuestro proyecto y salvamos dando en OK.
 |
| Ionic parámetros de configuración |
Ya estamos listos entonces para correr nuestro proyecto. Para eso Webstorm necesita que especifiquemos las
configuraciones que vamos a utilizar para correr nuestro proyecto y los
parámetros que vamos a utilizar. En este caso vamos a crear dos configuraciones una para correr nuestra aplicación en el
navegador y otra para lanzarla a un
emulador android o a un
dispositivo que tengamos conectado. Para eso nos dirigimos a
Run -> Edit Configurations. Esto nos abrirá una ventana dónde debemos dar clic en el signo de más para adicionar una
nueva configuración y seleccinamos entonces de tipo
PhoneGap/Cordova.
A continuación especificamos el
nombre de esta nueva configuración (en mi caso IonicWeb), verificamos que esten bien los valores que configuramos anteriormente de la ruta al ejecutable de Ionic y la ruta a nuestro proyecto. Seguidamente en la sección
Command seleccionamos, ya que es para la web, la opción
serve. En
Platform seleccionamos
browser. Y como
Extra arguments vamos a pasarle
--lab, este parámetro nos permite visualizar la aplicación en el navegador como se vería en un dispositivo con sistema operativo
Android e
IOS.
 |
| Ionic configuración para la web |
Vamos a configurar entonces para lanzar nuestra aplicación hacia un emulador o dispositivo android real. Para eso creamos una nueva configuración del mismo tipo de la que creamos anteriormente. Le ponemos como nombre
IonicAndroid y verificamos los campos de configuracion de Ionic. En la sección
Command establecemos entonces en el caso de que queramos probarlo en un emulador que ya hayamos creado el valor
emulate o si lo vamos a lanzar a un dispositivo android real que tengamos conectado a la máquina establecemos el valor
run. Cómo
Platform escogemos
android y listo.
 |
| Ionic configuración para Android |
Podemos probar con otros valores y parámetros que nos permiten realizar otras funciones. Estos son simplemente los básicos para empezar a ver cómo va quedando nuestra app con Ionic.
Para lanzar la app nos dirigimos a la barra de herramientas y seleccionamos la configuración que vamos a utlizar y seguidamente damos clic en el botón
play o vamos a
Run -> Run <El nombre de la configuración seleccionada>.
 |
| Seleccionar configuración |
Espero que les haya servido, y logren lanzar correctamente su app con Ionic. Espero sus comentarios.
Sign up here with your email
2 comentarios
Write comentariosHola... Consulta este tutorial sirve para ionic 2 en adelante te pregunto por que tengo webStorm y hes sabido que te ayuda con el desarrollo de app en ionic y te facilita la vida, espero que me respondas
ReplySí, perfectamente sirve igual para versiones posteriores de Ionic. De todas formas te agradecería que dejaras tus experiencias cuando lo pruebes para saber como te fue. Saludos.
ReplyDéjame saber cualquier duda, sugerencia o experiencia al respecto. ¡Espero tú opinión! También puedes comentar como anónimo. ConversionConversion EmoticonEmoticon