Flying a Drone with React and Node.js! (100% JavaScript!) - PART 1

[@WesBos]

FOLKS! What do you think of this style of video where I record it as I figure it out?

[@frontendtesting]

I really enjoyed it, and the editing you did to streamline it together definitely pays off. Perfect mix of learning from your thought process but not being bored to tears by an overly slow pace. Great background music too!

[@ConquerJS]

This was really REALLY fun to watch, it was like a code adventure! And drones are so fun! You're on to something here.

[@nicken86]

It's a nice change. Nice blend of thoughts and pace!

[@MikeFieldenJr]

I really dig.

[@gitdsaistot]

love it. you're the man Wes

[@AshishVermaCS]

Websockets, react hooks, dgram etc dude 25mins video and you gave lot of useful things. Awesome 🤘

[@perc-ai]

this is why wes bos is the best web dev teacher online!!

[@the_westfran]

US and Canada only... that's sad :(

[@kaypakaipa8559]

thank god. im doing this asap

[@bitchlasagna4720]

@@kaypakaipa8559 absolute madlad

[@ExoMemphiz]

Just so you are aware, the NodeJS doc specifies the offset and length as variable parameters (As seen with the [square brackets]), meaning you don't even need to include them, thus no need for this "low-level" programming, as you call it. 6:52

[@e-r-c]

Drone purchased, code tested. I suggest everyone make sure to update and use the actual tello app before trying to code the drone :P I made the impulsive mistake of needing the emergency feature without updating the drone firmware first, and it is not supported in the shipped firmware. Thanks for the code and the ideas. Love the videos keep it up.

[@heyyy4987]

I would like to see same approach in nuxt and vue.

[@vegetableball]

I notice that there are two models: Tello and Tello EDU. Tello EDU is advertised as programmable drone. My question: Is Tello (no EDU) is also programmable? In this video, is this drone Tello or Tello EDU?

[@DunsDeeDowns]

Not the blackEDU this one is the more inexpensive white model -- The EDU costs $50 more, and ads suggest the main difference is that they (more easily?) expose the video stream and provide a Python SDK example. I don't know if its actually required to have EDU just to get to video stream, the SDK for this white model suggests it can be programmed, too.

[@RoganFPS]

In terms of hardware interacting with JS. I've been node-red for the past year to help run an entire manufacturing facility. What used to be done by SCADA systems are slowly but surely being taken over by JS and python!

[@kurusanyasuke2853]

Hello Wes, Thank’s for all your tutorial, I have question why you don’t use Redux in your « Sick Fits » course ? Thank’s a lot

[@favourgeorge2395]

For some reason, I can't seem to get my drone state reading from the specified port? Have been looking for answers...

[@maskman4821]

Sir, can we deploy backend to heroku and connects to tello drone through mobile phone browser ???

[@bishwajitnepali2996]

This was fun from the begining to end ! Loved it.

[@novailoveyou]

AWESOME 😍 really inspiring a real drone powered by Nodejs and JavaScript, just amazing

[@dawidkwiaton9504]

Hi, i want to make something like this but on sailing boat model. Are there any similar models to easy connect with node js?

[@timreed9722]

Love this video. I'm really interested in robotics and automation. I would love to see you create a basic flight control board program for a drone from scratch. Doesn't have to be anything amazing. I want to learn python eventually and maybe work with self-driving cars. Do more like this for sure!

[@jonbikaku6133]

Is it possible to get a live stream of the video to the app? I am thinking about doing some processing on the video that I get directly from the drone. Thanks!

[@qigao4750]

Love that background music.

[@iwutski]

April Showers - Proleter

[@DuneKraftwerk]

Can we turnon the drone remotely via JS or we still need to use the power button ?

[@abdullahtaweel3069]

@Wes bos Thank you man for all the tuts. I am doing the react for biggeners app but, it's show this issue to me './src/components/App.js Line 14: Typo in component lifecycle method declaration react/no-typos'

[@eyosaftbirhanu6313]

hey, I like the video, but when the drone took off, how did you specify that certain altitude or is it just working with the delay method?

[@Zeay]

What color theme/font is that? Looks amazing

[@celebropl]

THIS IS ABSOLUTELY INSPIRING

[@dev_apostle]

