fbpx

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 exécuter 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 va générer un nouveau projet;
  • A ce niveau on te posera quelques questions;
  • Quel 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 glisser à partir de la gauche () et un menu tabs, qui détient un menu avec quelques icônes en bas de page.

Avantage:

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.
  • Une fois terminé, on me demande si je veux utiliser Ionic AppFlow et y connecter mon application et tu peux 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 ionic.
 
**** 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;
  • 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 loin, 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, génial. Il reçoit constamment de nouvelles fonctionnalités.
Tu peux l’obtenir à partir de code.visualstudio.com et là, tu peux le télécharger pour ta plate-forme (Windows, Mac, Linux)
 
C’est un simple programme d’installation:
  • télécharges
  • parcoure le programme d’installation
  • 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 :

1 – 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
 
2 – Matrial Icon Theme: c’est totalement optionnel.
Ça 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 » 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:
Si tu vas dans home.page.html , tu verras 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

ET SI VOUS PASSIEZ À LA VITESSE SUPÉRIEURE ?

Je vous révèle aussi comment il est possible de diviser par 4 le temps de production de votre projet, et pour une fraction du prix seulement !

Un développeur freelance externalisé pour lancez votre idée et votre entreprise pour 1/4 du prix

Dans ce contexte, réfléchir à intégrer un développeur freelance offshore dans sa stratégie de développement devrait s'imposer. Même une entreprise experte ...
Read More

Développeur web : comment recruter des profils rares

Les entreprises en ligne ont besoin de développeurs talentueux pour créer des expériences clients exceptionnelles qui dépassent la concurrence. Cependant, trouver et embaucher un développeur web de haute qualité peut être difficile, coûteux et long. Actuellement, il y a des dizaines de milliers de développeurs web disponibles à l’embauche, mais la performance de ces développeurs...
Read More

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

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