Bonjour à tous! Dans ce tuto Ionic 4 nous allons voir comment recréer visuellement l’application iOS de WhatsApp.
WhatsApp est l’une des applications mobiles les plus téléchargées au monde, avec une version iOS et Android relativement différente.
Dans ce tutoriel Ionic, nous allons recréer la version iOS de l’application, en reprenant au maximum de composants Ionic.
Nous allons plus précisément recréer la page de chat et celle d’une conversation une fois ouverte.
Pour recréer un clone de WhatsApp avec Ionic, nous allons suivre les étapes suivantes:
- Créer une applications Ionic Tabs comme WhatsApp
- Créer un header comme l’application iOS WhatsApp
- Créer les miniatures des conversations WhatsApp avec Ionic
- Créer une page de conversation WhatsApp avec Ionic
- Afficher les messages d’un chat avec les ion-badge
Comment créer une applications Ionic Tabs comme WhatsApp ?
On commence tout d’abord par créer notre application WhatsApp avec le type Ionic tabs:
ionic start whatsapp tabs --type=angular
Ensuite dans notre application, nous ajoutons une la page Conversation en plus pour pouvoir ouvrir le détail d’une consersation:
ionic g page conversation
Puis nous pouvons passer à notre menu tabs pour le modifier et faire en sorte qu’il ressemble à celui de WhatsApp. Rendez-vous dans le fichier:
src/app/tabs/tabs.page.html
Et modifiez les noms et icônes de chaque tab de cette manière:
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="qr-scanner"></ion-icon>
<ion-label>Status</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="call"></ion-icon>
<ion-label>Appels</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="camera"></ion-icon>
<ion-label>Camera</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="chatbubbles"></ion-icon>
<ion-label>Discussions</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="cog"></ion-icon>
<ion-label>Réglages</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>On travaillera par la suite dans la tab 3 qui sera celles des conversations.
Comment créer un header comme l’application iOS WhatsApp ?
On souhaite maintenant commencer à réellement coder le design de notre application WhatsApp avec Ionic.
On s’attaque d’abord donc au header de notre page Tab3, que nous travaillons dans le fichier suivant:
src/app/tab3/tab3.page.html
Nous allons en fait créer plusieurs toolbar à l’intérieur de notre header pour positionner le menu sur plusieurs lignes:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button>
Modifier
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="create"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-title size="large">Chats</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
</ion-header>Vous remarquez également que l’on utilise l’attribut size= »large » pour notre ion-title, pour reprendre le style d’iOS et précisément de l’application WhatsApp.
La barre de recherche prend elle automatiquement toute la place de notre écran, et le composant Ionic reprend bien aussi le style d’iOS.
Comment créer les miniatures des conversations WhatsApp avec Ionic ?
Passons maintenant à l’affiche des différents conversations, avec notamment les nombreuse informations affichées par WhatsApp.
On commence avec les traditionnels boutons proposées dans l’application iOS pour accéder à d’autres fonctionnalités:
<ion-item lines="full">
<ion-button slot="start" size="small" fill="clear">
Listes de diffusion
</ion-button>
<ion-button slot="end" size="small" fill="clear">
Nouveau groupe
</ion-button>
</ion-item>Puis nous pouvons créer la miniature d’une conversation avec le code suivant:
<ion-item detail routerLink="/conversation">
<ion-avatar slot="start" >
<img src="../../assets/avatar-finn.png">
</ion-avatar>
<ion-label>
<div class="flex_box">
<h3>Finn</h3>
<ion-note slot="end">12:54</ion-note>
</div>
<p><ion-icon class="text-icon" color="primary" name="done-all"></ion-icon> Listen, I've had a pretty messed up day...</p>
</ion-label>
</ion-item>Il vous faudra bien entendu les miniatures de vos personnages pour afficher leur images en miniature.
Pour nous rapprocher de l’application WhatsApp sur iOS, nous devons ajouter quelques propriétés CSS dans le fichier suivant:
src/app/tab3/tab3.page.scss
Modifiez ensuite la taille des ion-avatar (miniature de la personne) et modifier l’apparence des icônes et du texte:
ion-avatar {
height: 45px;
width: 45px;
}
h3 {
font-weight: 700;
font-size: 15px;
}
.flex_box {
display: flex;
justify-content: space-between;
}
ion-note {
font-size: 13px;
}
.text-icon {
font-size: 22px;
margin-bottom: -6px;
}
p {
color: grey;
}Voilà ainsi le résultat de notre ion-content pour recréer les conversations WhatsApp avec Ionic:
<ion-content>
<ion-list >
<ion-item lines="full">
<ion-button slot="start" size="small" fill="clear">
Listes de diffusion
</ion-button>
<ion-button slot="end" size="small" fill="clear">
Nouveau groupe
</ion-button>
</ion-item>
<ion-item detail routerLink="/conversation">
<ion-avatar slot="start" >
<img src="../../assets/avatar-finn.png">
</ion-avatar>
<ion-label>
<div class="flex_box">
<h3>Finn</h3>
<ion-note slot="end">12:54</ion-note>
</div>
<p>
<ion-icon class="text-icon" color="primary" name="done-all"></ion-icon>
Listen, I've had a pretty messed up day...
</p>
</ion-label>
</ion-item>
<ion-item detail routerLink="/conversation">
<ion-avatar slot="start">
<img src="../../assets/avatar-han.jpg">
</ion-avatar>
<ion-label>
<div class="flex_box">
<h3>Han Solo</h3>
<ion-note slot="end">7:06</ion-note>
</div>
<div class="flex_box">
<p>I've got enough on my plate...</p>
<ion-icon color="medium" name="volume-off"></ion-icon>
</div>
</ion-label>
</ion-item>
...
<ion-item detail routerLink="/conversation">
<ion-avatar slot="start">
<img src="../../assets/avatar-luke.jpeg">
</ion-avatar>
<ion-label>
<div class="flex_box">
<h3>Luke Skywalker</h3>
<ion-note slot="end">Hier</ion-note>
</div>
<p>I feel the good in you, the conflict...</p>
</ion-label>
</ion-item>
</ion-list>
</ion-content>Comment créer une page de conversation WhatsApp avec Ionic ?
On continue notre tutoriel Ionic 4 avec la création de la page de conversation et de son design bien connu.
L’application WhatsApp propose en effet un design et notamment un fond d’écran personnalisable par les utilisateurs.
On commence donc par se rendre dans la page conversation que nous avons créé au début du tutoriel et qui s’ouvre depuis la page Tab3:
src/app/conversation/conversation.page.html
On code en premier lieu le header de notre page, avec le traditionnel ion-back-button, qui permet le retour en arrière:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button text="Conv."></ion-back-button>
</ion-buttons>
<ion-title>Luke Skywalker<br><div class="status">En ligne</div></ion-title>
<ion-avatar slot="end">
<img src="../../assets/avatar-luke.jpeg">
</ion-avatar>
</ion-toolbar>
</ion-header>En fin de notre header, on afficher une image dans la balise ion-avatar pour la rendez ronde, et dont nous augmenterons la marge pour la décaler du bord.
Surtout on ajoute à notre ion-title un autre texte, après un retour à la ligne dans une balise div, que nous allons styliser. Pour cela ouvrez le fichier CSS:
src/app/conversation/conversation.page.scss
Comme prévu, on déclare la classe « status » pour afficher le statut de notre utilisateur, par exemple « en ligne » et on lui donne une taille et une couleur différente:
.status {
color: grey;
font-weight: 400;
font-size: 13px;
}
ion-header ion-avatar {
padding: 3px;
}La deuxième propriété concerne notre ion-avatar, pour afficher la photo de profil de amnière décalé par rapport au bord de l’écran.
On continue notre page de conversation avec le design de celle-ci, et notamment de son image de fond.
Vous pouvez dors et déjà commencer par télécharger l’image de fond d’écran WhatsApp ci-dessous:
Puis vous pouvez tout simplement créer une boîte HTML div, à laquelle nous donnons la classe « bg » pour background que nous allons définir ensuite:
<ion-content> <div class="bg"></div> </ion-content>
On donne alors des propriétés CSS à notre ion-content et à cette classe bg, pour la positionner de manière fixe en fond de notre écran, avec bien en sûr notre image en fond:
ion-content{
position: relative;
}
.bg {
width: 100%;
height: 100%;
position: fixed;
background-image: url("../../assets/bg.png");
background-size: cover;
}On termine le design rapide de notre page de conversation WhatsApp avec Ionic, avec l’espace d’envoi de message en base de l’écran.
Celui-ci restera relativement simple vous allez le voir. On commence par contenir le tout dans un ion-footer, qui se positionnera comme le ion-header mais en bas de manière fixe:
<ion-footer>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button fill="outline" shape="round" size="small">
<ion-icon slot="icon-only" name="arrow-round-up"></ion-icon>
</ion-button>
</ion-buttons>
<ion-input placeholder="Votre message"></ion-input>
<ion-buttons slot="end">
<ion-button >
Envoyer
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-footer>À l’intérieur de ce ion-footer, on place deux boutons classiques, que l’on positionne de part et autre de notre champ input.
On donnera simplement quelques propriétés CSS à notre input, pour le mettre en valeur par rapport au fond de notre ion-footer, blanc par défaut:
ion-footer ion-toolbar {
--background: #f4f4f4;
}
ion-footer ion-button {
font-weight: 600;
}
ion-input {
background: white !important;
height: 31px;
width: 95%;
margin-left: 2.5%;
margin-right: 2.5%;
border-radius: 4px;
border: 1px #dfdfdf solid;
--padding-start: 8px;
}Comment afficher les messages d’un chat WhatsApp avec Ionic ?
On termine notre tutoriel Ionic 4 avec la création des bulles de conversation WhatsApp.
On utilisera pour cela nos traditionnels ion-item avec à l’intérieur tout simplement des ion-badge, pour contenir du texte et l’heure du message:
<ion-item lines="none"> <ion-badge color="warning" slot="end">Hey Luke comment ça va ?! <ion-note color="medium">21:16 <ion-icon name="done-all"></ion-icon></ion-note></ion-badge> </ion-item> <ion-item lines="none"> <ion-badge color="light" slot="start">Plutôt bien merci <ion-note color="medium">21:17</ion-note></ion-badge> </ion-item>
Lorsque le message est envoyé par l’utilisateur, on l’affiche à droite avec la couleur warning (jaune) que nous allons mettre à jour par la suite, et à gauche et en blanc quand c’est un message de l’autre personne.
Nous pouvons ajouter quelques propriétés CSS pour nous adapter au design de WhatsApp et adapter l’afficher du texte des messages:
ion-item {
--background: transparent;
}
ion-badge {
padding: 6px 9px;
border-radius: 6px;
font-weight: 400;
font-size: 15px;
box-shadow: 1px 1px 3px #00000029;
}
ion-item ion-note {
font-size: 10px;
margin-left: 8px;
}
ion-item ion-note ion-icon{
font-size: 20px;
margin-bottom: -6px;
margin-left: -2px;
}Pour finir et modifier la couleur des messages envoyés par l’utilisateur, vous pouvez modifier les couleurs de votre applications dans le fichier suivant:
src/theme/variables.scss
Et adapter la couleur jaune de votre application avec celle de WhatsApp tout simplement:
/** warning **/ --ion-color-warning: #DBF8C8; --ion-color-warning-rgb: 219, 248, 200; --ion-color-warning-contrast: #0c0c0c; --ion-color-warning-contrast-rgb: 0, 0, 0; --ion-color-warning-shade: #c9e4b7; --ion-color-warning-tint: #f1ffe8;
Conclusion
Vous pouvez pour gagner du temps télécharger le code source complet de l’application et le reprendre.