https://cal.com logo
Join Slack
Powered by
Given the docs for adding our own app are pretty l...
# developers
d
Given the docs for adding our own app are pretty light for beginners (at least I am a beginner to Next.js and Prisma). Is it worth knowing both of them, or should I be able to get by with basic JavaScript/TypeScript? All I will be wanting to do is send a POST request and obtain what it sends back to add to my meeting.
I've figured this out, my solution was that I wanted to do a POST request within something similar to this. https://github.com/calcom/cal.com/blob/main/packages/app-store/jitsivideo/lib/VideoApiAdapter.ts I ended up using this, which I'll extend to not being hardcoded.
Copy code
var request = require('request');

var headers = {
    'Authorization': 'my-api-key',
    'Content-Type': 'application/json'
};

var options = {
    url: '<https://calendar.heyyep.com/api/channel>',
    method: 'POST',
    headers: headers
};

function callback(error, response, body) {
    if (!error && response.statusCode == 200) {
        console.log(body);
    }
}

request(options, callback);
p
some apps are rather easier and some are harder to implement. we’re here to answer any questions 🙏 not sure if you saw the docs: https://developer.cal.com/guides/how-to-build-an-app
d
Yeah the docs are pretty decent assuming you know what you're doing. I was able to figure it out but they're very light and anyone less experienced would probably struggle with it. I had some issues with getting up and running to begin with thanks to not having the correct NodeJS version installed and not being familiar with Prisma's db studio. It depends who the target audience is really.
I was lucky that one of the already existing applications was quite close to what I wanted to accomplish.
It wasn't obvious to copy the 
.env
files and fill them out from the example (I know it is beginner stuff) and what is actually required to get up and running from there.
The only other feedback I have is for the 
.env
Copy code
# Configure SMTP settings (@see <https://nodemailer.com/smtp/>).
# Note: The below configuration for Office 365 has been verified to work.
EMAIL_SERVER_HOST='<http://smtp.office365.com|smtp.office365.com>'
EMAIL_SERVER_PORT=587
EMAIL_SERVER_USER='<office365_emailAddress>'
# Keep in mind that if you have 2FA enabled, you will need to provision an App Password.
EMAIL_SERVER_PASSWORD='<office365_password>'

# The following configuration for Gmail has been verified to work.
# EMAIL_SERVER_HOST='<http://smtp.gmail.com|smtp.gmail.com>'
# EMAIL_SERVER_PORT=465
# EMAIL_SERVER_USER='<gmail_emailAddress>'
## You will need to provision an App Password.
## @see <https://support.google.com/accounts/answer/185833>
# EMAIL_SERVER_PASSWORD='<gmail_app_password>'
# **********************************************************************************************************
Some 
SMTP
servers don't require users to authenticate, and will accept anything based on IP range.
Nothing major, just things that might throw people off who don't know how to fix it.
NEXTAUTH_URL=<http://localhost:3000>
had to be set to run locally too, not just for running on Vercel.
I'll actually make these updates and submit a PR when I have capacity.
I am stuck here for now, but I should be able to figure it out unless there is something painfully obvious (I don't usually do web-dev, I'm mostly in DevOps)
Copy code
import type { PartialReference } from "@calcom/types/EventManager";
import type { VideoApiAdapter, VideoCallData } from "@calcom/types/VideoApiAdapter";

const JitsiVideoApiAdapter = (): VideoApiAdapter => {
  return {
    getAvailability: () => {
      return Promise.resolve([]);
    },

    // Create request to establish a call
    createMeeting: async (): Promise<VideoCallData> => {
      const request = require("request");
      const headers = {
        Authorization: "temp-api-key",
        "Content-Type": "application/json",
      };

      const options = {
        url: "<https://calendar.heyyep.com/api/channel>",
        method: "POST",
        headers: headers,
      };

      function callback(error, response, body) {
        if (!error && response.statusCode == 200) {
          console.log(body);
        }
      }

      request(options, callback);

      // set channelURL, channelId, sessionId and userCount as properties of the returned object

      // return {
      //   channelURL: "",
      //   channelId: "",
      //   sessionId: "",
      //   userCount: 0,
      // };

      // I'm not quite sure how to get the results of this function into the meeting object

      return Promise.resolve({
        type: "jitsi_video",
        id: channelId,
        password: "",
        url: channelURL,
      });
    },
    deleteMeeting: async (): Promise<void> => {
      Promise.resolve();
    },
    updateMeeting: (bookingRef: PartialReference): Promise<VideoCallData> => {
      return Promise.resolve({
        type: "jitsi_video",
        id: bookingRef.meetingId as string,
        password: bookingRef.meetingPassword as string,
        url: bookingRef.meetingUrl as string,
      });
    },
  };
};

export default JitsiVideoApiAdapter;
I'm modifying the JitsiVideo app for now until I get it working and then will create a new application type.
Copy code
// return {
      //   channelURL: "<https://calendar.heyyep.com/channel/uZJjG3i1gOHWEZLCc0Ns>",
      //   channelId: "uZJjG3i1gOHWEZLCc0Ns",
      //   sessionId: "1_MX40NjkzODMzNH5-MTY1OTk1OTg0Mzg1N353R2kxV256ak93YjIzNDhNVFAyNHVPRTd-fg",
      //   userCount: 0,
      // };
that's a better example of what I'd actually be getting back from the API
I read somewhere that request is being deprecated and is not the best option going forward, I couldn't see anyone else importing node-fetch or axios, which are the other examples I came across.
h
You should be able to use native 
fetch
as it's available in Node.js versions we support.
d
Awesome cheers, I got it mostly working with 
node-fetch
so I'll just have to translate it from there.
I made a test js file and this is what ended up working, now all I need to do is figure out how to take the values returned and use them within calcom (I should be able to figure it out)
Copy code
const fetch = require("node-fetch");

const url = "<https://calendar.heyyep.com/api/channel>";
const method = "POST";
const headers = {
  Authorization: "tmp-api-key",
  "Content-Type": "application/json",
};

// write a function using node-fetch to send a POST request to the url above using the headers above

function postRequest() {
  fetch(url, { method, headers })
    .then((res) => res.json())
    .then((json) => console.log(json));
}

postRequest();
dumb question maybe, is 
fetch
different to 
node-fetch
?
z
node-fetch
is a replacement for 
fetch
where the first isn't available
d
Would I have to specify using 
fetch
over 
node-fetch
? I wrote a test.js file to see if what I was doing would work from within the calcom directory, and 
node-fetch
appeared to be available.
z
We don't need to actually import it. You can just call 
fetch
globally and it should work.
d
Nice, thanks for that. It looks like the syntax is the same.
I'm stuck on something super basic now haha, I've got what I want coming back but I have no idea how I am supposed to store it, or actually use it now.
That's the next challenge 😄
Open in Slack
PreviousNext
Powered by