APPLICATION Meteo Partie 1

APPLICATION METEO
Partie 1 : Création + design de base de l'application Météo
Création de l’application
Bienvenu dans ce nouveau chapitre consacré à la création d’une application météo

complète, qui nous permettra d'aborder de nombreuses notions de JavaScript.
On commence donc par la création de l’application avec la commande pour générer notre
application Ionic :
ionic start meteo blank --type=angular
On appelle notre application Météo tout simplement et on utilise le type blank (vierge) pour
n'afficher qu’une seule page.
Une fois que votre application est créé, rendez-vous dans son répertoire:
cd meteo
La dernière commande à entrer avant de lancer notre application est celle consistant à créer
une nouvelle page.
En effet nous aurons besoin de la page préconçu Home pour afficher nos données météo,
mais également d’une page pour chercher et choisir notre ville.
Nous créons donc la nouvelle page “Add” pour gérer la recherche de ville:
ionic g page add
Laissons maintenant cette page de côté et passons au design de base de l’application.
Design de l’application
Nous allons voir de haut en bas le design de notre page d’accueil, à commencer par le
header:
Son design est donc très simple, il contient un titre classique et un bouton de recherche pour
ouvrir la page Add.
Voilà le code HTML de notre header:

<ion-header>
<ion-toolbar>
<ion-title>
Paris
</ion-title>
<ion-buttons slot="end">
<ion-button color="light">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
Vous pouvez également pour commencer, donner un premier thème couleur à votre page
d’accueil en colorant votre menu.
Dans votre fichier CSS, ajoutez les propriétés suivantes:

ion-toolbar {
--background: #3F51B5;
--color: #ffffff;
}
De cette manière le header aura un fond de couleur et le titre s’affichera en blanc.
Passons maintenant à l’affichage des températures actuelles, au centre de notre page:
On commence par créer une boîte HTML div pour contenir toutes les informations de notre
page avec une petite marge:
<div class="ion-padding">
<p text-center>Vendredi, 06:10</p>
</div>
Vous pouvez également commencer à donner un thème à votre contenu, en colorant le

