dilluns, 19 de juny del 2017

Ionic 2, using LoadingController

Sometimes our app it has that some realize tasks what need much time or we don't know the amount of time needed for receive data of the server, or for upload/download an image, file, etc... Normally these task works in background for not keep busy the main thread as this would block the app. The app is running normally but the user can have the sensation that somethings don't works correctly, the screen now is blank, it is waiting for data but the user does not know. For solve it and say to the user that the app is working and waiting data or waiting for the current task finished we can use the LoadingController for show a dialog box with a message to let the user know who the app is working normally.

Here you can read more about these controller. We can customize according our needs, we might dismiss it after a period of time but in my case I don't know when will finish the task.

For that I divide the process in three parts. First declare a variable of type Loading, second I create a function where creates the dialog  and assign them to the Loading variable and show the dialog. And finally when the promise finishes your task, I dismiss the dialog.


First import the components

import { NavController, NavParams, LoadingController, Loading } from 'ionic-angular';

We declare the variable that contains the dialog

loading: Loading;

The function to create and present the dialog

presentLoading () { this.loading = this.loadingCtrl.create({ content: "Waiting data ..." }); this.loading.present(); }


And use it

constructor(public navCtrl: NavController, public navParams: NavParams, public httpService: HttpService, public loadingCtrl: LoadingController) { this.source = navParams.get("src"); this.options = navParams.get("ops"); this.presentLoading(); this.httpService.getData(this.source, this.ops) .then((result:any) => { this.data = result; this.loading.dismiss(); }); }

Obviously is necessary to consider the possible exceptions, the catch clauses where  dismiss the loading dialog and show a message with the problem.

And that's all

dilluns, 12 de juny del 2017

Ionic 2. Checking permissions

Following with what was discussed in the last entry in Android since Marshmallow is necessary to check at run time the permissions cataloged how to dangerous and read or write in the external storage is one of them. In the case at hand, for restore the backup, as the app writes in the sandbox it isn't necessary to check the permissions. 

For check the permissions, we use the diagnostic plugin and we will use the same plugin for check permissions for access to location, sensors, phone, contacts, etc... but in this entry I only will write over the access to the external storage.

Well, first we install the plugin

   ionic plugin add cordova.plugins.diagnostic


And

   npm install --save @ionic-native/diagnostic


And we create a service to manage all the permissions

   ionic g provider PermissionsService

And we edit ../providers/permissions-service.ts and write

import { Injectable } from '@angular/core'; import { Platform } from 'ionic-angular'; import 'rxjs/add/operator/map'; import { Diagnostic } from '@ionic-native/diagnostic'; /* Generated class for the PermissionsService provider. See https://angular.io/docs/ts/latest/guide/dependency-injection.html for more info on providers and Angular 2 DI. */ @Injectable() export class PermissionsService { constructor(public platform: Platform, public diagnostic: Diagnostic) { }
isAndroid() { return this.platform.is('android'); }
checkWritePermission(): Promise<boolean> return new Promise (resolve => if (this.isAndroid) { this.diagnostic.isExternalStorageAuthorized() .then(authorized => { if(authorized) { resolve(true); } else { this.diagnostic.requestExternalStorageAuthorization() .then(authorization => { resolve (authorization == this.diagnostic.permissionStatus.GRANTED); }); } }); } }); } }

And we use it

createBackup () { if (this.permissions.isAndroid()) {< this.permissions.checkWritePermission().then(permission => { this.backup(); }, error => { console.log(error); }); } }

And the result looks like this



dilluns, 5 de juny del 2017

Ionic 2. Backup stories part II

Well, in the previous entry I explain how to install the plugin and how decide according the system the origin of data and the destination. Every OS has a different file system and we must adapt us at your characteristics. In the two cases the origin it's similar and use  applicationStorageDirectory property for access both of them. The difference is in the directory that contains the database, Library/LocalDatabase/ in iOS and databases/ in Android.

In the case of the destination it's where the differences are more big. In Android I think the best place is the root of the external storage, either in the root or in a directory for the app in the root. The access for this location is easy and the user just have to plug your device and has already access to the files and directories. 

iOS is another thing. Reading the File System Programming Guide from Apple Developers here we can see that recommends Documents/ in the Data Container inside the sandbox for store the user-generated content. The contents of this directory is accessible with iTunes and iCloud when making a backup or through file sharing but not  as in Android with a file manager when plugs the device in a computer.

