1
00:00:00,300 --> 00:00:01,000
(ding!)

2
00:00:01,000 --> 00:00:03,475
Bonjour!
Bienvenue dans un tutoriel vidéo

3
00:00:03,480 --> 00:00:05,400
à propos de quelque chose lié à p5 appelé

4
00:00:05,900 --> 00:00:07,260
p5-manager

5
00:00:07,720 --> 00:00:11,260
p5-manager est par Chian Hau You

6
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

7
00:00:14,720 --> 00:00:17,000
Je ne suis pas un expert

8
00:00:17,000 --> 00:00:20,160
Je ne peux retirer aucun crédit pour cette chose merveilleuse appelée p5-manager

9
00:00:20,560 --> 00:00:22,560
Mais j'en ai entendu parler et je l'utilisais en classe l'autre jour

10
00:00:22,720 --> 00:00:25,340
ça m'a beaucoup aidé alors j'ai voulu en faire une vidéo

11
00:00:25,340 --> 00:00:27,340
pour que d'autres personnes puissent le connaître

12
00:00:28,940 --> 00:00:30,940
Qu'est ce que p5-manager ?

13
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

14
00:00:34,580 --> 00:00:36,180
Disons que je veux faire un nouveau sketch

15
00:00:36,180 --> 00:00:39,000
Je vais sur p5js.org
- c'est une bonne technique, ça -

16
00:00:39,020 --> 00:00:41,020
puis je vais sur "Download" (Télécharger)

17
00:00:41,120 --> 00:00:43,880
après je suis la : "Hmm, lequel je dois télécharger?"

18
00:00:44,080 --> 00:00:46,400
"Je vais télécharger la version complète",
et je clique dessus

19
00:00:47,040 --> 00:00:51,920
ça télécharge quelque chose, et regardez,
voici à quel point je suis ridiculement horrible

20
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...

21
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

22
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

23
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.

24
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 -

25
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

26
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

27
00:01:21,200 --> 00:01:23,880
Vous n'avez pas vraiment besoin de savoir ce qu'est Node

28
00:01:23,880 --> 00:01:25,560
Vous avez besoin d'installer Node pour utiliser ceci

29
00:01:25,720 --> 00:01:31,200
Vous pouvez aller sur nodejs.org / installer Node et après vous pourrez utiliser ceci

30
00:01:31,440 --> 00:01:36,280
Node viens avec quelque chose appelé npm
- Node Package Manager (Gestion de Paquet Node) -

31
00:01:36,640 --> 00:01:39,120
C'est un moyen de gérer les packages que vous voulez utiliser avec Node

32
00:01:40,680 --> 00:01:45,720
et, pourquoi est-ce pertinent, parce que p5-manager est un package Node

33
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

34
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

35
00:01:58,760 --> 00:02:00,160
p5-manager

36
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

37
00:02:05,840 --> 00:02:11,320
Ce que je veux lancer est nmp (Node Package Manager) install (je veux installer quelque chose)

38
00:02:11,320 --> 00:02:12,400
tiret g

39
00:02:12,720 --> 00:02:16,280
tiret g est un détail important mais pas si important pour nous pour le moment

40
00:02:16,280 --> 00:02:18,040
ça veux dire que je veux installer ça de manière globale

41
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

42
00:02:22,040 --> 00:02:24,320
n'importe où sur mon ordinateur à partir de maintenant

43
00:02:24,600 --> 00:02:26,600
p5-manager est... à moi maintenant

44
00:02:27,200 --> 00:02:29,200
Je peux prendre ça

45
00:02:29,840 --> 00:02:31,840
et je peux le copier

46
00:02:33,040 --> 00:02:36,720
et je peux aller ici et je vais juste le coller
- j'aurai pu le taper -

47
00:02:36,840 --> 00:02:38,840
ça peut me donner une erreur !

48
00:02:38,840 --> 00:02:40,440
ça peut me donner une erreur
ça peut vous arriver

49
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 -

50
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

51
00:02:50,160 --> 00:02:51,720
(roulements de tambour)

52
00:02:53,360 --> 00:02:55,360
Allez ! Installe toi !

53
00:02:58,040 --> 00:03:00,040
Regardez, on a l'erreur !

54
00:03:02,040 --> 00:03:05,560
Alors, qu'est-ce que l'erreur?
L'erreur est "Permission refusée"

55
00:03:06,360 --> 00:03:10,880
C'est parce qu'on veut l'installer de manière globale

56
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

57
00:03:16,080 --> 00:03:20,000
où seuls les administrateurs - peu importe qui ils sont, ça peut être vous -

58
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

59
00:03:25,200 --> 00:03:26,440
où vous devez avoir la permission d'accès

60
00:03:26,800 --> 00:03:30,520
Il y a un moyen d'obtenir la permission de faire ça

61
00:03:31,760 --> 00:03:34,760
Le moyen de faire ça avec le terminal est en écrivant "sudo"

62
00:03:34,760 --> 00:03:38,800
qui veut dire "Super Utilisateur DO (fait)"

