Pour les développeurs, Twitchat expose une API pour recevoir des événements et contrôler certaines fonctionnalités à distance.
Lisez sa documentation.
/search
/announce message
Créez un fichier data/credentials/credentials.json
et définissez le contenu suivant après avoir rempli les valeurs :
{
"server_port" : 3018 ,
"admin_ids" : [ " YOUR_TWITCH_USER_ID " ],
"csrf_key" : " " ,
"twitch_client_id" : " " ,
"twitch_client_secret" : " " ,
"twitch_redirect_uri" : " http://localhost:8080/oauth " ,
"twitch_scopes" : [
" chat:read+user:read:chat " ,
" chat:edit+user:write:chat " ,
" moderator:manage:announcements " ,
" moderator:manage:chat_messages " ,
" moderator:manage:shoutouts " ,
" whispers:read " ,
" user:manage:whispers " ,
" moderator:read:chatters " ,
" channel:read:redemptions " ,
" channel:manage:redemptions " ,
" channel:manage:polls " ,
" channel:manage:predictions " ,
" moderator:manage:chat_settings " ,
" channel:moderate " ,
" channel:manage:moderators " ,
" channel:manage:vips " ,
" channel:manage:raids " ,
" channel:manage:broadcast " ,
" channel:read:hype_train " ,
" channel:edit:commercial " ,
" channel:read:subscriptions " ,
" user:read:emotes " ,
" user:read:follows " ,
" moderator:read:followers " ,
" user:read:moderated_channels " ,
" user:read:blocked_users " ,
" user:manage:blocked_users " ,
" user:edit:broadcast " ,
" moderator:manage:banned_users " ,
" moderator:manage:automod " ,
" moderator:manage:shield_mode " ,
" moderator:manage:unban_requests " ,
" clips:edit " ,
" channel:read:ads " ,
" channel:manage:ads " ,
" moderator:manage:blocked_terms " ,
" moderator:manage:warnings " ,
" moderator:read:moderators " ,
" moderator:read:vips " ,
" moderator:read:suspicious_users " ,
" bits:read "
],
"spotify_client_id" : " " ,
"spotify_client_secret" : " " ,
"spotify_scopes" : " user-read-currently-playing user-modify-playback-state playlist-read-private playlist-modify-public playlist-modify-private " ,
"spotify_redirect_uri" : " http://localhost:8080/spotify/auth " ,
"patreon_client_id" : " " ,
"patreon_client_secret" : " " ,
"patreon_scopes" : " identity campaigns campaigns.members w:campaigns.webhook " ,
"patreon_redirect_uri" : " http://localhost:8080/patreon/auth " ,
"patreon_client_id_server" : " " ,
"patreon_client_secret_server" : " " ,
"patreon_redirect_uri_server" : " http://localhost:3018/api/patreon/serverauth " ,
"patreon_webhook_secret" : " " ,
"patreon_cipherKey" : " " , //64 chars
"tenor_secret" : " " ,
"youtube_key" : " path/to/key.json " ,
"youtube_scopes" : [ " https://www.googleapis.com/auth/youtube.readonly " , " https://www.googleapis.com/auth/youtube.force-ssl " ],
"google_key" : " path/to/key.json " ,
"paypal_client_id" : " " ,
"paypal_client_secret" : " " ,
"donors_remote_api_secret" : " " ,
"contact_mail" : " " ,
"discord_client_id" : " " ,
"discord_public_key" : " " ,
"discord_bot_token" : " " ,
"streamlabs_client_id" : " " ,
"streamlabs_client_secret" : " " ,
"streamlabs_redirect_uri" : " " ,
"streamelements_client_id" : " " ,
"streamelements_client_secret" : " " ,
"tipeee_client_id" : " " ,
"tipeee_client_secret" : " " ,
"tipeee_redirect_uri" : " http://localhost:8080/tipeee/auth " ,
"tiltify_client_id" : " " ,
"tiltify_client_secret" : " " ,
"tiltify_webhook_verify" : " " ,
"tiltify_webhook_id" : " " ,
"tiltify_redirect_uri" : " http://localhost:8080/tiltify/auth " ,
"tiltify_scopes" : " public webhooks:write " ,
"tiltify_api_path" : " https://v5api.tiltify.com "
}
Créez une application Twitch et remplissez les valeurs client_id
et client_secret
.
Écrivez tout ce que vous voulez dans le champ csrf_key
, il sera utilisé pour sécuriser l'authentification Twitch contre les attaques CSRF.
Configurez l'URI de redirection de l'application Twitch sur :
http://localhost:8080/oauth
(adapter avec le port et le domaine appropriés en cas de déploiement en ligne)
Définissez la même valeur pour la propriété redirect_uri
du fichier credentials.json
.
Vous pouvez également créer une application Spotify et remplir les champs Spotify spotify_client_id
et spotify_client_secret
Par défaut, le serveur écoute sur le port 3018, vous pouvez le modifier sur credentials.json
et src_front/utils/Config.ts
.
Ce projet a été codé avec VSCode.
Il est recommandé d'installer ces plugins :
Plugin Vue : https://marketplace.visualstudio.com/items?itemName=Vue.volar
Plugin I18n-ally : https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally
npm install
npm run dev
npm run build
node server/boostrap.js
Tout ce qui suit DOIT être effectué dans un dossier séparé du projet GIT.
Compilez le projet et transférez le contenu du dossier server
à la racine de votre serveur.
À côté de ce fichier, créez un dossier public
et insérez-y le contenu de votre dossier dist
local.
Ajoutez également le dossier credentials
dans une data
plus ancienne à la racine du projet.
Créez un fichier env.conf
, écrivez simplement prod
à l'intérieur et placez-le à la racine du projet.
Installez toutes les dépendances de production et exécutez le serveur.
Voici la structure de fichier attendue :
─ racine
├─ node_modules/
├─ publique/
├─utilitaires/
├─ données/
├─ informations d'identification/
├─ contrôleurs/
├─ bootstrap.js
├─ env.conf
Créez simplement un nouveau dossier sous le dossier i18n
avec le code ISO 639-1 de la langue.
Lisez la section suivante pour savoir comment traduire les étiquettes
Pour rendre la localisation aussi simple que possible, une interface dédiée a été créée qui répertorie toutes les catégories et étiquettes disponibles avec la possibilité de les modifier.
Toute mise à jour sur cette interface déclenche une reconstruction du fichier compilé ainsi qu'une mise à jour sur toute page Twitchat ouverte sur le même navigateur.
L'interface est accessible uniquement aux administrateurs et se trouve ici :
hôte local : 8080/étiquettes
Pour obtenir les droits d'administrateur, vous devez définir votre ID utilisateur Twitch sous le tableau admin_ids
dans le fichier credentials.json
.
Si vous devez ajouter de nouvelles étiquettes, vous devrez modifier les sources JSON.
Tous les fichiers d'étiquettes se trouvent dans le dossier i18n
.
Ils sont répartis par langue puis par sections.
Toute nouvelle structure de fichiers ou de dossiers peut y être ajoutée.
Ceux-ci sont tous fusionnés dans static/labels.json
pendant le processus de construction.
Les fichiers peuvent avoir n'importe quel nom, mais toutes les étiquettes qu'ils contiennent doivent se trouver sous une seule propriété qui sera le chemin de base pour utiliser l'étiquette. Le nom de la propriété est généralement le même que le nom du fichier.
Exemple:
─ en
├─ global.json
├─ home.json/
├─ triggers.json/
Exemple global.json
:
{
"global" :{
"hello" : " World "
}
}
Exemple home.json
:
{
"home" :{
"lorem" : " ipsum dolor sit amet "
}
}
Cela affichera ce fichier JSON :
{
"en" :{
"global" :{
"hello" : " World "
},
"hello" :{
"lorem" : " ipsum dolor sit amet "
}
}
}
Exécutez la commande suivante :
npm run streamdeck_package
Le plugin compilé sera là streamdeck_plugin/fr. Twitchat .streamDeckPlugin
.