Aprende Informatica Conmigo

  • Inicio
  • Contenido Anterior
    • VIDEOTUTORIALES
    • Windows Server 2008
    • POWERSHELL

24 marzo, 2015 Por oscar Deja un comentario

Ionic Framework – Primera aplicación

ionic-logo-blog

Hace tiempo que había visto información sobre Ionic Framework por la web pero no le había dado mucha importancia debido sobre todo a que estaba mas o menos contento con Jquery Mobile y  no me apetecía cambiar sin más ni más.

También he de decir que estos dos últimos años he probado varios framew0rks pero ninguno se ajustaba a mis necesidades tanto como para cambiar.

Pero eso ha cambiado porque al ponerme serio y empezar a leer algunos artículos sobre Ionic Framework, hice algunas pruebas y quedé tan sorpendido que por fin he decidido cambiar de framework.

Antes de nada hay que decir que antes de empezar deberíamos tener algunos conocimientos sobre, html, css, javascript y angularjs.

Aunque es posible utilizar las librerías de Ionic Framework descargándolas y añadiéndolas a nuestro html, os voy a explicar la que para mi es la mejor forma. Estoy convencido que cuando lo probéis, estarés de acuerdo conmigo en esta forma de trabajar con Ionic y Phonegap.

Antes de instalar Ionic Framework, debemos tener instalado Nodejs. Como no tiene ningún secreto, simplemente lo descargáis y lo instaláis.

Tengo que decir que si queréis sacarle el máximo partido lo ideal es que tengáis instaladas las herramientas de desarrollo de vuestras plataformas favoritas como pueden para Android e IOS. Sobra decir que para compilar apps para IOS hace falta un Mac.

Asumimos que ya hemos instalado Nodejs. Desde la consola de comandos introducimos:

npm install -g ionic
También deberíamos instalar Cordova de la siguiente forma:
npm install -g cordova</pre>
<pre>

Bueno, ahora vamos a crear un nuevo proyecto Ionic y para ello, desde la consola de comandos nos posicionamos en el directorio sobre el que vamos a crear nuestro proyecto Ionic.

Creamos un directorio para incluir dentro este nuevo proyecto. Yo le he llamado: «primerionic», pero le podéis poner el nombre qué mas os inquiete. Recordad que es una prueba y haremos muchas más y mucho más interesantes.

Ejecutamos el siguiente comando :

</pre>
<pre>ionic start primerionic blank

En el comando anterior distinguimos «black» al final. Esto lo hacemos para que nos cree una app que herede de la plantilla básica «blank», que es la más sencilla. También disponemos de estas otras dos plantillas:  «tabs» y «sidemenu».

Si revisamos el directorio «primerionic», vemos que se han añadido un montón de directorios y ficheros:

ionicframework-01

A nosotros lo que más nos interesa es el contenido del directorio «www» porque es donde vamos a realizar los cambios y modificaciones, pero esto lo haremos en otro tutorial. Aunque como prueba, podemos cambiar el texto dentro del <h1 class=»title»> para que veamos el cambio.

Ahora vamos a ver cómo queda la app antes de compilarla y para ello nos posicionamos en el directorio de nuestra app y ejecutamos el comando:

ionic serve

Esto abrirá nuestra app en nuestro navegador web y podremos ver cómo queda:

Interesante, ¿verdad? Pues es todavía más interesante porque podemos hacer cambios en el documento y cuando guardamos, nuestra app también se actualiza en el navegador.

ionic-framework_primera-app-01

Podéis hacer la prueba de cambiar algo en el código, guardar el documento y ver que inmediatamente se actualiza en el navegador.

Bueno, creo que lo vamos a dejar aquí aunque hay más cosas interesantes de debemos saber de este framework pero vamos a ir poco a poco.

oscar
oscar

Programador WordPress freelance

Publicado en: Ionic Framework

Acerca de oscar

Programador WordPress freelance

Deja una respuesta Cancelar la respuesta

Lo siento, debes estar conectado para publicar un comentario.

Hazte con el tema Divi

Divi WordPress Theme
Libro windows server 2008

Libro certificación Windows Server 2016

Libro certificación Windows Server 2016

Libro Windows Server 2016

Libro Windows Sever 2016
Web Hosting

Últimos artículos

  • PHP función var_dump(): Mostrar el contenido de una variable
  • PHP función unset(): Eliminar variables
  • MySQL LIMIT: Limitar la canidad de filas en una consulta
  • PHP función isset(): Evaluar si una variable está definida
  • PHP función empty(): Comprobar si una variable está vacía
  • MySQL SELECT DISTINCT para encontrar registros con diferente valor en el mismo campo
  • Los mejores libros en español para aprender WordPress

Mis Webs

  • Aprende Informática Conmigo
  • Dinapyme
  • MUSIKP
  • Oscar Abad Folgueira

Proyectos

  • Basabe Baserria
  • Batukada Battuere
  • Bicicletas Sin Pedales
  • Bordalan
  • C.R. Pantano del Rumblar
  • Dinapyme
  • DiverBiblio
  • Egia Ingenieros
  • Hermanos Vivas construcciones
  • Ibartxi – Suministros de Gas y Soldadura
  • LANBASE
  • LS Fotografía
  • Luke and Phil
  • Masajes Mas Sana
  • MUSIKP
  • Oh! Yeah Dev
  • Oscar Abad Folgueira
  • Participación ciudadana Basauri
  • Restaurante Bideko
  • Taldesport
  • Vicente Choya
  • WooCommerce Knowledge2K
  • Inicio
  • Contenido Anterior

Copyright © 2023 · Oscar Abad Folgueira Y DINAPYME· Acceder