WEBVTT 00:00:00.300 --> 00:00:01.000 (ding!) 00:00:01.000 --> 00:00:03.475 Bonjour! Bienvenue dans un tutoriel vidéo 00:00:03.480 --> 00:00:05.400 à propos de quelque chose lié à p5 appelé 00:00:05.900 --> 00:00:07.260 p5-manager 00:00:07.720 --> 00:00:11.260 p5-manager est par Chian Hau You 00:00:11.260 --> 00:00:14.720 Merci pour avoir fait cet outil merveilleux J'espère que j'ai le droit de faire une vidéo à ce sujet 00:00:14.720 --> 00:00:17.000 Je ne suis pas un expert 00:00:17.000 --> 00:00:20.160 Je ne peux retirer aucun crédit pour cette chose merveilleuse appelée p5-manager 00:00:20.560 --> 00:00:22.560 Mais j'en ai entendu parler et je l'utilisais en classe l'autre jour 00:00:22.720 --> 00:00:25.340 ça m'a beaucoup aidé alors j'ai voulu en faire une vidéo 00:00:25.340 --> 00:00:27.340 pour que d'autres personnes puissent le connaître 00:00:28.940 --> 00:00:30.940 Qu'est ce que p5-manager ? 00:00:30.940 --> 00:00:34.100 Vous êtes peut-être conscient qu'une chose que je fait et qui est une très mauvaise habitude 00:00:34.580 --> 00:00:36.180 Disons que je veux faire un nouveau sketch 00:00:36.180 --> 00:00:39.000 Je vais sur p5js.org - c'est une bonne technique, ça - 00:00:39.020 --> 00:00:41.020 puis je vais sur "Download" (Télécharger) 00:00:41.120 --> 00:00:43.880 après je suis la : "Hmm, lequel je dois télécharger?" 00:00:44.080 --> 00:00:46.400 "Je vais télécharger la version complète", et je clique dessus 00:00:47.040 --> 00:00:51.920 ça télécharge quelque chose, et regardez, voici à quel point je suis ridiculement horrible 00:00:52.000 --> 00:00:55.580 Vous pouvez voir que je l'ai fait, c'est genre la 9e fois que je fais ça... 00:00:55.840 --> 00:01:01.120 La même chose ! Et après je l'ouvre, et je trouve quelque part à l'intérieur 00:01:01.320 --> 00:01:05.040 "Ho, il y a un exemple vide!" Et je le renomme , ou je le copie quelque part 00:01:05.040 --> 00:01:08.600 et c'est mon nouveau sketch sur lequel je vais travailler Ce n'est pas un bon workflow. 00:01:08.800 --> 00:01:13.480 p5-manager est un outil en ligne de commande - que vous pouvez exécuter en ligne de commande - 00:01:13.560 --> 00:01:15.560 Qu'est-ce que la ligne de commande? Vous savez, je l'utilise dans certaines vidéos 00:01:17.000 --> 00:01:21.200 p5-manager est construit à partir de Node et j'ai une autre vidéo (lien dans la description) sur ce qu'est Node 00:01:21.200 --> 00:01:23.880 Vous n'avez pas vraiment besoin de savoir ce qu'est Node 00:01:23.880 --> 00:01:25.560 Vous avez besoin d'installer Node pour utiliser ceci 00:01:25.720 --> 00:01:31.200 Vous pouvez aller sur nodejs.org / installer Node et après vous pourrez utiliser ceci 00:01:31.440 --> 00:01:36.280 Node viens avec quelque chose appelé npm - Node Package Manager (Gestion de Paquet Node) - 00:01:36.640 --> 00:01:39.120 C'est un moyen de gérer les packages que vous voulez utiliser avec Node 00:01:40.680 --> 00:01:45.720 et, pourquoi est-ce pertinent, parce que p5-manager est un package Node 00:01:46.880 --> 00:01:52.640 Node est un framework de programmation javascript coté serveur et il y a plein de chose à dire sur ce qu'on peut faire avec 00:01:52.640 --> 00:01:58.760 mais on ne va pas vraiment faire quelque chose avec Node, on va juste se servir de ce quelqu'un a déja fait 00:01:58.760 --> 00:02:00.160 p5-manager 00:02:00.520 --> 00:02:05.560 Donc, si Node est installé, la prochaine chose à faire est d'aller ici et lancer cette commande 00:02:05.840 --> 00:02:11.320 Ce que je veux lancer est nmp (Node Package Manager) install (je veux installer quelque chose) 00:02:11.320 --> 00:02:12.400 tiret g 00:02:12.720 --> 00:02:16.280 tiret g est un détail important mais pas si important pour nous pour le moment 00:02:16.280 --> 00:02:18.040 ça veux dire que je veux installer ça de manière globale 00:02:18.240 --> 00:02:22.040 ça ne fait pas parti d'un seul projet mais c'est quelque chose que je veux pouvoir utiliser 00:02:22.040 --> 00:02:24.320 n'importe où sur mon ordinateur à partir de maintenant 00:02:24.600 --> 00:02:26.600 p5-manager est... à moi maintenant 00:02:27.200 --> 00:02:29.200 Je peux prendre ça 00:02:29.840 --> 00:02:31.840 et je peux le copier 00:02:33.040 --> 00:02:36.720 et je peux aller ici et je vais juste le coller - j'aurai pu le taper - 00:02:36.840 --> 00:02:38.840 ça peut me donner une erreur ! 00:02:38.840 --> 00:02:40.440 ça peut me donner une erreur ça peut vous arriver 00:02:40.680 --> 00:02:42.880 On va espérer qu'il n'y en ai pas - mais il peut y en avoir une - 00:02:43.160 --> 00:02:47.760 En fait, ça serai bien si il y en a une, comme ça vous pourrez la voir et savoir comment la corriger 00:02:50.160 --> 00:02:51.720 (roulements de tambour) 00:02:53.360 --> 00:02:55.360 Allez ! Installe toi ! 00:02:58.040 --> 00:03:00.040 Regardez, on a l'erreur ! 00:03:02.040 --> 00:03:05.560 Alors, qu'est-ce que l'erreur? L'erreur est "Permission refusée" 00:03:06.360 --> 00:03:10.880 C'est parce qu'on veut l'installer de manière globale 00:03:11.480 --> 00:03:16.000 Si on l'installe de manière globale, ça veut dire qu'il doit aller dans les profondeurs de votre ordinateur 00:03:16.080 --> 00:03:20.000 où seuls les administrateurs - peu importe qui ils sont, ça peut être vous - 00:03:20.080 --> 00:03:24.920 Vous devez entrer dans le cœur des fichiers système et dans toutes sortes de lieux sophistiqués 00:03:25.200 --> 00:03:26.440 où vous devez avoir la permission d'accès 00:03:26.800 --> 00:03:30.520 Il y a un moyen d'obtenir la permission de faire ça 00:03:31.760 --> 00:03:34.760 Le moyen de faire ça avec le terminal est en écrivant "sudo" 00:03:34.760 --> 00:03:38.800 qui veut dire "Super Utilisateur DO (fait)" 00:03:38.840 --> 00:03:49.040 Super Utilisateur DO npm install tiret g p5-manager 00:03:49.520 --> 00:03:52.080 et la... ho, il me demande mon mot de passe 00:03:53.680 --> 00:03:55.680 je crois que je connais le mot de passe 00:03:57.320 --> 00:04:02.240 Désolé pour ça, heureusement vous regardez ça et j'ai juste réapparu et j'ai trouvé le mot de passe 00:04:02.240 --> 00:04:05.840 Je l'ai entré, je vais lancer la commande sudo pour vous encore une fois 00:04:05.840 --> 00:04:09.040 avec le bon mot de passe pour que vous puissiez voir 00:04:09.280 --> 00:04:14.680 (roulement de tambour) 00:04:15.920 --> 00:04:17.920 (ta da !!) 00:04:18.240 --> 00:04:20.240 Ok, il semblerait que ça ait fonctionné 00:04:20.520 --> 00:04:22.520 Donc maintenant 00:04:22.840 --> 00:04:27.840 J'ai installé pour toujours p5-manager avec Node 00:04:28.520 --> 00:04:32.240 Il y a plein de chose que vous pouvez faire avec p5-manager 00:04:32.840 --> 00:04:36.800 et je vous encourage (peut-être que je reviendrai la dessus si c'est intéressant) 00:04:36.880 --> 00:04:39.680 Je vous vous montrer la manière la plus simple de l'utiliser 00:04:39.720 --> 00:04:43.520 p5-manager va en fait vous permettre de créer une collection de sketchs 00:04:43.760 --> 00:04:52.040 et vous pouvez faire un serveur avec un page web avec un sommaire avec tous les sketchs faits 00:04:53.000 --> 00:04:55.000 Vous devriez... vous pouvez suivre ces instructions pour ça 00:04:55.160 --> 00:05:02.000 Moi, je vais scroller en bas et ce que je veux juste faire est générer un projet seul 00:05:02.480 --> 00:05:07.000 Pour moi, qui ne fait que des exemples que je place à différents endroits, 00:05:07.000 --> 00:05:09.800 c'est plus des projets seul qu'une collection 00:05:13.160 --> 00:05:15.160 Maintenant que j'ai installer ce package, 00:05:15.160 --> 00:05:17.840 je peux juste écrire p5 n'importe quand dans mon terminal 00:05:18.880 --> 00:05:23.320 et ça va répondre: "Hey, vous avez installé p5-manager version 0.3.2" 00:05:23.960 --> 00:05:27.960 Mais quand je veux lancer une commande précise 00:05:28.000 --> 00:05:30.000 comme p5 generate 00:05:30.200 --> 00:05:32.200 ça va générer un projet 00:05:32.520 --> 00:05:37.040 et je dois lui donner des arguments, des paramètres spécifiques sur quel type de projet je veux générer 00:05:37.320 --> 00:05:41.440 Ce que je veux faire, c'est générer un bundle (paquet) avec un nom spécifique 00:05:41.840 --> 00:05:44.880 Pour faire court, vous pouvez juste taper "p5 g tiret b" 00:05:45.000 --> 00:05:48.160 mais je vais utiliser la manière longue parce que c'est un tutoriel vidéo 00:05:48.520 --> 00:05:50.520 tiret tirer bundle 00:05:51.000 --> 00:05:55.840 et "codingtrain" sera le nom de mon projet 00:05:55.840 --> 00:05:58.120 je vais appuyer sur entrer 00:05:59.360 --> 00:06:01.960 Maintenant que ça a marché, je me rend compte que j'ai fait quelque chose de terrible 00:06:01.960 --> 00:06:09.600 Quand on ouvre un terminal - au moins sur un Mac, on arrive dans le répertoire racine de votre ordinateur 00:06:09.840 --> 00:06:13.680 ce n'est pas là où je veux mettre mon projet "codingtrain" 00:06:13.680 --> 00:06:18.120 Donc, c'est un peu en dehors du sujet mais vous pouvez changer de répertoire de travail 00:06:18.240 --> 00:06:21.920 Je peux taper "cd Documents/" parce que je veux travailler dans "Documents" 00:06:22.160 --> 00:06:26.760 et je peux créer un dossier appelé "p5_projects" qui existe déjà 00:06:27.040 --> 00:06:32.000 je peux taper "cd p5_projects/" et maintenant je vais retourner en arrière et lancer cette commande 00:06:32.000 --> 00:06:33.480 une fois de plus 00:06:35.160 --> 00:06:38.520 J'ai lancé la commande une fois de plus, vous pouvez voir qu'elle a crée ce projet 00:06:38.880 --> 00:06:42.680 Je peux retourner dans le Finder, aller dans p5_projects et regardez ce que l'on a 00:06:43.040 --> 00:06:46.160 J'ai maintenant un dosser appelé "codingtrain" 00:06:46.600 --> 00:06:50.480 qui est un projet avec le fichier html, le fichier sketch.js 00:06:50.760 --> 00:06:52.760 Oups! je l'ai ouvert par accident 00:06:53.240 --> 00:06:57.040 Et il y a le dossier bibliothèques avec la bibliothèque p5 00:06:59.200 --> 00:07:01.200 Voilà comment créer un projet p5 seul 00:07:01.440 --> 00:07:04.680 Je peux faire ça à chaque fois maintenant, je vais le faire dans mes prochaines vidéos 00:07:04.680 --> 00:07:06.560 Je peux travailler de cette façon 00:07:07.440 --> 00:07:11.880 Et j'aurai à chaque fois la version la plus récente de la bibliothèque p5 00:07:11.880 --> 00:07:14.320 Je vous encourage à explorer les collections 00:07:16.720 --> 00:07:18.720 Les collections... 00:07:19.480 --> 00:07:23.440 Cette fonctionnalité vous permet de faire cette belle petite page web 00:07:23.440 --> 00:07:25.000 ça le fait automatiquement avec tous vos projets. 00:07:25.320 --> 00:07:28.320 Ok! Merci d'avoir regardé cette vidéo à propos de p5-manager 00:07:28.400 --> 00:07:31.480 J'espère qu'elle aura été utile pour vous. Je vous verrez dans une prochaine vidéo 00:07:31.800 --> 00:07:35.160 où vous pourriez me voir utiliser p5-manager Merci beaucoup !