Aplicación GitHub para construir formularios usando Typeform y Probot

GitHub es un sitio web de desarrollo de software basado en la nube que utiliza Git como control de versiones. Github es el embajador de la marca del desarrollo de software de código abierto y brinda a los desarrolladores la capacidad de colaborar en el desarrollo de software y también alojar el código fuente. El código se aloja como el contenido de un repositorio. A medida que aumenta el alcance de Github, las aplicaciones de Github han ayudado a reducir la complejidad del desarrollo, mantenimiento y administración de software.

Probot es un marco que permite construir aplicaciones Github. Tiene una rica biblioteca de métodos que puede implementar cualquier respuesta de evento de github. Typeform ayuda a crear formularios atractivos. Typeform también tiene una plataforma API para la creación, eliminación y manipulación de formularios programáticos.

En este artículo, usaremos Probot para crear una aplicación de Github e integrarla con un typeform.
Software opcional que se usará: Postman (para experimentar y trabajar con la API de Typeform)
Marco utilizado: Probot
También usaremos el módulo probot-commands y request npm para ingresar el comando.

Configuración inicial de la aplicación Github

Para configurar la aplicación github, uno puede revisar la documentación del probot. Como la configuración no es el tema central de este artículo, vamos a remezclar una aplicación Probot en Glitch . El enlace para esta configuración se puede encontrar aquí .
El README.md en el remix de Glitch tiene una guía fantástica para configurar la aplicación.

Para verificar la configuración adecuada de la aplicación, ejecute el código predeterminado que se proporcionó con la instalación de la aplicación creando un problema en el repositorio (suponiendo que la aplicación esté instalada en el repositorio).
glitch-init-setup-1

Salida: El bot (aplicación github) debe escribir un comentario como el siguiente.
El evento de problema abierto hace que los bots comenten el hilo.

Si este no es el resultado, significa que la aplicación no está instalada correctamente y se deben consultar los documentos aquí .

Una vez que se completa la configuración de la aplicación y se realizan las pruebas iniciales (para garantizar que la aplicación esté configurada correctamente y funcione), es hora de instalar los módulos npm que necesitaremos.

Instalar dependencias/módulos

Necesitaremos comandos de probot y un módulo de solicitud para esta aplicación. Para instalarlos, vaya al archivo ‘package.json’ desde el panel de navegación en el lado izquierdo. En la esquina superior izquierda del editor, busque un botón con la etiqueta ‘ Add Package‘. Usando este botón, agregue ‘ probot-commands‘ y ‘ request‘ a la aplicación.
Después de agregar estos dos módulos, vaya al archivo ‘index.js’ (usando el panel de navegación en el lado izquierdo) y agregue

var request = require("request");
const commands = require("probot-commands");

encima del archivo index.js.

dependencies-added-to-indexjs-file

Configuración de Typeform

Usaremos Typeform para esta aplicación. Necesitaremos un ‘ Token de acceso personal ‘ para usar Typeform en nuestra aplicación.

  1. Primero, vaya a Typeform y regístrese/inicie sesión.
  2. Ahora, vaya a Configuración y luego a ‘Tokens de acceso personal’ en la sección Perfil.
  3. Alternativamente, haga clic directamente aquí y configure los tokens.
  4. El token que genera debe copiarse y almacenarse en algún lugar para la persistencia. Use este token y agréguelo al archivo ‘.env’ en la aplicación Glitch

env-setup-for-typeform

Ahora que la aplicación está funcionando, los comandos de probot y los módulos de solicitud están configurados y el typeform está integrado correctamente, veremos el código.

Código:
encuentre el archivo index.js aquí (tenga en cuenta que estos son fragmentos de código y que copiar y pegar exactamente este código podría no funcionar).

Para esta demostración, para configurar la ‘solicitud’ (que debe realizarse en los servidores de Typeform para crear el formulario), se utiliza Postman (el software). Además de esto, esta referencia se utiliza para crear el formulario.

mirando el código (consulte index.js desde aquí ) :

// These two lines 'require' the modules to the app.
var request = require("request");
const commands = require("probot-commands"); 
  
module.exports = app => {
 // all the future code goes here
   
}; 
// this acts as a kind of wrapper 
// in which all the code that runs the
// function(adding labels, creating forms) of 
// the app goes.
  
app.on(["issue_comment.created", "issues.opened"], async context =>
{ 
    // all the future code goes here
    // this block comes inside the 'module.exports' 
    // block described above
    // app.on executes code in response to events on github.
    // these events are connected to webhooks which trigger these 
    // app.on functions
    // this code executes in response to when a 'issue comment 
    // is created' or when a 'new issue is opened'. They can be 
    // listened to individually as well, by using two 
    // separate 'app.on' listeners.
    // the 'context' contains all the details related to 
    // the event that fired on github
});
  
if (context.payload.comment.user.type === "Bot") 
{
   context.log("comment user type is bot, returning..");
   return;
} 
  
