You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -12,61 +12,83 @@ import Exercises from './_exercises.mdx';
12
12
13
13
---
14
14
15
-
Using browser tools for developers is crucial for understanding the structure of a particular page, but it's a manual task. Let's start building our first automation, a Python program which downloads HTML code of the product listing.
15
+
Using browser tools for developers is crucial for understanding the structure of a particular page, but it's a manual task. Let's start building our first automation, a JavaScript program which downloads HTML code of the product listing.
16
16
17
-
## Starting a Python project
17
+
## Starting a Node.js project
18
18
19
-
Before we start coding, we need to set up a Python project. Let's create new directory with a virtual environment. Inside the directory and with the environment activated, we'll install the HTTPX library:
19
+
Before we start coding, we need to set up a Node.js project. Let's create new directory and let's name it `product-scraper`. Inside the directory, we'll initialize new project:
20
20
21
21
```text
22
-
$ pip install httpx
22
+
$ npm init
23
+
This utility will walk you through creating a package.json file.
23
24
...
24
-
Successfully installed ... httpx-0.0.0
25
-
```
26
-
27
-
:::tip Installing packages
28
-
29
-
Being comfortable around Python project setup and installing packages is a prerequisite of this course, but if you wouldn't say no to a recap, we recommend the [Installing Packages](https://packaging.python.org/en/latest/tutorials/installing-packages/) tutorial from the official Python Packaging User Guide.
30
25
31
-
:::
26
+
Press ^C at any time to quit.
27
+
package name: (product-scraper)
28
+
version: (1.0.0)
29
+
description: Product scraper
30
+
entry point: (index.js)
31
+
test command:
32
+
git repository:
33
+
keywords:
34
+
author:
35
+
license: (ISC)
36
+
# highlight-next-line
37
+
type: (commonjs) module
38
+
About to write to /Users/.../product-scraper/package.json:
39
+
40
+
{
41
+
"name": "product-scraper",
42
+
"version": "1.0.0",
43
+
"description": "Product scraper",
44
+
"main": "index.js",
45
+
"scripts": {
46
+
"test": "echo \"Error: no test specified\" && exit 1"
47
+
},
48
+
"author": "",
49
+
"license": "ISC",
50
+
# highlight-next-line
51
+
"type": "module"
52
+
}
53
+
```
32
54
33
-
Now let's test that all works. Inside the project directory we'll create a new file called `main.py` with the following code:
55
+
The above creates a `package.json` file with configuration of our project. While most of the values are arbitrary, it's important that the project's type is set to `module`. Now let's test that all works. Inside the project directory we'll create a new file called `index.js` with the following code:
34
56
35
-
```py
36
-
importhttpx
57
+
```js
58
+
importprocessfrom'node:process';
37
59
38
-
print("OK")
60
+
console.log(`All is OK, ${process.argv[2]}`);
39
61
```
40
62
41
-
Running it as a Python program will verify that our setup is okay and we've installed HTTPX:
63
+
Running it as a Node.js program will verify that our setup is okay and we've correctly set the type to `module`. The program takes a single word as an argument and will address us with it, so let's pass it "mate", for example:
42
64
43
65
```text
44
-
$ python main.py
45
-
OK
66
+
$ node index.js mate
67
+
All is OK, mate
46
68
```
47
69
48
70
:::info Troubleshooting
49
71
50
-
If you see errors or for any other reason cannot run the code above, it means that your environment isn't set up correctly. We're sorry, but figuring out the issue is out of scope of this course.
72
+
If you see `ReferenceError: require is not defined in ES module scope, you can use import instead`, double check that in your `package.json` the type property is set to `module`.
73
+
74
+
If you see other errors or for any other reason cannot run the code above, it means that your environment isn't set up correctly. We're sorry, but figuring out the issue is out of scope of this course.
51
75
52
76
:::
53
77
54
78
## Downloading product listing
55
79
56
-
Now onto coding! Let's change our code so it downloads HTML of the product listing instead of printing `OK`. The [documentation of the HTTPX library](https://www.python-httpx.org/) provides us with examples how to use it. Inspired by those, our code will look like this:
57
-
58
-
```py
59
-
import httpx
80
+
Now onto coding! Let's change our code so it downloads HTML of the product listing instead of printing `All is OK`. The [documentation of the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) provides us with examples how to use it. Inspired by those, our code will look like this:
If we run the program now, it should print the downloaded HTML:
67
89
68
90
```text
69
-
$ python main.py
91
+
$ node index.js
70
92
<!doctype html>
71
93
<html class="no-js" lang="en">
72
94
<head>
@@ -80,15 +102,15 @@ $ python main.py
80
102
</html>
81
103
```
82
104
83
-
Running `httpx.get(url)`, we made a HTTP request and received a response. It's not particularly useful yet, but it's a good start of our scraper.
105
+
Running `await fetch(url)`, we made a HTTP request and received a response. It's not particularly useful yet, but it's a good start of our scraper.
84
106
85
107
:::tip Client and server, request and response
86
108
87
109
HTTP is a network protocol powering the internet. Understanding it well is an important foundation for successful scraping, but for this course, it's enough to know just the basic flow and terminology:
88
110
89
111
- HTTP is an exchange between two participants.
90
112
- The _client_ sends a _request_ to the _server_, which replies with a _response_.
91
-
- In our case, `main.py` is the client, and the technology running at `warehouse-theme-metal.myshopify.com` replies to our request as the server.
113
+
- In our case, `index.js` is the client, and the technology running at `warehouse-theme-metal.myshopify.com` replies to our request as the server.
92
114
93
115
:::
94
116
@@ -110,28 +132,30 @@ First, let's ask for trouble. We'll change the URL in our code to a page that do
We could check the value of `response.status_code` against a list of allowed numbers, but HTTPX already provides `response.raise_for_status()`, a method that analyzes the number and raises the `httpx.HTTPError` exception if our request wasn't successful:
135
+
We could check the value of `response.status` against a list of allowed numbers, but the Fetch API already provides `response.ok`, a property which returns `false` if our request wasn't successful:
httpx.HTTPStatusError: Client error '404 Not Found' for url 'https://warehouse-theme-metal.myshopify.com/does/not/exist'
134
-
For more information check: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404
151
+
$ node index.js
152
+
file:///Users/.../index.js:7
153
+
throw new Error(`HTTP ${response.status}`);
154
+
^
155
+
156
+
Error: HTTP 404
157
+
at file:///Users/.../index.js:7:9
158
+
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
135
159
```
136
160
137
161
Letting our program visibly crash on error is enough for our purposes. Now, let's return to our primary goal. In the next lesson, we'll be looking for a way to extract information about products from the downloaded HTML.
Right in your Terminal or Command Prompt, you can create files by _redirecting output_ of command line programs:
177
203
178
204
```text
179
-
python main.py > products.html
205
+
node index.js > products.html
180
206
```
181
207
182
-
If you want to use Python instead, it offers several ways how to create files. The solution below uses [pathlib](https://docs.python.org/3/library/pathlib.html):
208
+
If you want to use Node.js instead, it offers several ways how to create files. The solution below uses the [Promises API](https://nodejs.org/api/fs.html#promises-api):
Download a product image, then save it on your disk as a file. While HTML is _textual_ content, images are _binary_. You may want to scan through the [HTTPX QuickStart](https://www.python-httpx.org/quickstart/) for guidance. You can use this URL pointing to an image of a TV:
228
+
Download a product image, then save it on your disk as a file. While HTML is _textual_ content, images are _binary_. You may want to scan through the [Fetch API documentation](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#reading_the_response_body) for guidance. Especially check `Response.arrayBuffer()`. You can use this URL pointing to an image of a TV:
Being comfortable around Python project setup and installing packages is a prerequisite of this course, but if you wouldn't say no to a recap, we recommend the [Installing Packages](https://packaging.python.org/en/latest/tutorials/installing-packages/) tutorial from the official Python Packaging User Guide.
45
+
46
+
:::
47
+
48
+
:::info Troubleshooting
49
+
50
+
If you see other errors or for any other reason cannot run the code above, it means that your environment isn't set up correctly. We're sorry, but figuring out the issue is out of scope of this course.
51
+
52
+
:::
53
+
-->
54
+
41
55
Now let's use it for parsing the HTML. The `BeautifulSoup` object allows us to work with the HTML elements in a structured way. As a demonstration, we'll first get the `<h1>` element, which represents the main heading of the page.
0 commit comments