Having said this already we can implement our methods for make a backup and restore it. For the destination path we use two different properties externalRootDirectory for Android and documentsDirectory for iOS, you can see this in the previous entry. 

The idea for the implementation is easy, first we check if file exist in the destination path, if it exist we remove it because the plugin cannot rewrite it. After of remove the file or if the file doesn't exist we copy it . If the operation have success shows a success message and if it is rejected shows an error message.

The code for the backup

backup() { let path: string; let destPath: string; let dirMessage: string;
if (this.iOSDir.length > 1) { destPath = this.iOSDir; path = this.file.applicationStorageDirectory + 'Library/LocalDatabase/'; this.translate.get('IOSDOCUMENTSDIRECTORY') .subscribe(value => { dirMessage = value; }); } else { destPath = this.AndroidDir;< path = this.file.applicationStorageDirectory + 'databases/'; this.translate.get('ANDROIDDOCUMENTSDIRECTORY') .subscribe(value => { dirMessage = value; }); } //check if file exist, if it exist remove it and copy new file. //If the file doesn't exist copy it this.file.checkFile(destPath, this.fileName) .then(success => {
//if file exist first remove it this.file.removeFile(destPath, this.fileName) .then(success => { //Copy new instance of the file this.file.copyFile(path, this.fileName, destPath, this.fileName).then(success => { //translations this.translate.get('BACKUPSUCCESS') .subscribe(value => { this.alertMes = value; this.alertMessage(this.alertMes + dirMessage); });
}, error => { this.translate.get('BACKUPUNSUCCESS') .subscribe(value => { this.alertMes = value; this.alertMessage(this.alertMes); }); }); }, error => { this.translate.get('BACKUPUNSUCCESS') .subscribe(value => { this.alertMes = value; this.alertMessage(this.alertMes); }); }); }, error => { //first copy of file this.file.copyFile(path, this.fileName, destPath, this.fileName).then(success => { this.translate.get('BACKUPSUCCESS') .subscribe(value => { this.alertMes = value; this.alertMessage(this.alertMes + dirMessage); }); }, error => { this.translate.get('BACKUPUNSUCCESS') .subscribe(value => { this.alertMes = value; this.alertMessage(this.alertMes); }) }); }); }

And for restore

restoreBackup() { let path: string; let destPath: string; let dirMessage: string; if (this.iOSDir.length > 1) { path = this.iOSDir; destPath = this.file.applicationStorageDirectory + 'Library/LocalDatabase/'; } else { path = this.AndroidDir;
destPath = this.file.applicationStorageDirectory + 'databases/'; } //check if backup file exist this.file.checkFile(path, this.fileName).then(success => { //check if file exist, if it exist remove it and //copy new file. If the file doesn't exist copy it this.file.checkFile(destPath, this.fileName) .then(success => { //if file exist first remove it this.file.removeFile(destPath, this.fileName) .then(success => { //Copy new instance of the file this.file.copyFile(path, this.fileName, destPath, this.fileName).then(success => { //Close and reopen database this.dbService.closeDatabase().then(success => { this.dbService.openDatabase(); this.translate.get('RESTOREBACKUPSUCCESS') .subscribe(value => { this.alertMes = value; this.alertMessage(this.alertMes); }); }); }, error => { this.translate.get('RESTOREBACKUPUNSUCCESS') .subscribe(value => { this.alertMes = value; this.alertMessage(this.alertMes); }); }); }, error => { this.translate.get('RESTOREBACKUPUNSUCCESS') .subscribe(value => { this.alertMes = value; this.alertMessage(this.alertMes); }); }); }, error => { this.translate.get('RESTOREBACKUPUNSUCCESS') .subscribe(value => { this.alertMes = value; this.alertMessage(this.alertMes); }); }); }, error => { this.translate.get('BACKUPUNOTEXIST') .subscribe(value => { this.alertMes = value; this.alertMessage(this.alertMes + path); }); }); }

Basically for restore we do the same changing the origin and the destination of the file. The last operation when the file are copied is close the database and reopen it for what the changes are efectives in the app.

And that would be all for iOS and Android before to Marshmallow. Since Marshmallow it is necessary to check the permissions and this I leave it for the next entry.