Search
NT 530 特價中
在這門課程中，你將學習如何利用 Node.js Request、 Cheerio、 NightmareJs 和 Puppeteer 在真實網站上爬取內容。 課程還會使用帶有 async/await 的最新 JavaScript ES7語法。
講師還將向你展示一個實用的真實網站，你甚至可以在建立網頁爬蟲時避免浪費時間，通過對網站逆向工程，並找到它們隱藏的 API！
您還將學習如何在連線不良或甚至你的網路連線不良的情況下爬取伺服器上的資料。
您甚至可以學習如何將結果儲存到 CSV 檔案和 MongoDB 中！
如何設計一個適合使用網頁爬蟲和 API 的架構，以便從中獲取結果？ 課程也會讓你們看到這一點。
最後講師也會告訴你如何只使用 Request 爬取 Facebook ！
https://softnshare.com/web-scraping-in-nodejs/
💡 เมื่อเราได้เรียนรู้วิธีการเขียนเว็บมาสักพักแล้ว ไม่ว่าจะเป็นพื้นฐานที่สำคัญ เช่น HTML, CSS และ JavaScript แล้วเราอยากจะอยากไปลองใช้ Library หรือ Framework เจ๋ง ๆ ที่ช่วยในการเขียนเว็บ อย่าง React ต้องรู้อะไรบ้าง ??
.
👉 ซึ่งไอเจ้า React เนี่ยมันมีพื้นฐานจาก JavaScript นั่นเอง เราจึงจำเป็นต้องรู้ Concept ที่สำคัญ ๆ ก่อนจะไปใช้งานเจ้า React นั่นเอง
.
มีอะไรบ้าง?? ไปดูกันเลยจ้า 🔥
.
⚙️ Basic Data Structure
Data Structure เป็นหัวใจหลักในการเขียนโปรแกรม ดังนั้นเราต้องเรียนรู้ Data Structure ประเภทต่าง ๆ ให้เข้าใจก่อน ตัวอย่างเช่น การรับ-ส่ง Request จาก API มายัง JS เราก็ต้องมีวิธีที่จะจัดการกับโครงสร้างของข้อมูลที่ดึงมาจาก API เพื่อให้เราสามารถนำข้อมูลนั้นไปใช้ได้ตามต้องการ
.
🌟 DOM
DOM หรือ Document Object Model เป็นการปรับเปลี่ยนโครงสร้าง HTML ให้เป็นแบบ Object โดยให้ JavaScript สามารถจัดการกับ HTML ผ่านโครงสร้างของ DOM ได้นั่นเอง ซึ่งเจ้า React จะใช้โครงสร้าง DOM เป็นหลัก เพื่อสร้างการโต้ตอบบนหน้าเว็บที่สะดวกยิ่งขึ้น ตัวอย่างเช่น เมื่อคลิกปุ่มสามารถแสดงข้อความ หรือเปลี่ยนสีของข้อความนั่นเอง
.
🚚 API
API ย่อมาจาก Application Program Interface ซึ่งเราต้องมีพื้นฐานการใช้งาน API เพื่อนำข้อมูลมาใช้บนหน้าเว็บนั่นเอง อาจจะไม่ต้องถึงกับสร้าง API ใช้ก็ได้นะ เพียงแค่รู้โครงสร้าง และวิธีการดึงมาใช้งานพื้นฐานก็พอแล้ว !!
.
🔧 Axios / Fetch
เครื่องมือสำคัญที่ช่วยให้เราดึง API ต่าง ๆ มาใช้งานได้ง่ายมากขึ้นนั่นเอง !! ซึ่งเป็นสิ่งสำคัญมาก ๆ ในการพัฒนาหน้าเว็บ เพราะมันจะช่วยให้เราสามารถรับ-ส่งข้อมูลแบบไดมามิก และเชื่อมต่อระหว่าง Back-end ได้ง่าย
.
📚 ES6+
สิ่งสำคัญคือเราต้องเรียนรู้วิธีเขียน JavaScript มาตรฐานใหม่ ซึ่งจะช่วยให้โค้ดของเรามีรูปแบบที่อ่านง่ายมากขึ้น !! ซึ่งใน React ที่จะนิยมใช้ ได้แก่ Template Literals, Arrow Functions, Promise, Async / Await, const & let vs var และ Spread Operator นั่นเอง
.
🗂️ JS Array Methods
เมื่อเราสามารถดึงข้อมูลจาก API มาใช้ได้แล้วนั้น เราก็ต้องรู้จักวิธีจัดการกับข้อมูลนั้น ๆ ด้วยนะ ซึ่งมันจะง่ายขึ้นถ้าเรารู้จักใช้ความสามารถของ Array Methods ต่าง ๆ ซึ่งที่นิยมใช้กัน ได้แก่ map(), forEach(), find(), และ filter() เป็นต้น บอกเลยว่าถ้าใช้พวกนี้เป็น ทำให้ชีวิตง่ายขึ้นแน่นอน!! 5555
.
อะทั้งหมดนี้คือ Concept JavaScript พื้นฐานที่สำคัญที่คนเขียน React ต้องมีนะ หวังว่าเพื่อน ๆ จะชอบกันน้าาาา ใครมีอะไรเพิ่มเติมคอมเมนต์ไว้ได้เลย 🥰
.
📑 Source : https://lorenzejay.hashnode.dev/javascript-concepts-you-should-know-before-jumping-into-react-or-any-other-frontend-framework
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
📜 [專欄新文章] ZKP 與智能合約的開發入門
✍️ Johnson
📥 歡迎投稿： https://medium.com/taipei-ethereum-meetup #徵技術分享文 #使用心得 #教學文 #medium
這篇文章將以程式碼範例，說明 Zero Knowledge Proofs 與智能合約的結合，能夠為以太坊的生態系帶來什麼創新的應用。
本文為 Tornado Cash 研究系列的 Part 2，本系列以 tornado-core 為教材，學習開發 ZKP 的應用，另兩篇為：
Part 1：Merkle Tree in JavaScript
Part 3：Tornado Cash 實例解析
Special thanks to C.C. Liang for review and enlightenment.
近十年來最強大的密碼學科技可能就是零知識證明，或稱 zk-SNARKs (zero knowledge succinct arguments of knowledge)。
zk-SNARKs 可以將某個能得出特定結果 (output) 的計算過程 (computation)，產出一個證明，而儘管計算過程可能非常耗時，這個證明卻可以快速的被驗證。
此外，零知識證明的額外特色是：你可以在不告訴對方輸入值 (input) 的情況下，證明你確實經過了某個計算過程並得到了結果。
上述來自 Vitalik’s An approximate introduction to how zk-SNARKs are possible 文章的首段，該文說是給具有 “medium level” 數學程度的人解釋 zk-SNARKs 的運作原理。（可惜我還是看不懂 QQ）
本文則是從零知識證明 (ZKP) 應用開發的角度，結合電路 (circuit) 與智能合約的程式碼來說明 ZKP 可以為既有的以太坊智能合約帶來什麼創新的突破。
基本上可以謹記兩點 ZKP 帶來的效果：
1. 擴容：鏈下計算的功能。
2. 隱私：隱藏秘密的功能。
WithoutZK.sol
首先，讓我們先來看一段沒有任何 ZKP 的智能合約：
這份合約的主軸在 process()，我們向它輸入一個秘密值 secret，經過一段計算過程後會與 answer 比對，如果驗證成功就會改寫變數 greeting 為 “answer to the ultimate question of life, the universe, and everything”。
Computation
而計算過程是一個簡單的函式：f(x) = x**2 + 6。
我們可以輕易推出秘密就是 42。
這個計算過程有很多可能的輸入值 (input) 與輸出值 (output)：
f(2) = 10
f(3) = 15
f(4) = 22
…
但是能通過驗證的只有當輸出值和我們存放在合約的資料 answer 一樣時，才會驗證成功，並執行 process 的動作。
可以看到有一個 calculate 函式，說明這份合約在鏈上進行的計算，以及 process 需要輸入參數 _secret，而我們知道合約上所有交易都是公開的，所以這個 _secret 可以輕易在 etherscan 上被看到。
從這個簡單的合約中我們看到 ZKP 可以解決的兩個痛點：鏈下計算與隱藏秘密。
Circuits
接下來我們就改寫這份合約，加入 ZKP 的電路語言 circom，使用者就能用他的 secret 在鏈下進行計算後產生一個 proof，這 proof 就不會揭露有關 secret 的資訊，同時證明了當 secret 丟入 f(x) = x**2 + 6 的計算過程後會得出 1770 的結果 (output)，把這個 proof 丟入 process 的參數中，經過 Verifier 的驗證即可執行 process 的內容。
有關電路 circuits 的環境配置，可以參考 ZKP Hello World，這裡我們就先跳過去，直接來看 circom 的程式碼：
template Square() { signal input in; signal output out; out <== in * in;}template Add() { signal input in; signal output out; out <== in + 6;}template Calculator() { signal private input secret; signal output out; component square = Square(); component add = Add(); square.in <== secret; add.in <== square.out; out <== add.out;}component main = Calculator();
這段就是 f(x) = x**2 + 6 在 circom 上的寫法，可能需要時間去感受一下。
ZK.sol
circom 寫好後，可以產生一個 Verifier.sol 的合約，這個合約會有一個函式 verifyProof，於是我們把上方的合約改寫成使用 ZKP 的樣子：
我們可以發現 ZK 合約少了 calculate 函式，顯然 f(x) = x**2 + 6 已經被我們寫到電路上了。
snarkjs
產生證明的程式碼以 javascript 寫成如下：
let { proof, publicSignals } = await groth16.fullProve(input, wasmPath, zkeyPath);
於是提交 proof 給合約，完成驗證，達到所謂鏈下計算的功能。
最後讓我們完整看一段 javascript 的單元測試，使用 snarkjs 來產生證明，對合約的 process 進行測試：
對合約來說， secret = 42 是完全不知情的，因此隱藏了秘密。
publicSignals
之前不太清楚 publicSignals 的用意，因此在這裡特別說明一下。
基本上在產生證明的同時，也會隨帶產生這個 circom 所有的 public 值，也就是 publicSignals，如下：
let { proof, publicSignals } = await groth16.fullProve(input, wasmPath, zkeyPath);
在我們的例子中 publicSignals 只有一個，就是 1770。
而 verifyProof 要輸入的參數除了 proof 之外，也要填入 public 值，簡單來說會是：
const isValid = verifyProof(proof, publicSignals);
問題來了，我們在設計應用邏輯時，當使用者要提交參數進行驗證的時候，publicSignals 會是由「使用者」填入嗎？或者是說，儘管是使用者填入，那它需不需要先經過檢查，才可以填入 verifyProof？
關鍵在於我們的合約上存有一筆資料：answer = 1770
回頭看合約上的 process 在進行 verifyProof 之前，必須要檢查 isAnswer(publicSignals[0])：
想想要是沒有檢查 isAnswer，這份合約會發生什麼事情？
我們的應用邏輯就會變得毫無意義，因為少了要驗證的答案，就只是完成計算 f(42) = 1770，那麼不論是 f(1) = 7 或 f(2) = 10，使用者都可以自己產生證明與結果，自己把 proof 和 publicSignals 填入 verifyProof 的參數中，都會通過驗證。
至此可以看出，ZKP 只有把「計算過程」抽離到鏈下的電路，計算後的結果仍需要與鏈上既有的資料進行比對與確認後，才能算是有效的應用 ZKP。
應用邏輯的開發
本文主要談到的是 zk-SNARKs 上層應用邏輯的開發，關於 ZKP 的底層邏輯如上述使用的 groth16 或其他如 plonk 是本文打算忽略掉的部分。
從上述的例子可以看到，即使我們努力用 circom 實作藏住 secret，但由於計算過程太過簡單，只有 f(x) = x**2+6，輕易就能從 answer 反推出我們的 secret 是 42，因此在應用邏輯的開發上，也必須注意 circom 的設計可能出了問題，導致私密訊息容易外洩，那儘管使用再強的 ZKP 底層邏輯，在應用邏輯上有漏洞，也沒辦法達到隱藏秘密的效果。
此外，在看 circom 的程式碼時，可以關注最後一個 template 的 private 與 public 值分別是什麼。以本文的 Calculator 為例，private 值有 secret，public 值有 out。
另外補充：
如果有個 signal input 但它不是 private input，就會被歸類為 public。
一個 circuit 至少會有一個 public，因為計算過程一定會有一個結果。
最後，在開發的過程中我會用 javascript 先實作計算過程，也可以順便產出 input.json，然後再用 circom 語言把計算過程實現，產生 proof 和 public 後，再去對照所有 public 值和 private 值，確認是不是符合電路計算後所要的結果，也就是比較 javascript 算出來的和 circom 算出來的一不一樣，如果不一樣就能確定程式碼是有 bug 的。
參考範例：https://github.com/chnejohnson/circom-playground
總結
本文的程式碼展現 ZKP 可以做到鏈下計算與隱藏秘密的功能，在真實專案中，可想而知電路的計算過程不會這麼單純。
會出現在真實專案中的計算像是 hash function，複雜一點會加入 Merkle Tree，或是電子簽章 EdDSA，於是就能產生更完整的應用如 Layer 2 擴容方案之一的 ZK Rollup，或是做到匿名交易的 Tornado Cash。
本文原始碼：https://github.com/chnejohnson/mini-zkp
下篇文章就來分享 Tornado Cash 是如何利用 ZKP 達成匿名交易的！
參考資料
概念介紹
Cryptography Playground
zk-SNARKs-Explainer
神奇的零知識證明！既能保守秘密，又讓別人信你！
認識零知識證明 — COSCUP 2019 | Youtube
應用零知識證明 — COSCUP 2020 | Youtube
ZK Rollup
動手實做零知識 — circom — Kimi
ZK-Rollup 开发经验分享 Part I — Fluidex
ZkRollup Tutorial
ZK Rollup & Optimistic Rollup — Kimi Wu | Medium
Circom
circom/TUTORIAL.md at master · iden3/circom · GitHub
ZKP Hello World
其他
深入瞭解 zk-SNARKs
瞭解神秘的 ZK-STARKs
zk-SNARKs和zk-STARKs解釋 | Binance Academy
[ZKP 讀書會] MACI
Semaphore
Zero-knowledge Virtual Machines, the Polaris License, and Vendor Lock-in | by Koh Wei Jie
Introduction & Evolution of ZK Ecosystem — YouTube
The Limitations of Privacy — Barry Whitehat — YouTube
Introduction to Zero Knowledge Proofs — Elena Nadolinski
ZKP 與智能合約的開發入門 was originally published in Taipei Ethereum Meetup on Medium, where people are continuing the conversation by highlighting and responding to this story.
👏 歡迎轉載分享鼓掌
javascript await 在 鐵人賽：JavaScript Await 與Async | 卡斯伯Blog - 前端，沒有極限 的推薦與評價
鐵人賽：JavaScript Await 與Async. 不知道上一篇大家對於Promise 概念如何，本篇介紹的內容與Promise 依然有相關性，因為這兩者就是建構於Promise 之 ... ... <看更多>