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