Creación De Proyectos Web3 Con La Extensión Truffle for VS Code

Trabajar con cualquier tecnología nueva puede ser una experiencia tanto emocionante como aterradora. Por un lado, puede que te entusiasme construir con un nuevo conjunto de herramientas. Pero saber elegir las adecuadas entre todas las herramientas disponibles también puede resultar abrumador.

Ya sea que recién esté comenzando a aprender Web3 o que sea un desarrollador experimentado, comprenderá bien esta abrumadora experiencia. Los desarrolladores deben tener conocimiento de los conceptos específicos de Web3, como cadenas de bloques y contratos inteligentes, y de una pila de herramientas completamente nueva para desarrollar estos conceptos. Sin embargo, los desarrolladores pueden desarrollar tecnologías Web3 de manera relativamente rápida y eficiente con los pasos correctos y las herramientas adecuadas.

Este artículo brindará una breve descripción general de los pasos necesarios para crear un contrato inteligente Web3. Al mismo tiempo, veremos cómo puede navegar esos pasos con éxito escribiendo, implementando y probando contratos inteligentes con una herramienta que ya conoce, Visual Studio Code (VS Code), y la extensión Truffle for VS Code .

Elegir las herramientas adecuadas

Después de aprender los fundamentos de blockchain y Ethereum, probablemente se inspiró para comenzar a aplicar su conocimiento para construir sus propios proyectos Web3. En el camino, es posible que haya recopilado una larga lista de herramientas de varios proyectos y tutoriales. En lugar de perdernos en esa lista, concentrémonos en explorar los pasos necesarios para iniciar un nuevo proyecto de contrato inteligente mediante el uso de una de esas herramientas, la extensión Truffle for VS Code, y explorar cómo puede ayudar a la creación, depuración e implementación de su contrato inteligente. , seguridad y otras áreas de desarrollo.

Creación de proyectos

Primero, echemos un vistazo a la creación de su proyecto inicial.

Vista de Truffle for VS Code Extension en el editor de VS Code

La trufa para la extensión del código VS

La extensión Truffle para VS Code

Un proyecto exitoso a menudo comienza con una buena configuración y estructura de archivos. Dado que pueden surgir muchos problemas por no configurar correctamente su proyecto, es crucial asegurarse de que la estructura de su archivo sea consistente e intuitiva en su nombre.

Una buena ventaja de usar la extensión Truffle para VS Code es que puede crear rápidamente un nuevo proyecto con la estructura correcta desde el principio, ya sea creando una nueva carpeta con una estructura de archivos con plantilla y archivos de inicio o simplemente creando un proyecto a partir de un Caja de trufas .

Comencemos un nuevo proyecto para ver cómo se ve una estructura de archivos adecuada. Primero, deberá instalar la extensión Truffle for VS Code. Para obtener instrucciones de instalación detalladas y obtener aún más información sobre sus capacidades, consulte esta publicación .

Una vez instalada la extensión, presione las teclas SHIFT + CTRL/ CMD + Ppara abrir la paleta de comandos. A continuación, escriba el comando Truffle New Solidity Projecty seleccione la opción "Crear proyecto básico". Después de elegir la ruta del proyecto, se creará un nuevo proyecto con la estructura de archivos adecuada.

La estructura de archivos de un proyecto que comenzó con Truffle for VS Code Extension

Estructura de archivos adecuada

Como puede ver, el proyecto de plantilla tiene una carpeta que contiene contratos inteligentes, otra para migraciones a entornos de cadena de bloques, una tercera para scripts y otra carpeta para pruebas. El proyecto también incluye un archivo .gitignorepara almacenar información que no desea enviar a un repositorio, un acuerdo de licencia de código abierto y un truffle-config.jsarchivo.

Esta estructura de archivos mantiene todo limpio y organizado, por lo que importar de un archivo a otro o ejecutar comandos de Truffle es sencillo y menos propenso a errores.

Depuración de su contrato

Desafortunadamente, no vivimos en un mundo perfecto donde nuestro código no tenga errores. Y al crear su contrato inteligente, encontrará mensajes de error que quizás no haya visto antes. La depuración de estas transacciones puede ser complicada si siempre necesita hacer referencia a un explorador de blockchain como Etherscan para obtener información.

