Si eres un desarrollador interesado en el desarrollo de Blockchain, debes saber algo sobre los NFT o tokens no fungibles. Entonces, en este artículo, aprenderemos sobre la ingeniería detrás de ellos para que puedas comenzar a construir el tuyo propio.

Al final del proyecto, tendras tu propia billetera Ethereum con un nuevo NFT. Este tutorial es apto para principiantes y no requiere ningún conocimiento previo de la red Ethereum o contratos inteligentes.

¿Qué es un NFT?

NFT significa token no-fungible. Está cita de ethereum.org explica esto:

Los NFTs son tokens que podemos usar para representar la propiedad de varios articulos únicos.
Ellos nos dejan tokenisar arte, coleccionables, incluso bienes raíces.
Ellos pueden tener un solo dueño a la vez, y está asegurado por la blockchain de Ethereum.
Nadie puede modificar el registro del dueño o copiar/pegar un nuevo NFT para que exista.

¿Qué es un estándar de un NFT o ERC-721?

El ERC-721 es el estándar NFT más común. Si tu contrato inteligente implementa ciertos métodos API estandarizados, puede denominarse contrato de token no fungible ERC-721.

Estos métodos se especifican en el EIP-721. Los proyectos de código abierto como OpenZeppelin han simplificado el proceso de desarrollo al implementar los estándares ERC más comunes como una biblioteca reutilizable.

¿Qué es minar un NFT?

Al acuñar un NFT, publica un token único en una cadena de bloques. Este token es una instancia de su contrato inteligente.

Cada token tiene un tokenURI único, que contiene metadatos de su activo en un archivo JSON que se ajusta a cierto esquema. Los metadatos es donde almacena información sobre su NFT, como nombre, imagen, descripción y otros atributos.

Un ejemplo del archivo JSON para el "Esquema de metadatos ERC721" se ve así:

{
	"attributes": [
		{
			"trait_type": "Shape",
			"value": "Circle"
		},
		{
			"trait_type": "Mood",
			"value": "Sad"
		}
	],
	"description": "A sad circle.",
	"image": "https://i.imgur.com/Qkw9N0A.jpeg",
	"name": "Sad Circle"
}

¿Cómo almaceno los metadatos de mi NFT?

Hay tres maneras para almacenar los metadatos del NFT

Primero, puedes almacenar la información en la cadena. En otras palabras, puedes ampliar su ERC-721 y almacenar los metadatos en la cadena de bloques, lo que puede resultar costoso.

El segundo método es usar IPFS.  

Y la tercera forma es simplemente hacer que tu API devuelva el archivo JSON.

Por lo general, se prefieren los métodos primero y segundo, ya que no puedes modificar el archivo JSON subyacente.  Para el alcance de este proyecto, optaremos por el tercer método.

Lo que estaremos construyendo

En este tutorial, crearemos y acuñaremos nuestro propio NFT.  Es apto para principiantes y no requiere ningún conocimiento previo de la red Ethereum o contratos inteligentes.  Aún así, tener una buena comprensión de esos conceptos lo ayudará a comprender lo que sucede detrás de escena.

En un próximo tutorial, crearemos una aplicación web React completamente funcional donde puede mostrar y vender sus NFT.

Este proyecto está escrito intencionalmente con un código fácilmente comprensible y no es adecuado para su uso en producción.

Requisitos Previos

MetaMask

Necesitamos una dirección de Ethereum para interactuar con nuestro contrato inteligente.  Usaremos Metamask como nuestra billetera.  Es una billetera virtual gratuita que administra sus direcciones de Ethereum. Lo necesitaremos para enviar y recibir transacciones (lea más sobre eso aquí).  Por ejemplo, acuñar un NFT es una transacción.

Descarga su extensión de Chrome y su aplicación móvil.  Necesitaremos ambos ya que la extensión de Chrome no muestra sus NFT.

Asegúrate de cambiar la red a "Ropsten Test Network" para fines de desarrollo.  Necesitarás algo de Eth para cubrir las tarifas de implementación y acuñación de tu NFT.  Dirígete a Ropsten Ethereum Faucet e ingresa tu dirección.  Pronto deberías ver algunos Eth de prueba en tu cuenta de Metamask.

Alchemy

Para interactuar con la red Ethereum, deberás estar conectado a un nodo Ethereum.

Ejecutar tu propio Nodo y mantener la infraestructura es un proyecto en sí mismo. Afortunadamente, existen proveedores de nodos como servicio que alojan la infraestructura por usted.  Hay muchas opciones como Infura, BlockDaemon y Moralis.  Usaremos Alchemy como nuestro proveedor de nodos.

