Transcripciones y traducci贸n del Taller Hackathon

隆Hola, Pioneros!聽A continuaci贸n, el Pi Core Team est谩 publicando transcripciones para los videos del Taller #buildpi2gether Hackathon sobre c贸mo se pueden utilizar los diferentes recursos de Pi para construir su proyecto.聽隆H谩ganos saber si hay algo que podamos hacer para que nuestro contenido sea m谩s accesible!

Taller Hackathon – Video 1

T铆tulo: Introducci贸n al portal de desarrolladores de Pi

Gui贸n de video:

Hola a todos, soy Lyriaaw del Pi Core Team . En este video de introducci贸n, discutiremos y descubriremos el nuevo portal de desarrolladores de Pi, lanzado en julio de este a帽o. Junto con Brainstorm, el portal de desarrolladores est谩 destinado a ser su principal compa帽ero en su viaje de desarrollo con Pi Network.

Desde la ideaci贸n hasta el lanzamiento, todos los pasos se pueden gestionar desde estas dos utilidades. Mientras que Brainstorm est谩 destinado principalmente a la creaci贸n de ideas, la financiaci贸n y la reuni贸n de equipos, el Portal para desarrolladores est谩 orientado a la gesti贸n de su aplicaci贸n en la PI Network Platform.

En este video, nos centraremos principalmente en Pi Developer Portal y sus capacidades.

1 – CREACI脫N DE UNA APLICACI脫N

1.A – Los campos b谩sicos

Cuando abra el portal para desarrolladores por primera vez, ver谩 esta utilidad presentada. Puede hacer clic en el bot贸n 芦Nueva aplicaci贸n禄 para iniciar el proceso de creaci贸n. Desde aqu铆, ahora deber铆a ver el formulario de creaci贸n de la aplicaci贸n. El nombre y la descripci贸n de la aplicaci贸n se explican por s铆 mismos. Si tiene un proyecto de lluvia de ideas asociado con su aplicaci贸n, debe usar el mismo nombre. Al final del formulario, se le pedir谩 sus nombres de usuario de Github y Discord. Es posible que queramos crear un grupo de desarrolladores en discord y github, por lo que comenzaremos a recopilar nombres de usuario ahora. Estos dos campos son 100% opcionales. En el futuro, queremos crear un puente entre Brainstorm y el portal de desarrolladores, para que todo el ciclo de vida de la aplicaci贸n sea perfecto.

1.B – Autohospedado / Hospedado por pi core team

En el medio del formulario, ver谩 una pregunta que le preguntar谩 si desea que la aplicaci贸n sea autohospedada o alojada por Pi Core Team.

1.B.1 – Autohospedado

Self Hosted significa que usted es quien maneja su aplicaci贸n en producci贸n. Puede tener su propia infraestructura, pero es usted quien se ocupa del escalado y la disponibilidad. Si selecciona esta opci贸n, se le pedir谩 la URL de la interfaz de su aplicaci贸n. Como se explic贸 en videos anteriores, Pi Utilities son en realidad sitios web que se ejecutan en un iframe, por lo tanto, debe proporcionar esta URL para que Pi Browser pueda mostrar su aplicaci贸n.

1.B.1 – Alojado por Pi Core Team

Por otro lado, Hosted by Pi Core Team significa que nos ocupamos de su aplicaci贸n: sin administraci贸n de infraestructura, sin problemas de disponibilidad, usted simplemente se ocupa del c贸digo. Aunque la primera opci贸n est谩 disponible para todos, la segunda requiere que pases la prueba del desarrollador de lluvia de ideas.

Como todos saben, Pi Core Team est谩 organizando actualmente un hackathon. Al unirse al evento y decir que es un desarrollador, se le enviar谩 a una prueba t茅cnica. Cuando Brainstorm y el portal para desarrolladores est茅n conectados, pasar la prueba t茅cnica abrir谩 autom谩ticamente los siguientes pasos para usted.

Finalmente, cuando seleccione esta acci贸n, en lugar de una URL de interfaz, se le pedir谩 un nombre de usuario de gitlab. Esto nos resultar谩 煤til para poder ofrecerle un proyecto de Gitlab, ya integrado con nuestra canalizaci贸n de implementaci贸n. Ahora puede hacer clic en el bot贸n enviar y seguirme a la p谩gina siguiente.

