Crea sito

Generate a Keystore in Ionic 4 for Google Play Store

 

ionic cordova build android --prod --release

keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk my-alias

 ~/Library/Android/sdk/build-tools/28.0.3/zipalign -v 4 percorsocompletoapp-release-unsigned.apk  nomeapp-Release.apk

 

Ionic Icon and Splash Screen without (ionic cordova resources) – MacOs problem solved

Scaricate questo eseguibile in base al vostro sistema operativo (io ho scaricato osx).

https://github.com/harshzalavadiya/ionic-resource-generator/releases

Incollate questo eseguibile nella cartella “resources” del vostro progetto Ionic.

Cambiate l’icona e la splash screen con quella che desiderate.

Aprite il terminale ed entrate nella cartella resources

cd ./resources

E avviate la produzione delle icone con il comando:

ionic-resource-generator-osx generate

 

 

Centrare verticalmente gli elementi dentro un div

 

div{  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

 

FIOT Model Canvas: leggete l’articolo completo

 

Vorrei condividere un modello che ho ideato per trovare un’idea e convalidarla nel modo corretto.

Il suo nome è FIOT Model Canvas ed è la sigla di Find Idea, Organize Target.

Clicca qui per leggere l’articolo completo

Upload Ionic 4 App on Github with AppFlow

     

 

App flow: https://dashboard.ionicframework.com/

Seguire le istruzioni per inizializzare un nuovo progetto o caricarne uno già esistente

Connect to github dal pannello di App flow andando in app/setting/git

Per aggiungere i file la prima volta:

     git remote add origin https://github.com/gabritech01/progetto.git

     git push -u origin master

Per aggiungere i file ad ogni cambiamento:

     git add .

     git commit -m “name commit”

     git push -u origin master

Errore 404 home con Ionic cordova Browser

Può succedere che creando una webapp con Ionic nel momento in cui rimane aperte la pagina home per molto tempo esca scritto all’utente “error 404: page not found”.

Per risolvere questo problema occorre molto semplicemente modificare un percorso in app-routing.module.ts

Versione prima della modifica:

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
];

Versione dopo la modifica:

const routes: Routes = [
  { path: '', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
  { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
];

 

Creare e caricare sul server una web app con Ionic

Per generare un sito web con Ionic si può utilizzare il comando:

ionic cordova run browser

che creerà nella cartella “www” nel seguente percorso: “progetto/platforms/browser”.

Per caricare il sito web una volta utilizzato il comando “ionic cordova run browser” è semplicissimo: dobbiamo solo incollare tutti i file presenti nella cartella www sul server. Preciso che bisogna copiare i file dentro la cartella, senza copiare anche la cartella.

Inoltre bisogna prestare attenzione al fatto che tutti i plugin di Ionic che abbiamo importato nel nostro progetto siano compatibili con il browser.

App Ionic 4 in Background (risoluzione problema Huawei/Honor kills application)

Su alcuni smartphone, in particolare di marca Huawei e Honor, il sistema mette in standby l’app dopo alcuni secondi. Se la nostra app lavora in background** è un problema che si risolve adottando questa procedura:

Aggiungere un plugin di cordova:

cordova plugin add https://github.com/thomas550i/cordova-plugin-doze-Optimize

Nella prima pagina della vostra applicazione bisogna aggiungere il popup che chiede all’utente di concedere l’uso dell’app in background (questo codice si può inserire anche in altre parti dell’app come in app.component.ts però io preferisco aggiungerlo nella prima pagina)

Perciò in home.page.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

declare var cordova: any

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  constructor() { }    

  ngOnInit() {
    cordova.plugins.DozeOptimize.IsIgnoringBatteryOptimizations(function (responce){
      console.log("IsIgnoringBatteryOptimizations: "+responce);
          if(responce=="false")
          {
            cordova.plugins.DozeOptimize.RequestOptimizations(function (responce){
              console.log(responce);
            }, function (error){
            console.error("BatteryOptimizations Request Error"+error);			
            });
          }
          else
          {
            console.log("Application already Ignoring Battery Optimizations");
          }		
    }, function (error){
    console.error("IsIgnoringBatteryOptimizations Error"+error);    
    });
  }

** in questa guida si dà per scontato che voi abbiate già inserito il plugin di Ionic Banckground Mode

 

App Android in Background (risoluzione problema Huawei/Honor kills application)

Nel vostro progetto Android Studio in cui avete creato un Service per l’esecuzione in background, per inserire la vostra app nella “whitelist” del sistema, inserire le seguenti righe:

-In MainActivity.java:

 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            Intent intent = new Intent();
            String packageName = getPackageName();
            PowerManager pm = (PowerManager) getSystemService(POWER_SERVICE);
            if (!pm.isIgnoringBatteryOptimizations(packageName)) {
                intent.setAction(Settings.ACTION_REQUEST_IGNORE_BATTERY_OPTIMIZATIONS);
                intent.setData(Uri.parse("package:" + packageName));
                startActivity(intent);
            }
        }
    }

In AndroidManifest.xml:

 <uses-permission  android:name="android.permission.REQUEST_IGNORE_BATTERY_OPTIMIZATIONS"/>

 

Formattare data e ora di Ionic

Formattare la data:

Inserire nell’html l’elemento ion-datetime utilizzando ngModel che andrà ad aggiornare la variabile data:

 <ion-datetime  placeholder="Data dell'evento"  [(ngModel)]="data"></ion-datetime>

Utilizzare il metodo slice per prendere i caratteri della data:

this.data.slice(0, 10);

Formattare l’orario:

Inserire nell’html l’elemento ion-datetime utilizzando ngModel che andrà ad aggiornare la variabile ora:

<ion-datetime display-format="h:mm A" picker-format="h:mm A" placeholder="Ora della sfida" [(ngModel)]="ora"></ion-datetime>

Utilizzare il metodo slice per prendere i caratteri dell’ora:

this.ora.slice(11, 16);

Se si vogliono anche visualizzare i secondi:

this.ora.slice(11, 19)