Buscar una palabra o un conjunto de palabras en ION-CARD — IONIC FRAMEWORK

Apreciados compañeros programadores de IONIC FRAMEWORK . Por favor si alguien me puede sacar de un apuro, de cómo hago a través de un Ion-searchbar o un botón de busqueda u otra forma; poder buscar texto en un solo Ion-card o un conjunto de Ion-card. Y que cuando lo encuentre, este texto quede seleccionado. Muy similar como cuando tenemos una web abierta y presionamos control + f y buscamos un texto en particular en el navegador.

De antemano muchas gracias por su valiosa ayuda…

No salen mis peticiones HTTP en android Ionic 4

Tengo algunos problemas con las peticiones http de mi aplicación echa con Ionic 5.2.4 y Angular 8.2.0.

Cuando esta aplicación la utilizo en el escritorio en modo de desarrollo todo funciona bien. Sin embargo cuando la compilo para debuguearla en un dispositivo android esta ya no funciona.

Leí que era porque no tenia permisos la app. Asi que agregue esta lina de codigo en el congif.xml

<application android:usesCleartextTraffic="true" /> 

Pero aun así no funciona. No se como puedo modificar el archivo platforms/android/app/src/main/res/xml/network_security_config.xml Para poder declarar el url del servicio api.

Este es el error que me sale. introducir la descripción de la imagen aquí

En mi servidor esta habilitado para no generar los Cross origin requests

Tienen alguna recomendación o si quieren que comparta algo de código solo díganme que parte. (No lo comparto directamente porque vuelve muy larga la pregunta)

Ionic 5 Y angular 8 Client no funciona cuando tengo instalo la app

Hola tengo el siguiente problema. Ya busque por todos lados y al parecer a todos les funciona pero ami no.

Hice una pequeña app. Donde hago autentificación con JWT, utilizo laravel del lado del backend (esta parte no falla, ya la probé con postman).

El problema que tengo es que cuando la app esta en modo de desarrollo o corriendo con el comando ionic serve la aplicación funciona bien. Pero cuando la compilo para testearla en el celular con el comando ionic cordova run android –divice ya no funciona las peticiones.

import { Component, OnInit } from "@angular/core"; import { Router } from "@angular/router"; import {   FormGroup,   FormBuilder,   FormControl,   Validator,   Validators } from "@angular/forms";  import { UserInterface } from "./../../../models/user"; import { JwtResponseInterface } from "../../../models/jwt-response"; import { AuthService } from "../../../services/auth.service";  @Component({   selector: "app-login",   templateUrl: "./login.page.html",   styleUrls: ["./login.page.scss"] }) export class LoginPage implements OnInit {   loginForm: FormGroup;    error_messages = {     email: [       { type: "required", message: "Email is required." },       {         type: "minlength",         message: "Email length must be longer or equal than 6 caracters"       },       {         type: "maxlength",         message: "Email length must be lower or equal than 60 caracters"       },       { type: "pattern", message: "Please enter a valid email address" }     ],     password: [       { type: "required", message: "Password is required." },       {         type: "minlength",         message: "Password length must be longer or equal than 8 caracters"       },       {         type: "maxlength",         message: "Password length must be lower or equal than 60 caracters"       }     ]   };   error;   constructor(     public formBuilder: FormBuilder,     private authService: AuthService,     private router: Router   ) {     this.loginForm = this.formBuilder.group({       password: new FormControl(         "",         Validators.compose([           Validators.required,           Validators.minLength(6),           Validators.maxLength(60)         ])       ),       email: new FormControl(         "",         Validators.compose([           Validators.required,           Validators.minLength(6),           Validators.maxLength(60),           Validators.pattern(             "^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9_.+-]+.[a-zA-Z0-9_.+-]+$  "           )         ])       )     });   }    ngOnInit() {}   onLogin(): void {     this.authService.login(this.loginForm.value).subscribe(       res => {         this.router.navigateByUrl("/home");       },       err => {         this.error = err;       }     );   } } 

Este es mi servicio. Creo que las interfaces no causan problema. Pero sin embargo no logro recuperar los errores que causa a nivel de aplicación.

