Forem: Harshil Agrawal

Implementing localization to your Svelte App: A step-by-step guide

Harshil Agrawal — Mon, 24 Jun 2024 22:23:15 +0000

In today's global market, making your web application accessible to a diverse audience is crucial. Localization enables apps to adapt to different languages and cultural contexts, enhancing user experience.

Tolgee simplifies localization with its open-source i18n tool, combining a localization platform and SDKs. It provides features like in-context translation and automatic screenshot generation, making translation easy for developers and translators. Svelte is an open-source frontend framework that compiles components into small, performant JavaScript modules.

In this tutorial, you'll learn how to implement localization in your Svelte app using Tolgee. Let's get started!

Prerequisites

This tutorial assumes that you have familiarity with JavaScript. Knowledge of Svelte is not required but is good to have. You will also need the following, to follow the tutorial.

Node.js: Install Node.js on your machine if you don’t already have it installed. Use a node version manager tool like nvm to install Node.js.
Tolgee account: You will be using Tolgee to implement localization. Hence, if you don’t have an account, please sign-up here to create an account.
Git: Install Git for your machine. You will use Git for cloning the repo and version management.

Step 1 - Setting up the Svelte App

For this tutorial, you will use the Svelte Tolgee example project. This project is a personal blogging website built using TailwindCSS. If you want to create your own Svelte app, follow the official Svelte documentation. While following the steps further down this tutorial, make sure to adapt to your app.

To clone the project, run the following command in your terminal.

git clone https://github.com/harshil1712/svelte-tolgee-example.git

Next, navigate into the project directory and run the following command to install the required dependencies.

cd svelte-tolgee-example
npm install

Now that you have all the required dependencies installed, run the development server and check out the project. To start the development server, execute the following command in your terminal.

npm run dev

On your browser, navigate to http://localhost:5137. You will see the sample app up and running.

Step 2 - Getting started with Tolgee

In the previous step you scaffolded the Svelte project. In this step you will learn how to get started with Tolgee to integrate it in your Svelte project.

If you don’t have a Tolgee account, create one. After you sign-up/sign in for the first time, you will be presented with a demo project. While that is a good place to explore the platform in depth, for this tutorial, you will create a new project.

To create a new project, click on the + Add Project button. Next, enter the name of your project in the Name field and select the translation languages you. This tutorial implements English (en) and German (de). But you can select other languages as well.

Now that you have the project setup on Tolgee, the next step is to generate the API key. This API key will allow your application to interact with the Tolgee platform. To generate the API key, select Integrate from the left sidebar menu. Next, under the Choose your weapon section, select Svelte. Click on the dropdown menu under the Select API key section, and select Create new +.

Enter the name for your API key in the Description field. Set the Expiration to Never expires.

Note: For the purpose of this tutorial, the Expiration is set to Never expires. Please make sure you are following the best security practices and have set a proper expiration time for the API key.

Next, under Scopes, select Admin. This will give you all the permissions. Click on Save, and your API key will be generated. Scroll down to the Setup your environment (with SvelteKit) section. Copy the URL and the API Key. You will need these in the next step.

Note: Before setting up the API key for production, carefully read and understand Scopes. You don’t want to give everyone the admin access.

Step 3 - Integrating Tolgee in the Svelte app

In the previous step, you configured the Tolgee platform by adding a new project and generating an API key. In this step, you will integrate Tolgee in your Svelte app.

First, at the root of your project, create a .env.development.local file. Paste the URL and the API key you copied in the previous step. Your file should contain the content as shown below, where <YOUR_TOLGEE_API_KEY> is the API key you generated.

VITE_TOLGEE_API_URL=https://app.tolgee.io
VITE_TOLGEE_API_KEY=<YOUR_TOLGEE_API_KEY>

Next, to start using Tolgee and make use of its SDK, you need to install the Tolgee SDK for Svelte. To install this SDK, execute the following command in your terminal.

npm install @tolgee/svelte

You have installed the required SDK and also have the API key to connect to Tolgee. In the next step, you will initialize the Tolgee SDK for your app.

Step 4 - Initializing Tolgee for Svelte

Tolgee comes with a provider component. This component provides the required context to all the children components it gets wrapped on. You will use this provider component to wrap all the child components with some configurations.

Open up the src > routes > +layout.svelte file and paste the following code under the <script> tag. This line of code imports the required methods from the Tolgee SDK.

import { TolgeeProvider, Tolgee, DevTools, FormatSimple } from '@tolgee/svelte';

Next, to configure Tolgee, add the following code under the import statement.

const tolgee = Tolgee()
  .use(DevTools())
  .use(FormatSimple())
  .init({
    defaultLanguage: 'en',
    availableLanguages: ['en', 'de']
    apiUrl: import.meta.env.VITE_TOLGEE_API_URL,
    apiKey: import.meta.env.VITE_TOLGEE_API_KEY,
  });

In the above code, you initialize Tolgee passing on the DevTools and FormatSimple methods. You also configure the default and available languages for your app. Lastly, you configure your Tolgee credentials.

Your updated <script> tag should be as follows.

<script>
    import Navbar from '../components/Navbar.svelte';
    import { TolgeeProvider, Tolgee, DevTools, FormatSimple } from '@tolgee/svelte';

const tolgee = Tolgee()
  .use(DevTools())
  .use(FormatSimple())
  .init({
    defaultLanguage: 'en',
    apiUrl: import.meta.env.VITE_TOLGEE_API_URL,
    apiKey: import.meta.env.VITE_TOLGEE_API_KEY,
    availableLanguages: ['en', 'de']
  });
</script>

Now that you have imported the provider and configured it, the next step is to wrap the children components. In your +layout.svelte file, update the HTML code as follows.

<TolgeeProvider tolgee="{tolgee}">
  <div slot="fallback">Loading...</div>
  <div class="min-h-screen bg-gray-100">
    <Navbar />
    <div class="container mx-auto px-4 py-8">
      <slot />
    </div>
  </div>
</TolgeeProvider>

In the above code, you wrap the children components under the <TolgeeProvider> component. You pass the tolgee configuration and add a fallback component. While the translation gets loaded, the user will see this fallback component. You can modify this fallback component.

Step 5 - Implementing localization

In the previous step, you have initialized Tolgee. In this step, you will learn to implement localization using Tolgee. You will update the navigation bar option elements. These elements will render the localized content for the selected language.

In your src > components > Navbar.svelte file, import the T component (Translation component) from the Tolgee SDK. Paste the following code in the <script> tag.

import { T } from '@tolgee/svelte';

Next, replace the text for anchor tag with <T keyName=”navbar_<VALUE>” defaultValue=”<VALUE>”/>. Here, <VALUE> is the title of the page. The T component takes keyName and defaultValue as parameters. The keyName parameter helps to identify the content. For each unique translating content, its value should be unique. The defaultValue parameter takes the value that should be rendered by default. Your +Navbar.svelte file should be as follows.

<script>
  import { T } from '@tolgee/svelte';
</script>

<nav class="bg-white shadow">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center py-6">
      <div class="text-xl font-semibold text-gray-900">My Blog</div>
      <div class="space-x-4">
        <a href="/" class="text-gray-600 hover:text-gray-900"
          ><T keyName="navigation_home" defaultValue="Home"
        /></a>
        <a href="#" class="text-gray-600 hover:text-gray-900"
          ><T keyName="navigation_about" defaultValue="About"
        /></a>
        <a href="#" class="text-gray-600 hover:text-gray-900"
          ><T keyName="navigation_contact" defaultValue="Contact"
        /></a>
      </div>
    </div>
  </div>
</nav>

Run the development server by executing the following command and navigate to http://localhost:5137.

npm run dev

One of the features of Tolgee is in-context translation. In the previous step, you configured the Dev Tools provided by the Tolgee SDK. Press and hold the Option/ALT key on your keyboard and hover over the title. You will observe a red border around the title. If you click on the title holding the Option/ALT key, a Quick Translation window pops up. This is where you can add translation and screenshots.

Step 6 - Using in-context Translation

In the previous step, you implemented the T component. This enabled you to use in-context translation for your app. In this step, you will use in context translation to add translation.

To get started with in-context translation, press and hold the Option/ALT key and click on Home. It will open up a pop window.

Enter the English blog title in the English field. Add the German translation of the title in the German field. Optionally, you can add screenshots in the Screenshot section. Click on Save to save your translation.

You can view this translation on the Tolgee platform. You can also modify it via the platform or via in-context translation option.

There might be scenarios where you want to use the platform to manage translations. In the next step, you will learn how to add translation on the platform.

Step 7 - Manage Translation on the Platform

To use the platform to manage translation, make sure you are logged into the platform. Next, navigate to the project you created for this application. Click on Translations from the left sidebar. You will see the translation for Home is already available there.

To add translation for the About option, click on + on the right corner. Enter navigation_about in the Key field.

Note: The key must be unique. It should match the value you pass to the T component.

Enter the English translation in the English field and click on Save. This will generate the key.

To add the German translation for this key, click on German under navigation_about. Tolgee uses various APIs to provide the translations. You can use one of the provided translations or add your own. To use the translation that Tolgee provides, select one of the translations from the Machine Translation section. Click on Save, to save the translation.

You now have translations for Home and About. However, you can’t really view them in your app without changing the language. In the next step, you will add a language switcher for your application.

Step 8 - Adding a Language Switcher

Irrespective of where the user is based, you should give the user an option to view the content in the language of their choice. Adding a language switcher to your app can help the user select the language from available choices. In this step, you will add a language switcher.

To add a language switcher, open the Navbar.svelte file and update the <script> tag with the following code.

import { T, getTolgee, getTolgeeContext } from '@tolgee/svelte';

const { tolgee } = getTolgeeContext();
const availableLanguages = tolgee.getInitialOptions().availableLanguages;

In the above code, you import the required methods. You get the reference to the Tolgee instance you configured in Step 4. Next, you get the list of all the configured available languages for your app. You will use this list to provide options to the users.

You also need to add a function that listens to the change of language. Paste the following in the <script> tag to add this function.

const t = getTolgee(['language']);

function handleLanguageChange(e) {
  $t.changeLanguage(e.currentTarget.value);
}

The above subscription function listens for the change in language. When the language changes, it gets updated and the respective translated content is displayed to the user.

The last step is to show the user a switch component. To add this component, paste the following code under the <div id=”switch”> tag.

