Sistem Operasi Blockchain NEAR Protocol

Pada bulan Maret 2023, NEAR Protocol meluncurkan Sistem Operasi Blockchain/ Blockchain Operating System (BOS) dengan tujuan untuk menciptakan gerbang masuk yang ideal dari Open Web. Disini, idenya adalah untuk menjembatani kesenjangan antara web2 dan web3 dengan lancar. Artikel ini akan menjelaskan lebih lanjut mengenai BOS dan memahami cara kerjanya.

Apa itu Open Web?

“Open Web” merupakan suatu istilah yang digunakan untuk mendeskripsikan internet ketika menjadi sumber daya publik global yang tidak diawasi baik oleh penjaga maupun pengawas manapun. Jadi, mengapa Open Web ini dibutuhkan?

• Hal ini diperlukan untuk kebebasan dan keterbukaan dalam komunikasi dan berekspresi
• Open Web merupakan internet dari masyarakat dan untuk masyarakat. Ini memberdayakan individu untuk melangkah dan berkontribusi secara positif kepada masyarakat.

Sejak awal, visi NEAR adalah membantu memfasilitasi pembuatan Open Web. Pada dasarnya, Open Web perlu didesentralisasi, NEAR juga perlu membuat blockchain layer-1 yang dapat diskalakan yang mengabstraksi kompleksitas. Apakah NEAR mampu melakukan har tersebut? Mari kita simak.

• NEAR memiliki model akun yang fleksibel dan akun yang dapat dibaca manusia (human-readable).
• Mekanisme sharding Nightshade membuat NEAR sangat skalabel.
• NEAR juga menyediakan alat canggih untuk membantu pembangun mengembangkan protokol.

Setelah mengetahui dasarnya, NEAR sekarang perlu membuat tumpukan web3 yang akan membantu merampingkan Open Web onboarding untuk pengguna dan para pengembang (dev).

Bagaimana BOS Dapat Mencapai Open Web?

Bayangkan seperti apa yang dilakukan sistem operasi atau “OS”. OS memungkinkan para pengguna untuk berinteraksi dengan mesin canggih tanpa masuk ke kerumitan yang tidak perlu. Menjauhkan absraksi dan kompleksitas pada latar belakang sangat penting untuk adopsi teknologi secara massal.

Sekarang kita akan perluas logika itu ke dunia web3. Menurut Co-Founder NEAR Protocol Illia Polushkin, BOS merupakan lapisan umum untuk menjelajahi dan menemukan produk Web 3. Selain itu, BOS akan mendukung chain Near Protocol dan Ethereum Virtual Machine selama peluncuran. Bayangkan bagaimana kita dapat membuat aplikasi DeFi baru yang keren di Ethereum dan mendapatkan pengguna dari NEAR melalui BOS.

Menciptakan Frontend yang Dapat Disusun

Sebelum kita melangkah ke pembahasan yang lebih jauh, mari kita pahami terlebih dahulu apa itu frontend. Frontend merupakan bagaimana pengguna dapat berinteraksi dengan aplikasi. Ketika ini mengenai dApps, membuat aplikasi yang composable dan terdesentralisasi sangatlah diperlukan.  Jiwa utama dari web3 adalah desentralisasi. Lantas, mengapa kita masih menggunakan layanan terpusat untuk mengakses layanan tersebut? Mempercayai perantara seperti ini tentunya memiliki beberapa tantangan terkait keamanan.

BOS membantu menambahkan frontend yang dapat disusun ke tech stack dan dengan mudah memasukkan pengguna ke web3. Mengenai potensi BOS sebagai frontend, Polusukhin mengatakan seperti berikut:

“Front end yang terdesentralisasi dapat disusun sebagai kerangka kerja dapat berjalan dengan backend Web2 atau Web3 apa pun dan dari dompet apa pun. Di masa mendatang kami akan menawarkan [penggunaan] dompet dari satu rantai untuk berinteraksi dengan yang lain melalui penghubung yang lancar.”

3 Pilar dari BOS

BOS memiliki basis berdasarkan 3 pilar, diantaranya adalah:

• Gateway
• Komponen
• Blockchain

Gateway

Gateway dirancang untuk membuat frontend yang dijalankan secara lokal dan terdesentralisasi tersedia untuk semua orang. Gateway terdiri dari mesin virtual yang dirancang khusus yang memuat dan menjalankan frontend untuk protokol yang dibangun di atas Ethereum, L2, dan Lapisan 1 lainnya seperti NEAR. Kode untuk frontend ini disimpan di blockchain NEAR.

