Bước đầu tiên bạn sẽ làm để xây dựng một Dapp đúc NFT là chuẩn bị tác phẩm nghệ thuật. Nếu không có tác phẩm nghệ thuật, bạn không thể thực hiện dự án NFT của mình. Một lý do khác để xử lý trước các tác phẩm nghệ thuật của bạn là để tạo siêu dữ liệu cho từng hình ảnh. Nếu không có siêu dữ liệu này, NFT của bạn không thể được bán ở bất kỳ thị trường thứ cấp lớn nào, chẳng hạn như Opensea. Ví dụ: hình ảnh bên dưới là một NFT trong thị trường Opensea mang một số siêu dữ liệu cũng có thể được nhìn thấy bên dưới. Thông tin trên bao gồm tác phẩm nghệ thuật, chi tiết và đặc điểm của nó có thể được nhìn thấy trên hình ảnh IPFS bên dưới. Thiết lập phụ thuộc dự án Mở thiết bị đầu cuối của bạn và điều hướng đến thư mục dự án của bạn hoặc tạo một thư mục dự án tại một vị trí cụ thể. Ví dụ: chạy trên thiết bị đầu cuối sẽ tạo một thư mục có tên là “ trên vị trí đã chỉ định của bạn. **mkdir preprocessor** prerocessor” Tiếp theo, chạy các lệnh sau trên thiết bị đầu cuối. cd preprocessor npm init -y npm install sharp @faker.js/faker --save-dev Các lệnh trên sẽ cài đặt cả thư viện và vào dự án của bạn. Thư viện faker sẽ giúp chúng tôi tạo ra thông tin ngẫu nhiên. Trong khi đó, thư viện sắc nét sẽ giúp chúng ta xử lý hình ảnh theo một kích thước, chất lượng và định dạng nhất định. sharp faker Tiếp theo, tạo một thư mục trong dự án của bạn có tên là và một thư mục khác được gọi là . Trong thư mục "Arts", đặt tất cả các hình ảnh để xử lý bên trong nó. arts outputs Với các bước trên đã hoàn thành, hãy mở dự án trên “VS code”. Cấu trúc dự án sẽ giống như bên dưới. - preprocessor/ - arts/ - node_modules/ - outputs/ - package.json - package-lock.json Tuyệt vời, chúng ta hãy chuyển sang mã hóa công cụ chịu trách nhiệm xử lý hình ảnh. Điều kiện tiên quyết Bạn sẽ cần cài đặt phần sau trên máy tính của mình để hoàn thành hướng dẫn này. NodeJs Ứng dụng máy tính để bàn IPFS Mã VS Mã hóa công cụ xử lý Tạo một tệp ở gốc của dự án của bạn có tên và dán mã sau **imagify.js** const fs = require('fs') const path = require('path') const sharp = require('sharp') const { faker } = require('@faker-js/faker') const input = './arts' const output = './outputs' let img_counter = 1 const imgSize = { width: 500, height: 500 } const desired_ext = '.webp' const base_url = 'https://ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/' const attributes = { weapon: [ 'Stick', 'Knife', 'Blade', 'Clube', 'Ax', 'Sword', 'Spear', 'Gun', 'Craft', ], environment: [ 'Space', 'Sky', 'Desert', 'Forest', 'Grassland', 'Moiuntains', 'Oceans', 'Rainforest', ], rarity: Array.from(Array(10).keys()), } fs.readdirSync(input).forEach((file) => { const orginal_ext = path.extname(file) const orginal_file_name = path.basename(file).split('.')[0] if (['.jpg', '.jpeg', '.png', '.gif', '.webp'].includes(orginal_ext)) { const id = img_counter const metadata = { id, name: `Adulam NFT #${id}`, description: 'AI Arts NFTs Collection, Mint and collect the hottest NFTs around.', price: 1, image: base_url + id + desired_ext, demand: faker.random.numeric({ min: 10, max: 100 }), attributes: [ { trait_type: 'Environment', value: attributes.environment.sort(() => 0.5 - Math.random())[0], }, { trait_type: 'Weapon', value: attributes.weapon.sort(() => 0.5 - Math.random())[0], }, { trait_type: 'Rarity', value: attributes.rarity.sort(() => 0.5 - Math.random())[0], max_value: 10, }, { display_type: 'date', trait_type: 'Created', value: Date.now(), }, { display_type: 'number', trait_type: 'generation', value: 1, }, ], } if (fs.existsSync(`${input}/${orginal_file_name + orginal_ext}`)) { sharp(`${input}/${orginal_file_name + orginal_ext}`) .resize(imgSize.height, imgSize.width) .toFile(`${output}/images/${id + desired_ext}`, (err, info) => console.log(err), ) fs.writeFileSync(`${output}/metadata/${id}.json`, JSON.stringify(metadata), { encoding: 'utf-8', flag: 'w', }) } console.log(metadata) img_counter++ } }) Các bước sau đây sẽ giúp bạn hiểu cách hoạt động của công cụ xử lý siêu dữ liệu này. Nhập các thư viện thiết yếu const fs = require('fs') const path = require('path') const sharp = require('sharp') const { faker } = require('@faker-js/faker') const input = './arts' const output = './outputs' đại diện cho hệ thống tệp, nó là một mô-đun có sẵn đi kèm với NodeJs. Nó có trách nhiệm quản lý các hoạt động đọc và ghi tệp trên máy của bạn. fs Đường là một mô-đun nút khác giúp bạn điều hướng qua các cấu trúc thư mục trên máy của bạn. Điều này sẽ là công cụ để xác định nơi hình ảnh của chúng tôi được lưu giữ. path Sharp là mô-đun chúng tôi sử dụng để xử lý hình ảnh, chẳng hạn như thay đổi kích thước và chuyển đổi thành một loại tệp khác. Chúng tôi sẽ sử dụng faker để tạo ra một số ngẫu nhiên. Cuối cùng, biến chứa vị trí đặt ảnh được xử lý và trỏ đến vị trí lưu ảnh đã xử lý. input output Xác định các biến cần thiết let img_counter = 1 const imgSize = { width: 500, height: 500 } const desired_ext = '.webp' const base_url = 'https://ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/' const attributes = { weapon: [ 'Stick', 'Knife', 'Blade', 'Clube', 'Ax', 'Sword', 'Spear', 'Gun', 'Craft', ], environment: [ 'Space', 'Sky', 'Desert', 'Forest', 'Grassland', 'Moiuntains', 'Oceans', 'Rainforest', ], rarity: Array.from(Array(10).keys()), } Các mã trên chứa các biến quan trọng sẽ được sử dụng trong quá trình tạo siêu dữ liệu của chúng tôi. giúp chúng tôi đánh số hình ảnh nhất quán với lần lặp hiện tại. **Image_counter** xác định kích thước chiều rộng và chiều cao của mỗi hình ảnh sẽ được xử lý. **ImgSize** nói về định dạng tệp mà bạn muốn hình ảnh đã xử lý của mình có. **Desired_ext** chỉ định vị trí lưu trữ hình ảnh trên IPFS. **Base_url** cung cấp thêm thông tin về siêu dữ liệu của mỗi hình ảnh. **Attributes** Thực thi tác vụ đệ quy fs.readdirSync(input).forEach((file) => { if(['.jpg', '.jpeg', '.png', '.gif', '.webp'].includes(orginal_ext)) { // Images and metadata tasks are recursively performed here... } }) Trong khối mã trên, chúng tôi đã sử dụng thư viện hệ thống tệp (fs) để lặp qua tất cả các hình ảnh trong vị trí (các môn nghệ thuật). Và đối với mỗi hình ảnh, chúng tôi đảm bảo rằng công cụ của chúng tôi chỉ chọn hình ảnh từ danh sách các tiện ích mở rộng đã được phê duyệt. **input** Thực hiện nhiệm vụ siêu dữ liệu const id = img_counter const metadata = { id, name: `Adulam NFT #${id}`, description: 'AI Arts NFTs Collection, Mint and collect the hottest NFTs around.', price: 1, image: base_url + id + desired_ext, demand: faker.random.numeric({ min: 10, max: 100 }), attributes: [ { trait_type: 'Environment', value: attributes.environment.sort(() => 0.5 - Math.random())[0], }, { trait_type: 'Weapon', value: attributes.weapon.sort(() => 0.5 - Math.random())[0], }, { trait_type: 'Rarity', value: attributes.rarity.sort(() => 0.5 - Math.random())[0], max_value: 10, }, { display_type: 'date', trait_type: 'Created', value: Date.now(), }, { display_type: 'number', trait_type: 'generation', value: 1, }, ], } Trong khối mã ở trên, chúng tôi đã cung cấp các giá trị cho mỗi không gian siêu dữ liệu. Ví dụ: môi trường, vũ khí và tất cả các giá trị đặc điểm được cung cấp ngẫu nhiên và động. Thực hiện Nhiệm vụ Chuyển đổi Hình ảnh if (fs.existsSync(`${input}/${orginal_file_name + orginal_ext}`)) { sharp(`${input}/${orginal_file_name + orginal_ext}`) .resize(imgSize.height, imgSize.width) .toFile(`${output}/images/${id + desired_ext}`, (err, info) => console.log(err), ) fs.writeFileSync(`${output}/metadata/${id}.json`, JSON.stringify(metadata), { encoding: 'utf-8', flag: 'w', }) } console.log(metadata) img_counter++ Trong đoạn mã ở trên, chúng tôi đã sử dụng lại mô-đun hệ thống tệp để định vị trước tiên từng tác phẩm nghệ thuật của chúng tôi và thay đổi kích thước nó thành kích thước được chỉ định của chúng tôi (500 x 500). Ngoài ra, chúng tôi đã cung cấp một tên mới phù hợp với lần lặp hiện tại và đặt cho nó phần mở rộng mong muốn của chúng tôi (webp). Thay đổi kích thước và chuyển đổi hình ảnh thành đã tối ưu hóa đáng kể các tác phẩm nghệ thuật của chúng tôi lên một tầm cao đáng kinh ngạc. webp Ví dụ: , nơi tôi đặt công cụ tiền xử lý hình ảnh này lên hình ảnh với tổng kích thước là . Kích thước đã giảm xuống cho phần mở rộng và cho phần mở rộng . Việc giảm kích thước khổng lồ đó tạo ra một bước nhảy vọt về thời gian tải của một trang web Minting được xây dựng bằng hình ảnh của tôi. trong video này 99 111MB 62MB .png 4.5MB .webp Cuối cùng từ khối mã ở trên, chúng tôi đã tạo siêu dữ liệu cho mỗi hình ảnh được xử lý, mang cả tên giống hệt nhau và URL trỏ đến vị trí của hình ảnh. Siêu dữ liệu này là những gì chúng tôi sẽ triển khai cho IPFS sau khi xử lý hình ảnh. JSON Bây giờ, hãy chạy lệnh dưới đây để chuyển đổi hình ảnh của bạn. Hãy chắc chắn rằng bạn đang ở trong thư mục dự án của mình. node imagify.js Tại thời điểm này, chúng ta đã hoàn tất với công cụ hình ảnh của mình, kết quả là thư mục đầu ra của chúng ta sẽ có cấu trúc tệp như sau. - output/ - images - 1.webp - 2.webp - ...... - metadata - 1.json - 2.json - ...... Tải hình ảnh và siêu dữ liệu lên IPFS IPFS là viết tắt của hệ thống tệp liên hành tinh, nó ngang hàng và phi tập trung. Không có cách nào dễ dàng để lấy ra dữ liệu được lưu trữ trên IPFS và do đó, nó là một ứng dụng ngang hàng gần như hoàn hảo để sử dụng cùng với các ứng dụng blockchain của bạn để lưu trữ nội dung phương tiện. Để sử dụng theo cách dễ dàng và ít nhầm lẫn hơn, hãy truy cập trang cài đặt ứng dụng IPFS Desktop và làm theo hướng dẫn được chỉ định ở đó. Sau khi cài đặt thành công, hãy mở ứng dụng IPFS và tải lên FIRST, và tôi lặp lại, ĐẦU TIÊN tải lên thư mục hình ảnh. Một chuỗi CID (Nhận dạng nội dung) duy nhất sẽ được tạo như một phần của tên thư mục, hãy xem hình ảnh bên dưới. Bây giờ, hãy sao chép CID của thư mục hình ảnh mà bạn có thể thấy từ hình trên và thay thế nó trong mã của bạn. Xem mã bên dưới. **imagify.js** const base_url = "https://ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/" //old string const base_url = "https://ipfs.io/ipfs/QmY1zrFibpdHQ7qcqZqq7THsqTremZYepXNWR5Au3MF1ST/" //new string Bây giờ, hãy chạy lại để đưa vị trí chính xác của từng hình ảnh vào siêu dữ liệu của bạn. Xem ví dụ về siêu dữ liệu JSON được tạo trước và sau khi thay thế CID. **node imagify.js** JSON Bạn có thể xem video này để hiểu cách tôi sử dụng những Hình ảnh và siêu dữ liệu này trong một Dự án đúc tiền NFT đầy đủ. https://www.youtube.com/watch?v=QN3wb_mXBjY?embedable=true Trước khi thay thế CID { id: 97, name: 'Adulam NFT #97', description: 'AI Arts NFTs Collection, Mint and collect the hottest NFTs around.', price: 1, image: 'https://ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/97.webp', demand: '4', attributes: [ { trait_type: 'Environment', value: 'Forest' }, { trait_type: 'Weapon', value: 'Craft' }, { trait_type: 'Rarity', value: 4, max_value: 10 }, { display_type: 'date', trait_type: 'Created', value: 1664478034024 }, { display_type: 'number', trait_type: 'generation', value: 1 } ] } Sau khi thay thế CID { id: 97, name: 'Adulam NFT #97', description: 'AI Arts NFTs Collection, Mint and collect the hottest NFTs around.', price: 1, image: 'https://ipfs.io/ipfs/QmY1zrFibpdHQ7qcqZqq7THsqTremZYepXNWR5Au3MF1ST/97.webp', demand: '7', attributes: [ { trait_type: 'Environment', value: 'Moiuntains' }, { trait_type: 'Weapon', value: 'Clube' }, { trait_type: 'Rarity', value: 2, max_value: 10 }, { display_type: 'date', trait_type: 'Created', value: 1664478110287 }, { display_type: 'number', trait_type: 'generation', value: 1 } ] } Cuối cùng, như thể hiện trong hình dưới đây, tải thư mục siêu dữ liệu lên IPFS cùng với thư mục hình ảnh. Tuyệt vời, bây giờ hãy ghim nó trên web để cả thế giới cùng xem. Hiện tại, cả hai thư mục đều nằm trên nút IPFS cục bộ của bạn (Máy tính của bạn), để có thể truy cập được trên toàn thế giới, bạn cần sử dụng dịch vụ Ghim chẳng hạn như . Pinata Ghim các thư mục của bạn vào IPFS Đầu tiên, hãy truy cập trình và đăng ký nếu bạn chưa làm điều đó trước đây. Sau đó nhấp vào biểu tượng tài khoản và chọn Khóa API. Xem hình ảnh bên dưới. quản lý pin Pinata Trên trang tạo khóa, nhấp vào tạo khóa mới và nhập tên cho khóa. Quan sát hình ảnh bên dưới. Bây giờ sao chép khóa JWT trên khay nhớ tạm của bạn. Đây là những gì chúng tôi sẽ sử dụng để liên kết Máy tính để bàn IPFS với tài khoản Pinata của chúng tôi. Xem hình ảnh bên dưới. Tiếp theo, mở ứng dụng máy tính để bàn IPFS của bạn, đi đến tab cài đặt và thêm dịch vụ mới, chọn Pinata và dán mã thông báo JWT của bạn vào không gian được cung cấp. Tham khảo hình ảnh bên dưới. Điều cuối cùng cần làm là thực sự ghim các thư mục của bạn vào Pinata bằng cách sử dụng hướng dẫn bên dưới. Đi tới tab tệp, nhấp vào đường ba chấm và chọn đặt ghim. Điều này sẽ bật lên trong hình ảnh bên dưới. Chọn Pinata và áp dụng, bằng cách đó, thư mục hình ảnh của bạn sẽ có thể truy cập được trên toàn cầu. Xác nhận khả năng tiếp cận hình ảnh toàn cầu Truy cập trang web này, sao chép và dán CID của bạn vào trường đầu vào IPFS và nhấp vào nút bộ nhớ cache. Thao tác này sẽ quét toàn bộ tập hợp các cổng IPFS có sẵn công khai để tìm kiếm hình ảnh của bạn. Xem hình ảnh bên dưới. Kết quả từ hình ảnh trên cho thấy rằng nhiều nút IPFS hiện có sẵn các bản sao của thư mục hình ảnh và có thể truy cập được trên toàn cầu ngay cả khi bạn đã xóa bản sao gốc trên nút cục bộ của mình. Với các bước được vạch ra rõ ràng cho bạn, cũng Ghim thư mục siêu dữ liệu để hiển thị công khai chúng trực tuyến. Bây giờ bạn có thể sử dụng bất kỳ liên kết nào trong hình ảnh ở trên làm URL cơ sở của bạn cho các mã thông báo . Xem hình ảnh bên dưới. ERC721 Và bạn đã có nó, đó là cách chuẩn bị và tải lên các tác phẩm nghệ thuật của bạn trên IPFS. Sự kết luận Bạn sẽ luôn gặp phải nhu cầu hiểu cách xử lý trước và tải lên các tác phẩm nghệ thuật trên IPFS ở quy mô hàng loạt. Khi bạn hiểu cách làm việc và xử lý hình ảnh sang IPFS, bạn có thể bắt đầu sử dụng nó trên các dự án web3 đặc biệt của mình. Cho đến lần sau, hãy tiếp tục nghiền nát nó! Xem cách sử dụng demo trực tiếp trên dự án NFT của tôi trên mạng thử nghiệm Goerli . Xem vị trí của Opensea . Bạn có thể xem phiên bản video trên Kênh YouTube của tôi. tại đây tại đây https://www.youtube.com/watch?v=YzurgMLwFVQ?embedable=true Thông tin về các Tác giả Tôi là một nhà phát triển blockchain toàn diện với hơn năm kinh nghiệm trong ngành phát triển phần mềm. 6+ Bằng cách kết hợp Phát triển phần mềm, viết và giảng dạy, tôi trình bày cách xây dựng các ứng dụng phi tập trung trên các mạng blockchain tương thích với EVM. Các ngăn xếp của tôi bao gồm , , , , , , , , v.v. JavaScript React Vue Angular Node React Native NextJs Solidity để tìm hiểu cách tạo ứng dụng Web3 từ đầu. Tôi cũng cung cấp các lớp học riêng và chuyên biệt cho những người nghiêm túc muốn học trực tiếp từ một người cố vấn. Đăng ký kênh YouTube của tôi . Đặt các lớp học Web3 của bạn tại đây Bây giờ, hãy để tôi chỉ cho bạn cách thể hiện hình ảnh và siêu dữ liệu ở trên trong mã của bạn.
