Hello mọi người lại là mình đây, tiếp tục với loạt bài học cách xây dựng 1 ứng dụng hoàn chỉnh, phần 2 này mình sẽ giới thiệu phần chuẩn bị dữ liệu bằng cách crawl data. Nhưng trước khi viết tiếp mình muốn nói 1 điều ở đây là việc crawl dữ liệu cũng có nhiều mặt trái khác nhau, và mình khuyên bạn hãy tìm hiểu và sử dụng sao cho hợp lý và có ý nghĩa.
Ngôn ngữ sử dụng để crawl là Java
Trang web cần crawl là cooky.vn
Library hỗ trợ việc parse HTML là jsoup
Library hỗ trợ việc parse JSON là gson
Tool hỗ trợ việc call API là Postman
Một số kỹ năng nên biết:
- Cơ bản cấu trúc các thẻ HTML
- Sử dụng dev tool trên browser (F12 Chrome)
- Call API và parse JSON
- Đọc ghi file
Trang cooky thì có rất nhiều dữ liệu và mình chỉ cần lấy các dữ liệu sau:
- Danh sách danh mục món ăn
- Danh sách các món ăn theo danh mục
- Thông tin chi tiết về món ăn
1. Danh sách danh mục món ăn
bạn vào đường dẫn này: https://www.cooky.vn/cach-lam và nhấn F12 để bật dev tool của trình duyệt, vào phần Network, chọn Fillter là XHR
bạn chú ý những phần mình khoanh đỏ trong hình và các mục 1, 2, 3. Mục 3 chính là danh sách danh mục món ăn mình cần lấy, khoảng chừng 30 tên. Vì chỉ đơn giản là text nên bạn có thể tự ghi lại bằng tay, nhưng để việc crawl được chuyên nghiệp hơn thì bạn hãy xem mục 1, 2. Đây là nơi bạn có thể tìm thấy API của trang web dùng để get ra list danh mục này. Như hình bạn cũng đã thấy có 1 API tên getfillter và bên cạnh là response trả về. Đọc sơ qua response thì thấy nó chứa tên của các danh mục mình cần lấy, vậy không còn bàn cãi gì nữa đây chính là API cần tìm cho việc get danh sách danh mục món ăn rồi. Để xem chi tiết các thông tin như url, request method, param… bạn chuyển sang tab Headers (cạnh tab Preview ấy). Sau khi có các thông tin cần thiết thì bạn có thể dùng postman để gọi thử và việc còn lại là viết code để get data thôi. Nếu bạn không thấy API getfillter thì hãy F5 để refresh lại trang web nhé.
Mình sẽ hướng dẫn bạn cách chạy API bằng postman cho trực quan. Đầu tiên hãy chuyển qua tab Headers và để ý các thông số: Request URL, Request Method, Request Headers, Request Payload
như hình thì mình sẽ có được các thông tin cần thiết cho 1 request:
- url: https://www.cooky.vn/directory/getfilter
- mothod: POST
- headers: Content-Type: application/json
- body gửi lên (dạng JSON): {“Keyword”:””,”Type”:”course”,”SelectedIds”:[],”PageSize”:200,”PageIndex”:1}
với những thông số trên bạn config vào postman để thấy rõ kết quả trả về từ API.
kết quả trả về đã có dữ liệu mình cần, nhưng chưa phải dữ liệu mình mong muốn. Ở đây mình chỉ cần quan tâm đến 2 trường đó là Id, Name. Vậy bước tiếp theo bạn cần làm sau khi load được dữ liệu này về từ API là trích xuất, bóc tách 2 thuộc tính này từ JSON và lưu vào file riêng của mình. Sau 1 vài đoạn code phân tách mình sẽ được dữ liệu mong muốn như sau:
2. Danh sách món ăn theo danh mục
Bước khởi đầu lúc nào cũng gian nan phải không nào, sau khi bạn đã quen với việc crawl rồi thì với các bước sau sẽ trở nên dễ dàng hơn rất nhiều.
bạn tiếp tục vào đường dẫn này https://www.cooky.vn/cach-lam , click vào từng danh mục để xem có thấy API nào mình cần tìm không.
Bạn để ý dưới phần log thì có API search và dữ liệu bên cạnh + xem UI của trang web thì đây đúng là API mình có thể dùng được rồi. Vẫn với các bước tương tự như ở phần 1, mình sẽ xem phần header rồi param request ở header của dev tool và thử chạy trên postman để xem kết quả trực quan.
bạn cần config postman như sau để call được API này:
- url: https://www.cooky.vn/directory/search
- method: GET
- params: dt = 140
và đây là kết quả
mình giải thích 1 chút về config này:
- số lượng param: mặc dù trên dev tool API này cần rất nhiều param gửi lên như
dt, q, st, page...nhưng ở bài viết này mình chỉ truyền lên mỗi paramdt. Vì có những param không cần thiết và mình cũng chẳng biết nó là gì, nên chỉ lấy cái nào mình cần thui. Còn tại sao lại cần paramdt? vì khi bạn click vào từng loại danh mục như sacks, lẩu, sữa chua… thì bạn sẽ thấy param này thay đổi giá trị. Đây có thể là id của danh mục này, dựa vào đây để request server trả về loại món ăn tương ứng với danh mục. Còn nhiều cái hay ho hơn nữa bạn có thể tự tìm hiểu thêm, ở đây mình chỉ nói như vậy để các bạn hiểu cho dễ. - giá trị của param dt: để lấy được giá trị của param này thì như mình nói ở trên, bạn cứ click lần lượt vào các danh mục sẽ thấy dt thay đổi giá trị:
122,123,124,125,126,127,128,129,130,131,132,133,135,136,137,138,139,140,104,105,106,107,108,109,110,111,112,113,114,115,117,118,119,120,121
Vẫn như API trước, mình cũng chỉ quan tâm đến các dữ liệu mình cần như name, totaltime, level, img, ingredient... . Bạn lại tiếp tục sử dụng kỹ năng call API và phân tách JSON để lấy được các dữ liệu mình mong muốn.
Đây là danh sách các món ăn của 1 danh mục, với các danh mục khác bạn cũng làm tương tự như vậy. 1 vòng for là ổn phải không nào =))
3. Thông tin chi tiết về món ăn
Về phần thông tin chi tiết của 1 món ăn bạn click vào 1 món ăn bất kỳ để xem các thông tin cần lấy tiếp theo là gì. Ở đây mình chỉ lấy thêm 1 số thông tin về các bước làm + hình ảnh đi kèm với các bước làm tương ứng. Ngoài ra bạn có thể lấy thêm thông tin như: số lượt like, user….
Vẫn là bước làm quen thuộc là xem dev tool xem có lấy được gì không? nhưng lần này ở tab XHR mình không tìm được API mình cần về thông tin món ăn. Vậy có lẽ ở phần này trang web sẽ không call API như ở 2 phần trước nữa. Vậy mình sẽ chuyển sang tab All để tìm lần lượt, chắc chắn là sẽ có trong này, chỉ là nó nằm ở reques nào thôi.
Ví dụ ở đây mình vào link món ăn này: https://www.cooky.vn/cong-thuc/song-so-nuong-giay-bac-52495
thì ở ngay request đầu tiên của tab All mình thấy thông tin cần lấy nằm ở đây, nhưng nó không phải dạng JSON như 2 phần trên mà là server sẽ trả về 1 page dạng HTML. Các thông tin mình cần lấy sẽ nằm trong các thẻ HTML, lúc này sẽ là lúc mình dùng đến thư viện Jsoup để bóc tách các thẻ HTML và lấy thôn tin mình cần.
Để xem được nội dung file HTML, bạn chỉ cần chuột phải và chọn View page source (Ctrl + U). Bạn sẽ thấy 1 file HTML cả hàng nghìn dòng code, nhưng đừng vội hoang mang bạn chỉ cần quan tâm đến phần nội dung mình cần lấy, và cấu trúc các thẻ HTML chứa nội dung của mình cần. Ở đây mình chỉ trích dẫn đoạn HTML chứa nội dung các bước làm thôi nha.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel-group description<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>accordionDirection<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel panel-default clearfix<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>step-290136<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel-heading<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">data-toggle</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>collapse<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#collapseDirection1<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_self<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Bước <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>num<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:void(0)<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tick-active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fa fa-circle-o<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>collapseDirection1<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel-collapse collapse in<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel-body<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>step-desc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Bóc vỏ tỏi, cắt thành những lát mỏng. Rải đều các lát tỏi lên khay giấy bạc đã chuẩn bị sẵn. Thái hạt lựu cà rốt, thái nhỏ bông cải xanh và nấm linh chi nâu. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>step-photos<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>comment-widget-box step-comments-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cooky-like-comment-widget</span> <span class="token attr-name">ref-root-id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>52495<span class="token punctuation">"</span></span> <span class="token attr-name">ref-id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>290136<span class="token punctuation">"</span></span> <span class="token attr-name">ref-type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>11<span class="token punctuation">"</span></span> <span class="token attr-name">environment</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">'</span>recipestep<span class="token punctuation">'</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cooky-like-comment-widget</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel panel-default clearfix<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>step-290137<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel-heading<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">data-toggle</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>collapse<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#collapseDirection2<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_self<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Bước <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>num<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:void(0)<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tick-active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fa fa-circle-o<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>collapseDirection2<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel-collapse collapse in<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel-body<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>step-desc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Rửa sạch cồi sò điệp tươi và thịt sò lông tươi. Xếp cồi sò điệp và sò lông lên trên tỏi. Tiếp đó là rải đều lên cà rốt, bông cải xanh và nấm linh chi nâu. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>step-photos<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>comment-widget-box step-comments-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cooky-like-comment-widget</span> <span class="token attr-name">ref-root-id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>52495<span class="token punctuation">"</span></span> <span class="token attr-name">ref-id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>290137<span class="token punctuation">"</span></span> <span class="token attr-name">ref-type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>11<span class="token punctuation">"</span></span> <span class="token attr-name">environment</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">'</span>recipestep<span class="token punctuation">'</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cooky-like-comment-widget</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel panel-default clearfix<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>step-290138<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel-heading<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">data-toggle</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>collapse<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#collapseDirection3<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_self<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Bước <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>num<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:void(0)<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tick-active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fa fa-circle-o<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>collapseDirection3<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel-collapse collapse in<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel-body<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>step-desc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Mở trước lò nướng ở 200 độ C trong 5 phút. Nêm vào 1 muỗng cà phê hạt nêm, 1 muỗng canh dầu ăn và 10g bơ. Gói giấy bạc bọc kín các nguyên liệu lại. Cho vào lò nướng khoảng 15 phút là hoàn tất. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>step-photos<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>comment-widget-box step-comments-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cooky-like-comment-widget</span> <span class="token attr-name">ref-root-id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>52495<span class="token punctuation">"</span></span> <span class="token attr-name">ref-id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>290138<span class="token punctuation">"</span></span> <span class="token attr-name">ref-type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>11<span class="token punctuation">"</span></span> <span class="token attr-name">environment</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">'</span>recipestep<span class="token punctuation">'</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cooky-like-comment-widget</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel panel-default clearfix<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>step-290139<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel-heading<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">data-toggle</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>collapse<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#collapseDirection4<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_self<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Bước <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>num<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:void(0)<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tick-active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fa fa-circle-o<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>collapseDirection4<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel-collapse collapse in<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel-body has-photo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>step-desc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Dùng kéo cắt mở miệng giấy bạc, cẩn thận hơi nóng món sò nướng giấy bạc dễ gây bỏng nhé. Bạn có thể chuẩn bị thêm chén nướng tương cay thơm để chấm hoặc rưới lên ăn kèm cho vừa miệng hơn. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>step-photos<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>cooky-photo one-photo<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:void(0)<span class="token punctuation">"</span></span> <span class="token attr-name">data-id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>496582<span class="token punctuation">"</span></span> <span class="token attr-name">data-group</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">data-dimen</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span> 0x0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">data-src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>https://media.cooky.vn/recipe/g6/52495/s480x480/recipe52495-cook-step4-637194521306384598.jpg<span class="token punctuation">'</span></span> <span class="token attr-name">data-original</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>https://media.cooky.vn/recipe/g6/52495/s480x480/recipe52495-cook-step4-637194521306384598.jpg<span class="token punctuation">'</span></span> <span class="token attr-name">data-lazy</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>https://media.cooky.vn/recipe/g6/52495/s480x480/recipe52495-cook-step4-637194521306384598.jpg<span class="token punctuation">'</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>Song sò nướng giấy bạc<span class="token punctuation">'</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>lazy<span class="token punctuation">'</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>https://www.cooky.vn/imgs/blank-img/400x400.jpg<span class="token punctuation">'</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>comment-widget-box step-comments-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cooky-like-comment-widget</span> <span class="token attr-name">ref-root-id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>52495<span class="token punctuation">"</span></span> <span class="token attr-name">ref-id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>290139<span class="token punctuation">"</span></span> <span class="token attr-name">ref-type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>11<span class="token punctuation">"</span></span> <span class="token attr-name">environment</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">'</span>recipestep<span class="token punctuation">'</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cooky-like-comment-widget</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
bạn sẽ thực hiện bóc tách dữ liệu trong đoạn HTML này. Nhưng nếu bạn đọc kỹ hơn file HTML của cả trang, bạn sẽ thấy 1 đoạn HTML cũng chưa thông tin bạn cần nhưng đơn giản hơn đoạn HTML trên rất nhiều. Mình tìm được như sau:
1 2 3 4 5 6 7 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>instructions<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">display</span><span class="token punctuation">:</span>none</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>bước 1: bóc vỏ tỏi, cắt thành những lát mỏng. rải đều các lát tỏi lên khay giấy bạc đã chuẩn bị sẵn. thái hạt lựu cà rốt, thái nhỏ bông cải xanh và nấm linh chi nâu.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>bước 2: rửa sạch cồi sò điệp tươi và thịt sò lông tươi. xếp cồi sò điệp và sò lông lên trên tỏi. tiếp đó là rải đều lên cà rốt, bông cải xanh và nấm linh chi nâu.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>bước 3: mở trước lò nướng ở 200 độ c trong 5 phút. nêm vào 1 muỗng cà phê hạt nêm, 1 muỗng canh dầu ăn và 10g bơ. gói giấy bạc bọc kín các nguyên liệu lại. cho vào lò nướng khoảng 15 phút là hoàn tất.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>bước 4: dùng kéo cắt mở miệng giấy bạc, cẩn thận hơi nóng món sò nướng giấy bạc dễ gây bỏng nhé. bạn có thể chuẩn bị thêm chén nướng tương cay thơm để chấm hoặc rưới lên ăn kèm cho vừa miệng hơn.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> |
Bây giờ bạn đã thấy dễ hơn chưa nào. Ở đây mình xin phép không viết đoạn code parse HTML ở đây, 1 phần vì cấu trúc HTML của trang web có thể thay đổi liên tục, 2 là để các bạn tự mày mò phần nào.
Đến đây mình đã có toàn bộ dữ liệu của 3 phần mình cần, ví dụ 1 món ăn như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | { "name": "Lòng heo nướng chua ngọt", "time": 20, "img": "https://media.cooky.vn/recipe/g3/29522/s555x240/cooky-recipe-636585680901866090.jpg", "level": "Dễ", "title": "Cách làm lòng heo nướng chua ngọt", "des": "<p style="text-align: justify;">M&oacute;n n&agrave;y quen thuộc với ch&uacute;ng ta nhưng ăn ở ngo&agrave;i th&igrave; mất vệ sinh, h&atilde;y c&ugrave;ng thực hiện n&oacute; ở nh&agrave; v&agrave; thưởng thức c&ugrave;ng Hằng nh&eacute;, Dễ l&agrave;m th&ocirc;i c&aacute;c bạn ah, m&agrave; ăn th&igrave; bao đ&atilde;</p>rn", "serving": 3, "components": [ { "name": "Lòng heo", "quantity": "500", "unit": "Gr" }, { "name": "Dưa leo", "quantity": "2", "unit": "Quả" }, { "name": "Chanh", "quantity": "1", "unit": "Trái" }, { "name": "Nước mắm", "quantity": "100", "unit": "ml" }, { "name": "Muối", "quantity": "1", "unit": "Chén" }, { "name": "Hành tím", "quantity": "3", "unit": "Củ" }, { "name": "Bột ngũ vị hương", "quantity": "1 <sup>1</sup>/<sub>2</sub>", "unit": "Muỗng cà phê" }, { "name": "Đường", "quantity": "1 <sup>1</sup>/<sub>2</sub>", "unit": "Muỗng cà phê" }, { "name": "Hạt nêm", "quantity": "1", "unit": "Muỗng cà phê" }, { "name": "Dầu điều", "quantity": "2", "unit": "Muỗng cà phê" } ], "type": "", "cook_steps": [ { "step": 1, "des": "Lòng heo khi mua về các bạn rửa thật sạch với muối và nước. Sau đó cho vào chảo nóng cùng 1 muỗng canh nước mắm, đảo nhanh tay, đem ra sửa lại với nước, làm vậy lòng heo sẽ sạch hơn cũng như giảm được mùi hôi của lòng, để ráo nước. Hành tím băm nhỏ.", "pictures": [ "https://media.cooky.vn/recipe/g3/29522/s480x480/cooky-recipe-636585693736632633.jpg" ] }, { "step": 2, "des": "Ướp lòng: cho lòng vào 1 cái tô lớn, cho tất cả nguyên liệu hành tím, hạt nêm, đường, dầu điều, bột ngũ vị hương, lượng nước mắm còn lại, dùng tay trộn đều hỗn hợp ướp lòng cho lòng được thấm hơn. Để 30 phút cho lòng thấm gia vị.", "pictures": [ "https://media.cooky.vn/recipe/g3/29522/s300x300/cooky-recipe-636585693999961095.png", "https://media.cooky.vn/recipe/g3/29522/s300x300/cooky-recipe-636585694008853111.png", "https://media.cooky.vn/recipe/g3/29522/s300x300/cooky-recipe-636585694026481142.png", "https://media.cooky.vn/recipe/g3/29522/s300x300/cooky-recipe-636585694029757148.png" ] }, { "step": 3, "des": "Chuẩn bị 1 cái bếp than hồng, cho lòng lên nướng chín đều 2 mặt, các bạn canh trở đều 2 mặt nhé cho lòng khỏi bị cháy.", "pictures": [ "https://media.cooky.vn/recipe/g3/29522/s300x300/cooky-recipe-636585694131937327.png", "https://media.cooky.vn/recipe/g3/29522/s300x300/cooky-recipe-636585694131001326.png" ] }, { "step": 4, "des": "Vậy là món ăn đã hoàn thành rồi. Mình sẽ ăn kèm với dưa leo, muối tiêu chanh nhé các bạn. Chúc các bạn thành công.", "pictures": [ "https://media.cooky.vn/recipe/g3/29522/s480x480/recipe29522-prepare-step4-636585724752451109.jpg" ] } ] } |
nếu bạn nào không tự crawl được dữ liệu thì có thể dùng các file mình đã crawl trước đỏ, tại đây.
Dữ liệu sau khi lấy được mình đều đưa hết về dạng JSON để sau này làm API cho dễ. Việc cấu trúc JSON thì tùy thuộc vào mỗi người, việc crawl được dữ liệu mà mỗi người mong muốn cũng giống như việc bạn chỉnh sửa ảnh vậy, chỉnh đến lúc nào mình thấy ảnh đẹp thì thôi.
Hẹn gặp các bạn ở các phần sau.