Saludos hivers espero de todo corazón que todos esten muy contentos y felices. Un saludo especial para los programadores que dia a dia mejoran el ecosistema web3.
Para seguir ayudando en la formación de futuras estrellas de la programación en HIVE, les traigo un tutorial basico pero lleno de algo que es y deberia ser vital.
Objetivo
Este tutorial te guiará para implementar la autenticación de usuarios en la blockchain de Hive utilizando Hive Keychain en una aplicación React configurada con Vite y TypeScript.
Requisitos previos
- Node.js v16+
- Vite
- React
- TypeScript
- Extensión Hive Keychain instalada en tu navegador
fuente link
Pasos
- Crear el proyecto con Vite
Ejecuta el siguiente comando en tu terminal:
npm create vite@latest hive-login-app -- --template react-ts
cd hive-login-app
npm install
npm run dev
- Instalar dependencias necesarias
-Instala la biblioteca @hiveio/dhive para interactuar con la blockchain de Hive
npm install @hiveio/dhive
- Crear el componente de autenticación
- Crea un nuevo archivo
src/components/HiveLogin.tsx
con el siguiente contenido:
- Crea un nuevo archivo
import React, { useState } from 'react';
declare global {
interface Window {
hive_keychain: any;
}
}
const HiveLogin: React.FC = () => {
const [username, setUsername] = useState('');
const [loggedInUser, setLoggedInUser] = useState('');
const handleLogin = () => {
if (window.hive_keychain) {
window.hive_keychain.requestSignBuffer(
username,
'Autenticación en Hive',
'Posting',
(response: any) => {
if (response.success) {
setLoggedInUser(username);
alert('¡Autenticación exitosa!');
} else {
alert('Error en la autenticación.');
}
}
);
} else {
alert('Hive Keychain no está instalado.');
}
};
return (
<div>
<h2>Iniciar sesión con Hive</h2>
<input
type="text"
placeholder="Nombre de usuario"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<button onClick={handleLogin}>Iniciar sesión</button>
{loggedInUser && <p>Usuario autenticado: {loggedInUser}</p>}
</div>
);
};
export default HiveLogin;
- Integrar el componente en la aplicación principal
- Modifica el archivo
src/App.tsx
para incluir el componente de autenticación:
- Modifica el archivo
import React from 'react';
import HiveLogin from './components/HiveLogin';
const App: React.FC = () => {
return (
<div>
<h1>Aplicación Hive + React</h1>
<HiveLogin />
</div>
);
};
export default App;
- Probar la aplicación
Inicia la aplicación con npm run dev y abre
http://localhost:5173
en tu navegador. Ingresa tu nombre de usuario de Hive y haz clic en "Iniciar sesión". Se solicitará la firma a través de Hive Keychain.
Resultado
Has implementado con éxito la autenticación de usuarios en Hive utilizando Hive Keychain en una aplicación React con Vite y TypeScript.
¡Claro! A continuación, te presento un documento en formato Markdown que aborda:
- ¿Qué puedes hacer después de implementar el inicio de sesión en Hive?
- Ideas de aplicaciones que podrías desarrollar.
- Ventajas de utilizar un frontend con Hive.
- Una tabla con algunos de los tutoriales que ya has creado, incluyendo enlaces a tu repositorio de GitHub.
🔐 ¿Qué puedes hacer después de implementar el inicio de sesión en Hive?
Una vez que has integrado la autenticación con Hive (por ejemplo, utilizando Hive Keychain), puedes expandir las funcionalidades de tu aplicación para interactuar plenamente con la blockchain. Algunas acciones posibles incluyen:
- Publicar contenido: Permitir a los usuarios crear publicaciones, comentarios o blogs que se almacenan en la blockchain.
- Votar contenido: Implementar sistemas de votación para que los usuarios puedan apoyar publicaciones de otros.
- Transferencias de tokens: Facilitar el envío y recepción de tokens HIVE o HBD entre usuarios.
- Delegación de poder: Permitir a los usuarios delegar su Hive Power a otros usuarios o proyectos.
- Participación en gobernanza: Integrar funciones para que los usuarios voten por testigos o propuestas en el Decentralized Hive Fund (DHF).
- Gestión de NFTs: Crear, comprar o vender tokens no fungibles (NFTs) utilizando plataformas como NFT Showroom.(Hive Projects, Wikipedia, Moralis Academy, The Dapp List)
💡 Ideas de aplicaciones que podrías desarrollar
Con tus conocimientos en React, Vite, TypeScript y Hive, puedes emprender diversos proyectos. Algunas ideas incluyen:
- Plataforma de blogging descentralizada: Donde los usuarios puedan publicar y monetizar contenido sin intermediarios.
- Mercado de NFTs: Para artistas y coleccionistas que deseen intercambiar arte digital.
- Aplicación de votaciones: Para encuestas comunitarias o decisiones descentralizadas.
- Juego basado en blockchain: Que utilice tokens y activos digitales únicos.
- Red social temática: Focalizada en nichos específicos, como música, deportes o educación.
- Herramienta de análisis de datos: Que visualice estadísticas y métricas de la blockchain de Hive.
Para más inspiración, puedes explorar Hive Projects y Awesome Hive, donde encontrarás una amplia gama de aplicaciones y herramientas desarrolladas por la comunidad.(GitHub)
⚙️ Ventajas de utilizar un frontend con Hive
Integrar Hive en el frontend de tus aplicaciones ofrece múltiples beneficios:
- Transacciones sin comisiones: Hive permite realizar operaciones sin tarifas, lo que mejora la experiencia del usuario.
- Rapidez: Las transacciones en Hive se confirman en aproximadamente 3 segundos.
- Descentralización: Almacena datos de forma inmutable y accesible sin depender de servidores centralizados.
- Identidades legibles: Los nombres de usuario en Hive son fáciles de recordar y utilizar.
- Ecosistema activo: Hive cuenta con una comunidad vibrante y una amplia gama de aplicaciones descentralizadas (dApps).(Hive)
📚 Tabla de tutoriales existentes
A continuación, se presenta una tabla con algunos de los tutoriales que has desarrollado, incluyendo enlaces a tu repositorio de GitHub:
Título del Tutorial | Descripción breve | Enlace al repositorio | |
---|---|---|---|
Multiples Tutoriales | Aprende a integrar React con la blockchain de Hive. | Ver en GitHub |
Aquí tienes una tabla en formato Markdown que resume tus proyectos actuales en Hive, incluyendo una breve descripción de cada uno y enlaces a sus respectivos repositorios en GitHub:
🚧 Proyectos en marcha en Hive
Proyecto | Descripción | |
---|---|---|
hive-sbi-onboarding | Aplicación sencilla para identificar nuevos usuarios de Hive y facilitar su incorporación al programa Hive SBI. | |
be-hive-sql | Servidor backend que permite ejecutar consultas SQL en la blockchain de Hive, proporcionando una API segura mediante Hive Keychain y tokens JWT para acceder a datos de cuentas y transacciones. | |
keychain-helper | Librería ligera y amigable para TypeScript y JavaScript que facilita la interacción con Hive Keychain, permitiendo realizar firmas de operaciones y logins seguros de forma sencilla en aplicaciones Web3 modernas. |
ENGLISH 
Tutorial: Hive Authentication with Hive Keychain React + Vite + TypeScript english / Spanish
Greetingshiversi sincerely hope that everyone will be very happy and happy. A special greeting for programmers that day by day improve the web ecosystem 3.
To continue to help in the formation of future programming stars in HIVE, I bring you a basic tutorial but full of something that is and should be vital.
Objective
This tutorial will guide you to implement user authentication in the Hive blockchain using Hive Keychain in a React application configured with Vite and TypeScript.
Previous requirements
- Node.jsv16 +
- Vite
- Reform
- TypeScript
- ExtensionHive Keychaininstalled in your browser
sourcelink
Steps
- Create the project with Vite
Run the following command on your terminal:
npm create vite@latest hive-login-app -- --template react-ts
cd hive-login-app
npm install
npm run dev
- Install required units
-Install the library
npm install @hiveio/dhive
- Create the authentication component
- Create a new file
src/components/HiveLogin.tsx
with the following content:
- Create a new file
import React, { useState } from 'react';
declare global {
interface Window {
hive_keychain: any;
}
}
const HiveLogin: React.FC = () => {
const [username, setUsername] = useState('');
const [loggedInUser, setLoggedInUser] = useState('');
const handleLogin = () => {
if (window.hive_keychain) {
window.hive_keychain.requestSignBuffer(
username,
'Autenticación en Hive',
'Posting',
(response: any) => {
if (response.success) {
setLoggedInUser(username);
alert('¡Autenticación exitosa!');
} else {
alert('Error en la autenticación.');
}
}
);
} else {
alert('Hive Keychain no está instalado.');
}
};
return (
<div>
<h2>Iniciar sesión con Hive</h2>
<input
type="text"
placeholder="Nombre de usuario"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<button onClick={handleLogin}>Iniciar sesión</button>
{loggedInUser && <p>Usuario autenticado: {loggedInUser}</p>}
</div>
);
};
export default HiveLogin;
- Integrate the component into the main application
- Modify the file
src/App.tsx
to include the authentication component:
- Modify the file
import React from 'react';
import HiveLogin from './components/HiveLogin';
const App: React.FC = () => {
return (
<div>
<h1>Aplicación Hive + React</h1>
<HiveLogin />
</div>
);
};
export default App;
- Test implementation
Start the application with npm run dev and open
http://localhost:5173
in your browser. Enter your Hive user name and click "Login." The signature will be requested through Hive Keychain.
Outcome
You have successfully implemented the Hive user authentication using Hive Keychain in a React with Vite and TypeScript application.
Sure! Here is a Markdown document that addresses:
- What can you do after implementing the Hive login?
- Ideas of applications you could develop.
- Advantages of using a front with Hive.
- A table with some of the tutorials you've already created, including links to your GitHub repository.
- What can you do after implementing the Hive login?
Once you have integrated the Hive authentication (for example, using Hive Keychain), you can expand the functionality of your application to fully interact with the blockchain. Some possible actions include:
- Publish content: Allow users to create publications, comments or blogs that are stored in the lockchain.
- Voting: Implement voting systems to enable users to support publications from others.
- Tokens transfers: Facilitate the sending and reception of HIVE or HBD tokens between users.
- Delegation of power: Allow users to delegate their Hive Power to other users or projects.
- Participation in governance: Integrate functions for users to vote for witnesses or proposals in the Decentralized Hive Fund (DHF).
- NFTs management: Create, buy or sell non-expendable tokens (NFTs) using platforms such as NFT Showroom. (Hive Projects,Wikipedia,Moralis Academy,The Dapp List)
Ideas of applications you could develop
With your knowledge in React, Vite, TypeScript and Hive, you can undertake various projects. Some ideas include:
- Decentralized blogging platform: Where users can publish and monetize content without intermediaries.
- NFTs market: For artists and collectors who wish to exchange digital art.
- VotingFor community surveys or decentralized decisions.
- Blockchain-based game: Use tokens and unique digital assets.
- Thematic social network: Focused on specific niches, such as music, sports or education.
- Data analysis tool: To visualize statistics and metrics of Hive's blockchain.
For more inspiration, you can exploreHive ProjectsandAwesome Hivewhere you will find a wide range of applications and tools developed by the community. (GitHub)
Advantages of using a front with Hive
Integrating Hive into the front of your applications offers multiple benefits:
- Transactions without commissions: Hive allows free operations, which improves the user's experience.
- Rapidity: Hive transactions are confirmed in approximately 3 seconds.
- Decentralization: Stores data in an unchanging and accessible way without relying on centralized servers.
- Eligible entities: The user names in Hive are easy to remember and use.
- Active ecosystem: Hive has a vibrant community and a wide range of decentralized applications (dApps). (Hive)
Table of existing tutorials
Below is a table with some of the tutorials you have developed, including links to your GitHub repository:
Title of the tutorial | Short description | Link to the repository | |
---|---|---|---|
Multiple tutorials | Learn to integrate React with Hive's blockchain. | See in GitHub |
Keep it up friend!
!PAKX
!PIMP
!PIZZA
View or trade
PAKX
tokens.Use !PAKX command if you hold enough balance to call for a @pakx vote on worthy posts! More details available on PAKX Blog.
$PIZZA slices delivered:
@ecoinstant(2/20) tipped @theghost1980
Come get MOONed!