DEV Community: Raju Gangitla

Automating People Data Sync: n8n Workflow for Twenty CRM and Google Sheets 🚀

Raju Gangitla — Thu, 31 Oct 2024 09:19:25 +0000

Did you know that keeping your data in sync can boost your team's efficiency? In this article, we'll show you how to create an n8n workflow that automatically adds, updates, and deletes people data in Google Sheets whenever changes happen in the Twenty CRM dashboard. Let’s dive in!

TL:DR

1. Set Up n8n: Create an account and configure your n8n environment.
2. Connect to Twenty: Use the Twenty API to integrate with n8n.
3. Configure Google Sheets: Set up your Google Sheets connection in n8n.
4. Create Workflow: Build a workflow to automatically add, update, and delete people data.
5. Test Your Workflow: Ensure it functions correctly with real-time changes from the Twenty dashboard.

Twenty CRM: Your Open-Source CRM Solution 🚀

Meet Twenty CRM! This powerful, open-source tool helps you manage customer relationships with ease, giving you control over your data and customization. If you’re a fan of open-source solutions, give it a try and show some support with a ⭐!

Step 1: Set Up n8n

1.📝Create an n8n Account: Sign up for a free account at n8n.io and choose your hosting option (cloud or self-hosted).

2.🔍Familiarize Yourself with the Interface: Explore the n8n dashboard, focusing on the nodes panel for integrations and the workflow area for building your automation.

After SignIn, you will see the below page.

Step 2: Create Your Workflow by Adding a Webhook Node

1. Webhook Node in n8n: Showing where to add a Webhook node and set it to POST

2. Adding Webhook URL in Twenty CRM: Add thr Webhook url in the Twenty CRM dashbaord

3. Testing Webhook Response: Show the successful webhook response in n8n after creating a test entry in Twenty CRM

Step 3: Add Google Sheets and Switch Nodes for CRUD Operations

Add a Switch Node: Attach a Switch node to the Webhook node and set up routing rules for Create, Update, and Delete events, using the webhook payload to define conditions for each.
Add Google Sheets Node:Add a Google Sheets node and connect it to the Create and Update routes from the Switch node. Choose Add or Update Row in Google Sheets and enter your credentials.
Map Data to Google Sheets: Select your Google Sheet and map the fields from the webhook data to the sheet’s columns for both Create and Update actions.
Handle Delete Events: Add a Google Sheets node for deletions and set it to Get Rows. Configure a filter condition to identify rows for deletion based on a unique field. Pass this output to another Google sheet node where it will delete the row by index (that we got in previous node)

Step 4: Test your Workflow

Activate Listening Mode: In n8n, click Listen for Test Event on the Webhook node to enable real-time data capture.
Trigger Events in Twenty CRM: Go to your Twenty CRM dashboard and create, update, or delete a person to trigger events.
Verify Data in Google Sheets: After each action in Twenty CRM, check the Google Sheet to confirm that the data has been added, updated, or deleted as expected.

Troubleshooting Tips:

After completing your testing, switch to the production webhook URL in the Twenty CRM dashboard to ensure live data flows correctly.
Once configured, set your workflow to active in n8n to see it in action in real-time!

Conclusion

You’ve successfully integrated Twenty CRM with Google Sheets using n8n, automating your data management. Enjoy streamlined processes and improved efficiency as you focus on growing your business!

If you have any doubt or you stuck somewhere feel free to drop a comment

Working by Day, Hacking by Night: My oss.gg Hackathon Experience

Raju Gangitla — Thu, 31 Oct 2024 03:59:24 +0000

October was here, and that meant Hacktoberfest was in full swing! This year, I stumbled upon a hackathon that took open-source contributions to the next level: oss.gg. It was an exciting twist on the usual coding grind, especially with amazing prizes up for grabs, including the M3 MacBook I’d been dreaming about! Balancing my day job and a flurry of issues and pull requests, I eagerly jumped into the Hacktoberfest adventure.

How It Started 🚀

Last year was my intro to Hacktoberfest and open source—totally uncharted territory. I signed up, browsed some repos, and found a few issues… but contributing? Yeah, that was harder than it looked! Still, I managed to solve two good first issues after fumbling around a bit. It was a small win, but it lit a fire! I decided right then: next year, I’d be back, better and ready to make a real impact. Time to level up!

My Contributions 🌟

This year, I was ready to tackle Hacktoberfest head-on! Armed with determination and a bit of caffeine, I set up my projects locally all on my own—talk about a win! Here’s what I contributed to:

Formbricks
Dub
Papermark
Unkey

