0:00:00.920,0:00:03.360
¡Hola! Bienvenidos a un video tutorial...

0:00:03.360,0:00:07.060
...sobre una algo relacionado con P5 llamado "P5-Manager".

0:00:07.200,0:00:10.300
Ahora, P5-Manager fue creado por Chiun Hau You.

0:00:10.300,0:00:12.520
Gracias por crear esta maravillosa herramienta,

0:00:12.520,0:00:15.080
espero no le moleste que haga un video al respecto.

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

0:00:19.940,0:00:20.440


0:00:20.440,0:00:23.320
Pero supe de ella y pude utilizarla en clases el otro día y verdaderamente me ayudó

0:00:23.320,0:00:25.960
así que quería hacer un video para que otras personas pudieran aprender al respecto

0:00:26.380,0:00:28.805
(...)

0:00:28.805,0:00:30.700
Entonces, ¿Qué es P5-Manager?

0:00:30.700,0:00:34.140
Seguramente ya se habrán dado cuenta de que una de las cosas que siempre hago (es un muy mal hábito)

0:00:34.320,0:00:37.135
cuando quiero crear un sketch nuevo

0:00:37.135,0:00:40.045
voy a p5.org, luego voy a Download

0:00:41.060,0:00:43.920
entonces digo: "oh, ¿cual descargo?"

0:00:43.920,0:00:47.100
"ok, voy a descargar p5.js complete" y hago clic ahí,

0:00:47.100,0:00:49.480
descargo el archivo y luego lo busco,

0:00:49.480,0:00:52.400
(pueden ver lo ridículamente horrible que soy)

0:00:52.400,0:00:52.900


0:00:52.900,0:00:57.300
¡he hecho esto 9 veces, es la novena vez que lo hago, lo mismo!

0:00:57.300,0:01:00.380
Y luego simplemente lo abro

0:01:00.380,0:01:03.280
y encuentro una carpeta con un ejemplo vacío

0:01:03.280,0:01:06.300
y le cambio el nombre o lo copio en otra parte y ese es mi "nuevo sketch"

0:01:06.380,0:01:08.260
Este no es un buen flujo de trabajo.

0:01:08.480,0:01:11.200
P5-Manager es una herramienta basada en líneas de comando

0:01:11.280,0:01:13.080
que puedes ejecutar desde líneas de comando.

0:01:13.080,0:01:17.020
¿Qué es una línea de comando? Bueno, la hemos utilizado en algunos videos

0:01:17.020,0:01:21.160
Está construido sobre algo llamado Node y tengo otro video sobre qué es Node, dejaré un link.

0:01:21.200,0:01:22.995
No es necesario saber qué es Node

0:01:22.995,0:01:26.055
pero sí necesitas instalar Node para utilizar esto.

0:01:26.055,0:01:29.195
Entonces vas a nodejs.org, instalas Node

0:01:29.195,0:01:32.015
y entonces puedes usarla.

0:01:32.020,0:01:34.580
Node incluye algo llamado NPM que significa

0:01:34.580,0:01:37.140
Node Package Manager (administrador de paquetes de node)

0:01:37.140,0:01:40.060
que es una forma de administrar los paquetes que quieras utilizar con Node, y

0:01:40.380,0:01:42.320
¿Por qué esto es relevante?

0:01:42.320,0:01:45.860
Porque P5-Manager es un paquete de Node

0:01:46.520,0:01:50.420
Node es un entorno de programación del lado del servidor en JavaScript

0:01:50.420,0:01:53.060
Hay mucho que decir con respecto a las posibilidades que ofrece

0:01:53.060,0:01:55.440
pero realmente no haremos nada con node directamente.

0:01:55.440,0:01:58.020
Simplemente tenemos la suerte de que alguien se dio la molestia

0:01:58.020,0:02:01.495
de hacer algo con Node llamado P5-Manager. Entonces, si instalo Node

0:02:01.495,0:02:04.515
lo siguiente que puedo hacer es ir acá

0:02:04.515,0:02:07.465
y puedo correr este comando. Lo que quiero decir es:

0:02:07.500,0:02:10.085
"npm" (Node Package Manager),

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

0:02:16.660,0:02:20.340
porque quiere decir instalar de forma global, lo que significa que no es parte de un proyecto individual,

0:02:20.340,0:02:23.740
es algo que quiero utilizar siempre de ahora en adelante en mi computadora.

0:02:23.900,0:02:26.120
P5-Manager es lo mío.

0:02:26.700,0:02:29.080
Entonces, puedo tomar esto

0:02:29.700,0:02:32.340
y puedo copiarlo

0:02:32.520,0:02:38.300
luego ir acá y simplemente voy a pegarlo (pude haberlo escrito)

0:02:38.580,0:02:41.680
Es posible que me arroje un error, puede ocurrirte a ti también.

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

0:02:53.160,0:02:54.160


0:02:54.540,0:02:55.540


0:02:58.760,0:03:00.020
¡Tenemos el error!

0:03:01.580,0:03:03.980
Entonces, ¿cuál es el error?

0:03:04.100,0:03:06.360
El error es "permiso denegado"

0:03:06.360,0:03:10.840
y esto tiene que ver con el hecho de que queremos instalarlo de forma global

0:03:10.840,0:03:11.340


0:03:11.480,0:03:16.160
Sí queremos instalarlo de forma global tenemos que acceder a las profundidades de la computadora,

0:03:16.160,0:03:21.840
donde solo el administrador, quien sea, quizá eres tú (....) tiene permiso para acceder.