Una solución es utilizar la función de depuración de transacciones a través de la extensión Truffle for VS Code. Para trabajar con el depurador, abra la paleta de comandos nuevamente y escriba Truffle Debug Transaction. Desde allí, puede ver los mensajes de transacción y trabajar con ellos paso a paso. Esto es importante para los desarrolladores, ya que los errores en una determinada transacción a menudo hacen que falle el próximo intento de transacción (como que los fondos no estén disponibles en una billetera específica).

Transacciones para elegir después de escribir el comando: Truffle Debug Transaction

Elija una transacción para depurar después de escribir el comando: Transacción de debut de trufa

Después de seleccionar una transacción, el depurador estará disponible. Aquí puede realizar funciones de depuración típicas, como entrar/salir/sobre, ver la pila de llamadas, ver ventanas, etc.

Las herramientas de depuración que están disponibles a través de Truffle para VS Code Extension

Las herramientas de depuración están disponibles después de elegir una transacción

Implementación de su contrato

Una vez que tenga un contrato inteligente en funcionamiento, es hora de implementarlo. Hay tres vías para acercarse aquí. La mejor práctica es implementar primero en una instancia de blockchain local para realizar pruebas, como Ganache . Luego, querrá implementarlo en una red de prueba para verificar que funciona correctamente en un entorno en vivo. Luego, solo después de que se completen todas las pruebas, puede iniciar su proyecto en la red principal. Todas estas pruebas lo ayudarán a evitar errores costosos y, a veces, irreversibles en sus contratos inteligentes.

Dentro de la extensión Truffle, puede implementar en los tres tipos de redes sin necesidad de salir de VS Code. Puede hacerlo haciendo clic con el botón derecho en el archivo .SOL que desea implementar y seleccionando "Implementar contratos".

La opción para crear o implementar un contrato inteligente aparece después de hacer clic con el botón derecho en un archivo .sol

Cree o implemente fácilmente contratos inteligentes después de hacer clic con el botón derecho en un archivo .sol

Blockchain local: usar el servicio Ganache es una forma sencilla de crear una cadena de bloques local con múltiples direcciones de billetera y probar Eth que puede usar para interactuar con su contrato inteligente. Puede crear una nueva red de Ganache en el panel Truffle — Networks en VS Code desde la extensión. Después de crear una red, puede iniciar/detener y reiniciar el servidor según sea necesario.

La extensión Truffle for VS Code permite a los usuarios crear o conectarse a una red directamente desde el editor

Cree o conéctese fácilmente a una red existente

Redes de prueba : las redes de prueba están diseñadas para funcionar de manera similar a la red principal de Ethereum, pero no tienen los costos financieros ni los riesgos de implementarse directamente en la red principal. El uso de una red de prueba es una excelente manera de comprender mejor cómo funcionará su contrato una vez implementado en la red principal.

Hay varias redes de prueba de Ethereum para elegir, y todas se pueden conectar mediante un servicio de proveedor de nodos, como Infura . Después de configurar su cuenta Infura dentro de la extensión, tiene acceso a sus proyectos Infura existentes o puede crear otros nuevos fácilmente.

La lista de redes en las que un usuario puede implementar a través de la extensión

Opciones para que las redes se desplieguen

Red principal : si las redes de prueba son como servidores de prueba para su código de contrato inteligente, implementar en la red principal es como llevar el código a producción. La importancia de probar su código de contrato inteligente no se puede enfatizar lo suficiente. Si hay errores o lagunas, los atacantes pueden explotarlos y lo harán. Estos errores pueden ser costosos tanto para las organizaciones como para los usuarios.

Veamos cómo podemos asegurar nuestro contrato utilizando las herramientas adecuadas y las mejores prácticas antes de implementarlo en la red principal.

Asegurando su contrato

La seguridad siempre debe ser una prioridad importante al desarrollar contratos inteligentes. Los piratas informáticos pierden millones de dólares en lo que parece ser una base regular. Como desarrollador de Web3, debe estar continuamente actualizado sobre las mejores prácticas de seguridad más recientes .