<select value="{$t.getLanguage()}" on:change="{handleLanguageChange}">
  {#each availableLanguages as lan}
  <option>{lan}</option>
  {/each}
</select>

Your finished Navbar.svelte file should have the following code.

<script>
  import { T, getTolgee, getTolgeeContext } from '@tolgee/svelte';

  const { tolgee } = getTolgeeContext();
  const availableLanguages = tolgee.getInitialOptions().availableLanguages;

  const t = getTolgee(['language']);

  function handleLanguageChange(e) {
    $t.changeLanguage(e.currentTarget.value);
  }
</script>

<nav class="bg-white shadow">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center py-6">
      <div class="text-xl font-semibold text-gray-900">My Blog</div>
      <div class="space-x-4">
        <a href="/" class="text-gray-600 hover:text-gray-900"
          ><T keyName="navigation_home" defaultValue="Home"
        /></a>
        <a href="#" class="text-gray-600 hover:text-gray-900"
          ><T keyName="navigation_about" defaultValue="About"
        /></a>
        <a href="#" class="text-gray-600 hover:text-gray-900"
          ><T keyName="navigation_contact" defaultValue="Contact"
        /></a>
      </div>
      <div id="switch">
        <select value="{$t.getLanguage()}" on:change="{handleLanguageChange}">
          {#each availableLanguages as lan}
          <option>{lan}</option>
          {/each}
        </select>
      </div>
    </div>
  </div>
</nav>

Save the file with the updated code. Start the development server, if it is not running already. The navigation bar should have a language switcher. Try changing the language, and you should see the respective translated content.

Congratulations, you have successfully implemented localization to your Svelte app using Tolgee.

Conclusion

Tolgee allows you to seamlessly implement localization to your app. It provides features like in-context translation and SDK that makes it easy for your team to manage translations.

In this article, you learned about Tolgee and how to integrate it with Svelte. You implemented localization to the navigation bar. Which means, you only scratched the surface! The next step is to implement localization to the rest of your application.

If you ran into issues while following this tutorial, feel free to hit me up on LinkedIn/X (formerly Twitter). I would be happy to help you. If you have more questions about Tolgee, I encourage you to join the official Slack workspace.

I am looking forward to seeing your localized apps!

Airtable automation: How I streamlined submissions to the Developer Showcase

Harshil Agrawal — Thu, 13 Oct 2022 14:28:58 +0000

NOTE: This post was first published on the Contentful Blog.

In April 2022, we launched the Developer Showcase to highlight the work of the community. Developers share their projects, apps, videos, or blog posts they’ve created around Contentful. The developer showcase has become the go-to place to see what others are building and get inspired!

If you’ve worked on a project that you believe can help the community, you can go to the Developer Showcase page, and submit the form. If your project meets the criteria, you get an email from us for the next step. In this step, you share more information about the project and yourself. This information is then used on the Developer Showcase page.

The process seems straightforward, but there are a lot of repetitive tasks that are being performed behind the scenes. In this tutorial, I’ll share how automated processes using Airtable and a few other integrations got myself some time back!

The manual process and challenges

As mentioned above, if a developer is interested in adding their project to the showcase, they submit a form on the website with initial details. Once the form is submitted, the developer relations (DevRel) team gets a notification over email with the submission details. We then manually enter the details into a Google Sheet.

Imagine, getting submissions every day, and you have to fill out entries in the Google Sheet manually! Yes, data entry is monotonous and time-consuming. I knew it could be automated and save us time.

After the details were entered in the Google Sheet, team members would review the submissions weekly. We’d check and decide if the submissions met the criteria. If the submission was a good fit, the developer would receive an email from us asking them to fill out another form with more details. The information shared via this form would get added to a Contentful space, which was being used to manage the content on the Developer Showcase page (yes, we use Contentful at Contentful!).

The above process was also manual. We had to manually add the relevant information shared via the form to the Contentful space. This again cost us time. I recognized this as another task that could be automated.

Both the tasks were manual, which meant that the chances of human error were high. There were situations where I would enter the information in the wrong columns when I was in a hurry. This was also becoming monotonous.

Automating the boring parts

I take pride in being lazy! My laziness helps me find solutions that make my tasks joyful. Now that I recognized two tasks that could be automated, I started looking for solutions.

My first step was to migrate to a spreadsheet-like tool that provided better features than Google Sheets. I was looking for a tool that would allow me to easily create automation workflows, configure different views, and also have an easy-to-use API.

Luckily for me, we already use Airtable at Contentful for various projects. I created a base in Airtable for the Developer Showcase which would contain all the details — from the initial form submission details to the final details.

Everyone in the DevRel team is involved in the showcase. All of us decide if a submission should be added to the Developer Showcase. We handle this by voting. For every member of the team, I created a view that would list all the submissions that they haven’t viewed. Having an individual view made it easy for my team to go in, view the project, leave their thoughts, and vote. It hardly takes them 15 minutes now!

The migration to Airtable also involved creating automation to handle the form submissions. After setting up the table and the individual views, I created an automation workflow in Zapier.

This workflow would get triggered whenever there was a submission made to the Developer Showcase form. The workflow would then add the new record to the Airtable base, and also send a Slack message to notify us. All I had to do now was to check if the submission was valid and if it was, update the Valid column in Airtable.

The above workflow replaced the manual labor of entering the data into Google Sheets. The first task was now automated!

Connecting Airtable to Contentful

The other time-consuming task was entering the final details of the submissions to Contentful, and I wanted to automate it next. Now that we were using Airtable to manage the data, I re-created the template for the final submission form in Airtable. This enabled us to capture the data in Airtable itself. Whenever a developer submitted this form with the details, it now got saved in Airtable. There was no need to create an automation workflow to handle it!

The data from the final form submission was in Airtable, and not Contentful, yet. To get this data added automatically to Contentful, I created a workflow in Airtable. If you’re using Airtable, you might know that Airtable doesn’t have webhooks (at the time of writing this article). This means that whenever data is created or updated, you can’t trigger external events.

To overcome this, you can either create automation workflows that run at a certain interval of time, or check for new data and then process that data. A better and faster solution is to use automation within Airtable. It allows you to trigger actions when data is entered or updated.

I created a workflow in Airtable to handle the above scenario. Every time a developer submitted the final form, this workflow would get triggered. It is out of the scope of this article to walk you through all the steps of creating the automation workflow. But, below I’m sharing the code snippet that populates Contentful with the data.

Once the form is submitted, the workflow gets triggered. The next step is to create an action that will add the content to Contentful. Airtable doesn’t have an in-built action for Contentful, so there isn’t a no-code or even a low-code solution available just yet. However, it has an action that allows you to run custom JavaScript code.

While working with this action, I learned that you can’t import npm packages. Hence, using the Contentful Management JavaScript SDK was not possible. Fortunately, Contentful has a REST API to interact with the Management API! I wrote the following code in the “Run a Script” action. This script populated the Contentful space with the data from Airtable.

// @ts-ignore
const SPACE_ID=SPACE_ID
const URL = `https://api.contentful.com/spaces/${SPACE_ID}`
const inputConfig = input.config();
const AUTHORLINK = 'authorLink';
const AUTHOR = 'author';
const ENTRY = 'entry';

const linkId = [];
let authorId;

const makeCall = async (endpoint, method, contentType, body) => {
  return fetch(URL+endpoint, {
    method: method,
    headers: {
      Authorization: 'Bearer MANAGEMENT_TOKEN',
      'Content-Type': 'application/vnd.contentful.management.v1+json',
      'X-Contentful-Content-Type': contentType
    },
    body
  })
}

const checkLinkType = (link) => {
  if(link.includes('github')) {
    return 'Github'
  } else if (link.includes('linkedin')) {
    return 'LinkedIn'
  } else if (link.includes('twitter')) {
    return 'Twitter'
  } else if (link.includes('youtube')) {
    return 'YouTube'
  } else {
    return 'Website'
  }
}

const addAuthorLink = async () => {
    const links = inputConfig.authorLink.split(',');
    for (var link of links) {
        let linkType = checkLinkType(link)
        const response = await makeCall('/environments/master/entries', 'POST', AUTHORLINK, JSON.stringify(
            {
                "fields": {
                    "internalTitle": {
                        "en-US": `${inputConfig.authorName}'s ${linkType}`
                },
                "type": {
                    "en-US": `${linkType}`
                },
                "link": {
                    "en-US":`${link}`
                }
            }
        }))
        const res = await response.json();
        linkId.push(await res.sys.id)
    }
    return linkId
}

const addAuthor = async () =>{
    const links = linkId.map(link => {
        return {
            "sys": {
                "type": "Link",
                "linkType": "Entry",
                "id": link
            }
        }
    })

    const response = await makeCall('/environments/master/entries', 'POST', AUTHOR, JSON.stringify({
        "fields":{
            "name": {
                "en-US": `${inputConfig.authorName}`
            },
            "bio":{
                "en-US": `${inputConfig.authorBio}`
            },
            "links": {
                'en-US': links
            }
        }
    }))
    const res = await response.json();
    authorId = await res.sys.id;
}

const addEntry = async() =>{ 
    const response = await makeCall('/environments/master/entries', 'POST', ENTRY, JSON.stringify({
        "fields": {
            "title": {
            "en-US": `${inputConfig.projectTitle}`
            },
            "description": {
            "en-US": `${inputConfig.projectDesc}`
            },
            "link": {
            "en-US": `${inputConfig.projectLink}`
            },
            "author": {
                "en-US": {
                    "sys": {
                    "type": "Link",
                    "linkType": "Entry",
                    "id": authorId
                    }
                }
            },
            "type": {
              "en-US": {
                "sys" : {
                  "type": "Link",
                  "linkType": "Entry",
                  "id": "FIELD_ID"
                }
              }
            }
        }
    }))
    const res = await response.json();
    console.log(await res)
}

(async () => {
    await addAuthorLink()
    await addAuthor()
    await addEntry()
})()

Walking through the code

Let’s break down the code to understand what is happening. The first few lines are defining some variables that we need later in the code. This includes the space ID, URL of the Management API, content type IDs, as well as the input object from Airtable.

We then define a reusable function makeCall that takes the API endpoint, HTTP method, content type, and the body as the parameters. We use this function to call the Management API.

An author of a Developer Showcase submission can share social links. These links are displayed on the respective author page, e.g., one of our top contributors Teemu Tammela. To identify the type of this link, we are using the checkLinkType function. It returns the type that we have configured in Contentful.

Next, we define the addAuthorLink function. This function creates an array of links shared by the author, gets the link type, and adds them to Contentful. It also returns an array of link IDs that get used in the addAuthor function.

The addAuthor function adds all the information about the author, as well as adds references to the links. The final result, a new entry of the author, is now available with references to the author’s social media accounts.

Lastly, the addEntry function adds the project details and references the author. Since the type of project has not been asked in the form, it is hard-coded. The type is manually updated before the entries are published.

The last action in this automation workflow is sending a message on Slack. Since Airtable has an built-in app for Slack, it was straightforward to set it up!

To summarize the above workflow, every time the Airtable form was submitted, the automation would be triggered. It will execute the “Run a script” action, that runs the above code and adds the content to Contentful. Once the content is successfully added, a message is sent on Slack.

All we have to do now is log in to the Contentful space, review the newly created entries, add the missing assets, and publish the changes!

What’s next?

These workflows have saved us a huge amount of time! We don’t have to manually add data, and we can focus more on highlighting the amazing work the community is doing!

The code currently doesn’t handle images, however. We manually have to add them to Contentful. I couldn’t find a good solution to handle images in Airtable, and I am still on the lookout. If you have worked with images in Airtable and have a solution, please let me know!

There are a lot of other tasks that can be automated in the whole process. But my experience with automation has taught me one thing — start small and automate the things you do often. It has helped me not over-engineer a simple solution.

Now that I have more free time, why don’t you share what you’ve created with Contentful? I would love to see it and share it with the community. Also, let me know which Developer Showcase entries you find the most interesting!

What is TypeScript and why should you use it?

Harshil Agrawal — Thu, 01 Sep 2022 10:04:30 +0000

NOTE: This article originally appeared on the Contentful Blog

I’ve been learning and using TypeScript for the past year for various projects, and I have been enjoying it. TypeScript provides a great developer experience, and I believe that it has increased my productivity. I don’t have to manually check for errors every time a change gets made, and the inline documentation helps me ship faster. In this article, I will give you an overview of TypeScript, share some of its features, and help you get started.

Before learning about TypeScript, let’s take a step back and revisit JavaScript. Since the earliest days of the World Wide Web, JavaScript has been used to make websites interactive – handle mouse and keyboard events, validate forms, and so on. With time, the language evolved. You can now use JavaScript to build websites and apps for any platform. It can be used to code both the frontend and backend of your website/app. You can build cross-platform apps using React Native and desktop apps with Electron, and you can even use JavaScript for your next IoT project!

With these extensive use cases, the complexity in the codebase increased. For smaller projects, using JavaScript is still fine. However, for larger projects, it became difficult to debug the code and catch errors.

What is the difference between TypeScript and JavaScript?

TypeScript is a superset of JavaScript. It means that TypeScript provides all the features and functionalities of JavaScript with some added features. TypeScript compiles to JavaScript, which the browser understands. TypeScript provides “type safety” (hence the name!) to JavaScript. It was created by Microsoft and is open source. If you’re interested in contributing or just going through the source code, you can find the repository on GitHub.

To understand type safety, consider an example where you define a variable name. In JavaScript, you would use a similar code as below:

var name = "Harshil"

Since this is a variable name and we haven’t defined its type, this variable can have any value. It doesn’t matter if it’s a string, number, boolean, or object. Hence, the below code will execute without errors:

name = 17

name = false

name = {
first: "Harshi",
last: "Agrawal:
}

Using TypeScript, you can define the type string for the variable name, as below:

var name :string = "Harshil"

If you change its value to any other type, the compiler returns an error. Type safety saves a lot of debugging time and helps in keeping the code consistent.

Features of TypeScript

TypeScript extends JavaScript and improves the developer experience. It enables developers to add type safety to their projects. Moreover, TypeScript provides various other features, like interfaces, type aliases, abstract classes, function overloading, tuple, generics, etc. Explaining all the features is out of the scope of this article. However, I will present two that I find useful.

Interface

You receive an object when you call any Contentful API. This object response contains the necessary data that you need. Similar to the Contentful API, other APIs also send an object as a response.

Interfaces get used to ensure that the object contains the required data with the correct data type. This object can be a response or request body or parameters for a function.

An interface has the following syntax:

interface interfaceName {
    variableOne: type;
    variableTwo: type;
}

Using the above syntax, we can create an interface Profile with the properties name and social.

interface Profile {
    name: string;
    social: string;
}

The above interface can be used as follow:

function hello (params: Profile) {
    return "Find " + params.name + " here " + params.social
}

The above is a simple example of interfaces. There are various other functionalities that interfaces provide. You can set optional properties, extend interfaces to add new properties, and more. To learn more about interfaces, refer to the TypeScript documentation.

Literal Types

Another feature that I find useful is Literal Types. Though, by themselves, they’re not so useful. But one can combine them into unions, which makes the Literal Types useful.

The following example demonstrates the syntax of Literal Types.

let social: "twitter" = "harshil1712"

Here, the variable social has the type “twitter.” However, this isn’t useful on its own.

function greet(message: string, name: "Alice" | "Bob" ){
    //...
}
greet("Hello", "Alice" );
greet("Hey", "Bob");
greet("Hey", "Max"); // Argument of type '"Max"' is not assignable to parameter of type '"Alice" | "Bob"'.

In the above function, the second parameter can only take values that have the type of either “Alice” or “Bob.” This helps us in writing functions that only accept a certain set of known values. They can do much more with Literal Types. Read the official documentation to learn more.

How to use TypeScript?

Now that you have a basic understanding of what TypeScript is, in this section, you will learn how to use TypeScript.

Browsers don’t understand TypeScript. They understand JavaScript code. Hence, the TypeScript code needs to get compiled into JavaScript, and for that, you need the TypeScript compiler.

You can install TypeScript globally using the following npm command. The global installation allows you to run the tsc command anywhere from your terminal.

npm install -g typescript

Once you have installed TypeScript, create an index.ts file and add the following code:

let message:string = "Hello, World!"

function greeting () {
    console.log(message);
}

greeting()

The above code declares a variable message and creates a function that logs the message to the console. To run this code, you have to compile it to JavaScript. Run the following command:

tsc index.ts

You’ll observe that the compiler creates an index.js file with the compiled code.

The TypeScript compiler is flexible and allows you to configure options like the target JavaScript version. At the time of writing this article, the default target is es3.

To configure the compiler options, you can either pass them with the CLI command or create a tsconfig.json. You can learn more about the various configuration options on the TSConfig Reference documentation page.

If you want to use TypeScript in your next Contentful project, we released contentful.js v10 in Beta with enhanced TypeScript support. Check out the changelog and let us know what you think!

Advantages of using TypeScript

TypeScript extends JavaScript, providing a better developer experience. The benefits of using TypeScript over JavaScript include:

Static typing – TypeScript comes with optional static typing and a type inference system, which means that a variable, declared with no type may be inferred by TypeScript based on its value.
Object oriented programming – TypeScript supports object-oriented programming concepts like classes, inheritance, etc.
Compile time checks – JavaScript is an interpreted programming language. There is no compilation involved. Hence, the errors get caught during the runtime. Since TypeScript compiles into JavaScript, errors get reported during the compile time rather than the runtime.
Code editor support – IDEs or code editors like VS Code support autocomplete for a TypeScript codebase. They also provide inline documentation and highlight the errors.
Use existing packages – You might want to use an npm package that is written in JavaScript. Since TypeScript is a superset of JavaScript, you can import and use that package. Moreover, the TypeScript community creates and maintains type definitions for popular packages that can be utilized in your project. You can learn more about it here.

What is the best way to learn TypeScript?

TypeScript comes with tons of features, and learning and implementing them all together might get overwhelming. I started learning TypeScript by refactoring my JavaScript codebase to TypeScript one line at a time. This helped me to migrate my codebase to TypeScript with minimal effort and helped me dive deeper into the concepts.

The TypeScript Handbook is a great place to learn about TypeScript. It explains the concepts well and contains relevant examples. The handbook is also regularly updated with new features.

There are also tutorials available that will help you with migrating your JavaScript project to TypeScript or help you learn about DOM manipulation in TypeScript.

The Contentful community members have also created apps and tools that can help generate type declarations for your content types and sync TypeScript with your content model.

If you’re looking for your next TypeScript project, why don’t you create an app for your Contentful space with App Framework? The boilerplate is available in TypeScript, where you can learn or brush up your TypeScript knowledge. Happy type checking!

How to automatically manage contributions to open-source projects 🏷️

Harshil Agrawal — Fri, 26 Nov 2021 08:05:18 +0000

October is an exciting month, with people across the world looking forward to Halloween or Oktoberfest. But for me, I'm most excited about Hacktoberfest–the month-long celebration of open-source projects. DigitalOcean has been organizing this event for the past eight years with the goal of encouraging the global tech community to support open-source projects.

Hacktoberfest provides a great opportunity on one side for individual developers to apply their skills on real-world projects, and on the other side for organizations to extend their projects with the help of contributors.

However, the popularity of Hacktoberfest also creates spam, unnecessary pull requests, and loads of comments on GitHub issues, which can become overwhelming for the project owners and maintainers.

Our solution to this problem? Automation! In this tutorial, you will learn how to create a no-code workflow that automatically assigns an open GitHub issue to a contributor interested in working on it.

Prerequisites for building the workflow

Workflow for assigning GitHub issues to contributors
1. Trigger the workflow on GitHub events
2. Route the workflow on specific events
3. Handle new GitHub issues
4. Assign the issue
5. Handle new comments on GitHub issues
6. Check if the issue is already assigned
7. Assign an issue to a contributor
8. Add a comment to the issue
What's next?

Workflow for assigning GitHub issues to contributors

Prerequisites for building the workflow

n8n: Sign up for n8n.cloud to quickly get started or use n8n on your own servers. Refer to the installation guide to learn more.
GitHub account: To connect the workflow with your GitHub account, follow the steps mentioned in the documentation.

Workflow for assigning GitHub issues to contributors

The general idea of this workflow is to assign an issue to the contributor who is interested in working on it. There are four scenarios that you need to consider:

A contributor creates an issue and wants to work on it.
A contributor creates a new issue and doesn't want to work on it.
A contributor is interested in working on an issue reported by another contributor and no one got assigned to it.
A contributor is interested in working on an issue opened by another contributor, but someone else has already been assigned to it.

In popular open-source projects, you usually meet all these scenarios. If you're a project maintainer, you know it can become difficult to manage the contributions efficiently, especially during events like Hacktoberfest.

The visual builder that n8n provides helps you classify and handle issues automatically. Let's dive into it!

1. Trigger the workflow on GitHub events

The workflow should run every time someone opens a new issue or comments on an issue. For this, add the GitHub Trigger node and configure the following parameters:

Authentication: If you're using n8n.cloud, I suggest you select the OAuth2 authentication method. This option allows you to connect the node with your GitHub account without the need to create credentials. Otherwise, you can learn how to create the credentials from our documentation.
Repository Owner: Enter your GitHub username.
Repository Name: Enter the name of your repository.
Events: Select issue_comment and issues from the dropdown menu.

Configuration of GitHub Trigger node

Now the workflow will run when a new issue gets created, closed, or edited, or when a comment gets posted, removed, or edited.

Note: If you want to use this workflow for a repository that belongs to an organization, you will have to use the Webhook Trigger node. Refer to the GitHub documentation to learn to add webhooks to your repository.

2. Route the workflow on specific events

The workflow should continue only when a new issue gets created or a new comment gets posted. To identify these events, add a Switch node and set the following parameters:

Data Type: String
Value 1: Use the expression {{$json["body"]["action"]}}

Click on the Add Routing Rules button. For this workflow, you need two different routes, one to handle each event mentioned above.

The first routing rule handles the scenario where a new issue gets created. For this, configure the following parameters:

Operation: Equal
Value 2: opened
Output: 0

The second routing rule will navigate the data to output 1 of the Switch node when a new comment gets posted on an issue. For this, use the following values:

Operation: Equal
Value 2: created
Output: 1

Configuration of Switch node

3. Handle new GitHub issues

Contributors who open a new issue may or may not want to contribute to it. To make sure that you assign the contributor only if they're interested in working on it, add an IF node connected to the output 0 of the Switch node.

Configure the IF node as follow:

Value 1: Add the expression {{$json["body"]["issue"]["body"]}} in the Expression Editor.
Operation: Regex
Regex: /[a,A]ssign[\w*\s*]*me/gm

The above condition checks if the user wants you to assign them the issue or not.

The workflow should also check if the issue has already been assigned to a contributor or not. For this, add another condition in the IF node. This condition should be of the type Number. Set the following parameters for this condition:

Value 1: Use the expression {{$json["body"]["issue"]["assignees"].length}}
Operation: Equal
Value 2: 0

Configuration of IF node for new GitHub issues

4. Assign the issue

The next step is assigning the issue to the interested contributor and label the issue as assigned. To do this, connect a GitHub node to the true output of the IF node and

Configure the parameters of the node as follows:

Authentication: Use the authentication that you used in the GitHub Trigger node
Resource: Issue
Operation: Edit
Repository Owner: Enter your GitHub username or use the following expression: {{$node["Switch"].json["body"]["repository"]["owner"]["login"]}}
Repository Name: Enter the name of the repository you previously used, or use the following expression: {{$node["Switch"].json["body"]["repository"]["name"]}}
Issue Number: Use the expression {{ $json["body"]["issue"]["number"] }}

Click on Choose Option To Add, and select Labels. Similarly, add the Assignees option. Configure these parameters as follow:

Label: Enter assigned or any other label you want to add to the issue.
Assignees: Enter the following expression: {{$json.body.issue["user"]["login"]}}

Configuration of GitHub node for issue assignment

5. Handle new comments on GitHub issues

Your workflow currently handles the following situations:

Assigning the issue to the contributor who opened the issue if the contributor is interested in working on it
Stopping the workflow if the contributor who opened the issue is not interested in working on it.

You now have to design the workflow that handles the other two scenarios. For this, add an IF node connected to output 1 of the Switch node. This node will check if the contributor is interested in working on the issue. Set the following parameters for the IF node:

Value 1: Use the expression {{$json["body"]["comment"]["body"]}}
Operation: Regex
Regex: /[a,A]ssign[\w*\s*]*me/gm

Configuration of IF node for interested contributors

6. Check if the issue is already assigned

If a contributor is interested in working on an issue, the workflow should assign them to the issue, but it should also check if someone has previously been assigned to the issue or not. To check this, connect an IF node to the true output of the previous IF node. Set the IF node as follow:

Value 1: Enter the expression {{$json["body"]["issue"]["assignees"].length}}
Operation: Equal
Value 2: 0

If no one is assigned to the issue, this node returns true, otherwise false.

Configuration of IF node for assigned issues

7. Assign an issue to a contributor

To assign available issues to an interested contributor, connect a GitHub node to the true branch of the previous IF node.

Configure the parameters similarly to the previous GitHub node. In the Assignees fields, use the expression {{$json["body"]["comment"]["user"]["login"]}}. The rest of the parameters should stay the same.

8. Add a comment to the issue

If the issue has already been assigned to a contributor, you should the interested contributor know about it. For this, connect a new GitHub node to the false branch of the IF node. This node will add a comment to the issue.

Set the node parameters as follows:

Authentication: Similar to the previous GitHub node
Resource: Issue
Operation: Create Comment
Repository Owner, Repository Name, Issue Number: Similar to the previous GitHub node
Body: Enter the comment body in this field.

Configuration of GitHub node for commenting on issues

This is the last node in the workflow. Now you only need to activate the workflow by clicking on the toggle in the top right corner of the Editor UI. The active workflow will run automatically in production.

What's next?

In this article, you learned to create a no-code workflow that automatically assigns GitHub issues to interested contributors. This kind of automation will help you and our organization maintain your open-source projects–just in time for Hacktoberfest!

Here's what you can do next:

Build more workflows: There are many other possible automation workflows that could improve your work as a project maintainer and the experience for your contributors. For example, you can build a workflow that checks the progress on an assigned issue to see if the contributor needs help.
Contribute to n8n: You can work on open issues, create nodes, improve our docs, or write a blog post.
Read more tutorials: Learn how to build workflows for other automation use cases, for example a no-code CI/CD pipeline with GitHub and TravisCI.

I'd like to know how you are using automation to manage your open-source projects! Feel free to message me on Twitter or discuss in the community forum 🧡 And if you want to get the latest content on automation, subscribe to our newsletter 💌

This post originally appeared on the n8n.io blog.

Creating triggers for n8n workflows using polling ⏲

Harshil Agrawal — Thu, 14 Jan 2021 12:35:39 +0000

One of the key features of n8n is the ability to use Trigger nodes. Trigger nodes are special nodes that listen for events and then start a workflow. For example, you can build a workflow using the ClickUp Trigger node and a Google Sheets node. Whenever a new task gets created in ClickUp, the workflow would execute, and the data gets added to the Google Sheet. This makes Trigger nodes extremely useful, as you can monitor events across different services using them.

Creating triggers for n8n workflows using polling

Once you start using several of these different Trigger nodes, you wonder what happens when you want to listen for an event from a service that does not have a Trigger node. For example, Google Sheets and Twitter (at the time of writing this tutorial — n8n@0.101.0) don’t have a Trigger node.

In this article, we are going to discuss how you can monitor changes and execute workflows for services that do not support webhooks and don’t have Trigger nodes in n8n.

Monitoring changes in Google Sheets every 45 mins

Introduction to polling

In a conventional n8n Trigger node, the node listens for events using a webhook. In this method, the service sends an update to the Trigger node when an event occurs. While polling works by periodically checking for new data by connecting to the server.

In this process, n8n will connect to the server every X time (every second/minute, etc) and check if there is any new data.

Difference between polling and webhook

Not every platform supports sending updates via a webhook and this is where polling comes to the rescue. Using polling we can check for updates and execute our workflow if data gets added or updated.

How to poll using n8n?

If you break down the polling process, as described in the image above, you realize that it is possible to replicate the same functionality in n8n. The Interval node or the Cron node triggers the workflow periodically to fetch data from a service. We pass this data to the Function node, where all the magic happens.

In n8n, the getWorkflowStaticData() method allows access to the static workflow data. We can save the data directly with the workflow, but this data has to be small. On every execution, the Function node compares the incoming data with the data from the previous execution. If the data got changed, we pass it to the next node in the workflow. We also update the static data with this new data so that the next execution knows what data gets stored in the previous node. If the data did not get changed, you may return a message based on our use-case.

Polling in n8n

Trigger a workflow when new data gets added to your Google Sheets

I wanted to run a workflow every time there was new data added in Google Sheets, so I created a polling workflow. Follow along the steps mentioned below to learn to create a polling workflow.

Prerequisites

Set up n8n

Follow the instructions mentioned in the documentation to install and spin-up an n8n instance on your machine. You can also sign-up for n8n.cloud to get access to our hosted service.

Set up a Google Sheet

Create a Google Sheet like this Google Sheet. We will monitor this sheet for new data that gets added. Feel free to make a copy of my Sheet.

Google Sheet used in this tutorial

We will also need to configure credentials for the Google Sheets node. For this tutorial, we will use the OAuth authentication method. You can learn to configure the OAuth credentials by following the steps mentioned in the documentation.

Set up Mattermost

We will send a message to a channel in a Mattermost team if new data gets added. Create a Mattermost team if you don’t have one already.

You will also have to configure the credentials for the Mattermost node. Follow the instructions mentioned in the documentation to configure the credentials.

Quick Start

If you don’t want to get into the details and have experience building workflows in n8n, you can follow the quick-start instructions below. If something is unclear or you want to learn more about how it works, feel free to dig deeper into the sections that follow.

Access your n8n instance, and copy and paste the workflow from the workflow page. Configure the following nodes:

Google Sheets node

Use the credentials that you configured earlier.
Enter the Sheet ID of your Sheet in the Sheet ID field. If you’re not sure how to find the Sheet ID, refer to the section Google Sheets section below.

Note : If you change a column name in your Google Sheet, make sure to configure the Function node accordingly.

Mattermost node

Use the credentials that you configured earlier.
If you’re not the system administrator, enter the channel ID where you want the app to send the message in the Channel ID field. Otherwise, select the channel from the Channel ID dropdown list. Refer to the Mattermost section below, to learn more about the steps.

Save and execute the workflow!

Note : Activate the workflow to run it in production.

The Workflow

This workflow can be divided into three stages, as it progresses from start to finish:

Read Data
Extract New Data
Communication

Stage 1 — Read Data

Interval node (Execute every 45 mins)

The Interval node triggers the workflow at a regular interval of time. For this tutorial, we want to execute the workflow every 45 minutes.

Click on the ‘ + ’ button on the top right corner and click on the Trigger tab. Select the Interval node from the list to add the node.

Select ‘Minutes’ from the Unit dropdown list and set the value of Interval to 45.

Rename the node’s headline from “Interval” to “Execute every 45 mins” by clicking the name, editing it, and clicking the ✔ (checkmark) to the right of the name. This will finish the configuration of the node and close the parameters window. Select ‘Save As’ from the Workflow menu on the left sidebar. Once you save the workflow, click on the Execute Node button to execute the node.

Google Sheets node (Read data)

The Google Sheets node in n8n allows you to create new sheets and read, lookup, append, delete, and update data from a sheet. Our workflow will read the data from a Google Sheet every 45 minutes.

To add the Google Sheets node, click on the ‘ + ’ button, and select the Google Sheets node from the Regular section. Use the credentials that you configured earlier.

Copy the string of characters located between /d/ and /edit in your spreadsheet URL. This string is the Sheet ID. For example, for the URL https://docs.google.com/spreadsheets/d/1PyCgaglXSCbxVmHuwFbkKDF9e3PW\_iUn8T-iAd\_MYjQ/edit#gid=0 the Sheet ID is 1PyCgaglXSCbxVmHuwFbkKDF9e3PW_iUn8T-iAd_MYjQ. Enter this Sheet ID in the Sheet ID field in the Google Sheet node. Enter the range of the columns in the Range field. The range contains the column references corresponding to those on the spreadsheet. The range tells the Google Sheets node from which columns to read the data.

Rename the node to Read data and click on the Execute Node button. The node will return the data from the Google Sheet.

Stage 2- Extract new data

Function node (Check if new data)

Our workflow reads the data from a Google Sheet and returns all the data. However, we only want the data that was recently added. We will use the Function node to return only the data that was added after the previous execution.

To help you understand this better, let us take a look at an example. Our workflow ran at 1:00 PM and returned the following data:

New data was added to our Google Sheet at 1:20 PM. When your workflow will execute next, we only want this new data. Using the Function node we will return this new data. n8n has a getWorkflowStaticData() method that gives access to the static workflow data. We can save data directly with the workflow, however, this data should be very small. When the workflow execution succeeds, n8n will check automatically if the data has changed and will save it, if necessary.

Click on the ‘ + ’ icon and select the Function node from the list. In the Javascript Code editor, paste the following code snippet.

The above code snippet gets the static workflow data and checks for new items. If new items are found, it is added to an array and gets returned by the node. If the data remains unchanged, an empty array is returned by the node.

Rename the node to Check if new data and click on the Execute Node button.

Note : The static data can not be read and written when we’re building the workflow. Hence, on every execution, the node will return all the data. When the workflow is set to active and triggered by a Trigger node, the node will save the static data and return only the new data that was added (if any).

The following image shows the output returned by the node when the workflow is not active.

Output returned by the Function node when the workflow is not active

The following image shows the output returned by the node when the workflow is active.

Output returned by the Function node when the workflow is active

Stage 3- Communication

Mattermost node (Send message)

If new data was added to the Google Sheet we will send a message to Mattermost along with the new data. We will send a message to the updates channel. But you can select a different channel to send the message.

Click on the ‘ + ’ button and select the Mattermost node. Connect the node to the true branch of the Is new item? node. Use the credentials you configured earlier.

If you are not the system administrator of the Mattermost team, navigate to Mattermost and select the ‘updates’ channel from the left sidebar. Click on the caret next to ‘updates’ and select ‘View Info’ from the dropdown list. Copy and paste the displayed ID in the Channel ID field in the Mattermost node.

Finding channel ID of a Mattermost channel

If you’re the system administrator, select the ‘updates’ channel from the Channel ID dropdown list.

Click on the gears icon next to the Message field and select ‘Add Expression’. Enter the following expression in the Expression Editor.

Rename the node to Send message and click on Execute Node to run the node.

What’s next?

Currently, the Check if new data node in our workflow returns all the items since the static data is not getting saved. Save the workflow and toggle the Active, on the top right, to true. This will set our workflow to active and our workflow will execute every 45 mins. Add new data to the Google Sheets, and after 45 mins (for testing you can set the time to 2 mins!) you will receive a message on Mattermost.

Such polling workflows can be used for various use-cases. If you’re using Google Forms to collect data, and if the form adds the data to a Google Sheet, you can build a workflow that will trigger the workflow whenever there is a new form response.

Another interesting use-case can be for Twitter. You can build a polling workflow that executes every 10 mins. This workflow would fetch Tweets for your search criteria using the Twitter node and return the most recent tweets. At n8n, we use a similar workflow that sends a message to Mattermost with the recent Tweets. You can find the workflow on the workflow page.

A few more examples where polling can help:

Trigger a workflow when an event gets added to your Google Calendar using the Google Calendar node
Trigger a workflow when price changes for a cryptocurrency using the CoinGecko node
Trigger a workflow when new data gets added to your database (MongoDB, Postgres, etc.)

Summary

In this tutorial, we learned how polling can help us overcome a barrier for the nodes that do not have a Trigger node. We can use polling with the nodes that do not have a default Trigger node and build a workflow based to trigger actions when new data is added or updated.

We built a polling workflow that executes every 45 mins and reads data from a Google Sheet. If the data has been updated or new data has been added, the workflow sends a message to Mattermost.

I’d like to know about how you are using the concept of polling and building workflows with n8n! If you run into any issues while following the tutorial, feel free to message me on Twitter or ask for help on ourforum 🧡

This post originally appeared on the n8n.io blog.

Migrating Community Metrics to Orbit using n8n 📈

Harshil Agrawal — Fri, 18 Dec 2020 16:04:36 +0000

It has been more than two years since I have been involved in the community as an organizer. My journey started as a GitHub Campus Expert. My love for privacy and the open internet helped me become a Mozilla Representative, and I am now an Auth0 Ambassador too. This journey is teaching me new skills and pushes me to do better. This is the aim I have for the community as well. Every member should get the opportunity to grow, showcase their skills, and achieve their goals.

Migrating Community Metrics to Orbit using n8n

To know what everyone was up to, I started keeping records of the activities of the community members using Google Sheets. But with an ever-growing community, it became difficult. Every time a community member contributed, I manually added these records to a Google Sheet. The members of the community are very active, and it became difficult to keep up with the pace. Structuring data in Google Sheets for community metrics was also a painful task. The biggest challenge was making sense of these metrics. So I started using Orbit and connected my Google Sheets to it using n8n to transfer data automatically.

What is Orbit?

The Orbit model is a framework for building communities. Orbit makes it easy for community leaders and Developer Relations (DevRel) Leadership to easily keep track of the DevRel metrics and quantify the business impact.

I started at n8n as a Developer Advocate Intern and was excited to learn that we use Orbit for DevRel metrics. I had read about Orbit and was eager to know more about it. I explored Orbit for a while and ended up creating an n8n workflow that moved the metrics from Google Sheets to Orbit.

Like me, if you too manage DevRel metrics in Google Sheets (or Airtable), follow along the article to learn how you can move these metrics to Orbit using n8n.

Prerequisites

Orbit account

You can request access to Orbit by filling a form on their website. Once you have access to Orbit, create a workspace for your community.

Google account

I used Google Sheets to keep a record of the metrics in this spreadsheet. You will need a Google account to create a Google Sheet. Sign in to your Google account and open this sheet. Click on the File and select ‘Make a Copy’ from the dropdown list to copy the sheet in your account.

Note: If you change the name of the columns or the name of the sheet, make sure to make the changes in the n8n workflow accordingly.

n8n

We will connect Google Sheets to Orbit using n8n. Follow the instructions mentioned in the documentation to install and spin-up an n8n instance on your machine. You can also sign-up for n8n.cloud to get access to our hosted service (in beta).

Quickstart

If you don’t want to get into the details and have a bit of experience with n8n, you can follow the quick-start instructions below to get to the endgame. If something is unclear or you want to learn more about how it works, feel free to dig deeper into the sections that follow.

Access your n8n instance, and copy and paste the workflow from the workflow page. Configure the credentials for the following nodes:

Google Sheets node : configure the OAuth credentials and make sure you enter the correct Sheet ID in the Sheet ID field.

Get Members : This Google Sheet node fetches the data from the Members sheet. If your sheet has a different name, modify the Range field accordingly. If you’re using the Google Sheet shared earlier, enter the following range: Members!A:F.
Get Activities : We fetch the activities of our members from the Activities sheet. If you are using a different name for your sheet, modify the Range field accordingly. For the spreadsheet I shared earlier, enter the following range: Activities!A:D.

Orbit node : configure the credentials and select your workspace from the Workspace field.

Save and execute the workflow.

The final workflow in n8n

Moving data from Google Sheets to Orbit automatically

Our workflow will fetch the data of our community members and their activities from a Google Sheet and add the information in our Orbit workspace automatically. The workflow uses the following nodes:

Get Members (Google Sheets node)
Add Members (Orbit node)
Get Activities (Google Sheets node)
Get all members (Orbit node)
Merge
Add Activities (Orbit node)

1. Get Members (Google Sheets node)

We are storing our members’ information like their name, GitHub username, Twitter handle, etc. in a Google Sheet. We will use the Google Sheet node to fetch this information.

The following image shows the Members sheet in my Google Sheet.

Storing members’ information in Google Sheet

Follow the instructions mentioned in the documentation to configure the credentials for the Google Sheets node. Enter your Sheet ID in the Sheet ID field and enter a range in the Range field. If you’re using the Google Sheet shared earlier, enter the following range: Members!A:F.

Rename the node to Get Members and click on Execute Node to run the node.

The following image shows the output of the Get Members node.

Fetching members’ data using Google Sheets node

2. Add Members (Orbit node)

We will use the members’ data that we received from the previous node and pass it on to the Orbit node. To configure the credentials of the Orbit node, follow the instructions mentioned in the documentation.

Select the ‘Upsert’ operation and your workspace in the Orbit node. We are using the GitHub identity to add the members. Select ‘GitHub’ from the Source dropdown list and ‘Username’ from the Search By dropdown list. In the username parameter of the node, use the following expression: {{$json["GitHub"]}}.

In our Google Sheet, we also have information like Location, Tags, Name, and T-shirt size. We will add this information to Orbit as well. You can add this information by selecting them from the Add Field dropdown list. Enter the following expression in the Expression Editor of the respective fields.

Location : {{$json["Location"]}}
Name : {{$json["Name"]}}
Tags to Add : {{$json["Tags']}}
T-Shirt : {{$json["T-Shirt Size"]}}

Rename the node to Add Members and click on Execute Node to run the node.

The following image shows the output of the Add Members node.

Adding members to Orbit

3. Get Activities (Google Sheets node)

Keeping only the data of the community members is not that useful. We also need to keep records of their activities. This record helps us understand the contributions the community members make, the type of content they are involved with, and other critical insights.

The following image shows the Activities sheet in my Google Sheet.

Storing members’ activities in Google Sheet

We will get the records of the activities of our community members from the Google sheet and add them to Orbit.

Select the credentials that we used in the Get Members node. Our Google Sheet uses the members’ GitHub username to associate them with their activities. We will use the ‘Lookup’ operation to get this information. Enter the following in the expression editor for the Sheet ID parameter: {{$node["Get Members"].parameter["sheetId"]}}. Enter the range for our Google Sheet in the Range field. If you’re using the Google Sheet shared earlier, enter the following range: Activities!A:D.

Enter ‘GitHub Username’ in the Lookup Column field. If you are using a different column name, enter that instead.

In the Lookup Value field, we pass the GitHub username of all our members that we got from the Get Members node. Enter the following expression in the Lookup Value field: {{$node["Get Members"].json["GitHub"]}}. Toggle Return All Match to true. This will check for the activities of all the members and return all their activities if it exists.

Rename the node to Get Activities and click on Execute Node to run the node.

The following image shows the output from the Get Activities node.

Getting members’ activities using the Google Sheet node

4. Get all members (Orbit node)

To add the activities that we got from the previous node, we need the ID of the members that were generated by Orbit. This node will get the ID of the members along with other information.

Create a new Orbit node and select the credentials that we used in the Add Members node. Select ‘Get All’ from the Operation dropdown list. Select your workspace and toggle Return All to true.

Rename the node to Get all members and click on Execute Node to run the node.

NOTE: Depending on the amount of data we have, the Orbit node might take some time to add the new members to the workspace.

The following image shows the output from the Get all members node.

Getting all members using the Orbit node

5. Merge information Google Sheets and Orbit

We now have all the activities of our members from Google Sheet and their member ID from Orbit. We need to merge this information to map the activities to their respective member IDs.

We are using the Merge node to merge this information. Connect one input of the node with the Get Activities node and the other input with the Get all members node.

Select ‘Merge By Key’ from the Mode dropdown list. This option will merge the information using the GitHub username as the key. Enter ‘GitHub Username’ in the Property Input 1 field and ‘attributes.slug’ in the Property Input 2 field.

Click on Execute Node to run the node.

The following image shows the output from the Merge node.

Merging data from Google Sheets and Orbit

6. Add Activities (Orbit node)

The Merge node returns all the necessary data that we need. Using the Add Activities node, we will add the activities of our community members to Orbit.

In our new Orbit node, select the credentials that we used for the Get all members node. Select ‘Activity’ from the Resource dropdown list and ‘Create’ from the Operation dropdown list.

In the expression editor for the Member ID field, enter the following expression: {{$json["id"]}}. Enter the following expression in the expression editor of the Title field: {{$json["Title"]}}.

We will also add a description and a link (if they exist) for the activities. Add the Description and Link fields from the Add Field dropdown list. Enter the following expression in the Expression Editor of the respective fields.

Description : {{$json["Description"}}
Link : {{$json["Activity Link"]}}

Rename the node to Add Activities and click on Execute Node to run the node.

The following image shows the output from the Add Activities node.

Adding activities using the Orbit node

What’s next?

The current workflow shows how we can migrate our data from Google Sheet to Orbit. But we might be using Airtable or a CRM tool to manage these records. We can migrate these records to Orbit using n8n in less than 10 mins.

We can build another workflow using the Cron node and the Orbit node to get the information about members with the highest activity in a month. Appreciate their contributions in the community using the Mattermost node or the Slack node (or whatever your community uses), and tweet about their work using the Twitter node.

I previously wrote an article on how you can use the Slash command in Slack and integrate it with n8n to get community members’ information and give a shout-out to them. We can combine these workflows. Use the Orbit node to get the data (email, address, t-shirt size) of the members, the Shopify node to place an order for swags. If you use Printfection, you can use the HTTP Request node to place the order on Printfection. Let us recognize the contributions of the community!

Summary

Community metrics are yet not well defined and is a challenge for a lot of us. But the Orbit model streamlines these metrics and gives us a more efficient output. With this workflow, we now have our community metrics in our Orbit workspace. Orbit displays the data more sensibly and helps us understand the metrics. We can now make sense of these metrics and plan future activities for our community more efficiently.

I’d love to hear about how you extend the workflow using n8n and manage your communities! If you run into any issues while following the tutorial, feel free to reach out to me on Twitter or ask for help on our forum 🧡

This post originally appeared on the n8n.io blog.

Building an expense tracking app in 10 minutes 📱

Harshil Agrawal — Fri, 11 Dec 2020 07:42:06 +0000

I tried various ways in the past to keep a record of my expenses. It started with maintaining a record in a book. But this wasn’t an ideal solution and involved manual work. I tried using everyone’s favorite — spreadsheets, but it failed me. I still had to manually enter the information of my expenses. I also tried various apps, but none of them catered to my needs. They all lacked the option to customize the way I wanted to upload the information.

I built an app!

I came across the article Automatically Adding Expense Receipts to Google Sheets with Telegram, Mindee, Twilio, and n8n 🧾 that showed how to build a Telegram bot to track expenses. This article inspired me to create an app for managing my expenditures. But creating a mobile app would mean designing the user interface of the app and transforming the design into a functional app. This was going to be a long process, and I was looking for a less complicated and faster solution, and that is when I learnt about Bravo Studio. With Bravo Studio, you can convert your Figma designs into a mobile app. I had never used a no-code platform to build a mobile app, and Bravo Studio piqued my interest.

I ended up creating an app that captures the image of a receipt and stores the information parsed from it in Airtable. I am now storing my data in my Airtable account, and I can use it the way I want. I would also have the flexibility to add more features that I might need in the future.

If you’re struggling with managing expenses like me, and if you want to build your custom app, follow along with this article.

In this article, we will learn to build an expense tracker app using no-code tools and platforms. We will start by designing our application in Figma and converting it into an app using Bravo Studio. We will use Typeform to collect the images of the receipts, Mindee to extract the information from the receipts, and Airtable to store all the information. We will use n8n to connect these different services and make the app functional.

Prerequisites

Figma

Figma is a prototyping tool. We will use Figma to design the user interface of our application. If you don’t have an account on Figma, go ahead and create one.

Bravo Studio

Bravo Studio is a no-code tool to build native applications. We will use Bravo Studio to transform our Figma design into a mobile app. Create an account on Bravo Studio if you don’t have one. To test our application on a real device we will use Bravo Vision.

Typeform

Our application needs an input field that will allow the users to upload images, as well as trigger our n8n workflow. We will use Typeform to handle that. Create an account on Typeform and make a form with the question type ‘File Upload’.

Note: You need to have a premium account on Typefrom to access the ‘File Upload’ question type. If you don’t have a premium account, use the code n8nxTypeform_2021 to get free access for a month.

Mindee

Once we have the image of the receipt, we need a service to extract the information from it. We will use Mindee to extract information like merchant name, amount, date of purchase, etc. from the image. You will need an account on Mindee to access the Expense Receipts API.

Airtable

Our app will use Airtable as the database to store and retrieve information from. We will need an Airtable account to create a base and connect it with Bravo Studio. Sign in to your Airtable account and open this base. Click on the Copy base button on the top right corner to copy the base in your account.

Note: If you change the name of the columns, or the name of the Table, make sure to make the changes in the n8n workflow accordingly.

n8n

Our application is using different services like Typeform, Mindee and Airtable. n8n will connect these services together and make our app functional. Follow the instructions mentioned in the documentation to install and spin-up an n8n instance on your machine. You can also sign-up for n8n.cloud to get early access to our hosted service.

This workflow was built in n8n version 0.101.0.

Quickstart

We often tend to jump to the results before committing to the steps of the experiment if we are aware of the subject. If you already know how to work with Bravo Studio and n8n, you can follow the quick-start instructions below to get to the endgame. If something is unclear or you want to learn more about how it works, feel free to dig deeper into the sections that follow.

Typeform

Create a form in Typeform with the question type ‘File Upload’.
Enter Upload Receipt in the text box where it indicates ‘Type question here…’.
Publish the Typeform and copy the link under the ‘SHARE’ tab.

Figma

To duplicate this Figma Design open it in a new tab.
Click on the down chevron next to Expense Tracker and select ‘Duplicate to your Drafts’ from your dropdown list.
Replace ‘TYPEFORM-LINK’ in Add Receipts Data > Typeform Container > Rectangle[component:web-view:TYPEFORM-LINK] with your form’s link.

n8n

Install n8n, and copy and paste the workflow from the workflow page. Configure the credentials for the following nodes:

Typeform Trigger node (Get Receipt): configure Access Token credentials and make sure to select your form from the Form dropdown list.
Mindee node (Extract Information): configure credentials for the Expense Receipts API.
Airtable node (Store Information): configure credentials and enter the application id and the table name in the Base ID and Table field respectively.

Save the workflow and set it to active.

Bravo Studio

Create an app in Bravo Studio by importing the Figma design from step 2.
Add Airtable as a data library in Bravo Studio. You can follow the instructions mentioned in the official documentation.
Bind the data from your Airtable base to your Bravo Studio app. You can learn how to do that from the documentation of Bravo Studio.

NOTE : If you were successfully able to follow the steps mentioned above, you can jump directly to the Testing the Application section before going through the conceptual sections.

Creating the User Interface

To add the expense in our app, a user will upload an image of the receipt. We will use a Typeform form to get the image of the receipt from the user. Create a form in Typeform with the question type ‘File Upload’. Publish the Typeform and copy the link under the ‘SHARE’ tab. We will use this link in Figma to embed the form.

We want to create an app with our custom design and functionality. We will use Figma to design the prototype of the app. Below is the screenshot of the app’s design created in Figma.

Creating the app’s design in Figma

Our app will have three screens:

A welcome screen which gives the user an option to either add a new receipt or view the stored receipts.
An ‘Add Receipt Data’ screen that will allow the user to upload new receipts using the form we created in Typeform.
A ‘Review Added Receipts’ screen to view all the receipts added by the user.

The design that we create in Figma should be compatible with Bravo Studio. To design a Bravo Studio app in Figma there are a few things to consider:

Containerize your design: To make our Figma app design adaptable in Bravo Studio, wrap the layers in containers. These containers are frames that divide an app screen into separate blocks based on the intended behavior of the design. In our app, we will need to create the following containers:

Main Container : The Welcome Screen contains a container that consists of all the layers and the ‘App Buttons’ container.

Creating the Main Container

App Buttons : This container consists of the ‘Add new receipt’ and ‘My receipts’ button on the Welcome Screen.

Creating the App Buttons container

Top navigation : We need a container that helps us navigate back to the welcome screen. The Top navigation container will contain an image for the back button and the title of the screen. We will add this container to the Add Receipt Data screen and the Review Added Receipts screen.

Creating the Top navigation container

Typeform Container : The Typeform Container contains a rectangle layer that will render the Typeform. We will add this container to the ‘Add new receipt’ screen.

Creating the Typeform container

*List: This container consists of the layers that will render the receipts information such as the merchant name, amount, date, time, category, and image of the receipt. We will add this container to the ‘My receipts’ screen.

Creating the *List container

Use Bravo Tags: A Bravo Tag is a text string that converts the layer into a mobile component. For each container and layer, you want to convert to a mobile component, use the appropriate Bravo Tags. In our design, we will use the [component:web-view:URL] tag to embed the Typeform in the Typeform Container. Replace ‘URL’ with the URL of the Typeform you created earlier.

Note: The name of the List container and the layers inside the container starts with an asterisk (*). Bravo Studio recognizes such containers and layers as a list.

After designing the application in Figma, the next step is to use this design in Bravo Studio to create a native application. In Bravo Studio, click on the Import Figma File button and copy and paste the link of your Figma design in the input field to create a new project.

Congratulations! The user-interface of your application is ready.

Connecting with Airtable

In Bravo Studio we can use a custom API or Airtable to connect our application with a database. The application we built uses Airtable as the database. Hence, we will connect Airtable with our application.

In Bravo Studio, add a new data collection by clicking the ‘+ New Collection’ button on the Data Library page. Select Airtable, and follow the instructions as shown in the video, in the Airtable API Wizard, enter the base URL and your Airtable API Key. You can learn more about Using the Airtable API Wizard from the documentation here.

Click on Advanced view and make a GET request for ‘Expenses — List’. Select ‘All’ from the data.records[] dropdown list in the Response Data section.

Navigate to the ‘Projects’ page and select the app that we created. We will bind the data from the Airtable base with the respective components of the ‘Review Added Receipts’ screen. Select the ‘Review Added Receipts’ screen and select the ‘Expenses Tracker’ Airtable base. Select ‘GET Expenses — List’ in the Select Request section of Data Binding. Select the *List component and select Records from the dropdown list below Get Expenses — List. Expand the *List component and map each element to their corresponding field. You can learn more about this from the documentation.

The video below shows the steps to bind the data to components.

Building the workflow

Creating a backend for applications can get complicated when it comes to connecting different services together. You have to write functions to make API calls to each service, and pass information from one service to another in the proper format. But n8n makes it easy to create the backend and stitch different services together. You also get a visual representation that helps you in designing the application logic.

In n8n, you will use the following nodes to build the backend logic:

Typeform Trigger node (Get Receipt)
HTTP Request node (Get Image)
Mindee node (Extract Information)
Set node (Set Information)
Airtable node (Store Information)

Our workflow will look like the image below.

Completed workflow in n8n

1. Typeform Trigger node (Get Receipt)

The Typeform Trigger node will trigger the workflow whenever the user submits a new receipt. Add the Typeform Trigger node and configure the credentials by following the instructions in the documentation here.

Select the form that you created for the application from the Form dropdown list.

Rename the node as Get Receipt, and save the workflow.

Click on the Execute Node button to execute the node. Upload an image of a receipt using the Typeform. You will notice that the Typeform Trigger node triggers the workflow when the form is submitted.

2. HTTP Request node (Get Image)

The HTTP Request node is used to make an HTTP request to APIs and websites. It can return data in JSON, String as well as Binary format. Add an HTTP Request node in n8n that will make a GET request to fetch the image we uploaded using the Typeform. In the URL parameter of the node, add the following expression: {{$node["Get Receipt"].json["Upload receipt"]}}. This expression will get the URL of the image that we uploaded using Typeform.

Select ‘File’ from the Response Format dropdown list and rename the node to Get Image. Click on Execute Node to run the node. In the output, you will notice that the node returns the image of the receipt.

3. Mindee node (Extract Information)

The Mindee API enables to extract information from an image and transform it into usable data. We will use the Mindee node in n8n to extract data from an image of a receipt. The node will extract the merchant name, the amount, the date and time the expense was incurred, and its category.

Add the Mindee node in the n8n workflow, and configure the credentials as mentioned in the documentation.

Rename the node to Extract Information, and click on Execute Node to run the node. You will notice that the node extracts the information from the image and transforms it into usable data that can be added to Airtable.

4. Set node (Set Information)

The Set node allows us to set the workflow data. We will reference the data from the Mindee node and the Typeform Trigger node in the Set node and set the parameters.

Add the Set node in your n8n workflow and add the parameters with the following properties.

Amount : The type of this field should be Number and it’s value should be {{$node["Extract Information"].json["total"]}}
Merchant : The type of this field should be String and it’s value should be {{$node["Extract Information"].json["merchant"]}}
Date : The type of this field should be String and it’s value should be {{$node["Extract Information"].json["date"]}}
Time : The type of this field should be String and it’s value should be {{$node["Extract Information"].json["time"]}}
Receipt URL : The type of this field should be String and it’s value should be {{$node["Get Receipt"].json["Upload receipt"]}}
Category : The type of this field should be String and it’s value should be {{$node["Extract Information"].json["category"]}}

Note: The value in the Name field should be the same as the column name of your Airtable base.

Toggle the Keep Only Set to true. This ensures that only the data that we set in this node gets passed on to the next nodes in the workflow. Click on the Execute Node button to run the node.

5. Airtable node (Store Information)

Airtable is a spreadsheet-database hybrid, with the features of a database but applied to a spreadsheet. The Bravo Studio app will get the data from the Airtable base to display it to the user. But before connecting the app with Airtable, in the front-end, we need to connect Airtable with your backend.

The n8n workflow will store the data extracted by the Mindee node and the URL of the image in Airtable. Create a base in Airtable similar to this template base if you haven’t already created one.

In n8n, add the Airtable node and configure the credentials following the instructions mentioned here. Select ‘Append’ from the Operation dropdown list. To get the Application ID, go to https://airtable.com/api and select the base. Copy and paste the ID in the Base ID field in n8n. Enter the name of your base in the Table field.

Click on Execute Node to run the node. On successful execution, you will notice that a new row gets added to your Airtable base.

Testing the application

Congratulations! You have successfully built the application. Now let us test our application and see how it would work in the real world.

In n8n, on the top right corner, toggle Active to true. This will set our workflow to active and execute the workflow every time a new receipt is submitted to Typeform.

Open the Bravo Vision app on your device and select the Expense Tracker app. Click on the Add new receipt button and submit an image of the receipt.

If you don’t have a receipt at hand now, feel free to use the following image of the receipt for testing.

A receipt for testing your workflow

You can see the new receipt and the information on the ‘My Receipts’ screen.

My Receipts page after adding the receipt

What’s next?

You can extend the workflow and send an email every time you add a new expense, using either the Send Email node or the Gmail node. You can also use the Twilio node or the Vonage node to send an SMS when a new expense gets added.

You can also create a new workflow that will send you a weekly or monthly notification about the expenses you made during that period. This workflow can be built using the Cron node to trigger the workflow weekly or monthly, the Airtable node to read the data, and the Function node to calculate the sum of the expenses. To send a push notification, you can use the Pushover node.

Summary

In this article, you learned how to build an application. You learned to design an app in Figma that is compatible with Bravo Studio. You also created the front-end of the app using Bravo Studio. You stitched different services together using n8n to get the desired output. Lastly, you learned how to bind data to your app in Bravo Studio.

I plan to add more features to the app that will help me build a healthy habit of keeping track of my expenses and help me manage them.

I’d love to hear about how you extend the app using n8n! If you run into any issues while following the tutorial, feel free to me on Twitter or ask for help on our forum 🧡

How to automatically give kudos to contributors with GitHub, Slack, and n8n 👏

Harshil Agrawal — Fri, 14 Aug 2020 08:01:15 +0000

People are the heart of a community. Celebrating their contributions is a way to show them that we value them and appreciate all their hard work. We can give them a shoutout in our community’s Slack workspace and also in our newsletters. And what could be a better way to appreciate their work by sending them some cool swag! Motivated by this idea, I created a workflow with n8n, which gives us the contributors’ GitHub information in the Slack workspace.

Giving kudos to contributors with GitHub, Slack, and n8n

We will accomplish this through these four nodes:

Webhook node — Triggers the workflow when the slash command is issued
GraphQL node — Gets information using GitHub’s GraphQL API
Function node — Filters and extracts the contributor’s email address
Slack node — Posts the information back in Slack

When we issue a slash command in the Slack channel, the Webhook node gets triggered, and our workflow starts. The GraphQL node then executes a query to get the contributor’s information. The Function node extracts the email address of the contributor and the Slack node posts this information in the Slack channel from where the information was requested.

Prerequisites

To get started with the workflow in n8n, you will need:

Node.js or Docker installed on your machine to run n8n. You can also sign-up for n8n.cloud to get access to our hosted service (in beta)
A Slack app for your workspace
GitHub Personal Access Token for the GraphQL API

Install n8n

Note: If you’re using n8n.cloud, you can skip this section.

In case, you don’t already have n8n installed, you can do so with npm by issuing the following command:

npm install n8n -g

You can also run n8n using Docker. Once you have installed n8n, you can start it using the following command:

n8n start — tunnel

Note: Make sure that you don’t forget to add the — tunnel parameter.

n8n has to be reachable from the web as the triggers of external services rely on that to be able to send data to the webhooks. To make that easy, n8n has a special tunnel service that redirects requests from n8n’s servers to your local n8n instance (uses localtunnel).

Typing “o” in the terminal will open the Editor UI for us.

Let’s get started with the workflow. I have also submitted this workflow on n8n.io, in case you’d like to skim through it. Please note that you will still need to configure credentials for Slack and GitHub.

1. Webhook node

n8n has a Webhook trigger node which will get triggered when we issue the /github slash command in a Slack channel.

1. Adding the Webhook node

To add the Webhook node in the workflow, click on the '+' button. Under the Trigger section, select the Webhook node. This creates the Webhook node with the default parameters.

Leave the default parameters as they are, we will only change the HTTP Method. Select the ‘POST’ option from the HTTP Method dropdown list.

Here’s a video of me following the steps mentioned above.

2. Adding slash command to the Slack app

If you haven’t created a Slack app, go to the Applications page, click on ‘Create New App’ and give your app a name.

Under the Add Features and Functionality section, select Slash Commands and click on Create New Command. Enter ‘github’ as the command for the Command field. Get the test webhook URL from the Webhook node and paste it in the Request URL field. Since we are building the workflow, make sure to use the test webhook URL.

The data that is sent to the test webhook URL is displayed in the Editor UI. The test webhook stays active for 120 seconds and then gets deactivated. The Production URL is only registered when the workflow has been activated, but the data that is sent is not displayed in the Editor UI.

To give our app permission to post messages, select OAuth & Permissions under the Features section. In Scopes, under the Bot Token Scopes, click on Add an OAuth Scope and select the ‘chat:write’ scope from the menu. Similarly, add the ‘chat:write.public’ scope.

Install the app in your workspace. Click on Execute Workflow button at the bottom of the n8n workflow editor, and issue the /github harshil1712 (here ‘harshil1712’ is my GitHub username) command to trigger the Webhook node.

Here’s a video of me following the steps mentioned above.

Go back to the n8n workflow editor and check the Webhook node. You’ll see the response from our newly created slash command. Congratulations, your first n8n node is up and running!

2. GraphQL Node

n8n has a GraphQL node which can be used to execute GraphQL queries. We will use GitHub’s GraphQL API in this node to get the contributor’s information.

1. Creating a GraphQL node to get contributors information

In the n8n workflow editor, click on + and select the GraphQL node. We will have to specify the endpoint for the GraphQL API. We will also have to change the Request and Response Formats and add headers.

Enter the following link in the Endpoint field: https://api.github.com/graphql. This is the link to GitHub’s GraphQL API. Select JSON from the dropdown menu, for the Request Format field.

The GitHub GraphQL API requires two headers for running any queries. The first header we will add is the User-Agent header. Click on Add Header in the Header section. Enter User-Agent in the Name field, and n8n in the Value field. Add another header for Authorization. Enter Authorization in the Name field. The value for this header will be in the following format: bearer <GitHub-Personal-Access-Token>

Replace <GitHub-Personal-Access-Token> with your GitHub Personal Access Token. The Headers should look like in the following image.

Headers for the GraphQL node

Note: While generating the GitHub Personal Access token, make sure to select repo and user under the Select scopes section.

Selecting repo and user scope for GitHub Access Token

Copy and paste the following query in the Edit Query editor and click on the Execute Node button to execute the node. On successful execution, it returns the name of the contributor whose username you have passed.

query {
    user(login:"harshil1712") {
        name
    }
}

Here’s a video of me following the steps mentioned above.

2. Getting more contributor’s information like company, email, and location

In the query above, we are passing the username statically, which will give us the information about only that contributor, for every slash command we issue. To make the query dynamic, we will fetch the username returned by the Webhook node.

Connect the Webhook node with the GraphQL node. Open the Edit Expression editor for the Query field, and replace the username with {{$node[“Webhook”].json[“body”][“text”]}}.

You can also do this by selecting:

Current Node> Input Data > JSON > body > text

Here’s a video of me following the steps mentioned above.

We are now getting the name of the contributor we want. Let’s get more information about them. We will update our query to get additional information like their email address, location, the company they work for, and their profile picture.

Copy and paste the below query in the Edit Query editor.

query {
    user(login:"{{$node["Webhook"].json["body"]["text"]}}") {
        name
        company
        location
        avatarUrl
        email
    }
}

On executing the workflow, you will get output similar to the following image.

Output from the GraphQL node

3. Function Node

Some of the contributors on GitHub might have their email addresses private, and so we don’t get this information. But what if we want to get in touch with them, and thank them personally?

To get their email address, we will query their commits. The commit object contains information about the author like their name and email address. Let’s go ahead and update our GraphQL query so that we get at least 25 of their commits.

1. Update the GraphQL query

In the GraphQL node, open the Edit Expression editor for the Query field. Copy and paste the query below in the editor.

query {
    user(login:"{{$node["Webhook"].json["body"]["text"]}}"){
        name
        company
        location
        avatarUrl
        email
        pullRequests(last: 25) {
            edges {
                node {
                    commits(last:25) {
                        nodes {
                            commit {
                                author {
                                    email
                                    name
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Execute the node to see the changes in effect. The output now contains the email addresses and names of the authors who made the commits as well.

Output from the updated GraphQL node

2. Using Function node to filter the information

One can observe from the output that we are getting a lot of repeated values for the email addresses. Also, some email addresses belong to different users. We will write a function to solve this and get the email address of our contributor.

n8n has a Function node where we can add custom snippets to JavaScript code to transform data from the other nodes or if you want to implement some custom functionality. Click on the '+' button and select the Function node. Replace the code in the Function node, with the following code.

let emails = [];
let tempEmails = [];

const name = $node["GraphQL"].json["data"]["data"]["user"]["name"];
const publicEmail = $node["GraphQL"].json["data"]["data"]["user"]["email"];

const username = $node["Webhook"].json["body"]["text"];
const nameRegex = new RegExp(name,"g");

if(publicEmail){
    // if public email address exists, push it to the tempEmails array
    tempEmails.push(publicEmail)
}

// looping through the pull requests
for(const edge of items[0].json.data.data.user.pullRequests.edges){
    // looping through the commits
    for(node of edge.node.commits.nodes){
        // Checks the name associated with the email address
        if(nameRegex.test(node.commit.author.name)|| node.commit.author.name == username) {
            // if name equals to contributors name or username, push the email address in tempEmails
           tempEmails.push(node.commit.author.email)
         }
    }
}

// Remove duplicates
emails = […new Set(tempEmails)]

// RegEx Pattern for email address generated by GitHub
let re = /^\w+(.)\*@users.noreply.github.com/

// Remove the email addresses Generated by GitHub
emails = emails.filter(email => !re.test(email))

return [{json:{emails,}}]

The above code takes the name and the public email address of the contributor from the GraphQL node. It also gets the username from the Webhook node. The code then verifies if the email address belongs to the contributor, and if it does, it pushes it to a temporary array. It then removes any duplicate values for the email addresses and stores them in the emails array. And lastly, it removes email addresses generated by GitHub and returns the emails array.

An important thing to keep in mind while using the Function node is that it returns an array. So make sure you’re returning an array, rather than an object.

Here’s a video of me following the steps mentioned above.

We are now getting the email address of the contributor along with all the other information. Let’s post this in Slack.

4. Slack Node

In n8n, you can perform a lot of operations with the Slack node. You can create or archive channels, upload or get files from the workspace, add or delete stars from an item, and post or update messages in the Slack channels.

To add the Slack node in the workflow, click on the '+' button, and select Slack. Select “OAuth2” from the Authentication dropdown menu. Add your Slack app credentials to the node by selecting “Create New” from the dropdown menu in the Credentials section.

Head back to the Slack App dashboard, and copy the Client ID and Client Secret from the App Credentials section. Paste them in the Create Credentials: “Slack OAuth2 API” editor in the n8n workflow editor. Copy the OAuth Callback URL from the editor. In the Slack App dashboard, select “OAuth and Permissions” and click on “Add New Redirect URL” under the “Redirect URLs” section. Paste the URL and click on “Add”. The last step is to connect the OAuth Credentials. Click on the OAuth button to connect the credentials and select “Allow”.

Adding Redirect URL to Slack App

By default, the Slack node has Message as the Resource and Post as the Operation. If the setting is different for you, make sure to change them. To post a message on the Slack channel where the slash command was issued, we will add the channel id to the Channel field, which is returned by the Webhook node.

Copy and paste {{$node[“Webhook”].json[“body”][“channel_id”]}} in the Channel field. Alternatively you can use the Variable Selector to get this information. Open the Editor Expression editor, and under Variable Selector select: Nodes > Webhook > Output Data > JSON > body > channel_id.

Let us now add some styling and formatting to our message. Our message will contain a title, some text, and a thumbnail.

In the Attachment section, click on Add Attachment , and select Title from the Add Attachment Item dropdown menu. Open the Expression editor, and type “GitHub Details for:” in the editor and from the Variable Selector select Nodes > Webhook > Output Data > JSON > body > text.

From the Add Attachment Item , select Text , to add the Text attachment. Open the Expression editor, and copy and paste the following text:

*Name:* {{$node[“GraphQL”].json[“data”][“data”][“user”][“name”]}}

*Email:* {{$node[“Function”].json[“emails”].join(‘,‘)}}

*Company:* {{$node[“GraphQL”].json[“data”][“data”][“user”][“company”]}}

*Location:* {{$node[“GraphQL”].json[“data”][“data”][“user”][“location”]}}

To display the profile picture of the contributor, create Thumbnail attachment, by selecting the Thumbnail option from the Add Attachment Item menu. Open the Edit Expression editor and from the Variable Selector select Nodes > GraphQL > Output Data > JSON > data > data > user > avatarURL.

Here’s a video showing how to create the Slack node, and get information from the Webhook node, the GraphQL node, and the Function node.

Note: Since the Function node gives an array of email addresses, we will select Values from the menu, while adding the email from the node.

Execute the node, and your app will post a message to the Slack channel.

Output from the Slack node

The following video shows our workflow in action.

To use the workflow in production, follow the instructions provided in the documentation. Make sure to use the production webhook URL for the slash command.

Conclusion

Congratulations! You built a workflow that gives you the information of a contributor. You learned how to get started with n8n and how to add nodes to your workflow. You learned how to use the Webhook node for capturing event triggers, the GraphQL node to query information, the Function node to write custom functions, and the Slack node to post a message on Slack.

You can use this workflow to gather the information about your contributors, celebrate their successes, and appreciate them for their contributions! Using the GitHub API, you can also get their Twitter username. You can use the IF node to check for that, and use the Twitter node to tweet about them. You can even use the Mailgun node to send them a personalized thank you message.

I’d be excited to check out what you’ve built using n8n! In case you’ve run into an issue while following the tutorial, feel free to reach out to me on Twitter or ask for help on our forum 💙

This post originally appeared on the n8n.io blog.

Women of React 2020 - Throwback

Harshil Agrawal — Fri, 01 May 2020 19:25:43 +0000

Amazing speaker line-up? Check ✅
Awesome Emcee? Check ✅
Accessible? Check ✅
A/V? Check ✅
Being on schedule? Check ✅
React is a potato? Umm Okay!
And the list goes on.

Women of React 2020 was a conference like no other. The conference had talks for everyone, be it a beginner or someone experienced.

Let me give you the highlights of all the fun and learning I had, attending this virtual conference.

The conference started with Rachel Nabors giving the welcoming keynote, and sharing the story of how Women of React 2020 was organized. She also shared her inspiring developer journey.

I'm an advocate for accessibility and have been encouraging people to build accessible websites. I also gave a talk at DevFest Ranchi on accessibility, and listing to the talk "TL;DR Accessible Components : tips for building out accessible components" by Yuraima Estevez helped me learn more about accessibility. Yuraima explained what accessibility is and why it is important. She also shared some insights on how to make accessible components. She talked about the three easy parts and explains each one of them.

Semantic HTML
ARIA Attributes
Keyboard Navigation

You can find her slides here and learn more about accessibility.
Brittney Braxton also made a sketch note for the talk.

// Detect dark theme var iframe = document.getElementById('tweet-1254111480544473088-687'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1254111480544473088&theme=dark" }

Next up was Neha Sharma. She shared her experience on building a Design System in her organization and the lessons she learned on this journey. Neha talked about Atomic Design and explained how they adopted it.
Some challenges they faced and learnings from them, that Neha shared are:

Think of scalability in terms of 'reusability', this will help you build a scalable design system.
Convincing teams to use and follow can be hard.
Get early previews and feedback which will help you understand what the teams need, and help you learn if you're missing out something.
Documenting the whole process is important.
Use tools and automation for the code part that are important. Checkout this Twitter thread to know more about her talk. // Detect dark theme var iframe = document.getElementById('tweet-1254103619181346816-595'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1254103619181346816&theme=dark" }

Taley'a Mirza gave a talk titled "Level up your Design System with styled-system" in which she discussed about the most common challenges in design system, how we can use style-system to solve them and principles of styled-system.

The conference also had yoga. Yes, your read it right. In the break there was a small yoga session conducted by Luna Wei which was refreshing.

Fireside chats are the best! Thank you Women of React for organizing it and Rachel Nabors, Sara Vieira, Jenn Creighton, Cassidy Williams, Pariss Athena, and Shruti Kapoor for sharing your experiences and knowledge with the community. They talked about their journey of getting into public speaking and answered questions from the audience. A few questions were around how to get started with speaking at conferences while others were around how to select a topic for a talk. They answered these questions sharing what worked for them and the steps they took to get there.

The next talk was one of the best talks I've seen. Conclusion of the talk, React is a Potato. Maggie Appleton explained React using visual metaphors. She explained how React works, talked about props and state, all by comparing React to a potato. Maggie where well explained how visual metaphors can help in teaching concepts and encouraged us all to adopt this effective technique. She also share a lot of techniques and tools that we can take advantage of for building visual metaphor content.
Some of the tools Maggie shared are:

Figma
Miro
Whimsical
Exaclidraw
Procreate
Keynote
Powerpoint
CSS, SVG or Greensock

You can also find some really good resources Maggie shared https://illustrated.dev/resources/
Maggie goes on explaining how we can build metaphors. She shared 4 important points to consider when we exercise it.

Find your nouns and verbs.
State one main concept in simple terms.
Pick functions and key qualities to highlight.
Think laterally to find alternatives.

Let us try to use visual metaphors in our next tutorial/video and build a better learning experience!

Developer Tools are a developers best friend. They increase productivity and help save a lot of time. Anushree Subramani gave a talk on React Dev Tools. She took us through the journey of how Anika, a junior developer, learned about the dev tools, and how it increased her productivity. She also shared the tale of how Anika was mentored by a senior developer, Radhika.
In her talk Anushree illustrated the fast refresh, props/state editor, component tree navigation and a lot more.
// Detect dark theme var iframe = document.getElementById('tweet-1254148295305412608-579'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1254148295305412608&theme=dark" }
At the end of her talk, Anushree motivated us all and encouraged to help and mentor people who need it.
Mentorship is a beautiful thing. By mentoring someone you can help them reach their potential and become better versions of themselves. And in this period of time, people need someone to talk to, share their story, their success and their failure. Mentorship has personally helped me. I had a chance to have some amazing mentors, people who I can reach out to talk to whenever I am stuck, need help or just to have a normal conversation. And we want to bring this to more people. For the same reason I, and Pranshu Khanna decided to start taking mentorship calls, for free, and help people.
// Detect dark theme var iframe = document.getElementById('tweet-1241812203268784128-109'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1241812203268784128&theme=dark" }

After the short break it was time for some lighting talks.
The first lighting talk "The Most Important UI: You" by Carolyn Stransky was amazing. It talked about self-care. Carolyn explained its importance and shared tons of resources to take care of ourselves and have a healthy mental health. It is true that we in the tech industry don't focus a lot on self-care and are often the victim of burnout. One of the many tips Carolyn shared, my favorite one is asking ourselves daily - "What have I done today that feels nourishing, supportive and inspiring for my well-being?"
Check out other resources Carolyn shared for self-care and a better mental health.
The next lighting talk was by Olena Sovyn - "Testing, tEstIng, teStIng or how to test React apps with generated input data". She takes us through an example and explains a better way of writing tests when we have multiple combinations for the input data.
Jen Luker live coded and explained the accessibility concepts around button and div. She showed how we can style a button, and make it look like a div, and how painful it is to use divs to built an accessible button.

Eve Porcello knows how to give a talk! The way Eve started her talk "React Finding the Fun: Using TDD with React" was so good, she made it look like she was giving the talk at an offline conference. In her talk Eve, explained Test Driven Development (TDD). She live coded and showed how TDD can be used to write better code. Eve time-traveled and came back from the future to complete her application and continued her talk.

// Detect dark theme var iframe = document.getElementById('tweet-1254170118940229664-677'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1254170118940229664&theme=dark" }

The last session was by Adrianna Valdivi on preparing for React Tech Interviews. Adrianna shared the most common questions asked in the interview, how one should answer these questions and the concepts that one should know very well.

But this wasn't the end. We had a Q & A with people from the React Core team, and folks from Google Chrome team. We had Sophie APlert, Flarnie Marchan, Luna Ruan, Shubhie Panicker, Nicole Sullivan and Rachel Nabors. They answered our questions on React, open source and shared their journey. They also shared some interesting tips on how to get started with contributing to Open Source.

The blog post would be incomplete without mentioning the awesome and funny Cassidy Williams. Cassidy was the emcee for the conference and she did a wonderful job! Thank you Cassidy for being such an great emcee.

I would also like to thank the organizers Jenn Creighton, Sara Vieira, Rachel Nabors and Kevin Lewis for bringing this amazing conference to the community and making it accessible for all!

React Summit Remote Edition: My Experience

Harshil Agrawal — Mon, 20 Apr 2020 19:35:48 +0000

On April 17, 2020, the React Summit conference hosted a Remote Edition of the React Summit with two tracks, a React track and an Alt track, with 10+ sessions, 5 discussion rooms, and a lot of fun!

Guillermo Rauch, from Zeit, was the first speaker who talked about Next.js and the future of Serverless. He gave a lot of good insights. His talk convinced me more of using Next.js and explore the world of Serverless.

The world is changing. With technologies like Augmented Reality, Virtual Reality and Artificial Intelligence, have you ever wondered how the future of user interaction looks like? Well, Vladimir Novick, in his talk "Controlling apps with your mind and AI" amazingly showed what the future holds for user interaction. His talk displayed all the possibilities of the user interaction, and focused on understanding the reality and building reality-based interaction. He showed a cool demo with a Consumer EEG. He connected the headset with his browser through the Bluetooth WebAPI, and interacted with the web-page through brainwaves. He used the KNN classifier to differentiate the incoming waves which helped him define actions for a particular brainwave. The most coolest part of this session was when Vladimir flew a drone without a remote, but through his brainwaves. Checkout this Twitter thread from Archimydes where they've live tweeted his session and shared what they learnt.
Liquid error: internal

After the talk there was a Panel Discussion on JAMStack and Serveless hosted by Jason Lengstorf, with Max Stoiber and Guillermo Rauch. It was very insightful. They discussed about the future of JAMStack and how GatsbyJS and Next.js are helping developers with JAMStack.

The last session that I attended was of none other than Kent C. Dodds, titled "AHA Programming". In this talk Kent talks about the Avoid Hasty Abstractions abbreviated AHA, with an example. He explains that modifying the abstraction with the incoming changes is not always a good practice and it is okay to not follow DRY principles sometimes.
The key takeaways from his talks are
Liquid error: internal
You can find his slides here.
Also here's the list of resources that Kent shared
Liquid error: internal

The conference was very well organized and had a lot of amazing sessions. I couldn't attend all the sessions, but thankfully the organizers will soon upload the talks on YouTube. If you missed out, keep an eye on their YouTube channel.

This conference also proved that remote conferences could be a thing. There are endless possibilities for a remote conference. The only thing I would miss is to network with people, offline, in real world. Sure we can network virtually, but for me, connecting with people in real world is far more interesting and fun!

Looking forward to more such conferences!

Stay safe everyone :)

Using Auth0 Hooks to store user information

Harshil Agrawal — Sat, 29 Feb 2020 14:58:41 +0000

Hooks have become really popular after its official release. They've truly made the lives of React Developers easy. You can know more about React Hooks here.

Auth0, who provides a seamless service to integrate authentication and authorization in you apps, have recently released Hooks, which are in beta. There are four different extensibility points where you can use these hooks.
These extensibility points are

Client Credentials Exchange
Post Change Password
Post User Registration
Pre User Registration

This blog post focuses more on Post User Registration Hook, but let's try and understand the other hooks as well.

Client Credentials Exchange

This particular hook can be used when you want to modify the scope for the user. Consider an example where you want to provide the user with the additional ability to read the resources. You can use this hook to modify the scope. To know more read the official documentation from Auth0.

Post Change Password

When your user changes their password you want to send them a notification email.This is the extensibility point where you want to execute the code to send them the notification. This is just one use-case for this hook, according to your requirements you can use this hook and notify the user. The official Auth0 documentation covers this pretty well.

Pre User Registration

Let's say you want to store some additional information about the user. The Pre User Registration extensibility point is the perfect place for that. With this you can store user_metadata or app_metadata. To know more how to use this hook checkout the official documentation.

Post User Registration

The Post User Registration helps you perform any activity you want once a user registers an account. It can be from sending an email notification, to notifying on the slack. It can also be used to add it your database, which is what we are going to learn to do.

Setting up the application

For this demo we will be using firebase as our database.

1. Setting up Firebase

Go to the Firebase Console and login.
Click on Create Project and give your project a name. You can choose to disable Google Analytics for the project if you wish to.
Once your project is created, select Develop from the sidebar and then select Database.

For this tutorial I'll be creating the Realtime database with the test mode selected

Once you hit the enable button your database is created.

2. Setting up Auth0

Auth0 gives us a default app to play with. We will this for the tutorial.
On the left side there is an option of Hooks. Once you select that you will see the above mentioned options.

We will create a new hook under Post User Registration. Click on Create New Hook and give your hook a name.

Open the text editor by clicking on the edit button to write some custom code.

/**
@param {object} user - The user being created
@param {string} user.id - user id
@param {string} user.tenant - Auth0 tenant name
@param {string} user.username - user name
@param {string} user.email - email
@param {boolean} user.emailVerified - is e-mail verified?
@param {string} user.phoneNumber - phone number
@param {boolean} user.phoneNumberVerified - is phone number verified?
@param {object} user.user_metadata - user metadata
@param {object} user.app_metadata - application metadata
@param {object} context - Auth0 connection and other context info
@param {string} context.requestLanguage - language of the client agent
@param {object} context.connection - information about the Auth0 connection
@param {object} context.connection.id - connection id
@param {object} context.connection.name - connection name
@param {object} context.connection.tenant - connection tenant
@param {object} context.webtask - webtask context
@param {function} cb - function (error, response)
*/
module.exports = function (user, context, cb) {
  const req = require('request')
  req.post({
    url:"https://<USER-PROJECT-NAME>.firebaseio.com/user.json",
    json: {
      "username":user.email
    }
  })
  cb();
};

Hit on save to save your script. You can test it out using Runner.

Now go back to the Firebase and you'll see new data has been added.

Similarly you can add user information to your database, once the user has registered.

Follow along this article from the Auth0 team to setup Auth0 with your React Application.

My GitHub Campus Expert Journey and how you can become one

Harshil Agrawal — Fri, 01 Nov 2019 13:35:31 +0000

I've been asked a lot about my GitHub Campus Expert journey and how can one become a GitHub Campus Expert. This is an attempt to answer those questions and express my gratitude to this amazing program.

While browsing through the GitHub Education website, one day I landed on the GitHub Campus Expert webpage. I skimmed through the webpage and understood that this program will help me start a community on my campus, and so I hit the Become a Campus Expert button.

Before applying to the program you need to verify that you're a student and for that you need to either upload your institute ID or sign-up with your institute email id. Once you've been verified you can proceed to the next step which is filling up the initial application. I followed the same procedure and I got selected for the next phase.
Did I mention that once you're verified as a Student you get $100000 worth of amazing developer tools and services to learn and improve your skills! Check it out here.

The second phase of the program is the training, where you work with amazingly designed modules which helps you to be a better community leader. To be honest, it were these modules that helped me gain a clear vision of what a community is, how to plan and host events and what skills I need to work on to be an effective leader. If you complete the modules with the same enthusiasm you started it with, you're going to be a great leader.

Once you've completed the modules, the next step is to wait and be patient. Your submissions undergoes a detailed review. Unlike any other program, the review team very thoroughly reads and reviews each and every submission and provide you feedback to improve it. My application was also reviewed and a very helpful feedback was provided. I worked on my feedback, it again went for a review, the submissions were accepted and vola! I was just one step away to become a GitHub Campus Expert.

It was October 2, 2018, the day I officially became a GitHub Campus Expert. It was that day when a call with the amazing Joe Nash (he was Program Manager at that time) was scheduled. The call was great, after the chat, he showed me the on-boarding process. I created my GitHub Campus Expert profile, got added to Slack, and I was a GitHub Campus Expert! 🥳

I already had an event planned which I proudly hosted as a GitHub Campus Expert. I also got to organize a Hacktoberfest event with Daniel Phiri (GitHub Campus Expert Alumni). Daniel helped me a lot during the process and was a constant support.

As a GitHub Campus Expert, I got a lot of opportunities to help and inspire people, talk about open source and meet some great folks. I did my first booth crawl

Booth Crawl at MakerFest Vadodara — 2019 | by Harshil Agrawal | Medium

Harshil Agrawal ・ Apr 21, 2019 ・
Medium

organized the first Flutter Bootcamp

The Flutter Bootcamp Story. This is the story of how two Student… | by Harshil Agrawal | Medium

Harshil Agrawal ・ Aug 16, 2019 ・
Medium

gave my first DevFest talk

Web Accessibility at DevFest Ranchi | by Harshil Agrawal | Medium

Harshil Agrawal ・ Nov 9, 2019 ・
Medium

and also my first international talk!

FOSSASIA Summit 2019 — My First International Talk | by Harshil Agrawal | Medium

Harshil Agrawal ・ Jun 25, 2021 ・
Medium

I organized more than 40+ events/meetups/workshops in just 6 months impacting more than 200 people!

The program has been really helpful and inspiring. Whenever and wherever I faced an issue, I knew there were 100+ other GitHub Campus Experts there to help me out. The program makes you feel like a huge family you have, that is spread out to different parts of the world.

I would like to thank Joe, Lieke and all the GitHub Campus Experts to be a constant inspiration and support! You folks are amazing! 💖

About the program
The GitHub Campus Expert program is an amazing opportunity to help your local community. The program focuses on your local community and helps you to build and grow your local community. This is not an ambassador program unlike others, the program actually focuses on supporting you to help you grow your community.
By becoming a GitHub Campus Expert you don't represent GitHub nor you can be called as a GitHub Employee.

I hope I was able to answer a few questions students have about the program. Below are the answers to the few that I always come across about the program.

What should I write in my application?
Honestly I don't have an answer to this. The best advice I could give is be honest with your application, you know your community better.
I am not sure what I should write in my application, may you please give me some points?
I am afraid if you don't know why you want to be a GitHub Campus Expert, you're not ready to be one. Take some more time and work on it.
What prerequisites/qualities to become a GitHub Campus Expert?
There are no such prerequisites/qualities. Personally, I believe you should be motivated enough to help people and grow your community.
My application got rejected. Can I reapply?
Yes you definitely can!
My application got rejected. When can I reapply?
If your application got rejected you can reapply in the next semester i.e after 6 months. But please don't let this stop you to contribute towards the community. Use this time to build and grow your community, you'll get a great experience before joining the program and will know the roles and responsibilities of a community lead.
My application got rejected, what should I do to improve myself, so that I get selected the next time?
If your application got rejected don't worry, you're not the reason. Sometimes there are so many applications that it becomes really difficult to shortlist many of you. There might also be a huge probability that someone from your institute is already in the training.
I am in the training phase and working on the modules. Could you please share your submissions?
I am sorry but I won't. The modules are designed to help you become a better community leader and improve your skills. I don't want to take away this learning opportunity from you.

If you still have any more questions, please feel free to ask them.

Forem: Harshil Agrawal

Implementing localization to your Svelte App: A step-by-step guide

Prerequisites

Step 1 - Setting up the Svelte App

Step 2 - Getting started with Tolgee

Step 3 - Integrating Tolgee in the Svelte app

Step 4 - Initializing Tolgee for Svelte

Step 5 - Implementing localization

Step 6 - Using in-context Translation

Step 7 - Manage Translation on the Platform

Step 8 - Adding a Language Switcher

Conclusion

Airtable automation: How I streamlined submissions to the Developer Showcase

The manual process and challenges

Automating the boring parts

Connecting Airtable to Contentful

Walking through the code

What’s next?

What is TypeScript and why should you use it?

What is the difference between TypeScript and JavaScript?

Features of TypeScript

Interface

Literal Types

How to use TypeScript?

Advantages of using TypeScript

What is the best way to learn TypeScript?

How to automatically manage contributions to open-source projects 🏷️

Table of contents

Prerequisites for building the workflow

Workflow for assigning GitHub issues to contributors

1. Trigger the workflow on GitHub events

2. Route the workflow on specific events

3. Handle new GitHub issues

4. Assign the issue

5. Handle new comments on GitHub issues

6. Check if the issue is already assigned

7. Assign an issue to a contributor

8. Add a comment to the issue

What's next?

Creating triggers for n8n workflows using polling ⏲

Introduction to polling

How to poll using n8n?

Trigger a workflow when new data gets added to your Google Sheets

Prerequisites

Set up n8n

Set up a Google Sheet

Set up Mattermost

Quick Start

The Workflow

Stage 1 — Read Data

Interval node (Execute every 45 mins)

Google Sheets node (Read data)

Stage 2- Extract new data

Function node (Check if new data)

Stage 3- Communication

Mattermost node (Send message)

What’s next?

Summary

Migrating Community Metrics to Orbit using n8n 📈

What is Orbit?

Prerequisites

Orbit account

Google account

n8n

Quickstart

Moving data from Google Sheets to Orbit automatically

1. Get Members (Google Sheets node)

2. Add Members (Orbit node)

3. Get Activities (Google Sheets node)

4. Get all members (Orbit node)

5. Merge information Google Sheets and Orbit

6. Add Activities (Orbit node)

What’s next?

Summary

Building an expense tracking app in 10 minutes 📱

I built an app!

Prerequisites

Figma

Bravo Studio

Typeform

Harshil Agrawal ・ Apr 21, 2019 ・
Medium

Harshil Agrawal ・ Aug 16, 2019 ・
Medium

Harshil Agrawal ・ Nov 9, 2019 ・
Medium

Harshil Agrawal ・ Jun 25, 2021 ・
Medium