Build your first Pipedrive App 🚀

1. Introduction and prerequisites

Before we venture on a journey to build our first Pipedrive App, make sure you have a sandbox account (more info about it here). We are also using Glitch to run the app so make sure you have an account and are logged in to it.

Glitch is a powerful tool for collaborating and building apps. This also means that you can build your app without having to do any local setup for testing.

Curious? Let's get started.

2. Starting from the boilerplate

Click the Remix button below to instantly generate a sample app boilerplate. You should see a new Glitch project opening up.

Remix app in Glitch

If everything goes fine, you would see the README instructions, similar to the screenshot below. You can confirm if the app is running or not by clicking on the 📝 Logs section in the footer.

Click to close...

3. Let's Code (A Bit)

Now that we have a boilerplate app ready, let's add some code. Click on the index.js file in the project sidebar of your Glitch App.

Copy and paste the following code in the intended area (Line 47).

app.get('/auth/pipedrive', passport.authenticate('pipedrive'));
app.get('/auth/pipedrive/callback', passport.authenticate('pipedrive', {
    session: false,
    failureRedirect: '/',
    successRedirect: '/'
}));
app.get('/', async (req, res) => {
    if (req.user.length < 1) {
        return res.redirect('/auth/pipedrive');
    }

    try {
        const deals = await api.getDeals(req.user[0].access_token);

        res.render('deals', {
            name: req.user[0].username,
            deals: deals.data
        });
    } catch (error) {
        return res.send(error.message);
    }
});
app.get('/deals/:id', async (req, res) => {
    const randomBoolean = Math.random() >= 0.5;
    const outcome = randomBoolean === true ? 'won' : 'lost';

    try {
        await api.updateDeal(req.params.id, outcome, req.user[0].access_token);

        res.render('outcome', { outcome });
    } catch (error) {
        return res.send(error.message);
    }
});

By doing so, we have defined the endpoints & logic required for deal retrieval & handling the OAuth 2.0 flow. You would also notice that our callback URL path is /auth/pipedrive/callback. Take note of it. It will be handy soon.

4. Creating an app via Developer Hub

Apps extend the functionality of Pipedrive. They use OAuth 2.0 for authorization which lets you access data and perform operations through the Pipedrive RESTful API.

You can create a Pipedrive OAuth App from the Developer Hub. You can access the Developer Hub via the following steps:

Clicking on Profile icon in the top right corner > Tools and Integrations > Developer Hub from the Tools section.

Follow the instructions below to create an app. Do not hit ‘Save' yet. We still need to include a few details.

5. Specifying the callback URL, scopes & client details

For a test app, all you need to provide is the Name and callback URL. Here's how you can figure out the callback URL for the Glitch App:

Just click on the Share button in the top right corner of the Glitch App and copy the Live Site URL. Jogging our memory, we know that the callback URL path is /auth/pipedrive/callback.

So the entire callback URL will be a combination of the Live site URL and the path and should look like this.

https://<glitch_appname>.glitch.me/auth/pipedrive/callback

Let's go back to the Create New App screen in Developer Hub and provide the necessary information.

In Developer Hub, add the name of your app.
Scroll down to the "OAuth & Access scopes" section and insert the entire callback URL from above in the "Callback URL" field.
Select "Deals" and "full access" in the "Access scopes" section.
Scroll back up to the top and click ‘Save' after you've filled in all of this.

You can see from the image below how we have provided the name, callback URL, and the scopes that are required for the app.

Once you have successfully created the app, it would generate a Client ID and Client Secret that you need to copy and paste in the .env file of our Glitch app. These values are loaded as environment variables which are in turn substituted in the config.js file. You can find this information by clicking on the app (via Developer Hub) and navigating to the OAuth & Access Scopes section.

Click to close...

Copy the relevant details and add them to the .env file. Make use of the Graphical Editor option to conveniently add these values in Glitch.

6. Running the app 🚩

Now that we have coded and created a new app in our Pipedrive account, it's time for a test drive 🚙..

All you need to do is access the live URL from the browser (https://<glitch_appname>.glitch.me).

The OAuth flow will be initiated, and the user will be requested to grant authorization.
Upon authorization, our app gets the access_token and uses it to retrieve the list of deals.
Make sure you have some test deals in your account; otherwise, the list might be empty.
Clicking on a deal randomly marks it as Won / Lost. You can notice the change in the Deals section of your account.

Click to close...

There you go, congratulations! Your first app is live and ready. Feel free to tweak and play around with it. You can replicate the setup locally by cloning the sample app and running it as a Node.js app.

7. Troubleshooting 🛠

Clicking on the Logs section in the footer will indicate the status of your app. You would notice an error message if something goes wrong and can always course-correct based on that.

You could always reset the app's authorization. To do so, follow these steps:

Click on the Terminal button at the footer of the Glitch App and type "refresh". This would restart the Glitch App.

You can also uninstall the app to revoke authorization.

If you access the Live URL again, it will initiate the OAuth flow again. Feel free to create a topic in the Developer Community if you face any challenges during your app development journey. ❤️

Topics

Topics