can you use this for any programmable drone?

[@JonasBostoen]

Awesome video covering lots of parts of the stack! very informative

[@radovansurlak7445]

Damn, this inspires me a lot, thank you for the video Wes! :)

[@juangut4531]

What's the exact model of this Drone?

[@hooseinsaeed]

actually, it's your js error display(extension) in your browser that caught my eyes. I will like to have it really.

[@ConquerJS]

When I first saw the Tello I laughed like "HA! THIS little thing...?" Looks like I'm getting one now ASAP.

[@saberpotatoboy4151]

Do you think this will work on the website “glitch”

[@Mateo47R]

Wix ad before a Wes Bos video. That is funny ;)

[@WesBos]

you ned a website, why not build it yourself?

[@Mateo47R]

@@WesBos just thought it should have been an ad for Level Up Tuts instead :)

[@Unknown.Maniac]

Amazing video. I can't believe that i'm a year late. Btw, what code editor/software were you on when you were coding. Just to specify, i'm using Visual Studio Code like you but i'm pretty sure you downloaded some extension i don't know about (maybe Javascript React). Any help is appreciated, thx

[@wepranaga]

interested in more javascript hardware hacking videos 😊😊

[@ko-Daegu]

Abdul Ghani Sane hardware hacking doesn’t get enough videos in youtupe

[@yogijs_404]

Really incredible 🤩✌🏻

[@coolpetz2803]

can we make big projects which are hardware related using javascript

[@jayb1425]

Awesome job! Super cool

[@4ndrej]

that IBM giveaway is USA/Canada (parts of) only.

[@gazisalahuddin8681]

I'm lov'n it, just flying now...thanks a lot for this awesome content

[@pauloviana2360]

what drone model?

[@ArielWiznia]

Amazing tutorial, thanks Wes!

[@kaypakaipa8559]

just found me weekend project...Dope stuff, thanks

[@ko-Daegu]

Can we do the same thing with other languages like • Python • java • C • Rust Don’t know JavaScript neither am I really into it

[@HermanWillems]

All system programming languages can do anything that other languages can do aswell. Higher languages are mostly a trade of between making developer effort easier, with the downside on many technical aspects. There is no silver bullit. Also to answer your question.. you can do it in all those languages yes.

[@pieter-jan1000]

Cool! Nice video!

[@gamingtv1206]

can upload a permanent function on the drone?

[@backstabba]

I missed the competition. Really tough deadlines for registration! Haha

[@icesentry]

Why would you use the waait pacakge? It's litterally one line

[@WesBos]

So I don't have to write that one line every time. Making it a package doesn't add any overhead

[@icesentry]

@@WesBos I understand, and for the purpose of this video it's fine, but this is why we have issues like left-pad and more recently the event-stream library. I love javascript, but the community seems to have no issue with dependencies list being a mile long even if half of those are basically simple one liner. I assumed this waait library offered some more feature, but it's literally one line and it surprised me. Anyways, your video was still nice to watch, it's just that particular thing that annoyed me

[@FrederickFIintstone]

Remarkable work as always.

[@SuperHamzamadrid]

that's awesome , i'm glad i found your channel . keep it up

[@isaacferreira7673]

Please, bring us more videos like that!

[@alvarobyrne]

wouldn't you use electron or nwjs?

[@WesBos]

that would be nice to package the whole thing up into an app!

[@alvarobyrne]

@@WesBos thanks

[@benjidaniel5595]

Hey Wes, your wes.io links don’t work

[@StealerSlain]

learned a lot, fantastic stuff

[@sonoftroy8572]

Man! That’s awesome 👏

[@maskman4821]

Sir, if I put this project on clould server like heroku / glitch, should we change the port from '192.168.10.1' to some like 'www.flydrone.com' ? or we can only control the drone through local connection (computer/mobile drone) ??? I don't have a drone, I want to know if we can controll the drone from internet, if it is working this way, I will get one !!!

[@karthikilangovan1]

Wonderful ! Just wonderful !!!

[@ramprasadsapkota1013]

What about other parts

[@snyderhaus]

BRB, BUYING A DRONE...

[@WesBos]

Sorry about that

[@5nickdm]

So this can be done with of the shelf drone? There is no custom IBM software on drone that you get from them?

