"Build A Web Scraper With GO & Angular2" by Sigit Prayoga (JLP Community)
•Download as PPTX, PDF•
1 like•734 views
This slide was shared on Tech in Asia Jakarta 2016 @ 17 November 2016. Get updates about our dev events delivered straight to your inbox by signing up here: http://bit.ly/tia-dev ! Be the first to know when new information is available!
Recommended
More Related Content
Viewers also liked
Viewers also liked (14)
Similar to "Build A Web Scraper With GO & Angular2" by Sigit Prayoga (JLP Community)
Similar to "Build A Web Scraper With GO & Angular2" by Sigit Prayoga (JLP Community) (20)
More from Tech in Asia ID
More from Tech in Asia ID (20)
Recently uploaded
Recently uploaded (20)
"Build A Web Scraper With GO & Angular2" by Sigit Prayoga (JLP Community)
- 1. Build a Web Scraper with Angular 2 & GO 17 Nov 2016 @ Balai Kartini Sigit Prayoga
- 2. Sigit Prayoga. Initiator of JLP People Development Manager @ Obortech Just about 6 years experience. Worked onsite with TiVo, Best Buy, JC Penney & JPMC. gh: @sigit-prayoga
- 3. [DEMO]
- 4. Simple, huh?
- 5. 1.Bootstrap Angular 2 App with angular- cli
- 6. 2. Create http request di Angular 2
- 7. 3. Create a RESTful API
- 8. 4. Web Scraping with GoQuery
- 9. 5. Build and run GO
- 10. 1. Bootstrap Angular 2 App with angular-cli 2. Create http request di Angular 2 3. Create a RESTful API 4. Web Scraping with GoQuery 5. Build and run GO
- 11. In common practice what do we need?
- 12. Database || Open API
- 13. Database
- 14. [{ “name”:”iPhone 7 White 128 GB”, “description”:”lorem ipsum lorem”, “categories”:[cat1, cat2, cat3, cat4] }, { “Name”:”lemari baju”, “description”:”lorem ipsum lorem”, “categories”:[cat1, cat2, cat3, cat4] }, { “Name”:”sepatu lari”, “description”:”lorem ipsum lorem”, “categories”:[cat1, cat2, cat3, cat4] }]
- 16. So, let’s input all products then?
- 18. OPEN API
- 21. Open for public usage?
- 23. No database, No open API?!
- 24. No worries
- 25. Let’s scrap this sh*t! Note: Only for sharing purpose. More research required about the legality before you really want to do this.
- 26. What is web scraping?
- 28. How about searching category?
- 45. Questions?
Editor's Notes
- Hallo temen2, apa kabar? Baik ya, anyone can not speak Bahasa? Bear with me, slides will help you.
- Perkenalkan nama saya Sigit prayoga sebagai JLP community Initiator dan juga People development manager di Obortech. Pengalaman BARU 6 tahun sebagai software engineer. Pernah mendapat kesempatan untuk jadi coach dan onsite engineer di beberapa perusahaan ini di US
- Hari ini kita mau bahas apa sih, udh ada yg tau belum? Web app sederhana yang dapat menentukan kategori terhadap benda apapun yang kita masukan ke dalam input field. Mari kita lihat sedikit aplikasinya
- Simple kan? Pada kasus tadi, kira2 core element penting apa ya harus kita punya? Sebelum menjawab pertanyaan tersebut, mari kita lihat apa yg akan temen2 dapetin di talk kali ini.
- Yang pertama adalah bagaimana bootstrap Angular 2 application menggunakan angular-cli
- Yang kedua bikin get call with http di angular 2
- Ketiga, bikin endpoint di backendnya which is menggunakan GO
- Ke empat, gimana caranya nge-scrap dengan tools tambahan dari go yaitu goquery
- Yang terakhir build dan run go nya
- Let’s recap!
- OK, Kembali ke pokok pembahasan. Dalam kasus simple app seperti itu, kira2 apa sih yang “biasa” dibutuhkan untuk achieve that kind of functionality? Frontend udah pasti, tinggal backend nya nih gmn?
- Ada 2, database dan atau some other app’s open API
- Coba kita lihat dari database, again, kira2 gimana bentuk database nya sih?
- The simplest one is like this, right? Kita punya bentuk seperti ini, simply cari apapun yang diterima dari frontend trus search by ‘name’ or ‘description’ nya, trus return deh related categoriesnya. Got it?
- Okay, jadi kita harus melakukan ini kan? Let’s do it!
- Are you nuts? Mau input berapa ratus ribu barang? Efektif? Tentu tidak.
- Let’s move on, ke opsi yang kedua. Open API? Dari mana?
- Yang paling memungkinkan adalah ini semua (dan semacamnya yang tidak bisa di mention satu2, you know, too many :)) Mereka udah pasti memiliki data2 tersebut, bahkan jauh lebih complex.
- So kalo gitu kita call API nya mereka aja!
- Really? (that’s their golden revenue source, big data) dan kita nyomot gitu aja?
- hmmmmmm
- Okay, mulai agak ribet nih! Jadi gimana git?! No database, No Open API?
- Jawabannya adalah no worries. Soooo?
- Okay kita SCRAP AJA! Oops jangan lupa ada notenya tuh
- Apaan sih web scraping?
- Yuk kita liat ecommerce “kecil” ini. See the red blocks! Sebelah kiri kita lihat ada harga yang kita butuhkan, for example, for this projector. Nah kita kalo inspect element, kita bisa lihat di sebelah kanan atas, ada span dengan menggunakan ID, yowes kita ambil aja, hasilnya ada di kanan bawah. Begitu jg kalo mau ambil attribute yang lain. Clear?
- Nah kasus kita tadi, bukan ambil harganya, tapi menentukan kategori apa sih dari product itu.
- Nah, ini part yang paling menarik? Ada yang tau ini ecommerce apa? Ada developer yang bersangkutan, salam sama Zaky, maaf gitu, ga ada maksud. Cuma use case buat sharing session ini. Hehhee Yuk kita perhatiin red blocks nya, kalo kalian masukin apapun di kategori input dan hit enter, maka akan keluar product2 yang bersangkutan. Dan sebelah kiri, akan muncul kategori yang paling related sampe yang paling tidak related. One more thing, URL nya liat! Perhatikan sama next slide,
- Got it? One more time.
- Nah berarti kalo kita masukin barang apapun, kita aku letakkan itu di ujung URL nya. Maka akan keluar page yang sama kalo kaliat dateng langsung ke website bukalapak.
- It’s getting techie now! Ready, pertama kita bahas depan or frontendnya dlu ya!
- To build an angular2 app dengan angular-cli, command ini yang dibutuhkan. Pertama install menggunakan npm install, terus create new app called ‘web-scraper-angular2’, dan change directory ke folder yang baru dibikin. Terus di ng-serve untuk deploy ke localhost. By default pake port 4200
- Kalo udah kita liat app.component.html nya, ini adalah satu2nya page di webapp ini, kalo kita perhatikan ada form dengan 2 element input, yang 1 adalah textfield nya, satu lagi adalah buttonnya yang memiliki type submit, apa yang dilakukan? Manggil function doScrap() right? Ngapain deh ituu, categoriesnya dimasukin ke UL dengan directive ngFor.
- Ooooh ternyata bikin http get. Dengan asumsi localhost dengan port 3001 udh on, yaitu go server kita, terus call /scraping endpoint. Dengan menambahkan keyword. Kalo dapet response makan akan disubscribe, ambil res kembaliannya masukin ke caterogies. Balik lagi ke htmlnya
- Nah sekarang ke GO nya!
- Register the endpoint which is /go/api/scraping, dengan masukin return value dari si gethandler function, then listen di 3001.
- Di dalam handlernya kita melakukan parsing si params dari incoming request, kan td kita masukin apapun value di textfield, ke dalam ‘keyword’. Nah ini core functionnya, ‘scraping’ dengan keyword yang dikasih sebagai param
- Terus di scraping function itu kita construct si bukalapak url dengan any keyword that we sent.
- Ok let’s check again the website. Setelah open new document dengan goquery, kita mau ngapain sih? Mau scrap si top 2 categories kan. Nah kita lihat di blue block sebelah kiri, ada rumah tangga dan Hobi Koleksi. Itu dalah bentuk UL dan LI, lets do the real scraping here.
- Begini cara scraping nya. Find si UL dengan class js-tree.tree, dan cari per LI nya sehingga mendapatkan si A element.
- Nah ini yang mau kita dapetin kan? Si rumah tangga. Tinggal break ketika udh mentok 2, biar ga usah scrap semua LI nya.
- Yuk liat code lengkapnya.
- Kalo masih ada yang kurang dan penasaran, bisa checkout codenya di sini.