2 – VALIDACI脫N FRONTEND

Si elige alojar su aplicaci贸n usted mismo, deber谩 verificar la propiedad de su dominio. Esto tiene como objetivo evitar que los desarrolladores creen aplicaciones desde sitios web que no representan. Por ejemplo, no deber铆a poder hacerse pasar por el nombre de dominio wikipedia.com.

Para demostrar su propiedad sobre el nombre de dominio, deber谩 colocar un archivo espec铆fico en la ra铆z de su dominio. El contenido del archivo debe coincidir con el contenido del campo de texto en el cuadro gris.

Cuando haya terminado de colocar el archivo con el contenido correcto en la ra铆z de su dominio, puede hacer clic en el bot贸n 芦Verificar dominio禄. Ver谩 un mensaje de error con informaci贸n de depuraci贸n o el cuadro gris deber铆a desaparecer y deber铆a aparecer una marca de verificaci贸n verde junto a la URL de su dominio. Felicitaciones, la propiedad de su dominio ahora est谩 verificada y puede acceder a su aplicaci贸n a trav茅s del navegador PI escribiendo la URL de su aplicaci贸n en la barra de direcciones.

3 – CLAVE API

Con Pi SDK viene la API de Pi, donde puede ejecutar solicitudes HTTP contra el Pi Backend principal. Por ahora, esto solo est谩 destinado a manejar pagos, pero se agregar谩n m谩s habilidades en el futuro, como crear conversaciones de chat en Pi Chat desde su aplicaci贸n. En la parte inferior de la p谩gina, puede ver una secci贸n llamada 芦Claves API禄. Lo necesitar谩 para acceder a PI Backend como desarrollador de aplicaciones. 隆Mant茅nlo seguro! Cualquiera con esta clave puede hacerse pasar por usted.

Tenga en cuenta que acceder a la cadena de bloques p煤blica Pi no requiere ninguna clave de API, simplemente puede producir transacciones utilizando la clave privada de su aplicaci贸n y enviarlas directamente a la cadena de bloques a trav茅s de cualquier nodo p煤blico (por ejemplo, su propio nodo, uno de los nodos de Pi Core Team, o cualquier otro nodo que est谩 ejecutando el 芦servicio de API Blockchain禄)

3 – ALCANCE

Scopes es una funci贸n que permite a los desarrolladores solicitar diferentes niveles de acceso a los usuarios. De forma predeterminada, las aplicaciones solo tienen acceso a un identificador de usuario an贸nimo, pero si es esencial que una aplicaci贸n conozca los nombres de usuario de sus usuarios (por ejemplo, para mostrarlos en la interfaz), entonces debe solicitar el alcance del 芦nombre de usuario禄. Si una aplicaci贸n tiene la intenci贸n de solicitar a sus usuarios que realicen pagos Pi a la aplicaci贸n, entonces debe solicitar el alcance de 芦pagos禄. Los alcances de las solicitudes son visibles para los usuarios, por lo que para maximizar el n煤mero de personas que instalan c贸modamente su aplicaci贸n, recomendamos pedir solo el n煤mero m铆nimo de alcances absolutamente necesarios para que su aplicaci贸n funcione. Siempre puede solicitar m谩s visores m谩s adelante. Tenga en cuenta que el equipo central est谩 desarrollando activamente la funci贸n de alcance.

Conclusi贸n

Con esta nueva herramienta y la integraci贸n de brainstorm, podr谩s gestionar tu aplicaci贸n desde una idea hasta su lanzamiento p煤blico. Crear una aplicaci贸n en una cadena de bloques nunca ha sido tan f谩cil como ahora. No dude en probar el SDK y mostrarnos lo que puede agregar al ecosistema de utilidades de Pi.

Taller Hackathon – Video 2

T铆tulo: Introducci贸n a Pi SDK y Sandbox

Gui贸n de video:

Mi nombre es Hakkyung, y en este video, voy a presentar c贸mo usar Pi SDK y autenticar usuarios, y c贸mo puede ejecutar su aplicaci贸n en el entorno de la caja de arena con fines de desarrollo. Tenga en cuenta que las aplicaciones Pi son aplicaciones web que se cargan en el entorno, lo que les permite interactuar con los recursos que ofrece la plataforma de aplicaciones Pi. Para ello, debe instalar una parte de Javascript llamada SDK del cliente en su aplicaci贸n. Dado que las aplicaciones Pi son principalmente aplicaciones web, puede depurarlas en el navegador de escritorio utilizando el entorno de la caja de arena.

Vamos a utilizar esta sencilla aplicaci贸n de una sola p谩gina llamada Pi Online Bakery. Se inicializa con create-react-app, pero a煤n puede crear su aplicaci贸n de demostraci贸n con HTML barebone y javascript.

Para usar Pi SDK, debe agregar una etiqueta de secuencia de comandos SDK a su interfaz. Luego, debe llamar a la funci贸n init para inicializar el SDK. Debe especificar la versi贸n para garantizar la compatibilidad con futuras versiones del SDK. A partir de ahora, la versi贸n 2.0 es la 煤ltima, as铆 que colocamos la 2.0 aqu铆, y la bandera de la caja de arena es verdadera, de la que hablar茅 en un minuto. Esta marca de la zona de pruebas es opcional y le permite configurar el SDK para que se ejecute en la zona de pruebas. Es 煤til si controlas esta variable con la variable de entorno, pero para ser expl铆cito, lo estoy estableciendo en verdadero aqu铆.

Vayamos al portal de desarrolladores. Supongo que ha registrado su aplicaci贸n en el portal como lo hice aqu铆. Para cargar su aplicaci贸n en la zona de pruebas, debe establecer la 芦URL de desarrollo禄. En este momento dice 芦No configurado禄, as铆 que editemos esto. Por lo general, ser谩 localhost con un puerto personalizado que depende de su entorno de desarrollo. Aqu铆 estoy usando localhost con el puerto 3003. Una vez que establece la URL de desarrollo, se genera una URL de espacio aislado. Abra esta URL en el navegador de escritorio y ver谩 esta p谩gina en blanco con el c贸digo de autorizaci贸n. Si est谩 ejecutando Pi Node, probablemente est茅 familiarizado con este proceso. Abra su aplicaci贸n m贸vil y toque el enlace Autorizar sandbox en la parte inferior de la p谩gina Pi Utilities. Y debe escribir el c贸digo de autorizaci贸n y presionar confirmar. Cuando su entorno de sandbox est茅 autorizado, ver谩 su aplicaci贸n dentro del entorno de sandbox,

Ahora abra la herramienta de desarrollo del navegador. Aqu铆 hay un peque帽o selector de contexto. Puede seleccionar localhost para obtener el contexto de su aplicaci贸n. Despu茅s de seleccionar localhost, si escribe Pi en la consola, puede acceder a 茅l. Por supuesto, ver谩 que alg煤n valor es nulo porque el usuario actual a煤n no est谩 autenticado.

Ahora que podemos ejecutar nuestra aplicaci贸n en la zona de pruebas, echemos un vistazo al SDK en breve. La primera funci贸n que encontrar谩 es la funci贸n de autenticaci贸n. Toma una matriz de cadenas llamadas 谩mbitos y una funci贸n de devoluci贸n de llamada llamada onIncompletePaymentFound.

Hay dos 谩mbitos disponibles, que son el nombre de usuario y los pagos. Por ahora, la funci贸n de osciloscopios todav铆a es un trabajo en progreso. Lo que eso significa es que la funci贸n de autenticaci贸n considerar谩 ambos 谩mbitos como se solicit贸 por ahora. No obstante, debe implementar su aplicaci贸n solo con los alcances relevantes. Consulte nuestra referencia de SDK alojada en nuestro repositorio de github para futuras actualizaciones.

La funci贸n onIncompletePaymentFound maneja un pago incompleto entre su aplicaci贸n y este usuario que est谩 autenticando. Un pago se considera incompleto cuando no env铆a la llamada a la API de finalizaci贸n del lado del servidor. En esta aplicaci贸n de demostraci贸n, proponemos un uso de ejemplo, en el que el pago se env铆a al servidor de la aplicaci贸n para encontrar el pedido anterior y marcarlo como pagado. M谩s detalles sobre el pago est谩n disponibles en el video de Pago. Por ahora, tengamos en cuenta que necesitamos pasar una funci贸n de devoluci贸n de llamada que maneje el pago incompleto desde el lado del servidor.

