9.21: p5-manager - p5.js Tutorial

¡Hola! Bienvenidos a un video tutorial...

...sobre una algo relacionado con P5 llamado "P5-Manager".

Ahora, P5-Manager fue creado por Chiun Hau You.

Gracias por crear esta maravillosa herramienta,

espero no le moleste que haga un video al respecto.

No soy un experto en el tema y no recibo crédito de ninguna tipo por esta maravillosa herramienta llamada P5-Manager

Pero supe de ella y pude utilizarla en clases el otro día y verdaderamente me ayudó

así que quería hacer un video para que otras personas pudieran aprender al respecto

(...)

Entonces, ¿Qué es P5-Manager?

Seguramente ya se habrán dado cuenta de que una de las cosas que siempre hago (es un muy mal hábito)

cuando quiero crear un sketch nuevo

voy a p5.org, luego voy a Download

entonces digo: "oh, ¿cual descargo?"

"ok, voy a descargar p5.js complete" y hago clic ahí,

descargo el archivo y luego lo busco,

(pueden ver lo ridículamente horrible que soy)

¡he hecho esto 9 veces, es la novena vez que lo hago, lo mismo!

Y luego simplemente lo abro

y encuentro una carpeta con un ejemplo vacío

y le cambio el nombre o lo copio en otra parte y ese es mi "nuevo sketch"

Este no es un buen flujo de trabajo.

P5-Manager es una herramienta basada en líneas de comando

que puedes ejecutar desde líneas de comando.

¿Qué es una línea de comando? Bueno, la hemos utilizado en algunos videos

Está construido sobre algo llamado Node y tengo otro video sobre qué es Node, dejaré un link.

No es necesario saber qué es Node

pero sí necesitas instalar Node para utilizar esto.

Entonces vas a nodejs.org, instalas Node

y entonces puedes usarla.

Node incluye algo llamado NPM que significa

Node Package Manager (administrador de paquetes de node)

que es una forma de administrar los paquetes que quieras utilizar con Node, y

¿Por qué esto es relevante?

Porque P5-Manager es un paquete de Node

Node es un entorno de programación del lado del servidor en JavaScript

Hay mucho que decir con respecto a las posibilidades que ofrece

pero realmente no haremos nada con node directamente.

Simplemente tenemos la suerte de que alguien se dio la molestia

de hacer algo con Node llamado P5-Manager. Entonces, si instalo Node

lo siguiente que puedo hacer es ir acá

y puedo correr este comando. Lo que quiero decir es:

"npm" (Node Package Manager),

"install" porque quiero instalar algo, "-g" que es un detalle importante (aunque quizá no tanto por ahora)

porque quiere decir instalar de forma global, lo que significa que no es parte de un proyecto individual,

es algo que quiero utilizar siempre de ahora en adelante en mi computadora.

P5-Manager es lo mío.

Entonces, puedo tomar esto

y puedo copiarlo

luego ir acá y simplemente voy a pegarlo (pude haberlo escrito)

Es posible que me arroje un error, puede ocurrirte a ti también.

Esperemos que no ocurra, aunque puede ocurrir. De todas formas, sería bueno para que vean qué ocurre y como repararlo

¡Tenemos el error!

Entonces, ¿cuál es el error?

El error es "permiso denegado"

y esto tiene que ver con el hecho de que queremos instalarlo de forma global

Sí queremos instalarlo de forma global tenemos que acceder a las profundidades de la computadora,

donde solo el administrador, quien sea, quizá eres tú (....) tiene permiso para acceder.

Debes acceder a las "entrañas" del sistema de archivos y todos esos lugares sofisticados que requieren permisos,

Entonces, hay una forma

para tener el permiso para hacerlo

y la forma de hacerlo es escribiendo "sudo" en el terminal

que significa "Super User DO"

"sudo npm install -g p5-manager"

y ahora pedirá la contraseña,

(creo que sé mi contraseña :S )

Perdón por eso, (...) recordé la contraseña y ahora utilizaré el comando sudo para puedan ver como funciona.

De acuerdo, eso parece haber salido bien.

Ahora tengo instalado -de aquí y para siempre-

el P5-Manager

Entonces, hay varias cosas que se pueden hacer con él (...)

(...)

volveremos a acá si es interesante,

pero quiero mostrarles la forma más simple de utilizarlo

P5-Manager te permite crear una colección de sketches

y puedes subirlas a un servidor,

y puedes utilizarlas como una pequeña página web

con una tabla de contenidos con todas las cosas que hiciste

Puedes seguir estas instrucciones para eso.

(voy a bajar)

Lo que voy a hacer es crear un proyecto Standalone

En mi caso, hago ejemplos y los pongo en diferentes lugares.

Es una colección de proyectos y luego standalones individuales.

Así que quiero hacer esto: (...) ahora que he instalado el paquete, puedo simplemente escribir P5 en la ventana del terminal

y me va a decir "tienes instalado P5 versión 0.3.2"

Pero cuando quiera correr un comando específico de P5 como "p5 generate",

éste creará un proyecto y luego tengo que darle algunos parámetros específicos

sobre qué clase de proyecto quiero generar.

Entonces, lo que quiero hacer es generar un "bundle" con un nombre en particular.

Y para acortar puedes simplemente escribir "p5 g -b"

pero lo haré de forma literal para este video-tutorial.

"p5 generate --bundle" y "codingtrain" como nombre de mi proyecto

y presionaré enter

Ahora que funcionó me di cuenta de que hice algo bastante terrible. Cuando abres el terminal por primera vez (en Mac)

éste inicia en el directorio raíz de la computadora.

y probablemente no es el lugar en el que quiero instalar mi proyecto codingtrain,

así que (esto está un poco fuera de nuestro tema), puedo cambiar de carpeta

"cd Documents/" porque lo que de verdad quiero es estar en la carpeta documentos,

y puedo crear una carpeta llamada "p5 projects", que ya existe ahí,

y ahora "cd p5_projects/" y puedo correr el comando una vez más para que funcione bien.

Pueden ver que creó esos proyectos, puedo volver al Finder, voy a p5 projects

y vean lo que tengo:

Tengo esta carpeta llamada "codingtrain" que en verdad es solo un proyecto

el que incluye un archivo HTML, un sketch.js (...) y la carpeta "libraries" con la librería P5.

Entonces, así es como se crea un proyecto P5 individual.

Puedo hacer esto cada vez que quiera de ahora en adelante, en mis futuros videos.

y puedo editar y trabajar en ellos de esta forma

y siempre tendré la versión más actualizada de la librería P5

y los invito a explorar, también, la colección (.......)

(...)

Entonces, gracias por ver este video sobre P5-Manager

Espero haya sido de ayuda. Espero verlos en un futuro video o quizá ustedes me vean usar el P5-Manager.

¡Muchas gracias !