Dirígete a su sitio web, crea una cuenta, elige Ethereum como tu red y crea tu aplicación.  Elige Ropsten como tu red.

En su tablero, haz clic en "ver detalles" en su aplicación, luego haz clic en "ver clave".  Guarda tu clave http en algún lugar, ya que la necesitaremos más adelante.

NodeJS/NPM

Nosotros usaremos Node.js para este proyecto. Si no lo tienes instalado sigue este simple tutorial de freeCodeCamp

Iniciamos el proyecto

En tu terminal, ejecuta este comando para crear un nuevo directorio para tu proyecto

mkdir nft-project
cd nft-project

Ahora, haremos otro directorio, ethereum/, dentro de nft-project/, y inicializamos con Hardhat. Hardhat es una herramienta de desarrollo que facilita la implementación y prueba de su software Ethereum.

mkdir ethereum
cd ethereum
npm init

Contesta las preguntas como quieras.  Luego, ejecuta esos comandos para hacer un proyecto Hardhat:

npm install --save-dev hardhat
npx hardhat

Verás este mensaje:

888    888                      888 888               888
888    888                      888 888               888
888    888                      888 888               888
8888888888  8888b.  888d888 .d88888 88888b.   8888b.  888888
888    888     "88b 888P"  d88" 888 888 "88b     "88b 888
888    888 .d888888 888    888  888 888  888 .d888888 888
888    888 888  888 888    Y88b 888 888  888 888  888 Y88b.
888    888 "Y888888 888     "Y88888 888  888 "Y888888  "Y888

Welcome to Hardhat v2.0.8

? What do you want to do? …
  Create a sample project
❯ Create an empty hardhat.config.js
  Quit

Selecciona crear un hardhat.config.js vacío.  Esto generará un archivo hardhat.config.js vacío que luego actualizaremos.

Para la aplicación web, usaremos Next.js para inicializar una aplicación web completamente funcional.  Vuelve al directorio raíz nft-project/ e inicializa una aplicación estándar de Next.js llamada web:

cd ..
mkdir web
cd web
npx create-next-app@latest

Tu proyecto ahora se ve así:

nft-project/
	ethereum/
	web/

¡Impresionante!  Estamos listos para sumergirnos en la codificación real.

Cómo definir nuestras variables .env

¿Recuerdas la clave de Alchemy que tomamos de nuestro proyecto de prueba anterior?  Lo usaremos junto con las claves públicas y privadas de nuestra cuenta Metamask para interactuar con la cadena de bloques.

Ejecuta los siguientes comandos, crea un archivo llamado .env dentro de tu directorio `/ethereum` instala dotenv.  Los usaremos más tarde

cd ..
cd ethereum
touch .env
npm install dotenv --save

Para tu archivo .env, ingresa la clave que has exportado de Alchemy y sigue estas instrucciones para obtener la clave privada de tu Metamask.

Aquí está tu archivo .env:

DEV_API_URL = YOUR_ALCHEMY_KEY
PRIVATE_KEY = YOUR_METAMASK_PRIVATE_KEY
PUBLIC_KEY = YOUR_METAMASK_ADDRESS

El contrato inteligente para NFT

Ve a la ethereum/carpeta y crea dos directorios más: contratos y scripts. Un proyecto de casco simple contiene esas carpetas.

• contracts/contiene los archivos fuente de sus contratos
• scripts/contiene los scripts para implementar y acuñar nuestros NFT

mkdir contracts
mkdir scripts

Luego, instala OpenZeppelin. OpenZeppelin Contract es una biblioteca de código abierto con código reutilizable probado previamente para facilitar el desarrollo de contratos inteligentes.

npm install @openzeppelin/contracts

Finalmente, escribiremos el contrato inteligente para nuestro NFT.  Navega a tu directorio de contratos y cree un archivo titulado EmotionalShapes.sol.  Puedes nombrar tus NFT como mejor le parezca.

Los .solLa extensión hace referencia al lenguaje Solidity, que es el que usaremos para programar nuestro Smart Contract.  Solo escribiremos 14 líneas de código con Solidity, así que no te preocupes si no lo has visto antes.

Comienza con este artículo para obtener más información sobre los lenguajes de contratos inteligentes. También puedes saltar directamente a esta hoja de trucos de que contiene la sintaxis principal.

cd contracts
touch EmotionalShapes.sol

