Skip to content

Commit

Permalink
Post: Notificação automática da Twitch para o Discord
Browse files Browse the repository at this point in the history
  • Loading branch information
Yagasaki7K committed Mar 18, 2024
1 parent 5128ed3 commit 34585a8
Show file tree
Hide file tree
Showing 15 changed files with 168 additions and 1 deletion.
2 changes: 2 additions & 0 deletions blog/2023-08-16-faq.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ title: Frequently Asked Questions
image: https://images.unsplash.com/photo-1591013078076-42ae16047f45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80
authors: [yagasaki]
tags: ['Javascript', 'Programação', 'Desenvolvimento', 'Emprego', 'Iniciante']
description: "Eu vi recentemente que muitas pessoas me procuram com as mesmas perguntas, como faço para conseguir um emprego, pode me ajudar
com tal projeto, porque você é desenvolvedor de Javascript, resolvi então separar essas perguntas e responder todos que me veio ..."
---

![](https://images.unsplash.com/photo-1591013078076-42ae16047f45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80 "WebFactory Ltd")
Expand Down
2 changes: 2 additions & 0 deletions blog/2023-08-22-integrando-rocketchat.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ title: Integrando seu chat com o Rocketchat Omnichannel
image: https://images.unsplash.com/photo-1614728263952-84ea256f9679?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2016&q=80
authors: [yagasaki]
tags: ['RocketChat', 'API', 'Webhook']
description: "Algumas pessoas que me conhece sabe que eu já trabalhei e até os dias de hoje trabalho com Rocketchat, é uma ferramenta
fundamental para ter uma ampla comunicação com o cliente, se tratando de ecommerce, ele é simplesmente fantástico ..."
---


Expand Down
1 change: 1 addition & 0 deletions blog/2023-08-27-rocketchat-comandos-uteis.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ title: Guia de Comandos Rocketchat para Iniciantes
image: https://images.unsplash.com/photo-1516849841032-87cbac4d88f7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80
authors: [yagasaki]
tags: ['RocketChat', 'API', 'Webhook', 'Iniciante']
description: "O Rocketchat é uma plataforma de comunicação poderosa que oferece uma variedade de recursos e funcionalidades para facilitar a comunicação e colaboração entre equipes. Se você está começando ou precisa de ajuda para se orientar nas funcionalidades ..."
---

![](https://images.unsplash.com/photo-1516849841032-87cbac4d88f7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80 "SpaceX")
Expand Down
1 change: 1 addition & 0 deletions blog/2023-08-30-guia-detalhado-rocketchat.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ title: Guia Detalhado - Configuração do Rocketchat no Azure com Funcionalidade
image: https://plus.unsplash.com/premium_photo-1674082012152-fb856017c4b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80
authors: [yagasaki]
tags: ['RocketChat', 'API', 'Webhook', 'Azure', 'Omnichannel']
description: "Este guia aborda o processo detalhado de instalação e configuração do Rocketchat em uma máquina virtual Ubuntu na plataforma Microsoft Azure - pode funcionar em outras plataformas, mas não foi testado como Google Cloud Plataform, Heroku e outros ..."
---

![](https://plus.unsplash.com/premium_photo-1674082012152-fb856017c4b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80 "Unsplash+")
Expand Down
1 change: 1 addition & 0 deletions blog/2023-09-05-descomplicando-context-react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ title: ContextAPI - Como criar, como usar e como alimentar para iniciantes
image: https://images.unsplash.com/photo-1593663922663-34cbd6671eae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1931&q=80
authors: [yagasaki]
tags: ['Context API', 'React', 'Desenvolvimento', 'Programação']
description: "Neste artigo abordaremos um assunto bastante interessante no React chamado context, que disponibiliza uma maneira de passar os dados entre a árvore de componentes sem precisar passar props manualmente em cada nível ..."
---

![](https://images.unsplash.com/photo-1593663922663-34cbd6671eae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1931&q=80 "Mark König")
Expand Down
1 change: 1 addition & 0 deletions blog/2023-09-11-bun-e-sua-versao.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ title: "Bun, o compilador JavaScript mais rápido do mundo é lançado oficialme
image: https://images.unsplash.com/photo-1592811773343-9abf0b1a6920?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80
authors: [yagasaki]
tags: ['Javascript', 'Desenvolvimento', 'Bun']
description: "Compiladores são programas de computador que convertem código-fonte escrito em uma linguagem de programação em código-objeto escrito em uma linguagem de máquina ou seja, um exemplo para quem está familiarizado com Javascript, o Node é um compilador Javascript ..."
---

![Cesar Carlevarino Aragon](https://images.unsplash.com/photo-1592811773343-9abf0b1a6920?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80)
Expand Down
1 change: 1 addition & 0 deletions blog/2023-10-06-primeiro-passos-jest.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ title: Primeiros passos com Jest, o framework de teste Javascript
image: https://jestjs.io/pt-BR/img/opengraph.png
authors: [yagasaki]
tags: ['Jest', 'Teste', 'JavaScript']
description: "O Jest é um framework de teste JavaScript popular que é usado para escrever testes unitários, testes de integração e testes de ponta a ponta. Ele é fácil de configurar e usar, e oferece uma variedade de recursos para ajudar os desenvolvedores a escrever testes de alta qualidade ..."
---

![https://jestjs.io/](https://jestjs.io/pt-BR/img/opengraph.png)
Expand Down
1 change: 1 addition & 0 deletions blog/2023-11-08-como-posso-aprender-programacao.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ title: Como posso aprender programação em 2024
image: https://images.unsplash.com/photo-1587620962725-abab7fe55159?q=80&w=1931&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
authors: [yagasaki]
tags: ['Programação', 'Desenvolvimento', '2024']
description: "A programação é uma habilidade valiosa e altamente procurada nos dias de hoje. Se você está interessado em ingressar nesse emocionante mundo da tecnologia, é natural se perguntar por onde começar. Este artigo explora as diferentes trilhas da programação, especificamente ..."
---
![James Harrison](https://images.unsplash.com/photo-1587620962725-abab7fe55159?q=80&w=1931&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)

Expand Down
1 change: 1 addition & 0 deletions blog/2023-12-09-taekwondo-black-belt.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ slug: "taekwondo-black-belt"
image: "https://images.unsplash.com/photo-1525198104776-f6e8a873f9b7?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
authors: [yagasaki]
tags: ['Out of Context', 'Taekwondo']
description: "Neste trabalho de conclusão, exploraremos os diversos fatores e benefícios da prática do Taekwondo. Abordaremos a rica história da modalidade e os valores que permeiam tanto o tatame, por meio da hierarquia, técnicas e desenvolvimento mental, quanto o ambiente ..."

---
![Leslie Jones](https://images.unsplash.com/photo-1525198104776-f6e8a873f9b7?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
Expand Down
3 changes: 3 additions & 0 deletions blog/2023-12-12-restapi-vs-graphql.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ title: "RestAPI vs GraphQL - Prós, Contras e Qual Usar?"
image: "https://images.unsplash.com/photo-1551632436-cbf8dd35adfa?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
authors: [yagasaki]
tags: ['GraphQL', 'RestAPI']
description: "Ultimamente ando sim, usando muito RestAPI, mais do que já usei GraphQL na vida. Acredito que a única vez em que usei, foi
durante minha experiência na Stone para fazer comunicação com bot e tudo mais ..."

---
![Louis Hansel](https://images.unsplash.com/photo-1551632436-cbf8dd35adfa?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)

Expand Down
1 change: 1 addition & 0 deletions blog/2023-12-17-rfc-method.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ title: "Dimensionando equipes de engenharia por meio de RFCs: anotando as coisas
image: "https://images.unsplash.com/photo-1512758017271-d7b84c2113f1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
authors: [yagasaki]
tags: ['RFCs', 'Engineering Teams']
description: "Recentemente, tenho conversado com pequenas e médias empresas, compartilhando as melhores práticas de engenharia que vejo usarmos na Uber, que eu recomendaria que qualquer empresa de tecnologia adotasse à medida que cresce. O único tópico que mais levanta as ..."
---

![Daria Nepriakhina 🇺🇦](https://images.unsplash.com/photo-1512758017271-d7b84c2113f1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
Expand Down
2 changes: 2 additions & 0 deletions blog/2024-01-20-curso-de-kombat-taekwondo.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ title: Kombat Taekwondo Referee Siminar Brazil, Seminário de Desenvolvimento de
image: "https://images.unsplash.com/photo-1598518619776-eae3f8a34eac?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
authors: [yagasaki]
tags: ['Out of Context', 'Taekwondo']
description: "A metodologia do Kombat Taekwondo é criar alguém de referência no Taekwondo. Quando se menciona
um atleta de competição em UFC, em Boxe ou qualquer outro esporte sempre irão mencionar algumas ..."
---

![Sam Moghadam Khamseh](https://images.unsplash.com/photo-1598518619776-eae3f8a34eac?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
Expand Down
1 change: 1 addition & 0 deletions blog/2024-02-17-introducao-ao-codigo-aberto.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ title: Curso de Introdução e Contribuição ao Código Aberto
image: "https://images.unsplash.com/photo-1647166545674-ce28ce93bdca?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
authors: [yagasaki]
tags: ['Open Source', 'Código Aberto', 'Comunidade', 'Curso']
description: "Bem-vindo ao curso \"Introdução ao Código Aberto\"! Este curso abrangente irá guiá-lo pelo fascinante mundo do código aberto e ajudá-lo a se tornar um contribuidor ativo. Ao final deste curso, você deve ter uma compreensão sólida de como encontrar"
---

![Praveen Thirumurugan](https://images.unsplash.com/photo-1647166545674-ce28ce93bdca?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Cultivar a Semente ou usar um Kit de Ferramentas?
image: "https://images.unsplash.com/photo-1593642532842-98d0fd5ebc1a?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
authors: [yagasaki]
tags: ['Tips', 'Mindset', 'Soft Skills']
description: "Neste artigo, exploraremos duas abordagens distintas para lidar com desafios e projetos complexos, utilizando a analogia do processo de desenvolvimento com dois modelos diferentes: o Modelo 'Cultivar a Semente' e o Modelo 'Kit de Ferramentas'".
description: "Neste artigo, exploraremos duas abordagens distintas para lidar com desafios e projetos complexos, utilizando a analogia do processo de desenvolvimento com dois modelos diferentes: o Modelo \"Cultivar a Semente\" e o Modelo \"Kit de Ferramentas\"."
---

![Dell](https://images.unsplash.com/photo-1593642532842-98d0fd5ebc1a?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
Expand Down
149 changes: 149 additions & 0 deletions blog/2024-03-18-notificacao-automatica-twitch.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
---
slug: "notificacao-automatica-da-twitch-para-o-discord"
title: "Notificação automática da Twitch para o Discord"
image: "https://images.unsplash.com/photo-1527334919515-b8dee906a34b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
authors: [yagasaki]
description: >
Neste artigo, irei te ensinar a enviar notificação no seu canal do Discord para todo o momento em que sua live estiver online, claro que recomendo que seja a sua live ou de alguém muito conhecido, não para meios comerciais, por conta da quantidade de uma applet/receita dentro da plataforma - no máximo dois na free tier.
tags: ['Discord', 'Twitch', 'Webhook']

---

![Caspar Camille Rubin](https://images.unsplash.com/photo-1527334919515-b8dee906a34b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)

Neste artigo, irei te ensinar a enviar notificação no seu canal do Discord para todo o momento em que sua live estiver online,
claro que recomendo que seja a sua live ou de alguém muito conhecido - não para meios comerciais - por conta da quantidade
de uma applet/receita dentro da plataforma - no máximo dois na free tier.

## Parte 1 - Registrar no IFTTT
Acesse [https://ifttt.com/](https://ifttt.com/) e crie uma conta (se ainda não tiver uma)

## Parte 2 - Criar um Webhook do Discord
- Encontre o canal do Discord para o qual você gostaria de enviar os tweets.
- Nas configurações desse canal, encontre a opção Webhooks e crie um novo webhook.
**Observação: Este URL deve ser mantido _privado_. Permite que qualquer pessoa escreva mensagens nesse canal específico usando esse URL específico.** Mantenha-o seguro!

![WebhookDiscord](http://i.imgur.com/PZE2wFu.png)
- Nomeie o webhook como quiser e fique à vontade para alterar a imagem de perfil genérica. Escolhi [este ícone](https://cdn1.iconfinder.com/data/icons/micon-social-pack/512/twitch-128.png) porque se encaixa bem no círculo.
- Copie o URL para algum lugar e mantenha-o à mão para a próxima etapa.

### Parte 3 - Criar um novo applet/receita no IFTTT
1. Acesse [aqui](https://ifttt.com/create) para criar um novo "Applet".
2. Clique no grande azul "[+] This" e escolha "Twitch" (use a barra de pesquisa para encontrá-lo rapidamente).
3. Conecte sua conta, se necessário.
4. Escolha "Nova transmissão iniciada por você" (deve ser a segunda opção da esquerda para a direita).
5. Clique no grande azul "[+] That" e escolha "Webhooks".
6. Escolha "Fazer uma solicitação web" (deve ser a única opção).
7. Preencha os seguintes detalhes:
- **URL:** _[seu URL da "parte 2" acima]_
- **Método:** POST
- **Tipo de conteúdo:** `application/json`
- **Corpo:** _[veja o trecho abaixo]_
8. Clique em "Criar ação".
9. Pronto!

#### Trecho para o "Corpo"
Os webhooks são super personalizáveis e permitem criar visuais bastante detalhados. No entanto, seu formato também é um pouco complexo de acertar sem testes extensivos, então aqui está um modelo que seria útil para a maioria das pessoas:

```json
{
"content": "{{ChannelName}} foi ao vivo no Twitch",
"embeds": [{
"title": "{{ChannelUrl}}",
"url": "{{ChannelUrl}}",
"color": 6570404,
"footer": {
"text": "{{CreatedAt}}"
},
"image": {
"url": "{{StreamPreview}}"
},
"author": {
"name": "{{ChannelName}} está transmitindo agora"
},
"fields": [
{
"name": "Jogando",
"value": "{{Game}}",
"inline": true
},
{
"name": "Iniciado em (fuso horário do streamer)",
"value": "{{CreatedAt}}",
"inline": true
}
]
}]
}
```

Este trecho que produzimos, irá criar uma notificação personalizada como abaixo - usamos o canal do xQcow como exemplo:

<p align="center">
<img src="https://gist.githubusercontent.com/smiley/78c1c2a57d17a179a978a1438b389710/raw/screenshot_discord_webhook_template.png"/>
</p>

### Mensagem Personalizada
Caso queira ter uma mensagem personalizada para alguma categoria, troque a variável pela mensagem que desejar.

Um exemplo, é substituir o content para aquilo que quiser.

Ao invés de `{{ChannelName}} foi ao vivo no Twitch`, mudaremos para `{{ChannelName}} está ao vivo no Twitch!`, por exemplo.

## Mostrar sua foto de perfil da Twitch no incorporado (avançado)
Se você deseja mostrar sua foto de perfil do Twitch na caixa:

1. Acesse o Twitch
2. Clique com o botão direito do mouse em sua foto de perfil no canto superior direito:

<p align="center">
<img src="https://gist.githubusercontent.com/smiley/78c1c2a57d17a179a978a1438b389710/raw/screenshot_twitch_userarea.png"/>
</p>

3. Clique em "Copiar endereço da imagem"
4. Cole esse endereço neste blob em vez de `<URL_DA_IMAGEM>`:

```JSON
"thumbnail": {
"url": "<URL_DA_IMAGEM>"
},
```

1. Cole esse blob abaixo da área image no blob principal, para que essa parte mude de:

```JSON
"footer": {
"text": "{{CreatedAt}}"
},
"image": {
"url": "https://static-cdn.jtvnw.net/previews-ttv/live_user_{{ChannelName}}-1280x720.jpg"
},
"author": {
"name": "{{ChannelName}} está transmitindo agora!"
},
```

Para isso:

```JSON
"footer": {
"text": "{{CreatedAt}}"
},
"image": {
"url": "https://static-cdn.jtvnw.net/previews-ttv/live_user_{{ChannelName}}-1280x720.jpg"
},
"thumbnail": {
"url": "<URL_DA_IMAGEM>"
},
"author": {
"name": "{{ChannelName}} está transmitindo agora!"
},
```

**Observação**: O endereço da imagem que você acabou de usar para sua foto de perfil do Twitch pode parar de funcionar se você mudar sua foto. Então é
recomendado que pegue a imagem URL do seu perfil do Twitch - toda vez que alterar - e cole no blob principal.

## Créditos

- Este guia foi adaptado deste [guia do YouTube para Discord via IFTTT](https://gist.github.com/Godimas/ae8e7c7cbd6236622c777d6bcb7a6748).
- O ícone do webhook do Twitch é cortesia da FIVEicons LLC e está disponível sob uma licença CC-BY 2.5 aqui: [https://www.iconfinder.com/icons/318551/twitch_twitch.tv_icon](https://www.iconfinder.com/icons/318551/twitch_twitch.tv_icon).

0 comments on commit 34585a8

Please sign in to comment.