Coder Social home page Coder Social logo

discord-test's Introduction

Getting Started app for Discord

This project contains a basic rock-paper-scissors-style Discord app written in JavaScript, built for the getting started guide.

Demo of app

โœจ A version of this code is also hosted on Glitch ๐ŸŽ and on Replit ๐ŸŒ€

Project structure

Below is a basic overview of the project structure:

โ”œโ”€โ”€ examples    -> short, feature-specific sample apps
โ”‚   โ”œโ”€โ”€ button.js
โ”‚   โ”œโ”€โ”€ command.js
โ”‚   โ”œโ”€โ”€ modal.js
โ”‚   โ”œโ”€โ”€ selectMenu.js
โ”œโ”€โ”€ .env.sample -> sample .env file
โ”œโ”€โ”€ app.js      -> main entrypoint for app
โ”œโ”€โ”€ commands.js -> slash command payloads + helpers
โ”œโ”€โ”€ game.js     -> logic specific to RPS
โ”œโ”€โ”€ utils.js    -> utility functions and enums
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ README.md
โ””โ”€โ”€ .gitignore

Running app locally

Before you start, you'll need to create a Discord app with the proper permissions:

  • applications.commands
  • bot (with Send Messages enabled)

Configuring the app is covered in detail in the getting started guide.

Setup project

First clone the project:

git clone https://github.com/discord/discord-example-app.git

Then navigate to its directory and install dependencies:

cd discord-example-app
npm install

Get app credentials

Fetch the credentials from your app's settings and add them to a .env file (see .env.sample for an example). You'll need your app ID (APP_ID), server ID (GUILD_ID), bot token (DISCORD_TOKEN), and public key (PUBLIC_KEY).

Fetching credentials is covered in detail in the getting started guide.

๐Ÿ”‘ Environment variables can be added to the .env file in Glitch or when developing locally, and in the Secrets tab in Replit (the lock icon on the left).

Run the app

After your credentials are added, go ahead and run the app:

node app.js

โš™๏ธ A package like nodemon, which watches for local changes and restarts your app, may be helpful while locally developing.

Set up interactivity

The project needs a public endpoint where Discord can send requests. To develop and test locally, you can use something like ngrok to tunnel HTTP traffic.

Install ngrok if you haven't already, then start listening on port 3000:

ngrok http 3000

You should see your connection open:

Tunnel Status                 online
Version                       2.0/2.0
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://1234-someurl.ngrok.io -> localhost:3000
Forwarding                    https://1234-someurl.ngrok.io -> localhost:3000

Connections                  ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

Copy the forwarding address that starts with https, in this case https://1234-someurl.ngrok.io, then go to your app's settings.

On the General Information tab, there will be an Interactions Endpoint URL. Paste your ngrok address there, and append /interactions to it (https://1234-someurl.ngrok.io/interactions in the example).

Click Save Changes, and your app should be ready to run ๐Ÿš€

Other resources

  • Read the documentation for in-depth information about API features.
  • Browse the examples/ folder in this project for smaller, feature-specific code examples
  • Join the Discord Developers server to ask questions about the API, attend events hosted by the Discord API team, and interact with other devs.
  • Check out community resources for language-specific tools maintained by community members.

discord-test's People

Contributors

shaydewael avatar emmanuel97423 avatar komali2 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.