Операционная система блокчейна NEAR Protocol

(302 nL)
7 min read
To Share and +4 nLEARNs

В марте 2023 года Near Protocol запустил операционную систему Blockchain (BOS), чтобы создать идеальную точку входа в Open Web. Идея состоит в том, чтобы плавно преодолеть разрыв между web2 и web3. В этой статье мы подробно рассмотрим BOS и поймем, как она работает.

Что такое открытая сеть?

«Открытая сеть» — это термин, используемый для описания Интернета, когда он становится глобальным общедоступным ресурсом и никем не контролируемым. Итак, почему открытая сеть желательна?

  • Это необходимо для свободной и открытой коммуникации и самовыражения.
  • Открытая сеть — это Интернет, созданный людьми и для людей. Это дает людям возможность вмешаться и внести положительный вклад в общество.

С самого начала видение NEAR заключалось в том, чтобы способствовать созданию Открытой сети. Поскольку открытая сеть должна быть децентрализована, NEAR необходимо было создать масштабируемую цепочку блоков первого уровня, которая абстрагируется от сложностей. Удалось ли им это сделать? Давайте взглянем.

  • NEAR имеет гибкую модель учетной записи и удобочитаемые учетные записи.
  • Механизм сегментирования Nightshade делает NEAR чрезвычайно масштабируемым.
  • NEAR также предоставляет сложные инструменты, помогающие разработчикам разрабатывать на протоколе.

Заложив фундамент, NEAR теперь необходимо создать стек web3, который поможет упростить адаптацию Открытой сети для пользователей и разработчиков.

Как BOS добивается открытости Интернета?

Подумайте, что делает операционная система или “ОС”. ОС позволяет пользователям взаимодействовать со сложной техникой, не вникая в сложности. Абстрагирование от фоновых сложностей имеет решающее значение для массового внедрения технологии.

Теперь распространите эту логику на web3. По словам соучредителя NEAR Protocol Ильи Полосухина, BOS — это общий уровень для просмотра и обнаружения продуктов Web 3. Кроме того, во время запуска BOS будет поддерживать цепочки Near Protocol и Ethereum Virtual Machine. Представьте себе создание нового крутого приложения DeFi на Ethereum и получение пользователей из NEAR через BOS.

Создание компонуемых внешних интерфейсов

Прежде чем мы пойдем дальше, давайте разберемся, что такое интерфейс. Интерфейс — это то, как пользователь взаимодействует с приложением. Когда дело доходит до dApps, необходимо создавать компонуемые и децентрализованные приложения. Сама суть web3 — децентрализация. Так почему же мы до сих пор используем централизованные службы для доступа к этим службам? Доверие к этим посредникам сопряжено с рядом проблем безопасности.

BOS помогает добавлять компонуемые интерфейсы в технический стек и легко интегрировать пользователей в web3. Что касается потенциала BOS в качестве внешнего интерфейса, Полосухин сказал:

«Компонуемый децентрализованный внешний интерфейс в качестве фреймворка может работать с любым внутренним интерфейсом Web2 или Web3 и любым кошельком. В будущем мы будем предлагать [использование] кошельков из одной цепочки для взаимодействия с другой посредством беспрепятственного моста».

3 столпа BOS

BOS базируется на трех столпах:

  • Шлюзы
  • Компоненты
  • Блокчейны

Шлюзы

Шлюзы предназначены для того, чтобы сделать локальные децентрализованные интерфейсы доступными для всех. Шлюз представляет собой специально разработанную виртуальную машину, которая загружает и запускает внешние интерфейсы для протоколов, построенных на Ethereum, L2 и первых уровнях, таких как NEAR. Код этих интерфейсов хранится в блокчейне NEAR.

Какова цель операционной системы Blockchain (BOS) Near Protocol?

Please select 2 correct answers

Правильно! Неправильно!

Компоненты

Компоненты — это внешние интерфейсы для сетевых протоколов уровня приложений, таких как Lido, Uniswap и Aave. Разработчики могут просматривать код этих приложений в шлюзе, подобно просмотру смарт-контракта в Etherscan. Кроме того, они могут разветвлять эти приложения и развертывать свои собственные версии или даже создавать компоненты.

