Name: Amazonの価格を追跡するアプリを構築する (Build An App To Track Amazon's Prices)
Uploaded: 2021-01-14T10:22:04.000Z
Duration: 19 min 44 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

現在進行形

I am super excited for this project because we're gonna be building an Amazon price checker which will automatically e mail you any time.

Any product you want goes below a certain price.

So you tell it what products you want, what price she wanted to be below.

And I will email you as soon as the price drops below that price point.

The set up and I'm gonna show you how to do it starting now.

And my job is to simplify the web for you so you can start building your dream project quicker.

And if that sounds interesting, make sure you subscribe to the channel for more videos just like this one.

As always, I have visual studio code opened to a completely blank folder so we can get started from scratch.

And we're gonna be using no to create a simple job script application that we can run.

So we could just set this up by typing at 10 p.m. On it and Haiti enter.

And if we just hit, enter a bunch of times, don't give us all the default values.

And as you can see, we now have a packaged out Jason which contains all the different dependencies for our project.

But we haven't added any dependencies yet, so it's actually add the dependencies we're gonna need and for our application, what we need to do is first, we need to go to the Amazon website and find the price.

So we need to do some form of Web scraping.

We also need to go and send out an email.

So we need a library for handling an email and then lastly, we just need the library to handle environment variables because our E mail service is gonna have an A p i ke that we need to send it.

So to install those, we can type N p m I.

And the very first thing that we need to install is gonna be called Nightmare and Nightmare will essentially allow us to actually do the Web scraping from amazon dot com.

It will actually go to amazon dot com and give us back all of the HTML which we can parse and do what we want with.

And the great thing about nightmare is that actually works for websites that are rendered using front and frameworks For JavaScript and amazon dot com is one of those websites.

It actually is rendered on the front end.

So we need to make sure we use nightmare or some other part, sir, that'll handle that situation.

Next, we need to worry about our email on.

We're gonna be using centigrade for our email so we can say at send grid slash male.

And this is a library that send grid has that allows us to really easily send and receive e mails.

And all we're gonna be worrying about is sending e mails and this one we can enter to install those.

It'll take just a little bit of time to install these and then the show instead of our Node Modules folder, and I'll be back when that finishes.

And that just finished downloading everything for us.

Now we have one more library we need to install.

This is going to be called dot he envy, and this just allows us to set up environment variables using a dot N V file.

And inside of here is where we're gonna put our A p i ke that we get from send grid for sending her emails.

We're gonna do that towards the end of the video because right now, we actually need to set up and work on actually parsing the HTML from amazon dot com.

So was just really quickly create a file.

Where is gonna call this part, sir dot Js And this is going to be the file that actually checks the price on Amazon and does all the parson and e mailing for us.

And the very first thing we need to do is actually find out what element we want to get from the HT Mohan Amazon.

So I just have a simple Amazon pricing listed over here for a one terabyte solid state drive and we see right here this is the element we want to get.

We need to figure out some way to select to that price and a really easy way to do that is to just right click hit, inspect, and from here were actually able to look at the exact HTML code from the page, and all we need to do is click this little tool up here, which allows us to select an element inside of Paige.

And as you can see, when we hover over this, it is the actual element we want.

This is the price we click on it to select it.

And then over here, you see, we have this span with the I d of price block our price, and you see, it has a string $169.99.

We need to actually make sure we keep in mind this identify because this is gonna be the i d.

That actually gives us this piece of information when we set up and use nightmare.

So I'm just gonna copy this over just so we have this inside of our application to work with and I just pasted in a string at the top of our page for now.

And now that we have that out of the way, let's just maximize this screen.

So we have our entire visual studio code to work with, and the very first thing we need to do is just set up a basic function for checking the price.

We're gonna make this an a sink function because we're gonna do some asynchronous code in here so we can say basic function.

We just want to call it check Price and then inside of here, we're actually going to check the price of our element using nightmare.

So the first thing we need to do to get working with nightmare is to actually require nightmare.

We could just say constant nightmare is going to be equal to require and we want to require nightmare.

And this is actually just returning to us a function.

So we could just call that function by putting extra parentheses at the end.

And this is going to be our nightmare object.

We can pass in configuration values here if we need to, but in our case, all the defaults are just fine.

So now that we have that set up, we could just come in here and say nightmare dot go to and what this allows us to do is go to some euro.

So if we go back to our Amazon example, we can copy over this euro.

Let's just make sure we paste this in here.

And what we want to do is we're gonna remove all of the extra information after the path.

As you can see, the final path is this B 07 bien.

Everything here afterwards is stuff we don't need, so it's actually just remove all of this.

This is just tracking information that Amazon uses to keep track of everything.

So we don't actually that we just need this single girl here, which we could just paste inside of here.

So now what we're doing is we're telling Nightmare to go to this euro and actually download the information from the page.

Once it's downloaded from the page, we can use what's called dot wait, and this dot Wait, command essentially allows us to wait until some element is rendered on the page.

This is the part that allows nightmare to work with something like react because react.

What will happen is that we'll get the HTML and the HTML is gonna be completely blank once the page loads and then the Java script will run.

So we want to do is we just want to wait till our price block Our price is showing up.

And if you remember right, that was an I d.

In our case, we're waiting for the element with the i d of this I d price block our price.

And once that shows up, we know our page has loaded and the price we want is on the page, so we can actually run some code on the document in order to get this price.

And to do that, we need the use what's called evaluate.

So the evaluate takes just a single function.

So there's a function inside of here, and this function allows you to essentially right javascript as if you were on the front end of that application.

So we have access to the document, for example, we could just say document get element by I d.

And we can get an element with that price block our price, I d.

Now, what we've done is we've gone to that euro.

We've waited until our element is shown on the page, and then we're evaluating some code to say give me the element with that, I d And we just want to get the text inside of it and so will say in our text.

So now what we're doing is we're actually getting the text from inside of that element on the HTML page on Amazon's Web site at this euro.

And now that we know that that's all that we want to do, we could just use dot end and this is actually going to end this segment of code right here.

And it returns us a variable, which is what we evaluated right here.

So we can just say we want to get the price String is what we'll call our variable.

We need to make sure that we actually await nightmare because this is all a synchronous.

So we need to make sure we put a weight here, so that is actually waiting that code and then running everything over here and I'm just gonna tidy this code up just a little bit, so it's easier to read.

We're gonna move this all the way to the end here, just line everything up.

And now that we have a press string, we can move on to actually parsing the string into a particular price.

So if we could just come down here, we can say we want a price number which is going to be equal to our price string.

字幕リスト動画再生

Amazonの価格を追跡するアプリを構築する (Build An App To Track Amazon's Prices)

essentially

access

environment

field