Este es nuestro contrato inteligente:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/utils/Counters.sol";

contract EmotionalShapes is ERC721 {
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIdCounter;

    constructor() ERC721("EmotionalShapes", "ESS") {}

    function _baseURI() internal pure override returns (string memory) {
        return "YOUR_API_URL/api/erc721/";
    }

    function mint(address to)
        public returns (uint256)
    {
        require(_tokenIdCounter.current() < 3); 
        _tokenIdCounter.increment();
        _safeMint(to, _tokenIdCounter.current());

        return _tokenIdCounter.current();
    }
}

Repasemos el código y entendamos lo que está pasando.

1. En la parte superior del archivo, especificamos qué módulo de OpenZeppelin importar.  Necesitamos el contrato ERC721 ya que es la 'base' de nuestro contrato inteligente.  Ya ha implementado todos los métodos especificados en EIP-721 para que podamos usarlo de manera segura.
2. Un contador es útil para generar identificadores incrementales para nuestros NFT.  Nombramos la variable _tokenIdCounter
3. En el constructor, inicializamos nuestro ERC721 con su nombre y su símbolo.  Elegí EmotionalShapes y ESS.
4. Anulamos la función _baseURI predeterminada al devolver la nuestra. Llegaremos a construir eso en un segundo.  En resumen, es la URL que se agregará como 'prefijo' a todos nuestros tokenURI.  En el ejemplo anterior, los metadatos de nuestras NFT vivirán en un archivo JSON en YOUR_API_URL/api/erc721/1.
5. Implementamos la función 'mint'. Es la función que le permite publicar una instancia de este contrato inteligente en la cadena de bloques.  Requiero el _tokenIdCountervariable sea inferior a 3, ya que solo crearé tres instancias de mi NFT.  Puede eliminar eso si desea acuñar más.
6. Finalmente, dentro de la función mint, incrementamos el _tokenIdCountervariable por 1, por lo que nuestro id será 1, seguido de 2, seguido de 3. Luego, llamamos a la función proporcionada por OpenZeppelin _safeMintpara publicar el token.

No te preocupes si te sientes perdido.  Puedes asistir a un taller dirigido por voluntarios de freeCodeCamp, donde invitamos a desarrolladores de niveles de habilidad similares para construir cosas juntos, incluido este proyecto NFT.

Los eventos son gratuitos y a distancia, por lo que puedes consultar cualquier duda directamente. Puedes registrarte aquí . Los asientos son limitados, por lo que se te invitará a los próximos eventos disponibles.

Cómo construir los metadatos para nuestro NFT

Como se mencionó anteriormente, hay tres formas principales de almacenar su tokenURI.  Construiremos un punto final de API simple que se resolverá en la información de nuestro NFT como JSON.

Nuestro proyecto Next.js nos brinda una forma práctica de desarrollar rutas de API.  Ve a la web/carpeta, busque la api/ carpeta dentro de la pages/carpeta, y hacer nuestra dinámica [id].jsruta en un erc721/ carpeta (lee más sobre el enrutamiento aquí ):

// web/pages/api/erc721/[id].js

const metadata = {
  1: {
    attributes: [
      {
        trait_type: "Shape",
        value: "Circle",
      },
      {
        trait_type: "Mood",
        value: "Sad",
      },
    ],
    description: "A sad circle.",
    image: "https://i.imgur.com/Qkw9N0A.jpeg",
    name: "Sad Circle",
  },
  2: {
    attributes: [
      {
        trait_type: "Shape",
        value: "Rectangle",
      },
      {
        trait_type: "Mood",
        value: "Angry",
      },
    ],
    description: "An angry rectangle.",
    image: "https://i.imgur.com/SMneO6k.jpeg",
    name: "Angry Rectangle",
  },
  3: {
    attributes: [
      {
        trait_type: "Shape",
        value: "Triangle",
      },
      {
        trait_type: "Mood",
        value: "Bored",
      },
    ],
    description: "An bored triangle.",
    image: "https://i.imgur.com/hMVRFoJ.jpeg",
    name: "Bored Triangle",
  },
};

export default function handler(req, res) {
  res.status(200).json(metadata[req.query.id] || {});
}

Por el bien de este proyecto, hice que el código fuera lo más comprensible posible.  Esto definitivamente no es adecuado para la producción (no use una URL de Imgur para su NFT).  Asegúrese de definir los metadatos para todos los NFT que pretende acuñar.

Ahora, vaya al directorio web e inicie su aplicación Next.js con este comando:

npm run dev

Tu aplicación debería estar ejecutándose en localhost:3000. Para asegurarse de que nuestro punto final funcione, vaya a http://localhost:3000/api/erc721/1 y debería resolverse con un objeto JSON de los metadatos de su primer NFT.

Cómo exponer los metadatos para nuestro NFT

Dado que tu aplicación está alojada localmente, otras aplicaciones no pueden acceder a ella. Usando una herramienta como ngrok , podemos exponer nuestro host local a una URL de acceso público.

1. Ve a ngrok.com y complete el proceso de registro
2. Descomprimir el paquete descargado
3. En tu terminal, asegúrete de ingresar a la carpeta donde descomprimió su paquete ngrok
4. Sigue las instrucciones en tu tablero y ejecuta

./ngrok authtoken YOUR_AUTH_TOKEN

5. Luego, ejecuta este comando para crear un túnel a tu aplicación web alojada en localhost:3000

./ngrok http 3000

6. ¡Ya casi llegas!  En tu terminal, deberías ver algo como esto:

ngrok by @inconshreveable                                                                            (Ctrl+C to quit)
                                                                                                                     
Session Status                online                                                                                 
Account                       YOUR_ACCOUNT (Plan: Free)                                                                       
Version                       2.3.40                                                                                 
Region                        United States (us)                                                                     
Web Interface                 http://127.0.0.1:4040                                                                  
Forwarding                    http://YOUR_NGROK_ADDRESS -> http://localhost:3000                             
Forwarding                    https://YOUR_NGROK_ADDRESS -> http://localhost:3000                             

Ir a YOUR_NGROK_ADDRESS/api/erc721/1para asegurarse de que su terminal funcione correctamente.

Cómo implementar nuestro NFT

Ahora que hemos hecho todo el trabajo preliminar (oof), volvamos a nuestro ethereum/carpeta y prepárate para implementar nuestro NFT.

Cambiar el _baseURIfuncionar en su ethreum/contracts/YOUR_NFT_NAME.solarchivo para devolver su dirección ngrok.

// ethereum/conrtacts/EmotionalShapes.sol

contract EmotionalShapes is ERC721 {
...
	function _baseURI() internal pure override returns (string memory) {
		return "https://YOUR_NGROK_ADDRESS/api/erc721/";
	}
...
}

Para implementar nuestro NFT, primero necesitaremos compilarlo usando Hardhat . Para facilitar el proceso, instalaremos ethers.js .

npm install @nomiclabs/hardhat-ethers --save-dev

Actualicemos nuestro hardhat.config.js:

require("dotenv").config();
require("@nomiclabs/hardhat-ethers");

module.exports = {
  solidity: "0.8.0",
  defaultNetwork: "ropsten",
  networks: {
    hardhat: {},
    ropsten: {
      url: process.env.DEV_API_URL,
      accounts: [`0x${process.env.PRIVATE_KEY}`],
    },
  },
};

Para obtener más información sobre el archivo de configuración del casco, consulte su documentación. Hemos configurado la red ropsten con nuestra URL de Alchemy y le hemos proporcionado la clave privada de su cuenta metamask.

Finalmente, ejecuta:

npx hardhat compile

Esto permite que hardhat genere dos archivos por contrato compilado.  Deberíamos ver una recién creada artifacts/ carpeta que contiene sus contratos compilados en el contracts/carpeta. Para obtener más información sobre cómo funciona, lea este tutorial del equipo de Hardhat.

Ahora, escribamos un script para implementar finalmente nuestro NFT en la red de prueba.  En tus scripts/carpeta, cree un archivo llamado deploy.js.

// ethereum/scripts/deploy.js

async function main() {
  const EmotionalShapes = await ethers.getContractFactory("EmotionalShapes");
  const emotionalShapes = await EmotionalShapes.deploy();

  console.log("EmotionalShapes deployed:", emotionalShapes.address);
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

Este código está inspirado en el tutorial de implementación .

A ContractFactoryen ethers.js es una abstracción utilizada para implementar nuevos contratos inteligentes, por lo que EmotionalShapesaquí hay una fábrica para instancias de nuestro contrato de token.  Vocación deploy()en un ContractFactorycomenzará la implementación y devolverá un Promiseque se resuelve en un Contract.  Este es el objeto que tiene un método para cada una de sus funciones de contrato inteligente.

Cómo ver el NFT en la cadena de bloques

Ejecute el script de implementación:

node ./scripts/deploy.js

Debes ver en tu terminal EmotionalShapes deployed: SOME_ADDRESS.  Esta es la dirección donde se implementa su contrato inteligente en la red de prueba de ropsten.

Si te diriges a https://ropsten.etherscan.io/address/SOME_ADDRESS, debes ver tu NFT recién implementado.  ¡Sí!  ¡Lo hiciste!

Cómo acuñar su NFT

Ahora que has implementado su NFT, ¡es hora de acuñarlo tu mismo!  Crear un nuevo archivo llamado mint.jsen tu carpeta scripts/.  Usaremos ethers.js para ayudarnos.

Comience agregando el ethers.jspaquete:

npm install --save ethers

Luego, llena el mint.jsexpediente:

require("dotenv").config();
const { ethers } = require("ethers");

const contract = require("../artifacts/contracts/EmotionalShapes.sol/EmotionalShapes.json");
const contractInterface = contract.abi;

// https://docs.ethers.io/v5/api/providers
const provider = ethers.getDefaultProvider("ropsten", {
  alchemy: process.env.DEV_API_URL,
});

// https://docs.ethers.io/v5/api/signer/#Wallet
const wallet = new ethers.Wallet(process.env.PRIVATE_KEY, provider);

//https://docs.ethers.io/v5/api/contract/contract
const emotionalShapes = new ethers.Contract(
  YOUR_NFT_ADDRESS,
  contractInterface,
  wallet
);

const main = () => {
  emotionalShapes
    .mint(process.env.PUBLIC_KEY)
    .then((transaction) => console.log(transaction))
    .catch((e) => console.log("something went wrong", e));
};

main();

He dejado comentarios donde puedes encontrar más información sobre los diferentes métodos.  Primero tomamos la interfaz del contrato (ABI).  De ethereum.org:

Una interfaz binaria de aplicación, o ABI, es la forma estándar de interactuar con contratos en el ecosistema Ethereum, tanto desde fuera de la cadena de bloques como para interacciones de contrato a contrato.

Tu ABI define cómo otros interactúan con tu contrato.  Luego, creamos nuestro proveedor con Alchemy (recuerda el nodo como servicio). Finalmente, inicializamos nuestra billetera con nuestra clave privada.

los main() función llama a la mintmétodo en el contrato inteligente que acabábamos de implementar.  Él mint método toma sólo un parámetro, to, que indican el receptor del token.  Como estamos acuñando para nosotros mismos, ponemos la dirección pública de nuestra cuenta de Metamask.

Si todo va bien, deberías ver la transacción registrada en tu terminal.  Toma el hash propiedad e ir a https://ropsten.etherscan.io/tx/YOUR_HASH.  ¡Deberías ver la transacción de acuñación allí!

Cómo ver el NFT en su billetera Metamask

Debes comenzar descargando la versión móvil de Metamask.  Luego, inicie sesión en su cuenta.

Deberías ver una pestaña de NFT junto con un botón para agregar NFT.  Has clic en el botón e ingresa la dirección de tu contrato inteligente junto con las identificaciones que has acuñado.  Si has seguido el tutorial, debes comenzar con una identificación de 1.

Conclusión

¡Felicidades! Acabas de acuñar tu propio NFT.  En la siguiente parte del proyecto, construiremos la aplicación React front-end para interactuar con nuestro contrato.  El objetivo final es crear una aplicación web completamente funcional en la que pueda vender sus propios NFT.

Por último, puedes unirse a nuestros talleres en vivo con voluntarios de freeCodeCamp donde construiremos este proyecto junto con otros desarrolladores.

Los eventos son gratuitos para todos en todo el mundo y las invitaciones se envían por orden de llegada. Si deseas dirigir los talleres, envíeme en Twitter , ¡nos encantaría contar con usted! También organizamos otro tipo de eventos como ferias de contratación y encuentros sociales.

Déjame saber lo que quieres construir.  Los NFT aún están en pañales y las ideas novedosas son más que bienvenidas.  ¡No puedo esperar a ver qué loca idea tienes!

A menudo, es posible que desee que su sistema se comunique con otros servidores web para obtener información.

Por ejemplo, digamos que un nuevo usuario desea registrarse para obtener una cuenta en su sitio web. Y en lugar de tener que completar manualmente un formulario para enviar su información a su sistema, quieren usar su información que ya está en otro servicio o plataforma (es decir, autenticación de terceros) para registrarse.

En tal caso, su sistema tiene que comunicarse con el sistema del tercero para obtener la información de ese usuario. Y lo hace a través de una API.

Una API, o interfaz de programación de aplicaciones, es solo un conjunto de reglas que guían cómo un software o sistema se comunica con otro.

Si su aplicación es una aplicación de una sola página construida con un lenguaje de programación asincrónico como JavaScript, tiene una herramienta útil para llevar a cabo esa función: fetch().

¿Qué es la API Fetch?

fetch() es un mecanismo que le permite realizar llamadas simples AJAX (JavaScript asíncrono y XML) con JavaScript.

Asincrónico significa que puede usar fetch para realizar una llamada a una API externa sin detener la ejecución de otras instrucciones. De esa manera, otras funciones en el sitio continuarán ejecutándose incluso cuando no se haya resuelto una llamada a la API.

Cuando se envía una respuesta (datos) desde la API, se reanudan las tareas asincrónicas (recuperación).

Sin embargo, es importante tener en cuenta que la recuperación no forma parte de la especificación de JavaScript, sino de WWTAG. Como resultado, no podrá usarlo en un entorno Node.js (a menos que instale un módulo especial).

Cómo utilizar fetch() en JavaScript

Cuando hablamos de API, también necesitamos hablar de endpoints. Un endpoints es simplemente una URL única a la que llama para interactuar con otro sistema.

Supongamos que estamos haciendo una solicitud a una API externa para obtener algunos datos (como una publicación de blog). Para esto, usaremos una simple solicitud GET.

Simplemente llama a fetch() con la URL del punto final como argumento:

fetch('https://ubahthebuilder.tech/posts/1');

El cuerpo de respuesta para este punto final será información sobre una publicación de blog:

{
userId: 1,
id: 1,
title: 'A post by Kingsley',
body: 'Brilliant post on fetch...',
};

En última instancia, querrás obtener el cuerpo de respuesta. Pero el objeto de respuesta contiene bastante información más allá del cuerpo, incluido el código de estado, los encabezados y más información.

Ten en cuenta que la API de recuperación devuelve una promesa. Debido a esto, necesitas anidar un método then() para manejar la resolución.

Los datos devueltos por la API no suelen estar en una forma utilizable. Por lo tanto, deberás convertir los datos a un formulario con el que puedas operar tu JavaScript. Afortunadamente, puedes usar el método json() para hacer precisamente eso:

fetch('https://ubahthebuilder.tech/posts/1')
.then(data => {
return data.json();
})
.then(post => {
console.log(post.title);
});

Como puedes ver en el código anterior, puede anidar un método then() posterior para analizar los datos (saqué solo el título en nuestro caso)

En este ejemplo, simplemente queríamos obtener una publicación de blog de la API. Pero, ¿y si quisiéramos publicar una historia en su lugar?

Cómo realizar una solicitud POST

Una vez que vayas más allá de las solicitudes GET, deberás configurar algunas opciones más. Hasta ahora, solo has proporcionado un único argumento para fetch(): el punto final de la URL.

Para una solicitud de publicación, deberás pasar un objeto de opciones de configuración como segundo argumento. El objeto opcional puedes tomar muchos parámetros diferentes. En este caso, incluye solo la información más necesaria.

Como estás enviando una solicitud POST, deberás declarar que está utilizando el método POST.

También deberás pasar algunos datos para crear realmente la nueva publicación de blog. Dado que estás enviando datos JSON, deberás establecer un encabezado de Content-Type establecido en application / json. Finalmente, necesitarás el cuerpo, que será una sola cadena de datos JSON.

const update = {
title: 'A blog post by Kingsley',
body: 'Brilliant post on fetch API',
userId: 1,
};

const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(update),
};