Ejecutar sus contratos inteligentes a través de herramientas como Diligence Fuzzing o su alternativa de código abierto, Scribble , puede ayudarlo a detectar muchas vulnerabilidades de seguridad comunes. Sin embargo, si su proyecto tiene como objetivo manejar los fondos de millones de usuarios, es una buena práctica auditar sus contratos inteligentes de manera profesional.

Aún así, los desarrolladores deben estar al tanto de las vulnerabilidades comunes mientras construyen sus proyectos. Un vector de ataque frecuente en Web3 es cuando los piratas informáticos usan bots para escanear contratos implementados en busca de posibles vulnerabilidades e información secreta, como claves privadas de billetera que quedan en el código de las pruebas. Usar una herramienta como Truffle Dashboard es una forma de evitar perder fondos y activos por errores de desarrollo.

Una imagen de la interfaz de Truffle Dashboard. Permite a un usuario conectar su billetera MetaMask.

Conecte su billetera MetaMask directamente al panel de Truffle

Truffle Dashboard elimina la necesidad de que los desarrolladores almacenen claves privadas dentro de un archivo de configuración en el proyecto Solidity. Los desarrolladores pueden realizar un proceso de configuración único para conectar su billetera Metamask a un tablero alojado localmente en el navegador. Una vez hecho esto, es suficiente usar la palabra clave del tablero en lugar de copiar y pegar claves en un archivo de configuración. También es compatible con otros marcos de desarrollo, como Hardhat.

Para usar Truffle Dashboard, instala la última versión de Truffle e ingresa el comando truffle dashboarden tu terminal. Ahora, cualquier acción que hubiera requerido sus claves privadas puede enrutarse a través del tablero. Por ejemplo, para implementar su contrato, asegúrese de especificar el puerto adecuado en su truffle-config.jsarchivo, luego haga clic con el botón derecho en su contrato para implementarlo y seleccione dashboard: 24012. El valor predeterminado es 24012.

El puerto 24012 está resaltado en el archivo de configuración de red, truffle-config.js

Asegúrese de que el puerto correcto esté seleccionado en el archivo truffle-config.js

La opción del tablero está resaltada en la lista de redes para implementar

Seleccione la opción del tablero al implementar el contrato

Aparece una transacción de MetaMask y se enruta a través del panel de control de Truffle. ¡No más compartir claves privadas!

¡Todas las transacciones se enrutan a través del panel de Truffle, por lo que ya no necesita compartir sus claves privadas!

Las herramientas adecuadas, el camino correcto a seguir

Construir un proyecto Web3 no tiene por qué ser complicado. Con las herramientas adecuadas, el camino a seguir se vuelve claro. Hay muchas maneras de mejorar su flujo de trabajo, pero tener a su disposición Truffle for VS Code Extension lo ayudará a trabajar de manera eficiente desde un entorno con el que quizás ya esté familiarizado. Este espacio se mueve bastante rápido y se crean nuevas herramientas todo el tiempo. Esperamos que este artículo le haya dado una idea de una manera fácil de optimizar el proceso de desarrollo mientras navega por la pila de herramientas de Web3.

Fuente: https://betterprogramming.pub/creating-web3-projects-with-the-truffle-for-vs-code-extension-6e784070a5f3

#vscode #truffle #web3

What is GEEK

Buddha Community

Creación De Proyectos Web3 Con La Extensión Truffle for VS Code

Monty Boehm

1675304280

How to Use Hotwire Rails

Introduction

We are back with another exciting and much-talked-about Rails tutorial on how to use Hotwire with the Rails application. This Hotwire Rails tutorial is an alternate method for building modern web applications that consume a pinch of JavaScript.

Rails 7 Hotwire is the default front-end framework shipped with Rails 7 after it was launched. It is used to represent HTML over the wire in the Rails application. Previously, we used to add a hotwire-rails gem in our gem file and then run rails hotwire: install. However, with the introduction of Rails 7, the gem got deprecated. Now, we use turbo-rails and stimulus rails directly, which work as Hotwire’s SPA-like page accelerator and Hotwire’s modest JavaScript framework.

