9.21: p5-manager - p5.js Tutorial

(ding!)

Bonjour!
Bienvenue dans un tutoriel vidéo

à propos de quelque chose lié à p5 appelé

p5-manager

p5-manager est par Chian Hau You

Merci pour avoir fait cet outil merveilleux
J'espère que j'ai le droit de faire une vidéo à ce sujet

Je ne suis pas un expert

Je ne peux retirer aucun crédit pour cette chose merveilleuse appelée p5-manager

Mais j'en ai entendu parler et je l'utilisais en classe l'autre jour

ça m'a beaucoup aidé alors j'ai voulu en faire une vidéo

pour que d'autres personnes puissent le connaître

Qu'est ce que p5-manager ?

Vous êtes peut-être conscient qu'une chose que je fait
et qui est une très mauvaise habitude

Disons que je veux faire un nouveau sketch

Je vais sur p5js.org
- c'est une bonne technique, ça -

puis je vais sur "Download" (Télécharger)

après je suis la : "Hmm, lequel je dois télécharger?"

"Je vais télécharger la version complète",
et je clique dessus

ça télécharge quelque chose, et regardez,
voici à quel point je suis ridiculement horrible

Vous pouvez voir que je l'ai fait,
c'est genre la 9e fois que je fais ça...

La même chose ! Et après je l'ouvre,
et je trouve quelque part à l'intérieur

"Ho, il y a un exemple vide!"
Et je le renomme , ou je le copie quelque part

et c'est mon nouveau sketch sur lequel je vais travailler
Ce n'est pas un bon workflow.

p5-manager est un outil en ligne de commande
- que vous pouvez exécuter en ligne de commande -

Qu'est-ce que la ligne de commande?
Vous savez, je l'utilise dans certaines vidéos

p5-manager est construit à partir de Node et j'ai une autre vidéo (lien dans la description) sur ce qu'est Node

Vous n'avez pas vraiment besoin de savoir ce qu'est Node

Vous avez besoin d'installer Node pour utiliser ceci

Vous pouvez aller sur nodejs.org / installer Node et après vous pourrez utiliser ceci

Node viens avec quelque chose appelé npm
- Node Package Manager (Gestion de Paquet Node) -

C'est un moyen de gérer les packages que vous voulez utiliser avec Node

et, pourquoi est-ce pertinent, parce que p5-manager est un package Node

Node est un framework de programmation javascript coté serveur et il y a plein de chose à dire sur ce qu'on peut faire avec

mais on ne va pas vraiment faire quelque chose avec Node, on va juste se servir de ce quelqu'un a déja fait

p5-manager

Donc, si Node est installé, la prochaine chose à faire est d'aller ici et lancer cette commande

Ce que je veux lancer est nmp (Node Package Manager) install (je veux installer quelque chose)

tiret g

tiret g est un détail important mais pas si important pour nous pour le moment

ça veux dire que je veux installer ça de manière globale

ça ne fait pas parti d'un seul projet mais c'est quelque chose que je veux pouvoir utiliser

n'importe où sur mon ordinateur à partir de maintenant

p5-manager est... à moi maintenant

Je peux prendre ça

et je peux le copier

et je peux aller ici et je vais juste le coller
- j'aurai pu le taper -

ça peut me donner une erreur !

ça peut me donner une erreur
ça peut vous arriver

On va espérer qu'il n'y en ai pas
- mais il peut y en avoir une -

En fait, ça serai bien si il y en a une, comme ça vous pourrez la voir et savoir comment la corriger

(roulements de tambour)

Allez ! Installe toi !

Regardez, on a l'erreur !

Alors, qu'est-ce que l'erreur?
L'erreur est "Permission refusée"

C'est parce qu'on veut l'installer de manière globale

Si on l'installe de manière globale, ça veut dire qu'il doit aller dans les profondeurs de votre ordinateur

où seuls les administrateurs - peu importe qui ils sont, ça peut être vous -

