Empieza por acá

1

Mi primera línea de código

Fundamentos de Programación

2

¿Qué es HTML/CSS/JS?

3

JavaScript no es Java

4

Primeros pasos en el navegador con alert

5

HTML, CSS, JavaScript de verdad

6

Los apuntes de Freddy en PDF

Primer proyecto: Peso en otro planeta

7

Peso en otro planeta

8

Obteniendo datos del usuario

9

Flujo y condicionales

Segundo proyecto: Dibujando con Canvas

10

Cómo funcionan Window y Document

11

El DOM: nuestro lugar de trabajo en la web

12

Dibujando en el DOM

13

Qué son las Funciones en JavaScript

14

Ciclos while y for en JavaScript

15

Eventos y Formularios en HTML y JavaScript

16

Detectar eventos del teclado con JavaScript

17

Dibujar en canvas con las flechas del teclado

Tercer proyecto: Villa platzi

18

Funciones matemáticas y números aleatorios en JavaScript

19

Uso y carga de imágenes en Canvas

Cuarto proyecto: Pakimanes

20

División, módulo y residuo en JavaScript

21

Clases y Arrays en JavaScript

Quinto proyecto: Cajero automático

22

Diagrama de Flujo del Cajero Automático

23

Implementación del Cajero Automático

Sexto proyecto: Cliente/Servidor

24

Modelo Cliente/Servidor

25

Primer servidor web con express

Programación de Hardware y Electrónica con Arduino

26

¿Cómo funciona un circuito electrónico?

27

¿Cómo programar un Arduino?

28

Programación de circuitos con C, Arduino y Sketch

29

Cómo programar un Arduino con Javascript y Node

30

Construye un Robot con JavaScript

31

Robot para riego de plantas en Arduino, Javascript y Node

Materiales de apoyo

32

Las mejores notas de los estudiantes

33

¿Cuál lenguaje de programación aprender primero?

34

La Web con Visión Profesional

Contenido Bonus

35

Qué son tablas de verdad y compuertas lógicas

Recap Curso Gratis de Programación Básica

36

Recap Programación básica

37

Recap Programación básica ENG

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Programación de circuitos con C, Arduino y Sketch

28/37
Recursos

En este ejemplo veremos cómo funciona la creación de un circuito con Arduino y protoboard.

Arduino es un circuito especial programable. Se programa en Sketch, que es una derivación del lenguaje C.

Partes del circuito:

  • Puerto USB: Por aquí entra el poder por USB con 12V, conectando un puerto USB desde el PC al ARDUINO.
  • Puertos de salida digital: emiten señal de 5v o nada (0v).
  • Analógicas in: son entradas análogas, permiten recibir electricidad desde el circuito.
    Tiene puertos de 5V (Envía energía a todo el circuito que se quiera crear en el protoboard) y GND (por donde llega la energía desde la perspectiva negativa).
  • Chips: contiene la memoria RAM, el disco duro y el procesador (CPU). Aquí es donde se sube el código en C que se va a programar desde el entorno de desarrollo de Arduino.
  • Protoboard: tablero donde se colocan todos los componentes electrónicos que conformarán el circuito a programar.
  • LEDs: son diodos emisores de luz. En los leds la patita más corta va al polo negativo y la más larga al positivo. Hay un detalle importante y es que los leds se pueden quemar si se llega a mandar demasiado voltaje, por lo que se recurre a una resistencia.

En el IDE de Arduino hay dos funciones en C:

  • Setup: lo que inicia cuando arranca el circuito, puertos variables
  • Loop: lo que va a ocurrir cada vez que el circuito haga un loop o ciclo.

La extensión .ino es la extensión de archivos de código en sketch.

Contribución creada por: Ernesto Alvarado

Aportes 331

Preguntas 51

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

🐱‍💻 Reforzó lo aprendido anteriormente.

int bombillo = 13;
int espera = 500;

void setup(){
  pinMode(bombillo, OUTPUT);
}

void loop(){
  digitalWrite(bombillo, HIGH);
  delay(espera * 2);
  digitalWrite(bombillo, LOW);
  delay(espera);
}

