Explorercreate account

My first steps with the hive api - My first transaction between accounts - Node & React app - Mis primeros pasos con la api de hive - My primera transaccion entre cuentas - Node & React app

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
hive-139531·@jfdesousa7·
0.000 HBD
My first steps with the hive api - My first transaction between accounts - Node & React app - Mis primeros pasos con la api de hive - My primera transaccion entre cuentas - Node & React app
<div id="contentMain">


<div>
<center>
<img src="https://res.cloudinary.com/dzemqknqv/image/upload/v1615307643/11_rtngva.jpg" class="img-fluid">
<br/>
</center>
</div>



<table>
<tr>
<td>Today is a special day, my first meeting with the hive Api, I am going to create an HBD transaction form between users, the backend will be with Node (express) using modern code (ES6) (Babel) and the frontend will be with React using your Next.js framework
</td>
</tr>
</table>

<h1></h1>
<p><br><br>


<h2>Backend -</h2>

<p>In the first instance we will create a folder on the desktop named <code>backend-api-hive-tx</code>/</p>
<p> and we will start a Node project by writing the following in the console / terminal of our pc: </p>

<div><b></b><br/></div>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">npm init --yes
</code>
</pre>
</div>
<br>


<p>We will install the following modules:</p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">npm i express morgan cors @babel/core @babel/cli @babel/node @babel/preset-env dotenv @hiveio/dhive 
</code>
</pre>
</div>
<br>

<p>It's time to code</p>



<p>We will create a <code> src / </code> folder that will contain our logic</p>

<p>We will create a babel configuration file called <code> .babelrc </code> with the following:</p>

<p><b>.babelrc</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">{
    "presets" : [
        "@babel/env"
    ]
}
</code>
</pre>
</div>
<br>


<p>We will create a file called <code> .env </code> that will contain our PrivateKey (Active key)</p>

<p><b>.env</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">PRIVATE_KEY=tu_active_key_aqui
</code>
</pre>
</div>
<br>

<p>src/</p>


<p>We will create a configuration file called config.js with the following:</p>
<p><b>src/config.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">const url = "https://api.hive.blog";
const opt = {};
opt.addressPrefit = "STM";
opt.chainId =
  "beeab0de00000000000000000000000000000000000000000000000000000000";
const type = "HBD";
const from = "jfdesousa7";
export default { url, opt, type, from };
</code>
</pre>
</div>
<br>


<p><b>src/index.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import 'dotenv/config'
import app from './app'
app.listen(app.get('PORT'), () => {
    console.log('Server on Port: ', app.get('PORT'))
})
</code>
</pre>
</div>
<br>

<p><b>src/app.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import express from "express";
import morgan from "morgan";
import { Client, PrivateKey } from "@hiveio/dhive";
import config from "./config";
import cors from 'cors'
// Initialization
const app = express();
app.set("PORT", process.env.PORT || 4000);
// Middlewares
app.use(cors())
app.use(morgan("dev"));
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
// Routes
app.get("/", (req, res) => {
  res.json("Welcome!!");
});
app.post("/transfer", async (req, res) => {
  const client = new Client(config.url, config.opt);
  const { user, quantity, memo } = req.body;
  try {
    const privateKey = PrivateKey.fromString(process.env.PRIVATE_KEY);
    const transfer = quantity.concat(" ", config.type);
    console.log("transfer", transfer);
    //create transfer object
    const transf = new Object();
    transf.from = config.from;
    transf.to = user;
    transf.amount = transfer;
    transf.memo = memo;
    //broadcast the transfer
    const result = await client.broadcast.transfer(transf, privateKey);
    console.log(
      "included in block: " + result.block_num,
      "expired: " + result.expired
    );
    res.status(201).json(result.block_num);
  } catch (error) {
    console.log(error.message);
    res.status(400).json(error.message);
  }
});
export default app;
</code>
</pre>
</div>
<br>

<h5>We go to port 4000 http://localhost:4000 / <code> It will show us the welcome on the initial screen</code></h5>



<h2>FrontEnd -</h2>



<p>For the fron we will create a folder on the desktop named <code>frontend-api-hive-tx</code>/</p>

<p>We will install the following modules:</p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">npm i react react-dom next axios @material-ui/core @material-ui/icons @material-ui/lab
</code>
</pre>
</div>
<br>

<p>It's time to code the front</p>


