Skip to main content

​
Building a Greeter app

1

Create an app

Create an app with the title “Greeter”. Run the following command and provide the information it is looking for.
yarn app-store create
2

Install the app

The app is created in Step 1 and we should install it now.
3

Add the functionality

The app is installed but it doesn’t do anything because we haven’t written added any functionality to it. Let’s add a button in the main navigation that greets the user.
  1. Create a component greeter/components/GreeterButton.tsx - You can name it whatever you want.
  2. Import this component in Shell.tsx and add it wherever you want to so that the button is available on all pages. 
/**
* GreeterButton.tsx
* It creates a button that can be added anywhere. The button is visible only if the app is installed.
*/
import useApp from "@calcom/lib/hooks/useApp";
import showToast from "@calcom/lib/notification";
import { Button } from "@calcom/ui/button/Button";

import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";

export default function GreeterButton() {
  const { data: user } = useMeQuery();
  const { data: greeterApp } = useApp("greeter");
  // Make sure that greeterApp is installed. We shouldn't show the button when app is not installed
  if (!user || !greeterApp) {
    return null;
  }
  return (
    <Button
      onClick={() => {
        showToast("Hello, " + user.name, "success");
      }}
    >
      Greet Me!
    </Button>
  );
}

/**
* Shell.tsx
*/
// ...
import GreeterButton from "@calcom/app-store/greeter/components/GreeterButton";
// ...

<GreeterButton />;
A sample line where I used the component in the demo
That’s it. You now have a fully functional Greeter app. This is the simplest possible demonstration of how you can build an app and what it can do. There are simply no restrictions on what an app can achieve.