page-translate

Comment accéder à la liste de contacts avec Ionic 2 & Typescript

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

Dans ce petit tuto, nous allons survoler les étapes à suivre afin de recueillir les informations de bases des contacts de notre liste de contact avec Ionic 2 et Typescript.

Créons-nous un projet.

ionic start ionicContact --v2

Vous devez ensuite entrer dans le répertoire du projet et ajouter le plugin Cordova. Par le fait même, générons la page de contact.

cd ionicContact
ionic plugin add cordova-plugin-contacts
ionic g page contact

Dans le répertoire app/pages/contact/contact.ts modifier le fichier afin qu'il ressemble à ceci:

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';

import { Contacts } from 'ionic-native';

@Component({
  templateUrl: 'build/pages/contact/contact.html'
})

export class ContactPage {

  public contactsfound: any;
  public search: any;
  public contacttobefound: any;

  constructor(private navCtrl: NavController) {
    this.contacttobefound = '';
    this.contactsfound = [];
    this.getContact("");
  }

  getContact(val) {
      Contacts.find(['*'], {filter: val,multiple:true}).then((contacts) => {
        this.contactsfound = contacts;
      });

  }
}

Dans le répertoire app/pages/contact/contact.html modifier le fichier afin qu'il ressemble à ceci:

<ion-header>
  <ion-navbar>
    <ion-title>
      Contact
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
    <ion-list-header>Recherche de contactes</ion-list-header>

    <ion-item>
      <ion-label floating class="placeholder">Entrez le nom que vous cherchez ici</ion-label>
      <ion-input type="text" [(ngModel)]="contacttobefound"></ion-input>
    </ion-item>

    <ion-item>
        <button block (click)="getContact(contacttobefound)">Rechercher</button>
    </ion-item>

    <ion-list>
      <ion-item *ngFor="#item of contactsfound">
        {{item.name.givenName}} {{item.name.familyName}}
      </ion-item>
      <ion-item *ngIf="contactsfound.length == 0">
        Aucun ne résultat ne correcpond à cette recherche
      </ion-item>
    </ion-list>
</ion-content>

Vous ne pouvez pas tester les fonctionnalité de Cordova sur l'ordinateur.

Toutefois, vous pouvez le tester en utilisant l'application mobile de Ionic. Vous aurez besoin de vous inscrire sur le site afin de compléter les opérations qui suivent.

À la racine de votre projet vous pouvez compiler votre application. Par la suite, vous pouvez le téléverser afin d'y avoir accès à partir de l'application mobile.

ionic build
ionic upload

Vous pouvez recueillir beaucoup d'informations sur les contact. Dans mon exemple, je ne fais que chercher le prénom et le nom du contact mais beaucoup plus de champs seraient aussi disponibles.

 <ion-item *ngFor="#item of contactsfound">
        {{item.name.givenName}} {{item.name.familyName}}
      </ion-item>
Pour plus d'infos consultez le readme du plugin cordova qui se trouve dans ./ionicContact/plugins/cordoca-plugin-contacts/readme.md
Voici l'extrait des valeurs et méthodes utilisables:
### Properties

- __id__: A globally unique identifier. _(DOMString)_

- __displayName__: The name of this Contact, suitable for display to end users. _(DOMString)_

- __name__: An object containing all components of a persons name. _(ContactName)_

- __nickname__: A casual name by which to address the contact. _(DOMString)_

- __phoneNumbers__: An array of all the contact's phone numbers. _(ContactField[])_

- __emails__: An array of all the contact's email addresses. _(ContactField[])_

- __addresses__: An array of all the contact's addresses. _(ContactAddress[])_

- __ims__: An array of all the contact's IM addresses. _(ContactField[])_

- __organizations__: An array of all the contact's organizations. _(ContactOrganization[])_

- __birthday__: The birthday of the contact. _(Date)_

- __note__: A note about the contact. _(DOMString)_

- __photos__: An array of the contact's photos. _(ContactField[])_

- __categories__:  An array of all the user-defined categories associated with the contact. _(ContactField[])_

- __urls__:  An array of web pages associated with the contact. _(ContactField[])_

### Methods

- __clone__: Returns a new `Contact` object that is a deep copy of the calling object, with the `id` property set to `null`.

- __remove__: Removes the contact from the device contacts database, otherwise executes an error callback with a `ContactError` object.

- __save__: Saves a new contact to the device contacts database, or updates an existing contact if a contact with the same __id__ already exists.

Voilà, il ne vous reste plus qu'à tester l'onglet contact.

Add new comment

CAPTCHA
Êtes-vous un robot ?
Image CAPTCHA
Enter the characters shown in the image.