Coder Social home page Coder Social logo

marigarey / canvas-notion-integration Goto Github PK

View Code? Open in Web Editor NEW
6.0 2.0 3.0 1.4 MB

Integrate Canvas Assignments into Notion!

License: MIT License

JavaScript 92.51% Dockerfile 7.49%
canvas canvas-api canvas-lms integrations notion notion-api notion-client notion-database notion-integrations

canvas-notion-integration's Introduction

Canvas to Notion Integration

View your Canvas assignments in Notion created by Mari Garey!

Introduction

Using this repository you will be able to export all of your assignments from Canvas to a Notion Database! Following the instructions below will help you set up the database!

Support the Creator!

  • Give a โญ๏ธ to the repository please and thank you ๐Ÿค—
  • Submit a PR for feedback or in the Discussion Tab
  • Watch the demo on YT and give it a ๐Ÿ‘

Using the Canvas to Notion Integration

Video Tutorial

Coming Soon

1. Project Setup

# Clone this repository to your computer
git clone https://github.com/marigarey/canvas-notion-integration.git

# Open this project
cd canvas-notion-integration

Without Docker

# Install dependencies
npm install

With Docker

# Build image
docker -t canvas-notion-integration build .

Note

This step is not required on most architectures. GHCR should have built the latest version on the following architectures:

  • linux/amd64
  • linux/arm/v6
  • linux/arm/v7
  • linux/arm64
  • linux/ppc64le
  • linux/s390x

2. Canvas Token Access

Go to your Canvas Profile Settings and scroll down to Approved Integrations. Click on + New Access Token to create the token.

Name your Token, and leave the date blank to have no expiration date.

Once the Token is generated, copy the Token string.

This string will be your Canvas API Key

Warning

Once you move away from that screen you will not be able to access the token string! Make sure to save the Token string now!

3. Notion API Key Access1

Pull up the Notion - My Integrations site and click + New Integration

Enter the name of the integration (ie Canvas Notion Integration) and what workspace the Integration will apply to. In the Secrets tab and copy the Internal Integration Secret this will be your Notion API Key.

4. Create Integration within Notion

Head to whatever Notion Page you want to put the database in and click on ... in the top right. Scroll down to + Add Connections. Find and select the integration. Make sure to click confirm.

5. Environment Variable .env file Setup

Create a .env file and replace all the <> with your own information. Keep the NOTION_DATABASE variable as is because it will be overwritten when you run the code

CANVAS_API_URL=<example: https://canvas-page.edu>
CANVAS_API=<your canvas api token>
NOTION_PAGE=<page id of the parent page to create the database>
NOTION_API=<your notion api key>
NOTION_DATABASE='default'

6. Run Code

Important

To update your database you will have to run the script every time there is a change in Canvas It is recomended to rerun the code every semester or class/assignment changes

Without Docker

node main.js

With Docker

docker run --env-file ./.env canvas-notion-integration

Note

If you did not choose to build the image yourself, you can replace canvas-notion-integration with ghcr.io/marigarey/canvas-notion-integration:latest

Other Information

In the future I do plan to add more to this, possibly blocks outside of the database. If you have any suggestions on what I should, please let me know! I want to hear your feedback and improve!

Note

The ID Property is for internal use and you can hide it in your database Hiding a Property:

  1. Go to ... on the top right of your database
  2. Click on the Properties Tab
  3. Click the eye on the ID Property
  4. It should get crossed out and disapear from your database!

Footnotes

  1. Source of Gifs and for more information on Notion Integrations โ†ฉ

canvas-notion-integration's People

Contributors

blash20 avatar davidteather avatar eniraa avatar marigarey avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  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.