[@WesBos]

@@5nickdm correct- nothing special here - I got mine on amazon

[@5nickdm]

@@WesBos Great, will buy one definitely. Great video btw.

[@gonzavalverde]

It would be cooler if it used TCP, right?

[@kaypakaipa8559]

would be way easier

[@aashuu9997]

Great work

[@mainawachira1828]

very cool project.going to buy one

[@dyachenkodmitry89]

Where can I get that SDK guide?

[@WesBos]

dl-cdn.ryzerobotics.com/downloads/tello/20180910/Tello SDK Documentation EN_1.3.pdf Ill add it to the github :)

[@damonwu9658]

This is AWESOME !!!!!!!!!!!!!!!

[@abdullahkhan2419]

it is neccesary to use tello drone? i have cf919 drone

[@domemvs]

If this was reddit I‘d give you gold!

[@Martin-4D]

That is awesome :D

[@fr3fou]

How'd you hide the vscode sidebar?

[@tomvito]

He is not using Visual Studio Code

[@fr3fou]

@@tomvito no? he is using vscode lol, he moved over from sublime ages ago wesbos.com/uses

[@tomvito]

@@fr3fou Don't you see it? The editor doesn't look a bit like VS Code. I guess in this particular video Wes uses Atom or so. In VS Code you only can collapse the sidebar. Then its buttons are still visible and clickable.

[@fr3fou]

@@tomvito take a look at 16:24 on the side, this is literally what vscode looks like

[@fr3fou]

or just take a look at the top left corner in his titlebar - it says "Code"

[@robelseyoum1583]

Amazing Wes

[@WillemAartVanDorpen]

Is that a genuine Eames 670 in the background? Noice!

[@WesBos]

Yep

[@edwardspresume]

This is so cool!

[@estengrove3350]

This has got to be the dopest video I've seen in a while. Would love to play around it with it...or attempt to lol.

[@codewithsub5083]

Great tutorial ☺️

[@alonsourena_]

Amazing!

[@TehSisb]

Amazing! MORE!

[@rayjenscode3501]

This is cool :D

[@NoobCoder]

This is so awesome.

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@trycatchlearn]

after reading the content i got crazd 'javascript Everyware'

[@vetrisuriya4702]

Amazing tut

[@benjaminao2008]

Excellent

[@ExplorerSpace]

cool.. me want to do that too.

[@michaelklim1561]

wes is cool, if you know what i mean.

[@arafays]

A wesbos video without the poop emoji is a deepfake video

[@letsmakeafurry]

javaScript: < 10 + 9 > 109 Ooopsiee Woopsie!

[@heyyy4987]

I love it. Tanks

[@iamikhan]

That's so much fun hacking with drones.

[@Gashdal]

damn this is a spicy meatball

[@access2emma]

Nice one

[@oscarrijpstra9022]

My advice for you is using objects instead of arrays.

[@jezriggs]

Damn. US / Canada only. That sucks.....

[@lancerino765]

SUBSCRIBED!!!!!

[@eugenemusebe4963]

Why not the rest of the world?

[@coolday5070]

many countries prohibit them as some sort of spying tech in addition to other crimes

[@coolday5070]

@Chris MN Love China but the language is hard to learn :)

[@bitchlasagna4720]

shipping cost

[@reddyashok9]

This is cool power of node js

[@JansherAquib]

US and Canada only 😔

[@loicgregoire3058]

The contest is for america only :/

[@aurelianspodarec2629]

Why?

[@SumanRoy.official]

I subbed

[@WesBos]

ya u did!

[@TheHeadlets]

What *can't* JavaScript do nowadays?

[@HermanWillems]

This ain't pure Javascript. Javascript must depend on a runtime. A runtime that runs java SCRIPT. It has a garbage collector. Javascript itself is not real-time at all. I bet there is tons of C code beneath to do all the REAL work.

[@ahahn928]

Run efficiently and quickly

[@harryscheuerle4871]

​@@HermanWillems I bet it runs on the engine it's said to run on!

[@nocturnalcook]

running it in java script easier than python

[@ousseynoudiagne2557]

I can't afford it. Because it is for US and Canada only!

[@pedro.zurita]

NodeBots

[@TheMegaMrMe]

I guess it does W...