0:03:21.840,0:03:22.340


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

0:03:26.900,0:03:28.320
Entonces, hay una forma

0:03:28.320,0:03:28.820


0:03:29.280,0:03:31.800
para tener el permiso para hacerlo

0:03:31.805,0:03:35.160
y la forma de hacerlo es escribiendo "sudo" en el terminal

0:03:35.300,0:03:38.820
que significa "Super User DO"

0:03:38.820,0:03:49.600
"sudo npm install -g p5-manager"

0:03:49.600,0:03:53.320
y ahora pedirá la contraseña,

0:03:53.440,0:03:55.980
(creo que sé mi contraseña :S )

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

0:04:06.240,0:04:06.740


0:04:18.700,0:04:21.420
De acuerdo, eso parece haber salido bien.

0:04:22.180,0:04:25.440
Ahora tengo instalado -de aquí y para siempre-

0:04:25.440,0:04:27.820
el P5-Manager

0:04:28.160,0:04:31.520
Entonces, hay varias cosas que se pueden hacer con él (...)

0:04:32.560,0:04:33.060
(...)

0:04:33.620,0:04:37.260
volveremos a acá si es interesante,

0:04:37.260,0:04:39.940
pero quiero mostrarles la forma más simple de utilizarlo

0:04:39.940,0:04:43.020
P5-Manager te permite crear una colección de sketches

0:04:43.100,0:04:45.680
y puedes subirlas a un servidor,

0:04:45.680,0:04:48.580
y puedes utilizarlas como una pequeña página web

0:04:48.840,0:04:52.680
con una tabla de contenidos con todas las cosas que hiciste

0:04:52.720,0:04:55.000
Puedes seguir estas instrucciones para eso.

0:04:55.000,0:04:58.060
(voy a bajar)

0:04:58.060,0:05:02.060
Lo que voy a hacer es crear un proyecto Standalone

0:05:02.060,0:05:03.000


0:05:03.000,0:05:06.860
En mi caso, hago ejemplos y los pongo en diferentes lugares.

0:05:06.860,0:05:09.960
Es una colección de proyectos y luego standalones individuales.

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

0:05:18.640,0:05:23.960
y me va a decir "tienes instalado P5 versión 0.3.2"

0:05:23.960,0:05:24.460


0:05:24.460,0:05:29.920
Pero cuando quiera correr un comando específico de P5 como "p5 generate",

0:05:30.020,0:05:34.800
éste creará un proyecto y luego tengo que darle algunos parámetros específicos

0:05:34.980,0:05:37.480
sobre qué clase de proyecto quiero generar.

0:05:37.600,0:05:40.800
Entonces, lo que quiero hacer es generar un "bundle" con un nombre en particular.

0:05:40.800,0:05:41.300


0:05:41.300,0:05:44.900
Y para acortar puedes simplemente escribir "p5 g -b"

0:05:44.900,0:05:47.900
pero lo haré de forma literal para este video-tutorial.

0:05:47.900,0:05:54.480
"p5 generate --bundle" y "codingtrain" como nombre de mi proyecto

0:05:55.000,0:05:58.040
y presionaré enter

0:05:59.220,0:06:05.920
Ahora que funcionó me di cuenta de que hice algo bastante terrible. Cuando abres el terminal por primera vez (en Mac)

0:06:06.300,0:06:10.200
éste inicia en el directorio raíz de la computadora.

0:06:10.460,0:06:13.740
y probablemente no es el lugar en el que quiero instalar mi proyecto codingtrain,

0:06:13.740,0:06:19.140
así que (esto está un poco fuera de nuestro tema), puedo cambiar de carpeta

0:06:19.240,0:06:22.120
"cd Documents/" porque lo que de verdad quiero es estar en la carpeta documentos,

0:06:22.120,0:06:22.620


0:06:22.620,0:06:26.540
y puedo crear una carpeta llamada "p5 projects", que ya existe ahí,

0:06:26.540,0:06:27.200


0:06:27.200,0:06:35.180
y ahora "cd p5_projects/" y puedo correr el comando una vez más para que funcione bien.

0:06:36.040,0:06:41.420
Pueden ver que creó esos proyectos, puedo volver al Finder, voy a p5 projects

0:06:41.520,0:06:42.020


0:06:42.020,0:06:43.320
y vean lo que tengo:

0:06:43.320,0:06:47.940
Tengo esta carpeta llamada "codingtrain" que en verdad es solo un proyecto

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

0:06:57.180,0:07:00.620
Entonces, así es como se crea un proyecto P5 individual.

0:07:00.800,0:07:04.080
Puedo hacer esto cada vez que quiera de ahora en adelante, en mis futuros videos.

0:07:04.080,0:07:04.580


0:07:04.620,0:07:06.940
y puedo editar y trabajar en ellos de esta forma

0:07:07.500,0:07:12.220
y siempre tendré la versión más actualizada de la librería P5

0:07:12.220,0:07:12.720


0:07:12.720,0:07:18.400
y los invito a explorar, también, la colección (.......)

0:07:18.400,0:07:18.860


0:07:18.860,0:07:20.635


0:07:20.640,0:07:23.780
(...)

0:07:25.260,0:07:28.960
Entonces, gracias por ver este video sobre P5-Manager

0:07:28.960,0:07:29.460


0:07:29.460,0:07:34.520
Espero haya sido de ayuda. Espero verlos en un futuro video o quizá ustedes me vean usar el P5-Manager.

0:07:34.520,0:07:36.620
¡Muchas gracias !