Code Monkey home page Code Monkey logo

directus-extension-bundle-api-fetch's Introduction

Directus API Fetch Bundle

Connect to the 3rd-party api's, then add selected items to your configured collection.

I had originally planned on using Clearbit for the demo (look up a person using their email, then create a new contact using the api response), but I decided to go with TVMaze because it doesn't require having an api key. Feel free to fork the code and adapt it to your needs.

Being that this is my first Directus extension, I'd love to get feedback on whether there is anything that could be improved, doesn't work or is just plain wrong.

Details

  • Speed up the process of adding items from external sources.
  • No, I intentionally only used what is natively available.
  • One endpoint and one panel.
  • Things I'd improve if I had more time:
    • I would extend it support more data sources (contacts, books, plants, cars, music, etc).
    • Support more data sources (contacts, books, plants, cars, music, etc).
    • Multi-select on the results enabling you to to add multiple items at once.
    • Implement a more robust autocomplete.
    • Add more views, filters and responsive.
    • Automatically create the collection with the necessary fields.
    • Refine the code, debounce the input, more checks, etc.
    • Refine the permissions implementation.
    • Make it work with any api.

Set Up Instructions

The endpoint uses the TVMaze api, which doesn't require any token to api key.

  1. Copy the contents of dist to /[your-directus-root]/extensions/directus-extension-bundle-api-fetch/
  2. Whitelist the TVMaze domain to allow the show cover image in the selected item preview: CONTENT_SECURITY_POLICY_DIRECTIVES__IMG_SRC: "'self' data: blob: https://static.tvmaze.com"
  3. Restart Directus.
  4. Create a new collection to store your saved videos. To match the api response the collection should have the following fields:
    • name: string
    • date_created: datetime | timestamp
    • slug: string | slugify
    • network: string
    • country: string
    • runtime: integer
    • genre: csv | tags
    • image: string
    • thumb: string
  5. Add a new panel and select the API Lookup panel from the list of available panels.
  6. Select a collection you would like to save to.
  7. Select the name column from the Response configuration field.
  8. Once the panel is added to your dashboard, simply search for items in the TVMaze database, select an item from the results then click save to Directus.

Screenshots

Setup your destination collection Search for an item in the TVMaze database Select the result and save to Directus

Video preview

directus-extension-bundle-api-fetch's People

Contributors

smokeyfro avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

devxjs

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.