【DAY10】 - Construct the basis of website UI

14th鐵人賽 blockchain web3 dapp ethereum

foodchain

2022-09-25 00:02:49

546 瀏覽

分享至

Preface

今天終於來到了設計使用者介面的部分（只有使用者使用的部分，之後驗證系統使用的部分會再做一次設計），但其實因為我的前端底子「幾乎可以說是新手」，所以我一開始就沒有打算做出什麼精美、有很多特效的網頁，所以大部分還是會以靜態、功能性為主、甚至是醜醜的網頁為目標！所以請想要做出美美網頁的人可以左轉 W3S School 了 XD。

另外我也學習了一個新的框架 React.js，我也會稍微介紹 React 與一般網頁的不同。

pic from 我知道 React，但 Hook 是什麼?

設計

首先我設計了這個網站的使用流程

登入：一點進去網站正中央會有一個大大的Log in Button，點進去會跳出瀏覽器外掛的 Injected provider （通常會是 Metamask）。
如果沒有安裝會跳出一個視窗 Link 到可以下載外掛的地方。

登入後可以在 Mint 的頁面選擇你是哪一種身分。

對應不同身分會跳去不同的 Mint 頁面。
按下 Mint 與數量後合約會將這些 Ticket Mint 到你的錢包中。

在側面的 List 中可以選擇 QR CODE 的部分，這一頁可以讓使用者「挑選需要的 token 來製作 QR CODE」。

React simple introduction

網站的實作我使用的是 React.js。基本上 React.js 這個框架可以把網頁中的每一個部分分解成 Component。如此一來，在網頁更新時，就會透過更新 Component 而非更新整頁來達到更快的讀取、送出速度等效果。

一般的網頁

一般的網頁運作的方式如下

我們在點網頁上的連結時，網頁會發送一個 request 給 server。
隨後 Server 會依照 request 的內容回傳相對應的網頁資訊。
使用者在網頁點擊其他頁面時，會再送一個 request 到 server。
最後 server 再回傳相對應的網頁內容回去。

React Router

而 React 則可以透過一個稱為 React Router DOM 的插件來達到以下做的事情。

首先，網頁還是會送出一個 initial request 給 server。
但是 server 除了初始頁面（index.html）以外，也會傳送一個 js bundle 到網頁端。
隨後在點擊其中的分頁時，會直接與 React js bundle 裡面的（假 server）互動，直接送出相對應的頁面。如此一來可以減少與 server 互動的時間，UX 的速度會非常的快速！

Implement

今天會先做出一個簡單的頁面，上面會有 Login 的 Button 和頁面最上方的 header！

首先我在 src 裡面做了一個新的 Navbar.js。

Extension

我在 vsCode 裡面下載了一個插件叫做「Simple React Snippets」，可以輸入 sfc，讓一個空白頁面自動做出一個像下面的格式：

const  = () => {
  return (  );
}
 
export default ;

這些插件真的是很方便，減少我們打字的時間。不過這就是工程師們的本性(?)，為了可以更偷懶的開發而產生出了這麼多的好產品和插件。（除此之外還有很多快速鍵）

Navbar.js

接下來就是刻出一個 navbar 了！

我將之前學習的資源中寫的頁面為基礎，再做出一點微調。

以下是目前刻出的頁面：

import { Link } from 'react-router-dom';
import Web3 from 'web3';

const Navbar = () => {
  return (
    <nav className="navbar">
      <div className="list">
        <button className='list-btn'>
          <svg width="38" height="33" viewBox="0 0 38 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="38" height="7" rx="3.5" fill="black"/>
            <rect y="13" width="38" height="7" rx="3.5" fill="black"/>
            <rect y="26" width="38" height="7" rx="3.5" fill="black"/>
          </svg>  
        </button>
      </div>
      <div className="olympics-symbol">
        <svg xmlns="http://www.w3.org/2000/svg" height="158" width="342" className='OlymLogo'>
          <g strokeWidth="9.5" stroke="#000" fill="none">
            <circle cx="54" cy="54" r="49.25" stroke="#0081c8"/>
            <circle cx="171" cy="54" r="49.25"/>
            <circle cx="288" cy="54" r="49.25" stroke="#ee334e"/>
            <circle cx="112.5" cy="104" r="49.25" stroke="#fcb131"/>
            <circle cx="229.5" cy="104" r="49.25" stroke="#00a651"/>
            <path d="M93.4,24.45A49.25,49.25 0 0 1 93.4,83.55" stroke="#0081c8"/>
            <path d="M210.4,24.45A49.25,49.25 0 0 1 210.4,83.55M171,103.25A49.25,49.25 0 0 1 141.45,93.4"/>
            <path d="M288,103.25A49.25,49.25 0 0 1 258.45,93.4" stroke="#ee334e"/>
          </g>
        </svg>
      </div>
      <div className="title">
        <h1> OLYMPIC TICKET SYSTEM </h1>
      </div>
      <button className='log-in-btn'>
        Log in MetaMask
      </button>      
      
    </nav>
  )
}

export default Navbar;

比較麻煩的是，我使用 svg 的圖檔（像是Olympics 的 logo、最左邊的 list），但是在頁面上似乎有點難調整它的位置，未來有時間的時候可再將其多做調整。