<p>We will modify the package.json file with the following: </p>
<b>package.json</b>
<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">"scripts": {
    "dev": "next",
    "start": "next start -p $PORT",
    "build": "next build"
  },
</code>
</pre>
</div>
<br>



<p>We will create a folder called <code> pages / </code> that will contain our initial path</p>


<p>We will create a <code> _app.js </code> file which is where we will import our custom styles</p>

<p><b>pages/_app.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import '../styles.css';
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
    return &lt;Component {...pageProps} />
  }
</code>
</pre>
</div>
<br>


<p><b>pages/index.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import Layout from "../components/Layout";
import Form from "../components/Form";
import { makeStyles } from "@material-ui/core/styles";
import LinearProgress from "@material-ui/core/LinearProgress";
import axios from "axios";
import { useState } from "react";
import Alert from "@material-ui/lab/Alert";
const useStyles = makeStyles((theme) => ({
  root: {
    width: "100%",
    "& > * + *": {
      marginTop: theme.spacing(2),
    },
  },
}));
const index = () => {
  const [isLoader, setLoader] = useState(false);
  const [msg, setMsg] = useState('');
  const handleSubmit = async (e) => {
    try {
      e.preventDefault();
      setLoader(true);
      const result = await axios("http://localhost:4000/transfer", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        data: JSON.stringify({
          user: e.target.user.value,
          quantity: e.target.quantity.value,
          memo: e.target.memo.value,
        }),
      }); 
      console.log(result.data)
      setMsg({ status: 0, msg: result.data });
      setLoader(false);
    } catch (error) {
      setMsg({ status: 1, msg: error.message });
      setLoader(false);
    }
  };
  const classes = useStyles();
  return (
    &lt;Layout>
      &lt;h1 style={{ textAlign: "center" }}>
        Transfer &lt;b style={{ color: "red" }}>HBD&lt;/b> to
      &lt;/h1>
      &lt;Form handleSubmit={handleSubmit} />
      &lt;div className={classes.root} style={{ textAlign: "center" }}>
        {isLoader ? &lt;LinearProgress /> : null}
        {msg ? (
          msg.status === 1 ? (
            &lt;Alert style={{textAlign:'center'}} severity="error">{msg.msg}&lt;/Alert>
          ) : (
            &lt;Alert style={{textAlign:'center'}} severity="success">ID Tx = {msg.msg}&lt;/Alert>
          )
        ) : null}
      &lt;/div>
    &lt;/Layout>
  );
};
export default index;
</code>
</pre>
</div>
<br>



<p>We will create our .css style in the root</p>

<p><b>style.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300&display=swap');
*,
*::before,
*::after {
    margin : 0;
    box-sizing: border-box
}
body {
    font-family: 'Jost', sans-serif;
    max-height: 100vh;
}
.container {
    padding:4em
}
</code>
</pre>
</div>
<br>





<h3>Components</h3>


<p><b>components/Navbar.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import IconButton from "@material-ui/core/IconButton";
import Code from "@material-ui/icons/Code";
const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
}));
export default function Navbar() {
  const classes = useStyles();
  return (
    &lt;AppBar position="static">
      &lt;Toolbar variant="dense">
        &lt;IconButton
          edge="start"
          className={classes.menuButton}
          color="inherit"
          aria-label="menu"
        >
          &lt;Code />
        &lt;/IconButton>
        &lt;h2>Hive Transfer from my User to another || &lt;b style={{color:'red'}}>Jfdesousa7&lt;/b>&lt;/h2>
      &lt;/Toolbar>
    &lt;/AppBar>
  );
}
</code>
</pre>
</div>
<br>



<p><b>components/Layout.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import Navbar from "./Navbar";
export default function Layout({ children }) {
  return (
    &lt;div>
      &lt;Navbar />
      &lt;div className="container">
         {children}
      &lt;/div>
    &lt;/div>
  );
}
</code>
</pre>
</div>
<br>