Es lo mismo del video anterior, quizá deberían solo dejar uno de los 2

No es necesario tener los componentes ni la el Arduino para poder practicar, que esta sesión no sea de solo ver.

Si se registran aquí
https://www.tinkercad.com/circuits

Pueden realizar practicas interactuando con las herramientas sin que sean físicas. Así mismo, hay un editor que simula tener el programa de Arduino instalado en el computador que les permite programar el Arduino.

Un pequeño aporte, no solo es poner una resistencia, es saber que resistencia, ya que dependiendo del valor de voltaje que necesitamos sobre x elemento así sera el valor de la resistencia, no es lo mismo una resistencia de 120Ω a una 320Ω o 930Ω. Y para esto podemos usar la ley de Ohm.

Acá está el simulador gratuito para que practiquen lo que van viendo: https://www.tinkercad.com/

Correcion minuto 14:28. 500 milisegundos no son un segundo. Un segundo son 1000 milisegundos.

Ejecución!

Asi se ve una protoboard por dentro. espero les ayude a enteder un poco mejor su funcionamiento.

Hola, para los que aún preguntan donde pueden conseguir un simulador, https://www.tinkercad.com es perfecto!

Anotación: Como estudiante de ingeniería Electrónica, los jumpers si bien son buen apoyo, realmente para proyectos que requieran muchas conexiones, los jumpers solo enredan más las cosas, si os gusta la electrónica esto no tiene porque preocuparos, pero tened en cuenta que una vez que comprueben que su circuito funciona con jumpers, es recomendable que lo hagan ordenado usando cables como los que explica el profesor Freddy para que el circuito sea más entendible y visible.

Otro dato importante a considerar es que las resistencias se manejan por un código de colores, es decir:

Dependiendo el color de las bandas es la resistencia que puede llegar a tener su led, en caso de sobrepasar la resistencia derivado al color de las bandas puede que nunca encienda su led, les anexo un Link donde viene mas detallado, espero y les sirva.

Saludos.

En los puertos analogos se puede recibir electricidad para realizar alguna acción en comparación de los puertos digitales que solo dejan pasar energía o no.

Arduino utiliza el lenguaje de programación sketch el cual es una variante de C, C es uno de los primeros lenguajes de programación y uno de los mas versátiles y rápidos.

5v es la salida de voltaje del Arduino, GND es la salida de voltaje negativo del arduino ya que la energía es un ciclo.

Las resistencias son piezas que a través de un proceso químico bajan la intensidad a la corriente eléctrica, estas funcionan en cualquier dirección, no tienen un positivo ni un negativo.

La razón por la que el lenguaje se llama sketch y no C es porque ya tiene funciones preparadas para programar Arduino como la función pinMode(pin a encender, recive_o_envia_electricidad);.

Las variables declaradas por fuera de la funciones son variables globales, es decir están disponibles en todo momento para el código, si están dentro de una función estas solo estarán disponibles dentro de la función.

Arduino UNO solo permite 32 kilobytes de programa.

Aquí esta mi semáforo.

Aquí esta mi código. Quise que el amarillo parpadeara varias veces como un semáforo real.

<code>
int red = 13;
int yellow = 8;
int green = 7;

int time = 800;

void setup()
{
  pinMode(red, OUTPUT);
  pinMode(yellow, OUTPUT);
  pinMode(green, OUTPUT);
}

void loop()
{
  digitalWrite(red, HIGH);
  digitalWrite(yellow, LOW);
  digitalWrite(green, LOW);
  delay(time);
  digitalWrite(red, LOW);
  digitalWrite(yellow, HIGH);
  digitalWrite(green, LOW);
  delay(time);
  digitalWrite(red, LOW);
  digitalWrite(yellow, LOW);
  digitalWrite(green, LOW);
  delay(time-200);
  digitalWrite(red, LOW);
  digitalWrite(yellow, HIGH);
  digitalWrite(green, LOW);
  delay(time-200);
  digitalWrite(red, LOW);
  digitalWrite(yellow, LOW);
  digitalWrite(green, LOW);
  delay(time-200);
  digitalWrite(red, LOW);
  digitalWrite(yellow, HIGH);
  digitalWrite(green, LOW);
  delay(time);
  digitalWrite(red, LOW);
  digitalWrite(yellow, LOW);
  digitalWrite(green, HIGH);
  delay(time);
}