63
00:03:38,840 --> 00:03:49,040
Super Utilisateur DO npm install tiret g p5-manager

64
00:03:49,520 --> 00:03:52,080
et la... ho, il me demande mon mot de passe

65
00:03:53,680 --> 00:03:55,680
je crois que je connais le mot de passe

66
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

67
00:04:02,240 --> 00:04:05,840
Je l'ai entré, je vais lancer la commande sudo pour vous encore une fois

68
00:04:05,840 --> 00:04:09,040
avec le bon mot de passe pour que vous puissiez voir

69
00:04:09,280 --> 00:04:14,680
(roulement de tambour)

70
00:04:15,920 --> 00:04:17,920
(ta da !!)

71
00:04:18,240 --> 00:04:20,240
Ok, il semblerait que ça ait fonctionné

72
00:04:20,520 --> 00:04:22,520
Donc maintenant

73
00:04:22,840 --> 00:04:27,840
J'ai installé pour toujours p5-manager avec Node

74
00:04:28,520 --> 00:04:32,240
Il y a plein de chose que vous pouvez faire avec p5-manager

75
00:04:32,840 --> 00:04:36,800
et je vous encourage
(peut-être que je reviendrai la dessus si c'est intéressant)

76
00:04:36,880 --> 00:04:39,680
Je vous vous montrer la manière la plus simple de l'utiliser

77
00:04:39,720 --> 00:04:43,520
p5-manager va en fait vous permettre de créer une collection de sketchs

78
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

79
00:04:53,000 --> 00:04:55,000
Vous devriez... vous pouvez suivre ces instructions pour ça

80
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

81
00:05:02,480 --> 00:05:07,000
Pour moi, qui ne fait que des exemples que je place à différents endroits,

82
00:05:07,000 --> 00:05:09,800
c'est plus des projets seul qu'une collection

83
00:05:13,160 --> 00:05:15,160
Maintenant que j'ai installer ce package,

84
00:05:15,160 --> 00:05:17,840
je peux juste écrire p5 n'importe quand dans mon terminal

85
00:05:18,880 --> 00:05:23,320
et ça va répondre:
"Hey, vous avez installé p5-manager version 0.3.2"

86
00:05:23,960 --> 00:05:27,960
Mais quand je veux lancer une commande précise

87
00:05:28,000 --> 00:05:30,000
comme p5 generate

88
00:05:30,200 --> 00:05:32,200
ça va générer un projet

89
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

90
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

91
00:05:41,840 --> 00:05:44,880
Pour faire court, vous pouvez juste taper
"p5 g tiret b"

92
00:05:45,000 --> 00:05:48,160
mais je vais utiliser la manière longue parce que c'est un tutoriel vidéo

93
00:05:48,520 --> 00:05:50,520
tiret tirer bundle

94
00:05:51,000 --> 00:05:55,840
et "codingtrain" sera le nom de mon projet

95
00:05:55,840 --> 00:05:58,120
je vais appuyer sur entrer

96
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

97
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

98
00:06:09,840 --> 00:06:13,680
ce n'est pas là où je veux mettre mon projet "codingtrain"

99
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

100
00:06:18,240 --> 00:06:21,920
Je peux taper "cd Documents/" parce que je veux travailler dans "Documents"

101
00:06:22,160 --> 00:06:26,760
et je peux créer un dossier appelé "p5_projects" qui existe déjà

102
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

103
00:06:32,000 --> 00:06:33,480
une fois de plus

104
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

105
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

106
00:06:43,040 --> 00:06:46,160
J'ai maintenant un dosser appelé "codingtrain"

107
00:06:46,600 --> 00:06:50,480
qui est un projet avec le fichier html, le fichier sketch.js

108
00:06:50,760 --> 00:06:52,760
Oups! je l'ai ouvert par accident

109
00:06:53,240 --> 00:06:57,040
Et il y a le dossier bibliothèques avec la bibliothèque p5

110
00:06:59,200 --> 00:07:01,200
Voilà comment créer un projet p5 seul

111
00:07:01,440 --> 00:07:04,680
Je peux faire ça à chaque fois maintenant, je vais le faire dans mes prochaines vidéos

112
00:07:04,680 --> 00:07:06,560
Je peux travailler de cette façon

113
00:07:07,440 --> 00:07:11,880
Et j'aurai à chaque fois la version la plus récente de la bibliothèque p5

114
00:07:11,880 --> 00:07:14,320
Je vous encourage à explorer les collections

115
00:07:16,720 --> 00:07:18,720
Les collections...

116
00:07:19,480 --> 00:07:23,440
Cette fonctionnalité vous permet de faire cette belle petite page web

117
00:07:23,440 --> 00:07:25,000
ça le fait automatiquement avec tous vos projets.

118
00:07:25,320 --> 00:07:28,320
Ok! Merci d'avoir regardé cette vidéo à propos de p5-manager

119
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

120
00:07:31,800 --> 00:07:35,160
où vous pourriez me voir utiliser p5-manager
Merci beaucoup !