Komponen

Komponen adalah frontend untuk protokol on-chain maupun layer aplikasi seperti Lido, Uniswap, dan Aave. Pengembang dapat melihat kode untuk aplikasi ini di gateway yang mirip dengan melihat smart contract di Etherscan. Selain itu, mereka dapat melakukan fork pada aplikasi ini dan menerapkan versi mereka sendiri atau bahkan membuat komponen.

Blockchain

Komponen dapat memanggil fungsi pada blockchain apa pun. Saat ini, semua rantai EVM atau L2 dan NEAR telah didukung. Selain itu, source code untuk frontend (aplikasi) disimpan di NEAR karena kemampuannya untuk menyimpan HTML/CSS/JS dengan harga murah.

Meninjau di Frontend NEAR BOS

Ayo kita melihat bagaimana front-end bekerja secara langsung. Silakan mengakses laman alpha.near.org

Frontend menghubungkan pengguna ke semua kemungkinan Web3 yang berbeda dalam ekosistem. Siapa pun di ekosistem Open Web dapat membuat frontend mereka masing-masing, kompatibel dengan blockchain pilihan mereka. Ayo kita bermain-main dengan antarmuka dan melihat bagaimana cara kerjanya.

Saat kita menggulir ke atas, arahkan kursor ke “Discover” dan klik “Komponen”.

Komponen adalah aplikasi kecil yang dapat memecahkan masalah tertentu. Saat ini, kita memiliki beberapa komponen bawaan yang dapat kita gunakan untuk membuat frontend. Berikut adalah beberapa komponen bawaan yang tersedia.

Widget

Widget adalah unit minimum frontend. Ini memungkinkan kita untuk memasukkan komponen yang ada dalam kode kita, sehingga memungkinkan kita untuk membuat aplikasi yang kompleks dengan menyusun komponen.

Code:

​​const user = "gagdiez.near";
const props = { name: "Learn NEAR" };

return (
  <>
    <div class="container min-vw-100">

       <h3> Widgets </h3>
      <p> Here is a Widget </p>
      <hr />

      <Widget src={`${user}/widget/Greetings`} props={props} />
    </div>
  </>
);

Output:

Image Uploader

Image Uploader membuat pengguna dapat mengupload gambar secara langsung ke InterPlanetary File System (IPFS).

Code:

State.init({
  img: null,
});

return (
  <div className='container row'>
    <div>
      Image upload: <br />
      <IpfsImageUpload image={state.img} />
    </div>
    <div>
      Raw State:
      <pre>{JSON.stringify(state)}</pre>
    </div>
    <div className='mt-2'>
      {state.img.cid && (
        <img
          src={`https://ipfs.near.social/ipfs/${state.img.cid}`}
          alt='uploaded'
        />
      )}
    </div>
  </div>
);

Output:

Kita dapat menggunakan tombol untuk mengupload gambar

Files

Upload gambar dengan dukungan drag and drop

Code:

State.init({ img: null });

const uploadFileUpdateState = (body) => {
  asyncFetch(
    "https://ipfs.near.social/add",
    {
      method: "POST",
      headers: { Accept: "application/json" },
      body
    }
  ).then(
    (res) => {
      const cid = res.body.cid;
      State.update({ img: { cid } });
    }
  )
};

const filesOnChange = (files) => {
  if (files) {
    State.update({ img: { uploading: true, cid: null } });
    uploadFileUpdateState(files[0]);
  }
};

return (
  <div className="d-inline-block">
    { state.img?
      <img class="rounded w-100 h-100"
        style={{ objectFit: "cover" }}
        src={`https://ipfs.near.social/ipfs/${state.img.cid}`}
        alt="upload preview" />
      : ""
    }
    <Files
      multiple={false}
      accepts={["image/*"]}
      minFileSize={1}
      clickable
      className="btn btn-outline-primary"
      onChange={filesOnChange}
    >
      { state.img?.uploading ? <> Uploading </> : "Upload an Image" }
    </Files>
  </div>
);

Output:

Markdown

Komponen bawaan yang memungkinkan untuk merender Markdown.

Code:

const text = `
  #### Markdown Section
  Checkout Learn NEAR [here](https://learnnear.club/)
`;

return (
  <>
    <div class="container border border-info pt-3 min-vw-100 text-center">
      <Markdown text={text} />
    </div>
  </>
);