I dove straight into an exciting issue: implementing a templates page in Formbricks. It took me three days of coding magic, and guess what? I solved it all by myself—no questions asked! 🎩✨ The maintainer was super impressed, and it felt like the perfect kick-off to my Hacktoberfest adventure! Let the coding fun begin!

After diving into Hacktoberfest, my contributions skyrocketed! 🚀 Check out my stats:

Dub: 3 contributions 🎶
Papermark: 3 contributions 📄
Formbricks: 5 contributions 📦
Unkey: 4 contributions 🔑
All in all, I think I crushed it this year! 💪🎉 Who knew coding could be this much fun? Here’s to leveling up and making an impact in the open-source world!

A Month of Hustle 💼💻

This month, I was grinding from 11 AM to 8 PM at work and then contributing until 2 AM! 😅 It wasn't all smooth sailing, though. I struggled to set up some projects and found a few codebases that felt like they were written in a secret language! 🤔

There were times I thought about giving up on those tricky issues, but guess what? Your boy didn’t throw in the towel! 💪 I persevered and tackled almost all the challenges I faced. What a comeback! 🚀

Fun Fact 🤔💡

Sometimes, I'd fall asleep for just a few minutes, and voilà—a brilliant solution to my coding problem would hit me! So, I'd jump out of bed and dive back into coding, because who needs sleep when inspiration strikes? 😄💻

Closing Thoughts: A Journey of Growth

Through Hacktoberfest and oss.gg, I discovered a new side of myself! I challenged myself to learn new technologies, explore codebases, and write top-notch code—like leveling up in a video game! 🎮✨

So, here’s my advice: if you’re thinking about diving in, don’t throw in the towel! Keep pushing, keep shining, and remember—every line of code brings you closer to greatness! 🌟💻

Self-Hosting Twenty CRM: A Complete Guide

Raju Gangitla — Tue, 29 Oct 2024 13:09:21 +0000

Did you know that self-hosting software can give you greater control over your data and customization? If you're looking to set up Twenty CRM on your own server, you've come to the right place! With a few straightforward steps, you’ll be ready to harness the power of Twenty CRM in a secure, self-managed environment. Let’s dive in and get started!

What to Expect:

This guide will walk you through:
Preparing Your Server: Setting up the server and essential configurations.
Installing and Setting Up Twenty CRM: Step-by-step instructions for a smooth installation.
Testing and Troubleshooting: Tips to ensure everything runs well.

Twenty CRM: Your Open-Source CRM Solution 🚀

Four Steps to Self-Host Twenty CRM

Step 1: Prepare Your Environment ⚙️

To start, make sure your server meets the basic requirements:

System Requirements: Minimum 2GB RAM to handle CRM processes.
Docker & Docker Compose: Ensure both are up-to-date.

Installation Options

1.Quick Start with One Command: Install Twenty CRM using a one-line script:

bash <(curl -sL https://git.new/20)

2.Manual Setup:

Download and configure the .envfile, then generate secure tokens:

openssl rand -base64 32

These tokens enhance security for CRM processes, including access and login.

Step 2: Download Configuration Files 📁

1.Environment and Docker Compose Files: Download the essential .env and docker-compose.yml files:

curl -O https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docker/docker-compose.yml

2.Configure the .env File: Open the file to set variables such as database passwords and server URLs.

Tip: Avoid altering any settings not explicitly mentioned in the guide to prevent conflicts.

Step 3: Launch the Application 🚀

1.Run Containers: Launch the application using Docker Compose:

docker-compose up -d

2.Check Container Status: Ensure the containers are running smoothly:

docker-compose ps

If issues arise, review logs using:

docker-compose logs

Step 4: Access and Configure 🔧

1.Local Access: Access the CRM interface via http://localhost:3000.

2.External Access Setup: To enable remote access, modify the SERVER_URL in your .env file to match your public IP or domain, then restart:

docker-compose down && docker-compose up -d

3.Firewall and Port Access: Ensure that port 3000 is open and accessible if you’re using an external setup.

Troubleshooting Tips 🔍

Unable to Log In: Run these commands to reset the database if login fails:
Issues Behind a Reverse Proxy:

Ensure headers like X-Forwarded-For and X-Forwarded-Proto are set.
Restart both the proxy server and the CRM containers.

Server URL Conflicts: Verify that the SERVER_URL in .envmatches your access URL, especially if using SSL.

Tip: Review Docker Compose logs for details on any setup issues.

Conclusion: Self-Hosted CRM, Tailored for You 🚀

With this guide, you’ve set up Twenty CRM to be fully self-hosted, giving you control over your data, privacy, and customization. This flexible, open-source setup is now tailored to meet your business needs—empowering you to manage client relationships with confidence. Enjoy the benefits of an efficient, secure, and scalable CRM that grows with you!

📝In-App Surveys Made Simple with Formbricks in React Native: A Complete Guide ❤️‍🔥

Raju Gangitla — Sun, 13 Oct 2024 16:28:41 +0000

Did you know that in-app surveys can increase response rates by 6 to 10 times compared to email surveys? If you're looking to gather valuable user insights, setting up an in-app survey in your React Native app takes just minutes. You're in the right place to get started!

What to Expect:

In this article, I'll take you on an exciting journey to integrate Formbricks into your React Native app. You’ll discover how to effortlessly add features like a dynamic Feedback Box, invite users for meaningful interviews, gauge feature satisfaction, and much more.

Let’s jump in and revolutionize the way you gather user feedback!

Formbricks: Open-Source Forms and Surveys🤸

Let me introduce Formbricks! We help you gain valuable insights into user perceptions with targeted questions to enhance user experience. Plus, it’s open-source! If you appreciate our work, show us some love with a ⭐!

4 Easy Steps

Ready to jump in? Here’s what we’ll accomplish together:

Create a free Formbricks Cloud account
Create your first survey
Set up the Formbricks Widget in your app
Restart your app and enjoy your brand new in app survey

1. Create a free Formbricks Cloud account 🚀

While self-hosting is always an option, if you’re after speed and simplicity, the cloud is the way to go! Just sign up, follow the quick onboarding steps, and you'll be all set:

2. Build Your First Survey 🛠️

Ready to create your survey? Jump into a template, then head over to the survey settings to fine-tune everything:

Here, you'll find a survey trigger that lets you specify when the survey should be activated.

You’ve got two options here:

New Session: The survey will automatically pop up every time a new user session starts.
Custom Trigger: Set your own specific action to trigger the survey when you see fit.

Pick the option that best suits your needs and customize your survey flow!

You’ll also find additional settings like Response Options, Recontact Options, and Survey Placement to help you tailor the survey for an even more personalized experience.

Once you're satisfied, hit that Publish button! 🎉

You’ll land on the Summary Page, your central hub for all survey responses. Here, you'll find a Connect button—use it to link your website or app to Formbricks and start collecting feedback!

3. Unleash the Formbricks Widget 🧙

When you click on connect button it will take you to this page where you can see the Formbricks sdk connection status

Just below, you'll find a manual with a code snippet. This is where you can grab your environmentId and API host to complete the setup.

The next step is to install the Formbricks React Native SDK using your preferred package manager, such as npm, pnpm, or yarn in your React Native App.

npm install @formbricks/react-native

Now, update your App.js/App.tsx file to initialize Formbricks:

// other imports
import Formbricks from "@formbricks/react-native";

const config = {
  environmentId: "<environment-id>",
  apiHost: "<api-host>",
  userId: "<user-id>",
};

export default function App() {
  return (
    <>
      {/* Your app content */}
      <Formbricks initConfig={config} />
    </>
  );
}

4.Restart Your App & Keep an Eye on the Console👀

Restart your app and open your browser console. If everything’s working as expected, you'll see your survey appear in the bottom right corner!

And that’s it—you're all set! 🎉

👏 Congrats, you nailed it! 🚀

Debugging Support – For When Things Don’t Go as Planned 🐛

If your survey is playing hard to find, don’t worry! Here’s a quick cheat sheet to help you out:

Connectivity Issues
Head back to app.formbricks.com and check the Website and App Connection in Configuration. If it's showing "Not connected," it means your app hasn't communicated with Formbricks Cloud yet.

The Fix: Double-check your widget's heartbeat in your browser console. For that make sure that debug: true mode is enabled in the Formbricks embedding. If things look off, we've got your back over at our Discord.

Survey not loaded
Your app is communicating with Formbricks Cloud, but the widget hasn't loaded your survey yet.

The Fix: Ensure your survey is no longer in draft mode and is set to "in progress" on the Survey Summary page in Formbricks Cloud.

Let’s Reflect and Learn

Today, we explored how to:

Connect Formbricks with your app
Create engaging in-app surveys
Display them effortlessly within your app
Send the collected data to your analysis backend Now, you’re ready to unlock the full potential of in-app surveys!

Check out these best practices for inspiration:

Comment for which you'd like the next tutorial!

To help us continue creating these articles, leave us a sparkling ⭐!

Thank you for reading!
Raju