Y luego, la llamada a la API:

fetch('https://jsonplaceholder.typicode.com/posts', options)
  .then(data => {
      if (!data.ok) {
        throw Error(data.status);
       }
       return data.json();
      }).then(update => {
      console.log(update);
      // {
      //
      title: 'A blog post by Kingsley',
      //
      body: 'Brilliant post on fetch API',
      //
      userId: 1,
      //
      id: 101
      // };
      }).catch(e => {
      console.log(e);
      });

Si tu solicitud es exitosa, obtendrás un cuerpo de respuesta que contiene el objeto de la publicación del blog junto con una nueva ID. La respuesta variará dependiendo de cómo esté configurada la API.

Por último, debes tener en cuenta que los puntos finales pueden cambiar con el tiempo y las APIs pueden reestructurarse. Por lo tanto, debes juntar todas tus llamadas de recuperación para facilitar el acceso.

Conclusión

Aquí hay algunos puntos para resumir este artículo:

• Los sistemas informáticos, como el software, se comunican entre sí y comparten información a través de una capa llamada API.
• Una API contiene el conjunto de reglas y protocolos que guían cómo interactúan dos o más sistemas. Por ejemplo, el sistema de Facebook puede interactuar con el sistema de Google para obtener información sobre un usuario a través de una API.
• En JavaScript front-end, puedes realizar llamadas API simples con la utilidad fetch().
• Para realizar una solicitud GET simple con fetch, solo necesitas pasar el punto final de la URL como argumento.
• Para realizar una solicitud POST, deberás transmitir algunos otros parámetros, incluido un objeto de configuración.