What is Hotwire?

Hotwire is a package of different frameworks that help to build applications. It simplifies the developer’s work for writing web pages without the need to write JavaScript, and instead sending HTML code over the wire.

Introduction to The Hotwire Framework:

1. Turbo:

It uses simplified techniques to build web applications while decreasing the usage of JavaScript in the application. Turbo offers numerous handling methods for the HTML data sent over the wire and displaying the application’s data without actually loading the entire page. It helps to maintain the simplicity of web applications without destroying the single-page application experience by using the below techniques:

Turbo Frames: Turbo Frames help to load the different sections of our markup without any dependency as it divides the page into different contexts separately called frames and updates these frames individually.
Turbo Drive: Every link doesn’t have to make the entire page reload when clicked. Only the HTML contained within the tag will be displayed.
Turbo Streams: To add real-time features to the application, this technique is used. It helps to bring real-time data to the application using CRUD actions.

2. Stimulus

It represents the JavaScript framework, which is required when JS is a requirement in the application. The interaction with the HTML is possible with the help of a stimulus, as the controllers that help those interactions are written by a stimulus.

3. Strada

Not much information is available about Strada as it has not been officially released yet. However, it works with native applications, and by using HTML bridge attributes, interaction is made possible between web applications and native apps.

Simple diagrammatic representation of Hotwire Stack:

Hotwire Stack

Prerequisites For Hotwire Rails Tutorial

As we are implementing the Ruby on Rails Hotwire tutorial, make sure about the following installations before you can get started.

Ruby on Rails
Hotwire gem
PostgreSQL/SQLite (choose any one database)
Turbo Rails
Stimulus.js

Looking for an enthusiastic team of ROR developers to shape the vision of your web project?
Contact Bacancy today and hire Ruby developers to start building your dream project!

Create a new Rails Project

Find the following commands to create a rails application.

mkdir ~/projects/railshotwire
cd ~/projects/railshotwire
echo "source 'https://rubygems.org'" > Gemfile
echo "gem 'rails', '~> 7.0.0'" >> Gemfile
bundle install  
bundle exec rails new . --force -d=postgresql

Now create some files for the project, up till now no usage of Rails Hotwire can be seen.
Fire the following command in your terminal.

For creating a default controller for the application

echo "class HomeController < ApplicationController" > app/controllers/home_controller.rb
echo "end" >> app/controllers/home_controller.rb

For creating another controller for the application

echo "class OtherController < ApplicationController" > app/controllers/other_controller.rb
echo "end" >> app/controllers/home_controller.rb

For creating routes for the application

echo "Rails.application.routes.draw do" > config/routes.rb
echo '  get "home/index"' >> config/routes.rb
echo '  get "other/index"' >> config/routes.rb
echo '  root to: "home#index"' >> config/routes.rb
echo 'end' >> config/routes.rb

For creating a default view for the application

mkdir app/views/home
echo '<h1>This is Rails Hotwire homepage</h1>' > app/views/home/index.html.erb
echo '<div><%= link_to "Enter to other page", other_index_path %></div>' >> app/views/home/index.html.erb

For creating another view for the application

mkdir app/views/other
echo '<h1>This is Another page</h1>' > app/views/other/index.html.erb
echo '<div><%= link_to "Enter to home page", root_path %></div>' >> app/views/other/index.html.erb

For creating a database and schema.rb file for the application

bin/rails db:create
bin/rails db:migrate

For checking the application run bin/rails s and open your browser, your running application will have the below view.

Rails Hotwire Home Page

Additionally, you can clone the code and browse through the project. Here’s the source code of the repository: Rails 7 Hotwire application

Now, let’s see how Hotwire Rails can work its magic with various Turbo techniques.

Hotwire Rails: Turbo Drive

Go to your localhost:3000 on your web browser and right-click on the Inspect and open a Network tab of the DevTools of the browser.

Now click on go to another page link that appears on the home page to redirect from the home page to another page. In our Network tab, we can see that this action of navigation is achieved via XHR. It appears only the part inside HTML is reloaded, here neither the CSS is reloaded nor the JS is reloaded when the navigation action is performed.

