/Apps.Whiteboard

Whiteboard Integration App for Rocket.Chat

Primary LanguageTypeScript

🚀 Whiteboard App for Rocket.Chat 🎨

Enhance your collaborative experience with diagrams, drawings, and more using the Whiteboard Integration in Rocket.Chat. The Whiteboard App provides a seamless environment for real-time visual communication and brainstorming.

Whiteboard

How to Use the App

Create a Whiteboard

Through Slash Commands:

  • Use /whiteboard help for a helpful message.
  • Use /whiteboard list to list all created boards in the room.
  • Use /whiteboard new <board name> to create a new whiteboard.
  • Use /whiteboard delete <board name> to delete a whiteboard.

Through Action Buttons:

  • Click on the "Create Whiteboard" action button to generate a new whiteboard.

Action button

Using the Whiteboard

  • Click on the Edit board button, and you will be directed to a new whiteboard tab.

    image

  • User edits will be stored in real-time as an image preview in the message.

Image 1 Image 2
  • Click on the Settings button to modify the board name and make the board public/private.

image

Whiteboard App Policies

Local Setup Guide

Join our app's community from here 💻🧑‍🤝‍🧑🚀.

Make sure you have a working Rocket.Chat server and Apps-Engine CLI for your machine. You can setup the server for your local machine from here and CLI from here.

  1. Navigate to the client folder:

    cd client

  2. Install all required packages:

    npm install

  3. Build the webpack bundle for the Excalidraw React app:

    npm run build

  4. Execute the build.js script to generate build scripts for excalidraw.ts and excalidrawContent.ts:

    npm run build:excalidraw

  5. Change directory to whiteboard and install all Rocket chat app packages :

    cd ../whiteboard/
    npm install

  6. Deploy your app locally

    rc-apps deploy --url http://localhost:3000 --username ${username} --password ${password}

    Your username and password are your local server's user credentials .Verify the successful build by accessing the /excalidraw endpoint in the Whiteboard app settings. You can access the React app through the provided URL.

Instead of running the above commands, you can simply use the shortcut commands

  1. Run the following command within the Apps.Whiteboard folder

    cd client \
&& npm install \
&& npm run build \
&& npm run build:excalidraw \
&& cd ../whiteboard/ \
&& npm install \
&& rc-apps deploy --url http://localhost:3000 --username ${username} --password ${password}

    Make sure to replace ${username} and ${password} with the actual username and password values of your local server's user credentials

  2. You can use the Makefile to run the server as well

    make YOUR_USERNAME=${username} YOUR_PASSWORD=${password}

    Make sure to replace ${username} and ${password} with the actual username and password values of your local server's user credentials. Alternatively, you can modify the Makefile directly by replacing the USERNAME and PASSWORD variables.

    Additional Commands:

    For build:

    make build YOUR_USERNAME=${username} YOUR_PASSWORD=${password}

    For deploy:

    make deploy YOUR_USERNAME=${username} YOUR_PASSWORD=${password}

Gitpod Setup Guide

Follow these steps to set up your development environment using Gitpod:

  1. Visit Gitpod Website:

    • Go to Gitpod and click on the dashboard.

  2. Login with GitHub:

    • Login to Gitpod using your GitHub account credentials.

  3. Create a New Workspace:

    • Click on the "New Workspace" button.
    • In the dropdown menu, select the repository you want to work on, specifically the Apps.Whiteboard repository that you've previously forked on GitHub.

  4. Continue and Wait:

    • Click "Continue" and give it some time to initialize your workspace.

  5. Start Coding:

    • After a few seconds, you'll see a fully-functional code editor in your browser.
    • Feel free to start coding, making changes, and contribute to the Apps.Whiteboard repository.

That's it! You are now set up and ready to contribute. If you encounter any issues or have questions, refer to the Gitpod documentation or reach out to the community for assistance.

Happy coding!

GSoC'23 Work: Whiteboard App Report

Explore our documentation and engage with the Rocket.Chat Apps community:

  • Rocket.Chat Apps TypeScript Definitions Documentation: Learn about Rocket.Chat Apps TypeScript definitions and how to use them.

  • Rocket.Chat Apps TypeScript Definitions Repository: Contribute and explore the open-source repository for Rocket.Chat Apps TypeScript definitions.

  • Example Rocket.Chat Apps: Find inspiration in a collection of example Rocket.Chat Apps, providing practical implementations.

  • Community Forums: Engage with the Rocket.Chat Apps community through our forums.

  • Community Chat Channel: Join the conversation in our community chat channel.

  • Apps Community Channel: Join the conversation in our app's community channel.

Feel free to explore, learn, and collaborate within the Rocket.Chat Apps ecosystem. Happy coding!

Contributors

Alt