Mi primera APP MOVIL con Framework 7 y Cordova

By Graphixx Rōninnovation CEO of www.sistemasycontroles.net

Lo primero que necesitamos es instalar NODE.JS en nuestra PC, para lo cual debemos ir a:

https://nodejs.org/en/
El único detalle con la instalación es una opción que sale al final la cual no necesitamos marcar, me refiero a esta:

Esa casilla no se marca, ya que eso instalaría toda la suite de visual studio y haría reiniciar tu maquina
varias veces.

Después de instalar node creas una carpeta en una ubicación raíz para que te sea fácil llegar a ella por la consola, y abres
CMD así: Tecla Windows + R

Una vez abierta la consola, me gusta personalizar el color de está ejecutando el comando: color 0a (color cero y A) así:
Ahora debemos instalar Apache Cordova así:

Ejecutando el comando: npm install -g Cordova

Luego me ubico en la carpeta donde voy a gestionar mi proyecto y ejecuto el comando de crear nuevo proyecto de cordova
así:
cordova create MyApp com.app.graphixx Aplicación

Donde MyApp es el nombre de la carpeta que se creara para el proyecto, com.app.graphixx el dominio del proyecto y
Aplicación el nombre de mi App. (el formato del dominio debe ser tipo com.app.nombre ).

Una vez ejecutado el comando, la consola debe mostrarnos el mensaje: Creating a new cordova Project.
Y si navegamos a la carpeta creada debe mostrar un contenido como el de la imagen de arriba.

Ahora debemos obtener el paquete de F7 en:

https://github.com/framework7io/framework7/tree/v1
Mueves ese zip a la carpeta del proyecto y extraes:
Dentro de la carpeta buscamos el contenido de la carpeta dist:

copiamos todo el contenido de la carpeta y lo pegamos dentro de la carpeta www de la carpeta MyApp:

Para hospedar el proyecto debemos instalar httpserve usando el comando en la consola:

npm i -g http-serve

Y en la consola ubicados sobre la carpeta del proyecto ejecutamos el comando:

http-serve

vemos que nos entrega unas URL visitamos esas URL en el navegador:

http://127.0.0.1:8080/
Lo cual nos mostrara la APP Emulada en el navegador así:

Debes redimensionar la ventana del navegador para que simule una vista desde Celular así:

Y listo ya tienes la app framework 7 cordova emulándose en tu PC, ahora solo debes probar la interfaz, la cual podrás
modificar y reprogramar según tus necesidades en los archivos contenidos en el directorio WWW de MyApp.

Cuando revises la consola veras un montón de comandos que informo la instancia, y cuando termines de programar tu APP
o tus pruebas debes detener la consola con tecla control sostenida más C, así:

Este tutorial ha sido elaborado y traducido usando:

http://www.alapan.me/first-android-app-framework7-cordova-part1/

Para mantenerte informado de más contenido sobre framework 7 en español, visita frecuentemente nuestro BLOG en
www.sistemasycontroles.net