Hotwire Rails Turbo Drive

By performing this action we can see that Turbo Drive helps to represent the HTML response without loading the full page and only follows redirect and reindeer HTML responses which helps to make the application faster to access.

Hotwire Rails: Turbo Frame

This technique helps to divide the current page into different sections called frames that can be updated separately independently when new data is added from the server.
Below we discuss the different use cases of Turbo frame like inline edition, sorting, searching, and filtering of data.

Let’s perform some practical actions to see the example of these use cases.

Make changes in the app/controllers/home_controller.rb file

#CODE

class HomeController < ApplicationController
   def turbo_frame_form
   end
   
   def turbo_frame submit
      extracted_anynumber = params[:any][:anynumber]
      render :turbo_frame_form, status: :ok, locals: {anynumber: extracted_anynumber,      comment: 'turbo_frame_submit ok' }
   end
end

Turbo Frame

Add app/views/home/turbo_frame_form.html.erb file to the application and add this content inside the file.

#CODE

<section>

    <%= turbo_frame_tag 'anyframe' do %>
            
      <div>
          <h2>Frame view</h2>
          <%= form_with scope: :any, url: turbo_frame_submit_path, local: true do |form| %>
              <%= form.label :anynumber, 'Type an integer (odd or even)', 'class' => 'my-0  d-inline'  %>
              <%= form.text_field :anynumber, type: 'number', 'required' => 'true', 'value' => "#{local_assigns[:anynumber] || 0}",  'aria-describedby' => 'anynumber' %>
              <%= form.submit 'Submit this number', 'id' => 'submit-number' %>
          <% end %>
      </div>
      <div>
        <h2>Data of the view</h2>
        <pre style="font-size: .7rem;"><%= JSON.pretty_generate(local_assigns) %></pre> 
      </div>
      
    <% end %>

</section>

Add the content inside file

Make some adjustments in routes.rb

#CODE

Rails.application.routes.draw do
  get 'home/index'
  get 'other/index'

  get '/home/turbo_frame_form' => 'home#turbo_frame_form', as: 'turbo_frame_form'
  post '/home/turbo_frame_submit' => 'home#turbo_frame_submit', as: 'turbo_frame_submit'


  root to: "home#index"
end

Next step is to change homepage view in app/views/home/index.html.erb

#CODE

<h1>This is Rails Hotwire home page</h1>
<div><%= link_to "Enter to other page", other_index_path %></div>

<%= turbo_frame_tag 'anyframe' do %>        
  <div>
      <h2>Home view</h2>
      <%= form_with scope: :any, url: turbo_frame_submit_path, local: true do |form| %>
          <%= form.label :anynumber, 'Type an integer (odd or even)', 'class' => 'my-0  d-inline'  %>
          <%= form.text_field :anynumber, type: 'number', 'required' => 'true', 'value' => "#{local_assigns[:anynumber] || 0}",  'aria-describedby' => 'anynumber' %>
          <%= form.submit 'Submit this number', 'id' => 'submit-number' %>
      <% end %>
  <div>
<% end %>

Change HomePage

After making all the changes, restart the rails server and refresh the browser, the default view will appear on the browser.

restart the rails server Now in the field enter any digit, after entering the digit click on submit button, and as the submit button is clicked we can see the Turbo Frame in action in the below screen, we can observe that the frame part changed, the first title and first link didn’t move.

Hotwire Rails: Turbo Streams

Turbo Streams deliver page updates over WebSocket, SSE or in response to form submissions by only using HTML and a series of CRUD-like operations, you are free to say that either

Update the piece of HTML while responding to all the other actions like the post, put, patch, and delete except the GET action.
Transmit a change to all users, without reloading the browser page.

This transmit can be represented by a simple example.

Make changes in app/controllers/other_controller.rb file of rails application

#CODE

class OtherController < ApplicationController

  def post_something
    respond_to do |format|
      format.turbo_stream {  }
    end
  end

   end

file of rails application

Add the below line in routes.rb file of the application

#CODE

post '/other/post_something' => 'other#post_something', as: 'post_something'