OverlayTrigger

Widget OverlayTrigger memungkinkan pengembang menampilkan teks atau ikon overlay saat mouse diarahkan di atas item tertentu.

Code:

State.init({
  show: false,
});

const handleOnMouseEnter = () => {
  State.update({ show: true });
};
const handleOnMouseLeave = () => {
  State.update({ show: false });
};

const overlay = (
  <div
    className='border m-3 p-3 rounded-4 bg-white shadow'
    style={{ maxWidth: "24em", zIndex: 1070 }}
    onMouseEnter={handleOnMouseEnter}
    onMouseLeave={handleOnMouseLeave}
  >
    This is the overlay Message
  </div>
);

return (
  <OverlayTrigger
    show={state.show}
    trigger={["hover", "focus"]}
    delay={{ show: 250, hide: 300 }}
    placement='auto'
    overlay={overlay}
  >
    <span
      className='d-inline-flex'
      style={{ backgroundColor: "gray", borderRadius: "10px", padding: "10px" }}
      onMouseEnter={handleOnMouseEnter}
      onMouseLeave={handleOnMouseLeave}
    >
      Place Mouse Over Me
    </span>
  </OverlayTrigger>
);

Output:

InfiniteScroll

Komponen ini memungkinkan kita membuat halaman atau elemen pengguliran tak terbatas yang sederhana dan ringan dengan mendukung elemen window dan elemen yang dapat digulir.

Code:

const allNumbers = Array.from(Array(100).keys())

State.init({
  displayNums: [],
  lastNumber: 0,
});

const loadNumbers = (page) => {
  allNumbers
    .slice(state.lastNumber, state.lastNumber + 10)
    .map((n) => numberToElem(n))
    .forEach((i) => state.displayNums.push(i));
  state.lastNumber += 10;
  State.update();
};

const numberToElem = (number) => <div> {number} </div>;

return (
  <div>
    <InfiniteScroll
      loadMore={loadNumbers}
      hasMore={state.displayNums.length < allNumbers.length}
    >
      {state.displayNums}
    </InfiniteScroll>
  </div>
);

Output:

Daftar pemuatan tanpa batas:

Typeahead

Komponen ini menyediakan kolom input type-ahead untuk memilih opsi dari daftar pilihan. Sederhananya, komponen ini digunakan untuk membuat fitur pelengkapan otomatis teks.

Code:

const options = ["Apple", "Banana", "Cherry", "Durian", "Elderberry"];

return (
  <div class="container min-vh-100 min-vw-100">
    <Typeahead
      options={options}
      multiple
      onChange={(value) => {State.update({choose: value})}}
      placeholder='Choose a fruit...'
    />
    <hr />
    <p> Selected: {JSON.stringify(state.choose)} </p>
  </div>
);

Output:

Typehead ini memungkinkan kita untuk memilih buah.

Styled Components

Tools Styled Components digunakan untuk menata komponen React menggunakan CSS-in-JS.

Code:

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: ${(props) => (props.primary ? "palevioletred" : "white")};
  color: ${(props) => (props.primary ? "white" : "palevioletred")};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 10px;
`;

return (
  <div>
    <Button>White</Button>
    <Button primary>Red</Button>
  </div>
);

Output:

ToolTip

Komponen ini memungkinkan pengembang menambahkan tool tip pada elemen tertentu. Cukup buat tombol dan tambahkan teks overlay sebagai tool tip.

Code:

return (
  <>
    {["top", "right", "bottom", "left"].map((placement) => (
      <div style={{ margin: "2.5rem 1rem", float: "left" }}>
        <OverlayTrigger
          key={placement}
          placement={placement}
          overlay={
            <Tooltip id={`tooltip-${placement}`}>
              Tooltip on <strong>{placement}</strong>.
            </Tooltip>
          }
        >
          <button variant="secondary">Tooltip on {placement}</button>
        </OverlayTrigger>
      </div>
    ))}
  </>
);

Output:

Penutup

BOS membantu mengatasi tantangan utama dalam membangun front-end web3, seperti akses, keamanan, kemampuan menyusun, dan ketangkasan. Dengan BOS, pengguna dapat menjalankan aplikasi blockchain secara lokal, yang membantu memastikan ketangguhan dan ketahanan dari sensor sembari mempertahankan pengalaman yang ramah pengguna.

Jika kamu ingin mempelajari lebih jauh terkait frontend BOS, silakan baca dokumentasinya di sini.