Si te gustó mi artículo y quieres ofrecer tu apoyo, por favor visita mi página Cómprame un café.

Gracias y nos vemos pronto.

Este artículo explica cómo convertir una cadena de texto a caracteres en minúsculas y mayúsculas.

También veremos cómo convertir solo la primera letra de una palabra en mayúscula y cómo convertir la primera letra de cada palabra en una oración en mayúscula.

¡Empecemos!

Cómo utilizar el método toLowerCase() en JavaScript

El método toLowerCase convierte una cadena de texto en letras minúsculas.

La sintaxis general del método se ve así:

String.toLowerCase()

El método toLowerCase() no toma ningún parámetro.

Las cadenas en JavaScript son inmutables. El método toLowerCase () convierte la cadena de texto especificada en una nueva que consta solo de letras minúsculas y devuelve ese valor.

Significa que la cadena original antigua no se modifica ni se ve afectada de ninguna manera.

let saludo = '¡Hola!';

console.log(saludo.toLowerCase());

//salida
//¡hola!

La cadena de texto saludo consta de solo una letra mayúscula que se convierte a minúscula.

Las letras que ya están en minúsculas no se ven afectadas por el método toLowerCase(), solo las mayúsculas. Estas letras conservan su forma original.

La cadena del ejemplo siguiente consta de letras mayúsculas. Luego, todos se convierten a minúsculas cuando se aplica el método toLowerCase ().

const  otroSaludo = '¡¡BUENOS DÍAS!!';

console.log(otroSaludo.toLowerCase());
//salida
//¡¡buenos días!!

Cómo utilizar el método toUpperCase() en JavaScript

El método toUpperCase() es similar al método toLowerCase() pero en su lugar convierte el valor de la cadena de texto a mayúsculas.

La sintaxis general del método se ve así:

String.toUpper()

No toma ningún parámetro.

Como las cadenas en JavaScript son inmutables, el método toLowerCase() no cambia el valor de la cadena especificada.

En cambio, devuelve un nuevo valor. La cadena especificada se convierte en una nueva cuyo contenido consta solo de letras mayúsculas. Esto significa que ahora habrá dos cadenas: la original y la recién convertida en mayúscula.

console.log('¡Estoy gritando!'.toUpperCase());

//salida
//¡ESTOY GRITANDO!

Cualquier letra mayúscula que ya esté en la cadena no se verá afectada y permanecerá sin cambios cuando se llame al método toLowerCase().

Cómo poner en mayúscula solo la primera letra de una cadena de texto en JavaScript

¿Qué sucede si desea convertir solo la primera letra de una cadena en mayúscula?

A continuación se muestra un ejemplo simple que le muestra una forma de hacerlo.

Digamos que hay una variable llamada saludo con el valor de cadena de texto en hola, en letras minúsculas.

let saludo = 'hola';

Primero localiza y extrae la primera letra de esa cadena usando su índice. Luego llamas al método toUpperCase() en esa letra específica.

Como recordatorio, la indexación en JavaScript (y la mayoría de los lenguajes de programación) comienza en 0, por lo que la primera letra tiene un índice de 0.

Guarde esta operación en una nueva variable llamada primeraLetra.

let primeraLetra = saludo[0].toUpperCase();

console.log(primeraLetra);
// devuelve la letra 'H' en este caso

A continuación, desea aislar y cortar ese primer carácter y conservar el resto de la cadena de texto.

Una forma de hacerlo es mediante el método slice(). Esto crea una nueva cadena comenzando desde el índice especificado hasta el final de la palabra.

Desea comenzar desde la segunda letra hasta el final del valor.

En este caso, el argumento que debe pasar a slice() es un índice de 1 ya que es el índice de la segunda letra.