<p><b>components/Form.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import Send from "@material-ui/icons/Send";
import Grid from "@material-ui/core/Grid";
const useStyles = makeStyles((theme) => ({
    button: {
      margin: theme.spacing(1),
    },
    input: {
        width: '45ch'
      }
}));
export default function Form({ handleSubmit }) {
  const classes = useStyles();
  return (
    &lt;Grid style={{textAlign:'center'}}  spacing={3}>
      &lt;form style={{}} autoComplete="off"  onSubmit={handleSubmit}>
        &lt;Grid item xs={12} spacing={2}>
          &lt;TextField className={classes.input} required type="text" name="user" id="user" label="User" />
        &lt;/Grid>
        &lt;Grid item xs={12} >
          &lt;TextField className={classes.input}
            required
            name="quantity"
            type="text"
            id="quantity"
            label="Quantity"
          />
        &lt;/Grid>
        &lt;Grid item xs={12} >
          &lt;TextField className={classes.input} required name="memo" type="text" id="memo" label="Memo" />
        &lt;/Grid>
        &lt;Grid item xs={12} >
          &lt;Button
            type="submit"
            variant="contained"
            color="primary"
            className={classes.button}
            endIcon={&lt;Send />}
          >
            Send
          &lt;/Button>
        &lt;/Grid>
      &lt;/form>
    &lt;/Grid>
  );
}
</code>
</pre>
</div>
<br>

<h5>We go to port 3000 http://localhost:3000/</h5>




<h4>Captures: </h4>


<div>
<center>
<img src="https://res.cloudinary.com/dzemqknqv/image/upload/v1615307643/screencapture-localhost-3000-2021-03-09-12_29_53_aylq1b.png" class="img-fluid">
<br/>
</center>
</div>


<div>
<center>
<img src="https://res.cloudinary.com/dzemqknqv/image/upload/v1615307643/11_rtngva.jpg" class="img-fluid">
<br/>
</center>
</div>


<div>
<center>
<img src="https://res.cloudinary.com/dzemqknqv/image/upload/v1615307644/3_ovn505.jpg" class="img-fluid">
<br/>
</center>
</div>


<div>
<center>
<img src="https://res.cloudinary.com/dzemqknqv/image/upload/v1615307643/2_akpfbb.jpg" class="img-fluid">
<br/>
</center>
</div>


<table><tr><td><h3>And with those friends we reached the end of the tutorial, I hope you enjoyed it and until next time!</h3></td>
</tr>
</table>
<br/>



<h4>Visit my official website for budges and much more</h4>

<center><a href="https://tupaginaonline.net" target="_blank"><b>TupaginaOnline.net</b></a></center>










<h1>Espa&ntilde;ol</h1>

<table>
<tr>
<td>Hoy es un día especial, mi primer encuentro con la Api de hive, voy a crear un formulario de transacción de HBD entre usuarios, el backend será con Node (express) usando código moderno (ES6) (Babel) y el frontend será con React usando su framework Next.js
</td>
</tr>
</table>

<h1></h1>
<p><br><br>


<h2>Backend -</h2>

<p>En primer instancia crearemos una carpeta en el escritorio de nombre <code>backend-api-hive-tx</code>/</p>
<p> e iniciaremos un proyecto de Node escribiendo en la consola/terminal de nuestra pc lo siguiente: </p>

<div><b></b><br/></div>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">npm init --yes
</code>
</pre>
</div>
<br>


<p>Instalaremos los siguientes modulos:</p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">npm i express morgan cors @babel/core @babel/cli @babel/node @babel/preset-env dotenv @hiveio/dhive 
</code>
</pre>
</div>
<br>

<p>Es momento de codear</p>



<p>Crearemos una carpeta <code>src/</code> que contendrá nuestra lógica</p>

<p>Crearemos un archivo de configuración de babel llamado <code>.babelrc</code> con lo siguiente: </p>

<p><b>.babelrc</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">{
    "presets" : [
        "@babel/env"
    ]
}
</code>
</pre>
</div>
<br>


<p>Crearemos un archivo llamado <code>.env</code> que contendra nuestra PrivateKey (Active key)</p>

<p><b>.env</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">PRIVATE_KEY=tu_active_key_aqui
</code>
</pre>
</div>
<br>

<p>src/</p>


<p>Crearemos un archivo de configuración llamado config.js con lo siguiente:</p>
<p><b>src/config.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">const url = "https://api.hive.blog";
const opt = {};
opt.addressPrefit = "STM";
opt.chainId =
  "beeab0de00000000000000000000000000000000000000000000000000000000";
const type = "HBD";
const from = "jfdesousa7";
export default { url, opt, type, from };
</code>
</pre>
</div>
<br>


<p><b>src/index.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import 'dotenv/config'
import app from './app'
app.listen(app.get('PORT'), () => {
    console.log('Server on Port: ', app.get('PORT'))
})
</code>
</pre>
</div>
<br>

<p><b>src/app.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import express from "express";
import morgan from "morgan";
import { Client, PrivateKey } from "@hiveio/dhive";
import config from "./config";
import cors from 'cors'
// Initialization
const app = express();
app.set("PORT", process.env.PORT || 4000);
// Middlewares
app.use(cors())
app.use(morgan("dev"));
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
// Routes
app.get("/", (req, res) => {
  res.json("Welcome!!");
});
app.post("/transfer", async (req, res) => {
  const client = new Client(config.url, config.opt);
  const { user, quantity, memo } = req.body;
  try {
    const privateKey = PrivateKey.fromString(process.env.PRIVATE_KEY);
    const transfer = quantity.concat(" ", config.type);
    console.log("transfer", transfer);
    //create transfer object
    const transf = new Object();
    transf.from = config.from;
    transf.to = user;
    transf.amount = transfer;
    transf.memo = memo;
    //broadcast the transfer
    const result = await client.broadcast.transfer(transf, privateKey);
    console.log(
      "included in block: " + result.block_num,
      "expired: " + result.expired
    );
    res.status(201).json(result.block_num);
  } catch (error) {
    console.log(error.message);
    res.status(400).json(error.message);
  }
});
export default app;
</code>
</pre>
</div>
<br>

<h5>Nos vamos al puerto 4000 http://localhost:4000/ <code>Nos mostrara el welcome en la pantalla inicial</code></h5>



<h2>FrontEnd -</h2>



<p>Para el fron crearemos una carpeta en el escritorio de nombre <code>frontend-api-hive-tx</code>/</p>

<p>Instalaremos los siguientes modulos:</p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">npm i react react-dom next axios @material-ui/core @material-ui/icons @material-ui/lab
</code>
</pre>
</div>
<br>

<p>Es momento de codear el front</p>


<p>Modificaremos el archivo package.json con lo siguiente : </p>
<b>package.json</b>
<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">"scripts": {
    "dev": "next",
    "start": "next start -p $PORT",
    "build": "next build"
  },
</code>
</pre>
</div>
<br>



<p>Crearemos  una carpeta llamada <code>pages/</code> que contendrá nuestra ruta inicial</p>


<p>Crearemos un archivo <code>_app.js</code> que es donde importaremos nuestros estilos personalizados</p>

<p><b>pages/_app.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import '../styles.css';
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
    return &lt;Component {...pageProps} />
  }
</code>
</pre>
</div>
<br>


<p><b>pages/index.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import Layout from "../components/Layout";
import Form from "../components/Form";
import { makeStyles } from "@material-ui/core/styles";
import LinearProgress from "@material-ui/core/LinearProgress";
import axios from "axios";
import { useState } from "react";
import Alert from "@material-ui/lab/Alert";
const useStyles = makeStyles((theme) => ({
  root: {
    width: "100%",
    "& > * + *": {
      marginTop: theme.spacing(2),
    },
  },
}));
const index = () => {
  const [isLoader, setLoader] = useState(false);
  const [msg, setMsg] = useState('');
  const handleSubmit = async (e) => {
    try {
      e.preventDefault();
      setLoader(true);
      const result = await axios("http://localhost:4000/transfer", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        data: JSON.stringify({
          user: e.target.user.value,
          quantity: e.target.quantity.value,
          memo: e.target.memo.value,
        }),
      }); 
      console.log(result.data)
      setMsg({ status: 0, msg: result.data });
      setLoader(false);
    } catch (error) {
      setMsg({ status: 1, msg: error.message });
      setLoader(false);
    }
  };
  const classes = useStyles();
  return (
    &lt;Layout>
      &lt;h1 style={{ textAlign: "center" }}>
        Transfer &lt;b style={{ color: "red" }}>HBD&lt;/b> to
      &lt;/h1>
      &lt;Form handleSubmit={handleSubmit} />
      &lt;div className={classes.root} style={{ textAlign: "center" }}>
        {isLoader ? &lt;LinearProgress /> : null}
        {msg ? (
          msg.status === 1 ? (
            &lt;Alert style={{textAlign:'center'}} severity="error">{msg.msg}&lt;/Alert>
          ) : (
            &lt;Alert style={{textAlign:'center'}} severity="success">ID Tx = {msg.msg}&lt;/Alert>
          )
        ) : null}
      &lt;/div>
    &lt;/Layout>
  );
};
export default index;
</code>
</pre>
</div>
<br>



<p>Crearemos en la raiz nuestro estilo .css</p>

<p><b>style.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300&display=swap');
*,
*::before,
*::after {
    margin : 0;
    box-sizing: border-box
}
body {
    font-family: 'Jost', sans-serif;
    max-height: 100vh;
}
.container {
    padding:4em
}
</code>
</pre>
</div>
<br>





<h3>Componentes</h3>


<p><b>components/Navbar.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import IconButton from "@material-ui/core/IconButton";
import Code from "@material-ui/icons/Code";
const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
}));
export default function Navbar() {
  const classes = useStyles();
  return (
    &lt;AppBar position="static">
      &lt;Toolbar variant="dense">
        &lt;IconButton
          edge="start"
          className={classes.menuButton}
          color="inherit"
          aria-label="menu"
        >
          &lt;Code />
        &lt;/IconButton>
        &lt;h2>Hive Transfer from my User to another || &lt;b style={{color:'red'}}>Jfdesousa7&lt;/b>&lt;/h2>
      &lt;/Toolbar>
    &lt;/AppBar>
  );
}
</code>
</pre>
</div>
<br>



<p><b>components/Layout.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import Navbar from "./Navbar";
export default function Layout({ children }) {
  return (
    &lt;div>
      &lt;Navbar />
      &lt;div className="container">
         {children}
      &lt;/div>
    &lt;/div>
  );
}
</code>
</pre>
</div>
<br>



<p><b>components/Form.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import Send from "@material-ui/icons/Send";
import Grid from "@material-ui/core/Grid";
const useStyles = makeStyles((theme) => ({
    button: {
      margin: theme.spacing(1),
    },
    input: {
        width: '45ch'
      }
}));
export default function Form({ handleSubmit }) {
  const classes = useStyles();
  return (
    &lt;Grid style={{textAlign:'center'}}  spacing={3}>
      &lt;form style={{}} autoComplete="off"  onSubmit={handleSubmit}>
        &lt;Grid item xs={12} spacing={2}>
          &lt;TextField className={classes.input} required type="text" name="user" id="user" label="User" />
        &lt;/Grid>
        &lt;Grid item xs={12} >
          &lt;TextField className={classes.input}
            required
            name="quantity"
            type="text"
            id="quantity"
            label="Quantity"
          />
        &lt;/Grid>
        &lt;Grid item xs={12} >
          &lt;TextField className={classes.input} required name="memo" type="text" id="memo" label="Memo" />
        &lt;/Grid>
        &lt;Grid item xs={12} >
          &lt;Button
            type="submit"
            variant="contained"
            color="primary"
            className={classes.button}
            endIcon={&lt;Send />}
          >
            Send
          &lt;/Button>
        &lt;/Grid>
      &lt;/form>
    &lt;/Grid>
  );
}
</code>
</pre>
</div>
<br>

<h5>Nos vamos al puerto 3000 http://localhost:3000/</h5>




<h4>Capturas: </h4>


<div>
<center>
<img src="https://res.cloudinary.com/dzemqknqv/image/upload/v1615307643/screencapture-localhost-3000-2021-03-09-12_29_53_aylq1b.png" class="img-fluid">
<br/>
</center>
</div>


<div>
<center>
<img src="https://res.cloudinary.com/dzemqknqv/image/upload/v1615307643/11_rtngva.jpg" class="img-fluid">
<br/>
</center>
</div>


<div>
<center>
<img src="https://res.cloudinary.com/dzemqknqv/image/upload/v1615307644/3_ovn505.jpg" class="img-fluid">
<br/>
</center>
</div>


<div>
<center>
<img src="https://res.cloudinary.com/dzemqknqv/image/upload/v1615307643/2_akpfbb.jpg" class="img-fluid">
<br/>
</center>
</div>


<table><tr><td><h3>Y con esos amigos llegamos al final del tutorial, espero que lo hayan disfrutado y ¡hasta la próxima! </h3></td>
</tr>
</table>
<br/>



<h4>Visite mi sitio web oficial para presupuestos y mucho más</h4>

<center><a href="https://tupaginaonline.net" target="_blank"><b>TupaginaOnline.net</b></a></center>


</div>
👍 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
properties (23)vote details (343)