Yo estoy usando el simulador Tinkercad, también tiene un editor de código similar al del IDE.
https://www.tinkercad.com/

eres un gran profesor , apenas tenga dinero me pagare platzi incluso lo recomendare.

Muy buena explicación. Aquí dejo mi código con comentarios que pueden ser útiles:

int bombillo = 13; // identificamos al LED por el puerto en el que se ubica (puerto 13)
int espera = 500; // con esto se esperará 500 milisegundos

void setup() // con este arranca el ciclo
{
  pinMode(bombillo, OUTPUT); // con esto se prenderá nuestro LED, y que enviará energía gracias al parámetro OUTPUT.
}

void loop() // esto es lo que ocurre en cada ciclo
{
  digitalWrite(bombillo, HIGH); // le pasamos toda la energía al LED para que se ilumine
  delay(espera * 2); // esperamos 500 milisegundos (espera) multiplicado por 2, lo que sería igual a 1000 milisegundos.
  digitalWrite(bombillo, LOW); // no le pasamos nada de energía, por lo que el LED se apaga
  delay(espera); // espera 500 milisegundos y el ciclo se repite TODO el tiempo
}
// la función digitalWrite pasa TODO o NADA de energía a través de HIGH y LOW.```

A primera vista lo veo muy apasionante y sencillo, obvio que la cosa se complica dependiendo que quieres hacer con el arduino, pero ya de primera me calenté la cabeza con el proyecto, hasta ya me hice la idea de hacer un proyecto para automatizar ciertos procesos en casa jajaja!!!

Buen dia.
En el minuto 5:44 Freddy dice “En la 14 coloco el negativo y en la 16 el positivo.” En realidad hizo la conexion al reves, en el 14 coloco el positivo y en el 16 coloco el negativo.

TINKERCAD tiene varios tutoriales/proyectos que puedes ver en su web al mismo tiempo que aprendes

esto hicimos en la clase pasada ya o soy yo nomas

Pensé que serían más costosos en Colombia pero cuestan menos de 20mil pesos y el beneficio que obtienes que es increíble para ese precio.

TOMEN TODO MI DINERO!!!

ME DESCARGUE EL ARDUINO PERO COMO SE SI FUNCIONA SI NO TENGO UN LEDS…
´CUAL ES EL SIMULADOR??

Increíble cómo funciona todo esto. Recordé mis clases de Arquitectura de Computadoras. 😄

El mejor simulador que encontré después de todas las sugerencias fué
https://www.tinkercad.com/

Estupendo!! 😄

Listo!!!

int bombillo = 12;
int espera = 500; //(500 milisegundos --> 1 segundo)

void setup()
{
  pinMode(bombillo, OUTPUT);
}

void loop()
{
  digitalWrite(bombillo, HIGH);
  delay(espera*2);
  digitalWrite(bombillo, LOW);
  delay(espera/2);
}```

¿Quinientos ms es un segundo?
Es medio segundo.

Creo que se repitió el contenido del video anterior en este 🤔

¡Genial!

Bonita, clara y sencilla clase.

me salio a la prefeccion

![](

int amarillo =13;
int azul = 12;
int rojo = 11;
int blanco = 10;
int naranja = 9;
int yellow = 8;
int blue = 7;
int milisegundos = 400;

void setup()
{
  pinMode(amarillo, OUTPUT);
  pinMode(azul, OUTPUT);
  pinMode(rojo, OUTPUT);
  pinMode(blanco, OUTPUT);
  pinMode(naranja, OUTPUT);
  pinMode(blue, OUTPUT);
  pinMode(yellow, OUTPUT);
}

void loop()
{
	digitalWrite(amarillo, HIGH);
	digitalWrite(azul, LOW);
	digitalWrite(rojo, HIGH);
	digitalWrite(blanco, LOW);
 	digitalWrite(naranja, HIGH);
 	digitalWrite(yellow, LOW);
  	digitalWrite(blue, HIGH);
   
  delay(milisegundos);
  	
 	digitalWrite(amarillo, LOW);
	digitalWrite(azul, HIGH);
	digitalWrite(rojo, LOW);
	digitalWrite(blanco, HIGH);
 	digitalWrite(naranja, LOW);
 	digitalWrite(yellow, HIGH);
    digitalWrite(blue, LOW);
  	delay(milisegundos);
  
  delay(milisegundos * 2);
  
 	digitalWrite(amarillo, HIGH);
	digitalWrite(azul, LOW);
	digitalWrite(rojo, LOW);
	digitalWrite(blanco, LOW);
 	digitalWrite(naranja, LOW);
 	digitalWrite(yellow, LOW);
    digitalWrite(blue, HIGH);
  	
  delay(milisegundos);  
}```

