Ionic

 

Debug en celular

1. Habilitar debug USB en el telefono
2. ionic cordova run android --device
3. Para ver el output de consola que produce el celular:

Debug en chrome
Abrir chrome:
Buscar la que dice Ionic App, y click en Inspect



0. Setup inicial

instalar NativeScript y ejecutar tsn doctor
esto instala todo lo necesario (sdk de android, gradle, etc)

1. Iniciar proyecto

ionic start proyecto1 blank --type=angular
cd proyecto1
npm install --save @angular/material @angular/cdk

ng add @angular/material

Si no funciona: npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install


2. Previsualizar

ionic serve -l --livereload     //-l es para iniciar en modo lab, previsualiza en ios y android


*** Si livereload no anda:
npm uninstall -g ionic
npm install -g ionic@latest
npm i -g ionic
***

3. Todos los componentes Material

https://expressraider.blogspot.com/2019/02/importacion-de-todos-los-modulos-de.html

(referencia: https://gist.github.com/pimatco/d5b1891feb90b60ca4681011b6513873)


4. Referencia API Material

REFERENCIA
https://material.angular.io/components/categories

QUICK GUIDE
https://www.tutorialspoint.com/angular_material7/angular_material7_quick_guide.htm

ALLIGATOR
https://alligator.io/angular/material-design-angular-reference/


5. Firestore

npm install angularfire2 firebase


*** si da error TypeError:
npm install rxjs@6 rxjs-compat@6 --save
***

mas detalles en: http://expressraider.blogspot.com/2018/08/firebase-ionic-angular.html?m=0


6. Navegación

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'resultado', loadChildren: './resultado/resultado.module#ResultadoPageModule' }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }


home.page.ts

import { NavController } from '@ionic/angular';

constructor(public navCtrl: NavController) {}

this.navCtrl.navigateForward('resultado');








---------------------------------------------------------------------------------------------------------------------



Para ver todos los templates disponibles:
ionic start app1 --list


Instalar Gradle

1. Bajar la ultima version de gradle de esta ubicacion: https://gradle.org/install/
y descomprimirla en c:\gradle
*** bajar la version full ***

2. Agregar al path: c:\gradle\bin

3. Ejecutar gradle -v para verificar que haya quedado ok.


Configuración para poder compilar para Android:

INSTALAR ANDROID STUDIO
ESTO INSTALA EL SDK MANAGER DE FORMA CORRECTA

https://ionicframework.com/docs/v3/developer-resources/platform-setup/windows-setup.html

1. Instalar Java JDK (http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)
2. Instalar Android SDK (https://developer.android.com/studio/index.html#downloads)
3. Abrir SDK manager e instalar:
     
  • Android Platform SDK for your targeted version of Android
  • Android Platform-Tools
  • Android SDK build-tools version 19.1.0 or higher
  • Android Support Repository (found under “Extras”)
4. Instalar Gradle (https://gradle.org/)
5. Configurar las variables de entorno:

              ANDROID_HOME : The path to where the Android SDK is installed.
              PATH : Two entries, one where Tools are installed for the Android SDK, and another for Platform tools
              GRADLE_HOME : The path to where gradle is installed

Para agregar las variables desde linea de comando:

set ANDROID_HOME=C:\<installation location>\sdk
set PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
set GRADLE_HOME=C:\<installation location>

6. Verificar que se pueda ejecutar
                java -version
                android

(Esto indica que esta todo bien instalado)



7. En la carpeta del proyecto ejecutar

ionic cordova platform add windows




Compilación en Android

Luego que esta todo lo del paso anterior configurado:

ionic cordova build android       Generar el apk para probar en celular

*** hay que instalar android studio para que funcione la compilacion para android ***




home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';

import { HomePage } from './home.page';
import {MatButtonModule, MatIconModule, MatSelect} from '@angular/material';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material'
import {MatInputModule} from '@angular/material';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    MatButtonModule,
    MatIconModule,
    MatFormFieldModule,
    MatSelectModule,
    MatInputModule    
  ],
  declarations: [HomePage]
})
export class HomePageModule {}



home.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Datos del cliente
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

    <div class="example-container">
      <mat-form-field>
        <input matInput placeholder="Nombre">
      </mat-form-field>

      <mat-form-field>
          <input matInput placeholder="Dirección">
      </mat-form-field>
      
      <mat-form-field>
          <input matInput placeholder="Teléfono">
      </mat-form-field>
                  
      <mat-form-field>
        <textarea matInput placeholder="Textarea"></textarea>
      </mat-form-field>
    
      <mat-form-field>
        <mat-select placeholder="Color">
          <mat-option value="option">Rojo</mat-option>
          <mat-option value="option">Negro</mat-option>
          <mat-option value="option">Azul</mat-option>
        </mat-select>
      </mat-form-field>
    </div>    
</ion-content>


home.page.scss

.example-container {
  display: flex;
  flex-direction: column;
}

.example-container > * {
  width: 100%;
}










Tabs

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contactos" tabIcon="contacts"></ion-tab>
</ion-tabs>


import { Component } from '@angular/core';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor() {

  }
}

Input

<ion-content padding> 
  <ion-item> 
    <ion-input  [(ngModel)]="filtro" type="text" placeholder="Numero"></ion-input>
    <button ion-button item-end (click)="buscar();">Buscar</button>
  </ion-item>
</ion-content>

Tabla

<ion-content padding> 

  <ion-grid>
    <ion-row *ngFor="let d of lista">
      <ion-col>
        {{d.id}}
      </ion-col>
      <ion-col>
        {{d.titulo}}
      </ion-col>
      <ion-col>
        {{d.etapa}}
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>

Boton1

<button ion-button>Guardar</button>

Boton 2 (bloque)

  <div padding>
    <button ion-button color="primary" block>Guardar</button>
  </div>

Pasar datos de una pagina a otra

    this.navCtrl.push(ListaCompraPage, {
      codigo: this.codigo,
      descripcion: this.descripcion,
      precio: this.precio,
      cantidad: this.cantidad
    });

Variables globales

ionic generate provider global

import { Injectable } from '@angular/core';
import { Articulo } from '../../app/models/articulo';

@Injectable()
export class GlobalProvider {
  public lista: Articulo[];

  constructor() {
    this.lista = []; 
  }

}

para utilizarlo:

constructor(public global: GlobalProvider) {
  }

console.log(global.lista);






en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)