Bonjour à tous! Dans ce tutoriel Ionic nous allons recréer l’application Instagram, du moins sa page d’accueil et de profil.
Le but pour moi est de vous démontrer qu’il est possible de créer une application réseau sociale très facilement et en quelques minutes avec Ionic.
Dans ce tutoriel Ionic, nous ne parlerons que de la partie visuelle et esthétique de l’application Instagram.
Si vous souhaitez apprendre à gérer la partie dynamique et fonctionnelle, jetez un œil à mon cours Ionic Facile et à l’application Instalike: https://drissas.com/ionic-facile/
Dans ce tutoriel Ionic, nous allons suivre les étapes suivantes pour recréer l’application Instagram:
- Recréer le thème de l’application Instagram
- Créer des stories Instagram avec Ionic
- Créer des posts Instagram
- Créer une page de profil Instagram
- Créer une grille de posts de profil Instagram
Comment recréer le thème de l’application Instagram avec Ionic ?
Pour commencer nous allons créer notre application Instagram avec Ionic avec la commande suivante:
ionic start Instagram tabs --type=angular
Nous créons une application Ionic avec Angular et avec le type Tabs, pour pouvoir afficher un menu de différentes table en bas de notre application.
Nous allons d’ailleurs commencer par modifier l’apparence de ces tabs dans notre application Ionic.
Pour cela rendez-vous dans votre fichier:
src/app/tabs/tabs.page.html
Puis modifiez les icônes de chaque tab pour qu’elles ressemblent à celles d’Instagram. À noter que l’application Instagram ne propose pas de titre pour ses tab, contrairement à certaines applications.
Il vous suffit juste pour chaque tab de retirer la balise ion-label:
<ion-tab-bar color="light" slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="home"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="search"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="add"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="heart-empty"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="contact"></ion-icon>
</ion-tab-button>
</ion-tab-bar>Nous affichons 5 tabs comme dans l’application Instagram, mais en réalité nous ne disposons que de 3 pages pour le moment.
Les 3 tabs centrales feront donc référence à la même page Tab2 tandis que la page d’accueil sera la page Tab1 et la page profil Tab3.
Pour finir on donne simplement à notre tabs la couleur light pour afficher les icônes en noir sur un fond blanc comme dans l’application Instagram.
Passons maintenant à notre page d’accueil pour créer d’abord le header de l’application Instagram.
Pour cela ouvrez le fichier HTML de votre page Tab1:
src/app/tab1/tab1.page.html
Et commencez par télécharger le logo d’Instagram avec un fond transparent en cliquant sur l’image ci-dessous:
Téléchargez-le dans le dossier assets de votre application, pour pouvoir l’afficher comme moi dans le ion-title de votre header:
<ion-title> <img src="../../assets/instagram-new-logo.png"> </ion-title>
Par défaut, l’image s’affichera avec sa taille originale, il faut donc lui donner quelques propriétés CSS pour l’ajuster et la centrer dans notre header:
ion-header img {
height: 47px;
margin-top: 4px;
}Dans l’application Instagram et selon les versions, il existe des boutons dans le header, par exemple le bouton pour ouvrir la caméra:
<ion-buttons slot="start">
<ion-button color="dark">
<ion-icon slot="icon-only" name="camera"></ion-icon>
</ion-button>
</ion-buttons>Voilà par exemple le header final de la page d’accueil de mon application Instagram avec Ionic:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button color="dark">
<ion-icon slot="icon-only" name="camera"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>
<img src="../../assets/instagram-new-logo.png">
</ion-title>
<ion-buttons slot="end">
<ion-button color="dark">
<ion-icon slot="icon-only" name="send"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>Cette partie est maintenant terminée concernant le thème de notre application Instagram.
Comment créer des stories Instagram avec Ionic ?
Passons maintenant à l’un des affichage les plus connu de l’application Instagram: les stories.
Pour cela nous nous rendons dans le ion-content de notre page d’accueil:
<ion-content> </ion-content>
Puis nous commençons par le petit texte présent avant l’affichage des stories, qui sert de bouton pour afficher toutes les stories.
Nous créons une boîte div pour accueil nos deux petits paragraphes de texte, et notamment pour les espacer:
<div class="text-stories"> <p>Stories</p> <p>Voir tout</p> </div>
Ma boîte div possède la classe text_stories à laquelle je donne les propriétés suivantes:
.text_stories {
display: flex;
justify-content: space-between;
font-size: smaller;
font-weight: 700;
color: #171717;
margin-left: 7px;
margin-right: 7px;
}On utilise notamment les boîte flex pour aligner notre contenu à l’horizontal et l’espacer au maximum, le reste est juste pour modifier l’apparence du texte.
Passons maintenant à l’affichage de nos stories, qui sont finalement des photos de profil stylisées.
Avant cela, je vous invite à télécharger un ensemble de photos de profil que j’ai trouvé sur internet, pour pouvoir les utiliser dans votre application.
Cliquez sur l’image ci-dessous pour télécharger le dossier assets de mon application Instagram et avoir accès à toutes les images dont nous aurons besoin dans ce tutoriel.
Pour contenir nos stories, nous créons une boîte div à laquelle nous donnons la classe stories que nous allons déclarer:
<div class="stories"> </div>
Puis dans notre fichier CSS, nous donnons à cette classe les propriétés d’une flex-box et également la possibilité de scroller le contenu qui dépasse son cadre à l’horizontal:
.stories {
display: flex;
overflow: scroll;
}Puis on passe à l’affichage de notre première miniature de story, que j’ai construit de la manière suivante:
<div class="story">
<div class="img-box">
<img src="../../assets/9.jpg">
</div>
<p>susan_mda</p>
</div>Le plus important concerne l’affichage de notre image, qui est contenu dans une boite div avec la class img-box.
Nous allons donner à cette boîte une image de fond, pour afficher une bordure colorée à notre image. Voilà l’image en question:
Nous déclarons ensuite notre classe img-box pour lui ajoutons cette image en fond, mais également lui donner des bords circulaires:
.stories .img-box{
margin-left: 7px;
margin-right: 12px;
background-image: url('../../assets/instagram-bg-color.jpg');
background-size: contain;
border-radius: 50%;
padding: 2px;
}Ensuite on passe aux propriétés CSS de nos photos de profil, on leur donne une taille de 50 px, des bords arrondis et surtout une bordure blanche de 2 px autour d’elles:
.stories img {
width: 50px;
max-width: none;
border-radius: 50%;
overflow: hidden;
border: 2px solid white;
margin-bottom: -3px;
}Enfin on passe à l’affichage du pseudo de la personne, et donc du style du paragraphe p en dessous de la photo de profil.
Pour lui rien d’exceptionnel, simplement le centrer et lui modifier sa couleur ainsi sa taille et sa disposition:
.stories p {
font-size: 11px;
text-align: center;
margin: 4px 0px 0px 0px;
font-weight: 500;
color: #383a3e;
}Il existe cependant une petite subtilité, pour la première story à afficher, Instagram nous affiche notre propre photo de profil et nous propose d’en ajouter une.
Pour cela nous allons créer une première story légèrement différente notamment avec une nouvelle classe add_story:
<div class="story">
<div class="add_story">
<img src="../../assets/1.jpg">
<ion-icon color="primary" name="add-circle"></ion-icon>
</div>
<p style="color: #86888f;">libra.laura</p>
</div>On ajoute également une icône à la suite de notre image que nous repositionner pour la superposer à celle-ci.
On commence déjà par déclarer notre nouvelle classe add_story, cette fois sans image en fond:
.add_story {
position: relative;
margin-left: 7px;
margin-right: 12px;
border-radius: 50%;
padding: 2px;
}Puis comme prévu on repositionne notre icône pour la superposer à notre photo de profil:
.add_story ion-icon{
position: absolute;
bottom: 1px;
right: 1px;
border-radius: 50%;
background-color: white;
}Notre première story est maintenant terminée, voilà le rendu finale de notre boîte stories:
<div class="stories">
<div class="story">
<div class="add_story">
<img src="../../assets/1.jpg">
<ion-icon color="primary" name="add-circle"></ion-icon>
</div>
<p style="color: #86888f;">libra.laura</p>
</div>
<div class="story">
<div class="img-box">
<img src="../../assets/9.jpg">
</div>
<p>susan_mda</p>
</div>
<div class="story">
<div class="img-box">
<img src="../../assets/3.jpg">
</div>
<p>smith.allan</p>
</div>
[...]
<div class="story">
<div class="img-box">
<img src="../../assets/15.jpg">
</div>
<p>conditoris</p>
</div>
</div>Pour accéder au code complet de l’application, rendez à la fin de l’article et télécharger directement le code source de l’application.
Avant de finir les stories et de passer à l’affichage des posts, Instagram proposer une petite ligne de séparation que j’ai reproduit avec la balise:
<hr>
À laquelle je donne les propriétés CSS suivante:
hr {
height: 2px !important;
width: 100% !important;
background: #d5d5d5 !important;
}Voilà c’est terminé pour cette partie sur les stories d’Instagram!
Comment créer un post Instagram avec Ionic ?
Passons maintenant à la création de nos posts Instagram, qui sont également très connus et font partie de la recette de son succès.
Nous pouvons commencer par le haut de la publication, qui affiche la photo de profil suivi du pseudo de l’utilisateur.
À la fin de cette item, on affiche un bouton plus pour afficher des options à l’utilisateur.
Cela est facilement reproductible avec les composants ion-item et ion-avatar préconçus par Ionic:
<ion-item no-padding lines="none">
<ion-avatar slot="start">
<img src="../../assets/8.jpeg">
</ion-avatar>
<ion-label>lisa_franck</ion-label>
<ion-icon slot="end" name="more"></ion-icon>
</ion-item>Depuis qu’Instagram a introduit les stories, on peut cliquer sur la photo de profil d’un utilisateur pour afficher ses dernières stories.
Nous allons donc reprendre rapidement le style que nous avons créé pour nos stories, et l’appliquer à ces photos de profil.
On affecte les propriétés CSS suivantes à notre ion-avatar pour lui afficher le fond coloré et le redimensionner notamment:
ion-avatar{
background-image: url('../../assets/instagram-bg-color.jpg');
background-size: contain;
padding: 2px;
margin: 5px;
height: 35px;
width: 35px;
}Puis on ajoute le petit bord blanc à notre image pour la mettre encore plus en valeur:
ion-avatar img {
border: 2px solid white;
}Enfin, j’ajoute quelques propriétés CSS pour le pseudo dans le ion-label, notamment pour lui modifier sa taille et sa couleur:
ion-label {
font-size: 14px!important;
font-weight: 700;
color: #1e2023!important;
margin-left: 5px;
}Voilà pour le haut de notre post, rapidement créé grâce aux composant d’Ionic!
Pour l’image du post en lui même, rien de plus simple on utilise simplement la balise img:
<img class="post_img" src="../../assets/post_1.jpg">
Je leur affecte simplement la classe post_img avec la propriétés CSS pour prendre toute la largeur de ma page:
.post_img {
width: 100%;
}Si ce n’est toujours pas fait, je vous invite à télécharger le dossier assets de cette application en cliquant sur l’image ci-dessous:
Nous pouvons maintenant aux fameux boutons d’interactions Instagram, avec le légendaire cœur pour liker un post.
On utilise une structure assez simple, les flex-box pour disposer trois boutons à gauche et un à droite:
<div class="flex-button">
<div>
<ion-icon name="heart"></ion-icon>
<ion-icon name="text"></ion-icon>
<ion-icon name="send"></ion-icon>
</div>
<ion-icon name="bookmark"></ion-icon>
</div>On utilise donc les flex-box et la propriétés justify-content pour les espacer aux maximum:
.flex-button {
display: flex;
justify-content: space-between;
}Concernant les icônes des boutons en eux-mêmes, on leur donne un peu plus grande, une marge pour ne pas les coller entre eux et surtout une couleur grise:
.flex-button ion-icon {
font-size: 26px;
margin: 4px;
color: #86888f;
}En fait les vrais boutons d’Instagram on des icône avec juste une bordure, comme le cœur vide par exemple. Mais dans sa bibliothèque open source d’icône, Ionic ne propose pas toutes ses icônes avec une variantes vides.
Il est possible bien sûr d’utiliser des icônes personnalités dans vos applications Ionic, mais dans ce tutoriel je me suis contenté de celles d’Ionic: https://ionicons.com/
Pour finir sur nos posts Instagram, on passe rapidement au texte et aux commentaire de cette publication.
Simplement on utilise la balise p pour afficher deux paragraphes et avec simplement quelques parties du texte en gras avec la balise b:
<p class="insta-text"><b>2.875 Likes</b></p> <p class="insta-text"><b>lisa_franck</b> Abusus enim multitudine hominum, quam tranquillis in rebus diutius rexit, ex agrestibus habitaculis urbes construxit multis opibus firmas et viribus, quarum ad praesens pleraeque licet </p>
On ajoute à nos paragraphes p la classe insta-texte pour modifier la taille du texte ainsi que ses marges pour les disposer le mieux possible:
.insta-text {
font-size: 13px;
margin: 0px 6px 4px 6px;
}Voilà c’est fini pour notre page d’accueil Instagram avec Ionic, on passe maintenant à la page de profil!
Comment créer une page de profil Instagram avec Ionic ?
Nous passons maintenant à la deuxième page de notre application Instagram que nous réaliser avec Ionic: la page profil.
Pour commencer rendez-vous dans le fichier HTML de la page Tab3 dans laquelle nous allons travailler:
src/app/tab3/tab3.page.html
Nous n’utiliserons pas de header dans cette page, vous pouvez donc le supprimer et accéder directement au ion-content:
<ion-content> <br> </ion-content>
J’utilise simplement la balise br pour espace le reste de mon contenu du haut de ma page.
Puis que nous n’utilisons pas de header dans cette page, on affiche directement le pseudo de l’utilisateur avec sa photo de profil.
Pour cela j’utilise une ion-item avec un ion-label pour le pseudo et une ion-avatar pour la photo de profil:
<ion-item lines="none">
<ion-label>
<h1><b>alisesmith</b></h1>
</ion-label>
<ion-avatar>
<img src="../../assets/13.jpg">
</ion-avatar>
</ion-item>Je contient également le pseudo dans une balise titre h1 et dont j’agrandis la taille pour qu’il soit bien lisible:
h1 {
font-size: 30px;
}Passons maintenant à l’affichage des informations classiques d’Instagram liés à notre profil, comme le nombre de followers ou de post créés.
Pour aligner et disposer nos éléments à l’horizontal, nous allons notamment utiliser les flex-box.
Je créé donc une grande boîte div avec la classe info_box qui contient elle-même trois petite boîte div avec la classe data_box, et à l’intérieur les informations de l’utilisateur:
<div class="info_box">
<div class="data_box">
<b>245</b>
<p>posts</p>
</div>
<div class="data_box">
<b>7850</b>
<p>followers</p>
</div>
<div class="data_box">
<b>715</b>
<p>following</p>
</div>
</div>Pour ma grande boîte div je déclare la classe info_box à laquelle j’applique la propriété d’une flex-box:
.info_box {
display: flex;
}Ensuite je m’attaque à la boîte qui représente une information, comme le nombre de posts ou de followers. Je lui déclare la classe data_box à laquelle j’affecte les propriétés suivantes:
.data_box {
margin: 4px 36px 7px 15px;
text-align: center;
}Puis j’agrandis le nombre de followers par exemple que j’ai volontairement mis en gras pour le mettre en valeur:
.data_box b{
font-size: 20px;
}Puis je m’occupe du petit paragraphe p en dessous que je mets en plus petit et de couleur grise:
.data_box p{
margin: 2px;
font-size: 12px;
color: grey;
font-weight: 500;
}On passe ensuite aux différents boutons d’interactions qu’Instagram propose dans la page de profil.
Le premier est bouton qui propose d’envoyer un message, pour cela j’utilise le composant Ionic ion-button:
<ion-button class="text_button" shape="round" size="small">Envoyer un message</ion-button>
Mais je lui ajoute aussi la classe text_button que je déclare ici pour lui donner une apparence plus proche d’Instagram (j’ai réalisé le tuto avec la version Android et donc le Material Design):
.text_button {
margin-left: 10px;
text-transform: initial;
--padding-start: 17px;
--padding-end: 17px;
}On passe ensuite aux deux petits boutons qui le suivent, qui sont simplement des boutons simples avec icônes:
<ion-button class="icon_button" shape="round" size="small" fill="outline" color="medium"> <ion-icon color="dark" slot="icon-only" name="contact"></ion-icon> <ion-icon color="dark" slot="icon-only" name="checkmark"></ion-icon> </ion-button> <ion-button class="icon_button" shape="round" size="small" fill="outline" color="medium"> <ion-icon color="dark" slot="icon-only" name="arrow-dropdown"></ion-icon> </ion-button>
Je triche un peu car je donne aux boutons la couleur medium (grise) mais aux icônes la couleur dark (noir), mais cela me permet d’avoir le rendu d’Instagram.
Je leur donne également une classe icon_button pour modifier légèrement leur marge:
.icon_button {
margin-left: 10px;
--padding-start: 7px;
--padding-end: 7px;
}On passe maintenant à l’affichage complet du profil de l’utilisateur, avec son nom complet ainsi que sa description.
Pour cela on utilise un ion-item et un ion-label pour disposer les différentes inforamtions:
<ion-item lines="none">
<ion-label>
<h3><b>Alise Smith</b> <ion-icon color="primary" name="checkmark-circle"></ion-icon></h3>
<p>Fashion-designer, London UK</p>
</ion-label>
</ion-item>On termine cette partie sur le début de notre page de profil avec la rangée de boutons pour changer l’affichage de nos posts.
Pour cela on utilise le composant ion-segment d’Ionic pour afficher nos quatre boutons avec icônes
<ion-segment color="medium">
<ion-segment-button>
<ion-icon name="keypad"></ion-icon>
</ion-segment-button>
<ion-segment-button>
<ion-icon name="list"></ion-icon>
</ion-segment-button>
<ion-segment-button>
<ion-icon name="star"></ion-icon>
</ion-segment-button>
<ion-segment-button>
<ion-icon name="contact"></ion-icon>
</ion-segment-button>
</ion-segment>Voilà c’est fini pour les informations du profil de notre utilisateur, on termine par l’affichage des posts.
Comment créer une grille de post photo ?
Nous pouvons terminer ce tutoriel par la création de la grille de photos assez connu d’Instagram.
Je précise aussi que le design que nous allons concevoir s’adapte à toutes les taille d’écran, smartphone et tablette et conserve les proportions carrés des images.
On commence pour contenir toutes nos photos par créer une boîte div avec la classe grid pour grille:
<div class="grid"> </div>
À nouveau j’utilise les flex-box pour disposer mon contenu et notamment ici permettre le retour à la ligne en cas de dépassement (wrap):
.grid {
display: flex;
flex-wrap: wrap;
}Ensuite à l’intérieur de ma grille, pour chaque image que je souhaite afficher, je créé une boîte img_box avec comme image de fond la photo du post:
<div class="img_box" style="background-image: url('../../assets/post_1.jpg');"></div>L’intérêt d’afficher l’image en fond est de pouvoir la centrer et de l’afficher comme une miniature carré quelle que soit sa taille et son format original.
Je donne donc à mes boîtes avec la classe img_box une margeur de 33.3% pour en afficher trois par ligne et un padding-bottom de 31% pour leur donner un format carré:
.img_box {
border: 1px solid white;
width: 33.3%;
padding-bottom: 31%;
background-size: cover;
background-repeat: no-repeat;
}Les autres propriétés permettent de centrer l’image en fond et de lui faire prendre la taille nécessaire. On ajoute également un bord blanc à notre boîte pour les séparer proprement.
Voilà donc le résultat de l’affichage de plusieurs photos sous forme de grille:
<div class="grid">
<div class="img_box" style="background-image: url('../../assets/post_1.jpg');"></div>
<div class="img_box" style="background-image: url('../../assets/post_2.jpg');"></div>
[...]
<div class="img_box" style="background-image: url('../../assets/post_15.jpg');"></div>
</div>Pour accéder à tout le code source de cette application, vous pouvez cliquer sur l’image ci-dessous:
