DEV Community: Steadylearner

How to make a GUI translator app with Python Tkinter

Steadylearner — Thu, 16 Feb 2023 18:44:09 +0000

In this post, we will learn how to make a simple GUI CLI translator app with Python Tkinter similar to the cover of this blog post.

Before we start, please install Python and pip if you haven't yet. Then, read the docs for the packages we will use.

The project is already complete at Python_Tkinter_Example repository. If you want to test it on your own first, please use these commands below.

$git clone https://github.com/steadylearner/Python_Tkinter_Example.git
$cd Python_Tkinter_Example
$python3 -m venv app
$source app/bin/activate
$pip install -r requirements.txt
$python main.py

You will also need to have ffmpeg already installed at your machine. Otherwise, find commands like these to make it work at your machine.

$brew install ffmpeg --force
$brew link ffmpeg

Then, you can see if it installed with $ffmpeg -h command.

Testing those commands, you will see the Python GUI app. You can type what you want to translate at the Input Text form and it will show translated text at the Translated Text form below.

You can clear, paste a text from clipboard, copy the text to clipboard and make it speak repeatedly with the buttons.

You can also use menu at the top to use your mic, text file or audio file as text input as well. If you want to, you can also save translated text or audio file.

You can also edit a form setting for how it should work for your preferred languages and voices similar to the image below.

You can find the default values for them at settings.py similar to this.

TRANSLATED_TEXT_OPTIONS = [
    "en",
]

VOICE_LANGUAGE_OPTIONS = [
    "en_US",
]

VOICE_GENDER_OPTIONS = ["VoiceGenderMale", "VoiceGenderFemale", "None"]

You can update TRANSLATED_TEXT_OPTIONS, VOICE_LANGUAGE_OPTIONS and those values don't always work together well. Therefore, you will need to test yourself at your machine.

Those will be enough information to test the app.

Before we start to see how the app work with details, please read these first.

It will help you make your own component and menu after you read this post.

The entry point for this Tkinter app will be main.py file. It will be the most important part for this ap.

To start with, you can see the code snippet at the end.

if __name__ == "__main__":
    if len(read_settings("form")) == 0:
        upsert_settings(
            "form",
            {
                "input_text": "auto",
                "translated_text": "en",
                "voice_language": "en_US",
                "voice_gender": "VoiceGenderMale",
            },
        )

    window.mainloop()

Here, we save app settings with Python tinydb and you can also use another simple database options. It is included because Python is used here.

 if len(read_settings("form")) == 0:
        upsert_settings(
            "form",
            {
                "input_text": "auto",
                "translated_text": "en",
                "voice_language": "en_US",
                "voice_gender": "VoiceGenderMale",
            },
        )

We save form settings to db.json unless it was already there with the settings. Then, we start the app with window.mainloop() part.

Tinydb relevant code snippets are saved at database.py

from tinydb import TinyDB, Query

db = TinyDB("db.json")
query = Query()
settings = db.table("settings")

def read_settings(name):
    return settings.search(query.name == name)


def upsert_settings(name, details):
    settings.upsert({"name": name, "details": details}, query.name == name)


def read_input_text_language():
    return read_settings("form")[0]["details"]["input_text"]


def read_translated_text_language():
    return read_settings("form")[0]["details"]["translated_text"]


def read_voice_language():
    return read_settings("form")[0]["details"]["voice_language"]


def read_voice_gender():
    return read_settings("form")[0]["details"]["voice_gender"]

Here, we save some read and upsert features for form settings to functions so we can easily reuse in other parts of the app.

We only need to save a single entry for form settings. You can include more settings to save here for your custom app later.

Then, there are GoogleTranslator and recognizer and microphone

They are used to recognize the text from audio files to use for the input form and use your microphone variable to use the microphone at your machine.

You can read the docs for them to see more details.

import speech_recognition as sr
from deep_translator import GoogleTranslator

recognizer = sr.Recognizer()
microphone = sr.Microphone()

Those will be the main parts that make this app work at the behind. You can see its first usage at the debounced function below.

It translates the input text to what you set at settings whenever a user type something. It is debounced for a second because there are some rate limits from the google translator service we use for this app.

This will prevent the request is sent to it whenever user type and stop the app to work.

input_text_value = tk.StringVar()

@debounce(1)
def on_input_text_value_update(event):
    input_text_value.set(input_text.get("1.0", tk.END))

    translated = GoogleTranslator(
        source=read_input_text_language(), target=read_translated_text_language()
    ).translate(input_text_value.get())

    if read_voice_gender() != "None" and len(translated) != 0:
        q.put(translated)

    translated_text.config(state="normal")
    translated_text.replace("1.0", tk.END, translated)
    translated_text.config(state="disabled")

input_text.bind("<KeyRelease>", on_input_text_value_update)

Here, we save the input text form value to input_text_value = tk.StringVar() with input_text_value.set(input_text.get("1.0", tk.END)) and read translated value of it.

The queue with a thread is used with q.put(translated) because the code to use speaker from pyttx doesn't work well without it.

import pyttsx3
import threading
import queue

from tkinter import messagebox

from database import (
    read_voice_language,
    read_voice_gender,
)

class TTSThread(threading.Thread):
    def __init__(self, queue):
        threading.Thread.__init__(self)
        self.queue = queue
        self.daemon = True
        self.engine = pyttsx3.init()
        self.start()

    def run(self):
        self.engine.startLoop(False)
        t_running = True

        while t_running:
            if self.queue.empty():
                self.engine.iterate()
            else:
                data = self.queue.get()
                # print("data")
                # print(data)

                if data == "exit":
                    t_running = False
                else:
                    if self.change_voice(read_voice_language()) == True:
                        # self.engine.setProperty('rate', 10)
                        self.engine.say(data)

        self.engine.endLoop()

    def change_voice(self, language):
        gender = read_voice_gender()
        # print("gender")
        # print(gender)
        lang_correct = False
        gender_correct = False

        for voice in self.engine.getProperty("voices"):
            if language in voice.languages:
                lang_correct = True

                if gender == voice.gender:
                    gender_correct = True
                    self.engine.setProperty("voice", voice.id)
                    break
                else:
                    gender_correct = False
                    messagebox.showerror(
                        message="Gender '{}' not found for {}, update it at languages settings if you don't want to see this error".format(
                            gender, language
                        )
                    )
                    break
        # print("")
        if lang_correct == False and gender_correct == False:
            messagebox.showerror(
                message="Language '{}' not found, update Translated Voice if you don't want to see this error".format(
                    language, gender
                )
            )

        # Both should be True to speak
        return lang_correct and gender_correct


# create a queue to send commands from the main thread
q = queue.Queue()
tts_thread = TTSThread(q)  # note: thread is auto-starting

Here, we show a helpful error message to a user whenever any form settings option is unavailable in your machine using the messagebox from Tkinter.

You can test it with other options at the form settings and you will see the error similar to this.

messagebox.showerror(
                message="Language '{}' not found, update Translated Voice if you don't want to see this error".format(
                    language, gender
                )
            )

Then, if read_voice_gender() != "None" is True or if there was no text in the input text we don't send a queue to a speaker to speak the translated text. Otherwise, you will hear something from your machine. This is included because not always there is a voice ready for a language. If you don't want to see the warning you can set VOICE_GENDER_OPTIONS to None.

translated_text.config(state="normal")
translated_text.replace("1.0", tk.END, translated)
translated_text.config(state="disabled")

To preserve translated text, the translated_text is uneditable by default but, here we save the translated text first and make it uneditable again with the code snippet above.

Until this, we learnt how to make your input text translated and hear it also. It is used for the GUI app but you will be able to use it in your web app or other projects also.

We still have some parts for layout.

window = tk.Tk()
window.title(APP_TITLE)

window.rowconfigure(0, weight=1)
window.columnconfigure(1, weight=1)

menubar = Menu(window)
window.config(menu=menubar)

translation_form = tk.Frame(window)
translation_form.grid(row=0, column=1, sticky="nsew")

input_text_label = tk.Label(
    translation_form, text="Input Text", anchor="w", font=LABEL_FONT, padx=10, pady=10
)
input_text_label.grid(row=0, column=1, sticky="ew")

input_text = tk.Text(translation_form, font=TEXT_FONT, height=15)
input_text.grid(row=2, column=1, sticky="ew")

input_text_value = tk.StringVar()

First, we start the app with window = tk.Tk() and set title with window.title(APP_TITLE) you can edit app title at settings.py to use another title. window here is a top level component for your gui app. It is easily accessible with winfo_toplevel() we will see later. You don't need to pass it to the other components to use its other method by using that.

Then, we set menubar and assign to the window.

menubar = Menu(window)
window.config(menu=menubar)

You can see you can include sub menubars here.

menubar.add_cascade(
    label="File",
    menu=FileMenu(window, q, input_text, translated_text, recognizer, microphone),
    underline=0,
)

settings = Menu(menubar, tearoff=0)
settings.add_command(label="Form", command=lambda: show_form_settings_dialog(window))

FileMenu here is a component and you can see it uses window, q, input_text, translated_text, recognizer, microphone variables inside.

class FileMenu(Menu):
    def __init__(self, master, q, input_text, translated_text, recognizer, microphone):
        super().__init__(master)

        self.q = q
        self.input_text = input_text
        self.translated_text = translated_text
        self.recognizer = recognizer
        self.microphone = microphone

        use_sub_menu = Menu(self, tearoff=0)
        use_sub_menu.add_command(
            label="Mic for Input Text", command=self.use_mic_for_input_text
        )
        use_sub_menu.add_command(
            label="Text File for Input Text", command=self.use_text_file_for_input_text
        )
        use_sub_menu.add_command(
            label="Audio File for Input Text",
            command=self.use_audio_file_for_input_text,
        )
        self.add_cascade(label="Use", menu=use_sub_menu)

        save_sub_menu = Menu(self, tearoff=0)
        save_sub_menu.add_command(
            label="Translated Text to a text file",
            command=self.save_translated_text_to_text_file,
        )
        save_sub_menu.add_command(
            label="Translated Text to an audio file",
            command=self.save_translated_text_to_audio_file,
        )
        self.add_cascade(label="Save", menu=save_sub_menu)

        self.add_separator()
        self.add_command(label="Close", command=self.master.destroy)

    def use_mic_for_input_text(self):
        """Use a mic for input text"""

        what_you_said = recognize_speech_from_mic(self.recognizer, self.microphone)

        if what_you_said["error"]:
            messagebox.showerror(title="Error", message=what_you_said["error"])
            return

        if not what_you_said["success"]:
            messagebox.showerror(
                title="Error", message="I couldn't read that. What did you say?"
            )
            return

        if what_you_said["transcription"] == None:
            messagebox.showerror(
                title="Error", message="Please, say something next time."
            )
        else:
            text = what_you_said["transcription"]

            translated = GoogleTranslator(
                source=read_input_text_language(),
                target=read_translated_text_language(),
            ).translate(text)

            self.q.put(translated)

            if len(self.input_text.get("1.0", END)) > 0:
                self.input_text.insert(END, f" {text}")
                self.translated_text.insert(END, f" {translated}")
            else:
                self.input_text.insert(END, f"{text}")
                self.translated_text.insert(END, f"{translated}")

    def use_text_file_for_input_text(self):
        """Use a text file for input text."""

        filepath = askopenfilename(
            filetypes=[("Text Files", "*.txt"), ("All Files", "*.*")]
        )
        if not filepath:
            # messagebox.showerror(title="Error", message="Use the correct filepath for the text file")
            return

        self.input_text.delete("1.0", END)
        self.translated_text.delete("1.0", END)
        with open(filepath, mode="r", encoding="utf-8") as input_file:
            text = input_file.read()
            self.input_text.insert(END, text)

            translated = GoogleTranslator(
                source=read_input_text_language(),
                target=read_translated_text_language(),
            ).translate(text)
            self.q.put(translated)

            self.translated_text.config(state="normal")
            self.translated_text.replace("1.0", END, translated)
            self.translated_text.config(state="disabled")

            self.master.title(f"{APP_TITLE} - {filepath}")

            # self.winfo_toplevel().title(f"{APP_TITLE} - {filepath}")

    def use_audio_file_for_input_text(self):
        """Use an audio file for input text."""

        filepath = askopenfilename(
            filetypes=[("Audio Files", "*.mp3"), ("Audio Files", "*.wav")],
        )
        if not filepath:
            # messagebox.showerror(
            #     title="Error", message="Use the correct filepath for the audio file")
            return

        # mp3
        # print("filepath")
        # print(filepath)
        # to wav file to use sr.AudioFile
        if filepath.endswith("mp3"):
            filepath_without_ext = filepath.split(".")[0]
            new_wav_filepath = f"{filepath_without_ext}.wav"

            subprocess.call(["ffmpeg", "-y", "-i", filepath, new_wav_filepath])

            audio = sr.AudioFile(new_wav_filepath)

            response = messagebox.askquestion(
                title=None,
                message="To use the mp3 file for the app, we had to make the file with .wav extension, do you want to remove the original mp3 file?",
            )
            if response == "yes":
                os.remove(filepath)
                messagebox.showinfo(message=f"The mp3 file at {filepath} was removed")

        else:
            audio = sr.AudioFile(filepath)

        with audio as source:
            # This doesn't work here.
            # recognizer.adjust_for_ambient_noise(source)

            audio = self.recognizer.record(source)

            try:
                transcription = str(
                    self.recognizer.recognize_google(audio, show_all=False)
                )

                self.input_text.delete("1.0", END)
                self.translated_text.delete("1.0", END)

                self.input_text.insert(END, transcription)

                translated = GoogleTranslator(
                    source=read_input_text_language(),
                    target=read_translated_text_language(),
                ).translate(transcription)
                self.q.put(translated)

                self.translated_text.config(state="normal")
                self.translated_text.replace("1.0", END, translated)
                self.translated_text.config(state="disabled")

                self.master.title(f"{APP_TITLE} - {filepath}")
                # self.winfo_toplevel().title(f"{APP_TITLE} - {filepath}")
            except:
                messagebox.showinfo("Something went wrong while reading the audio file")

    def save_translated_text_to_text_file(self):
        """Save the translated_text as a new file."""

        filepath = asksaveasfilename(
            defaultextension=".txt",
            filetypes=[("Text Files", "*.txt"), ("All Files", "*.*")],
        )
        if not filepath:
            return

        with open(filepath, mode="w", encoding="utf-8") as output_file:
            translated = self.translated_text.get("1.0", END)
            output_file.write(translated)
            messagebox.showinfo(message=f"The file was saved")

            self.master.title(f"{APP_TITLE} - {filepath}")
            # self.winfo_toplevel().title(f"{APP_TITLE} - {filepath}")

    def save_translated_text_to_audio_file(self):
        """Save the translated_text as a new file."""

        # Should be wav instead of mp3
        filepath = asksaveasfilename(
            defaultextension=".mp3",
            filetypes=[("Audio Files", "*.mp3"), ("All Files", "*.*")],
        )
        if not filepath:
            return

        with open(filepath, mode="w", encoding="utf-8") as output_file:
            translated = self.translated_text.get("1.0", END)

            tts = gtts.gTTS(
                text=translated, lang=read_translated_text_language()
            )  # Include it for settings or input bar for text input or dropdown
            tts.save(filepath)  # mp3
            messagebox.showinfo(message=f"The file was saved")

            self.master.title(f"{APP_TITLE} - {filepath}")
            # self.winfo_toplevel().title(f"{APP_TITLE} - {filepath}")

It has various methods you can use to use text or audio file as a text input source or save translated text to text or audio and reuse later.

The ffmpeg is used with subprocess to turn mp3 file to wav extension because some packages used here allows different file formats.

subprocess.call(["ffmpeg", "-y", "-i", filepath, new_wav_filepath])

Please, use each option while you testing the app with $python main.py especially for "Mic for Input Text" option.

There are other files in components folder but they do all similar things so please read and test the app yourself.

If you want to, you can make a binary executable file with $python cli.py build app command.

It uses the pyinstaller command behind and please read their docs if you want to know more details.

When you test the app locally, it might use a lot of resources of your machine. But, it will not have that issue when you test with the binary app built from the command.

You can test it with ./app at dist folder and you will be able to use it without making it work locally with your console.

You can follow me at GitHub.

You can contact or hire me at Telegram.

Thanks and please share this post with others.

How to use CORS for all routes with Next js and browser session api

Steadylearner — Tue, 07 Feb 2023 14:29:11 +0000

In this post, you will learn how to use CORS with Next JS.

If you want a full working project for this blog post, please read How to make a full stack facial authentication app with FaceIO and Next js and the repository for it.

The reason for writing this short blog post is to help you find an example to use CORS for all routes. When I searched the example for it with a query like How to use CORS for all routes with next js, it was easy to find an example that works for a single route but not for all routes with Next js.

There was a package like nextjs-cors but it doesn't have an example to work for all routes and for a route only. I will help you with the code snippets below to help you find how to use CORS for all routes.

You can see the official example from it below.

import NextCors from 'nextjs-cors';

async function handler(req, res) {
   await NextCors(req, res, {
      methods: ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE'],
      origin: '*',
      optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
   });

   // Rest of the API logic
   res.json({ message: 'Hello NextJs Cors!' });
}

Not so complicated but you will see in its issues page, some people wants to find a solution to use CORS for all routes but not responded yet currently.

Therefore, I had to my own way for this so after a few searches, I could find the working code for below. If you want more details, please read this file withSession.ts at GitHub.

import NextCors from 'nextjs-cors';

function withNextCors(
  handler: NextApiHandler,
): NextApiHandler {
  return async function nextApiHandlerWrappedWithNextCors(req, res) {

    const methods = ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE'];
    await NextCors(req, res, {
      methods,
      origin: CORS_ALLOWED_ORGIN,
      optionsSuccessStatus: 200,
    });

    return handler(req, res);
  };
}

You can save the code above as withCors.ts or withNextCors.ts or something else and use it as a Next js api handlers. You can find some examples for it here.

For example, you can use NextCors locally similar to the code snippet below and compare.

import { DataTypes } from "sequelize";
import NextCors from 'nextjs-cors';

import {
  sequelize,
} from "../../../../../db";

import { withNextCorsSessionRoute } from "../../../../withSession";
import validateUser, { UserValidationResult } from "../../../../validateUser";
import { CreateUserRequest } from "../../../../../schemas/user";

// import { CORS_ALLOWED_ORGIN } from "../../../../environment";

const User = require('../../../../../models/user')(sequelize, DataTypes);

// $curl -X POST -H 'Content-Type: application/json' -d '{"facialId":"test", "name":"name", "email":"email@example.com"}'  http://localhost:3000/api/v1/user/register
export default withNextCorsSessionRoute(async (req, res) => {
  await NextCors(req, res, {
    // Options
    methods: ['POST'],
    origin: CORS_ALLOWED_ORGIN,
    optionsSuccessStatus: 200,
  });

  if (req.method !== "POST") {
    res.status(405).send(""); // Incorrect request method
    return;
  }

  const { 
    facialId, 
    name, 
    email,
  } = req.body as CreateUserRequest;

  const dbUserByFacialId = await User.findOne({
    where: {
      facialId
    }
  });

  if (dbUserByFacialId === null) {
    let userValidationResult = validateUser(name, email);

    if (userValidationResult === UserValidationResult.None) {
      const dbUserByEmail = await User.findOne({
        where: {
          email
        }
      });

      if (dbUserByEmail !== null) {
        userValidationResult = UserValidationResult.TakenEmail;
      }
    }

    if (userValidationResult !== UserValidationResult.None) {
      res.status(400).send(userValidationResult);
      return;
    }

    const newUser = await User.create({
      facialId,
      name,
      email,
    });

    res.status(200).send(userValidationResult);
  } else {
    res.status(400).send(UserValidationResult.TakenFacialId);
  }
});

You can use CURL commands to test CORS.

$curl -H 'Content-Type: application/json' -d '{"facialId":"test", "name":"name", "email":"email@example.com"}' -v --request OPTIONS 'http://localhost:3000/api/v1/user/register' --header 'Origin: http://some.origin.here'; --header 'Access-Control-Request-Method: POST'

But, it will be better to use browser console and fetch api in it instead.

fetch('http://localhost:3000/api/v1/user/register');

If you don't have any example to test this, you can use the blog post How to make a full stack facial authentication app with FaceIO and Next js instead.

If you want to use Session with CORS also like the example, you can use the code snippet below.

export function withNextCorsSessionRoute(handler: NextApiHandler) {
  const withSessionHandler = withIronSessionApiRoute(handler, sessionOptions);
  return withNextCors(withSessionHandler);
}

You just need to wrap withIronSessionApiRoute(handler, sessionOptions) from iron-session which I could find the solution from this at their code.

If you read how it works, you can see it just does something before they return handler(req, res) at the end.

export function withIronSessionApiRoute(
  handler: NextApiHandler,
  options: IronSessionOptions | GetIronSessionApiOptions,
): NextApiHandler {
  return async function nextApiHandlerWrappedWithIronSession(req, res) {
    let sessionOptions: IronSessionOptions;

    if (options instanceof Function) {
      sessionOptions = await options(req, res);
    } else {
      sessionOptions = options;
    }

    const session = await getIronSession(req, res, sessionOptions);

    Object.defineProperty(
      req,
      "session",
      getPropertyDescriptorForReqSession(session),
    );
    return handler(req, res);
  };
}

We just needed to do the same thing for the CORS to work with it.

You will see it is easy to find a way if you search how others solved the similar issue first.

I want this post could be helpful for someone who wanted to use CORS for all routes. It is always easier with examples.

You can follow me at GitHub.

You can contact or hire me at Telegram.

How to make a full stack facial authentication app with FaceIO and Next js

Steadylearner — Thu, 02 Feb 2023 17:01:01 +0000

With the growing interest in ChatGPT, people will start to use more data science and machine learning tech behind it, I am sure this year and on a lot of new techs relevant to them will be around us.

Therefore, I decided to make a simple facial authentication full stack app with FACEIO and Next js. When you end following this blog post, you will have an app similar to the cover of this blog post.

You can find the github repository for this here.

What is FACEIO?

When you visit their website, you will see this phrase.

Facial Authentication for the Web

Cross Browser, Secure & Easy to implement, Passwordless Authentication powered by Face Recognition for Web Sites

But, you can simply think they will help your users to make accounts at your website with facial authentication process. Instead of investing a lot to make the facial recognition service used behind to work, you can use their service isntead and save a lot of dev time.

You might think it would be difficult to use it like I did. But, you can see how it is easy to use it with the FACEIO example I built for this post.

It uses the Next js for the frontend and backend server and Sqlite for the database. They are both easy to set up and with the commands I will share you, it won't be difficult to test the example on your own as well.

Before you test the code at FACEIO example repository, please visit FACEIO console and make a test account. You will not be charged and will be using the free FREEMIUM option as a default. This will be enough to test the code shared for this so don't worry about that.

If you want to, you can visit FACEIO pricing to see more details.

Then, you can make a new application by following the process and you will have Application Public ID at the end that will be used at the frontend of your app.

You can also find FACEIO_API_KEY at manage application page that will be used to remove facial ids you will have later.

Prepare a .env file

You can set up your .env file similar to this after you follow the previous process.

NEXT_PUBLIC_FACEIO_APPLICATION_PUBLIC_ID=<yours>
FACEIO_API_KEY=<yours>

SESSION_AUTHENTICATION_CREDENTIAL=<your random credential>

SESSION_AUTHENTICATION_CREDENTIAL is for iron-session that we will use to save user data at the backend later. You can decide what you want to use. Please, read its documentations.

Test the repository

Having .env file ready, you will be able to test the frontend part of the repository with these commands.

$git clone https://github.com/steadylearner/faceio_example.git
$yarn
$yarn dev

But, to make the backend work as well, you will need to set up the sqlite database first. I have prepared the script while I referred to Next js sequelize repository. It has not much documentation for it, but it will be useful if you want to write more advanced examples later.

$yarn reset-database

The command will create a new database.db file or reset it if you already have the file. Then, you can use $npx sequelize-cli init command below to make migrations folder and other files to help you use sqlite database.

You will see config/config.json file is created in your folder. It is also already included in the repository.

{
  "development": {
    "username": "root",
    "password": null,
    "host": "./database.db",
    "dialect": "sqlite"
  },
  "test": {
    "username": "root",
    "password": null,
    "host": "./database.db",
    "dialect": "sqlite"
  },
  "production": {
    "username": "root",
    "password": null,
    "host": "./database.db",
    "dialect": "sqlite"
  }
}

You should edit it in case you want to use another database. For more details, please read docs at sequelize-cli and https://sequelize.org/docs/v6/other-topics/migrations documentation.

By the way, if you want to use Postgresql, you can refer to this blog post https://dev.to/steadylearner/how-to-set-up-postgresql-and-pgadmin-with-docker-51h

Then, you can use this commmand to make your first migration file for users we will use for the facial authentication app. It will create a create-user.js migration file at migrations folder.

$yarn sequelize-cli model:generate --name Test --attributes facialId:string,name:string,email:string

You can paste the code below to it.

'use strict';
/** @type {import('sequelize-cli').Migration} */
module.exports = {
  async up(queryInterface, Sequelize) {
    await queryInterface.createTable('Users', {
      id: {
        type: Sequelize.UUID,
        allowNull: false,
        primaryKey: true,
        defaultValue: Sequelize.UUIDV4,
      },
      facialId: {
        type: Sequelize.STRING,
        allowNull: false,
        unique: true,
      },
      name: {
        type: Sequelize.STRING,
        allowNull: false,
      },
      email: {
        type: Sequelize.STRING,
        allowNull: false,
        unique: true,
      },
      createdAt: {
        allowNull: false,
        type: Sequelize.DATE
      },
      updatedAt: {
        allowNull: false,
        type: Sequelize.DATE
      }
    });
  },
  async down(queryInterface, Sequelize) {
    await queryInterface.dropTable('Users');
  }
};

id, createdAt, updatedAt should be auto generated by the sequelize-cli and we need to edit some details for facialId, name and email.

If you want to edit and include more fields later, please read https://sequelize.org/docs/v6 documentation.

You can see this will be similar to models/user.js and you should update both of them whenever you need to edit some of them.

Currently, your database (database.db) will be empty. For our migration file and model/user.js file is ready, we can use the command you can see at the database.

$yarn sqlite-upgrade

Before you do something else, use this to see you can revert the update.

$yarn sqlite-downgrade

If everything works fine, use $yarn sqlite-upgrade command again and use $sqlite3 database.db or command equivalent to sqlite3 in your operating system.

It will show some command like this. You can type .help in it to see available commands and test some of them.

SQLite version
sqlite>

.tables
SequelizeMeta  Users
SELECT * FROM users;

You can use SQL command in it and you will see nothing yet. For example, SELECT * FROM users; will not return any data.

Everything is ready to test the repository, we can finally see how to test the app you did see at the cover of this blog post.

Test the frontend and FaceIO authentication process

You can use the $yarn dev and it will show the page similar to this at your localhost.

To start, you can see the simplified code below for index.tsx or see the entire code base https://github.com/steadylearner/faceio_example/blob/main/src/pages/index.tsx instead.

import { useState } from "react";
import { toast } from "react-toastify";

import { useRouter } from "next/router";
import Head from "next/head";

import { validateName, validateEmail } from "../validateUser";
import { useAuthentication } from "../contexts/authentication";

export default function Home() {
  const router = useRouter();

  const {
    enrollNewUser, 
    authenticateUser, 

    user,
  } = useAuthentication();

  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  return (
    <>
      <nav>
        <div>
          SIGN IN
        </div>
        <div
          onClick={authenticateUser}
        >
        SIGN UP
        </div>
      </nav>

      <form>
        <div>
          <input
            value={name}
            onChange={e => {
              setName(e.target.value);
            }}
          />

          <input
            type="email"
            placeholder="steady@learner.com"

            value={email}
            onChange={e => {
              setEmail(e.target.value.toLowerCase());
            }}
          />
        </div>

        <button
          type="button"
          onClick={async () => {
            if (validateName(name) === false) {
              toast.info("Please use a valid name");
              return;
            }
            if (validateEmail(email) === false) {
              toast.info("Please use a valid email");
              return;
            }

            await enrollNewUser(name, email);
          }}
        >
          SIGN IN
        </button>
      </form>
    </>

  );
}

Reading and testing the code, you will see enrollNewUser, authenticateUser from is what we really need for this page to work.

You can see it at https://github.com/steadylearner/faceio_example/blob/main/src/contexts/authenticaiton.tsx page or this below.

import React, { createContext, useState, useContext, useEffect } from "react";
import { toast } from "react-toastify";
import { useRouter } from "next/router";

import faceIO from '@faceio/fiojs';

import { FACEIO_APPLICATION_PUBLIC_ID } from "../environment";
import { apiLogin, apiLogout, apiRegister, register } from "../api/v1/user";
import { UserValidationResult } from "../validateUser";

const AuthenticationContext = createContext({});

export const AuthenticationProvider = ({ children }) => {
  const router = useRouter();

  const [faceIo, setFaceIo] = useState(null);
  const [user, setUser] = useState(null);

  useEffect(() => {
    setFaceIo(new faceIO(FACEIO_APPLICATION_PUBLIC_ID));
  }, []);

  async function restartSession() {
    const restarted = await faceIo.restartSession({});
    return restarted;
  }

  async function enrollNewUser(name, email) {
    try {
      const { facialId, timestamp, details } = await faceIo.enroll({
        "locale": "en", 
        // "locale": "auto", // Default user locale
      });

      toast.info("User Successfully Enrolled!");
      toast.info(`Unique Facial ID: ${facialId}`);
      toast.info(`Enrollment Date: ${timestamp}`);
      toast.info(`Gender: ${details.gender}`);
      toast.info(`Age Approximation: ${details.age}`);

      const registerResult = (await apiRegister(facialId, name, email)) as UserValidationResult; 
      if (UserValidationResult.None === registerResult) {
        toast.info("Your account was created");
        toast.info("Use the sign up button to login");

        setTimeout(() => {
          window.location.reload();
        }, 6000);
      } else {
        toast.error(registerResult.toString())
      }

    } catch (error) {
      console.error(error);
      toast.error(handlefaceIoError(error));

      const restarted = await restartSession();
    }

  }

  async function authenticateUser() {
    try {
      const userData = await faceIo.authenticate({
        "locale": "en",
        // "locale": "auto", // Default user locale
      });

      const { facialId } = userData;
      const { user, error } = await apiLogin(facialId);

      if (error) {
        toast.error(error);
        return;
      }

      if (user) {
        setUser(user);
        router.push("/profile")
      }
    } catch (error) {
      console.error(error);
      toast.error(handlefaceIoError(error));

      const restarted = await restartSession();
    }

  }

  async function logout () {
    try {
      const restarted = await restartSession();
      await apiLogout();

      setUser(null);

      window.location.href = "/";

    } catch (error) {
      console.error(error);
      toast.error(error);
    }
  }

  return (
    <AuthenticationContext.Provider value={{
      restartSession, 

      enrollNewUser, 
      authenticateUser, 

      user,
      setUser,

      logout
    }}>
      {children}
    </AuthenticationContext.Provider>
  );
};

export const useAuthentication = () => useContext(AuthenticationContext);

There are many lines of code but most of them are from the getting started doc from FACEIO website. They are modified and included at context/authentication.tsx with React provider API to help you use it inside React app.

If you read the doc, you will find they give you enrollNewUser, authenticateUser, restartSession and handleError functions. You can think enrollUser to register, authenticateUser to login and restartSession is something you can use when one of them had any problem.

In their official example, handleError logs a message to console but it is better to return value so you can reuse in somewhere else easily later. Therefore, you can use this function instead with react-toastify or others to show notifications.

const handlefaceIoError = (error) => {
  switch (error) {
  case error.PERMISSION_REFUSED:
    return "Access to the Camera stream was denied by the end user";
  case error.NO_FACES_DETECTED:
    return "No faces were detected during the enroll or authentication process";
  case error.UNRECOGNIZED_FACE:
    return "Unrecognized face on this application's Facial Index";
  case error.MANY_FACES:
    return "Two or more faces were detected during the scan process";
  case error.FACE_DUPLICATION:
    return "User enrolled previously (facial features already recorded). Cannot enroll again!";
  case error.PAD_ATTACK:
    return "Presentation (Spoof) Attack (PAD) detected during the scan process";
  case error.FACE_MISMATCH:
    return "Calculated Facial Vectors of the user being enrolled do not matches";
  case error.WRONG_PIN_CODE:
    return "Wrong PIN code supplied by the user being authenticated";
  case error.PROCESSING_ERR:
    return "Server side error";
  case error.UNAUTHORIZED:
    return "Your application is not allowed to perform the requested operation (eg. Invalid ID, Blocked, Paused, etc.). Refer to the FACEIO Console for additional information";
  case error.TERMS_NOT_ACCEPTED:
    return "Terms & Conditions set out by FACEIO/host application rejected by the end user";
  case error.UI_NOT_READY:
    return "The FACEIO Widget could not be (or is being) injected onto the client DOM";
  case error.SESSION_EXPIRED:
    return "Client session expired. The first promise was already fulfilled but the host application failed to act accordingly";
  case error.TIMEOUT:
    return "Ongoing operation timed out (eg, Camera access permission, ToS accept delay, Face not yet detected, Server Reply, etc.)";
  case error.TOO_MANY_REQUESTS:
    return "Widget instantiation requests exceeded for freemium applications. Does not apply for upgraded applications";
  case error.EMPTY_ORIGIN:
    return "Origin or Referer HTTP request header is empty or missing";
  case error.FORBIDDDEN_ORIGIN:
    return "Domain origin is forbidden from instantiating faceIo.js";
  case error.FORBIDDDEN_COUNTRY:
    return "Country ISO-3166-1 Code is forbidden from instantiating faceIo.js";
  case error.SESSION_IN_PROGRESS:
    return "Another authentication or enrollment session is in progress";
  case error.NETWORK_IO:
  default:
    return "Error while establishing network connection with the target FACEIO processing node";
  }
};

In the official example, you can use payload to save user datas but as we can save them to the sqlite database we will not need it.

I used locale to "en" for faceIo.enroll and faceIo.authenticate but you can use "auto" instead.

There are some details left but as this should be working already, please test the facial authentication process by clicking the sign in button if you haven't yet.

You should type name and email field first and click the sign up button.

For this example, you can use yours instead of Steadylearner and steady@learner.com at the page and you will see this.

Then, you can agree to their terms.

Then, you will need to allow them to use your camera for the facial authentication process.

You might be worried here but they will not share your image directly but use their hashed value instead for sign in process later. It is also easy to delete it with FACEIO console and the $yarn delete-fid command or DELETE ACCOUNT button at profile page you will see later.

Then, you will see this to save a pin as a safety method.

You can use what you want and you will see some notificaitons from these before.

toast.info("User Successfully Enrolled!");
toast.info(`Unique Facial ID: ${facialId}`);

toast.info(`Enrollment Date: ${timestamp}`);
toast.info(`Gender: ${details.gender}`);

toast.info(`Age Approximation: ${details.age}`);

Everything was fine for the signup process if you read "Use the sign up button to login" notification.

In case you had any problem, you can refresh the page and sign up again.

You can see if it really worked by using the sign in button

You can also use the command below and will be able to see the name and email you used.

$yarn list-users

{
  name: 'Steadylearner',
  email: 'steady@learner.com',
}

or you can visit https://console.faceio.net/dashboard to see more details at their website.

When you sign in at the app, you will be redirected to profile page.

It is almost same to the sign up page before but it is with Logout, DELETE ACCOUNT and UPDATE button to edit your name and email you used in the previous process.

You will see what you used instead of Steadylearner and steady@learner.com and test with another name and email to update.

For the purpose of this blog post is about explaining you how to use facial authentication with FaceIO, we will only have this feature for this app but you can use Next js sequelize repository as a reference to make more advanced examples.

You can also click LOGOUT button and you will be redirected to sign in again.

You can also test DELETE ACCOUNT button and you will see "Your account and facialId were deleted" notification in case there wasn't any problem and redirect to sign in page again.

In case, if it showed any error, you can use this command to delete a facialId from FaceIO.

$yarn delete-fid

What is the facialId for a user to delete? 
<facialId>

with the code below.

// https://console.faceio.net/

import axios from 'axios';
import * as dotenv from 'dotenv' 

import prompt from "../prompt";
import { FACEIO_API } from "../../src/environment";

// tsconfig.json
// "target": "ES2022",
(async () => {
  dotenv.config();

  const { FACEIO_API_KEY } = process.env;

  const facialId = prompt('What is the facialId for a user to delete? ');

  const { data } = await axios.get(`${FACEIO_API}/deletefacialid?${new URLSearchParams({
    fid: facialId,
    key: FACEIO_API_KEY,
  }).toString()}`);

  const { status, error } = data;

  if (status !== 200) {
    console.error(error);
  } else {
    console.log("The facialId was deleted")
  }
})();

You can also remove the user from your sqlite database with this.

$yarn delete-user

It gives you an option to delete all users or a user with a facialId.

These CLIs at scripts folder are what you can use at the backend apis we will see later also.

You can test the other commands relevant to them. You can see them at the repository packages.json file.

Test them first before we go to the backend part if you want to.

So far, we could make an account with FaceIO with a name and email, sign in to the profile page. Edit the name and email you used. You could also logout or delete the account without any issue.

I think these were enough to use the FaceIO with React or Next js frontend.

If you just wanted to learn how to use facial authentication process with FaceIO, you can stop here and make your own app with it.

There are still some parts left to explain how the backend of this work so I will explain them to help you in case you are interested.

Backend

In the start of the blog post, we set up some database but I didn't explain many details of how the backend of this project works.

So we have validateUser.ts to validate a name and email input from users.

enum UserValidationResult {
  None,
  // InvalidUsername,
  InvalidEmail,
  InvalidName,
  // TakenUsername,
  TakenFacialId,
  TakenEmail,
}

export const validateEmail = (email?: string) =>
  email && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

export const validateName = (name?: string) =>
  name && /^[a-zA-Z][a-zA-Z ]{1,32}$/.test(name);

const validateUser = (
  name?: string, 
  email?: string
) => {
  if (!validateName(name)) {
    return UserValidationResult.InvalidName;
  }
  if (!validateEmail(email)) {
    return UserValidationResult.InvalidEmail;
  }

  return UserValidationResult.None;
};

export { UserValidationResult };
export default validateUser;

This is not much complicated and it is used for both frontend and backend. I don't think you will need much explanation here. You can update regex used for email and name depending on your needs.

Then, there is withSession.ts file which will be the main part for the backend.

import {
  GetServerSidePropsContext,
  GetServerSidePropsResult,
  NextApiHandler,
  NextApiRequest,
  NextApiResponse,
} from "next";

import NextCors from 'nextjs-cors';

import { withIronSessionApiRoute, withIronSessionSsr } from "iron-session/next";
import { CORS_ALLOWED_ORGIN } from "./environment";

// https://www.npmjs.com/package/iron-session
declare module "iron-session" {
  interface IronSessionData {
    user?: {
      id: string;
      // facialId: string;
      name: string;
      email: string;
      createdAt: Date;
      updatedAt: Date;
    };
  }
}

const sessionOptions = {
  cookieName: "SESSION_AUTHENTICATION_CREDENTIAL",
  password:
    process.env.SESSION_AUTHENTICATION_CREDENTIAL ??
    (() => {
      throw "No cookie secret";
    })(),
  cookieOptions: {
    // maxAge: 600, // Reset after 600 seconds.
    secure: process.env.NODE_ENV === "production",
  },
};

function withNextCors(
  handler: NextApiHandler,
): NextApiHandler {
  return async function nextApiHandlerWrappedWithNextCors(req, res) {

    // console.log(1);

    const methods = ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE'];
    await NextCors(req, res, {
      methods,
      // origin: "https://www.test.com",
      origin: CORS_ALLOWED_ORGIN,
      // optionsSuccessStatus: 400,
      optionsSuccessStatus: 200,
    });

    return handler(req, res);
  };
}

export function withNextCorsSessionRoute(handler: NextApiHandler) {
  const withSessionHandler = withIronSessionApiRoute(handler, sessionOptions);
  return withNextCors(withSessionHandler);
}

export function withSessionSsr<
  P extends { [key: string]: unknown } = { [key: string]: unknown }
>(
  handler: (
    context: GetServerSidePropsContext
  ) => GetServerSidePropsResult<P> | Promise<GetServerSidePropsResult<P>>
) {
  return withIronSessionSsr(handler, sessionOptions);
}

Most part of it is to make iron-session work to save user data at session and withNextCors function is included to use CORS for all Next js api routes and wrap the const withSessionHandler = withIronSessionApiRoute(handler, sessionOptions); to use CORS along with session.

import NextCors from 'nextjs-cors';

function withNextCors(
  handler: NextApiHandler,
): NextApiHandler {
  return async function nextApiHandlerWrappedWithNextCors(req, res) {

    const methods = ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE'];
    await NextCors(req, res, {
      methods,
      origin: CORS_ALLOWED_ORGIN,
      optionsSuccessStatus: 200,
    });

    return handler(req, res);
  };
}

export function withNextCorsSessionRoute(handler: NextApiHandler) {

  const withSessionHandler = withIronSessionApiRoute(handler, sessionOptions);
  return withNextCors(withSessionHandler);
}

It was not easy to make the example for this while we have nextjs-cors you can use for a handler. With this set up, you will be able to use session and CORS at the same time for all Next js api routes.

You will be able to test if CORS is working with this or not. You can use your browser console and use fetch('http://localhost:3000/api/v1/user/logout'); and it will show CORS related errors if you use CORS_ALLOWED_ORIGIN other than "*".

You can see the example use case at the user end point or logout and others.

import { DataTypes } from "sequelize";

import { withNextCorsSessionRoute } from "../../../../withSession";
import {
  sequelize,
} from "../../../../../db";

import { UpdateUserRequest } from "../../../../../schemas/user";

const User = require('../../../../../models/user')(sequelize, DataTypes);

// https://www.npmjs.com/package/next-connect
export default withNextCorsSessionRoute(async (req, res) => {
  if (req.method !== "PATCH") {
    res.status(405).send("");
    return;
  }

  if (req.session.user) {
    const { id } = req.session.user;

    const { name, email } = req.body as UpdateUserRequest;
    const usersUpdated = (await User.update(
      {
        name,
        email,
      },
      {
        where: {
          id,
        }
      }
    ))[0];

    if (usersUpdated === 0) {
      res.status(400).send({
        error: "Unable to update the profile"
      });
    } else {
      const updatedUser = {
        ...req.session.user,
        name,
        email,
      }

      req.session.user = updatedUser;
      await req.session.save();

      res.json({
        updatedUser,
      })
    }

  } else {
    res.status(400).send({
      error: "Login first"
    });
  }
});

For facialId is used like unique password here, it will be better to be include more safety method like CORS and others whenever possible.

Therefore, we can also use the checkfacilid api from FaceIO to see the facialId from the frontend is really from FaceIO.

It is a paid API so you will need to see FACEIO pricing and see which plan to use if you want to use it.

const { status, error, valid } = await (await fetch(`${FACEIO_API}/checkfacialid?${new URLSearchParams({
  fid: facialId,
  key: FACEIO_API_KEY,
}).toString()}`)).json();

if (status !== 200) {
  res.status(400).send({
    error
  });
}

if (valid === true) {
  // Continue here
}

Conclusion

I hope having this example and blog post was helpful to you start to testing the facial authentication app with FaceIO.

It will be also useful as a Next js and Sqlite full stack app example.

These are other blog posts and the docs that I thought can be useful. You can read them if you want more details.

How to make a CLI translator with Python pyttsx3 and deep_translator

Steadylearner — Thu, 02 Feb 2023 10:16:46 +0000

In this post, we will learn how to make a simple CLI translator with Python. You can use it to learn a language or test translator service etc.

Before we start, please install Python and pip if you haven't yet. Then, read the docs for the packages we will use.

Then, save a file with the code below after you install and set up the Python dev env with pip with these.

$python -m venv <folder>
$cd <folder>
$source bin <folder>/activate

$pip install pyttsx3 deep_translator

You can use this command $touch test_text.py to make test_text.py file or something else for your file name.

import pyttsx3
from deep_translator import GoogleTranslator

def change_voice(engine, language, gender='VoiceGenderFemale'):
    for voice in engine.getProperty('voices'):
        if language in voice.languages and gender == voice.gender:
            engine.setProperty('voice', voice.id)
            return True

    raise RuntimeError(
        "Language '{}' for gender '{}' not found".format(language, gender))


engine = pyttsx3.init()
change_voice(engine, "en_US")
# change_voice(engine, "en_US", "VoiceGenderFemale")

rate = engine.getProperty('rate')
# print("rate")
# print(rate)
engine.setProperty('rate', 10)

volume = engine.getProperty('volume')

what_you_typed = input("Type something?\n")

engine.say(f"You typed {what_you_typed}")
engine.runAndWait()

translate_what_you_typed = input("Do you want to hear it in another language?\n")
if (translate_what_you_typed.lower().startswith("y")):
    translated = GoogleTranslator(source='auto', target='pt').translate(what_you_typed)
    print(translated)

    change_voice(engine, "pt_BR")
    engine.say(translated)
    engine.runAndWait()

Then, you can test it with $python test_text.py and you will see the console messages similar to these.

Type something?
I like to use Python to learn how to code.

Do you want to hear it in another language?
y

You will be able to hear a text translated from what you typed.

If you want to, you can also set the voice to male or female with this.

# VoiceGenderFemale, VoiceGenderMale
change_voice(engine, "en_US", "VoiceGenderFemale")
change_voice(engine, "en_US", "VoiceGenderMale")

It doesn't work for all languages options. Therefore, you need to test what is available.

You can also update the target language to translate by editing the target part to what you want.

translated = GoogleTranslator(source='auto', target='pt').translate(what_you_typed)

The language options for the pyttsx3 and the deep_translator can be different. You can test some of them for your target language.

If you want to test a GUI app built with Python Tkinter, you can read this post.

How to make a GUI translator app with Python Tkinter

If you want more posts, you can follow me at GitHub.

You can contact or hire me at Telegram.

Thanks and please share this post with others.

How to extract an audio file from a video with Python

Steadylearner — Thu, 02 Feb 2023 09:40:09 +0000

Before finding working Python code for the purpose of this post, I thought it would be easy to find working examples. But, it was not and that is the reason I write this post.

If I do not know how to use Python or other programming languages. I would have to repeatedly wait for a software to separate an audio clip from video clip.

Then, I should compile only audio files and wait for a long time.

But I would not do that. With the power of programming, we do not have to repeat what we already know.

Before you use the code below, please read these and install Python and pip first if you haven't yet.

The pip will be used to install and use Moviepy.

You can install it with $pip install moviepy.

1. Python Code to extract audios from the videos

I will assume you already prepared a video file with audio for this process. It is very simple and you can use the code below with it.

# Create a file with 
# $touch extract_audio.py

# 1.
import sys
from moviepy.editor import *

video = VideoFileClip(sys.argv[1]) # 2.
audio = video.audio # 3.
audio.write_audiofile(sys.argv[2]) # 4.

You can save this code with extract_audio.py file and test it with the command below.

$python extract_audio.py <video_file> <audio_file>

For example, $python extract_audio.py video_for_audio.mp4 audio_from_video.mp4

It will make audio_from_video.mp4 file in your machine.

What we do here are

We import default Python sys module to use sys.argv later and moviepy.editor to extract audio files from videos.
In video = VideoFileClip(sys.argv[1]) you instruct your machine which video file you want to use to extract audio.
Then, with audio = video.audio, you select audio file inside the video file. You can see that Python use . syntax for that.
Lastly, with audio.write_audiofile(sys.argv[2]), You end the process and assign the result audio file name.

and that is all you need to know to extract audio from the video with python.

The sys or sys.argv here is to help you automate your work with CLI params.

What comes first after $python file.py would be sys.argv[1] and others would be sys.argv[2] and more.

2. Conclusion

In this post, you learnt you don't need any software to extract an audio file from video and use Python instead.

You can follow me at GitHub.

You can contact or hire me at Telegram.

Thanks and please share this post with others.

Cómo usar gRPC con Rust Tonic y Postgres con ejemplos

Steadylearner — Sat, 11 Jun 2022 19:12:59 +0000

En este post aprendermos a usar Rust, Tonic y la crate gRPC, y implementaremos un CRUD con Postgresql database.

Puedes contactarme por Telegram si necesitas contratar a un desarrollador Blockchain Full Stack.

También puedes unirte a mi grupo de telegram, en el cual puedes encontrar otros desarrolladores blockchain, así como reclutadores, jefes de proyecto, así como hacer preguntas y hacer conexiones.

El propósito de este post es poder ayudarte trabajar con Rust Tonic y que puedas empezar a programar tu propio proyecto.

Prerequisítos

¿Qué es gRPC y buffers de protocolo?
Rust, Postgresql (u otras bases de datos)
Guía oficial de Tonic
Cliente gRPC

Si no tienes instalado Rust en tu eqipo, lee Como instalar Rust. Usaremos el crate Rust Postgresql para este post. Deberías instalar Postgresql en caso de que no lo hayas hecho aún.

Asumiré que ya estas familiarizado con gRPC, Rust y la base de datos Postgresql. De lo contrario por favor lee la documentación antes de empezar.

Puede que no necesites el cliente gRPC. Pero lo dejaré aquí antes del resto del contenido, porque es muy útil y ademas toma mucho tiempo para instalarse. Para ahorrarte tiempo te dejaré las instrucciones.

Tabla de Contenido.

Configuración del proyecto
Definir el servicio gRPC para el CRUD
Preparar nuestro Cargo.toml para instalar dependencias
Hacer el server gRPC con Tonic
Implementar el servicio gRPC de el CRUD con Rust Postgresql
Usar el cliente gRPC para probarlo
Conclusión

Reusé algunas parte de la guía oficial de Tonic para hacer funcionar el flujo de forma similar. Esto va a ayudar a que entiendas el post mejor.

Puedes encontrar el código fuente aquí

1. Configuración del Proyecto

Lo primero que haremos será configurar los datos para la base de datos. Espero que ya tengas instalado alguna base de datos SQL en tu equipo. Puedes consultar estos comandos SQL.

Puedes llamar a tu base de datos como desees.

CREATE DATABASE grpc OWNER you;
\c grpc;

Luego escribe, $psql users < users.sql o pegalos manualmente en l consola psql después de autenticarte.

-- users.sql
CREATE TABLE users(
  id VARCHAR(255) PRIMARY KEY,
  first_name VARCHAR(255) NOT NULL,
  last_name VARCHAR(255) NOT NULL,
  date_of_birth Date NOT NULL
);

INSERT INTO users VALUES
   ('steadylearner', 'steady', 'learner', 'yours');
INSERT INTO users VALUES
    ('mybirthdayisblackfriday', 'mybirthdayis', 'blackfriday', '2019-11-25');
INSERT INTO users VALUES
    ('mybirthdayisnotblackfriday', 'mybirthdayis', 'notblackfriday', '2019-11-26');

Luego puedes guardar esos datos desde Postgresql con $pg_dump users > users.sql.

La Configuración de la base de datos esta lista. Ahora crea un nuevo proyecto de Rust para usarla y aprender a usar Tonic.

$cargo new user
$cd user

Crea un archivo .env en la carpeta para proteger tu base de datos y la información de login.Guiate con este comando.

$echo DATABASE_URL=postgres://postgres:postgres@localhost/grpc > .env

2. Definir el servicio gRPC para el CRUD

Preparamos una configuración mínima para este post en la sección pasada. Ahora definiremos el servicio gRPC con el método request y response. Haremos uso de los buffers de protocolo para usar los datos que hicimos con Postgresql.

Crearemos los archivos .proto en la carpeta proto. Usa estos comandos.

$mkdir proto
$touch proto/user.proto

Primero definiremos el nombre de nuestro paquete, el cual es el que Tonic usa incluyendo los protos en las aplicaciones de cliente y servidor. En este caso será user.

syntax = "proto3";
package user;

Ahora definiremos nuestro servicio CRUD. Este servicio va a contener las llamadas actuales gRPC. Las usaremos para crear el ejemplo de CRUD de Rust con Tonic.

service Crud { // Use whatever name you want, this is for blog posts and not prouction files.
  rpc GetUser (UserRequest) returns (UserReply) {} // becomes get_user in impl functions in Rust files
  rpc ListUsers(Empty) returns (Users) {}
  rpc CreateUser (CreateUserRequest) returns (CreateUserReply) {}
  rpc UpdateUser (UpdateUserRequest) returns (UpdateUserReply) {}
  rpc DeleteUser (UserRequest) returns (DeleteUserReply) {}
  rpc DeleteUsers (Empty) returns (DeleteUserReply) {}
}

Nada complicado de momento. Se que es un poco verboso pero, es para hacerlo mas explícito y fácil separando la lógica.

Si Tienes una mejor manera de hacerlo o si tienes más experiencia con gRPC no dudes en contactarme por Twitter o también podrías crear un issue en Github.

Finalmente especificaremos los tipos que usamos en el método RPC de nuestro CRUD. Los tipos RPC son definidos como mensajes que contienen campos por tipo. Algo similar a esto.

message Empty {}

message UserRequest {
    string id = 1;
}

message UserReply {
    string id = 1;
    string first_name = 2;
    string last_name = 3;
    string date_of_birth = 4;
}

message CreateUserRequest {
    string first_name = 1;
    string last_name = 2;
    string date_of_birth = 3;
}

message CreateUserReply {
    string message = 1;
}

message UpdateUserRequest {
    string id = 1;
    string first_name = 2;
    string last_name = 3;
    string date_of_birth = 4;
}

message UpdateUserReply {
    string message = 1;
}

message DeleteUserReply {
    string message = 1;
}

message Users {
    repeated UserReply users = 1;
}

Puedes ver que usé tipo string para date_of_birth en lugar de date. Lo hice porque no podía encontrar el ejemplo correcto para el tipo DATE en protobuf y hacerlo funcionar con Tonic,Buffers de protocolo y el sistema de tipos de Rust.

Si eres un experto con esto, o tienes más experiencia para hacerlo de una mejor manera, agradecería que me ayudes a corregir esto.

Al terminar nuestro archivo .proto de nuestro CRUD debería verse similar a este.

// user.proto
syntax = "proto3";

package user;

service Crud {
  rpc GetUser (UserRequest) returns (UserReply) {}
  rpc ListUsers(Empty) returns (Users) {}
  rpc CreateUser (CreateUserRequest) returns (CreateUserReply) {}
  rpc UpdateUser (UpdateUserRequest) returns (UpdateUserReply) {}
  rpc DeleteUser (UserRequest) returns (DeleteUserReply) {}
  rpc DeleteUsers (Empty) returns (DeleteUserReply) {}
}

message Empty {}

message UserRequest {
    string id = 1;
}

message UserReply {
    string id = 1;
    string first_name = 2;
    string last_name = 3;
    string date_of_birth = 4;
}

message CreateUserRequest {
    string first_name = 1;
    string last_name = 2;
    string date_of_birth = 3;
}

message CreateUserReply {
    string message = 1;
}

message UpdateUserRequest {
    string id = 1;
    string first_name = 2;
    string last_name = 3;
    string date_of_birth = 4;
}

message UpdateUserReply {
    string message = 1;
}

message DeleteUserReply {
    string message = 1;
}

message Users {
    repeated UserReply users = 1;
}

Encontré que trabajar con Rust no es fácil y se vuelve cada vez mas difícil de compilarlo sin errores cuando queremos especificar los tipos de datos de buffers de protocolo y Rust Postgresql al mismo tiempo.

Si deseas hacer tu propio proyecto de Rust Tonic con otros archivos proto. primero compila Tonic CRUD Example por Steadylearner para poder recolectar los archivos binarios y poder empezar editando de a pequeñas partes el código de Rust y las definiciones de protbuf que estan allí.

3. Preparar nuestro Cargo.toml para instalar dependencias

Configuramos el proyecto e hicimos el archivo protobuf para usar gRPC con Rust. Por lo tanto ya podemos escribir el código para de Rust con Tonic.

Lo primero será preparar las dependencias con Cargo.toml .

[package]
name = "rust-tonic-crud-example"
version = "0.1.0"
authors = ["www.steadylearner.com"]
edition = "2018"

[dependencies]
tonic = { version = "0.1.0-alpha.4", features = ["rustls"] }
bytes = "0.4"
prost = "0.5"
prost-derive = "0.5"
prost-types = "0.5.0"
tokio = "=0.2.0-alpha.6"
futures-preview = { version = "=0.3.0-alpha.19", default-features = false, features = ["alloc"]}
async-stream = "0.1.2"
http = "0.1"
tower = "=0.3.0-alpha.2"
serde = "1.0.101"
serde_json = "1.0.41"
serde_derive = "1.0.101"
console = "0.9.0"
# Database(Postgresql)
postgres = { version = "0.15.2", features = ["with-chrono"] }
dotenv = "0.15.0"
chrono = "0.4.9"
uuid = { version = "0.8.1", features = ["serde", "v4"] }

# Help you use gRPC protobuf files in Rust.
[build-dependencies]
tonic-build = "0.1.0-alpha.4"

Hay muchas dependencias para este simple proyecto.
pero, si te fijas en esta parte se hará mas sencillo de entender.

# Database(Postgresql)
postgres = { version = "0.15.2", features = ["with-chrono"] }
dotenv = "0.15.0"
chrono = "0.4.9"
uuid = { version = "0.8.1", features = ["serde", "v4"] }

Ese bloque corresponde a Rust Postgresql y el resto para Tonic.

incluimos tonic-build para hacer nuestro código gRPC del cliente y servidor.

Si no has usado gRPC o Tonic puede que te confundas.
Pero, todos los lenguajes que usan gRPC tienen un proceso similar para usar las definiciones proto buffer con ellos.

Con Rust Tonic debemos incluirlo en el proceso build de nuestra aplicación. Lo configuráremos con build.rs en la raíz del crate.

fn main() -> Result<(), Box<dyn std::error::Error>> {
    tonic_build::compile_protos("proto/user.proto")?;
    Ok(())
}

Nada complicado de momento, solo necesitas modificar el nombre del archvio de otros ejemplos. De esta manera tonic-build compilará los archivos protobufs para que funcionen con los proyectos de Rust que integren gRPC.

Automáticamente creará algunos módulos de Rust para que puedas usarlos luego en tu código Rust dependiedo de las definiciones de los protobuf que hayas usado en los archivos protobuf. Puedes verificar esto con el código Rust que leeras dentro de poco.

Si deseas mas detalles, por favor consulta tonic-build.

4. Hacer el server gRPC con Tonic

El proceso de preparación terminó en la parte pasada.
Finalmente Escribiremos nuestro código Rust, Empezando a construir el servidor Rust Tonic gRPC, de la siguiente manera.

// main.rs
extern crate postgres;
extern crate dotenv;

extern crate chrono;

// 1.
pub mod user {
    tonic::include_proto!("user");
}

use tonic::{transport::Server};

// 1.
use user::{
    server::{CrudServer},
};

extern crate uuid;

extern crate console;
use console::Style;

mod db_connection; // 2.

mod service;
use crate::service::User;

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
    let addr = "[::1]:50051".parse().unwrap(); // 3.
    let user = User::default();

    let blue = Style::new()
        .blue();

    println!("\nRust gRPC Server ready at {}", blue.apply_to(addr)); // 4.

    Server::builder().serve(addr, CrudServer::new(user)).await?;
    Ok(())
}

Esto será el punto de entrada cuando arranquemos nuestro servidor. La mayoria es para definir dependencias y módulos que usaremos.

El archivo es sencillo pero tiene unos puntos que debes entender.

1. Aquí es donde podremos usar los código autogenerados de tonic_build::compile_protos("proto/user.proto")?; y tonic-build = "0.1.0-alpha.4".

Puedes usar módulos hechos de forma similar a esta, así como handlers que crearemos con models.rs.

use user::{
    server::{CrudServer},
};

2. El contenido del archivo db_connection debe ser similar a este.

use postgres::{Connection, TlsMode};
use dotenv::dotenv;
use std::env;

pub fn establish_connection() -> Connection {
    dotenv().ok();
    let database_url = env::var("DATABASE_URL").expect("DATABASE_URL must be set");
    Connection::connect(database_url, TlsMode::None).unwrap()
}

Puede ser reusado sin necesidad de modificarlo, lo separeremos en una función y lo llamaremos desde donde queramos.

3. Este es código de los creadores de Tonic. Deberías usarlo sin el prefijo de HTTP cuando uses CURL y el cliente gRPC.

4. Estamos usando console::Style; con println! para visitar fácilmente el servidor con exploradores y poder enviar comandos CURL.

5. Implementar el servicio gRPC de el CRUD con Rust Postgresql

En esta parte crearemos algunos handlers en service.rs mientras seguimos la definiciones que hicimos en el archivo user.proto. El resto del código será similar a esto.

El siguiente bloque es largo. Este bloque es para implemntar todas las operaciones del CRUD de gRPC con la base de datos Postgresql. Lee las partes que te interesen.

use chrono::*;
use uuid::Uuid;

use crate::db_connection::establish_connection;

use tonic::{Request, Response, Status};

// Compare it with user.proto file, imported from the main.rs file
use crate::user::{
    server::Crud, CreateUserReply, CreateUserRequest, DeleteUserReply, Empty, UpdateUserReply,
    UpdateUserRequest, UserReply, UserRequest, Users,
};

#[derive(Default)]
pub struct User {}

#[tonic::async_trait]
impl Crud for User {
    // Compare it with the Crud service definition in user.proto file
    // The method GetUser becomes get_user etc
    async fn get_user(&self, request: Request<UserRequest>) -> Result<Response<UserReply>, Status> {
        println!("Got a request: {:#?}", &request);
        // request is private, so use this instead to get the data in it.
        let UserRequest { id } = &request.into_inner();

        let conn = establish_connection();

        // 1.
        let rows = &conn
            .query("SELECT * FROM users WHERE id = $1", &[&id])
            .unwrap();

        // println!("{:#?}", rows);
        // println!("{:#?}", rows.get(0));
        // https://docs.rs/postgres/0.17.0-alpha.1/postgres/row/struct.Row.html

        let row = rows.get(0);
        println!("{:#?}", &row);

        // 2.
        let date_of_birth: NaiveDate = row.get(3);

        let reply = UserReply {
            id: row.get(0),
            first_name: row.get(1),
            last_name: row.get(2),
            // 2.
            date_of_birth: date_of_birth.to_string(),
        };

        Ok(Response::new(reply))
    }

    async fn list_users(&self, request: Request<Empty>) -> Result<Response<Users>, Status> {
        println!("Got a request: {:#?}", &request);
        let conn = establish_connection();

        // 3.
        let mut v: Vec<UserReply> = Vec::new();
        for row in &conn.query("SELECT * FROM users", &[]).unwrap() {
            let date_of_birth: NaiveDate = row.get(3);
            let user = UserReply {
                id: row.get(0),
                first_name: row.get(1),
                last_name: row.get(2),
                date_of_birth: date_of_birth.to_string(),
            };
            v.push(user);
        }

        let reply = Users { users: v };

        Ok(Response::new(reply))
    }

    // Test with create_users, Rust compiler shows errors to help you.
    async fn create_user(
        &self,
        request: Request<CreateUserRequest>,
    ) -> Result<Response<CreateUserReply>, Status> {
        println!("Got a request: {:#?}", &request);
        // 4.
        let user_id = Uuid::new_v4().to_hyphenated().to_string();
        let CreateUserRequest {
            first_name,
            last_name,
            date_of_birth,
        } = &request.into_inner();
        // 5.
        let serialize_date_of_birth = NaiveDate::parse_from_str(date_of_birth, "%Y-%m-%d").unwrap(); // String to Date

        let conn = establish_connection();
        // 6.
        let number_of_rows_affected = &conn.execute(
                "INSERT INTO users (id, first_name, last_name, date_of_birth) VALUES ($1, $2, $3, $4)",
                &[
                    &user_id,
                    &first_name,
                    &last_name,
                    &serialize_date_of_birth,
                ]
            )
            .unwrap();

        let reply = if number_of_rows_affected == &(0 as u64) {
            CreateUserReply {
                message: format!(
                    "Fail to create user with id {}.",
                    &user_id
                ),
            }
        } else {
            CreateUserReply {
                message: format!(
                    "Create {} user with id {}.",
                    &number_of_rows_affected, &user_id
                ),
            }
        };

        Ok(Response::new(reply))
    }

    async fn update_user(
        &self,
        request: Request<UpdateUserRequest>,
    ) -> Result<Response<UpdateUserReply>, Status> {
        println!("Got a request: {:#?}", &request);
        let UpdateUserRequest {
            id,
            first_name,
            last_name,
            date_of_birth,
        } = &request.into_inner();
        // 3.
        let serialize_date_of_birth = NaiveDate::parse_from_str(date_of_birth, "%Y-%m-%d").unwrap(); // String to Date

        let conn = establish_connection();

        let number_of_rows_affected = &conn
            .execute(
                "UPDATE users SET first_name = $2, last_name = $3, date_of_birth = $4 WHERE id = $1",
                &[
                    &id,
                    &first_name,
                    &last_name,
                    &serialize_date_of_birth,
                ]
            )
            .unwrap();

        let reply = if number_of_rows_affected == &(0 as u64) {
            UpdateUserReply {
                message: format!("Fail to update the user with id {}.", id),
            }
        } else {
            UpdateUserReply {
                message: format!("Update {} user with id {}", &number_of_rows_affected, &id),
            }
        };

        Ok(Response::new(reply))
    }

    async fn delete_user(
        &self,
        request: Request<UserRequest>,
    ) -> Result<Response<DeleteUserReply>, Status> {
        println!("Got a request: {:#?}", &request);
        let UserRequest { id } = &request.into_inner();
        let conn = establish_connection();

        let number_of_rows_affected = &conn
            .execute("DELETE FROM users WHERE id = $1", &[&id])
            .unwrap();

        let reply = if number_of_rows_affected == &(0 as u64) {
            DeleteUserReply {
                message: format!("Fail to delete the user with id {}.", id),
            }
        } else {
            DeleteUserReply {
                message: format!("Remove the user with id {}.", id),
            }
        };

        Ok(Response::new(reply))
    }

    async fn delete_users(
        &self,
        request: Request<Empty>,
    ) -> Result<Response<DeleteUserReply>, Status> {
        println!("Got a request: {:#?}", &request);
        let conn = establish_connection();

        let rows = &conn.query("DELETE FROM users", &[]).unwrap();

        let reply = DeleteUserReply {
            message: format!("Remove {} user data from the database.", rows.len()),
        };

        Ok(Response::new(reply))
    }
}

Como podrás observar hay muchas líneas de código, así que será un poco complicado para empezar. Quiero que pruebes este proyecto con las partes de get_user y list_users. De esa manera podrías mejorarlos y consultarlo añadiéndole comentarios.

1. Cuando leemos la documentación de Rust Postgresql nos damos cuenta de que tiene comandos de execute y query. La diferencia es que execute nos devuelve el número de filas modificadas, mientras query nos devuelve datos. Deberías poder encontrar cual usar dependiendo de la necesidad que tengas.

2. Cuando usas Rust Postgresql puede que te salte un error similar a este.

cannot infer type
the trait `postgres::types::FromSql` is not implemented for

Si es así, debes cambiar el tipo de la definición de datos para ayudar a que Rust sea compatible con postgresql con chrono .

let date_of_birth: NaiveDate = row.get(3);

Usamos el tipo de dato string para date_of_birth en el archivo user.proto. Debemos modificarlo de esta manera.

date_of_birth: date_of_birth.to_string(),

Este es el precio que debemos pagar para hacer funcionar Rust en conjunto con Postgresql y Protobuf. Puede que encuentres con una mejor manera de hacerlo.

3. Usamos la forma imperativa para crear la lista de usuarios siguiendo la documentación del autor. Fácilmente debes inferir que repeated de proto se vuelve vec en Rust.

message Users {
    repeated UserReply users = 1;
}

También debes saber que el crate de Rust Postgresql requiere que incluyas &[] (vacío) cuando no hayan valores para pasar en los comandos SQL.

&conn.query("SELECT * FROM users", &[])

4. Crearemos un id aleatorio para los usuarios con la API Rust uuid. Debes incluir la v4 en el archivo cargo.toml para que funcione.

uuid = { version = "0.8.1", features = ["serde", "v4"] }

5. Usamos la API de chrono para pasar del tipo string a DATE y hacerlo compatible con postgresql.

6. usamos let number_of_rows_affected = &conn.execute y la lógica relevante para manejar el resultado de la base de datos proveniente de la petición hecha al cliente gRPC. Puedes observar que la lógica usada es muy similar in update_user, delete_user y delete_users.

Realmente espero que hayas leido todo el código del proyecto así como la documentación de cada herramienta. Si aún no has probado el proyecto corre el siguiente comando cargo run --release y verás algo similar a este mensaje.

Rust gRPC Server ready at [::1]:50051

Luego puedes probarlo con $curl [::1]:50051.

Si todo funciona bien verás esto.

Warning: Binary output can mess up your terminal. Use "--output -" to tell
Warning: curl to output it to your terminal anyway, or consider "--output
Warning: <FILE>" to save to a file.

Luego puedes escribir el código de Tonic del cliente gRPC de la siguiente manera.

pub mod user {
    tonic::include_proto!("user");
}

use user::{client::CrudClient, UserRequest};

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
    let mut client = CrudClient::connect("http://[::1]:50051")?;

    let request = tonic::Request::new(UserRequest {
        id: "steadylearner".into(),
    });

    let response = client.get_user(request).await?;

    println!("RESPONSE={:?}", response);
    let user_date_of_birth = &response.into_inner().date_of_birth;
    println!("{}", user_date_of_birth);

    Ok(())
}

Será fácil entender como funciona si ya leíste La guía oficial de Tonic. Compilalo si deseas y luego trata de mejorarlo después de que hayas probado todos los endpoints del CRUD con el cliente gRPC.

6. Usar el cliente gRPC para probarlo

Para esta parte quiero que ya tengas instalado el cliente gRPC en tu máquina. Deberías tener el archivo ejecutable BloomRPC version.AppImage en la carpeta release.

Puedes ejecutarlo manualmente, o guiarte para hacerlo con el editor de la siguiente manera.

Usa pwd para encontrar la ubicación del cliente gRPC, y $vim ~/.bashrc para incluir un alias de esta forma.

# gRPC

alias grpc-client="grpc/bloomrpc/release/'BloomRPC version.AppImage'"

y usa este comando.

$source ~/.bashrc

Ahora puedes usarlo con $grpc-client cuando lo desees.

Se mostrará la aplicación de escritorio similar la del repositorio oficial.

Si has usado graphql antes, te darás cuenta de que la interfaz es muy similar, así como probar los endpoints con graphiql.

Primero necesitas incluir los archivo proto que hicimos anteriormente, por ejemplo user.proto.

Automáticamente se mostrarán los métodos que puedes usar.

Cada vez que hagas clic en un método, va a mostrarte el valor por defecto en la parte de editor. Puedes enviar peticiones con el valor por defecto o cambiarlo con los valores que quieras.

Para este ejemplo deberías tener cuidado cuando definas el valor de date_of_birth. Debes usar el tipo correcto de DATE para Rust y Postgresql.

Cuando se pause el proceso, puedes detenerlo fácilmente haciendo clic en el bot´pn que usaste para enviar la petición.

guiate con el siguiente ejemplo.

GetUser

{
  "id": "steadylearner"
}

ListUsers

{}

CreateUser

{
  "first_name": "steady",
  "last_name": "learner",
  "date_of_birth": "%Y-%m-%d"
}

UpdateUser

{
  "id": "random-id",
  "first_name": "steadylearner",
  "last_name": "rust developer",
  "date_of_birth": "use-numbers-instead"
}

DeleteUser

{
  "id": "steadylearner"
}

DeleteUsers

{}

Prueba los endpoints del servidor gRPC con tu propio código.
Luego escribe un cliente Rust Tonic más complejo en varios archivos Rust.

También puedes usar otro servidores Rust para crear microservicios.

7. Conclusión

Espero que lo hayas logrado hacer funcionar. Te invito a que edites la definición de protobuf para crear tu propio proyecto y crees mas código Rust para manejar la base da datos.

Rust y Tonic me han ayudado a aprender y programar mejor gRPC. Pero, ha sido difícil encontrar ejemplo funcionales con integración de base de datos, y quería que este post fuese de ayuda.

Si deseas seguir mi último contenido, sigueme aquí Twitter o deja una estrella en Rust Full Stack.

Si necesitas contratar a un desarrollador, puedes contactarme.

Gracias.

¿Cómo hacer un bot de criptomonedas en Telegram con Rust y Teloxide

Steadylearner — Sat, 11 Jun 2022 18:56:26 +0000

En este post, aprenderemos a hacer un bot sencillo de criptomonedas para Telegram, similar al de la imagen del post.

Puedes contactarme por Telegram si necesitas contratar a un desarrollador Blockchain Full Stack.

También puedes unirte a mi grupo de telegram, en el cual puedes encontrar otros desarrolladores blockchain, así como reclutadores, jefes de proyecto, así como hacer preguntas y hacer conexiones.

Para este post se usará principalmente Rust como lenguaje de programación.

¿Por qué Rust?

Rust es un lenguaje increíblemente rápido y eficiente en cuanto a memoria: sin tiempo de ejecución ni recolector de basura (garbage collector), puede alimentar servicios de rendimiento crítico, funcionar en dispositivos integrados e integrarse fácilmente con otros lenguajes.

A pesar de que el código usado en este post es muy simple, espero que lo encuentres de ayuda para iniciarte con este lenguaje de programación. Puedes esncontrar el código de este post aquí

Usaremos Teloxide y binance-rs. Por favor dedicale tiempo a la lectura de la documentación de ambas herramientas antes de empezar.

Tienen varios frameworks de Rust para Telegram, pero decidí usar Teloxide porque puedes obtener ayuda de sus creadores facilmente a través de su canal de Telegram.

Si aún no tienes Rust instalado, por favor sigue las instrucciones del sitio web oficial.

Opcionalmente puedes instalar cargo edit y cargo watch para que puedas desarrollar mejor.

$cargo install cargo-edit
$cargo install cargo-watch

Consulté esto antes de escribir este post. Si ya estas familiarizado con JavaSript puede que te ayude a leer esto antes.

Para probar lo que harémos en este tutorial, necesitas tener una cuenta de Telegram.

También puedes crear una cuenta de Binance en caso de que después quieras usar su API.

Tabla de Contenido

Configurar el bot de Telegram con BotFather.
Preparar el entorno de desarrollo para usar Teloxide y binance-rs.
Construye tu bot de Telegram para encontrar el valor de la criptomoneda con Binance.
Conclusión.

1. Configurar el bot de Telegram con Botfather

Para hacer el bot de Telegram, necesitamos crear un token de la API y configurarlo.

Por favor visita el sitio web de BotFather

Luego usa el comando /help. Te mostrará los comandos que puedes utilizar.

Tiene muchos, pero solo necesitarás algunos de ellos para poder empezar.

CREATE, LIST, DELETE
/newbot - create a new bot
/mybots - list your bots
/deletebot - delete a bot

UPDATE META DATA
/setdescription - change bot description
/setabouttext - change bot about info
/setuserpic - change bot profile photo

Puedes arrancar tu bot con el comando /newbot y seguir la instrucción. usa binance_bot para el nombre de tu bot, o si lo deseas colocale otro.

Guardalo bien, ya que lo usaremos luego en un archivo .env

Luego usa /setuserpic para agregar una imagen a tu bot.

Yo usé la imagen de Binance. Pero puedes usar la que gustes.

Felicitaciones, si llegaste hasta aquí, quiere decir que ya estas listo para empezar a programar el bot de Telegram.

2. Preparar el entorno de desarrollo para usar Teloxide y binance-rs.

Anteriormente, configuramos el bot de Telegram y obtuvimos el token de la API. Ahora lo controlaremos remotamente con nuestro código de Rust.

En esta parte instalaremos las crates de Teloxide y binance-rs, y configuraremos el entorno de desarrollo.

Usa este comando para inicializar el proyecto de Rust.

$cargo new binance_bot

Esto creará algunos archivos en la carpeta de binance_bot. Edita tu archivo Cargo.toml como verás a continuación.

[package]
name = "binance_bot"
version = "0.1.0"
edition = "2018"

[dependencies]
# 1.
dotenv = "0.15.0"
dotenv_codegen = "0.15.0"

# 2. 
teloxide = { version = "0.4", features = ["frunk", "macros", "auto-send"] } 

log = "0.4.8"
pretty_env_logger = "0.4.0"
tokio = { version =  "1.3", features = ["rt-multi-thread", "macros"] }

binance = { git = "https://github.com/wisespace-io/binance-rs.git" }

No será muy diferente del archivo REAMD.md que nos proporciona Teloxide. Pero hay algunas diferencias que debes tener en cuenta.

Usaremos dotenv en lugar de configurar manualmente TELOXIDE_TOKEN diferente a como viene escrito en la documentación.

# Unix-like
$ export TELOXIDE_TOKEN=<Your token here>

# Windows
$ set TELOXIDE_TOKEN=<Your token here>

Si no incluyes macros en teloxide, algunos de estos ejemplos no funcionarán, y arrojará un error similar al de este mensaje 'can't find derive macro'.

Crea un archivo .env con $touch .env y agrega el token de la sección anterior.

TELOXIDE_TOKEN=<YOUR TOKEN FROM THE PREVIOUS PART>

Se debió haber creado el siguiente archivo src/main.rs.

Ahora copia y pega este bloque de código del ejemplo oficial para poder usar archivos .env .

use dotenv::dotenv;
use std::env;

use teloxide::prelude::*;

#[tokio::main]
async fn main() {
    run().await;
}

async fn run() {
  dotenv().ok(); // Read .env and set env variables with this

  teloxide::enable_logging!();
  log::info!("Starting dices_bot...");

  let bot = Bot::from_env().auto_send();

  teloxide::repl(bot, |message| async move {
    println!("dice");
    message.answer_dice().await?;
    respond(())
  })
  .await;
  // INFO  binance_bot > Starting dices_bot...
}

Ahora usaremos el comando $cargo run --release y esperaremos un poco antes de que el compilador de Rust termine su trabajo.

Mientras este haciendo eso, visita el bot de Telegram y escribe cualquier cosa. Debería mostrar algo como esto.

Espero que hayas podido llegar hasta aquí. Verificaste que puedes usar el crate de Teloxide. En la siguiente sección lo usaremos en conjunto con binance-rs. Puedes editar tu archivo main.rs con el siguiente código para ver que el crate de binance-rs funcione en el entorno de desarrollo.

use binance::api::*;
use binance::market::*;

fn main() {
    let market: Market = Binance::new(None, None);

    // Latest price for ALL symbols
    // match market.get_all_prices() {
    //     Ok(answer) => println!("{:#?}", answer),
    //     Err(e) => println!("Error: {:#?}", e),
    // }

    match market.get_price("BTCUSDT") {
        Ok(answer) => println!("{:#?}", answer),
        Err(e) => println!("Error: {:#?}", e),
    }
}

Pruebalo con el siguiente comando $cargo run --release. Debería mostrar el precio actual de USDT de Bitcon por consola.

Yo use una Macbook air con el chip M1 para compilarlo, pero fallo al compilarlo con la arquitectura arm64.

Puedes buscar una solución para usar arquitectura i386 en caso de que hayas tenido inconvenientes. Puedes ver de que arquitectura es tu computador usando el comando $arch

3. Construye tu bot de Telegram para encontrar el valor de la criptomoneda con Binance.

En esta parte modificaremos los comandos del ejemplo de Teloxide.

Por favor lee y prueba el código antes. luego puedes modificar tu archivo main.rs de la siguiente manera

use dotenv::dotenv;
use std::{env, error::Error};

use teloxide::{payloads::SendMessageSetters, prelude::*};
use teloxide::utils::command::BotCommand;
use teloxide::{utils::markdown::link};
use teloxide::types::ParseMode::MarkdownV2;

use binance::api::*;
use binance::market::*;

fn to_uppercase(string: &str) -> String {
    string.chars().map(|c| c.to_ascii_uppercase()).collect()
}

// Command examples

// /help
// /register
// /price BTC
// /price BTC USDT
// /price btc sudt
// /price BNB BTC
// /price bnb btc
#[derive(BotCommand)]
#[command(rename = "lowercase", description = "These commands are supported:")]
// 1.
enum Command {
  #[command(description = "display this text.")]
  Help,
  #[command(description = "show a Binance sign up page.")]
  Register,
  #[command(description = "show a cryptcurrency price in USDT by default.")]
  Price(String),
}

async fn responses_to_command(
    cx: UpdateWithCx<AutoSend<Bot>, Message>,
    command: Command,
) -> Result<(), Box<dyn Error + Send + Sync>> {
    let market: Market = Binance::new(None, None);

    match command {
        // 1.
        Command::Help => cx.answer(Command::descriptions()).send().await?, 
        // 2.
        Command::Register => {
            let register_link = link("https://accounts.binance.com/en/register?ref=SQ86TYC5", "Don't have a Binance account yet? You can register here\\.");

            cx.answer(register_link).parse_mode(MarkdownV2).send().await?
        },
        // 3.
        Command::Price(crpytocurrency) => {
            let mut iter = crpytocurrency.split_whitespace();

            if let Some(first_crypto_symbol) = iter.next() {

                let second_crypto_symbol = if let Some(second_crypto_symbol) = iter.next() {
                    println!("There was a second_crypto_symbol.");
                    second_crypto_symbol
                } else {
                    println!("There was no second_crypto_symbol. Use default.");
                    "USDT"
                };

                let target = to_uppercase(
                    &format!("{}{}", &first_crypto_symbol, &second_crypto_symbol)
                );

                match market.get_price(target) {
                    Ok(symbol_price) => {
                        println!("{:#?}", &symbol_price);
                        cx.answer(format!("The price you want is {:#?}. ", &symbol_price.price)).await?
                    },
                    Err(e) => {
                        eprint!("{:#?}", e);

                        cx.answer(format!("Something went wrong. Did you use the correct cryptocurrency pair?")).await?
                    },
                }
            } else {
                cx.answer("Cryptocurrency symbols were not specified. To start with, you can use /price ETH or /price ETH USDT.").await?
            }
        }
    };

    Ok(())
}

#[tokio::main]
async fn main() {
    run().await;
}

async fn run() {
    dotenv().ok();

    teloxide::enable_logging!();
    log::info!("Starting the_bot...");

    let bot = Bot::from_env().auto_send();
    let bot_name: String = "binance_bot".into();

    teloxide::commands_repl(bot, bot_name, responses_to_command).await;
}

Utiliza $cargo run --release y visita tu bot.

Escribe /help, luego prueba algunos comandos como los de a continuación.

/help
/register

/price BTC
/price BTC USDT
/price btc usdt
/price BNB BTC
/price bnb btc

Algunos mostraran resultados similares a estos.

(Es interesante ver la caida de la criptomoneda mientras escribo este post, el de la primera imagen es de mientras escribía el código para este post, y el de la segunda imagen es de cuando escribía el post.)

Las cargas de aqui serán partes relevantes a los comandos y otras para la configuración.

Muestra los textos de descripción que fueron definidos de enum command. solo necesitamos editar allí.
No fue fácil encontrar como usar markdown con Teloxide en la documentación. Sería muy útil saber si Telegram quiere que uses \ para algunos caractéres cuando estes usando markdown.
El usuario puede enviar varios inputs acompañados del comando /price, puedes ver como manejarlos fácilmente con la API de Rust.

Por ejemplo, el usuario puede enviar un input vacio, un input sin la segunda criptomoneda (por defecto se manejan con USDT), un input con más de 2 criptomonedas, etc.

Podrías darte cuenta de la belleza de Rust como lenguage si tuvieses que solucionar este caso con otro lenguaje de progrmación.

Si tienes alguna pregunta sobre Teloxide puedes consultar su documentación.

4. Conclusión

En este post aprendimos a como configurar Rust env para usar el framework Teloxide, espero que lo hayas hecho funcionar sin ningun problema, agregué varias imagenes para que puedas seguir el post y los ejemplos sin problemas.

Si estas familiarizado con Binance, puedes escribir mas comandos para interactuar con la API.

Si te gustó este post, por favor comparteló con otros, planeo escribir más sobre blockchain. actualmente estoy interesado en ETH y POLKADOT.

Si necesitas contratar a un desarrollador, puedes contactarme..

Escribiré un post para poder desplegar lo que hicimos en este ejemplo si mas personas encuentran este post de ayuda.

Gracias.

Cómo hacer una fullstack dapp con react y etherjs

Steadylearner — Sun, 05 Jun 2022 16:54:58 +0000

En este post aprenderemos a como crear una dapp full stack, muy similar a la imagen de este post. crearemos un simple smart contract con Solidity donde realizaremos una compra. luego escribiremos test y por ultimo el frontend.

Puedes contactarme por telegram si necesitas contratar a un desarrollador Blockchain Full Stack.

También puedes unirte a mi grupo de telegram, en el cual puedes encontrar otros desarrolladores blockchain, así como reclutadores, jefes de proyecto, así como hacer preguntas y hacer conexiones.

También puedes aprender a como hacer tests de tokens BEP/ERC20 aquí.

Recientemente despliegue un BEP20token en la red principal de BSC por motivo de aprendizaje.

Si deseas algo, puedes contactarme.

Me guié con The complete guide to full stack ethereum development para configurar todo el entorno local de desarrollo.

Puedes clonar el repo the code used for this post at the repository use $yarn to install dependencies used here.

Leer Hardhat y ethers.js así como su documentación.

Usaremos la extensión de Metamask para este tutorial.

Por favor, instalalo en tu explorador antes de empezar.

La imagen de un auto rojo es usada aquí para hacer un ejemplo mas realista, pero puedes usar cualquier otro producto y edita la descripción en el frontend.

Los comandos que se usarán para el desarrollo local de la dapp serán estos en el mismo orden. Necesitarás usarlos nuevamente solo si deseas crear tu propia versión al finalizar el tutorial.

# See your Solidity code for the contract 
# is ok and compile without any error or warning.
compile="npx hardhat compile",
# Write tests to see the smart contract code works 
# as you expect for various situations.
test="npx hardhat test",

# Run local solidity development environment.
# It will set up dummy accounts that you can use to test.
serve="npx hardhat node",
# Upload your Solidity contract code to it 
# before you run the frontend code.
deploy="npx hardhat run scripts/deploy.js --network localhost",

# Run your React frontend code.
start="react-scripts start",

Guardalos en el archivo package.json y usalos con $yarn compile etc o puedes escribir un pequeño CLI en caso de que desees conservar los comentarios.

Si hasta ahora no estás familiarizado con DeFiIf you are not familiar with DeFi puedes leer este post.

Mientras pruebes tu dapp, necesitarás algunas cuentas, además será de ayuda si te unes a alguna comunidad para que te den un poco de apoyo.

Si no tienes ninguna Wallet de cryptos aun, puedes crearte una en Binance.

Si estás interesando en aprender ERC20 o BEP20 token, puedes particiar en esta comunidad para aprender temas relevantes en blockchain.

Si quieres aprender mas sobre BEP20, por favor lee la siguiente documentacion.

Puedes comprar y vender tus creaciones en Opensea.

También esta Solidity developer group y otro para busqueda de empleo.

Si necesitas a un desarrollador, contactame.

Tabla de Contenido

Escribir el smart contract con Solidity
Preparar lost tests
Configurar Metamask con Hardhat
Programar el código del frontend con React y ethers.js
Conclusión

1. Escribir el smart contract con Solidity

Si no estás familiarizado con Solidity y otras cosas relevantes para el desarrollo de Ethereum, puedes consultar su sitio web oficial.

El código usado aquí fue adaptado de the official safe remote purchase example.

Por favor primero lee el código de abajo. Incluí la explicación después del bloque.

// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.7.0 <0.9.0;

contract Escrow {
    uint public price;
    address payable public seller;
    address payable public buyer;

    // 1.
    address[] previousBuyers;

    // 2.
    enum State { Sale, Locked, Release, Closed, Complete }

    State public state;

    modifier condition(bool _condition) {
        require(_condition);
        _;
    }

    modifier onlyBuyer() {
        require(
            msg.sender == buyer,
            "Only buyer can call this."
        );
        _;
    }

    modifier onlySeller() {
        require(
            msg.sender == seller,
            "Only seller can call this."
        );
        _;
    }

    // 3.
    modifier notSeller() {
        require(
            msg.sender != seller,
            "Seller shouldn't call this."
        );
        _;
    }

    modifier inState(State _state) {
        require(
            state == _state,
            "Invalid state."
        );
        _;
    }

    // 4.
    event Closed(
        uint256 when
    );

    event ConfirmPurchase(
        uint256 when,
        address by
    );
    event ConfirmReceived(
        uint256 when,
        address by
    );

    event SellerRefundBuyer(
        uint256 when
    );
    event SellerRefunded(
        uint256 when
    );

    event Restarted(
        uint256 when
    );
    event End(
        uint256 when
    );

    constructor() payable {
        seller = payable(msg.sender);

        price = msg.value / 2;

        require((2 * price) == msg.value, "Value has to be even.");
    }

    // 5. 
    function close()
        public
        onlySeller
        inState(State.Sale)
    {
        state = State.Closed;
        seller.transfer(address(this).balance);

        emit Closed(
            block.timestamp
        );
    }

    function confirmPurchase()
        public
        notSeller
        inState(State.Sale)
        condition(msg.value == (2 * price))
        payable
    {
        buyer = payable(msg.sender);
        state = State.Locked;

        emit ConfirmPurchase(
            block.timestamp,
            buyer
        );
    }

    function confirmReceived()
        public
        onlyBuyer
        inState(State.Locked)
    {
        state = State.Release;

        buyer.transfer(price); // Buyer receive 1 x value here
        emit ConfirmReceived(
            block.timestamp,
            buyer
        );
    }

    // 6.
    function refundBuyer()
        public
        onlySeller
        inState(State.Locked)
    {
        // Give the option to the seller to refund buyer before sending a product(car) here.
        state = State.Sale;
        buyer = payable(0);

        emit SellerRefundBuyer(
            block.timestamp
        );
    }

    function refundSeller()
        public
        onlySeller
        inState(State.Release)
    {
        state = State.Complete;

        seller.transfer(3 * price); 
        // 1.
        previousBuyers.push(buyer);

        emit SellerRefunded(
            block.timestamp
        );
    }

    // 7.
    function restartContract() 
        public
        onlySeller
        // inState(State.Complete)
        payable
    {
        if (state == State.Closed || state == State.Complete) {
            require((2 * price) == msg.value, "Value has to be equal to what started the contract.");

            state = State.Sale;

            // Reset buyer to allow the same buyer again.
            buyer = payable(0);
            // This doesn't work.
            // buyer = address(0);

            emit Restarted(
                block.timestamp
            );
        }
    }

    // 1.
    function listPreviousBuyers()public view returns(address [] memory){
        return previousBuyers;
    }

    // totalPreviousBuyers
    function totalSales() public view returns(uint count) {
        return previousBuyers.length;
    }

    function end() 
        public
        onlySeller
    {
         if (state == State.Closed || state == State.Complete) {
            //  Should put End event before selfdestruct to update the frontend.
            // 8.
            emit End(
                block.timestamp
            );

            // state = State.End;
            selfdestruct(seller);   

            // This doesn't work.
            // emit End(
            //     block.timestamp
            // );         
        }
    }
}

Espero que ya hayas leido el código. para ayudaarte a entender lo que hace, vamos a imaginar casos de la vida real.

Digamos que eres un vendedor de autos, y quieres venderlos con ETH y un smart contract usado aquí.

Primero tendrías que desplegar este a la red de Ethereum. Luego después de haber realizando un despliegue exitoso, el estado del smart contract será "Sale" (es decir venta) como estado inicial. No habra comprador solo vendedor (dueño del smart contract) hasta este punto.

Puedes esperar por un visitante a que pague para ser el comprador o cerrar el contract si llegase a existir algun problema antes de que eso de a a lugar.

Si puedieses encontrar un comprador y luego su pago de deposito(price * 2) con 2ETH el estado del contract será bloqueado. Luego tu como vendedor puedes mandar un auto para el usuario y esperar por el hasta que confirme que lo recibió confirmación recibida

Todo salió bien, y el comprador puedes extraer el resto de sus 1ETH del deposito, y el vendedor pudo hacerlo también con sus 3ETH incluyendo 1ETH por el auto que vendio.

En este punto el contract hizo todo su trabajo, y queda a la espera a que el vendedor decida si desea reiniciar(volver a vender otro auto) o finalizarlo.

Pensemos varias situaciones que puedan ocurrir con este contrato/contract. Esto te ayudará a pensar en los detalles del código y como funciona.

1. haremos una lista de previos compradores y vamos a incluirlos solo cuando el vendedor desee volver a vender un contract. Otros compradores (empezando desde el segundo comprador) podrán ver la ista antes de decidir si compran o no un auto.

2. Los valores Enum de Solidity van a devolver valores int (enteros) (0, 1, 2, 3, 4) cuando pidamos el estado del contract con await Escrow.state().

escribiremos un convertidor (humanReadbleEscrowState) para eso luego.

3. incluiremos un modificador notseller que no permita al vendedor transformarse en comprador al mismo tiempo.

4. Puedes ver envetos que tienen casi los mismos nombres de las funciones abajo. los usaremos para actualizar el frontend sin necesidad de hacer refresh en la página luego y mostraremos algunos mensajes por consola. Incluidas variables que queiras usar desde el blockchain aquí.

5. Emitiremos los eventos al final de las funcions luego de que el estado y otras variables se modifiquen. La excepción es la función end porque después de selfdestruct(seller); los eventos no van a funcionar mas.

6. Vamos a incluir la función refundBuyer pata dar la opción al vendedor de reembolsar al comprador cuando el estado del contract este bloqueado. Luego puede ser reiniciado otra vez, o cerrarse.

7. Si el comprador decide reiniciar el contract, vamos a requerir que el deposite 2ETH nuevamente e incluir el comprador anterior a la lista de compradores para aydudar a futuros compradores poder consultar.

Con esa información sería suficiente para ayudarte a entender lo que hace el contract. el código aquí no esta validado aún, por favor usalo de referencia o para aprender.

Ya tenemos nuestro smart contract listo, escribiremos los tests para ver si funciona como esperamos. Estoy va a ser de ayuda también cuando queramos realizar cambios al contract y antes de cambiar las partes del frontend que correspondan.

Verifica que tu smart contract compile con $yarn compile ($npx hardhat compile).

2. Preparar los tests

En la sección anterior, preparamos el código del contract con Solidity. ahora usaremos tests en cada parte para asegurarnos que funcione como esperamos.

Antes de continuar leyendo, puedes consultar la documentcion para los tetst desde Openzeppelin.

El código usado aquí es largo por eso voy a incluir una explicación primero, puedes comparar y consultar el código del frontend que veremos luego con el código.

Cada explicación corresponde al numero escrito en el comentario superior de cada bloque de código

1. Primero preparar lo que usaremos para realizar cada test y establecer beforeEach para cada caso de test.

2. Desplegamos el contract para cada caso de test con beforeEach. Se puede ver que solo podemos seleccionar seller (vendedor), firstBuyer (el primer comprador), secondBuyer (segundo comprador) de la lista de signers (cuenta) dada por Hardhat.

3. Si comparamos esta parte con la parte anterior de los eventos, podemos ver que vamos a incluir ese código para usarlo en cada caso test.

4. Estos tests probarán lo que el vendedor puede hacer después de desplegar el contract. Se puede ver que los eventos y el cambio de estado del contract también se prueban después de esperar por la función llamada con await. También tenemos expectRevert de @openzeppelin/test-helpers que se usa pata obtener mensajes de error cada vez que ocurra un revert.

5. Con estos tests se probará lo que el vendedor (seller) y el buyer (comprador) pueden hacer después de que un visitante se convierta en el primer buyer (comprador). Se puede ver quién puede llamar al contract con el método escrow.connect.

6. Puedes ver que el buyer (comprador) puede revender al mismo buyer (primer comprador) o al segundo con el código que se muestra. También puedes observar que debemos usar to.deep.equal para comparar los arreglos.

const { expect } = require("chai");
const { expectRevert } = require('@openzeppelin/test-helpers'); 

const humanReadableUnixTimestamp = (timestampInt) => {
  return new Date(timestampInt * 1000);
}

describe("Escrow Events and State", function() {

  // 1.
  let provider;
  let Escrow, escrow, seller, firstBuyer, secondBuyer; // seller is owner

  let closedEvent, 
      confirmPurchaseEvent, 
      sellerRefundBuyerEvent,
      confirmReceivedEvent, 
      sellerRefundedEvent, 
      restartedEvent,
      endEvent;

  beforeEach(async () => {
    provider = ethers.getDefaultProvider();

    Escrow = await ethers.getContractFactory("Escrow");
    escrow = await Escrow.deploy({ value: ethers.utils.parseEther("2.0") });  

    // 2. 
    [seller, firstBuyer, secondBuyer, _] = await ethers.getSigners();

    // 3.
    closedEvent = new Promise((resolve, reject) => {
      escrow.on('Closed', (when, event) => {
        event.removeListener();

        resolve({
          when,
        });
      });

      setTimeout(() => {
        reject(new Error('timeout'));
      }, 60000)
    });

    confirmPurchaseEvent = new Promise((resolve, reject) => {
      escrow.on('ConfirmPurchase', (when, by, event) => {
        event.removeListener();

        resolve({
          when,
          by,
        });
      });

      setTimeout(() => {
        reject(new Error('timeout'));
      }, 60000)
    });

    sellerRefundBuyerEvent = new Promise((resolve, reject) => {
      escrow.on('SellerRefundBuyer', (when, event) => {
        event.removeListener();

        resolve({
          when,
        });
      });

      setTimeout(() => {
        reject(new Error('timeout'));
      }, 60000)
    });

    confirmReceivedEvent = new Promise((resolve, reject) => {
      escrow.on('ConfirmReceived', (when, by, event) => {
        event.removeListener();

        resolve({
          when,
          by,
        });
      });

      setTimeout(() => {
        reject(new Error('timeout'));
      }, 60000)
    });

    sellerRefundedEvent = new Promise((resolve, reject) => {
      escrow.on('SellerRefunded', (when, event) => {
        event.removeListener();

        resolve({
          when,
        });
      });

      setTimeout(() => {
        reject(new Error('timeout'));
      }, 60000)
    });

    restartedEvent = new Promise((resolve, reject) => {
      escrow.on('Restarted', (when, event) => {
        event.removeListener();

        resolve({
          when,
        });
      });

      setTimeout(() => {
        reject(new Error('timeout'));
      }, 60000)
    });

    endEvent = new Promise((resolve, reject) => {
      escrow.on('End', (when, event) => {
        event.removeListener();

        resolve({
          when,
        });
      });

      setTimeout(() => {
        reject(new Error('timeout'));
      }, 60000)
    });
  })

  // 4.
  it("Should set the contract state to 'Closed'.", async function () {
    expect(await escrow.seller()).to.equal(seller.address);

    expect(await escrow.totalSales()).to.equal(0); // Should be 0
    expect(await escrow.state()).to.equal(0); // Sale

    // 4.
    await escrow.close(); 

    let event = await closedEvent;
    console.log("Closed");
    console.log(humanReadableUnixTimestamp(event.when.toString()));

    expect(await escrow.state()).to.equal(3); // Closed
  });

  it("Should set the contract state to 'Closed' to 'Sale' again", async function () {
    expect(await escrow.seller()).to.equal(seller.address);

    expect(await escrow.state()).to.equal(0); // Sale

    // const beforeContractBalance = await provider.getBalance(escrow.address);
    // console.log(ethers.utils.formatEther(beforeContractBalance));
    // expect(ethers.utils.formatEther(beforeContractBalance)).to.equal(2);

    // const beforeCloseSellerBalance = await provider.getBalance(seller.address);
    // console.log(ethers.utils.formatEther(beforeCloseSellerBalance));

    await escrow.close();

    expect(await escrow.state()).to.equal(3); // Closed

    await escrow.restartContract({ value: ethers.utils.parseEther("2.0") });
    let event = await restartedEvent;
    console.log("Restarted");
    console.log(humanReadableUnixTimestamp(event.when.toString()));

    expect(await escrow.state()).to.equal(0); // Sale
  });

  it("Should allow the seller to end the contract when the state is 'Closed'", async function () {
    expect(await escrow.seller()).to.equal(seller.address);

    expect(await escrow.state()).to.equal(0); // Sale

    await escrow.close();

    expect(await escrow.state()).to.equal(3); // Closed

    // Revert with the error message "Seller shouldn't call this"
    // 4.
    await expectRevert(escrow.connect(firstBuyer).end(), "Only seller can call this.");
    await expectRevert(escrow.connect(secondBuyer).end(), "Only seller can call this.");

    // Only seller can call this.
    await escrow.end();

    let event = await endEvent;
    console.log("End");
    console.log(humanReadableUnixTimestamp(event.when.toString()));
  });

  // 5.
  it("Should set the contract state to 'Sale' to 'Locked' and refundSeller should fail and refundBuyer should work.", async function () {
    expect(await escrow.seller()).to.equal(seller.address);
    expect(await escrow.state()).to.equal(0); // Sale

    expect(await escrow.buyer()).to.equal("0x0000000000000000000000000000000000000000"); // Not set yet, default

    // Revert with the error message "Seller shouldn't call this"
    await expectRevert(escrow.confirmPurchase({ value: ethers.utils.parseEther("2.0") }), "Seller shouldn't call this");

    // How to set msg.sender for ether js?
    // Use connect method

    // 5.
    await escrow.connect(firstBuyer).confirmPurchase({ value: ethers.utils.parseEther("2.0") })

    let event = await confirmPurchaseEvent;
    console.log("ConfirmPurchase");
    console.log(humanReadableUnixTimestamp(event.when.toString()));
    expect(event.by).to.equal(firstBuyer.address);

    expect(await escrow.buyer()).to.equal(firstBuyer.address);
    expect(await escrow.state()).to.equal(1); // Locked

    // When "Locked", shouldn't allow this. Revert with the error message "revert Invalid state"
    await expectRevert(escrow.refundSeller(), "revert Invalid state");

    await escrow.refundBuyer();

    event = await sellerRefundBuyerEvent;
    console.log("SellerRefundBuyer");
    console.log(humanReadableUnixTimestamp(event.when.toString()));

    expect(await escrow.state()).to.equal(0); // Sale
    expect(await escrow.buyer()).to.equal("0x0000000000000000000000000000000000000000");
  });

  it(`
    Should set the contract state to 'Sale' -> 'Locked' -> 'Release' (First Buyer)
    and allow refundSeller -> 'Complete' and contract should increase total sales. (Seller)
  `, async function () {
    expect(await escrow.seller()).to.equal(seller.address);
    expect(await escrow.state()).to.equal(0); // Sale

    expect(await escrow.buyer()).to.equal("0x0000000000000000000000000000000000000000"); // Not set yet, default

    // Revert with the error message "Seller shouldn't call this"
    await expectRevert(escrow.confirmPurchase({ value: ethers.utils.parseEther("2.0") }), "Seller shouldn't call this");

    // How to set msg.sender for ether js?
    // Use connect method
    await escrow.connect(firstBuyer).confirmPurchase({ value: ethers.utils.parseEther("2.0") })

    expect(await escrow.buyer()).to.equal(firstBuyer.address);
    expect(await escrow.state()).to.equal(1); // Locked

    await escrow.connect(firstBuyer).confirmReceived();

    let event = await confirmReceivedEvent;
    console.log("ConfirmReceived");
    console.log(humanReadableUnixTimestamp(event.when.toString()));
    expect(await event.by).to.equal(firstBuyer.address);

    expect(await escrow.state()).to.equal(2); // Released

    await escrow.refundSeller();

    event = await sellerRefundedEvent;
    console.log("SellerRefunded");
    console.log(humanReadableUnixTimestamp(event.when.toString()));

    expect(await escrow.state()).to.equal(4); // Complete
    expect(await escrow.totalSales()).to.equal(1); // Complete
  });

  const firstPurchase = async () => {
    expect(await escrow.seller()).to.equal(seller.address);
    expect(await escrow.state()).to.equal(0); // Sale

    expect(await escrow.buyer()).to.equal("0x0000000000000000000000000000000000000000"); // Not set yet, default

    // Revert with the error message "Seller shouldn't call this"
    await expectRevert(escrow.confirmPurchase({ value: ethers.utils.parseEther("2.0") }), "Seller shouldn't call this");

    // How to set msg.sender for ether js?
    // Use connect method
    await escrow.connect(firstBuyer).confirmPurchase({ value: ethers.utils.parseEther("2.0") })

    expect(await escrow.buyer()).to.equal(firstBuyer.address);
    expect(await escrow.state()).to.equal(1); // Locked

    await escrow.connect(firstBuyer).confirmReceived();

    expect(await escrow.state()).to.equal(2); // Released

    await escrow.refundSeller();

    expect(await escrow.state()).to.equal(4); // Complete
    expect(await escrow.totalSales()).to.equal(1); // Complete
  }

  // 6.
  it(`
    (First Buyer)
    Should set the contract state to 'Sale' -> 'Locked' -> 'Release' 
    (Seller)
    and allow refundSeller -> 'Complete' and contract should increase total sales.
    Then, the seller can restart the contract.
  `, async function () {

    await firstPurchase();

    await escrow.restartContract({ value: ethers.utils.parseEther("2.0") });

    expect(await escrow.state()).to.equal(0); // Sale again
  });

  it(`
    (First Buyer)
    Should set the contract state to 'Sale' -> 'Locked' -> 'Release' 
    (Seller)
    and allow refundSeller -> 'Complete' and contract should increase total sales.
    Then, the seller can end the contract.
  `, async function () {

    await firstPurchase();

    await escrow.restartContract({ value: ethers.utils.parseEther("2.0") });

    await escrow.end();
  });

  it(`
    (First Buyer)
    Should set the contract state to 'Sale' -> 'Locked' -> 'Release' 
    (Seller)
    and allow refundSeller -> 'Complete' and contract should increase total sales.
    Then, the seller can restart the contract.
    (First Buyer)
    Then, first buyer can rebuy
  `, async function () {

    await firstPurchase();

    await escrow.restartContract({ value: ethers.utils.parseEther("2.0") });

    // 

    expect(await escrow.seller()).to.equal(seller.address);
    expect(await escrow.state()).to.equal(0); // Sale

    expect(await escrow.buyer()).to.equal("0x0000000000000000000000000000000000000000"); // Not set yet, default

    // Revert with the error message "Seller shouldn't call this"
    await expectRevert(escrow.confirmPurchase({ value: ethers.utils.parseEther("2.0") }), "Seller shouldn't call this");

    // How to set msg.sender for ether js?
    // Use connect method
    await escrow.connect(firstBuyer).confirmPurchase({ value: ethers.utils.parseEther("2.0") })

    expect(await escrow.buyer()).to.equal(firstBuyer.address);
    expect(await escrow.state()).to.equal(1); // Locked

    await escrow.connect(firstBuyer).confirmReceived();

    expect(await escrow.state()).to.equal(2); // Released

    await escrow.refundSeller();

    expect(await escrow.state()).to.equal(4); // Complete
    expect(await escrow.totalSales()).to.equal(2); // Complete
  });

  it(`
    (Second Buyer)
    Should set the contract state to 'Sale' -> 'Locked' -> 'Release' 
    (Seller)
    and allow refundSeller -> 'Complete' and contract should increase total sales.
    Then, the seller can restart the contract
  `, async function () {

    await firstPurchase();

    await escrow.restartContract({ value: ethers.utils.parseEther("2.0") });

    // Second Buyer

    expect(await escrow.state()).to.equal(0); // Sale again
    // Buyer should be reset;
    expect(await escrow.buyer()).to.equal("0x0000000000000000000000000000000000000000");

    // Repeat the almost same code for the second buyer.
    // expect(await escrow.buyer()).to.equal(firstBuyer.address); // Yet, First Buyer 

    // Revert with the error message "Seller shouldn't call this"
    await expectRevert(escrow.confirmPurchase({ value: ethers.utils.parseEther("2.0") }), "Seller shouldn't call this");

    await escrow.connect(secondBuyer).confirmPurchase({ value: ethers.utils.parseEther("2.0") })

    // New buyer
    expect(await escrow.buyer()).to.equal(secondBuyer.address);
    expect(await escrow.state()).to.equal(1); // Locked

    await escrow.connect(secondBuyer).confirmReceived();

    expect(await escrow.state()).to.equal(2); // Released

    await escrow.refundSeller();

    expect(await escrow.state()).to.equal(4); // Complete

    expect(await escrow.totalSales()).to.equal(2); // One more purchase

    await escrow.restartContract({ value: ethers.utils.parseEther("2.0") });

    // 6.
    // Without deep, it fails here.
    expect(await escrow.listPreviousBuyers()).to.deep.equal([firstBuyer.address, secondBuyer.address])
  });
});

Para iniciar los tests usamos $yarn test, y deberías ver algo similar a esto.

Creating Typechain artifacts in directory typechain for target ethers-v5
Successfully generated Typechain artifacts!

El código paso todos los tests y vemos que esta funcionando como esperabamos.

Entonces podemos decir que el backend de nuestro dapp esta casi listo. Antes de empezar con el frontend necesitamos configurar nuestro Metamask para poder probarlo con cuentas de nuestro Hardhat local.

3. Configuración de Metamask con Hardhat

Para usar nuestro código de Solidity con el frontend, primero tenemos que correr nuestro blockchain en local con el comando $yarn serve ($npx hardhat node).

Se van a mostrar unas cuentas gratuitas similares a estás con 10000ETH cada una.

$npx hardhat node
Started HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/

Accounts
========
Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 (10000 ETH)
Private Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80

Account #1: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 (10000 ETH)
Private Key: 0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d

Account #2: 0x3c44cdddb6a900fa2b585dd299e03d12fa4293bc (10000 ETH)
Private Key: 0x5de4111afa1a4b94908f83103eb1f1706367c2e68ca870fc3fb9a804cdab365a

Ahora podemos desplegar nuestro contract, para eso abrimos otra consola y escribimos el siguiente comando $yarn deploy($npx hardhat run scripts/deploy.js --network localhost).

Vamos a correr nuestro plugin de Metamask en el explorador.

Incluye por lo menos tres de las cuentas gratuitas.

Colocales el nombre de seller (Vendedor), first buyer (primer comprador) y second buyer (segundo comprador) respectivamente.

Debería verse así

El nombre de la cuenta actualizado

Estamos haciendo lo mismo que hemos hecho en la parte de test pero con Metamask para que no tengas problema usandolo luego con el frontend.

[seller, firstBuyer, secondBuyer, _] = await ethers.getSigners();

Espero que lo hayas podido incluir sin problema.

En caso de que te encuentres con algún problema cuando hagas el test a este contract con el frontend, siempre puedes volver a configurar la cuenta y volver a probar.

Configuración/avanzado/redefinir

4. Programar el frontend con React y ethers.js

Ya para este punto preparamos todo para poder empezar a programar el frontend de nuestro smart contract. Si lo quieres revisar entra a GitHub, y vas a encontrar la logica en el archivo App.js.

Algunas partes son casi idénticas a los archivos de test que leiste en la seccion pasada. Otros son módulos de CSS para poder mostrar los datos de una manera mas presentable.

Voy a explicar las partes mas importantes.

1. Vamos a permitir al seller (vendedor), al visitor (visitante) y al buyer (comprador) usar las funciones que definimos al principio dependiendo del estado del contract.

2. Luego actualizaremos el estado del frontend escuchando los eventos del blockchain con contract.on() y las funciones callback.

import { useEffect, useState, createRef } from 'react';
import { Contract, ethers } from 'ethers'

import moment from "moment";

import { Container, Dimmer, Loader, Grid, Sticky, Message } from 'semantic-ui-react';
import 'semantic-ui-css/semantic.min.css';

import Escrow from './artifacts/contracts/Escrow.sol/Escrow.json'

import {
  humanReadableEscrowState,
  humanReadableUnixTimestamp,
} from "./formatters";

import ContractDetails from "./components/ContractDetails";
import Balance from "./components/Balance";

import Seller from "./components/users/Seller";
import Visitor from "./components/users/Visitor";
import Buyer from "./components/users/Buyer";
import PreviousBuyers from "./components/PreviousBuyers";

// localhost
const escrowAddress = "0x5FbDB2315678afecb367f032d93F642f64180aa3"

// Move this to context?
const provider = new ethers.providers.Web3Provider(window.ethereum);
const contract = new ethers.Contract(escrowAddress, Escrow.abi, provider);

// Show metamask for users to decide if they will pay or not
async function requestAccount() {
  try {
    await window.ethereum.request({ method: 'eth_requestAccounts' });
  } catch (error) {
    console.log("error");
    console.error(error);

    alert("Login to Metamask first");
  }
}

function App() {
  const [contractEnd, setContractEnd] = useState(true);

  const [escrow, setEscrow] = useState({
    state: null,
    balance: 0,
    price: 1, // 1 ETH by default
    sales: 0,
    previousBuyers: [],
  });

  // Use object instead?
  const [seller, setSeller] = useState();
  const [sellerBalance, setSellerBalance] = useState();

  // Use object instead?
  const [buyer, setBuyer] = useState();
  const [buyerBalance, setBuyerBalance] = useState();

  // Use object instead?
  const [user, setUser] = useState();
  const [userBalance, setUserBalance] = useState();

  const [role, setRole] = useState();

  useEffect(() => {
    async function fetchData() {

      try {
        // 2.
        // Contract event handlers

        contract.on("Closed", async (when, event) => {
          event.removeListener(); // Solve memory leak with this.

          const contractState = await contract.state();
          // const contractState = await contract.showState();

          const contractBalance = await provider.getBalance(contract.address);
          const previousBuyers = await contract.listPreviousBuyers();

          setEscrow({
            ...escrow,
            state: humanReadableEscrowState(contractState), // Easier
            // state: await contractState.toString(),
            balance: ethers.utils.formatEther(contractBalance.toString()),
            previousBuyers,
          })

          const contractSeller = await contract.seller();
          const contractSellerBalance = await provider.getBalance(contractSeller);
          setSellerBalance(ethers.utils.formatEther(contractSellerBalance));

          // console.log("when");
          // console.log(when);
          // console.log(humanReadableUnixTimestamp(when));
          console.log("Event - Closed");
          console.log(`State - ${humanReadableEscrowState(contractState)}`);
          console.log(`${moment(humanReadableUnixTimestamp(when)).fromNow()} - ${humanReadableUnixTimestamp(when)}`)
        });

        contract.on("ConfirmPurchase", async (when, by, event) => {
          event.removeListener(); // Solve memory leak with this.

          const contractState = await contract.state();
          const contractBalance = await provider.getBalance(contract.address);
          const previousBuyers = await contract.listPreviousBuyers();

          setEscrow({
            ...escrow,
            state: humanReadableEscrowState(contractState),
            balance: ethers.utils.formatEther(contractBalance.toString()),
            previousBuyers,
          })

          setBuyer(by);
          const contractBuyerBalance = await provider.getBalance(by);
          setBuyerBalance(ethers.utils.formatEther(contractBuyerBalance));

          setRole("buyer");
          console.log("This visitor became the buyer of this contract");

          // console.log("when");
          // console.log(when);
          // console.log(humanReadableUnixTimestamp(when));
          console.log("Event - ConfirmPurchase");
          console.log(`By - ${by}`);
          console.log(`State - ${humanReadableEscrowState(contractState)}`);
          console.log(`${moment(humanReadableUnixTimestamp(when)).fromNow()} - ${humanReadableUnixTimestamp(when)}`)
        });

        contract.on("SellerRefundBuyer", async (when, event) => {
          event.removeListener(); // Solve memory leak with this.

          const contractState = await contract.state();
          // const contractBalance = await provider.getBalance(contract.address);
          // const previousBuyers = await contract.listPreviousBuyers();

          setEscrow({
            ...escrow,
            state: humanReadableEscrowState(contractState),
            // balance: ethers.utils.formatEther(contractBalance.toString()),
            // previousBuyers,
          })

          console.log("This seller refunded the buyer of this contract");

          // console.log("when");
          // console.log(when);
          // console.log(humanReadableUnixTimestamp(when));
          console.log("Event - SellerRefundBuyer");
          console.log(`State - ${humanReadableEscrowState(contractState)}`);
          console.log(`${moment(humanReadableUnixTimestamp(when)).fromNow()} - ${humanReadableUnixTimestamp(when)}`)
        });

        contract.on("ConfirmReceived", async (when, by, event) => {
          event.removeListener(); // Solve memory leak with this.

          const contractState = await contract.state();
          const contractBalance = await provider.getBalance(contract.address);
          const previousBuyers = await contract.listPreviousBuyers();
          console.log(previousBuyers);

          setEscrow({
            ...escrow,
            state: humanReadableEscrowState(contractState),
            balance: ethers.utils.formatEther(contractBalance.toString()),
            previousBuyers,
          })

          setBuyer(by);
          const contractBuyerBalance = await provider.getBalance(by);
          setBuyerBalance(ethers.utils.formatEther(contractBuyerBalance));

          console.log("Event - ConfirmReceived");
          console.log(`By - ${by}`);
          console.log(`State - ${humanReadableEscrowState(contractState)}`);
          console.log(`${moment(humanReadableUnixTimestamp(when)).fromNow()} - ${humanReadableUnixTimestamp(when)}`)
        });

        contract.on("SellerRefunded", async (when, event) => {
          event.removeListener(); // Solve memory leak with this.

          const contractState = await contract.state();
          const contractBalance = await provider.getBalance(contract.address);

          const previousBuyers = await contract.listPreviousBuyers();
          console.log(previousBuyers);

          setEscrow({
            ...escrow,
            state: humanReadableEscrowState(contractState),
            balance: ethers.utils.formatEther(contractBalance.toString()),
            previousBuyers,
          })

          const contractSeller = await contract.seller();
          const contractSellerBalance = await provider.getBalance(contractSeller);
          setSellerBalance(ethers.utils.formatEther(contractSellerBalance));

          console.log("Event - SellerRefunded");
          console.log(`State - ${humanReadableEscrowState(contractState)}`);
          console.log(`${moment(humanReadableUnixTimestamp(when)).fromNow()} - ${humanReadableUnixTimestamp(when)}`)
        });

        contract.on("Restarted", async (when, event) => {
          event.removeListener();

          const contractState = await contract.state();
          const contractBalance = await provider.getBalance(contract.address);
          const previousBuyers = await contract.listPreviousBuyers();

          setEscrow({
            ...escrow,
            state: humanReadableEscrowState(contractState),
            balance: ethers.utils.formatEther(contractBalance.toString()),
            previousBuyers,
          })
          const contractSeller = await contract.seller();
          const contractSellerBalance = await provider.getBalance(contractSeller);
          setSellerBalance(ethers.utils.formatEther(contractSellerBalance));

          setBuyer();
          setBuyerBalance();

          console.log("Event - Restarted");
          console.log(`State - ${humanReadableEscrowState(contractState)}`);
          console.log(`${moment(humanReadableUnixTimestamp(when)).fromNow()} - ${humanReadableUnixTimestamp(when)}`);
        });

        contract.on("End", async (_when, _event) => {
          // This doesn't work
          // event.removeListener();

          // console.log("Event - End");
          // console.log(`${moment(humanReadableUnixTimestamp(when)).fromNow()} - ${humanReadableUnixTimestamp(when)}`)
          setContractEnd(false);
        });

        // Contract State
        const contractState = await contract.state()
        const contractBalance = await provider.getBalance(contract.address);
        const contractPrice = await contract.price()
        // const contractSales = await contract.totalSales();
        const contractPreviousBuyers = await contract.listPreviousBuyers();
        // console.log(contractPreviousBuyers);

        setEscrow({
          state: humanReadableEscrowState(contractState),
          balance: ethers.utils.formatEther(contractBalance.toString()),
          price: ethers.utils.formatEther(contractPrice.toString()),
          // sales: contractSales.toString(),
          previousBuyers: contractPreviousBuyers,
        })

        const contractSeller = await contract.seller();
        setSeller(contractSeller);
        const contractSellerBalance = await provider.getBalance(contractSeller);
        setSellerBalance(ethers.utils.formatEther(contractSellerBalance));

        const contractBuyer = await contract.buyer()
        setBuyer(contractBuyer);
        const contractBuyerBalance = await provider.getBalance(contractBuyer);
        setBuyerBalance(ethers.utils.formatEther(contractBuyerBalance)); // Should make this part work again.

        const signer = provider.getSigner(); // user

        const contractUser = await signer.getAddress();
        setUser(contractUser);
        const contractUserBalance = await provider.getBalance(contractUser);
        setUserBalance(ethers.utils.formatEther(contractUserBalance));

        if (contractUser === contractSeller) {
          setRole("seller");
        } else if (contractUser === contractBuyer) {
          setRole("buyer");
        } else {
          setRole("visitor");
        }
      } catch (error) {
        console.log("error");
        console.error(error);
      }
    }

    fetchData();
  }, []);

  // 1. Event functions
  async function close() {
    if (!escrow.state || escrow.state !== "Sale") {
      return;
    }

    if (typeof window.ethereum !== 'undefined') {
      await requestAccount()

      const signer = provider.getSigner(); // Your current metamask account;

      // console.log("signer");
      // console.log(signer);

      const forClose = new ethers.Contract(escrowAddress, Escrow.abi, signer);

      const transaction = await forClose.close();
      await transaction.wait();
    }
  }

  // Visitor
  async function purchase() {
    if (!escrow.state || escrow.state !== "Sale") {
      return;
    }

    if (typeof window.ethereum !== 'undefined') {
      await requestAccount()

      const signer = provider.getSigner(); // Your current metamask account;
      const forPurchase = new ethers.Contract(escrowAddress, Escrow.abi, signer); 

      const transaction = await forPurchase.confirmPurchase({ value: ethers.utils.parseEther("2.0") });
      await transaction.wait();
    }
  }

  async function receive() {
    if (!escrow.state || escrow.state !== "Locked") {
      return;
    }

    if (typeof window.ethereum !== 'undefined') {
      await requestAccount()

      const signer = provider.getSigner(); // Your current metamask account;
      const contract = new ethers.Contract(escrowAddress, Escrow.abi, signer);

      const transaction = await contract.confirmReceived();
      await transaction.wait();
    }
  }

  async function refundBuyer() {
    if (!escrow.state || escrow.state !== "Locked") return

    if (typeof window.ethereum !== 'undefined') {
      await requestAccount()

      const signer = provider.getSigner(); // Your current metamask account;

      const forRefund = new ethers.Contract(escrowAddress, Escrow.abi, signer);
      const transaction = await forRefund.refundBuyer();
      await transaction.wait();
    }
  }

  async function refundSeller() {
    if (!escrow.state || escrow.state !== "Release") return

    if (typeof window.ethereum !== 'undefined') {
      await requestAccount()

      const signer = provider.getSigner(); // Your current metamask account;

      const forRefund = new ethers.Contract(escrowAddress, Escrow.abi, signer);
      const transaction = await forRefund.refundSeller();
      await transaction.wait();

      // call currentEscrowState here and it will show you inactive at the screen
      // fetchGreeting()
    }
  }

  async function restart() {
    if (!escrow.state) return
    // if (!escrow.state || escrow.state !== "Closed" || escrow.state !== "Complete" ) return

    if (typeof window.ethereum !== 'undefined') {
      await requestAccount()

      const signer = provider.getSigner(); // Your current metamask account;

      const forRestart = new ethers.Contract(escrowAddress, Escrow.abi, signer);
      const transaction = await forRestart.restartContract({ value: ethers.utils.parseEther("2.0") });
      await transaction.wait();
    }
  }

  async function end() {
    if (!escrow.state) return
    // if (!escrow.state || escrow.state !== "Closed" || escrow.state !== "Complete") return

    if (typeof window.ethereum !== 'undefined') {
      await requestAccount()

      const signer = provider.getSigner(); // Your current metamask account;

      const forEnd = new ethers.Contract(escrowAddress, Escrow.abi, signer);
      const transaction = await forEnd.end();
      await transaction.wait();
    }
  }

  // End event
  if (!contractEnd) {
    return null;
  }

  if (!escrow.state) {
    return null;
  }

  // const contextRef = createRef();

  let balance;
  if (role === "seller") {
    balance = sellerBalance
  } else if (role === "buyer") {
    balance = buyerBalance;
  } else {
    balance = userBalance;
  }

  return (
    <div>
      <Sticky >
        <Balance
          balance={balance}
        // setAccountAddress={setAccountAddress} 
        />
      </Sticky>
      <div style={{
        // borderTop: "1px solid black",
        margin: "0 auto",
        display: "flex",
        flexFlow: "column",
        alignItems: "center",

        background: "#efefef",
        minHeight: "100vh",
      }}>
        <ContractDetails
          address={contract.address}
          sales={escrow.previousBuyers.length}
          escrowState={escrow.state}
          price={escrow.price}
          balance={escrow.balance}
        // lastEdited={lastEdited}
        />

        <br />

        {escrow.previousBuyers.length > 0 && <div style={{
          width: "28rem",
          marginBottom: "1.5rem",

          border: "1px solid black",
          borderRadius: "0.5rem",
          padding: "0.5rem 1rem 1rem 1rem",

          background: "white",
        }} ><PreviousBuyers previousBuyers={escrow.previousBuyers} /></div>}

        {role && <div style={{
          width: "28rem",
          marginBottom: "1.5rem",

          border: "1px solid black",
          borderRadius: "0.5rem",
          padding: "0.5rem 1rem 1rem 1rem",

          background: "white",
        }} >
          {role === "seller" && <Seller
            address={seller}
            buyer={buyer}

            escrowState={escrow.state}
            close={close}

            refundBuyer={refundBuyer}
            refundSeller={refundSeller}

            restart={restart}
            end={end}
          />}

          {role === "visitor" && <Visitor
            address={user}
            seller={seller}
            // balance={userBalance}

            escrowState={escrow.state}

            purchase={purchase}
          />}

          {role === "buyer" && <Buyer
            address={buyer}
            seller={seller}

            escrowState={escrow.state}

            receive={receive}
          />}
        </div>}
      </div>
    </div>
  );
}

export default App;

Puedes probar el código en tu explorador con

$yarn start

Debería mostrar algo similar a las imágenes del principio del post.

Prueba cada botón y situación como vendedor, comprador, primer comprador, segundo comprador, etc. Verás que la página se actualiza por cada petición con las funciones que definimos anteriormente.

También pruebalo como first buyer (primer comprador) y second buyer (segundo comprador) y ás que aparecerá la lista de compradores anteriores y ventas totales será igual a 2.

Espero que lo hayas logrado y obtenido 2ETH como vendedor í como en la imagen de arriba.

También se puede ver que el balance fue modificado.

Si tienes suficiente tiempo o tienes un cliente pagando, puedes intentar actualziar el frontend con React Context o Redux o cualquier libreria que desees usar para gestionar el estado, así como extraer el CSS con baseweb.

4. Conclusión

En este post aprendimos a programar una aplicación full stack descentralizada (dapp) con React, Hardhat y ether.js.

Si logrste seguir este post sin problemas, te daras cuenta que los comandos que te facilite al principio son suficiente para poder correr la dapp de forma local.

Actualiza el smart contract con el tema de tu interés en caso de que no quieras que sea sobre autos, y has tu propio proyecto.

Considero que fue una buena experiencia preparar y escribir este post.

Si te gusto este post por favor compartelo con otros. Planeo seguir compartiendo mas contenido de blockchain, estoy interesado en ETH y POLKADOT.

Si necesitas un desarrollador, puedes contactarme.

Puedo hacer aplicaciones full stack.

Si deseas actualizar este ejemplo puedes consultar este post.

Gracias.

Cómo desplegar una aplicación web Rust con DigitalOcean

Steadylearner — Sun, 05 Jun 2022 11:36:18 +0000

La mayoría de los usuarios de Rust terminan amando sus características, como el rendimiento, la fiabilidad y la productividad. No es fácil empezar a aprenderlo, pero hay buenas comunidades que te ayudarán a hacerlo.

Puedes contactarme por telegram si necesitas contratar a un desarrollador Blockchain Full Stack.

También puedes unirte a mi grupo de telegram, en el cual puedes encontrar otros desarrolladores blockchain, asi como reclutadores, jefes de proyecto, asi como hacer preguntas y hacer conexiones.

Además de eso, hay herramientas decentes de gestión como cargo, cargo-edit, etc. el lenguaje de programación asi como los paquetes (crates) estan madurando.

los desarrolladores de lenguaje también estan dedicando tiempo a mejorar la integracion de Webassembly para atraer mas desarrolladores frontend y hacer aplicaciones web mas rapido.

Sin embargo fue dificil encontrar ejemplos de casos reales para integrar el frontend a Rust y luego hacer el despliegue a la web.

No estaba seguro de que pudiese subir mi sitio web a la web con Rust, pero eventualmente lo logre y quize compartir el proceso con ustedes.

Si ya tienes experiencia haciendo despliegues en otro lenguajes te daras cuenta que el despliegue con Rust no es tan diferente de hacerlo con Node o Python.

Compra un servicio VPS como el que puedes encontrar en DigitalOcean que te ofresca el mismo sistema operativo que usas en tu máquina local.
Repite lo que has estado haciendo en tu entorno de desarrollo en la máquina virtual que ellos ofrecen.
Configura Apache o Nginx y systemd service worker para que funcione como servidor proxy.
Inicia tu proyecto dentro del servicio de host y inicia el servidor con tu dominio.

puedes seguir leyendo o solo aplica el priceso para Rust u otro framework que utilices.

[Pre requisitos]

Espero que tengas instalado Rust en tu máquina y tengas la aplicación web lista.

Para este post, voy a usar DigitalOcean como ejemplo. Al empezar dudadaba de que fuese a funcionar con Rust, pero luego me di cuenta de lo fácil que era si ya tienes conocimientos de los comandos de la terminal de Linux. Porque lo que te proporcionan es simplemente una máquina virtual de Linux, y puedes repetir lo que hiciste en tu máquina local.

Puedes ver el resultado en Steadylearner.

Para el bajo costo que tiene funciona muy bien, y tiene dos meses gratis de prueba. No vas a necesitar tanto tiempo para empezar si sigues la instrucciones que te dejare en este post.

Se te hara mucho más fácil si ya estas familiarizado con Vim, CLI, Linux, etc.

A parte debes buscar información sobre Nginx. Funciona bien con la configuración predeterminada, pero espero que busques mas información al respecto para que puedas configurarlo segun tus necesidades.

En caso de todavia no tener SSH keys en tu máquina, por favor sigue la documentación de DigitalOcean que te di anteriormente.

Lo que debes hacer es escribir ssh-keygen y seguir las intrucciones en tu máquina.

Puedes repetir el proceso si tu hardware está roto o si necesitas empezar desde cero cuando quieras usarlo en otra máquina.

También espero que ya sepas lo que es un tld (top-level-domain).

Puedes seguir informandote al respecto después de realizar el despliegue de la app con este post.

Tabla de Contenido

Configuración de DigitalOcean.
Instalar dependencias para la máquina virtual.
Configurar Nginx como servidor proxy inverso.
Guardar el proyecto en tu máquina virtual.
Crear el Systemd service para servir la aplicación web.
HTTPS para el sitio web.
Conclusión.

Puedes saltarte la parte de configurar DigitalOcean en caso de que no lo quieras usar.

No vas a necesitar Instalar las dependencias en la máquina virtual de Linux si ya sabes como configurar el entorno de desarrollo.

Solo repite lo que hiciste en tu máquina virtual despuñes de que compres el servicio VPS de [DigtialOcean] o el que hayas escogido.

Si tienes algun problema siguiente este post, por favor contactame a traves de Twitter o LinkedIn y podrea yudarte.

1. Configuración de DigitalOcean

No escribiré detalles acerca de como usar DigitalOcean ya que hay mucha documentación documentations para princiantes.

Usa Ubuntu 16.04 o Ubuntu 18.04. o cualquier version que prefieras y el menor precio para seguir este articulo.

Puedes usar esto como ejemplo, espero que ya hayas creado una cuenta.

Puedes usar cualquier opción que quieres, pero considero que ahorrar recursos es importante.

Usa la opción más barata, ya que será suficiente para hacer pruebas con tu proyecto.

Usaremos Ubuntu 16.04 como nuestra elección.

Tu máquina debe estar conectada con tu máquina virtual que provee el servicio con la SSH, asi como se muestra en la siguiente imagen, con el siguiente comando.

Con el comando $ssh yoursite@xxx.xxx.x.xx, se mostrará el siguiente mensae.

Ahora verás username@project:~$ en tu Linux Kernel.

Estamos listos con DigitalOcean y ya podremos escribir el codigo para desplegar nuestra aplicación web hecha con Rust con Nginx.

Su máquina virtual de linux esta casi vacia, será fácil pensar que tendras empezar desde cero

Ya tiene Git instalado para descargar el proyecto de forma sencilla, Vim para editar los archivos Nginx y Rust. Mas adelante veremos como usarlos.

Si olvidaste el dominio de tu sitio, puedes usar este comando.

$host www.steadylearner.com

Pruebalo con $host yourwebsite.

2. Instalar las dependencias para tu máquina virtual.

Este es una parte tediosa si tienes muchas dependencias.

Para nuestra máquina es solo una máquina virtual vacia, tienes que instalar Rust Compiler, Cargo, Node, Nginx, etc para preparar el despligue.

Si estas familiarizado con Docker, puedes usarlo para ahorrar tiempo.

lo que es importante es instalar Rust para compliar tu [App hecha con Rust] y Nginx para que trabaje como un servidor proxy inverso.

Para avanzar, se tiene que verificar que los requirimientos mínimos esten listos con el siguiente comando.

$sudo nginx -h

$rustup

$cargo

ahora estamos listos para escribir los verdaderos codigos para hacer el despliegue del sitio.

En este post usaremos Rust Rocket framework, pero puedes usar Actix o cualquier framework que desees.

Funcionaran porque lo que estas aprendiendo realmente con este post es como usar Nginx como server proxy para tu aplicación web en un sistema POSIX.

3. Configurar Nginx como servidor proxy inverso.

Ya estamos casi listos, puedes hacerlo funcionar con la documentación que deje mas arriba.

Pero creo que continuar leyendo el post te va a ahorrar tiempo, espero que no hayas modificado nada y que todo siga con sus valores predetermiandos.

Verás que es solo cuestion de hacer copiar y pegar para cuando tengas un ejemplo real.

Usa el siguiente snippet para Nginx y guardalo en /etc/nginx/sites-available/ como your-domain.tld.conf

your-domain.tld en mi caso sería steadylearner.com

Usa el tuyo en su lugar.

server {
    #listen 80; # Only if sysctl net.ipv6.bindv6only = 1
    listen 80;
    listen [::]:80;

    server_name yourdomain.tld www.yourdomain.tld; # 1.

    location / {
        # Forward requests to rocket v4.0 production port
        proxy_pass http://0.0.0.0:8000; # 2.
        proxy_buffering off; # Single Page App work faster with it
        proxy_set_header X-Real-IP $remote_addr;
    }
}

El ejemplo es bastante simple, pero hay dos cosas que debes saber.

1. necesitas habilitar www en DigitalOcean como prefijo del nombre de tu sitio web.

Puedes leer how-to-manage-records, using-cname-for-www.

Puedes guiarte con la imagen de abajo.

Aquí se Utiliza CNAME, pero puedes usar A o AAAA como registro www en su lugar si quieres habiltiar HTTPS mas adelante en este post.

2. El framework web de Rust que usaremos es Rocket y el puerto para producción es http://0.0.0.0:8000. tenemos que ayudar a nginx a "proxyar" la petición a tu aplicación web de Rust.

Podrías utilizar otro puerto y configuración si utilizas otro framework como Actix o de otros lenguajes.

Siempre que editemos los archivos principales de nginx, podemos probarlos con
$sudo nginx -t y nos mostrará unos mensajes similares a estos.

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Si paso la prueba con éxito, podemos usar make sym link para el archivo your-domain.tld.conf que creamos antes.

cd /etc/nginx/sites-enabled && sudo ln -s ../sites-available/your-domain.tld.conf

Espero hayas logrado llegar bien hasta aquí.

Verás varios comandos de nginx después de que despliques el sitio web.

Copia y pegalos dentro del archivo ~/.bashrc con $vim ~/.bashrc y usa $source ~/.bashrc para usarlos si deseas.

No tienes que recordar los detalles si sabes lo que estas haciendo.

#nginx
alias startn="sudo systemctl start nginx"
alias stopn="sudo systemctl stop nginx"
alias restartn="sudo systemctl restart nginx"
alias reloadn="sudo systemctl reload nginx"
alias statusn="service nginx status"
alias testn="sudo nginx -t"
alias foldern="cd /etc/nginx"

Hasta ahora no creo que hayan habido puntos difíciles, Ni fue necesario que edites el archivo nginx.conf

Si quieres servir el archivo gzip de tu Rust Rocket app o de cualquier aplicación web debes incluir el siguiente código y probarlos.

#inside nginx.conf(/etc/nginx/nginx.conf)

##
# Gzip Settings
##

gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 5; # it is better not to be larger than 5
gzip_buffers 16 8k;
gzip_http_version 1.1;

# write what you want to be served as gzip compressed file when use requested it.

gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

Verifiquemos que funciona con.

$curl http://yourdomain.com --silent --write-out "%{size_download}\n" --output /dev/null

$curl http://yourdomain.com --silent -H "Accept-Encoding: gzip, other things" --write-out "%{size_download}\n" --output /dev/null

Y el resultado debe ser mucho mejor y mas fácil que hacerlo sin Nginx.

Si lograste servir los archivos gzip por tu cuenta con Rust o el lenguaje que hayas decidido usar, puedes usar

$find . | gzip *.ext
$find . | gzip -d *.gz

Para comprimir y descromprimir archivos en una carpeta.

No necesitas usar el compresor de Webpack u otro para hacerlo.

4. Guardar el projecto en la máquina virtual

Tu máquina virtual esta casi vacia, pero podrias editar y guardar los archivos con Vim

También podrias usar git para descargar los archivos para que ya esten preinstalados.

Si quieres descargar los archivos de tu proyecto desde tu repositorio de Github puedes hacerlo con el siguiente comando.

$git clone https://github.com/steadylearner/Rust-Web-App.git.

Puedes usar lo que quieras para guardar los archivos en tu máquina virtual.

Puede que quieras hacerlo en tu directorio personal. Para ello, vamos a utilizar $cd ~ && mkdir yourwebsite y guarda allí los archivos de tu proyecto.

Tú sabes mejor que nadie lo que estás haciendo. Es sólo repetir lo mismo que hiciste para hacer el proyecto. La única diferencia son las rutas para servir y enlazar los archivos y directorios.

Si estas usando Rust Rocket para este ejemplo,

Descarga los archivos en tu máquina virtual.
Primero usa $cargo check para verificar que todo funcione correctamente.
para crear los archivos de production en la carpeta de destino dentro de tu máquina virtual usa $cargo run --release
Luego usaremos systemd service para automizar el proceso en la siguiente parte

Quieres subir los archivos luego de desplegar el sitio?

Tienes que repetir este comando $cargo run --release cada vez que modifiques los archivos Rust.
Para sitios éstaticos como HTML, CSS, JS, imagenes u otros archivos simples, solo basta con sustituirlos para que funcione.

La diferencia es que Rust es un lenguaje compilado y los otros no lo son.

5. Crear systemd service para servir la aplicación web

Ya casi lo logramos. vamos a guiarnos del sitio de Rocket para entorno de desarrollo para poder usarlo en los archivos systemd.

Nos explican que hay entorno de desarrollo, "staging" y producción, y será similar que en otros frameworks.

Ya que estamos tratando con archivos de producción y estamos listos para desplegarlo en la web, sólo hay que preocuparse por la parte de producción.

Cuando usamos Rocket, ya viene con su propia configuración por defecto y no vamos a necesitar editar mucho.

Si lees su documentación encontrarás esas partes mejor detalladas en systemd service

Si quieres aprender mas sobre lo que significa service en este contexto, puedes leer esto

"Una unidad de servicio describe cómo gestionar un servicio o aplicación en el servidor. Esto incluirá cómo iniciar o detener el servicio, en qué circunstancias debe iniciarse automáticamente, y la información de dependencia y ordenamiento del software relacionado"

Desde aquí.

luego creamos /etc/systemd/system/your-domain.tld.service y escribimos un contenidos similar a este.

[Unit]
Description=Web Application Example from steadylearner

[Service]
User=www-data
Group=www-data
WorkingDirectory=/home/yourname/yourwebsite/yourproject/
Environment="ROCKET_ENV=prod"
Environment="ROCKET_ADDRESS=0.0.0.0"
Environment="ROCKET_PORT=8000"
Environment="ROCKET_LOG=critical"
ExecStart=/home/yourname/yourwebsite/yourproject/target/release/yourproject

[Install]
WantedBy=multi-user.target

Deberias poder encontrar la ruta correcta para tu proeycto y ya está todo listo.

Ahora pruebaló en la consola de tu máquina virtual con

$sudo systemctl start your-domain.tld.service.

Esto hasta que tu Rocket o cualquier framework que uses complile los archivos de producción y los sirva al port por ti.

Ahora visita tu sitio your-domain.tld

Si deseas puedes guardar un comando similar a este

alias verifywebsite="curl https://www.steadylearner.com"

En tu archivo ~/.bashrc o en caso de que estes familiarizado con los comandos en Linux puedes usar $ping.

El resultado será la respuesta desde Nginx o tu sitio de prodicción en caso de que lo hayas hecho funcionar.

puedes revisar el ejemplo real en Steadylearner.

Espero que lo hayas logrado.

Puede que quieras escribir mas alias en tu archivo ~/.bashrc como estos

# ufw firewall(install ufw first)
alias allownginx="sudo ufw allow 'Nginx Full'"
alias reloadufw="sudo ufw reload"

# systemd service
alias start="sudo systemctl start yourdomain.tld.service"
alias stop="sudo systemctl stop yourdomain.tld.service"
alias status="sudo systemctl status yourdomain.tld.service"
alias reload="sudo systemctl daemon-reload"
# It works automatically for every reboot, use it just once.
alias autoreload="sudo systemctl enable yourdomain.tld.service"

Eso sería todo para realizar el despliegue de la apliacion hecha con Rust a la web con Nginx y systemd service en una máquina virtual de Linux

Puede que quieras usar otro framework, solo necesitas editar las rutas y modificar la configuración.

Si deseas Habilitar HTTPS al sitio, sigue leyendo

6. HTTPS para el sitio web

Lo que necesitamos para habilitar https en el sitio son solo unas pocas linea de comandos.

$sudo certbot --nginx # 1.
$sudo certbot renew --dry-run # 2.

Puedes usar la documentación oficial cerbot.
Leer the documentation de DigitalOcean sobre el comando renew --dry -run

Desde el primer proceso con $sudo certbot --nginx, verás los procesos similares a

Ya habra mostrado en un mensaje que el certificado expirará más tarde y que hay que hacer algún proceso para ello.

Solo necesitamos usar $sudo certbot renew --dry-run.

Podras ver que solo esta simulando el proceso de renovacion en la descripción

Ahora puedes volver a visitar tu sitio con https habilitado

7. Conclusión

De antemano se que no ha sido un post fácil de seguir.

Lo hiciste bien si lo lograste, de lo contrario tu puedes lograr eventualmente lo que te propongas.

Puedes desplegar una aplicacin web heacha con Rust.

Siento que no es nada especial en usar Rust para desarrollo web con Nginx y Linux.

Solo los ports para servir los archivos van a variar de los demas, y el resto del proceso es bastante similar. Puedes hacer lo mismo para otros lenguajes de programación asi como para otros frameworks.

Lo que se aprendió fue a como usar Nginx y Systemd para cualquier framework be escrito en cualquier lenguaje de programación.

Este Fue el conjunto de los post que he escrito anteriormente.

Puede que quieras visitar uno de ellos Si tienes algun problema con este post, puedes buscar Como Desplegar con Rust.

Sigueme si quieres mas post de Rust, React, Node, Python, Haskell, Solidity, Polkadot, etc.
Follow me if you want more posts for Rust, React, Node, Python, Haskell, Solidity, Polkadot etc.

Si necesitas un desarrollador, contactame.

Gracias y por favor comparte es post con otros.

Cómo Instalar PostgreSQL y Pgadmin con Docker

Steadylearner — Sat, 04 Jun 2022 17:46:50 +0000

En este post, aprenderemos como instalar y configurar PostgreSQL y Pgadmin con Docker. si aun no estas familiarizado con Docker, por favor lee ¿Cómo usar los comandos de Docker? primero.

Puedes ver la versión en inglés aquí.

Puedes contactarme por telegram si necesitas contratar a un desarrollador Blockchain Full Stack.

También puedes unirte a mi grupo de telegram, en el cual puedes encontrar otros desarrolladores blockchain, así como reclutadores, jefes de proyecto, así como hacer preguntas y ampliar tu red

Si usas Linux como sistema operativo, escribe $docker en la terminal y te mostrara como instalar Docker.

Si usas Mac o Windows, seria mejor installar la aplicacion de Docker en escritorio. luego opcionalmente puedes configurarlo para utilizar minima cantidad de recursos.

Tabla de contenidos

Instalar Postgresql y Pgamdin con Docker
Enlazarlos con Docker network
Configuracion de Pgadmin y confirmar conexion
Conclusion

1. Instalar Postgresql y Pgamdin con Docker

Antes de Instalar Postgresql con Docker, haremos que los datos persistan en la máquina con volume.

$docker volume create postgresqldata

Podrás ver si funciono con el comando $docker volume ls

DRIVER    VOLUME NAME
local     postgresqldata

El Volumen para guardar los datos de Postgresql esta listo, ahora lo instalaremos con Docker y lo enlazaremos al volumen que hemos creado con el siguiente comando.

$docker run -d -v postgresqldata:/data/db -e POSTGRES_PASSWORD=postgres --name postgres -p 5432:5432 postgres

Puedes usar tu propia password si deseas luego de terminar este post.

Cuando la instalación se haya completado, veras un mensaje similar por consola.

Status: Downloaded newer image for postgres:latest

Ahora usa $docker ps -a para ver si se guardo correctamente.

CONTAINER ID   IMAGE      COMMAND                  CREATED          STATUS          PORTS                                       NAMES
postgres   "docker-entrypoint.s…" 0.0.0.0:5432->5432/tcp, :::5432->5432/tcp   postgres

Usa $docker exec -it postgres /bin/bash para usar la consola de la imagen de Docker y luego $psql -h localhost -U postgres para poder utilizar los comandos psql en la terminal.

No vas a necesitar hacer esto a menudo si instalas pgadmin luego, pero puedes cambiar el password si lo deseas con \password si quieres al terminar el post.

Verificamos que Postgresql fue instalado correctamente con Docker.
Usaremos otra consola para instalar Pgadmin y gestionar de forma mas facil con el siguiente comando.

$docker run --name pgadmin -e "PGADMIN_DEFAULT_EMAIL=name@example.com" -e "PGADMIN_DEFAULT_PASSWORD=admin" -p 5050:80 -d dpage/pgadmin4

Veras un mensaje similar a este.

Status: Downloaded newer image for dpage/pgadmin4:latest

Puedes ver que se instaló correctamente otra vez con $docker ps -a abre tu explorador y coloca la siguiente url http://localhost:5050/login para ver si esta funcionando correctamente, utiliza el usuario y contraseña que usaste anteriormente.

Seras redirigido a la página de administrador.

2. Enlazarlos con Docker network y configuracion de Pgadmin.

Para hacer que el Pgadmin que instalamos con Docker funcione con Postgresql, debemos enlazarlos con los comandos de Docker network.

Primero crearemos pgnetwork, como se muestra en el siguiente comando.

$docker network create --driver bridge pgnetwork

Puedes ver si fue creado con el siguiente comando $docker network ls.

NETWORK ID     NAME        DRIVER    SCOPE
               pgnetwork   bridge    local

Ahora enlazaremos Pgadmin y Postgresql al pgnetwork con estos comandos.

$docker network connect pgnetwork pgadmin
$docker network connect pgnetwork postgres

Puedes verificar que esten conectados a pgnetwork con el comando docker network inspect pgnetwork.

[
    {
        "Name": "pgnetwork",
            {
                "Name": "pgadmin",
                "Name": "postgres",
            }
        },
    }
]

Si pudiste llegar hasta aqui, quiere decir que todo esta listo para hacer que funcione Pgadmin con Postgresql en Docker.

3. Configuración de Pgadmin y confirmar conexión

Debido a que enlazamos Pgadmin y Postgresql con Docker en la misma red, finalmentos podemos configurar Pgadmin para conectarse con Postgresql.

Ahora haz clic en el botón "new server" en la página de administrador.

Ahora, utiliza postgres para todos los campos que sean necesarios en caso de que no hayas cambiado nada hasta el momento.

Haz clic en el botón "save" para guardar y veras que la conexion finalmente se realizó.

Espero que hayas podido llegar hasta aqui. Puedes buscar mas informacion de como usarlo en su sitio web

Puedes detenerlo luego de probarlo para que no utilice muchos recursos con este comando.

$docker stop pgadmin postgtres

Estos comandod pueden serte de ayuda en caso de que decidas usarlo con Python.

# Intel 
# $pip install psycopg2 or 

# M1  
# $brew install postgresql, $brew link openssl
# export CPPFLAGS="-I/opt/homebrew/opt/openssl@1.1/include -I/opt/homebrew/opt/icu4c/include"
# export PATH=/opt/homebrew/opt/postgresql@13/bin:$PATH
# export LDFLAGS="-L/opt/homebrew/opt/openssl@1.1/lib"
# export CPPFLAGS="-I/opt/homebrew/opt/openssl@1.1/include"
# export PKG_CONFIG_PATH="/opt/homebrew/opt/openssl@1.1/lib/pkgconfig"
# pip install psycopg2-binary

4. Conclusion

En este post, aprendimos s como instalar y configurar Postgresql y Pgamdin en Docker. También podras utilizarlo con una instancia remota de Postgresql.

Si lograste hacerlo funcionar, no tendras que volver a instalar localmente Postgresql y pgadmin.

Si necesitas un desarrollador, puedes contactarme.

Puedo escribir una full stack dapp.

Gracias.

Como fazer GIF animado com Python

Steadylearner — Mon, 08 Nov 2021 14:02:04 +0000

Estava aprendendo Python antes e não achei muitos artigos nesse assunto. Por isso, pensei que será bom escrever um para explicar como usar Python para fazer GIF animado simples.

Pode usar Git direito se você já tem git instalado com e depois disso, você só precisará mudar uns documentos e textos por seu próprio uso.

$git clone https://github.com/steadylearner/Como-fazer-GIF-animado-com-Python

Para isso, é melhor você já tem ambiente para usar Python no seu computador. Nesse artigo, usei Python 3.7 com Virtualenv. Como aqui tá usando bastante pacotagens de Python e não precisa escrever seu código muito, pode usar a versão melhor para você e modificar umas partes para seu trabalho.

Caso nunca usou Python antes. Eu preparei umas listas para ajudar você.

Você devia ler bastante antes de começar isso se não conhecia Python mas isso é normal. Daqui a diante, vou pensar que já conseguiu preparar ambiente para desenvolvimento.

O que eu digo daqui a diante, podem ser feitos com software como Photoshop ou uns para edição de vídeos. Mas usar código em vez de software ajuda você salvar poder de computação bastante, e caso você já tem códigos que funcionam. Pode economizar bastante tempo ao mesmo tempo.

Vamos começar com como preparar vídeo para fazer GIF animado primeiro. Talvez, você já tinha uns vídeos em mente que queira mudar em GIF animados. Tipo vídeo de gols sensacionais em jogos de futebol, animais engraçados ou cenas específicos de notícias.

Pode usar seu próprio vídeo caso você já tinha alguns vídeos para isso no seu celular. Se não, acho é melhor usar alguns vídeos de YouTube para praticar. Para isso, pode usar alguns software gráficos para baixar vídeos.

Caso você prefere, aind pode usar CLI como youtube-dl e também há vários jeitos e artigos sobre como baixar vídeo de YouTube ou sites de vídeos grátis.

Você ainda pode usar vídeo em cima para esse processo. Baixei num site de vídeo grátis e subi no YouTube para compartilhar facilmente.

Será mais fácil usar isso caso você queria usar o mesmo exemplo para esse artigo.

Caso você decidiu usar youtube-dl para baixar esse vídeo, pode usar códigos que deixei em baixo apenas mudando identidade de vídeo.

Se enetende inglês, leia isso primeiro antes de usar código em baixo.

Essa explicação é para vídeo em cima com id 7J-XaPwyafU

1. Só para baixar vídeo sem pensar tipo de vídeo
$youtube-dl https://www.youtube.com/watch?v=7J-XaPwyafU

2. Verificar qual tipo de video que voce quer e baxiar-o

1) $youtube-dl -F https://www.youtube.com/watch?v=7J-XaPwyafU
(mostra lista de vídeos)

2) $youtube-dl -f <número de vídeo entre lista que você quer baixar> https://www.youtube.com/watch?v=7J-XaPwyafU

3. Caso você só precisa áudio (Não precisa baxiar vídeo com audio para gif animado)

$youtube-dl -f 'bestaudiext=m4a]' 'http://youtu.be/<videoId>'

Não precisamos vídeos de melhor qualidade com tamanho bem grande, quero que achou o melhor para seu uso.

Seu vídeo para esse projeto deve ser pronto nesse momento, a gente começa a aprender como mudar isso para Gif animado com exemplos de código em baixo.

Separei documentos em código e o resto para ajudar você ler melhor. Podia achar comentários para cada linhas anotadas com números.

Caso você ainda precisa código que pode copiar e pastar, usa o em baixo.

# nome de documento pode ser seu_gif_animado.py
from moviepy.editor import *
import moviepy.video.fx.all as vfx

video = VideoFileClip("seu_video_para_gif.mp4").subclip(1, 3)
video = video.resize(0.4)

w, h = video.size # 2.

txt_steadylearner = TextClip("www.steadylearner.com", fontsize=16, color='white') # 3.

txt_steadylearner = txt_steadylearner.set_position((12, h - 20)).set_duration(video.duration - 0.1)

sua_marca =(ImageClip("sua_marca.png")
.set_duration(video.duration)
.resize(height=50).margin(right=2, bottom=1, opacity=0)
.set_position(("right","bottom")))

video = CompositeVideoClip([video, sua_marca, txt_steadylearner.crossfadein(1)])

short_video = video.speedx(final_duration=2)
reverse_video = short_video.fx(vfx.time_mirror)

final = concatenate_videoclips([short_video, reverse_video])final.to_gif("seu_gif_animado.gif", fps=10)

Para esse processo funcionar, Você devia installar pacotagem de Python como Moviepy com $pip install moviepy e outros para isso funcionar direito.

Depois escreve ou copia códigos em cima no documento com nome como seu_gif_animado.py e digita $python seu_gif_animado.py com imagens e textos de exemplo.

O resultado será igual como imagem em título.

Já deixei imagem de comentários para ajudar você entender melhor o que aconteça mas queria dar umas dicas mais para você.

Você tem que assistir seu vídeo bem primeiro e tem que decidir quais partes de vídeo você queria incluir e depois você corta só essas partes com .subclip(começo, fim)
Depende do seu texto, imagem de marca e vídeo que você usa, tem que modificar números no exemplo e achar o melhor com experimento
Ler bastante documento no site oficial. Podia perguntar outros mas quem sabe melhor sobre o assunto sempre será áuthor de projeto.

Desejo que esse artigo ajudou você fazer o que queria. Acredito que pode fazer seu próprio GIF animado com sua imagem(marca, fotos etc) e suas mensagens(textos, títulos etc) depois de seguir bem esse artigo.

Se você precisa de ajuda ou precisa de desenvolver em sua empresa, pode falar comigo em Telegram chat.

Estou trabalhando com ETH/BSC e Solana blockchain. Isso é minha conta de GitHub e pode ser usado como referência.

How to learn Vim with examples

Steadylearner — Tue, 29 Jun 2021 13:00:46 +0000

When I first tried to learn Vim, it was not easy at all.I couldn’t have total control that I had with other IDE such as VSCode.

Then, I repeated several times with desire to learn it but failed to maintain what I learnt later. But, I had to use it to deploy websites and I could learn it really.

I just remembered what an experienced developer told before.

“You learn something better when you have to work with real projects”

I had to use it to solve what was difficult for me with Vim to really learn it.

While using it for real projects, I did find its benefits.

It is already installed almost on every system. You don’t have to install it for a new dev environment.
It doesn’t need much HD and works very well with less resources.
It is better at solving simple problems when you are already accustomed to use it.

Where to begin?
List of minimal Vim commands
Conclusion

1. Where to begin?

I think this website can be very useful for beginners.

First, it is very interactive and you can control your learning phase and back to previous process easily.

Second, there are even practice pages for you to use what you learnt.

I have repeated this several times before I had to start the real project.

You can visit it first or after reading List of Vim commands below.

Then, you can verify what you learnt with $vimtutor command.

It is very helpful to start to learn Vim with it. I hope you to go on until lesson 2 at least and hope you already know how to navigate and edit texts.

If you followed them well, you already know Vim sufficiently to use at real work. But, I want to give you minimal Vim commands to remember.

2. List of minimal Vim commands

Photo by Kaitlyn Baker

1. Controlling Cursors

When you open files with $vim test.txt Vim starts with editor mode. You can use I to start with insert mode and back to editor mode again with [Esc] or ctrl + [ commands.

You can move cursors with these when you are in editor mode. It will take sometime to be familiar with them.

⬅ h to left, 
⬇ j to down
⬆ k to up
➡ l to right

You can also use ⬅ ⬇⬆ ➡ on keyboard instead whether you are in Editor Mode or not.

2. Write, Save and Quit from the Vim

Writing what you want with Vim, you need to save it and quit from the vim.

To do that, you need to use these.

$vim test.txt
push [i] on keyboard to switch from normal mode to insert mode.
Write something.
push [Esc] to back to normal mode.
push [shift + :] + wq(:wq) to write and quit

Repeat this process until you become familiar with it.

3. Switch between the end and the beginning of the file

When you want to write more contents for existing files, you will start with the end of file.

You can start it with ‘G’ and “gg”* to back to the beginning of the file.

You can combine this with ‘d’ command to delete every lines with gg ➡ dG and it will clear file for you and you don’t have to make a new one.

4. Commands used to delete

They are used when it is not in editor mode(You can stop editor mode with ESC).

‘x’ to delete a word below the cursor
I already showed use case of ‘d’ above. It can be combined with other keys.

For example, you can test them.

“dw” to delete a word
“d$” to delete a line after current cursor postion
You can also use ‘C’ instead to the same as “d$” \
“cc” to remove a line and to use Insert Mode
‘r’ to replace a character below the current cursor position

When you use delete relevant commands they are saved to the clipboard.

You can use ‘p’ to paste it and later you can paste again with either ‘p’ or ‘.’ to repeat previous command.

You can use ‘u’ for undo when something went wrong and redo with [ctrl + shift + r].

5. find a specific word with ‘/’

Photo by Jordan Hile

You can use ‘/’ in [Normal Mode] to find some words and you can use ’n’ to move to the next and ’N’ to the previous.

You can also combine numbers with them. You can test it locally.

6. ‘A’ to append a word at the end of the current line

It is useful to correct missing trailing , or ; etc when you edit a file.

7. Commands to end the process

:w to write, which means save the file and :q to quit without saving
:wq to write, save and quit (You will use this normally.)

These were the commands for beginners I thought useful.

You will need to use the editor mode to write texts and the normal mode mostly.

Be calm and verify well which mode you are and think before you type something if something went wrong. You can always use ‘u’ in the normal mode to undo something.

3. Conclusion

Photo by Al x

I hope you complete the post well. I want to tell you that you don’t need a lot of time to start to use Vim.

Just practice first and use it inside your own project. In time, You will find that you are already using it well.

If you need to hire a developer, you can contact me.

I can write a full stack dapp.

Thanks.

DEV Community: Steadylearner

How to make a GUI translator app with Python Tkinter

How to use CORS for all routes with Next js and browser session api

How to make a full stack facial authentication app with FaceIO and Next js

What is FACEIO?

Prepare a .env file

Test the repository

Test the frontend and FaceIO authentication process

Backend

Conclusion

Read More

How to make a CLI translator with Python pyttsx3 and deep_translator

How to extract an audio file from a video with Python

1. Python Code to extract audios from the videos

2. Conclusion

Cómo usar gRPC con Rust Tonic y Postgres con ejemplos

Prerequisítos

Tabla de Contenido.

1. Configuración del Proyecto

2. Definir el servicio gRPC para el CRUD

3. Preparar nuestro Cargo.toml para instalar dependencias

4. Hacer el server gRPC con Tonic

5. Implementar el servicio gRPC de el CRUD con Rust Postgresql

6. Usar el cliente gRPC para probarlo

GetUser

ListUsers

CreateUser

UpdateUser

DeleteUser

DeleteUsers

7. Conclusión

¿Cómo hacer un bot de criptomonedas en Telegram con Rust y Teloxide

Tabla de Contenido

1. Configurar el bot de Telegram con Botfather

2. Preparar el entorno de desarrollo para usar Teloxide y binance-rs.

3. Construye tu bot de Telegram para encontrar el valor de la criptomoneda con Binance.

4. Conclusión

Cómo hacer una fullstack dapp con react y etherjs

Tabla de Contenido

1. Escribir el smart contract con Solidity

2. Preparar los tests

3. Configuración de Metamask con Hardhat

4. Programar el frontend con React y ethers.js

4. Conclusión

Cómo desplegar una aplicación web Rust con DigitalOcean

[Pre requisitos]

Tabla de Contenido

1. Configuración de DigitalOcean

2. Instalar las dependencias para tu máquina virtual.

3. Configurar Nginx como servidor proxy inverso.

4. Guardar el projecto en la máquina virtual

5. Crear systemd service para servir la aplicación web

6. HTTPS para el sitio web

7. Conclusión

Cómo Instalar PostgreSQL y Pgadmin con Docker

Tabla de contenidos

1. Instalar Postgresql y Pgamdin con Docker

2. Enlazarlos con Docker network y configuracion de Pgadmin.

3. Configuración de Pgadmin y confirmar conexión

4. Conclusion

Como fazer GIF animado com Python

How to learn Vim with examples

Table of contents

1. Where to begin?

2. List of minimal Vim commands

1. Controlling Cursors

2. Write, Save and Quit from the Vim

3. Switch between the end and the beginning of the file

4. Commands used to delete

5. find a specific word with ‘/’

6. ‘A’ to append a word at the end of the current line

7. Commands to end the process

3. Conclusion