import { Injectable } from "@angular/core"; import { HttpClient, HttpHeaders } from "@angular/common/http"; import { JwtResponseInterface } from "../models/jwt-response"; import { UserInterface } from "../models/user"; import { from, Observable, BehaviorSubject } from "rxjs"; import { tap } from "rxjs/operators"; @Injectable() export class AuthService {   AUTH_SERVER = "http://my-proyect-barcodes.esy.es";   authSubject = new BehaviorSubject(false);    private token: string;   private headers;    constructor(private httpClient: HttpClient) {     this.headers = new HttpHeaders()       // tslint:disable-next-line:quotemark       .set("Access-Control-Allow-Origin", "*")       // tslint:disable-next-line:quotemark       .set("Content-Type", "application/json");   }    login(user: UserInterface): Observable<JwtResponseInterface> {     return this.httpClient       .post<JwtResponseInterface>(`$  {this.AUTH_SERVER}/api/login`, user, {         headers: this.headers       })       .pipe(         tap((res: JwtResponseInterface) => {           if (res) {             this.saveToken(res.access_token, res.expires_at, res.token_type);           }         })       );   }    register(user: UserInterface): Observable<JwtResponseInterface> {     return this.httpClient       .post<JwtResponseInterface>(`$  {this.AUTH_SERVER}/api/register`, user, {         headers: this.headers       })       .pipe(         tap((res: JwtResponseInterface) => {           if (res) {             this.saveToken(res.access_token, res.expires_at, res.token_type);           }         })       );   }    logout(): void {     this.token = "";     localStorage.removeItem("ACCESS_TOKEN");     localStorage.removeItem("EXPIRES_AT");     localStorage.removeItem("TONKEN_TYPE");   }    private saveToken(     token: string,     expires_at: string,     token_type: string   ): void {     localStorage.setItem("ACCESS_TOKEN", token);     localStorage.setItem("EXPIRES_IN", expires_at);     localStorage.setItem("EXPIRES_TYPE", token_type);     this.token = token;   }    private getToken(): string {     if (!this.token) {       this.token = localStorage.getItem("ACCESS_TOKEN");     }      return this.token;   }    checkAuth() {     let date = new Date(localStorage.getItem("EXPIRES_IN"));     let token = localStorage.getItem("ACCESS_TOKEN");     let now = new Date();     if (date < now) {       return false;     } else {       return true;     }   } } 

Si alguien puede orientarme haciadonde debo debuguear mi aplicación o tiene algún ejemplo de la solución no dude en decirme. No importa que este en inglés lo entiendo lo suficiente para poder comprender donde estoy fallando.

¿Cómo puedo implementar google translator en ionic?, (Sin marcos de google)

Me encontraba leyendo en una pagina de la w3school como podria traducir una pagina entera con google translate API:

https://www.w3schools.com/howto/howto_google_translate.asp

Me puse a mirar los ejemplos y me di cuenta de que al ejecutarlos, aparecen marcos y elementos HTML que no deseo que aparezcan en la pagina, deseo usar el traductor sin que estos marcos aparezcan, pero no estoy seguro si esta información (El header de google y el footer de google), puedan quitarse y solo dejar el boton select de idioma.

Aparte si es posible me gustaria saber si hay alguna forma de autodetectar el idioma del pais en el que alguien se encuentra y traducir la pagina directamente a ese idioma apenas la pagina cargue.

introducir la descripción de la imagen aquí

O si esto no es posible o hay una mejor solución me gustaria saberla, muchas gracias de antemano!

Usar plugins de apache cordova (sin usar Ionic) en una aplicación desarrollada con angular 2+ (que usa typescript)

Hay mucha información disponible de como integrar apache cordova con un desarrollo angular2+ (yo lo he conseguido hacer sin problemas) pero muy poca información sobre como integrar correctamente los plugins de cordova en estos desarrollos (que es el motivo final de usar cordova) Cada plugin tiene sus forma de uso peor la duda aquí es en general, tras instalarlo en el proyecto cordova por linea comando, ¿como acceder a sus propiedades en un modulo o servicio typescript de angular?

He llegado a dudar de que se puedan usar en typescript correctamente los plugins de cordova porque no encuentro ejemplos de uso en la web misma de apache cordova

He visto que en Ionic usan Ionic Native que es una especie de adaptación de los plugins de cordova para ser usados correctamente en typescript y mi duda es si existe algo asi para cordova solo, sin tener que instalar ionic en el proyecto. ¿Sería posible usar Ionic Native en un proyecto cordova + angular2+ sin tener que instalar el framework de ionic, es decir, solo usando apache cordova con angular7 y instalando el modulo de Ionic Native por linea comando sin instalar todo el framework de Ionic?

Googleando descubrí que algunos plugins de cordova se han actualizado para usar en angular2+ con ‘typing’, pero no encuentro mucho sobre que es realmente y como usar esa mejora.

Sinceramente, ahora estoy un bastante perdido, tengo mi proyecto preparado para usar plugins de cordova con angular7 en mi caso y no se ya donde investigar y como hacerlo bien, no encuentro información ni ejemplos de uso.

Alguien que se haya peleado y lo haya conseguido por favor podría ayudar a al menos poner en la dirección correcta de por donde empezar?

Agradecería mucho aunque solo sean unas palabras de ayuda o clarificarnos un poco a los que estamos en esta situación.

Muchas gracias de antemano

Modificar estilos de un componente en Ionic 5 y angular 7

Estuve leyendo sobre el tema. Según entendí angular agrego una funcionalidad que hace que se encapsulen los estilos de un componente. No entendí bien como funciona esto. Pero entendí que para referir a los estilos del componente hay dos formas:

Ayer pregunte esto pero era demasiado tarde por lo que no tuve respuestas.

:host{   ion-content {     background: red;   } }  // O esta otra forma  page-name{     ion-content{        background: red;     } } 

Mi problema es que directamente no me funciona. Siempre tengo que hacer lo siguiente.

:host{   ion-content {     --background: red;   } } 

De esta forma si se toman los estilos. Pero se vuelven recurrentes. Por lo que si reescribo los estilos de un componente de ionic, este se aplica para todos los hijos de este componente.

introducir la descripción de la imagen aquí

Este es el código que tengo. Espero me puedan ayudar.

HTML

<ion-content class="background">   <ion-card-content>     <img class="logo" src="assets/logo/579358.svg" alt="">     <ion-card-header>       <ion-card-title text-center>Reading the barcode</ion-card-title>       <ion-card-subtitle text-center>welcome to the your new app</ion-card-subtitle>     </ion-card-header>     <form [formGroup]="loginForm">       <ion-item>         <ion-label position="floating">           email         </ion-label>         <ion-input formControlName="email" type="text" name="email"></ion-input>       </ion-item>       <div class="error-messages">         <ng-container *ngFor="let error of error_messages.email">           <div class="error-message"             *ngIf="loginForm.get('email').hasError(error.type) && (loginForm.get('email').dirty || loginForm.get('email').touched)">             {{ error.message }}           </div>         </ng-container>        </div>       <ion-item>         <ion-label position="floating">           password         </ion-label>         <ion-input formControlName="password" type="password" name="password"></ion-input>       </ion-item>       <div class="error-messages">         <ng-container *ngFor="let error of error_messages.password">           <div class="error-message"             *ngIf="loginForm.get('password').hasError(error.type) && (loginForm.get('password').dirty || loginForm.get('password').touched)">             {{ error.message }}             </div>         </ng-container>        </div>       <br>       <ion-button (click)="onLogin()" [disabled]="!loginForm.valid" expand="block" shape="round">         <ion-icon slot="start" name="contact"></ion-icon>         Login       </ion-button>     </form>   </ion-card-content> </ion-content> 

SCSS

:host {     ion-content {         --background: url("./../../../../assets/App/7243-01-low-poly-background-16x9-1.jpg") !important;         --ion-background-color: #006ff8 !important;         background-position: center, center !important;         background-repeat: no-repeat !important;         background-size: cover !important;     } } 

Requisição Http post com Ionic 4 e PHP

Sou iniciante em Ionic e estou fazendo um APP (Ionic 4) e PHP, porém estou com problemas nas requisições POST. As requisições do tipo GET funcionam.

import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Storage } from '@ionic/storage'; import { map } from 'rxjs/operators';  @Injectable({   providedIn: 'root' })  export class LoginService {    url: String = '';    constructor(     private http: HttpClient,     private storage: Storage   ) {     storage.get('baseUrlApi').then(valor => {       this.url = valor;     });   }      buscarUsuario(usuario, senha) {      let dados = {       usuario: usuario,       senha: senha     };      this.http.post(this.url+"login/entrar", dados).pipe(       map(resultado =>{         return resultado;       })     ).subscribe(valor=>{       console.log(valor['msg'])     });   } } 

Código PHP. (Não está completo porque estou usando um framework, mas fazendo teste na API com PostMan funciona normal)

<?php  header("Access-Control-Allow-Origin: *");    header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');  $  usuario = [     "usuario" => $  _POST['usuario'],     "senha" => $  _POST['senha'] ];  echo json_encode($  usuario); 

Esse é o erro:

inserir a descrição da imagem aqui

How to define child node in Firebase by IONIC 3

I’m working a project with Firebase Realtime Database and Ionic 3, but I have a problem with child node.

for example: My child is “LkuCxf041hHfRkn3tiq”, how to set this child to “test”?

My code is:

sendMessageModule(){     this.db.database.ref('/tasks').child(this.uid).push({       taskM: 'onM'     })  

I tried it that way too, but I didn’t succeed:

sendMessageModule(){     this.db.database.ref('/tasks').push({       taskM: 'onM'     })  

Thank you all!

Problema al tratar de mostrar diferentes alertas en Ionic 4

¡Hola a todos!

En primer lugar decir que soy completamente nuevo en Ionic 4 y tampoco he tocado demasiado angular.

Hasta ahora no había tenido ningún problema con los alerts en Ionic, el dilema me ha surgido al intentar implementar más de uno en un mismo servicio, ya que llamo al servicio desde la página en la que necesito que aparezca el alert.

En la siguiente imagen muestro el botón que hace la llamada al método:

introducir la descripción de la imagen aquí

En la siguiente imagen muestro el método que hace la llamada al método que se encuentra en el servicio:

introducir la descripción de la imagen aquí

En la siguiente imagen muestro la manera en la que llamo al método que creará los alert:

introducir la descripción de la imagen aquí

En la siguiente imagen muestro las condiciones para mostrar un alert u otro:

introducir la descripción de la imagen aquí

El error que me muestra al hacer click sobre el botón de cambiar la contraseña que debería de mostrar el alert es el siguiente:

introducir la descripción de la imagen aquí

Recalcar que el alert que debe mostrarse en el registro SI FUNCIONA
¡Muchísimas gracias!