Lance ta première app Ionic 4 en 10 min : Formation developpeur web

Parce que maintenant nous pouvons utiliser le CLI de Ionic n’importe où, dans n’importe quelle terminal pour créer, modifier ou executer des projets Ionic
Alors maintenant, avec cette installation, nous pouvons l’utiliser pour créer une nouvelle application.
Pour cela à partir de ton terminal ou une invite de commande, 
Rendez-vous jusqu’au accédez  dans lequel tu souhaites créer ton nouveau projet.
Une fois que tu y es, lancez « Ionic start »,
Cela vas générer un nouveau projet. 
A ce niveau on te posera quelques questions 
Comme nom souhaites-tu donner à ton projet
Moi je le nommerai « my-first-project » mais tu peux bien sûr choisir n’importe quel nom
 
Ensuite, tu pourras choisir parmi une liste de modèles pré-construit. Cette liste pourrait changer avec le temps,
Tu as principalement le choix entre un modèle vierge qui est un projet totalement vide avec juste une page de départ,
Un modèle qui détient déjà un menu latéral que tu peux faire faire glisser à partir de la gauche 
Et un menu tabs, qui détient un menu avec quelques icônes en bas de page.
Nous découvrirons ces différentes options de navigation tout au long du cours 
et tu apprendra à les utiliser à partir d’un modèle pré-construit, mais aussi à les construire par toi-même
Par conséquent, je vais commencer par le modèle vierge, qui est aussi le plus simple pour commencer.
Nous en verrons plus à propos du reste plus tard.
Maintenant, cela va générer un nouveau projet et installer toutes les dépendances nécessaire au projet comme Angular ou Ionic,
Attendons que cela se termine.
Maintenant, une fois terminé, on me demande si je veux utiliser Ionic AppFlow et y connecter mon application et tu poeux simplement répondre non,
c’est l’un de ces services cloud qui pourrait être utilisé gratuitement, mais je n’en ai besoin pour le moment, je vais donc simplement tapez n et appuyez sur Entrée ici.
Maintenant, tu peux naviguer dans cette nouvelle création my-first-project ou le nom que tu lui aura donné et là, 
lance simplement Ionic serve. 
Maintenant, Ionic serve dans les coulisses utilise le CLI d’angular qui est installé pour toi dans ce projet afin d’activer un serveur de développement qui exécute ton application, construit ton application angulaire.
Ionic utilise le CLI angulaire en coulisse, de sorte que toutes les fonctionnalités intéressantes offertes par le CLI angular soient également disponible dans un projet ionique
Donc ici, j’ai eu ma première application Ionic, elle est basic 
Et semble particulièrement intéressant si tu ouvres tes outils de développement via Chrome ou le navigateur que tu utilises.
Mais dans les outils de développement de chrome tu peux cliquer sur cette icône avec les téléphones, puis afficher un aperçu de l’application telle qu’elle se présente sur différents appareils mobiles,
Et ça n’a pas l’air trop mal, et cela ressemble déjà un peu plus à une application mobile. 
Maintenant allons un peu plus loins, pour cela nous avons besoin d’un éditeur de texte, nous avons besoin d’un IDE où nous pouvons écrire notre code. 
Dans ce cours je vais utiliser Visual Studio Code, un IDE gratuit conçu pour le développement Web.
C’est rapide, c’est génial,
il reçoit constamment de nouvelles fonctionnalités,
Il est vraiment génial.
Tu peux l’obtenir à partir de code.visualstudio.comet là, tu peux le télécharger pour ta plate-forme (Windows, Mac, Linux)
C’est un simple programme d’installation, tu le télécharges, parcoure le programme d’installation et une fois que tu l’as installé, tu peux ouvrir le projet à partir du dossier que tu as généré ici, donc dans mon cas my first projet avec Visual Studio Code. 
J’ai ouvert le dossier my-first-project, maintenant dans Visual Studio Code, cela devrait ressembler à ça.
J’utilise également certaines extensions, donc si tu vas voir les extensions ici, je t’en recommande deux :
Angular essentials, tu peux simplement le rechercher, puis installer le plugin Angular essentials,
Cela t’aide avec le développement Angular en général et je vais aussi l’utiliser dans ce cours
J’utilise aussi le plugin Matrial Icon Theme, c’est totalement optionnel.
Ca change simplement les icônes de fichier que tu vois à l’intérieur de Visual Studio Code, ça ne t’aide pas dans le développement mais ça donne un look plutôt sympa. 
Maintenant, une fois que tu as fini de choisir tes extensions, tu peux revenir à l’explorateur.
Donc si tu as déjà travailler avec Angular cela devrait te sembler familier ici
Tu as un dossier source avec un dossier « app »,
avec un app module, 
un composant d’application 
et ici dans le fichier app.component.html
La première chose intéressante est que ce ne sont pas des éléments HTML normaux ni des composants Angular normaux.
En fin de compte, ces composants Web sont ajoutés par Ionic.
Voici quelques composants Web q
Si tu vas dans home.page.html. 
Tu veras des éléments « ion »  une barre d’outils, un titre, puis un élément HTML normal.
Il est donc tout à fait normal de les mélanger et de les assortir, mais Ionic possède une riche suite d’éléments intégrés qui
Si tu souhaites avoir un aperçu, tu peux les retrouver  dans la documentation officielle dans UI components. sur ionicframework.com
Tu feras une liste de tous les composants Web fournis avec
Nous pourrions ajouter un bouton Ionic qui est l’un des composants fournis et dans ce cours, 
Je pourrais dire changer le texte et disons que je veux changer ce texte
Alors prenons ce texte ici, peut-être le déplacer dans un paragraphe et sur ce bouton ici, nous pouvons maintenant ajouter un écouteur d’événement clic et exécutezchangeMe.
Nous écrivons donc ici du code angulaire normal, c’est ce que je veux te montrer,
ceci est un code Angular normal, 
 