muy bueno

la verdad Freddy es un excelente profesor en el area de la tecnologia

Una pregunta, en el video anterior a este Freddy agrega un cable rojo(positivo) que sale del puerto de 5v, pero en este solo usa el negativo y funciona de igual manera. No entiendo muy bien entonces el porque del positivo?

Vamos por mas

![](

int rojo = 13;
int azul = 12;
int naranja = 11;
int verde = 10;
int blanco = 9;
int amarillo = 8;


int milisegundos = 200;

void setup()
{
  pinMode(rojo, OUTPUT);
  pinMode(azul, OUTPUT);
  pinMode(naranja, OUTPUT);
  pinMode(verde, OUTPUT);
  pinMode(blanco, OUTPUT);
  pinMode(amarillo, OUTPUT);
}

void loop()
{
  digitalWrite(rojo, HIGH);
  digitalWrite(azul, LOW);
  digitalWrite(naranja, LOW);
  digitalWrite(verde, LOW);
  digitalWrite(blanco, LOW);
  digitalWrite(amarillo, LOW);
  
 delay(milisegundos);
  
  digitalWrite(azul, HIGH);
  digitalWrite(rojo, LOW);
  digitalWrite(naranja, LOW);
  digitalWrite(verde, LOW);
  digitalWrite(blanco, LOW);
  digitalWrite(amarillo, LOW);
 
 delay(milisegundos);
  
  digitalWrite(naranja, HIGH);
  digitalWrite(azul, LOW);
  digitalWrite(rojo, LOW);
  digitalWrite(verde, LOW);
  digitalWrite(blanco, LOW);
  digitalWrite(amarillo, LOW);
  
 delay(milisegundos);
  
  digitalWrite(verde, HIGH);
  digitalWrite(azul, LOW);
  digitalWrite(rojo, LOW);
  digitalWrite(naranja, LOW);
  digitalWrite(blanco, LOW);
  digitalWrite(amarillo, LOW);
  
 delay(milisegundos);
  
  digitalWrite(blanco, HIGH);
  digitalWrite(azul, LOW);
  digitalWrite(rojo, LOW);
  digitalWrite(verde, LOW);
  digitalWrite(naranja, LOW);
  digitalWrite(amarillo, LOW);
  
   delay(milisegundos);
  
  digitalWrite(amarillo, HIGH);
  digitalWrite(azul, LOW);
  digitalWrite(rojo, LOW);
  digitalWrite(verde, LOW);
  digitalWrite(blanco, LOW);
  digitalWrite(naranja, LOW);
  
  delay(milisegundos);
}

¿donde puedo conseguir las calcomanías (stickers) de la laptop de freddy?

A primera vista lo veo muy apasionante y sencillo, obvio que la cosa se complica dependiendo que quieres hacer con el arduino, pero ya de primera me calenté la cabeza con el proyecto, hasta ya me hice la idea de hacer un proyecto para automatizar ciertos procesos en casa jajaja!!!

Entiendo que existe una ley de Ohm V = I*R

¿Cómo se calcula el valor de la resistencia para un led dado el voltaje del arduino (5V si no me equivoco) ?

les recomiendo TINKERCAD para simular el arduino es muy fácil.

buena explicacion y practica

Hice el codigo para un semaforo basico ampliando lo visto en clase

int rojo = 12;
int amarillo = 11;
int verde = 8;

void setup()
{
pinMode(rojo, OUTPUT);
pinMode(amarillo, OUTPUT);
pinMode(verde, OUTPUT);
}

void loop()
{
digitalWrite(rojo, HIGH);
delay(4000);
digitalWrite(rojo, LOW);
delay(500);
digitalWrite(amarillo, HIGH);
delay(4000);
digitalWrite(amarillo, LOW);
delay(500);
digitalWrite(verde, HIGH);
delay(4000);
digitalWrite(verde, LOW);
delay(500);
}

Ya me hice un semáforo pequeñito que cambia cada 4 segundos 😄
int verde=13;
int amarillo=12;
int rojo = 11;
int milisegundos = 4000;

void setup()
{
pinMode(verde, OUTPUT);
pinMode(amarillo, OUTPUT);
pinMode(rojo, OUTPUT);
}

void loop()
{
digitalWrite(verde,HIGH);

delay(milisegundos);
digitalWrite(verde, LOW);
digitalWrite(amarillo,HIGH);

delay(milisegundos);

digitalWrite(amarillo,LOW);
digitalWrite(rojo,HIGH);

delay(milisegundos);

digitalWrite(rojo,LOW);
}

¿Por qué poner cableslo más cortos posibles y ordenados?
Pues 1.- es una buena práctica, así como veíamos en las clases anteriores, pero aplicada a la electrónica.
2.-Reduce interferencias electromagnéticas y consumo de energía.

En este tipo de aplicaciones no se aprecia este fenómeno, pero sí en otros que tienen que ver con telecomunicaciones, electrónica de potencia y control de procesos.

Me encantan los cursos de Platzi, me gusta como explica @freddier ! animos Freddy que Dios te de larga vida para que sigas enseñando.!

Genial! No me interesaba mucho por la electrónica anteriormente pero esta clase me provocó curiosidad

¡Hola!
Comparto mi trabajo de clase (un poco distinto pero funciona), lo hice con el emulador de TinkerCard.

void setup()
{
  pinMode(13, OUTPUT);
  pinMode(12, OUTPUT);
  pinMode(11, OUTPUT);
  
}

void loop()
{
  digitalWrite(13, HIGH);
  delay(1000); // Wait for 1000 millisecond(s)
  digitalWrite(13, LOW);
  delay(1000); // Wait for 1000 millisecond(s)
  
  digitalWrite(12, HIGH);
  delay(500); // Wait for 1000 millisecond(s)
  digitalWrite(12, LOW);
  delay(500); // Wait for 1000 millisecond(s)
  
  digitalWrite(11, HIGH);
  delay(1500); // Wait for 1000 millisecond(s)
  digitalWrite(11, LOW);
  delay(1500); // Wait for 1000 millisecond(s)
}

¿puede ser que el microchip de audrino sea una microcontrolador y no un microprocesador? ¿porque?

Thanks Freddy

para los que somos manuales creo que si nos toca comprar el arduino

Se vuelve interesante la programación con arduino

Que bueno que ya tengo mi arduino

Simulador: Aquí

Usualmente, los LED en la “cabeza” tienen una pequeña muesca. Esa muesca es el lado negativo (por si tienen las paticas iguales)

![](

int verde = 13;
int azul = 12;
int amarillo = 11;
int rojo = 10;



void setup()
{
  pinMode(13, OUTPUT);
  pinMode(12, OUTPUT);
  pinMode(11, OUTPUT);
  pinMode(10., OUTPUT);
}

void loop()
{
  digitalWrite(verde, HIGH);
  delay(200); 
  digitalWrite(verde, LOW);
  delay(200);
  digitalWrite(azul, HIGH);
  delay(100);
  digitalWrite(azul, LOW);
  delay(100);
  digitalWrite(amarillo, HIGH);
  delay(500);
  digitalWrite(amarillo, LOW);
  delay(500);
  digitalWrite(rojo, HIGH);
  delay(10);
  digitalWrite(rojo, LOW);
  delay(10);
}```

https://simulide.blogspot.com/
Aqui pueden descargar el simulador para la PC.

**Excelente! **

Yo opté por simularlo con Proteus 8 y el IDE de Arduino, les comparto el video que me ayudó a montar todo y cargar el archivo con el código a la placa: https://www.youtube.com/watch?v=kWjPiFNrXMc

Como estudiante de ingeniería Electrónica, los jumpers si bien son buen apoyo, realmente para proyectos que requieran muchas conexiones

mi aporte

Pueden encontrar la tarjeta UNO hasta en $5.00 dólares ($100.00 pesos Mexicanos), es una copia pero funciona muy bien, hay marca Steren, y si quieres una original, su cajita es muy bonita, pero todos funcionan bien.

Les dejo la simulacion que hice en linea ya que no contaba con el Arduino. Quedo genial

Estoy pensando en invertir en un Arduino, veo que se pueden hacer cosas muy interesantes, igual y me tomo un curso entero para ello

Vi que en el Tinkercad que hay un monton de dispositivos que se le puede conectar al ardduino. Esto es increible. Un pequeño juego de luces:


Mientras estés usando tinkercard puedes prescindir de los componentes físicos (arduino, protoboard, leds etc), como del IDE de arduino no tienes que preocuparte por bajar el software de arduino (cabe aclarar que si tienes equipos físicos tampoco es necesario descargarte el IDE, puedes construir tu código en la página de IDE arduino creando usuario y contraseña). Dentro en tinkercard puedes construir tus líneas de código en la pestaña de CODE justo al lado de la pestaña que dice Start Simulation

Sobre la explicación del funcionamiento del circuito, aquí una animación:

🧠Yo hice este circuito, cuando los leds rojo y azul están apagados, el azul está prendido y viceversa


Éste es el semáforo, fue un ejercicio que aprendí hace poco:

int stop = 1000;
  
void setup()
{
  pinMode(13, OUTPUT);
  pinMode(12, OUTPUT);
  pinMode(11, OUTPUT);
}

void loop()
{
  digitalWrite(13, HIGH);
  digitalWrite(11, LOW);
  digitalWrite(12,LOW);
  delay(stop); // Wait for 1000 millisecond(s)
  digitalWrite(13, LOW);
 
  
  digitalWrite(12, HIGH);
  digitalWrite(13, LOW);
  digitalWrite(11, LOW);
  delay(stop); // Wait for 1000 millisecond(s)
  digitalWrite(12, LOW);
 
  
  digitalWrite(11, HIGH);
  digitalWrite(13, LOW);
  digitalWrite(12, LOW);
  delay(stop);
  digitalWrite(11, LOW);
  
}
int amarillo = 13;
 // este es el led amarillo
int espera = 500;
void setup (){
  pinMode(amarillo,OUTPUT);
}
void loop(){
  digitalWrite(amarillo,HIGH);
  delay(espera * 2);
  digitalWrite(amarillo, LOW);
   delay(espera);
}

wow, esto es muy interesante, paso mi practica con el emulador
https://www.tinkercad.com/things/9GjGbNJcYN9-grand-duup/editel?tenant=circuits

Y CAPTURA POR SI NO SE VE BIEN DONDE SE CONECTA

Mi trabajo:

Creo que ahora entiendo cómo están configuradas las luces de Navidad. 🤯

este fue facil.

oye oye, despaaacio cerebrito…

500 mili segundos es un segundo dice, se equivoco!!

Mil gracias por volver a explicar más detenidamente el video anterior. Ahora me queda más claro ^^

Excelente, seguimos aprendiendo.

no soy muy experto en electronica y lo entendi al 100%.

500 milisegundos son medio segundo, 1000 milisegundos son un segundo.

Súper!

No lo hagan en casa… :v

Aquí despertando nuevas pasiones, grande Freddy!!

![](

Listo!

Todavia no compre la plaqueta, pero esta es mi prueba desde un simulador