Corriendo Aplicación en el Browser

Clase 10 de 36 • Curso Básico de Ionic 2018

Resumen

Ya que generamos nuestra app veamos que es lo que se creó y que opciones nos da Chrome para hacer el desarrollo mas sencillo.

Juan C Felizzola

student•

Con ionic serve --lab podemos ver cómo se ve nuestra app tanto en Android como en iOS

Leonardo Araoz

student•

y windows phone

Diego Carrocera

student•

Excelente !!! muy bueno !!!

Isaí Ramírez

student•

*Abrir la ruta de tu carpeta donde dejaste tu proyecto
ionic serve
Abre un puerto en nuestra computadora y se podrá ver en nuestro navegador

Alvaro Diaz

student•

Feliz con la clase porque creo que avancé mucho, ya voy en la 9 y eso que apenas empecé, esto da moral !

Gustavo Fabian Sandoval

student•

Lo que me encnata de las herramientas de desarrollador de chrome ( y que seguro que lo debe tener otros browsers) es que podemos debugger cuando esta corriendo nuestra app en nuestro dispositivo.

Gustavo Alfredo Palomino Castellanos

student•

Tengo un problema, al correr ionic serve y abrir la ruta en el navegador me bota error “No se puede acceder a este sitio web”, que puede estar pasando?

Diego Forero

Team Platzi•

En la terminal no sale ningún error?

Zarkys Salas

student•

Que dice la terminal cuando ejecutas el serve? Tendras algun servicio ejecutandose en ese mismo puerto?

Rafael Eldanoy Ensuncho Bechara

student•

Para ver la App que creamos corremos el siguiente comando
ionic serve

Jose Florian

student•

Que versión de Ionic instalo?

David Eliezer Orantes González

student•

Excelente Funciona bien en Windows

Carlos Uriel de Jesus Sánchez González

student•

Desde la carpeta del proyecto

ionic serve // correr la app
ionic serve --lab //podemos ver cómo se ve nuestra app tanto en Android como en iOS

Juan Guillermo Perez Cardozo

student•

muy interesante el inspector de google no sabia que probaba resoluciones de moviles

Luis Angel Centeno LLaja

student•

Ionic serve es el comando para ver nuestra app en un navegador web.

Hunk Hk

student•

YA SALIO IONIC4 😦

<code>

<code>

Ariel Virgilio Solano Gonzalez

student•

Me da error en windows, porque?? Alguna solucion?

Carlos Sampol

Team Platzi•

Podrías por favor compartir que error te da para poder ayudarte? Saludos !

Jaime Morales

student•

Excelente

Deiby Mejia Ruiz

student•

https://hackingandslacking.com/fixing-your-npm-installation-f32f35857143

para los que les sale el error de modules, lean esto.

Cristian Andres Cañon Recalde

student•

de ahí no pasa, asi le de si o no... :(

Harim Palma

student•

Es por tu version de Node, me pasaba lo mismo. Debes instalar la version de Node 8.11.3, te dejo el link: https://nodejs.org/dist/v8.11.3/node-v8.11.3-x64.msi

Fuente: https://stackoverflow.com/questions/51143322/ionic-create-new-application-getting-stuck

Daniel Eduardo Mozo Pabón

student•

Recién comienzo, grandes expectativas.

Jorge Luis Paiva Huamán

student•

ionic serve --external

Martin Humberto Del Carpio Cantón

student•

alguien me podría ayudar, me aparece este problema, tengo las versiones actualizadas.

PS C:\Users\Martín\Documents\CURSOS_PLATZI\IONIC\geocaching> ionic serve
> ng.cmd run app:serve --host=localhost --port=8100
[ng] An unhandled exception occurred: Cannot find module '@angular-devkit/build-angular/package.json'
[ng] Require stack:
[ng] - C:\Users\Martín\Documents\CURSOS_PLATZI\IONIC\geocaching\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
[ng] - C:\Users\Martín\Documents\CURSOS_PLATZI\IONIC\geocaching\node_modules\@angular-devkit\architect\node\index.js
[ng] - C:\Users\Martín\Documents\CURSOS_PLATZI\IONIC\geocaching\node_modules\@angular\cli\models\architect-command.js
[ng] - C:\Users\Martín\Documents\CURSOS_PLATZI\IONIC\geocaching\node_modules\@angular\cli\commands\run-impl.js
[ng] - C:\Users\Martín\Documents\CURSOS_PLATZI\IONIC\geocaching\node_modules\@angular-devkit\schematics\tools\export-ref.js
[ng] - C:\Users\Martín\Documents\CURSOS_PLATZI\IONIC\geocaching\node_modules\@angular-devkit\schematics\tools\index.js
[ng] - C:\Users\Martín\Documents\CURSOS_PLATZI\IONIC\geocaching\node_modules\@angular\cli\models\command-runner.js
[ng] - C:\Users\Martín\Documents\CURSOS_PLATZI\IONIC\geocaching\node_modules\@angular\cli\lib\cli\index.js
[ng] - C:\Users\Martín\Documents\CURSOS_PLATZI\IONIC\geocaching\node_modules\@angular\cli\lib\init.js
[ng] - C:\Users\Martín\Documents\CURSOS_PLATZI\IONIC\geocaching\node_modules\@angular\cli\bin\ng
[ng] See "C:\Users\MARTN~1\AppData\Local\Temp\ng-sjkBnE\angular-errors.log" for further details.

[ERROR] ng has unexpectedly closed (exit code 127).

        The Ionic CLI will exit. Please check any output above for error details.
PS C:\Users\Martín\Documents\CURSOS_PLATZI\IONIC\geocaching> node -v
v12.18.0

Johana Marcela Neira Tenorio

student•

Porque no usan firefox developer?

Corriendo Aplicación en el Browser

Introducción

Aprende sobre Ionic con los cursos actualizados

Introducción al Curso de Ionic

Pre-Requisitos para este curso de Ionic

Treasure Hunting GeoCatching

Instalación y overview de Ionic CLI

Preparación de entorno de desarrollo en Mac

Preparación de entorno de desarrollo en Windows

Preparación de entorno de desarrollo en Linux

Aspectos Básicos

Crear una Aplicación

Corriendo Aplicación en el Browser

Estructura de Archivos

Estructura de una vista de Ionic

Navegación

Creando un nuevo page

Navegar a un page

Navegación por Tabs

Parámetros de navegación

Navegación hacia atrás

Navegación raíz

Estilos (Theming)

Introducción a estilos

Colores Personalizados

Alineación y transformación de texto

Padding y Márgenes

CRUD en Ionic y Firebase

Generar proyecto e instalar dependencias

Agregar y configurar AngularFire

Agregar servicio de acceso a datos

Crear una lista con array estático

Crear una vista para agregar records

Agregar la habilidad de ver records

Crear lista dinámica y agregar la habilidad de editar records

Agregar la habilidad de eliminar records

Implementando Login con Facebook

Deployment

Correr aplicaciones en emulador

Correr aplicación en dispositivos Android

Correr aplicación en dispositivos iOS

Publicando nuestra aplicación en Android y iOS stores

Conclusiones del curso