texte en blanc et en donnant un fond de couleur à votre page:
ion-content {
--ion-background-color: linear-gradient(#3F51B5, #2196F3);
}
p{
color:white;
z-index: 1;
text-transform: capitalize;
}
Nous créons ensuite la boîte HTML qui contiendra les informations de l’heure actuelle. Nous
utilisons pour cela les flex-box et surtout des propriétés CSS pour agrandir et ajuster les
texte et icônes.
Voilà la boîte HTML:

<div class="flex">
<div class="box_1">
<h4><ion-icon name="partly-sunny"></ion-icon> Chaud</h4>
<h1>18°</h1>
</div>
<div class="box_2">
<h5>23°C</h5>
<hr>
<h5>15°C</h5>
</div>
</div>
On donne maintenant un certains nombres de propriétés CSS à nos boîtes et autres

éléments HTML.
Ne vous laissez pas impressionnez par le grand nombre de propriétés CSS, il s’agit
simplement pour gérer la taille et l’alignement de nos éléments HTML.
Voilà donc le code CSS de notre première boîte flex:

.flex {
display: flex;
}
.box_1 {
width: 60%;
}
.box_2 {
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h4 {
color: white;
font-size: 25px;
margin: 0px!important;
display: flex;
z-index: 1;
text-transform: capitalize;
}
h4 ion-icon{
margin-right: 10px!important;
font-size: 60px;
}
h1 {
color: white;
font-size: 100px;
z-index: 1;
}
h5 {
color: white;
font-size: 25px;
z-index: 1;
}
hr {
height: 2px;
width: 50%;
background-color: #ffffff7a;
z-index: 1;
}
On enchaîne avec l’affichage des horaires et des températures futures. Nous allons les
afficher en ligne et surtout leur permettre d’être scroller, c’est-à-dire de les parcourir à
l’horizontal.
Voilà le rendu que nous souhaitons:
On utiliseras à nouveau les flex-box, mais cette fois avec un affichage horizontal qui permet
le dépassement.
Voilà notre boîte flex avec quelques températures affichées:
<div class="box_3">
<div class="box_hour">
<p class="transparent">18:00</p>
<p><b>20°</b></p>
<ion-icon name="partly-sunny"></ion-icon>
</div>
<p><b>18°</b></p>
</div>
<p><b>17°</b></p>
</div>
</div>
Par la suite nous utiliserons les boucles ngFor pour parcourir un tableau qui contiendra
toutes les températures de la ville.
Pour le moment on se concentre sur l’affichage, relativement simple, la boîte “box_3” est
une flex-box, tandis que chaque boîte “box_hour” représente les informations d’une heure
précise.
On applique donc à ces deux boîtes les propriétés suivantes:

.box_3 {
height: 100px;
width: 100%;
display: flex;
overflow: scroll;
}
.box_hour {
height: 100%;
width: 50px;
max-width: none;
min-width: 50px;
display: flex;
flex-direction: column;
justify-content: center;
}
.box_hour p{
font-size: 15px;
margin: 0px 0px 2px 0px;
}
.box_hour ion-icon{
color: white;
font-size: 35px;
}
La propriété la plus importante est “overflow: scroll” car elle permet de cacher les éléments
qui dépassent et de permettre de faire glisser nos boîtes à l’horizontal.
Les autres propriétés permettent de donner un style bien particulier à nos icônes et textes
d’affichage pour les heures et les températures.
Donc dans les prochaines partie nous verrons comment récupérer les données de l’API et
les afficher sous forme de boucle dans cette partie.
On termine enfin le design de notre page d’accueil avec un autre d’affichage d’heure, mais
cette fois-ci à la semaine.
En effet pour afficher les températures des prochains jours comme ceci:
Attention pour cette partie de nos page d’accueil, nous devons sortir de la première boîte qui
avait la classe “ion-padding”.
Nous souhaitons que notre nouvelle boîte ait elle aussi une marge intérieur, mais surtout ce
fond de couleur semi-transparent.
Voilà donc la boîte que nous créons:

<div class="ion-padding">
<p text-center>Vendredi, 06:10</p>
<div class="flex">
[...]
</div>
<div class="box_3">
[...]
</div>
</div>
<div class="week ion-padding">


</div>
Nous pouvons également donner dès maintenant le style à la classe ”week” pour lui donner
un fond transparent:
.week {
width: 100%;
background-color: #ffffff5c;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
On créera également notre première boîte pour contenir les informations d’une journée à
venir:
<div class="day" >
<p class="transparent">Vendredi 24</p>
<div class="day_info">
<ion-icon name="rainy"></ion-icon>
<p><b>25°</b></p>
<p class="transparent"><b>23°</b></p>
</div>
</div>
On affiche de cette manière le jour de la semaine, la température maximale et minimale de

cette journée, ainsi que l’icône de la météo.
Vous pouvez ainsi afficher plusieurs de la semaine avec cette même structure:
<div class="week ion-padding">
<div class="day" >
<p class="transparent">Vendredi 24</p>
<p><b>25°</b></p>
</div>
</div>
<div class="day" >
<p class="transparent">Samedi 25</p>
<p><b>24°</b></p>
</div>
</div>
<div class="day" >
<p class="transparent">Dimanche 26</p>
<p><b>26°</b></p>
</div>
</div>
</div>
On termine comme d’habitude par donner toutes les propriétés CSS à nos différents
éléments, en premier lieu pour les disposer mais également pour leur donner taille et
couleur bien précises.
Voilà donc les propriétés CSS à appliquer à vos éléments:

.day {
display: flex;
justify-content: space-between;
}
.day_info {
display: flex;
width: 33%;
justify-content: space-between;
}
.day ion-icon{
color: white;
font-size: 25px;
}
.transparent {
color: #ffffffa1;
font-weight: 400;
}
Le design de notre page d’accueil est maintenant terminé, nous attaquons ainsi la partie
qui nous intéresse vraiment à savoir le TypeScript pour dynamiser notre application.
11

APPLICATION Meteo Partie 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

APPLICATION Meteo Partie 1

Transféré par

Droits d'auteur :

Formats disponibles

APPLICATION METEO

Partie 1 : Création + design de base de l'application Météo

Bienvenu dans ce nouveau chapitre consacré à la création d’une application météo

Laissons maintenant cette page de côté et passons au design de base de l’application.

Voilà le code HTML de notre header:

Dans votre fichier CSS, ajoutez les propriétés suivantes:

De cette manière le header aura un fond de couleur et le titre s’affichera en blanc.

Passons maintenant à l’affichage des températures actuelles, au centre de notre page:

Vous pouvez également commencer à donner un thème à votre contenu, en colorant le

Voilà la boîte HTML:

On donne maintenant un certains nombres de propriétés CSS à nos boîtes et autres

Voilà donc le code CSS de notre première boîte flex:

Voilà le rendu que nous souhaitons:

On applique donc à ces deux boîtes les propriétés suivantes:

Voilà donc la boîte que nous créons:

<div class="week ion-padding">

On affiche de cette manière le jour de la semaine, la température maximale et minimale de

Voilà donc les propriétés CSS à appliquer à vos éléments:

Vous aimerez peut-être aussi