DEV Community: Milena Emmert

[Boost]

Milena Emmert — Wed, 18 Dec 2024 12:14:37 +0000

Extracting Pipefy API data into Power BI with M language

Milena Emmert ・ Dec 18 '24

Extracting Pipefy API data into Power BI with M language

Milena Emmert — Wed, 18 Dec 2024 02:40:11 +0000

Have you ever tried making a web request to https://api.pipefy.com/graphql in Power BI and it didn’t work?

Pipefy uses a GraphQL API that requires a Bearer token in the Authorization header to access the data (you can generate one inside your Pipefy account under Account preferences > Personal access token).

After several failed attempts, I realized that Power Query wasn’t handling the Authorization header very well, requiring anonymous authentication. I made a few adjustments, and more errors appeared:

Error 404 (which I didn’t understand why)
The Authorization header is only supported during anonymous connection
And then, the anonymous connection:

I had a short deadline, and the solution I found was using M Language.

In Power Query:

Open a Blank query > right click > Advanced editor.

Try the script below:

let
    url = "https://api.pipefy.com/graphql",
    token = "Bearer YOUR_TOKEN_HERE",

    // Function to make the GraphQL request
    FetchPage = (cursor as nullable text) as record =>
        let
            queryBody = if cursor = null then
                "{ ""query"": ""query { allCards(pipeId: \""PIPE_ID_HERE\"", first: 40) { nodes { title updated_at due_date current_phase { name } fields { name value } } pageInfo { hasNextPage endCursor } } }"" }"
            else
                "{ ""query"": ""query { allCards(pipeId: \""PIPE_ID_HERE\"", first: 40, after: \""" & cursor & "\"") { nodes { title updated_at due_date current_phase { name } fields { name value } } pageInfo { hasNextPage endCursor } } }"" }",

            response = Web.Contents(
                url,
                [
                    Headers = [
                        #"Authorization" = token,
                        #"Content-Type" = "application/json"
                    ],
                    Content = Text.ToBinary(queryBody)
                ]
            ),

            jsonResponse = Json.Document(response),
            data = jsonResponse[data][allCards]
        in
            data,

    // Recursive function to iterate through all pages
    GetAllPages = (cursor as nullable text, accumulatedCards as list) as list =>
        let
            currentPage = FetchPage(cursor),
            currentCards = List.Transform(currentPage[nodes], each 
                [
                    title = _[title],
                    updated_at = _[updated_at],
                    due_date = _[due_date],
                    current_phase = _[current_phase][name],
                    fields = _[fields] 
                ]
            ),
            newCards = List.Combine({accumulatedCards, currentCards}),
            hasNext = currentPage[pageInfo][hasNextPage],
            nextCursor = currentPage[pageInfo][endCursor]
        in
            if hasNext then
                @GetAllPages(nextCursor, newCards)
            else
                newCards,

    // Calling GetAllPages function to retrieve all pages
    allCards = GetAllPages(null, {}),

    // Converting the list of records into a table
    resultTable = Table.FromRecords(allCards),

    // Extracting unique custom field names
    allFieldNames = List.Distinct(List.Combine(List.Transform(resultTable[fields], each List.Transform(_, each _[name])))),

    // Adding columns for each custom field
    resultWithFields = Table.TransformColumns(resultTable, {"fields", each 
    let
        // Create a record for each field
        fieldRecord = Record.FromList(
            List.Transform(allFieldNames, (fieldName) => 
                let
                    // Attempt to find the field value
                    selectedField = List.First(List.Select(_, (field) => field[name] = fieldName), null)
                in
                    if selectedField <> null then selectedField[value] else null  // Retorna o valor ou null
            ),
            allFieldNames
        )
    in
        fieldRecord
}),

    // Expanding custom fields into separate columns
    finalTable = Table.ExpandRecordColumn(resultWithFields, "fields", allFieldNames)
in
    finalTable

Considerations:

FetchPage

Makes the HTTP request to the API; uses pagination with the cursor to fetch data in parts (40 records per page).

cursor as nullable text

Used to handle pagination, indicating the position of the next page to be fetched.

first: 40

Defines the number of records retrieved per request (you can adjust this value as needed).

→ I chose 40 because it worked best for my request size and Pipe structure. Check out Limits and Best Practices in the documentation to decide what works best for you.

GetAllPages

Recursively calls FetchPage to fetch all pages until hasNextPage is false.

title, updated_at, due_date, current_phase...

These are some of the fields you can select and retrieve with the help of the Pipefy API documentation.

→ The documentation allows you to build your GraphQL queries by selecting the exact information you need. Once you have your query ready, you can ask gepeto to convert it to JSON format for you.

Final Result

The script converts all the data into a neat table in Power BI (you can expand it as needed, and the code will dynamically adjust).

If you have another solution, feel free to share it with me!

Até os ventos te sopram experiências 🍃

Milena Emmert — Mon, 03 Jun 2024 04:59:12 +0000

Logo pela manhã você já está navegando pela tela do seu whatsapp procurando a mensagem de bom dia da sua mãe (a única que você quer responder logo em meio a tantas outras), ao tempo que está mexendo no layout do seu micro-ondas para aquecer por 15 segundos aquele café que sobrou de ontem, e pedindo para a Alexa falar quais são os seus compromissos do dia. Veja bem, você realizou diversas interações com produtos, dispositivos e serviços e nem se deu conta disso.

— Com quantos produtos ou coisas você interagiu?
— Três! O zap, o micro, e a Alexa!

Pois é...

E o sistema operacional do seu celular?
E a notificação do aplicativo de clima que você limpou da tela em meio a esse caos todo e nem percebeu?
E o botão de ligar do micro-ondas que você tem que apertar com mais força que os outros porque ele já está mais gasto?
Ah, e a porta do micro-ondas que você abriu, foi fácil de abrir ou respingou um café por aí?

Aliás, por que será que a porta do micro-ondas abre para o lado e não como a de um forno de fogão?

Todas as coisas que você usou, a tela, o aplicativo, os botões, são interfaces projetadas para gerar a interação entre você e o produto, ou seja, estão no contexto de interface do usuário (user interface, UI). Cada toque na tela, cada botão pressionado, cada comando de voz, cada momento de raiva que você passou, contribuem para a sua experiência num geral, e é isso que chamamos de experiência do usuário (user experience, UX).

A UX vai além da funcionalidade básica do produto. É necessário que os conceitos de facilidade de uso (usabilidade), intuitividade e eficiência sejam explorados nesse universo. Necessitamos de uma tela bonita? Na maioria das vezes sim! A estética sempre nos atraiu e não é diferente agora, mas uma tela bonita que não consegue fazer com que o usuário atinja o objetivo final de uso não serve para nada. Uma UI bonita não é garantia de nada e agora me pego procurando um porquê para estar lembrando da Amazon...

Quantas vezes você, usuário de Android, já abriu a Play Store quando na verdade queria abrir o Google Maps? É a nossa intuitividade nos pregando uma peça. Mas o fato de deixarmos esses apps distantes um dos outros ou categorizá-los de forma diferente já ajuda, e isso está incluso na arquitetura da informação, algo que também é muito importante para uma boa UX.

Apesar de eu trabalhar com tecnologia e estar imersa nesse contexto praticamente o tempo inteiro, o que me motivou a escrever esse texto foi a disposição de objetos num laboratório de exames e vacinação.

→ A maioria dos exames de sangue exigem um tempo em jejum (e se você for esfomeado igual a mim, já sai quase desmaiando de fome). Muitos laboratórios têm colocado uma máquina de café com bolachinhas e frutas na saída, onde você pode desfrutar um cafezinho e um lanchinho.

É claro que um cafezinho "de graça" não se nega, e eu fui lá na salinha. Apesar do dia frio, a sala estava um forno, e quando vi a situação das pessoas tomando um café atrás do outro e fazendo um rancho de bolacha eu logo entendi o motivo de tornar a sala uma experiência de sauna.

Mas outra coisa me chamou mais atenção: a máquina tinha letras miúdas dizendo "Não é necessário colocar copos. A máquina já contém.". E ao lado da máquina estava um porta-copos gigante (que era pra ser utilizado no bebedouro de água) e todos que chegavam lá automaticamente tiravam um copo do porta-copos e enfiavam na máquina no lugar de onde saía o café, a máquina lançava outro copo entortando o copo que estava embaixo, derrubava o café, atrasava a fila... 🙃

Experiências mundanas um tanto divertidas e nada sustentáveis.

Como sou uma pessoa empática e um tanto metida, avisei uma pessoa responsável sobre a questão dos copos. Ah, sei lá, vai que eles nunca perceberam a situação.

Se vão tomar alguma providência, eu não sei.

Se de fato acontece aquilo todos os dias, também não sei. E aí entra a importância da coleta e análise de dados para direcionar nossas ações e soluções com o foco em problemas reais, e não desperdiçar nosso tempo porque uma garota com fome viu coisas que talvez foram só coincidências que acontecerem num sábado aleatório de uma manhã fria e cinzenta na capital do Paraná.

Agora eu deixo um questionamento: será que deixar a sala numa temperatura de sauna é um dark pattern que o laboratório utiliza para as pessoas tomarem menos café?

Afinal é um laboratório bem conceituado que pertence a uma rede de diagnósticos gigante, e que com certeza entende muito bem de UX. 😊

Será que deixar um aviso para as pessoas tomarem apenas um café e pegar apenas uma bolachinha não resolveria o problema? Ok, sempre tem aqueles que adoram bancar os espertinhos, mas eu ainda quero acreditar que a maioria das pessoas são boas e honestas e respeitariam o pedido.

E deixar o porta-copos onde estava, poderia ser relacionado com um site enfrentando problemas de arquitetura da informação?

Ou talvez seja só eu matutando coisas sem sentido, mas que quando vou observando a vida em diversos lugares, aparecem coisas tão sem sentido que eu só quero acreditar que devem ser propositais. 😬

Falando em dark patterns, estou com um alerta de uma configuração desnecessária no onedrive, porque por algum motivo a Microsoft quer que eu configure do jeito deles.

Bom, quis deixar esse registro por aqui apenas para lembrar que UX e UI não estão apenas em dispositivos virtuais. É legal observar a vida como ela é para podermos levar essas vivências para dentro do mundo virtual e aprimorar a experiência do usuário.

Inclusive, nessa situação entra em jogo várias heurísticas de Nielsen, como a Compatibilidade entre o sistema e o mundo real, quando nos tornamos mais empáticos ao realizar observações e conseguimos trazer boas perspectivas para dentro do virtual, e uma análise criteriosa para a Prevenção de erros, afinal enfiar um copo em uma máquina que não precisa copo parte do erro de alguém, pois a primeira informação que notei na máquina foi o contato para conserto, ou seja, observo o princípio da hierarquia do design visual sendo mal utilizado.

Experiência, experiência. Não sei se tu que leu essa viagem até aqui é mais rico em paciência ou se te falta consciência. (~~inspirado~~ roubado do Eduardo Bueno)

Até um dia, quem sabe, talvez! ⋆.˚🦋༘⋆

PNG, JPEG, SVG e GIF: quando usar cada uma delas + ferramentas

Milena Emmert — Fri, 17 Feb 2023 19:26:15 +0000

Quando estamos lidando com imagens, pode nos ocorrer a seguinte dúvida: “qual formato é o ideal?”, e a resposta é: “depende”! Depende do propósito do uso dessa imagem, do quanto de detalhe ela possui, se ela tem alguma transparência etc.

Vamos começar com o GIF, que é o mais fácil de ser diferenciado dentre essas quatro opções

O GIF (Graphics Interchange Format) é uma imagem animada, criada a partir de um trecho de um vídeo, ou pela união de imagens estáticas, ou uma animação produzida em um software como o Toon Boom Harmony ou o Adobe Animate. É claro que essas ferramentas vão exigir conhecimento para usá-las, mas deve ser divertido!

Já nós, reles pessoas sem aptidão para criar animações, utilizamos GIFs prontos disponíveis em sites como o GIPHY ou o TENOR. Até podemos criar nossos GIFs através de vídeos prontos nessas ferramentas, basta ir em GIF Maker no GIPHY ou em Criar, no Tenor.

Podemos arredondar as bordas de um GIF no imgtools.co:

Devemos ter em mente que a qualidade da imagem de um GIF acaba sendo prejudicada, pois o arquivo é bastante comprimido para que não demore a ser carregado.

No Whatsapp temos a opção de "converter" um vídeo para GIF, porém, não é bem o que o zap faz. Ele apenas reduz muito o tamanho e a qualidade do vídeo (perceba como a imagem da direita está bem mais pixelada). O "GIF convertido sqn" continua sendo um arquivo de vídeo mp4:

O arquivo original está com 1.66 MB e é um MP4, o arquivo gif-zap foi reduzido para 392 KB, mas continua sendo um MP4

Para converter de fato um vídeo para GIF, utilize ferramentas apropriadas como o Convertio.

Agora vamos falar sobre PNG e JPEG

Com o formato PNG (Portable Network Graphics), é possível comprimir a imagem sem que exista perda de qualidade. Também podemos colocar transparências:

Para remover o fundo de uma imagem, gosto muito de utilizar uma ferramenta chamada Remove BG, você pode instalar ele como plugin no Figma (é necessário setar uma API key, mas no site você consegue ela gratuitamente) ou utilizar o site diretamente.

O Remove BG acaba deixando a imagem um pouco pixelada, então você pode utilizar uma ferramenta de aprimorar a imagem, em muitos casos funciona:

A imagem da direita claramente está menos pixelada com uso de um melhorador de imagem

Algumas ferramentas: Upscale.media, PicWish, Zyro e Remini (que possui um app excelente para Android e IOS)

Em alguns casos a imagem pode ser bastante danificada por uma IA:

Aqui a imagem já estava com a qualidade bem ruim, a IA até conseguiu remover bastante a pixelagem, mas como ela tinha pouca informação devido a qualidade da imagem, meteu um olho com óculos e até brincos na orelha do meu irmão kkkk e o 1berto parece que ficou com um feijão no dente, quando na verdade é um dente de ouro 😂

Se você perceber que ao remover o fundo de uma imagem, a qualidade da imagem ficou ruim, e a IA não deu conta de melhorar ela, o ideal é remover o fundo manualmente. No Figma mesmo você pode fazer isso, é um tanto trabalhoso mas a qualidade fica melhor.

Veja nesse vídeo como remover o fundo utilizando o plugin e manualmente:

Tá, mas e qual a diferença entre o PNG e o JPEG?

O PNG você pode usar para imagens que possuem transparências e imagens que você deseja comprimir muito mas manter a qualidade (logos e ícones, por exemplo).

O JPEG (ou JPG, que significa Joint Photographic Experts Group), é o formato ideal para imagens fotográficas, sem textos ou transparências. Quando é comprimido, sofrerá danos na qualidade.

Meu site possui muitas imagens e está demorando para carregar, e agora?

Algumas ferramentas podem te ajudar comprimindo o tamanho das imagens: o pandinha TinyPNG e TinyJPG, Compress JPEG, entre outras. É sempre legal, para a mesma imagem, tentar em ferramentas diferentes, porque a qualidade pode ser superior numa em relação a outra, dependendo da imagem original.

Redimensione a sua imagem, você pode estar utilizando imagens que são bem maiores do que você realmente precisa. Lembre-se que redimensionar é diferente de comprimir. A compressão faz com que algumas informações sejam eliminadas, podendo causar perda de qualidade, enquanto que redimensionar significa diminuir a altura e largura (redução de pixels), e dessa forma ela mantém a qualidade.

Caso você tenha interesse, pode estudar a técnica de lazy loading (em breve pretendo trazer um artigo aqui sobre isso). O lazy loading faz com que as imagens que ainda não apareceram para o usuário não sejam carregadas, mas já existe um espaço reservado para elas. O iFood é um exemplo de aplicação que utiliza essa técnica, em alguns casos é tão rápido que quase não dá tempo de tirar print:

A primeira print foi tirada logo que a página foi aberta. Ao scrollar a página, é possível ver outros quadradinhos cinzas aparecendo, até que as imagens se carreguem por completo, pois a ideia é que as imagens só carreguem quando estiver dentro da área em que o usuário estiver vendo.

E afinal, o que são os SVGs?

Os SVGs (Scalable Vector Graphics) são gráficos vetoriais escaláveis. Por serem escaláveis, podem ser redimensionados sem perder a qualidade. Então qual o motivo de não utilizarmos sempre o SVG?

Em imagens com muitos detalhes, o formato SVG faz com que muitas coisas percam a textura, e com a riqueza de detalhes, o SVG que era pra ser um formato mais leve, acaba se tornando muito pesado.

Os SVG são ideais para gráficos, ícones e logotipos que precisam ser redimensionados em diferentes tamanhos sem perder a qualidade. Além disso, o formato SVG permite animações e interatividade. Abra um SVG no VS Code, ou no bloco de notas mesmo, tenho certeza que se você nunca viu, você vai se encantar! ^^

Veja como a textura dos pelos do coelhinho é afetada no SVG (abra a imagem em nova guia e dê um zoom, se precisar)

Aqui, por ter muitos detalhes, o SVG ficou muito mais pesado que o PNG

Você pode encontrar SVGs bem "limpinhos" no Google Fonts, no Hero Icons e no Tabler Icons. Também é válido dar uma olhadinha na aba community do Figma, lá você pode encontrar arquivos como esse.

Dicas extras:

Sempre esteja por dentro da licença das imagens que você pega por aí. Muitos sites como o Pexels, Freepik e Unsplash oferecem imagens gratuitas, mas mesmo assim muitas vezes é necessário dar créditos a pessoa proprietária. Imagens que você vai utilizar para fins pessoais podem ter licença de uso diferente se você quiser utilizar no seu trabalho (fins comerciais), por exemplo.

Para converter uma imagem, por exemplo, de JPEG para PNG, não basta renomear o arquivo com a extensão diferente. O seu sistema pode até tratar essa imagem como um PNG agora, mas a estrutura interna, ou seja, o conteúdo binário do arquivo não mudou, e ele continua sendo um JPEG. Utilize ferramentas como algumas citadas acima para realizar essa conversão.

Se você converter um PNG com transparência para JPEG, provavelmente a transparência no JPEG será substituída pela cor branca, isso porque o JPEG não suporta transparência.

Como estudar e aprender programação de forma mais eficaz?

Milena Emmert — Thu, 21 Jul 2022 13:42:00 +0000

Primeiro: Calma!

Quando estamos começando, aqueles montes de códigos confusos, um milhão de linguagens, mais um monte de termos técnicos (front-end, back-end, API, git, framework etc.), nos deixam assustados e perdidos! Isso é normal, e é muito comum em qualquer área em que decidimos nos aprofundar.

✅ Vá com calma, não se apegue a isso, pois aos poucos você vai entender o que cada termo desse significa, e tudo vai ficando mais claro!

A prática é muito importante!

Teoria é importante? Sim! Mas você precisa colocar ela em prática. Não tem jeito, praticar é a melhor forma de aprender a programar. Você precisa descobrir de qual forma você aprende melhor: se é ir fazendo a sua prática junto com a professora ou professor do curso, ou se é assistir a aula e depois tentar fazer sozinha ou sozinho.

✅ Para praticar ainda mais, você pode fazer o mesmo projeto do curso mas com algo que você gosta, do seu jeito! Por exemplo, se no curso foi ensinado a fazer a página da barbearia Alura, tente agora fazer uma página parecida, mas com algo que você gosta, um pet shop, uma loja de games, de filmes etc.

Não desista!

Entender que dificuldades são encontradas em qualquer profissão faz parte de nosso amadurecimento. Programar não é fácil, mas se torna menos difícil a cada dia que a gente se dedica um pouco mais. Tenha consistência nos estudos, crie uma rotina e estabeleça metas. Mas não se esqueça de descansar também!

✅ Quando estiver surtando que nem o gatinho por causa de um problema que não está conseguindo resolver, não diga que vai desistir. Vá fazer outra tarefa, dormir, lanchar, passear. Depois de um tempo você vai conseguir resolver o problema, e se não conseguir, procure alguém que possa te ajudar, a comunidade tech sabe bem como é passar por isso e está aí para te abraçar!

Dicas extras ✨

✅ monte um cronograma de estudos que se encaixe na sua realidade

✅ não pule etapas, se não entendeu um conteúdo, busque ajuda, pratique um pouco mais

✅ crie um networking, pessoas passam pelas mesmas dificuldades e aprender juntos facilita muito

✅ ensinar alguém, ou explicar em voz alta, ajuda a fixar o que aprendeu e até a entender algumas coisas que estavam complicadas antes

✅ comece uma tarefa e termine, e não fique migrando de linguagens sem antes ter aprendido nenhuma direito, você verá que depois que aprender uma, a segunda ficará bem mais fácil

✅ devore exercícios de lógica, tente solucioná-los de formas diferentes, eles irão te ajudar a ter a base muito melhor estruturada

✅está com dificuldades de começar a escrever um código? comece escrevendo um algoritmo em português mesmo!

Conteúdos extras ✨

Como estudar? - Alura Live
Produtividade para estudar
5 passos para aprender a programar
Algoritmos e Lógica de programação: O que são e qual a importância?

Quer fazer o download do conteúdo em .png? Clica aqui.