Usando Sencha CMD: Primeros Pasos

Primero cuando usamos una herramienta debemos haberla instalado primero para la consecucion de esta podemos ver el post anterior sobre instalacion de Sencha CMD. (https://javascriptx.wordpress.com/2014/05/29/instalacion-sencha-cmd/)

Luego otro paso necesario en este caso de esta herramienta es entender como podemos hacer uso de la misma, esta herramienta es un autocompilador de javascript y tambien es una herramienta especifica para los frameworks Sencha ExtJS y Sencha Touch, los cuales son frameworks especializados en trabajo de aplicaciones RIA sobre web y dispositivos mobiles. Yo recomiendo el uso de las ultimas versiones de los frameworks Sencha ExtJS tanto como Sencha Touch para trabajar con esta herramienta(Sencha CMD http://www.sencha.com/products/sencha-cmd/download).

Un detalle mas que es importante acerca de la herramienta es tener aparte de la herramienta instalado SASS y Compass, y no debemos olvidar que la herramienta hace uso de Ruby y Java para su ejecucion. Ademas de todo esto para poder hacer edicion de codigo en javascript debemos tener a la mano un buen editor de codigo Javascript como puede ser:
Notepad++, Sublime Text, Netbeans, Brackets u otro editor que se adapte bien a nuestra forma de trabajar con codigo de javascript.

Finalmente el uso de Sencha CMD tambien hace necesario tener a mano todo esto:

•Ext JS 4.2
•Sencha Cmd
•XAMPP
•Editor Javascript
•Firefox
•Firebug
•Illuminations for Developers
•Chrome
•Ruby

Generando nuestra primera aplicacion con Sencha  ExtJS

Para la generacion de nuestra app de Sencha ExtJS hacemos uso del comando:

>sencha -sdk “directorio_framework_extjs” app generate “nombre_app” “directorio_destino_app”

En caso usemos linux dependiendo de como hallamos instalado Sencha CMD quizas debamos hacer uso del comando de sencha CMD  conjuntamente con sudo pues en algunos casos no nos permite la escritura del directorio de la aplicacion de Sencha CMD y tendremos que hacer uso de sudo para poder hacer la escritura en ese directorio, pues el comportamiento de Sencha CMD requiere escribir algunos archivos en el directorio de la aplicacion.

Otro punto importante el framework que usemos tanto Sencha ExtJS o Sencha Touch debe estar en un folder accesible a nuestra aplicacion destino para poder trabajar comodamente y compilar exitosamente nuestras apps.

La salida de la generacion de una app estandar es la siguiente :

https://www.dropbox.com/s/ymyfia015t975uv/ouput.txt

Una vez ejecutado el comando de ejecucion la aplicacion destino tendra una estructura definida y lista para trabajar con el framework que hallamos elegido en la app ejm de este post se uso extjs, por tanto la estructura termino siendo algo como esto.

Lo siguiente que podemos hacer con Sencha CMD es poder compilar nuestro codigo para que sea optimo en descarga tanto como ejecucion, y esto lo hacemos haciendo uso de una comando de Sencha CMD.

>sencha app build production

Si estamos usando linux quizas tengamos que hacer uso del comando sudo antes de este comando para permitir la correcta ejecucion de Sencha CMD.

La aplicacion generada por sencha CMD cuando probemos su modo de ejecucion sera en definitiva mucho mas veloz que la app generada inicialmente por Sencha CMD.

Recordemos que la aplicacion compilada por sencha CMD podra ser ubicada en el directorio “build/production/”nombre_proyecto”.

Resultado de compilacion de app

Probando la aplicacion

Teniendo en cuenta que solo es una aplicacion html con javascript solo tenemos hasta el punto en que se haya desarrollado una aplicacion cliente basica que puede ser probada en un navegador convencional haciendo uso del archivo index.html, se accede al mismo de preferencia desde algun navegador estandar como son firefox, chrome o iexplore, y se debe hacer uso de algun servidor tipo apache para nuestras pruebas pues nuestra aplicacion no ejecutara correctamente si deseamos acceder a la misma de forma directa desde el acceso a archivos en local de nuestra maquina, para probar la aplicacion compilada tendremos que ir al directorio “build/production/”nombre_proyecto” y ahi ejecutar el index.html.

Un detalle importante dentro del desarrollo de aplicaciones con sencha CMD es saber que la aplicacion compilada pesa mucho menos y mucho mas optima en tiempo de ejecucion tanto como en descarga se recomienda hacer uso de la aplicacion compilada en ambientes de produccion.

Por ejm la direccion de acceso a mi aplicacion en mi servidor local es http://localhost:8080/uno/, y en esta url podemos ver lo siguiente.

Web

Si habeis llegado hasta este punto significa que la aplicacion cliente  ya esta lista para ser usada.

Autor:  Christian Portilla Pauca

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s