De esta forma, el primer carácter se excluye por completo. Se devuelve una nueva cadena sin ella, pero que contiene el resto de los caracteres, menos la primera letra.

Luego, guarde esa operación en una nueva variable.

let restoDelSaludo = saludo.slice(1);

console.log(restoDelSaludo);
//devuelve la cadena 'ola'

Al combinar las dos nuevas variables con la concatenación, obtiene una nueva cadena con solo la primera letra en mayúscula.

let nuevoSaludo = primeraLetra + restoDelSaludo;

console.log(nuevoSaludo);
//salida
// Hola

Otra forma es combinar los pasos anteriores y aislarlos en una función.

La función se crea solo una vez. Luego, la función devuelve una nueva cadena con la primera letra en mayúscula.

La cantidad de código que necesita escribir es sustancialmente menor y al mismo tiempo puede pasar cualquier cadena como argumento sin escribir código repetitivo.

function primeraLetra(str) {
     return str[0].toUpperCase() + str.slice(1);
 }

console.log(primeraLetra('hola'));
//output 
//Hola

Cómo poner en mayúscula la primera letra de cada palabra en JavaScript

Pero, ¿cómo se hace para colocar la primera letra de cada palabra en mayúscula de una oración?

Digamos que tiene una oración como la siguiente. Quieres poner en mayúscula cada primera palabra de la oración.

let aprendeAProgramar = 'aprende a programar gratis con freeCodeCamp';

El primer paso es dividir la oración en palabras individuales y trabajar con cada una por separado.

Para eso, usa el método split() y pasa un espacio como argumento. Significa que con cada espacio en la oración proporcionada, un elemento se pasa a un nuevo arreglo.

Divide la oración con base en espacios en blanco.

Cree una nueva variable y almacene el nuevo arreglo.

let splitAprendeAProgramar = aprendeAProgramar.split(" ");

console.log(splitAprendeAProgramar); 
//['aprende', 'a', 'programar', 'gratis', 'con', 'freeCodeCamp']

Ahora, a partir de esa oración, hay un nuevo arreglo de palabras que le permite manipular cada palabra por sí sola, por separado.

Dado que ahora hay un nuevo arreglo, puede usar el método map() para iterar sobre cada elemento individual dentro de ella.

En el método map(), utiliza el mismo procedimiento que se muestra en la sección anterior para tomar cada palabra individualmente, poner en mayúscula la primera letra y devolver el resto de la palabra.

let mayusSplitAprendeAProgramar = splitAprendeAProgramar.map(palabra => {
    return palabra[0].toUpperCase() + palabra.slice(1);
})

console.log(mayusSplitAprendeAProgramar);
//['Aprende', 'A', 'Programar', 'Gratis', 'Con', 'FreeCodeCamp']

La primera letra de cada palabra ahora está en mayúscula.

Todo lo que queda ahora es volver a combinar las palabras del arreglo en una sola oración.

Para eso, usa el método join() y pasa un espacio como argumento.

let NuevoAprendeAProgramar = mayusSplitAprendeAProgramar.join(" ");

console.log(NuevoAprendeAProgramar);
//Aprende A Programar Gratis Con FreeCodeCamp

Como se muestra en la sección anterior, también puede crear una función que combine todos estos pasos. Entonces podrá pasar como argumento cualquier cadena y cada primera palabra en ella estará en mayúsculas.

function mayusPrimeraLetraDeOracion(oracion) {
    let palabras = oracion.split(" ").map(palabra => {
        return palabra[0].toUpperCase() + palabra.slice(1);
    })
    return palabras.join(" ");
}

console.log(mayusPrimeraLetraDeOracion("estoy aprendiendo a programar"));
//Estoy Aprendiendo A Codificar

Conclusión

¡Y ahí lo tienes! Así es como se utilizan los métodos toLowerCase() y toUpperCase() en JavaScript.

Aprendió a poner en mayúscula la primera letra de una palabra y a poner en mayúscula la primera letra de cada palabra en una oración.

Si desea aprender JavaScript y obtener una mejor comprensión del idioma, freeCodeCamp tiene una Certificación JavaScript gratuita.

Comenzará desde lo básico como un principiante absoluto en el lenguaje y luego avanzará a materias más complejas, como programación orientada a objetos, programación funcional, estructuras de datos, algoritmos y técnicas de depuración útiles.

Al final, creará cinco proyectos para poner en práctica sus habilidades.

¡Gracias por leer y feliz aprendizaje!