Superb! Rails will now attempt to locate the app/views/other/post_something.turbo_stream.erb template at any moment the ‘/other/post_something’ endpoint is reached.

For this, we need to add app/views/other/post_something.turbo_stream.erb template in the rails application.

#CODE

<turbo-stream action="append" target="messages">
  <template>
    <div id="message_1">This changes the existing message!</div>
  </template>
</turbo-stream>

This states that the response will try to append the template of the turbo frame with ID “messages”.

Now change the index.html.erb file in app/views/other paths with the below content.

#CODE

<h1>This is Another page</h1>
<div><%= link_to "Enter to home page", root_path %></div>

<div style="margin-top: 3rem;">
  <%= form_with scope: :any, url: post_something_path do |form| %>
      <%= form.submit 'Post any message %>
  <% end %>
  <turbo-frame id="messages">
    <div>An empty message</div>
  </turbo-frame>
</div>

After making all the changes, restart the rails server and refresh the browser, and go to the other page.

go to the other page

Once the above screen appears, click on the Post any message button

This action shows that after submitting the response, the Turbo Streams help the developer to append the message, without reloading the page.

Another use case we can test is that rather than appending the message, the developer replaces the message. For that, we need to change the content of app/views/other/post_something.turbo_stream.erb template file and change the value of the action attribute from append to replace and check the changes in the browser.

#CODE

<turbo-stream action="replace" target="messages">
  <template>
    <div id="message_1">This changes the existing message!</div>
  </template>
</turbo-stream>

change the value of the action attribute When we click on Post any message button, the message that appear below that button will get replaced with the message that is mentioned in the app/views/other/post_something.turbo_stream.erb template

Stimulus

There are some cases in an application where JS is needed, therefore to cover those scenarios we require Hotwire JS tool. Hotwire has a JS tool because in some scenarios Turbo-* tools are not sufficient. But as we know that Hotwire is used to reduce the usage of JS in an application, Stimulus considers HTML as the single source of truth. Consider the case where we have to give elements on a page some JavaScript attributes, such as data controller, data-action, and data target. For that, a stimulus controller that can access elements and receive events based on those characteristics will be created.

Make a change in app/views/other/index.html.erb template file in rails application

#CODE

<h1>This is Another page</h1>
<div><%= link_to "Enter to home page", root_path %></div>

<div style="margin-top: 2rem;">
  <%= form_with scope: :any, url: post_something_path do |form| %>
      <%= form.submit 'Post something' %>
  <% end %>
  <turbo-frame id="messages">
    <div>An empty message</div>
  </turbo-frame>
</div>

<div style="margin-top: 2rem;">
  <h2>Stimulus</h2>  
  <div data-controller="hello">
    <input data-hello-target="name" type="text">
    <button data-action="click->hello#greet">
      Greet
    </button>
    <span data-hello-target="output">
    </span>
  </div>
</div>

Make A change Make changes in the hello_controller.js in path app/JavaScript/controllers and add a stimulus controller in the file, which helps to bring the HTML into life.

#CODE

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "name", "output" ]

  greet() {
    this.outputTarget.textContent =
      `Hello, ${this.nameTarget.value}!`
  }
}

add a stimulus controller in the file Go to your browser after making the changes in the code and click on Enter to other page link which will navigate to the localhost:3000/other/index page there you can see the changes implemented by the stimulus controller that is designed to augment your HTML with just enough behavior to make it more responsive.

With just a little bit of work, Turbo and Stimulus together offer a complete answer for applications that are quick and compelling.

Using Rails 7 Hotwire helps to load the pages at a faster speed and allows you to render templates on the server, where you have access to your whole domain model. It is a productive development experience in ROR, without compromising any of the speed or responsiveness associated with SPA.

Conclusion

We hope you were satisfied with our Rails Hotwire tutorial. Write to us at service@bacancy.com for any query that you want to resolve, or if you want us to share a tutorial on your query.

For more such solutions on RoR, check out our Ruby on Rails Tutorials. We will always strive to amaze you and cater to your needs.

Original article source at: https://www.bacancytechnology.com/

#rails #ruby

Berta Escamilla

1653034020