Et puis maintenant que nous avons ajouté cet écouteur de clic et  je peux ajouter ici une méthode ChangeMe à la classe de composants de ma page d’accueil, qui
est un composant Angular normal comme tu peux le constater, il a le décorateur de composant,
il contient l’URL du modèle et le sélecteur, donc tout ce que tu sais de Angular. Et là-dedans, je pourrais
avoir une propriété de texte avec le texte de départ par défaut, disons et lorsque nous déclenchons cette fonction ici, cette méthode,
 
je mets ce texte égal « J’ai changé »  et maintenant tout ce que nous devons faire, encore une fois la logique angulaire normale.
 
Maintenant, avec ça, si je sauvegarde maintenant
grâce à Ionic serve marche toujours et il surveillera automatiquement ton code pour détecter les modifications et rechargera ton application dans le navigateur,
Et donc maintenant, si tu vas dans l’onglet où ton application est exécutée, tu vois le modèle de changement,
Tu vois ce bouton sans que l’on est ajouté de CSS qui est une autre partie de ces composants Web intégrés,
ils ont le style inclus
et si j’appuie sur ce bouton, cela change. Maintenant au fait,
si je passerais à disons à un autre appareil et je recharge,
Tu peux également voir que le bouton a maintenant un aspect différent
C’est donc tout ce que Ionic fait pour toi. Il ajuste automatiquement ses composants à la plate-forme
ils fonctionnent, cela te donne un beau style et tu peux les utiliser comme des éléments Web normaux, 
c’est essentiellement ce que tu pourras faire avec Ionic.
Nous n’avons même pas encore vu la partie où nous prenons cette application Web et l’exécutons sur un véritable appareil natif, nous le ferons plus tard dans le cours
mais c’est finalement comment ça que nous allons travailler avec Ionic tout au long du cours. Nous allons utiliser les nombreux éléments qu’il nous offre
Nous pouvons construire une belle applications que nous pouvons déployer en tant qu’applications Web et exécutées comme des sites Web normaux, mais que nous pourrons ensuite déployer également en tant qu’applications natives
qui ressemblent et se sentent comme des applications natives.
Et j’espère que cela ouvrira ton appétit, 
Nous allons apprendre 
$tout à ce sujet tout au long du parcours

Right Alignment Of Call To Action

Far far away, behind the word mountains, far from the countries Vokalia.

Lance ta première app Ionic 4 en 10 min : Formation developpeur web

Présentation de notre formation developpeur web paris par une introduction avec Ionic et Angular. Ionic est l'une des technologies du moment que vous puissiez apprendre à l'heure actuelle. Elle vous permet d'utiliser une base de code (écrite en HTML, JS et CSS) pour créer et envoyer des applications
Read More

Formation developpeur web en ligne : Question et Réponse

Deviens développeur Web à part entière en 2019 et obtiens les compétences les plus recherchées! Il s’agit de cours sur les technologie qui connaissent une forte croissance et font désormais partie des languages de développement les plus cotés pour les développeurs. React Js - Angular - Vue JS
Read More

Qu est ce que Gatsby ? : Formation developpeur web

Tu veux améliorer tes compétences React JS et augmenter ta valeur en tant que développeur front-end ? Mettez à niveau vos compétences de réaction en apprenant Gatsby.js avec un backend Wordpress! Gatsby
Read More

A propos de Yohann Ravino

https://www.linkedin.com/in/yohannatticot/

Yohann Ravino est un entrepreneur, auteur et conférencier international. Il travaille avec les cadres supérieurs pour mettre en œuvre son système de «maîtrise de l’organisation» afin d’améliorer considérablement l’efficacité et l’efficience de leurs organisations; leur permettant de devenir des leaders reconnus et hautement récompensés.

Leave a Reply