(music)
>> What's up people, hope you're having a great Monday.
It's the start of the week.
What are you gonna do?
It's the start of the week, its all I can say.
I'm really excited about our project today.
My name is Michael Jolly.
I am the bald bearded builder
and we're gonna build some stuff today.
We're gonna write a little Vue.js app.
It's gonna be really stupid, nothing fancy about it.
Basically like some big buttons, build a Vue.js app,
put it in a Docker container,
push that Docker container to Azure
and then deploy that container to a Raspberry Pi.
But then we wanna set up the Raspberry Pi
to load chromium in full screen, incognito,
this the browser like local host 3000.
We wanna do the do, not do the don't.
We wanna do the do. Just code code code.
Yeah, let's do the code.
Let's get on over there.
See you over there.
What's up. Let's do the do.
Let me start off by saying this stream is sponsored today,
by Azure, they had this Raspberry Pi coding.
It's basically like learning IoT stuff in the cloud.
It's free. You learn code skills, which is pretty cool.
Go through it. It's a free learning thing,
and then you get registered for a free Raspberry Pi
which I can tell you I've got tons of them.
Let's do this voodoo that we do.
So let me show you what I've got so far.
I built a little Vue.js app.
It's not done at all.
That's what we're gonna run in the Pi.
And actually over here, see the little window right here.
It probably looks like there's nothing there
but I've got this little thing.
This little deal here,
it's a keyboard and mouse for the Raspberry Pi.
I can use this mouse if I need to.
So once we get this thing
it's supposed to be touch enabled.
Anyway, I've got that Raspberry Pi raring to go.
I've already installed the things
that would let it connect to the Azure IoT hub.
So I've already set up an IoT hub.
It was super easy to do.
I just create a resource group, hit add IoT hub,
go through the briham or row that it do.
Let's go build the app that should run on it.
You ready? I got VS code open.
Let's connect up our theme or extension
so you can change my VS code theme with the theme command.
I used the Vue CLI to create a project.
You can see it's got this hello world
garbage that it has by default.
I don't want any of that.
I've got a message component that I created
that's completely empty, I haven't done it yet.
What I'm thinking is we could do something
I mean, super simple.
I'm not that good of a developer.
I can't make anything complicated.
It's gotta be easy.
I'll tell you what I want when I really really want.
So tell us what you want, what you really really want.
I wanna, I wanna, I'm sorry.
Sorry about that, that was uncalled for.
What I'm thinking is the top little portion of that window
will have just an area for the message,
and then maybe have a button in the center
or maybe somewhere.
So I'm thinking you can just have like a little
refresh button, right?
Whenever you want a new message, you just press refresh,
it makes a call out to some kind of cloud API.
Okay, we'll need like another button over here
with pretend that's a gear.
Trust me a gear, something like that.
And when you click on the gear,
and then we'll stay that locally,
and then we'll when we hit this we'll say,
hey go give me a random message for this person.
Does that sound good?
All those in favor, say aye.
So let's say div app let's have another div,
because we built div city in VS code.
Let's add script, just some JavaScript please.
Let's be semantic in our HTML.
How about that? Instead of a div, let's make it an article.
Look at you fancy pants.
Then our message won't have an aside,
it'll have a main state.
Ooh, straight dot where are they,
dispatch this getTweet.
So we're gonna call out to state and say,
hey, look go get the next tweet.
And then if we do have your Twitter ID
and there's not a current tweet,
then we'll say you're a beautiful butterfly.
Perfect. We haven't styled this at all.
So we'll wanna come back and do that.
But otherwise that's done.
We didn't do controls, right?
This is not too bad so far.
And then this is gonna be an aside.
All right. So what happens if we do NPM?
Does that work?
That's gonna run, I think on 8080 or 3000.
Yeah, there we go. So we got two buttons now.
So let's change that look at view,
like let's just say article here, HTML body article.
I do want you to have a little margin at the bottom.
There you go. Perfect.
Okay, so now we get some tags in there,
that we can be all fancy about.
They don't do anything.
Refresh should be doing,
what's our problem here?
Let's start over. Why did that blow up?
Oh, I didn't have those methods yet.
I think message, we've got done.
It's getting those out of that.
Let me see,
We need to go call something here.
It's gonna call getTweet by default when you launch it.
So I think all this lift is coming up with the settings.
Let's do this. Let's say div,
and do it one more again.
I'm gonna take that out, which means I don't need this.
Okay, so I'm gonna have a separate control for settings
which means I'm done with this view.
So new file something.
What are we gonna dispatch?
we're gonna say set Twitter ID.
When we save that, we're gonna say, this dot editing
this will say edit.
Oh my, is that do the do?
That's a hard no champ.
Can I not register it?
Okay, settings.
If I click that, it opens up a text box with the Twitter ID.
There it is that's my ID.
Okay, so I'll plug that in.
Refresh one more again.
So I will go settings, enter the Twitter ID save it.
I didn't get anything back.
I think we're almost done.
Oh my, yeah. Yeah She, yeah she.
Settings, paste, save, it works.
It pulled it out of local storage
and automatically pulled the first tweet.
All right, so our app works like a champ.
Now I wanna add a dockerfile and it's using Vue.
So I'm gonna just steal the heck out of this for a second,
and then modify it for my needs.
So I think I want to NPM I express.
Okay so that building for production, bill done.
Perfect. Let me go over here and look at Docker
What do you got running over here Docker?
Publish. Yeah, Pixie good job.
Docker run, let's try it now.
Localhost, 8080.
Bam. That's it awesome.
So then I need to go remember my ID settings,
works like a champ or it's like a little champ, good boy.
Okay, so we've got a Docker container,
We've got that, let's call this target.
Okay, so tag that and now let me do Docker push.
So we're pushing it to Azure's container registry,
like a boss.
So if I go in there now, awesome view, go to the edge.
Our device should be down here, create a deployment.
Awesome, IoT. Next is that repository.
I can't remember if I'm doing this right
because it's been a long time since I did this.
It's like that slash awesome view.
So it tells me it's running that IoT edge
agent and hub on the Raspberry Pi.
It's just got a touch screen turned on,
and we're gonna run an app that shows
like any messages from awesome IO on it.
Like a random one.
Then we'll have a refresh button that we could press
to get like a new little friendly message.
Berry pseudo reboot.
You have lost your connection sir.
I'm gonna open Chromium on it and go to 8080.
Local. Its showing the hub is green.
So hopefully it'll start receiving messages to publish that.
Eh, eh, do it, do it, load it.
Oh my indeed it did. It load the browser
full screen incognito at localhost 8080.
So if we can get the Docker container running on the PI,
it'll be a kiosk so that part's done.
We just kind get it deployed there.
Let's do dash dash push,
to push results image into registry use dash dash push.
I think that's what I want.
Did I do it? Refresh. Linux arm, yes.
Let's see. Let's see.
Refresh 104.
It's been up for 39 seconds.
So it's running and it says
its port is forwarding 80 to, to 8080.
Look at this. Look at this Raspberry Pi.
What if I reload?
Yes. I wanna see, I wanna see it happen.
Settings, it's gonna provide me this.
What the heck?
Look at that. Awesome. BBB has done some great work.
Awesome, so we did, we did the do people.
We got that thing running on that Raspberry Pi over there.
I'm so stuck to how this turned out.
Thank you so much to everybody
for hanging out with me today.
Thanks to Azure for sponsoring today's stream.
It's always the best parts of my week
when I get to hang out with all of you,
peace out.