Como construir uma página no Near BOS

Nesse guia você aprenderá a criar um front-end personalizado como uma página web utilizado códigos no BOS. A página será um formulário de inscrição que poderá ser personalizado conforme sua aplicação. Isso servirá como exemplo das possibilidades de criação de front-ends no Near BOS para que possa gerar interessa e então mostre um caminho para criar outras ferramentas com essa ferramenta desenvolvida pela Near.

Este post segue a linha de conteúdo técnico. Para ver o primeiro post com mais informações sobre o BOS acesse o link do post anterior.

O conhecimento de javascript e react js o ajudará a criar qualquer tipo de componente necessário no BOS. Na verdade um dos motivos da Near Protocol com o Near BOS é oferecer mais opções de criação, mais familiaridade e compatibilidade de códigos para que desenvolvedores web2 possam criar soluções web3.

COMO CRIAR UM COMPONENTE NO BOS

Você pode usar diretamente o BOS IDE online através deste link https://near.social/edit em seguida, faça login com sua conta NEAR. Irá abrir um editor vazio como este.

O código estará na instrução return como vimos abaixo. Não há necessidade de escrever uma função que pegue tudo do nosso componente, podemos escrever nosso código diretamente na seguinte instrução de retorno.

Como podemos ver nesta imagem, aqui está o nosso código no lado esquerdo, e aqui está uma prévia do que escrevemos no lado direito.

Exemplo II – Página do formulário de inscrição

Para abrir um novo componente, clique em adicionar (add), então clique em Crie um novo (Add new).

Isso abrirá um lugar para começarmos a escrever nosso código assim:

Para criar a página de formulário de registro, precisamos de HTML e CSS, escreveremos nosso HTML usando a sintaxe jsx o que nos permitirá escrever código html em React js. A área de estilo e usaremos o componente estilizado; biblioteca css que nos permitirá escrever nossos estilos css em javascript.

Observação: Escreveremos nosso código CSS antes da instrução return e nosso código HTML na instrução return.

Nosso css conterá coisas como:

const Wrapper = styled.div`
`;
const Form = styled.div`
`;
const FormHeader = styled.h3`
`;

Esta é a nossa estrutura de formulário, existe um Wrapper de formulário, existe um FormHeader e depois o conteúdo do formulário.

return (
   <Wrapper>    
     <FormHeader>
     </FormHeader>
     <Form>
     </Form>
   </Wrapper>
 );

Cabeçalho

Escreveremos Register em nosso cabeçalho, que escrevemos como tag h3 antes no componente estilizado.

<FormHeader>Register</FormHeader>

Formulário

Usamos classes de bootstrap para estilizar nosso formulário, o BOS nos permite escrever classes de bootstrap diretamente em nossos elementos html sem importar ou adicionar um link de bootstrap, como veremos a seguir:

 <Form>
   //sobrenome 
    <div class="mb-3">
           <label for="surname" class="form-label">
             Surname
           </label>
           <input
             type="text"
             class="form-control"
             id="surname"
             required
           />
   </div>

//primeiro nome
<div class="mb-3">
  <label for="firstname" class="form-label">
  Firstname
  </label>
  <input
  type="text"
  class="form-control"
  id="firstname"
  required
  />
</div>

//endereço de e-mail
<div class="mb-3">
      <label for="email" class="form-label">
      Email address
      </label>
      <input
      type="email"
      class="form-control"
      id="email"
      aria-describedby="emailHelp"
      required
      />
      <div id="emailHelp" class="form-text">
      We'll never share your email with anyone else.
      </div>
</div>

//número de telefone
<div class="mb-3">
  <label for="phone" class="form-label">
    Phone Number
  </label>
  <input
    type="text"
    class="form-control"
    id="phone"
    required
  />
</div>

//gênero
<div class="mb-3">
   <label for="gender" class="form-label">
   Gender
   </label>
   <select
   class="form-select"
   >
   <option value="male" name="gender">
   Male
   </option>
   <option value="female" name="gender">
   Female
   </option>
   </select>
</div>

//ocupação
<div class="mb-3">
    <label for="occupation" class="form-label">
    Occupation
    </label>
    <select
    class="form-select"
    >
    <option value="near-developer" name="occupation">
    NEAR Developer
    </option>
    <option value="content-creation" name="occupation">
    Content Creation
    </option>
    <option value="crypto-trader" name="occupation">
    UI/UX Designer 
    </option>
    </select>
</div>

//senha
<div class="mb-3">
   <label for="password" class="form-label">
   Password
   </label>
   <input
   type="password"
   class="form-control"
   id="password"
   required
   />
</div>

//botão de inscrição
<CommitButton style={{ backgroundColor: "#5d4157" }}>
Submit
</CommitButton>

//form closing tag
</Form>

Depois de escrever os códigos, clicamos na visualização e ela nos mostrará assim:

Mas aqui são apenas estilos boostrapp no ​​formulário, não escrevemos o resto do nosso estilo css que usaremos o componente estilizado.

Visualização do formulário de registro

Usaremos o componente estilizado e escreveremos o restante dos estilos CSS para Wrapper, FormHeader e Form da seguinte maneira:

Vamos voltar onde escrevemos isso e adicionar o resto dos estilos.

const Wrapper = styled.div`

`;

const Form = styled.div`

`;

const FormHeader = styled.h3`
`;

const Wrapper = styled.div`
background-image: linear-gradient(to right, #c79081, #dfa579);
width: 80%;
padding: 20px;
margin: 10px auto;
border-radius: 15px;
@media (max-width: 650px){
  width: 100%;
}
`;

const Form = styled.div`
    display: flex;
    flex-direction: column;
    width: 50%;
    margin: 20px auto;
    color: #5d4157;
    @media (max-width: 650px){
  width: 90%;
}
`;

const FormHeader = styled.h3`
text-align: center;
font-weight: 800;
color: #5d4157;
font-family: arial, sans-serif;
font-size: 1.5rem;
`;

Depois de escrevermos o resto de nossos estilos como acima, clicamos em visualizar novamente, isso nos mostrará o resultado assim:

Em seguida, salvamos nossos códigos, o que nos permitirá salvar o código na NEAR Blockchain.

Antes entrarmos com “renomear“, Vamos mudar os nomes dos nossos componentes assim:

Então clicamos Salvar para salvar nossos códigos na blockchain NEAR, ele nos levará ao local onde salvamos os dados.

Em seguida, desenvolvemos nosso componente na blockchain NEAR usando o Blockchain Operating System (BOS).

Podemos visitar a página que criamos através do seguinte link:

https://near.social/accountId.near/widget/registerform.

Como resultado a página que será gerada aparecerá assim:

Esse foi no guia de como criar uma página ou front-end personalizado com o Near BOS. Para mais informações e instruções acesse https://docs.near.org onde poderá encontrar outros guias.
Mais conteúdo técnico na aba com este nome em nosso site.
Acesse também nosso grupo no Telegram: https://t.me/nearbrasil