La funci贸n de autenticaci贸n devolver谩 una promesa, que se parece a esto. El valor de retorno puede cambiar m谩s adelante, pero lo importante es que debe asegurarse de enviarlo al servidor de la aplicaci贸n y almacenar esta informaci贸n en su base de datos. Tambi茅n es importante verificar esto presionando / me endpoint desde su servidor, porque los usuarios malintencionados pueden fingir que son otra persona. Puede encontrar m谩s informaci贸n sobre el punto final / me en nuestra documentaci贸n de la plataforma Pi.

Entonces, en este video, hemos visto c贸mo usar SDK, ejecutar su aplicaci贸n en la caja de arena y autenticar al usuario actual. En el siguiente video, cubrir茅 c贸mo procesar los pagos, que son envoltorios de la transacci贸n blockchain entre su aplicaci贸n y los usuarios. Gracias por ver.

Taller Hackathon – Video 3

T铆tulo: Introducci贸n a Pi Payments

Gui贸n de video:

Bienvenidos a todos. En el video anterior, vimos c贸mo usar el Pi SDK, ejecutar su aplicaci贸n en la caja de arena y autenticar al usuario. En este video, lo guiar茅 a trav茅s del proceso de pago general. El proceso que voy a explicar es de muy alto nivel, pero incluso con esto, podr谩 comprender lo que debe hacer para crear un pago. Si desea obtener m谩s informaci贸n sobre lo que realmente est谩 sucediendo detr谩s de escena, consulte nuestra Documentaci贸n de la plataforma Pi. Ahora comencemos.

A lo largo del proceso, participan esencialmente 4 partes. Su aplicaci贸n, su servidor de aplicaciones, los servidores Pi y la cadena de bloques Pi. El punto m谩s importante a recordar es que todos ellos deben estar completamente sincronizados sobre el estado de un pago para evitar posibles condiciones de carrera. Si algo sale mal, un usuario puede pagar por un art铆culo que ya se le entreg贸 a otra persona, o un usuario puede pagar dos veces por un art铆culo porque el proceso se interrumpe. Para evitar tales casos, el Pi Core Team ha implementado un protocolo como parte del Pi SDK y no tiene que preocuparse en absoluto.

Con Pi SDK, crear un pago en Pi Apps es muy sencillo. Echemos un vistazo a la funci贸n createPayment. Toma 2 argumentos, que son un objeto paymentData y un objeto de funciones de devoluci贸n de llamada. El objeto paymentData se compone de tres elementos. Cantidad a pagar, nota para los usuarios y metadatos para su propio uso. Si falta alguno de estos, obtendr谩 un error.

onReadyForServerApproval es una funci贸n que se llama cuando la identificaci贸n de pago est谩 lista. Con esta funci贸n, debe pasar la identificaci贸n de pago y otros datos relevantes a su servidor de aplicaciones. Luego, en su servidor, debe reservar un art铆culo para el usuario que est谩 a punto de comprarlo y hacerle saber al servidor Pi que est谩 listo para continuar. En otras palabras, debe asegurarse de que su servidor est茅 al tanto del pago actual a trav茅s de esta funci贸n.

onReadyForServerCompletion es una funci贸n que se llama despu茅s de que la transacci贸n de la cadena de bloques se ha enviado a la cadena de bloques Pi. Su trabajo es nuevamente pasar cualquier dato relevante a su servidor de aplicaciones. En su servidor, puede verificar el pago y entregar el art铆culo que estaba reservado para el usuario. Al final, debe completar el pago informando al servidor Pi que recibi贸 el pago y entreg贸 el art铆culo. Las otras 2 funciones son funciones onCancel y onError. Como sugieren sus nombres, son funciones que se invocar谩n cuando se cancele el pago y cuando se produzca un error.

