รักออกแบบ รักเขียนโค้ด ชอบแต่งหน้าเว็บ ต้องนี่… “Front-End Developer” 🎨 👨💻
.
หนึ่งในอาชีพสายเดฟที่มาแรงไม่แพ้กัน !! แล้วถ้าอยากทำอาชีพนี้จะต้องมีสกิลอะไรบ้าง ? ซึ่งวันนี้แอดได้รวบรวม 10 สกิลสำคัญที่ต้องมีก่อนจะเป็น Front-End Developer มาให้เพื่อน ๆ หรือน้อง ๆ ที่กำลังอยากเริ่มต้นในสายอาชีพนี้ จะมีอะไรบ้าง หากพร้อมแล้วไปดูกันเลยจ้า~~
.
มาเริ่มกันเลย !! 🔥
.
🌟 1) HTML & CSS
ทักษะพื้นฐานที่สำคัญมาก ๆ สำหรับ Front-End Dev เพราะเป็นโครงสร้างของหน้าเว็บ เปรียบเสมือนกระดูกสันหลัง ไม่ว่าจะเป็นการกำหนดรูปแบบอักษร โครงสร้าง การจัดเลย์เอาท์ และอื่น ๆ ซึ่งเราควรเรียนรู้โครงสร้าง วิธีการเขียน และ กฎที่จำเป็นของ HTML และ CSS ก่อนที่จะไปเรียนรู้ส่วนอื่น ๆ ต่อไป ทั้งสองสามารถเรียนรู้ได้ง่าย แต่อาจจะต้องใช้เวลาเพื่อให้มีความเชี่ยวชาญนั่นเอง
.
.
🌟 2) Javascript
ในเมื่อมี HTML และ CSS ที่เป็นเหมือนกระดูกสันหลังของเว็บแล้วนั้น การจะทำให้เว็บมีลูกเล่น มีชีวิตชีวา มีการประมวลผลข้อมูล สิ่งสำคัญที่ต้องมีนั่นคือ JavaScript เพราะมันเป็นเหมือนมันสมองของเว็บไซต์ เพื่อให้เว็บสามารถทำฟังก์ชันต่าง ๆ เพื่อให้เว็บมีการโต้ตอบกับผู้ใช้อย่างมีประสิทธิภาพ และในปัจจุบันก็มี Framework สำหรับ JavaScript มากมาย เช่น React.js, Angular.js, Vue.js และอีกมากมาย ที่ช่วยให้เราสร้างหน้าเว็บได้ง่ายมากยิ่งขึ้น
.
.
🌟 3) ECMA ES6
เป็นมาตรฐานหรือข้อกำหนดในภาษา Scripting ซึ่ง JavaScript ก็จัดเป็นอีกหนึ่งในภาษา Scripting นั่นเอง ซึ่งมีการพัฒนาเปลี่ยนฟีเจอร์ และ Syntax ใหม่ ๆ เพื่อรองรับการเขียนแอปที่มีความซับซ้อนมากขึ้น ซึ่งในปัจจุบันพัฒนามาจนถึง ES6 แล้ว ซึ่ง Front-End Dev จะต้องเรียนรู้โครงสร้างและวิธีการเขียน JavaScript แบบมาตรฐาน ES6 เพราะเป็นสิ่งสำคัญที่ช่วยให้การพัฒนาเว็บมีมาตรฐานมากยิ่งขึ้นนั่นเอง
.
.
🌟 4) DOM / Virtual DOM
DOM (Document Object Model) เป็นวิธีการเก็บ Document ในรูปแบบ Object แบบ Tree Structure และจะใช้ JavaScript เพื่อไปเข้าถึงหรือจัดการ HTML ในแต่ละส่วน แต่เมื่อมีโครงสร้างใหญ่ขึ้นทำให้อาจจะจัดการได้ยาก ส่วน Virtual DOM ก็ถูกพัฒนาขึ้นมาเพื่อเป็นตัวแทนของ DOM จัดการสิ่งต่าง ๆ ได้อย่างรวดเร็ว และไม่ส่งผลกระทบกับ Real DOM นั่นเอง ซึ่ง Front-End Dev จะต้องมีความรู้เกี่ยวกับ DOM / Virtual DOM เพื่อเข้าใจส่วนประกอบ โครงสร้าง องค์ประกอบ และวิธีการแสดงผลของหน้าเว็บอย่างละเอียด เพื่อเพิ่มประสิทธิภาพในการพัฒนาหน้าเว็บนั่นเอง
.
.
🌟 5) Browser Developer Tools
เป็นเครื่องมือต่าง ๆ ที่อยู่บนเบราว์เซอร์ที่จะช่วยให้นักพัฒนาสามารถใช้ประโยชน์เพื่อสร้างและปรับปรุงหน้าเว็บให้มีประสิทธิภาพ นักพัฒนาจะต้องเรียนรู้วิธีการใช้งานเครื่องมือต่าง ๆ เพื่อช่วยให้การทำงานรวดเร็วและง่ายมากขึ้น อย่างเช่น Chrome DevTools จาก Google ที่มีเครื่องมือต่าง ๆ ช่วยในการทดสอบ แสดงผลหน้าเว็บ ดูผลลัพธ์ของ CSS และสามารถแก้ไขเบื้องต้นได้ ซึ่งมันสามารถใช้เป็นแนวทางในการพัฒนาเว็บได้นั่นเอง
.
.
🌟 6) Frameworks และ Libraries
ในปัจจุบันก็มีเครื่องมือต่าง ๆ มากมายที่ช่วยให้การพัฒนาเว็บง่าย สะดวก และประหยัดเวลามากขึ้น และเว็บไซต์ส่วนใหญ่ก็ได้ใช้ Frameworks และ Libraries เพื่อพัฒนาเว็บมีประสิทธิภาพสูงสุด อย่างเช่น React, Angular, Vue ที่เป็น Framework ยอดนิยมมากที่สุดในปัจจุบัน ทั้งสามต่างก็มีข้อดีและข้อจำกัดกันคนละแบบ ขึ้นอยู่กับว่าเรานำไปใช้กับงานแบบใด เลือกอันที่เหมาะกับตัวเอง แล้วไปเริ่มเรียนรู้กันเลย !!
.
.
🌟 7) Version Control
ไม่ว่าจะเป็นเดฟในตำแหน่งใด ก็จะต้องทำงานกับเพื่อนร่วมทีมอย่างแน่นอน การจะทำงานเป็นทีมได้ง่ายและสะดวกมากขึ้น เราก็ต้องรู้จักกับ Version Control เมื่อตอนเราเดฟก็จะต้องมีไฟล์ Source Code ต่าง ๆ มากมายทั้งของเราและเพื่อนร่วมทีม ซึ่งเจ้า Version Control ก็จะเข้ามาช่วยเราในการจัดการ ควบคุม จัดเก็บ Source Code ต่าง ๆ ไว้บน Server ซึ่งในปัจจุบันมีให้เลือกใช้ได้อย่างหลากหลายมาก ไม่ว่าจะเป็น Git, GitHub, GitLab และอื่น ๆ อีกมากมาย
.
.
🌟 8) Test และ Debug
เมื่อเราเดฟแล้วสิ่งสำคัญที่ขาดไม่ได้คือการทดสอบ ซึ่งในที่นี้เราไม่ต้องรู้ Process การทดสอบแบบละเอียดก็ได้ เพราะในบางบริษัทก็จะมีตำแหน่ง Tester แยกอยู่แล้ว ในการทดสอบฝั่งเดฟจะเป็นแบบ Unit Test เพื่อทดสอบว่าแต่ละฟังก์ชันว่าทำงานได้ตามเป้าหมายหรือไม่ เราอาจจะทำการทดสอบเอง หรืออาจจะใช้เครื่องมือเพื่อช่วยให้การทดสอบง่ายขึ้นได้เช่นกัน
.
.
🌟 9) SEO
หัวใจสำคัญสำหรับการทำเว็บ หรือการให้หน้าเว็บติดอันดับ SEO ซึ่งเราจะต้องเรียนรู้สถาปัตยกรรมเว็บไซต์ เพื่อปรับปรุงหน้าเว็บให้ติดอันดับ SEO อยู่เสมอ ไม่ว่าจะเป็นในเรื่องของข้อมูล ความปลอดภัย ประสิทธิภาพ การเข้าถึง และอื่น ๆ อีกมากมาย Front-End Dev ห้ามมองข้ามเด็ดขาด !!
.
.
🌟 10) Performance Analysis
สิ่งสำคัญในการทำเว็บอีกหนึ่งอย่างนั่นคือประสิทธิภาพ ! จะมีหน้าเว็บสวย อลัง ขนาดไหน แต่ถ้ามันทำงานได้ช้า กว่าจะกดปุ่มอะไรแต่ละทีต้องนั่งรอ มันไม่ทันใจวัยรุ่นเอาซะเลย ถ้าเราเป็นผู้ใช้เว็บลองคิดดูว่ามันน่าหัวเสียขนาดไหน เราต้องทำความเข้าใจการควบคุมประสิทธิภาพและการประมวลผลของหน้าเว็บ ฟังก์ชันไหนที่ไม่จำเป็นก็ให้กำจัดออกไป ใส่มาก็ไม่ได้ใช้งาน หรือบางอันก็ลืมลบทำให้เว็บช้าลงไปอีก ซึ่งในปัจจุบันก็มีเครื่องมือต่าง ๆ ที่ช่วยจัดการประสิทธิภาพบนหน้าเว็บให้เลือกใช้อย่างหลากหลาย เลือกสักหนึ่งเครื่องมือ แล้วไปเรียนรู้วิธีการใช้งานเพื่อมาช่วยเพิ่มประสิทธิภาพให้กับเว็บ
.
และทั้งหมดนี้ก็เป็น Hard Skills ที่คนอยากเป็น Front-End Developer ต้องมี และยังต้องมี Soft Skills อื่น ๆ ไม่ว่าจะเป็นทักษะการสื่อสาร การทำงานเป็นทีม การวางแผนงาน เพื่อช่วยให้การทำงานนั้นมีประสิทธิภาพ ซึ่งสกิลเหล่านี้ไม่ว่าจะทำอาชีพไหนก็ต้องมี 😊
.
และพี่ ๆ คนไหนที่กำลังทำอาชีพนี้ แล้วอยากแนะนำหรือบอกอะไรเพิ่มเติม สามารถมาคอมเมนต์พูดคุยกันได้เลยน้า 🥰
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
#frontend #frontenddeveloper #BorntoDev
同時也有3部Youtube影片,追蹤數超過7萬的網紅在地上滾的工程師 Nic,也在其Youtube影片中提到,硬核的知識也許不是每個工程師都能夠在職涯發展中完全運用到,但無論是本科系、轉職、自學成為工程師的朋友,都應該要知道,這些紮實的背景知識提早學習起來,在未來的日子裡,只有好沒有壞。 就透過本影片我的真實經驗分享,告訴你這些我在大學時期看似枯燥乏味的理論,其實就是程式設計內功,而日後沉睡已久的內功卻又...
「github tree」的推薦目錄:
- 關於github tree 在 BorntoDev Facebook 的精選貼文
- 關於github tree 在 Taipei Ethereum Meetup Facebook 的精選貼文
- 關於github tree 在 Taipei Ethereum Meetup Facebook 的精選貼文
- 關於github tree 在 在地上滾的工程師 Nic Youtube 的最讚貼文
- 關於github tree 在 prasertcbs Youtube 的精選貼文
- 關於github tree 在 DidoPopcorn 秋本桐 Youtube 的最佳貼文
- 關於github tree 在 Git trees - GitHub Docs 的評價
- 關於github tree 在 Octotree - GitHub code tree 的評價
- 關於github tree 在 Octotree - GitHub code tree - Firefox Browser Add-ons - Mozilla 的評價
- 關於github tree 在 git - Visualize branches on GitHub - Stack Overflow 的評價
- 關於github tree 在 git - Visualize branches on GitHub - Stack Overflow 的評價
- 關於github tree 在 Git Trees | GitHub API - LFE Documentation 的評價
- 關於github tree 在 How to use Source Tree with Github - Tutorial 6 - YouTube 的評價
- 關於github tree 在 How to use Source Tree with Github - Tutorial 6 - YouTube 的評價
- 關於github tree 在 一步一步教你用GitHub + SourceTree 做版本控制 - HackMD 的評價
- 關於github tree 在 File tree navigation on GitHub? Yes, please. - Sourcegraph 的評價
- 關於github tree 在 Tree-sitter|Introduction 的評價
- 關於github tree 在 Gotchas with Git and the GitHub API - Retool 的評價
- 關於github tree 在 Pull Request File Tree (Beta) | GitHub Changelog 的評價
- 關於github tree 在 [guide][wip] [beginners] how to push a device tree to github 的評價
- 關於github tree 在 GitHub NEW File Tree View in Pull Requests - DEV Community 的評價
- 關於github tree 在 Codetree: Powerful Project Management for GitHub 的評價
- 關於github tree 在 Tutorial Git and GitHub : Source Tree I (commit & push) - 2020 的評價
- 關於github tree 在 Manage Your Code Project With Git and GitHub 的評價
- 關於github tree 在 SourceTreeの使い方 - GitHubとの連携方法 - ICS MEDIA 的評價
- 關於github tree 在 Git Pull Branch from GitHub - W3Schools 的評價
- 關於github tree 在 The Git & Github Bootcamp - Udemy 的評價
- 關於github tree 在 Pacman Ai Github - Dwe | - Home 的評價
- 關於github tree 在 Octotree を使って GitHub のコードをブラウザでツリー表示 ... 的評價
- 關於github tree 在 Github Overview - WeBWorK_wiki 的評價
- 關於github tree 在 Marlin Firmware Github - Onkel Adler 的評價
- 關於github tree 在 Best Github Games - Interior By Altintas 的評價
- 關於github tree 在 multi agent pacman github - Paolo Trianni 的評價
- 關於github tree 在 Babylon Js Github 的評價
- 關於github tree 在 Tumor Immunology and Immunotherapy - Integrated Methods Part B 的評價
- 關於github tree 在 How to Download From GitHub: A Beginner's Guide 的評價
- 關於github tree 在 RESTful Java Web Services Security - Google 圖書結果 的評價
- 關於github tree 在 Introduction to Machine Learning with Applications in ... 的評價
- 關於github tree 在 Learning Apache Apex: Real-time streaming applications with Apex 的評價
github tree 在 Taipei Ethereum Meetup Facebook 的精選貼文
📜 [專欄新文章] Unirep介紹: 使用ZKP的評價系統
✍️ Ya-Wen Jeng
📥 歡迎投稿: https://medium.com/taipei-ethereum-meetup #徵技術分享文 #使用心得 #教學文 #medium
Unirep是什麼? 怎麼用?
Photo by Raphael Lovaski on Unsplash
UniRep 是一個使用零知識證明(Zero-knowledge Proof)而達到具有隱私保障的評價 (reputation) 系統。使用者有權利享有多個暫時性的身份,但又同時能提出證明,讓其他人可以驗證評價是否符合自己宣稱的數量。此外,使用者也無法拒絕接收對自己不利的評價。
想像一個情境:如果Alice是Airbnb的使用者,Alice常常透過Airbnb租房,且Alice曾經獲得獲得許多Airbnb房東的好評;有一天Alice想透過Booking.com訂房,http://xn--alicebooking-kt4so6lvyab96x7trhi5b54x.com/,所以在Booking.com上沒有任何評價,萬一Booking.com的房東不想把房子租給來路不明的客人,那Alice要如何向Booking.com的房東證明她其實都是用Airbnb租房,且獲得許多好評?
Alice雖然可以透過截圖或公開自己的資訊向Booking.com的房東證明自己擁有這些好評,但這樣Alice的隱私或許會被洩漏,例如Alice不想讓Booking.com的房東知道自己去過哪些地方、住過哪些民宿;或者Alice有可能偽造截圖,或者偽造評價,那Booking.com的房東要如何相信Alice所提供的證明文件是真的來自Airbnb的房東?除此之外有沒有更彈性的方式,Alice可以選擇性地向Booking.com的房東證明,自己至少有10個好評,但不透露自己總共有多少好評?
Photo by Andrea Davis on Unsplash
使用Unirep協定就可以解決這個問題。UniRep 取名自 Universal Reputation,希望透過區塊鏈上智能合約的可互用性 (interoperable,指智能合約容易被多方呼叫且容易透過智能合約與對方互動),讓不管是Airbnb的房東、Booking.com的房東或是Alice都能很容易地透過Unirep的智能合約與對方互動,且透過零知識證明的方式,讓Alice的評價具有隱私的保障,Alice不用明確地向Booking.com的房東說這些評價是怎麼獲得、是什麼時候獲得,也可以彈性的證明自己至少有多少好評,或者最多有多少差評。
密碼學
Unirep主要用到的密碼學方法有
雜湊函數 hash:若有一個雜湊函數 f(x) = y 則由x可以很輕易的用f算出y,但從y推回x是幾乎不可能的,且要找到兩個不同的x對應到相同的y也是幾乎不可能的(沒有碰撞問題)。
零知識證明 zero-knowledge proof:可以將複雜的運算邏輯轉成容易驗證且具有隱私保障的驗證問題,使用者只要將變數輸入,這個零知識證明的演算法就會產生對應的證明且計算出對應的結果,使用者只要將此證明和運算結果輸入驗證的程序中,其他人就能驗證使用者是不是提出正確的證明,若驗證成功,則驗證者就能相信提出證明者高機率擁有正確的知識,也就是在計算證明時的輸入變數。
ZKP Proof System
ZKP Verification System
Semaphore:semaphore 是設計為可以用零知識證明驗證的身份認證系統。Unirep 中用來產生私鑰 (identity) 和公鑰的 hash 值(identity commitment),讓使用者不必公開 identity 仍能透過零知識證明驗證其公私鑰的對應性。
雜湊樹 Merkle trees:Unirep 中大量運用雜湊樹的方式確保評價紀錄,而其中用到的雜湊樹又分兩種:Incremental merkle tree 和 Sparse merkle tree
Incremental merkle tree: 從 index 0 開始依序插入雜湊樹中的樹葉。為了使 ZKP 的 circuit 大小固定, Unirep 中使用固定高度的 Incremental merkle tree。
Sparse merkle tree: 在特定的 index i 插入樹葉
Incremental merkle tree and sparse merkle tree
UniRep中用到的名詞定義
Epoch
指一段特定的時間,例如7天
UniRep 的 Epoch 從 1 開始計算,7天過後Epoch數加一,即 Epoch 變為 2
Epoch Key
每個使用者在每個 Epoch 都能產生 n 把 Epoch key,用來收取評價 epoch_key = hash (id, epoch, nonce)
id: 這裡指用 semaphore 產生的 identity
epoch: 表示這是在第幾個 epoch 產生的 epoch key
nonce: 若 Unirep 規定使用者能在一個 epoch 產生 5 把 epoch key,則使用者可以選從 0 到 4 為此 nonce
因為雜湊函數的性質,算出來的 epoch key 很難推回原本的 id, epoch, nonce, 所以看到 epoch key 並不能推回使用者是誰。
以Alice為例,當Alice住完Airbnb,房東會透過 epoch key 給予 Alice 評價,但房東無法知道 Alice 在同個 epoch 的其他 epoch key 是哪一把,也無法知道 Alice 在別的 epoch 獲得的評價,除非 Alice 在這個 epoch 重複使用同一把 epoch key 收取評價。
User 使用者
用 semaphore 產生 identity 並使用此 identity 註冊的使用者
使用者是接收評價、證明評價、或是花費評價的人,用 epoch key 跟其他人互動,因為 epoch key 會隨著 epoch 增加而改變,所以對使用者來說每個 epoch 能產生的 epoch key 都不同,具有保護隱私的效果。
在上面的例子中使用者指的是 Alice, Bob, Airbnb 的房東, Booking.com的房東
Attester 證人
用 Ethereum address 或 smart contract address 註冊的用戶
是會被使用者記錄下來的評價給予者
Unirep 會給這些 address 一個 attester ID,而這個 attester ID 不會隨著 epoch 增加而改變,使用者可以知道這個評價是來自哪一個 attester。
在上面的例子中指的是 Airbnb 跟 Booking.com,因為 attester ID 不變,所以使用者可以證明這些評價是來自於 Airbnb 或是 Booking.com
User State Tree (UST)
是一 Sparse merkle tree
每個使用者都有自己的 User State Tree,其中樹葉表示所收到的評價的hash值,而葉子的 index 表示 attester ID,UST 樹葉的定義為
USTLeaf = hash(posRep, negRep, graffiti)
例如 Airbnb 的 ID 是1,Booking.com 的 ID 是 3,那 Alice 的 User State Tree 中 index 為 1 的地方會有自己在 Airbnb 獲得的總評價的 hash 值,而 index 為三的地方則為空的評價。另一個使用者 Bob 的 User State Tree 亦同,在 index 為 1 的地方會有自己在 Airbnb 獲得的評價,在 index 為 3 的地方會有自己在 Booking.com的評價。
Global State Tree (GST)
是一固定樹高的 Incremental merkle tree
Global State Tree 的葉子到樹根都是公開的資訊,當有使用者註冊或者更新 User State Tree 時會在 Global State Tree 裡新增一個新的樹葉,GST 樹葉的定義為:
GSTLeaf = hash(id, USTRoot)
先送出的樹葉先插入到較前面的 index,之後的樹葉依序插入 GST 中。
以 Alice的例子來說,當 Alice跟 Bob註冊 Unirep時,都會產生一個 GST的樹葉,更新 GST的樹根,若 Alice先註冊,則 Alice的 index會較 Bob前面。注意,這邊的 Airbnb 和 Booking.com 等 attester 並不是用這棵 Global State Tree註冊。
Epoch Tree
是一個 Sparse merkle tree
Epoch Tree 跟 Global State Tree 一樣從葉子到樹根都是公開的資訊,Epoch Tree 中樹葉的 index 為 epoch key,而樹葉的值為該 epoch key 的 sealed hash chain
每個 epoch key 都有一個 hash chain,hash chain 的定義為
hashedReputation = hash(attestIdx, attesterID, posRep, negRep, graffiti)hashChain[epochKey] = hash(hashedReputation, hashChain[epochKey])
此 hash chain 是為了防止使用者漏收了哪一筆評價,如果使用者少收了其中一筆評價,則 hash chain 的結果會完全不同。最後驗證時如果其中一個 epoch key 的 hash chain 改變,會造成 epoch tree 樹根跟原本的 epoch tree 的樹根不同。
而 Sealed hash chain 是在每個 epoch 結束後,Unirep 智能合約會再將這條 hash chain 再 hash 一次
sealedHashChain[epochKey] = hash(1, hashChain[epochKey]) isEpochKeyHashChainSealed[epochKey] = true
需要再把這條 hash chain 封起來的用意是,避免這把 epoch key 過了這個 epoch 之後再繼續接收評價,所以 epoch tree 會用這個 epoch key 最後的 sealed hash chain 去計算樹根。
Nullifier
中文翻譯為註銷符,當我們要防止一件事情重複發生時,就可以使用這個 Nullifier
Unirep 中使用到 Epoch key nullifier:此 nullifier 是用來限制使用者不能在不同的 epoch 使用重複的 epoch key 去收取評價,也不能被其他使用者使用;此外也可以用來檢視使用者是否重複執行 UST 的更新
Nullifier 也用 hash 計算,但多使用一個 domain 變數,避免與 epoch key 產生相同的 nullifier 而洩露自己擁有的 epoch key,也可以用不同的 domain 產生不同用途的 nullifier
epochKeyNullifier = hash(EPOCH_KEY_DOMAIN, id, epoch, nonce)
Epoch Transition
一個 epoch 結束過後,要透過 epoch transition 的步驟,更新 Unirep 及使用者的狀態
其中要做的事包含將智能合約上的 epoch 數加一,還有將所有 epoch key 的 hash chain 封起來
接著使用者就可以執行 User State Transition 更新自己的 UST
User State Transition
到下一個 epoch 後,使用者可以透過自己的 identity,找出自己在前一個 epoch 所有的 epoch key,並根據每把 epoch key 收到的評價更新到自己的 UST,最後計算出最新的評價狀態,產生一個 GST的樹葉,插入 GST 中 (如同註冊時一樣)。
使用者之後如果要花費評價或者產生下一個 epoch 的 epoch key 時,因為必須確認自己的 UST 在當前的 epoch,所以需要經過 User State Transition 確保自己有一個 GST 的樹葉在 GST 中。
Unirep 協定
有了 Unirep 的名詞定義後,接著介紹 Unirep 是如何運作的。
註冊
Unirep 的 user 和 attester 的註冊方式不同:
User signup and attester signup in Unirep
User
User 透過 semaphore 產生 identity 和 identity commitment,identity 就如同私鑰,identity commitment 就如同公鑰
將 identity commitment 和預設的 UST 樹根經由 hash 計算得 GST 的一個樹葉
若使用者要證明自己在某個 epoch 有註冊或者有更新自己的 UST,則證明自己是 GST 的某一個樹葉,利用零知識證明的方法,輸入 identity、UST 樹根,還有 merkle tree 中要計算 hash 值的相鄰節點,則最後可得到一個 GST 的 root,其他人可以驗證這個 GST 的 root 是否符合這顆公開的 GST。
Attester
Attester 則是用自己的錢包,或者用智能合約的地址註冊,呼叫 attester sign up 的 function 後,Unirep 會指定一個 attester ID 給這個地址,往後 attester 用相同錢包或合約地址給予評價時,Unirep 會檢查此地址是否被註冊,若有註冊則可以給予 epoch key 評價。
以 Alice 和 Bob 為例,Alice、Bob、Airbnb的房東、Booking.com的房東會產生 identity 並且透過 Unirep 合約用 user 的註冊方式獲得一個 GST 的樹葉代表自己;
而 Airbnb 和 Booking.com 會透過 attester 的註冊方式,使用特定的錢包地址或是撰寫智能合約呼叫 Unirep 的 attester sign up function。
當然 Alice 或 Bob 如果想用自己的錢包註冊為 attester 也是可以,這時合約就會紀錄 Alice 和 Bob 的錢包地址,並給予一個新的 attester ID。
給予評價
在 Unirep 中評價的接收者是 epoch key,接著介紹 user 和 attester 是如何互動。
How an attester gives reputation to an epoch key
Alice 在 Unirep 註冊過後,就可以產生 epoch key 接收評價
epochKey = hash(identity, epoch, nonce)
但 Airbnb 的房東看到這把 epoch key,要如何知道 Alice 確實是 Unirep 的合法使用者,且 epoch key 的 是合法的,例如 nonce 小於 5,或者 epoch 是當前的 epoch?
如果 Alice 直接提供 epoch 和 nonce,別人沒有 identity 也無法計算此 epoch key,更不用說如果 Alice 提供 identity 會造成 Alice 完全沒有隱私可言,所有人都可以計算出 Alice 收過哪些評價。
因此我們用一個零知識證明,證明此 epoch key 是合法的。細節請參考 epoch key proof,主要是證明使用者有一個合法的 GST 樹葉在 GST 中,並且 epoch 和 nonce 也都符合。
房東得到 Alice 提供的 epoch key 和 epoch key 的證明,並且透過 Unirep 的合約驗證通過之後,就可以給予評價。
獲得空投評價、使用者可以給予評價的限制可以由各個應用自行定義,例如 Airbnb 可以決定空投 30 個正評給使用者, Booking.com 可以決定空投 20 個正評給使用者。
另外,為了確認房東也是合法的使用者,也為了防止房東重複花費 (double spending) 自己的評價點數,Unirep 上的應用也可以用 reputation nullifier 及其 proof 去證明使用者合法使用自己的評價。
例如,此 reputation nullifier 可以用下列計算方式取得:
reputationNullifier = hash(REPUTATION_DOMAIN, id, epoch, nonce)
當 reputation nullifier 及 proof 產生後,就會與房東要給的評價一起發送到 Airbnb 的智能合約上,智能合約會驗證 proof 是否合法,nullifier 是否有被發送過,若檢查都通過的話則 Unirep 會紀錄此評價給 epoch key,並將 hash chain 更新。
接收評價
使用者即使可以證明自己擁有哪一把 epoch key 並且大家都知道這把 epoch key 有多少評價,但這有可能造成使用者故意忽略其他把 epoch key 中對自己不好的評價,因此 Unirep 限制使用者只能在每個 epoch 結束,每把 epoch key 都封起來之後,才能用 User State Transition 更新自己的評價。
User State Transition in Unirep
這裏也是用 User State Transition Proof 去保證使用者是根據正確的方式計算出最新的 UST,且用 epoch tree 限制使用者必須處理每一把 epoch key 的結果。
亦即,需要等到 epoch 結束後,Alice 才能透過 User State Transition 獲得 Airbnb 房東的評價,更新自己的使用者狀態。
證明評價
當使用者通過 User State Transition 之後會有最新的 UST 狀態,此時 Alice 就可以透過 reputation proof 向 Booking.com 她有來自 Airbnb 的評價,在reputation proof 中檢查使用者是否有其宣稱的 UST (例如總共有多少好評、多少差評來自哪一個 attester ID),並且此 UST 的狀態儲存在當前 epoch 的 GST 中。
在生成 reputation proof 時,即使 Alice 總共有 100 個好評,但 Alice 仍可以產生「至少有10個好評」的證明,Booking.com 的房東若驗證成功,則只能知道 Alice 宣稱的「至少有 10 個好評」而不能知道 Alice 總共有 100 個好評。
常見問題
Alice 能不能給 Airbnb 的房東評價? Alice 能不能給 Bob 評價?
可以。
Airbnb 的房東和 Bob 也都能產生 epoch key,因此如果 Alice 有兩者的 epoch key 及合法的 proof 則可以給予評價。此時 Alice 可以選擇透過 Airbnb、Booking.com、或甚至自己的 Ethereum account 當作證人給予評價 (也必須選擇一個證人)。
Alice 可以透過 Unirep 給 Airbnb 評價嗎?
如果 Airbnb 也透過 Unirep 註冊為使用者,並且產生 epoch key 的話就可以。但如果 Airbnb 只註冊為證人的話不行。
Alice 可以證明評價來自哪一個 Airbnb 房東嗎?
如果 Airbnb 的房東沒有註冊為證人,則 Alice 不能證明評價來自哪個房東。
若 Airbnb 的房東用自己的 Ethereum account 註冊為證人,則 Alice 只能證明評價來自這個 Ethereum account,但無法知道這個 account 是一個 Airbnb 的房東。
從 Airbnb 獲得的評價可以在 Booking.com 花費嗎?
需看 Booking.com 的智能合約如何定義,但一般來說不行,因為 attester ID不同,但未來可能會開發各個應用程式之間的兌換評價功能。
如果遲遲不執行 User State Transition 會發生什麼事?會不會收不到之前的評價?
若 Alice 在第一個 epoch 註冊,並在第一個 epoch 產生 epoch key 接收評價,但 Alice 到第五個 epoch 才執行 User State Transition,那 Alice 會根據第一個 epoch 的 GST、epoch tree 執行 User State Transition,因此仍然可以在第五個 epoch 收到來自第一個 epoch 的評價;而在第二到第四個 epoch 因為 Alice 無法產生出合法的 epoch key proof,因此無法接收評價。
User State Transition 可以自動執行嗎?
不行。
只有使用者主動給出私鑰,即 semaphore 的 identity,才可以產生合法的 User State Transition proof,若將私鑰交給第三方幫忙執行可能會侵害使用者的隱私。
結論
Unirep 是一個具有隱私保障的評價系統,透過 ZKP 的保護使用者可以在匿名的情況下收取評價、給予評價、並且向他人證明自己的評價。Unirep 可以用於跨應用程式間的評價證明,可以在 A 應用程式中獲得評價,並向 B 應用程式證明在 A 應用程式中獲得多少評價。若想了解更多有關 Unirep ,可以參考 Github、文件或加入 telegram 群組討論。
本文感謝 CC, Nic, Kevin, Doris 協助審稿。
Unirep介紹: 使用ZKP的評價系統 was originally published in Taipei Ethereum Meetup on Medium, where people are continuing the conversation by highlighting and responding to this story.
👏 歡迎轉載分享鼓掌
github tree 在 Taipei Ethereum Meetup Facebook 的精選貼文
📜 [專欄新文章] 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.
👏 歡迎轉載分享鼓掌
github tree 在 在地上滾的工程師 Nic Youtube 的最讚貼文
硬核的知識也許不是每個工程師都能夠在職涯發展中完全運用到,但無論是本科系、轉職、自學成為工程師的朋友,都應該要知道,這些紮實的背景知識提早學習起來,在未來的日子裡,只有好沒有壞。
就透過本影片我的真實經驗分享,告訴你這些我在大學時期看似枯燥乏味的理論,其實就是程式設計內功,而日後沉睡已久的內功卻又恰巧的在職涯旅途中碰上用處。
章節:
00:00 學這些有用嗎
00:52 我與速成班的距離
04:45 業務增長後的影響
06:36 基本功知識科普
喜歡影片的話!可以幫忙點個喜歡以及分享、訂閱唷!😘
━━━━━━━━━━━━━━━━
⭐ 蝦皮賣場: https://shopee.tw/bboyceo
⭐ instagram (生活日常): https://www.instagram.com/niclin_tw/
⭐ Facebook (資訊分享): https://www.facebook.com/niclin.dev
⭐ Blog (技術筆記): https://blog.niclin.tw
⭐ Linkedin (個人履歷): https://www.linkedin.com/in/nic-lin
⭐ Github: https://github.com/niclin
⭐ Podcast: https://anchor.fm/niclin
━━━━━━━━━━━━━━━━
🌟 任何問題或合作邀約信箱: niclin0226@gmail.com
#資料結構 #演算法 #計算機概論 #前端 #後端 #工程師
github tree 在 prasertcbs Youtube 的精選貼文
? เนื้อหาประกอบด้วย
► แสดงกราฟหลาย ๆ รูปพร้อมกันด้วย seaborn.relplot() เพื่อแสดงยอดผู้ติดเชื้อ COVID-19 แยกตามประเทศ
► เทคนิคการกรองข้อมูลเพื่อใช้สร้างกราฟ เช่น แสดงเฉพาะประเทศที่มียอดผู้ติดเชื้อเกิน 10,000 ราย
► การปรับแต่งส่วนประกอบต่าง ๆ ของกราฟ เช่น ขนาด สี รวมถึงกำหนดให้แสดงแบบ log scale
ข้อมูล time series บน github ► https://github.com/CSSEGISandData/COVID-19/tree/master/csse_covid_19_data/csse_covid_19_time_series
ดาวน์โหลด Jupyter Notebook ที่ใช้ในคลิปได้ที่ ► https://bit.ly/34BA4lm
? เชิญสมัครเป็นสมาชิกของช่องนี้ได้ที่ ► https://www.youtube.com/subscription_center?add_user=prasertcbs
สอน data science ด้วยข้อมูล COVID-19 ► https://www.youtube.com/watch?v=yEiBeyEASRM&list=PLoTScYm9O0GEZpIlV6-_ppgQmBO0luWG-
สอน Pandas ► https://www.youtube.com/playlist?list=PLoTScYm9O0GGsOHPCeufxCLt-uGU5Rsuj
สอน Jupyter Notebook ► https://www.youtube.com/playlist?list=PLoTScYm9O0GErrygsfQtDtBT4CloRkiDx
สอน Machine learning ► https://www.youtube.com/playlist?list=PLoTScYm9O0GH_3VrwwnQafwWQ6ibKnEtU
สอน Python สำหรับ data science ► https://www.youtube.com/playlist?list=PLoTScYm9O0GFVfRk_MmZt0vQXNIi36LUz
สอน Numpy ► https://www.youtube.com/playlist?list=PLoTScYm9O0GFNEpzsCBEnkUwgAwOu_PWw
สอน matplotlib ► https://www.youtube.com/playlist?list=PLoTScYm9O0GGRvUsTmO8MQUkIuM1thTCf
สอน seaborn ► https://www.youtube.com/playlist?list=PLoTScYm9O0GGC9QvLlrQGvMYatTjnOUwR
สอนภาษาไพธอน Python เบื้องต้น ► https://www.youtube.com/playlist?list=PLoTScYm9O0GH4YQs9t4tf2RIYolHt_YwW
สอนภาษาไพธอน Python OOP ► https://www.youtube.com/playlist?list=PLoTScYm9O0GEIZzlTKPUiOqkewkWmwadW
สอน Python 3 GUI ► https://www.youtube.com/playlist?list=PLoTScYm9O0GFB1Y3cCmb9aPD5xRB1T11y
สอนการใช้งานโปรแกรม R: https://www.youtube.com/playlist?list=PLoTScYm9O0GGSiUGzdWbjxIkZqEO-O6qZ
สอนภาษา R เบื้องต้น ► https://www.youtube.com/playlist?list=PLoTScYm9O0GF6qjrRuZFSHdnBXD2KVIC
#prasertcbs_datascience #prasertcbs #prasertcbs_pandas
github tree 在 DidoPopcorn 秋本桐 Youtube 的最佳貼文
事關秋本老豆開始接觸呢隻遊戲,秋本終於忍唔住要教下大家玩。
►離線天賦樹的GitHub: https://goo.gl/D7QaRU
►訂閱秋本追睇最新影片!♥ : https://goo.gl/sZ4Lx8
----------------------------------------------------------------------------------------
►Social Media♥ :
FB專頁 : https://www.facebook.com/MrPopcornDido
Instagram: http://instagram.com/didopopcorn
----------------------------------------------------------------------------------------
Tasty Planet 全集!
► https://goo.gl/6VKVRg
【VLOG】同大家介紹,我既新老婆。
► https://youtu.be/2msMmJ3prPs
----------------------------------------------------------------------------------------
發表感想請不要介意留下評論♥
喜歡影片可以按下Like~!
github tree 在 Octotree - GitHub code tree 的推薦與評價
Browser extension that enhances GitHub code review and exploration. Features * Fast IDE-like code tree * Quick search in tree format ... ... <看更多>
github tree 在 Octotree - GitHub code tree - Firefox Browser Add-ons - Mozilla 的推薦與評價
Browser extension that enhances GitHub code review and exploration. Features * IDE-like code tree * Folder and file search * Support GitHub dark mode ... <看更多>
github tree 在 Git trees - GitHub Docs 的推薦與評價
A Git tree object creates the hierarchy between files in a Git repository. You can use the Git tree object to create the relationship between directories and ... ... <看更多>