Vous devez entrer dans le cœur des fichiers système et dans toutes sortes de lieux sophistiqués

où vous devez avoir la permission d'accès

Il y a un moyen d'obtenir la permission de faire ça

Le moyen de faire ça avec le terminal est en écrivant "sudo"

qui veut dire "Super Utilisateur DO (fait)"

Super Utilisateur DO npm install tiret g p5-manager

et la... ho, il me demande mon mot de passe

je crois que je connais le mot de passe

Désolé pour ça, heureusement vous regardez ça et j'ai juste réapparu et j'ai trouvé le mot de passe

Je l'ai entré, je vais lancer la commande sudo pour vous encore une fois

avec le bon mot de passe pour que vous puissiez voir

(roulement de tambour)

(ta da !!)

Ok, il semblerait que ça ait fonctionné

Donc maintenant

J'ai installé pour toujours p5-manager avec Node

Il y a plein de chose que vous pouvez faire avec p5-manager

et je vous encourage
(peut-être que je reviendrai la dessus si c'est intéressant)

Je vous vous montrer la manière la plus simple de l'utiliser

p5-manager va en fait vous permettre de créer une collection de sketchs

et vous pouvez faire un serveur avec un page web avec un sommaire avec tous les sketchs faits

Vous devriez... vous pouvez suivre ces instructions pour ça

Moi, je vais scroller en bas et ce que je veux juste faire est générer un projet seul

Pour moi, qui ne fait que des exemples que je place à différents endroits,

c'est plus des projets seul qu'une collection

Maintenant que j'ai installer ce package,

je peux juste écrire p5 n'importe quand dans mon terminal

et ça va répondre:
"Hey, vous avez installé p5-manager version 0.3.2"

Mais quand je veux lancer une commande précise

comme p5 generate

ça va générer un projet

et je dois lui donner des arguments, des paramètres spécifiques sur quel type de projet je veux générer

Ce que je veux faire, c'est générer un bundle (paquet) avec un nom spécifique

Pour faire court, vous pouvez juste taper
"p5 g tiret b"

mais je vais utiliser la manière longue parce que c'est un tutoriel vidéo

tiret tirer bundle

et "codingtrain" sera le nom de mon projet

je vais appuyer sur entrer

Maintenant que ça a marché, je me rend compte que j'ai fait quelque chose de terrible

Quand on ouvre un terminal - au moins sur un Mac, on arrive dans le répertoire racine de votre ordinateur

ce n'est pas là où je veux mettre mon projet "codingtrain"

Donc, c'est un peu en dehors du sujet mais vous pouvez changer de répertoire de travail

Je peux taper "cd Documents/" parce que je veux travailler dans "Documents"

et je peux créer un dossier appelé "p5_projects" qui existe déjà

je peux taper "cd p5_projects/" et maintenant je vais retourner en arrière et lancer cette commande

une fois de plus

J'ai lancé la commande une fois de plus, vous pouvez voir qu'elle a crée ce projet

Je peux retourner dans le Finder, aller dans p5_projects et regardez ce que l'on a

J'ai maintenant un dosser appelé "codingtrain"

qui est un projet avec le fichier html, le fichier sketch.js

Oups! je l'ai ouvert par accident

Et il y a le dossier bibliothèques avec la bibliothèque p5

Voilà comment créer un projet p5 seul

Je peux faire ça à chaque fois maintenant, je vais le faire dans mes prochaines vidéos

Je peux travailler de cette façon

Et j'aurai à chaque fois la version la plus récente de la bibliothèque p5

Je vous encourage à explorer les collections

Les collections...

Cette fonctionnalité vous permet de faire cette belle petite page web

ça le fait automatiquement avec tous vos projets.

Ok! Merci d'avoir regardé cette vidéo à propos de p5-manager

J'espère qu'elle aura été utile pour vous. Je vous verrez dans une prochaine vidéo

où vous pourriez me voir utiliser p5-manager
Merci beaucoup !