No olvidemos la funci贸n onIncompletePaymentFound que vimos en el video anterior. Para recordarte, esta funci贸n se encarga de completar cualquier pago incompleto. Quiz谩s se pregunte por qu茅 necesita implementar esta funci贸n. Existe la posibilidad de que un proceso de pago se interrumpa inesperadamente. Un usuario podr铆a perder la conexi贸n a Internet, la aplicaci贸n podr铆a fallar o el servidor podr铆a no responder. Si el proceso de pago falla antes de que el usuario pague, entonces est谩 bien. El usuario solo necesita comenzar el proceso nuevamente. Por supuesto, necesita limpiar los pedidos obsoletos en su servidor. Pero, 驴qu茅 pasa si el usuario ya pag贸 y, de repente, el proceso termina sin completarse correctamente? Ah铆 es donde entra esta funci贸n y juega un papel. El Pi SDK detectar谩 dicho pago cuando el usuario est茅 autenticado y cuando un usuario intente realizar un nuevo pago, y si encuentra un pago incompleto, solicitar谩 a su aplicaci贸n que complete el pago. Bien, vamos a implementar las funciones en un minuto. Pero hay un paso m谩s que no puede olvidar, que es obtener la clave API.

Suponiendo que haya registrado su aplicaci贸n en el portal de desarrolladores, generemos la clave API, si a煤n no lo ha hecho. Seleccione su aplicaci贸n en la parte inferior, y si toca el bot贸n 芦obtener clave api禄, puede crear una nueva clave. Guarde la clave antes de cerrar la ventana. Con esta clave, puede acceder a nuestros puntos finales y actualizar el estado del Pago.

Volvemos a nuestra aplicaci贸n de demostraci贸n y ahora vamos a implementar las funciones de devoluci贸n de llamada. Por el bien del tiempo, he preparado el fragmento de c贸digo. Completemos esto juntos. Ahora todos sabemos qu茅 es esto. Lo que quiere hacer aqu铆 es llamar a su servidor para llegar a nuestro punto final desde su servidor. Tenga en cuenta que esta aprobaci贸n de barra inclinada es solo una ruta arbitraria que estoy usando como ejemplo. Nuevamente, para completar el pago, debe llamar a su servidor para llegar a nuestro punto final. Las dos 煤ltimas funciones son para su propio uso. Cuando se cancele el pago, m谩rquelo como cancelado en su servidor tambi茅n. Tambi茅n maneje el error como quiera.

Ahora completemos el backend. En esta demostraci贸n, estoy ejecutando el servidor de nodos, pero puede elegir el backend que prefiera. Tambi茅n tenga en cuenta que la implementaci贸n real depende de usted. Solo estoy demostrando un ejemplo aproximado para ayudarlo a comprender el proceso. Primero, veamos la ruta de aprobaci贸n. Cuando se crea el pago, debe reservar un art铆culo para el usuario y asignar el PaymentId al pedido actual. Luego, aseg煤rese de presionar el punto final de aprobaci贸n para aprobar el pago. Lo mismo ocurre con la ruta completa. Puede verificar el pago si lo desea, entregar el art铆culo al usuario, marcar el pedido como pagado y completar el pago pulsando el punto final completo. No debemos olvidar la ruta incompleta. Procese el pago incompleto y llegue al punto final completo. Aunque me estoy saltando aqu铆, no olvide manejar la ruta de cancelaci贸n tambi茅n.

Ahora que el c贸digo est谩 listo, veamos el flujo desde el principio.聽Tan pronto como toco el bot贸n, comienza el flujo de pago.聽Puedo ver la p谩gina siguiente solo si el pago se aprueba desde el servidor de la aplicaci贸n.聽Luego puedo revisar los detalles y, si creo que es correcto, usar茅 mi frase de contrase帽a para firmar y enviar la transacci贸n a la cadena de bloques Pi.聽Ahora se env铆a la transacci贸n y estamos esperando que el servidor de la aplicaci贸n complete el flujo de pago.聽Cuando el servidor de la aplicaci贸n finalmente completa el pago, puedo ver este resultado, y este es el final de la demostraci贸n.聽Gracias por ver.

Fuente: https://pinetwork-official.medium.com/hackathon-workshop-transcripts-86367175ebb3

Deja un comentario