// this code block checks to see if the comment is 
// made by a Bot or not. If the comment is made by a bot, the 
// function returns(to prevent bot from running on its own 
// comments, and going into some kind of a 
//(potentially)loop)
  
var createform;
if ((context.payload.issue.author_association === "OWNER") ||
    (context.payload.issue.author_association === "COLLABORATOR")) 
{
 // stuff related to the form goes here
} 
  
// we check for the appropriate credentials here. If the user
// is the 'OWNER'(of the repo/org) or the 'COLLABORATOR', then 
// only proceed towards making a form..
  
// inside the 'stuff related to the form goes here'
commands(app, "createform", (context, command) =>
{
    context.log("entered createform commands");
    createform = command.arguments.split(/[\s] */);
    var createformlength = createform.length;
    context.log(createform);
   
// ...more code here
}
  
// in this code snippet, we listen for a createform 
// 'slash command', as it is called. check the below 
// image to see what a command like this looks.
   
// to process this 'slash command', probot-commands module is used.
// explanation: context.log() //acts as a logging tactic
// command.arguments.split split the 'slash command' 
// into individual values and put them in an array. 
// [\s] helps to // split the command on a 'space'. 
// For example, in the image above, we obtain as output of 
// context.log(createform): ['formtitle1', 'field1title', 
// 'multiple_choice', 'label1', 'label2']

slash command github snip

// the form code block. Find the explanation for 
// each snippet as the corresponding comment. 
// This bit of code is derived from the Postman.
{
    var options = {
        method: "POST", 
          
        // POST method to create 
        // the form, according to typeform api
        url: "https://api.typeform.com/forms", //url
        headers: {
            Accept: "application/json",
            "Content-Type": [
                "application/x-www-form-urlencoded",
                "application/json"
            ],
            Host: "api.typeform.com",
            Authorization: `${process.env.TYPEFORM_KEY}`, 
              
            // here is the personal access token generated earlier
            Cookie: "device_view=full"
        },
        // to know more details about below code field, 
        // go to "https://developer.typeform.com/create/reference/create-form/"
        body: JSON.stringify({
            title: createform[0], 
              
            // value = "formtitle" (consult the image 
            // above of github comment)
            settings: {
                language: "en", // language of form
                is_public: true, // so that everyone can see and respond
                progress_bar: "percentage",
                show_progress_bar: true
            },
            welcome_screens: [{
                ref: "nice-readable-welcome-ref", 
                  
                // used to uniquely refer
                // the welcome_screens field
                title: "Welcome", // title of welcome screen
                properties: {
                    description: 'description ' + context.
                    payload.comment.url,
                      
                    // links back to github issue 
                    // comment to get more knowledge about 
                    // the reason to create this form. link to the 
                    // comment that created this form
                    show_button: true,
                    button_text: "start"
                }
            }],
            thankyou_screens: [{
                ref: "nice-readable-thank-you-ref",
                title: "Thank you", // final screen
                properties: {
                    show_button: true,
                    button_text: "start",
                    button_mode: "redirect",
                    redirect_url: "https://www.typeform.com",
                    share_icons: false
                }
            }],
            fields: [
                  
            // actual field that will record response. 
            // is an array of objects, each obj represents 1 field
                {
                ref: "field1", 
                  
                // to uniquely identify 
                // first field(for programmatically manipulation)
                title: createform[1], 
                  
                // value = "field1title" 
                // (consult the image above of github comment)
                type: createform[2], 
                  
                // value = multiple-choice. 
                // sets the type of question
                properties: {
                    description: "field1 desc",
                      
                    // to provide more info about field
                    randomize: true,
                    allow_multiple_selection: true,
                    allow_other_choice: true,
                    vertical_alignment: false,
                    choices: [
                        { label: createform[3], ref: "field1_label1_ref" }, 
                        // label1, value = label1
                          
                        { label: createform[4], ref: "field1_label2_ref" } 
                        // label2, value = label2
                    ]
                }
            }, ]
        })
    };
    request(options, function(error, response) 
    { 
        // send the request to typeform servers to create form
        if (error) 
        {
            const params1 = context.issue({ 
            body: 'form not made. error processing command' 
            }
              
)           // if error, comment
            return context.github.issues.createComment(params1);
              
            // if error, comment
        };
        console.log(response.body);
        const params2 = context.issue(
        { 
            body: response.body._links.value }); 
              
            // if success, comment the link to form
        return context.github.issues.createComment(params2);
        // if success, comment the link to form
    });
}

El formulario se construye.
formulario-creado-registro

Alcance/actividad futura para usted:

  • agregue código para dejar de aceptar respuestas al formulario usando ‘ probot-scheduler
  • piensa en una forma más intuitiva de utilizar la API typeform

Publicación traducida automáticamente

Artículo escrito por Parikshit Hooda y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *