Creando un nuevo page

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

Resumen

Reto: Mejora el footer que creamos en la clase pasada.

Un aspecto fundamental en el desarrollo móvil es la navegación. Para tener navegación necesitaremos por lo menos dos páginas, vamos a usar Ionic CLi para crear una nueva página.

Fabiola Dayana Acarapi Alvarez

student•

crear una nueva página llamada login con
ionic generate page login
también puedes resumir con generate con g
ionic g page login
crear nuevo provider
ionic g provider usuario

leydy karina Moreno Urbina

student•

Información sobre el comando generate, se puede visualizar también en el siguiente enlace
ionic generate

Danny Olivares

student•

hasta ahora todo bien, lo unico que me preocupa es lo desactualizado del curso, vamos platzi, renueven el curso.

Ytzvan Mastino

student•

Enlace a la documentación UI components de Ionic

Juan Manuel Viveros Martinez

student•

Reto de editar el footer.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <p>Enviar mensaje a platzi</p>
    <ion-buttons end>
      <button ion-button icon-end color="royal">
        Send
        <ion-icon name="send"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

Jorge Luis Paiva Huamán

student•

Cómo podriamos saber qué pages no están siendo invocadas para depurarlas / borrarlas?

Nicolás Arias González

student•

Yo usaría una herramienta tipo Google Analytics. Usándolo de la forma más básica podrías ver cuales páginas están siendo visitadas.

Dale una mirada, tiene muchísimas funcionalidades para identificar quién y cómo se está usando tu aplicación.

Jorge Luis Paiva Huamán

student•

CSS: Para cumplir el reto puse esto. todo ok, pero no reconoce mi clase css "cssunasolafila" :-( -- el proyecto está con ionic 5, pero está con scss :-(

<ion-footer> <div style="cssunasolafila"> <ion-input placeholder="Reporta algún issue encontrado" ></ion-input> <ion-button color="primary">Reportar</ion-button> </div> </ion-footer>

Mauro Nava

student•

En lugar de style es class. ¿No?

Nicolás Arias González

student•

mauronaval tiene razón: El atributo "style" te permite agregar los estilos dentro del mismo tag (in-line), por ejemplo <div style="border: 1px solid black; background-color: #ccc"><div>. Si tienes tu estilo en un css (o scss como en tu caso) depende del selector que hayas usado:

.cssunasolafila usa un selector de clase, por lo que le debes poner class a tu tag (<div class="cssunasolafila) o #cssunasolafila usa un selector de id (<div id="cssunasolafila").

Josué Carvajal

student•

Reto editar el footer.

Con icon-start o icon-end pueden posicionar el botón hacia la izquierda o derecha del todo

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Basico
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>

<ion-footer>
    <ion-toolbar>
        <ion-title>Footer</ion-title>
        <ion-buttons end>
          <button  ion-button icon-end>
            Enviar
            <ion-icon name="send"></ion-icon>
          </button>
        </ion-buttons>
      </ion-toolbar>
</ion-footer>

Enlace al resultado

Rafael Eldanoy Ensuncho Bechara

student•

ionic generate

Ejemplos

ionic generate
ionic generate component
ionic generate directive
ionic generate page
ionic generate pipe
ionic generate provider
ionic generate tabs
ionic generate component foo
ionic generate page Login
ionic generate page Detail --no-module
ionic generate page About --constants
ionic generate pipe MyFilterPipe

Ignacio Ariel Rosato

student•

En el caso de usar React, el comondo generate no esta permitido, cual seria el equivalente?

Jineth Daniela Granados Leguizamon

student•

&lt;ion-footer&gt;
  &lt;ion-toolbar&gt;
    &lt;ion-title&gt;Soy el footer&lt;/ion-title&gt;
  &lt;/ion-toolbar&gt;
&lt;/ion-footer&gt;

Jaime Ivan Hernandez Franco

student•

¿Que tan cierto es que las aplicaciones en ionic no son permitidas en iOS o la appstore?

Diego Forero

Team Platzi•

Desde que cumplas con los lineamientos definidos por la AppStore no vas a tener problema que sea en ionic, React Native, Vue Native, etc.

Carlos Enrique Ramírez Flores

student•

Fabian Figueroa

student•

Tambien se puede correr con ionic g page MyPage

Williams Alejandro Pérez Granado

student•

¿cual es la diferencia de un provider a un componente o un service?

Diego Forero

Team Platzi•

Un provider y un service son iguales solo que Ionic y Angular los llaman diferente.

Williams Alejandro Pérez Granado

student•

Pero debe existir un porque, o cual es la intención de separarlos pro ese nombre.

Carlos Uriel de Jesus Sánchez González

student•

ionic generate page <Nombre>

David Fuentes

student•

Generar Pagina con Ionic CLI

Wilson Gustavo Chango Sailema

student•

&lt;ion-footer&gt;
 &lt;ion-toolbar&gt;
   &lt;ion-title color=&quot;primary&quot;&gt;Curso Ionic&lt;/ion-title&gt;
 &lt;/ion-toolbar&gt;
&lt;/ion-footer&gt;

Edgar Raúl Bañuelos Díaz

student•

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>

<ion-footer>
  <ion-navbar>
    Pie de página
  </ion-navbar>
</ion-footer>

Josué Carvajal

student•

Reto footer de la clase pasada

Con icon-start o icon-end pueden posicionar el botón a los lados

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Basico
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>

<ion-footer>
    <ion-toolbar>
        <ion-title>Footer</ion-title>
        <ion-buttons end>
          <button  ion-button icon-end>
            Enviar
            <ion-icon name="send"></ion-icon>
          </button>
        </ion-buttons>
      </ion-toolbar>
</ion-footer>

Creando un nuevo page

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