Блокчейны

Компоненты могут вызывать функции в любой цепочке блоков. В настоящее время поддерживаются все цепочки EVM/L2 и NEAR. Кроме того, исходный код интерфейсов (приложений) хранится на NEAR из-за его способности дешево хранить HTML/CSS/JS.

Посмотрим на интерфейс BOS NEAR

Давайте посмотрим, как интерфейс работает в режиме реального времени. Зайдите на alpha.near.org.

Pasted image 0

Внешний интерфейс соединяет пользователей со всеми различными возможностями Web3 в рамках экосистемы. Любой участник экосистемы Open Web может создавать собственные интерфейсы, совместимые с выбранной им цепочкой блоков. Давайте поиграем с интерфейсом и посмотрим, как это работает.

Когда вы прокрутите вверх, наведите курсор на «Обнаружение» и нажмите «Компоненты».

Pasted image 0

Компоненты — это небольшие приложения, которые решают определенные проблемы. В настоящее время у вас есть несколько встроенных компонентов, которые вы можете использовать для создания внешнего интерфейса. Вот некоторые из них.

Какова функция шлюзов в BOS?

Правильно! Неправильно!

Виджет

Виджет — это минимальная единица внешнего интерфейса. Он позволяет вам включать существующий компонент в ваш код, тем самым позволяет  создавать сложные приложения путем компоновки компонентов.

Код:

​​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>
  </>
);

Результат:

Pasted image 0

Загрузчик изображений

Средство загрузки изображений позволяет пользователям напрямую загружать изображения в файловую систему (IPFS).

Код:

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>
);

Результат:

Pasted image 0

Вы можете использовать кнопку для загрузки изображения:

Pasted image 0

Файлы

Загружайте файлы с поддержкой перетаскивания.

Код:

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>
);

Результат:

Pasted image 0

Markdown

Встроенный компонент, который позволяет отображать Markdown.

Код:

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>
  </>
);

Результат:

Pasted image 0

OverlayTrigger

Виджет OverlayTrigger позволяет разработчикам отображать наложенный текст или значок, когда указатель мыши находится над определенным элементом.

Код:

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>
);

Результат:

Pasted image 0

Бесконечная прокрутка

Этот компонент позволяет создавать простую и легкую страницу или элемент с бесконечной прокруткой, поддерживая как оконные, так и прокручиваемые элементы.

Код:

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>
);

Результат:

Бесконечно загружаемый список:

Pasted image 0

Упреждающий ввод

Этот компонент предоставляет поле ввода с опережением ввода для выбора параметра из списка вариантов. Проще говоря, этот компонент используется для создания функций автозаполнения текста.

Код:

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>
);

Результат:

Pasted image 0

Этот упреждающий ввод позволяет выбрать фрукт.

Pasted image 0

Стилизованные компоненты

Инструмент Styled Components используется для стилизации компонентов React с использованием CSS-in-JS.

Код:

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>
);

Результат:

Pasted image 0

Подсказка

Этот компонент позволяет разработчикам добавлять подсказки к определенным элементам. Просто создайте кнопку и добавьте наложенный текст в качестве всплывающей подсказки.

Код:

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>
    ))}
  </>
);

Результат:

Pasted image 0

Заключение

BOS помогает решить основные проблемы, связанные с созданием веб-интерфейсов 3, такие как доступ, безопасность, компонуемость и гибкость. С BOS пользователи могут запускать блокчейн-приложения локально, что помогает обеспечить надежность и устойчивость к цензуре, сохраняя при этом удобство для пользователя.

Если вы хотите узнать больше о внешнем интерфейсе BOS, прочитайте документацию здесь.

Что такое виджет в BOS?

Правильно! Неправильно!

Generate comment with AI 2 nL
9

1 комментарий к “Операционная система блокчейна NEAR Protocol”

  1. Top comment

    Сушествуют ли подобные разработки в других блокчейнах? По моему, любой блокчейн можно назвать операционной системой, так как для доступа к нему нужны пользовательские приложения со всякими виджетами – например кошельки. 

    Show replies

Оставьте комментарий


To leave a comment you should to:


Пролистать наверх
Report a bug👀