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