DEV Community: Janeth Graziani

Exploring Data Warehousing and ELT Tools

Janeth Graziani — Tue, 07 May 2024 16:58:52 +0000

What is a Data Warehouse?

Think of data warehouses or data lakes similar to Amazon warehouses where finished goods are sent for distribution. In the case of data, warehouses are a centralized location where company data from different department databases are sent and stored for analysis via business intelligence tools (BI). These BI tools then collect, analyze, and visualize data from various sources, and provide valuable insights to decision-makers.

What is Data Warehousing

The process of “data warehousing” involves collecting and sending data into one centralized location. Data is taken from different department databases or source systems via the ELT process (Extraction, Loading, Transformation) and sent into a staging environment.

Data Warehousing Tools

There are a variety of tools that assist in the Extract and Load process including Airbyte, Data Factory amongst others. Airbyte, a popular data integration tool, offers source connectors that enable the retrieval of data from popular APIs, databases, and SaaS platforms directly into data warehouses and lakes, including Teradata VantageCloud warehouses and lakehouses.

Airbyte Cloud, the hosted version, streamlines data ingestion with its fully managed service, eliminating the need for infrastructure setup and management.

Once the data is loaded into Teradata's warehouse or lakehouse staging environment, the transformation process begins to extract valuable and actionable insights using Teradata's ClearScape Analytics™ functions. These functions simplify data exploration, feature engineering, model training, path analysis, and more.

Extraction Tools like Airbyte also help maintain data consistency between source systems and the warehouse by continuously monitoring for updates or modifications.

Learn more about Airbyte Cloud and the Teradata Vantage Connector

Read about it here

Watch the video overview:

How to Build a Sustainable Developer Community: A 5-Phase Framework

Janeth Graziani — Wed, 05 Apr 2023 13:53:23 +0000

Authors: Janeth Graziani & Jacob Lee

Building a developer community can have numerous benefits for your company, from reducing support and onboarding costs to increasing adoption and generating valuable feedback. In this post, we’ll share our approach to engaging and growing a developer community in a sustainable way, based on a 5-phase framework. Whether you’re starting from scratch or looking to improve an existing community, we hope our insights will empower your team to scale your community in a sustainable way.

Let’s dive in!

Setting Goals and Tone

No matter how large or small your company is, there are many, many benefits of building a vibrant developer community: reducing support and onboarding costs for new users, increasing adoption of your platform through referrals, retaining existing users, generating valuable feedback for your high-level product roadmaps, encouraging novel use-cases of your product, and more. Figuring out what you value most will help you better measure your results and prioritize initiatives effectively.

Setting the tone early for your community is crucial. It can establish an identity for your community and its members, and help make process-related decisions later on. A welcoming approach that ensures all members, regardless of their experience level, feel heard is essential. This fosters an environment that encourages low response times for support questions, particularly for new members. As the community grows globally, prioritizing, empowering, and training others who follow your example can help during times when you are unavailable.

Phase 1: Identifying your Developer Audience

The first phase of this process involves identifying the specific group of developers you want to target. The developer community as a whole is huge- there are currently 28.7 million developers in the world, and that number is growing every day! It is therefore essential to pinpoint a specific group to allow you to focus your efforts initially.

You can choose a target developer community based on many different criteria, including region, tech stack, shared interests, or language. For companies with a live product, this group often starts with a self-selected group of users, but it’s still worth taking note of underlying similarities among your most passionate existing fans to see where your community can grow into.

Once you have successfully identified the audience you would like to focus on, you can move on to the second phase of the strategy.

Phase 2: Conducting In-Depth Research

The goal of this phase is to understand your developer audience's pain points, values, and interests, and the best way to do this is to be embedded in your target community. Find where they congregate and go in with genuine interest to understand what they value, what tools they use, and their developer pain points. Some examples of this include:

Attending existing community events, conferences, meetups, and online webinars
Identifying and talking with respected people within the existing community
Pay particular attention to people excited about engaging with and helping others and their style! Get to know them by name
Reading online forums and spaces where the community congregates like Reddit, Dev.to, Hackernews etc

Phase 3: Crafting a Strategy

Once you have in-depth understanding of your target developer audience you can use this expertise to help your team craft a strategy to engage and help the developers within that audience. Use what you learned about your audience's values, interests and pain points, and bear in mind your initial goals and ways that you can guide the community towards them. Some examples could include:

Planning a content calendar covering topics that addresses the identified interests, pain points, and values
Planning Meetups and events that will pique their interest
Planning workshops that teach a valuable skill or tool that they can apply to their development workflows
Planning incentives like custom swag or other special recognition that you can offer your most passionate champions

For this phase, you want to consider ways you can encourage potential members to take part in your community and give back to it. Providing them a place to meet, support, and network with like-minded individuals is a given, but offering learning opportunities, social clout, or material benefit can also be powerful.

Planning is important, but execution is everything and that leads us into our next phase of our strategy.

Phase 4: Execute and Engage

The ultimate goal of this stage is to build trust and genuine relationships within the community.

Execution involves:

Sticking to the planned schedule for content publishing and delivering
Setting firm dates and times for events and meetups and delivering
Encouraging growth by guiding new community members from your events and content to your online platforms and integrating them in a welcoming way
Sharing updates and roadmaps to keep the community excited and engaged
Providing opportunities for competition and collaboration within the community
Ensuring consistent staff presence to ensure community members feel heard
Elevating and recognizing active and helpful community members to encourage a sense of pride in their efforts

By executing on your strategy and engaging with your audience you are building a strong foundation based on availability, consistency, and demonstrated value. You want your community members to feel proud to contribute to and be a part of your community (while being wary of elitism!), and therefore spontaneously encourage others to join. When done correctly, this creates a powerful feedback loop of growth!

Phase 5: Measure and Iterate

Finally, it's necessary to measure the success of your hard work in relation to your initial goals and go back to Phase 3 to adjust your strategy as needed. Some metrics could include:

Content: Traffic to site, social media engagement, downloads of projects
Events: NPS (% of promoters - detractors) from surveys, special signup codes
Online Community Growth: Measure the number of new community members coming from meetups, conferences and other engagements. Bespoke invite codes can be useful here!
Product and tool adoption: Track the usage of your product or tool and identify trends that may suggest an initiative is working

It is vital to take stock and use metrics that map to your initial goals for your community in some way to inform your community engagement strategy. This will enable you to improve your approach over time. Remember that building a sustainable community takes effort, iteration, and consistency but with the right strategy and commitment to measurement and improvement you will always move towards building a sustainable community.

Sustainability and Beyond!

Sustainability is achieved when community members can take the lead in the initiatives your team has modeled. This can involve:

Community members publishing tutorials, open-source code snippets, and apps
Community members providing support and sharing resources
Community members volunteering to become moderators

Reaching this point is a huge milestone, and you’ll notice that your team’s role will start to change. While the amount of direct involvement they’ll have with day-to-day tasks like answering support questions will decrease, it is important not to distance yourself from the community and maintain a firm, consistent presence. Your team will take on more management-type duties where they actively look out for and spotlight quality community content, create guidelines for contribution, and keep an eye out for rising stars who can make up the next wave of champions.

However, don’t let the fact that your community has a feedback loop going lull you to sleep: keep your foot on the pedal and continue to foster engagement and growth through your content calendar or other strategies that have led you this far!

Thank you!

We hope reading about our process helps you form strategies for building communities of your own! No two communities are exactly alike, but this general framework can help you stay organized and measure the success of what’s working and what isn’t. We’ll be following up next week with another article on what this process looked like at Autocode, so stay tuned. In the meantime if you have any questions or comments, feel free to reach out to us on Twitter @janeth_graziani and @Hacubu. Thanks for reading!

A guide to connecting your apps via webhooks with Autocode #tutorial

Janeth Graziani — Wed, 09 Nov 2022 17:34:45 +0000

Applications use webhooks to notify external apps when a specific event occurs. For example, webhooks are how Stripe notifies you via email when a new customer has subscribed, how Webflow saves new lead information into Airtable when a form is submitted, and how Shopify alerts you via Slack when a new purchase has been made.
Knowing how to configure webhook integrations can help you save time and increase efficiency in your workplace.

In this guide we will cover the fundamentals of building endpoints on Autocode to configure webhooks.
To reinforce our learning, we will build an endpoint and configure a webhook so that when a form is submitted on Tally.so a custom SMS message and email is automatically sent.

What we’ll learn:

What is a webhook?
What is an endpoint?
Real world webhook example
Creating an endpoint with SMS and Email functionality on Autocode
- API autocomplete
- API requests
Example: Configuring our endpoint as a webhook on Tally.so
Customizing SMS and email messages using event data on Autocode
- Inspecting Requests
- event payloads
- saving a payload
- consuming event payload data

What is a Webhook?

Webhooks deliver instant event driven messages from one application to another. The key definition here is “event driven” messages.

When an event happens in an application, such as a purchase happening in Stripe, a payload of data is sent to a webhook URL. This webhook will act like a “listener”, meaning it will receive the payload of data from that event. It can also handle the event - meaning it can execute code to launch requests to multiple APIs.

In order for us to configure a webhook, the application must support webhooks. Many of the applications we use at work, such as Github, Salesforce, Hubspot, and Slack, have the ability to extend their applications via webhooks, but some don't.

What is an endpoint?

An endpoint is a file with code hosted on Autocode.com. Once deployed, this code is executable via an HTTP request to the automatically generated endpoint URL. Your endpoint URL consists of your Autocode username followed by the project name and development environment. For example:

Real world webhook example

Webhooks remove information lag and offer a better customer experience. For example, let's say you're using Stripe and you want to reach out to a customer as soon as they subscribe to your service.
By setting a webhook on Stripe to push updates to your customer success team, you can ensure a quick response from your team to a new subscriber.

Key Terms

Webhook - a way of sending data from one application another. You configure an endpoint URL as a webhook to tell an application where to send data.
Endpoint - a file hosted on Autocode that runs code whenever an application sends data to it via webhook configuration
Payload - the data which is sent from one application to another via a webhook
API - Application Programming Interface's are more complex defined instructions for how one application can communicate with another using code. You can try out the APIs that Autocode natively supports by typing await lib in the Autocode editor.

We now have a high level understanding of how webhooks work. However, there is no better way to learn than by doing, so let’s jump into building our endpoint on Autocode and configuring our webhook on Tally. Tally lets us build forms similar to Typeform and Google Forms, and it conveniently supports sending data to a webhook when a form is submitted!

Creating an endpoint with SMS functionality on Autocode

Choose which account you’d like this project to live in, give it a name, and then click Create project. The name you assign the project will form part of your endpoint’s URL.

You’ll be redirected to Autocode’s code editor. Delete everything below line 3. On line 3 we are including our lib Node.js package. This is what allows you to connect to any of the APIs in Autocode’s Standard Library with one line of code.

Let’s begin by adding SMS functionality to our endpoint. You can search for available APIs by typing await lib. A list of available APIs will appear.

A list of all available API integrations will pop up. Select utils API option and search for the method that allows us to Send an SMS message (US and CA only).

Autocode will then pop up a window to assist in preparing the API request to this SMS API.
You’ll be asked to input two parameters.

The first parameter is a phone number to send a message to. Enter your phone number here!
The second parameter is the message you want to send whenever a Tally form is submitted. For now, we’ll keep things simple and just enter A form was submitted!.

Once you have finished configuring your API request, click the blue Finished Configuring button, then the orange Save button.

Copy the endpoint URL at the bottom of the editor down somewhere safe. You’ll need it later in this tutorial!

It is composed with your username, project name and development environment you selected:

https://<username>.autocode.dev/<projectname>@dev/.

Copy the endpoint URL at the bottom of the editor down somewhere safe. You’ll need it later in this tutorial!
Now we’ve got our endpoint URL, let’s try sending data to it using Tally. Tally is a simple way to create forms and surveys. We’ll build and publish a sample form on Tally, then try sending data to Autocode using a webhook.
Head over to Tally, and signup for an account.

Configuring a webhook on Tally

For the purposes of the demo we will use the following lead generation template:

Lead Generation Form Template

This is a simple form that intakes a couple inputs. Select Use this template and then Publish at the top menu-bar. Once we complete this example, you can return and modify it to your liking.

Tally will generate a unique link to your form once you publish. Copy this link and open the form on a separate tab and then select the integrations tab.

As you can seem Tally offers native integrations that make it easy to connect to other platforms and tools. However, it doesn’t natively support Twilio or Gmail. Luckily, we can send form submissions to our Autocode endpoint to get around this limitation.

Select the Webhooks option and set your webhook by registering the endpoint’s URL that you created on Autcode. Make sure to not leave any spaces before or after the endpoint URL and select Connect.

Once you set your webhook endpoint, you will be routed back to the dashboard for your Lead Generation Form. You should make sure the webhook is turned on by toggling the enable option.

Test your webhook by submitting a form. You should receive a message to the number you set when configuring your parameters in Autocode.

Customizing SMS messages using event data

So far, we've been able to deploy an endpoint, configure a webhook URL, and trigger a notification. Next, let’s learn how to extract data from the event payload so that each text is customized with the sender’s name, email address and job title.
Return to the Autocode editor and click the Tools button in the bottom right corner of the editor.

A window will pop up giving you access to four different tabs.
The Logs tab will display any error messages and requests made to your endpoint.

Inspecting Requests

Through here we can inspect individual HTTP(S) requests and events sent to Autocode. We are also able to copy the event payloads directly into the Autocode IDE to debug and iterate on our code.
Hover above the latest request and select Inspect Request.

Here we have access to the time the event was received, complete event payload of data from Tally, headers and more.

You can copy this request payload to your test payload by clicking the blue Copy Request Payload to Test Payload button. This will cause your payload’s data to automatically populate onto thePayload tab in the Autocode IDE. This allows you to simulate an event by pressing the green Run button at the bottom right of the editor, making iterating on code for your endpoint much faster.

Now that we have actual event data to use as we iterate on our code, let’s get back to editing the SMS message we’re sending everytime a Tally form is submitted.
We can use dot notation and template literals to extract the values from the event payload. We’ll format our message to send the first name, last name, email, and role for every person who submits the form via SMS.

// authenticates you with the API standard library
// type `await lib.` to display API autocomplete
const lib = require('lib')({token: process.env.STDLIB_SECRET_TOKEN});

await lib.utils.sms['@2.0.2']({
  to: `10000000000`, //your number here
  body: `A form was submitted here is the info:
  name: ${context.params.data.fields[0].value} ${context.params.data.fields[1].value}!
  email: ${context.params.data.fields[2].value}
  role: ${context.params.data.fields[3].value}`,
});

return "message sent"

Now we can simulate an event by pressing the green run button instead of going back to Tally, filling out and submitting the form to trigger an event.

Adding email notification

While we’re here, let’s add logic to send an email notification to our endpoint. Let’s send a customized email to the person who submits the form with a simple confirmation message that we have received their request.
Use API autocomplete to search for the Gmail API by typing await lib. and select the method to compose and send a message.

Fill out the parameters accordingly click ** Finish configuring**

// authenticates you with the API standard library
// type `await lib.` to display API autocomplete
const lib = require('lib')({token: process.env.STDLIB_SECRET_TOKEN});

await lib.utils.sms['@2.0.2']({
  to: `15100000000`, //your number here
  body: `A form was submitted here is the info:
  name: ${context.params.data.fields[0].value} ${context.params.data.fields[1].value}!
  email: ${context.params.data.fields[2].value}
  role: ${context.params.data.fields[3].value}`,
});

await lib.gmail.messages['@0.2.8'].create({
  to: `${context.params.data.fields[2].value}`,
  subject: `Hey ${context.params.data.fields[0].value} - we received your request!`,
  text: `Hey ${context.params.data.fields[0].value},\n\nThank you for submitting a request. We will get back to you shortly!\n\n-Janeth \nDeveloper Advocate`
});

If this is the first time making a request to the Gmail API, click the red required button to the bottom left of the editor and follow the instructions to link a New Resource.

Submit a form with your email and you will receive an email within seconds.

Time to start building

Congratulations! You are now equipped with the webhook language and tools to build webhook functionality.

Build a QRCode Inventory Management System with Autocode and Airtable

Janeth Graziani — Mon, 26 Sep 2022 16:42:01 +0000

If you use Airtable to keep an inventory of items in your warehouse, you can save time by scanning QR codes with your iPhone and quickly updating your Airtable base as you restock your shelves or check items in and out.

In this tutorial, we’ll learn to build a system that automatically creates QR Codes for every record in an Airtable base. You’ll be able to print QR Codes for each product and attach them to your inventory shelves for easy scanning and updating information on every record.

Part 1: Generate QRCodes for every row in Airtable using a formula

We’ll use the QRCode API in an Airtable formula to automatically produce barcodes for each record (row) in Airtable.

Part 2: Transform image file URLs to attachments in bulk with Autocode

We’ll write a script to transform a bulk of image file URLs into image attachments in Airtable.

Let’s get started!

Part 1: Generate QRCodes for Every Row in Airtable using a Formula

You can easily create QRCode images for each item in an Airtable Product Inventory Management System. As a sample for this tutorial, we’ll use this inventory tracking template.

Copy the template to your Airtable Workspace by clicking this link 👇🏼

https://airtable.com/templates/local-business/expDrHGuyjSQlrKTq/inventory-tracking

Right-click on any record in an Airtable to view the record URL.

Notice that all record URLs include a TableId ViewID RecordID: https://airtable.com/<TableID>/<ViewID>/<RecordID>;

For Ex: https://airtable.com/appYf6XDJS4EtYfP1/tbl5CBRYJFvT3VCif/viwCV6qE9IazFasPl/rechADzwWPVMsMBg4

We will use these record URLs in a formula to autogenerate QRCodes for every record using an API service hosted on Autocode:

https://autocode.com/qrcode/api/generate/#__main__

Try it out by inputting some text and errorCorrectionLevel. Press Run and take out your phone to scan the QrCode.

Great! We can use this QRCode service that we can use to automatically generate QRcodes for every record in our Airtable.

Writing the Formula in Airtable

Create a new field and title it QRCodeLink (field names to to be exact) select Formula for the field type.

Copy and paste the QRCode URL in the formula field, followed by ?text=.
Like so: https://qrcode.api.stdlib.com/generate@0.0.3/?text=

Step 2:

Next, we’ll add a new function by first inserting an ampersand (&) as a separator. Then:

Add the ENCODE_URL_COMPONENT( function followed by the URL to your Table which consists of
"https://airtable.com/TableID/ViewID/" insert an ampersand (&) as a separator and add RECORD_ID()
function to retrieve every row’s ID. Don’t forget to close off your function with a bracket ) .
Add another ampersand (&) separator and add the additional parameter '?errorCorrectionLevel=Medium'
Mine looks like this: 'https://qrcode.api.stdlib.com/generate@0.0.3/?text=' & ENCODE_URL_COMPONENT("https://airtable.com/tbl5CBRYJFvT3VCif/viwCV6qE9IazFasPl/" & RECORD_ID()) & '?errorCorrectionLevel=Medium'

Hit Save. Now every time you add a new record to your Airtable, a QRCode will be auto generated for that record.

Part 2: Transform Image File URLs to Attachments in Bulk with Autocode

You now have a link to the QRCode image for every row in Airtable.

Create a new Attachment field and title it exactly like so: QRCodeImage:

We now need to write a script on Autocode to transform our QrCode links to image attachments. Head on over to your Autocode dashboard and sign in or create an account.

Select New Web Service and give the project a name.

You will be routed to the __main___.js file for your project. Delete the auto generated code and paste the following code:

const lib = require('lib')({token: process.env.STDLIB_SECRET_TOKEN});

module.exports = async () =&gt; {
  let result = {airtable: {}};

console.log(`Running [Airtable → Select Records by querying a Base]...`);
  result.airtable.selectQueryResult = await lib.airtable.query['@0.5.2'].select({
    baseId: `&lt; Insert BaseId Here &gt;`,
    table: `Product Inventory`,
    where: [
      {
        'QRCodeImage__is_null': true
      }
    ],
    limit: {
      'count': 0,
      'offset': 0
    }
  });
  console.log(`Running [Airtable → Update Records by querying a Base]...`);
  for (var i = 0; i &lt; result.airtable.selectQueryResult.rows.length; i++) {
  await lib.airtable.query['@0.5.2'].update({
    baseId: `&lt;Insert BaseID Here&gt;`,
    table: `Product Inventory`,
    where: [
      { 
      'Product ID': `${result.airtable.selectQueryResult.rows[i].fields['Product ID']}`
      }
      ],
    limit: {
      'count': 0,
      'offset': 0
    },
    fields: {
      'QRCodeImage': [ {"url": `${result.airtable.selectQueryResult.rows[i].fields['QRCodeLink']}`}]
      },
    typecast: false
  });
  }
  return result;
};

Press Save and select the red Account Required button, which will prompt you to link an Airtable account.

Select Link then Link Resource and follow the instructions on the modal to retrieve your Airtable API Key and select Finish.

Once you’ve finished Linking your accounts you need to add your base’s ID to line 12 and Line 28.

Locate your Base ID by clicking on the HELP tab on the upper right corner of your Base. Select API documentation.

Copy the base id:

Paste the base ID onto line 12 and line 28 in between the backtick quotes to set the value for baseId as seen in the screenshot:

Finally up your timeout to 30,000 ms. By default it is set to 10,000 ms.

If you have a large amount of records, you may need to run this script a couple of times to complete transfering all links to attachemts.
Hit Run Test Event and watch as your Airtable becomes populated by Autocode.

That’s it! 🤗

You now have all the tools you need to build an inventory control system with Airtable and QRCode APIs on Autocode. I hope you found this tutorial helpful. If you have any questions, jump into our Discord support channels. Our team at Autocode is ready to help.

Best Practices for Discord Server Moderation

Janeth Graziani — Fri, 22 Apr 2022 14:17:45 +0000

Moderation is an important part of building a great Discord community where people will want to hang out. As moderators of Autocode’s Discord server, we know how tough online moderation can be. That's why we want to share the tools we use to moderate our 40,000 + community.

While there are thousands of Discord moderation bots, installing a bot won’t solve all your moderation needs. You need human intervention to ensure your server’s moderation strategy is appropriate and fair. You as a server owner and moderator need to create the environment for moderation bots to work as intended. We hope that the following tips will help you and your team create this environment to build an effective moderation system.

Table of Contents:

Define Server Rules
Set up channels, roles, and permissions
Configure Discord tools
Build a Discord bot
Install features to assist with server moderation
Install pre-built moderation bots from bot.gg

Define server rules

Moderation begins with clear and concise rules that will guide and shape your community as it grows. These rules define how your community engages with each other and allow your staff, moderators, and community leaders to intervene adequately when community guidelines are broken.

We recommend that you consider setting expectations around the following topics in your server:

❗ Safety and Harassment ❗ - As your public server grows you will be interacting with people from all walks of life. Make sure your community is a safe and positive environment for people and discourage harassment surrounding:

Age
Race and ethnicity
Religion
Gender identity
Sexual orientation
Economic and social status

Jokes, memes, comments, and bullying around any of the above mentioned should never be tolerated in a healthy and supportive community.

🗒️ Appropriate Content - Define the content, topics, and conversations that are not acceptable. This will create a community that is inclusive of all ages. Remind your community to follow Discord’s content policy, as well as any other TOS that are relevant to your community.

🗨️ Channel Usage- Keep your server and conversations organized by highlighting what channels are for and encouraging people to keep chats relevant to the channel’s purpose.

🖥️ Getting Support - Explain how your community can request support. It is also a good idea to point towards existing resources so that your community can be self-supportive. You may also consider introducing roles, staff, moderators, and community leaders that are available to help. Set expectations for how extensive support is.

You’ll likely also need to tailor rules specific to your type of community. For example, if you run a Discord server focused on photography, what kind of photos aren’t allowed to be shared? If you run a gaming server, do you allow off-topic discussion? The answer to questions such as these should be codified within your rules.

Set up channels, roles, and permissions

As a Discord server moderator, you will need to have a private space to communicate with your team and with the leaders in your community. Discord’s moderation tools allow us to create channels that are only accessible to specific members and roles via permissions.

Permissions allow you to control who can view a channel, send messages in the channel, manage app commands, and more. To learn how to set up super-secret channels and modify the permissions check out this guide.

You should also think about how public channels’ permissions are set up. For example, consider whether it would be best to enable slow mode on some channels.

Configure Discord tools

Once you’ve defined your rules and set up your channels, you will be ready to properly enforce these rules and protect your server. We recommend that you begin by configuring Discord’s built-in tools. Select Server Settings to find the Moderation Menu. Discord's Moderation Menu allows you to quickly set up basic protection for your server to discourage malicious people or bots from joining and causing trouble.

We recommend setting a Medium or High verification level. This will require that any member joining your server have a verified email address on their Discord account. They must also wait a certain amount of time before they are allowed to send messages in channels. Encourage new members to use the waiting period to read the community guidelines and learn about the different channels.

We encourage public servers to enable the setting that “Scans media content from all members.” This will prevent malicious people from posting NSFW content on your server.

You should also enable the two-factor auth requirement. Your moderators will need to have two-factor authentication on their account in order to use moderation actions like banning/kicking users and deleting messages. This will help prevent hackers from taking over a moderator account to cause trouble on a server.

Build a Discord bot

While the moderation menu offers basic moderation abilities, as your community grows you will want to further protect your server. Users may try to disrupt your server by sending spam, posting unwanted text in channels, raiding your server, and more. Fortunately, we can solve many of these problems with help from a little bot friend.

At Autocode, we recommend building a Discord moderation bot to help assist you and your team. Remember, Discord bots are meant to complement human moderation, not replace it.

You can easily set up your Discord bot with Autocode by following this step-by-step tutorial “How to build a free Discord bot with Node.js”. You don't need to install anything or pay anything to build and host your bot - it's free and easy to set up.

Install features to assist with server moderation

Once you have completed the step-by-step tutorial, you will be able to customize your bot. You can easily add custom commands and moderation features like member verification, anti-spam, anti-raid verification systems and more.

One of the main advantages of creating a custom bot is that you can have a single bot handle everything, rather than having to manage multiple bots. At Autocode, we make it super easy to add features to one bot with our large library of Snippets. Snippets allow you to use others' code inside your project, making adding features to your Discord bot super quick!

Here is a short 2-minute video that explains how to install snippets into your Discord bot project.

And here is a list of the Snippets we recommend for moderation:

Anti-spam: Keep your channels clean from unwanted invite links, messages, and mentions.

Anti Discord Invite links Delete messages that have or contain discord.gg/ or https//discord.gg/ so that no one can send invite links in your server. The bot will post a warning message after deleting invite links.
Anti Token Grabber Links - Auto Moderation Checks if the message that was sent contains any known token grabber Links. If it does, it deletes the message, sends a warning in the chat, and assigns a muted role.
Anti Caps Spam Delete any message with more than 10 characters in all caps. The bot will post a message asking the user to not use all caps.
Anti mentions When a member of your server tries to mention "@here", your bot will remove their chat permissions for an hour. This will not affect the server owner or other members with admin permissions, since timeouts cannot be set on those users. Admins can remove timeouts by right-clicking the member's icon and selecting the option that appears.

Text filters: Keep your server clean from profanity.

Automatically delete messages containing a word in the bad word list
Anti Swear System | Profanity Filter Automatically detects profanity and deletes messages containing profanity.

Anti-raid: Raids are when a large number of users enter your Discord server at once to cause trouble. One way to stop raids is by protecting your server with a verification system.

Server captcha verification bot Verify new members who join your server via the captcha verification system.
Verification System. This app will make sure people have to click a button before getting access to your server! Prevents bots from accessing your server
Raid purge command remove messages after a raid with a simple command ex: !purge 20.

Install pre-built moderation bots from bot.gg

You can invite a Discord moderation bot into your server instead of building one. Head on over to bot.gg and search through our growing list of bots.

A popular moderation bot we recommend is Spectre. This is a handy tool that will assist your moderators. It’s equipped with moderation features that allow admins to purge chats, lock channels, and lock down the server. Your server members can easily make reports and suggestions via slash commands.

Conclusion

Moderation is a foundational part of any thriving community. Making sure clear guidelines are established, executed, and enforced will keep everyone in your community safe and comfortable.

Remember that moderation starts with you, and should always be taken seriously. Moderate what you can manually with you and your moderator team, and use bots to assist where you need it. Your community will be grateful for it!

Growing and Engaging your Discord Community: A How-To Guide

Janeth Graziani — Fri, 08 Apr 2022 22:53:44 +0000

Growing and engaging a Discord community is not an easy task and that’s why at Autocode we are extremely proud of the 40,000+ member community we’ve built. In this blog post, we’ll be sharing how we have created a thriving, supportive and friendly community.

Whether you are a game developer, bot builder, discord community manager, or social media influencer, these tips will help you build an active community.

Provide opportunities for competition and collaboration
Ensure consistent staff presence
Elevate active and helpful community members
Provide opportunities to showcase members and their work
Leverage the power of Discord Bots

Provide opportunities for competition and collaboration

One way you can boost your server’s engagement is through competition and collaboration. Here at Autocode our multi-talented Developer Relations Lead, Jacklyn Biggin, runs Autocode Community Challenges at least once a month. These challenges are an opportunity for our community members to come together, collaborate, show off their skills, and learn new technologies via friendly competitions.

We’d recommend following these guidelines when designing competitions within your server:

Encourage participation with rewards and server roles. Here at Autocode, we reset our entrant and winner roles after each challenge meaning previous winners have to win the next challenge to keep their role!
Be consistent. You want your community to look forward to these fun events, therefore setting dates and times is important. For example, you can organize an event during the first two weeks of every month.
Use Discord’s Scheduled Events feature, and make sure to provide an easy to access document for your community to review event rules and expectations.
Have a dedicated Discord channel for these challenges, This is very helpful and will keep your discord server organized as well as provide a space for your community to ask questions and discuss the event.

Ensure consistent staff presence

Another great way to engage and grow your community is by ensuring you have a consistent staff presence on the server. Your staff needs to be integrated into the server as part of the community to build trust and create authentic connections.

At Autocode, our captivating Media Producer, Nestor Romero, moderates question and answer sessions with Autocode team members once a week in a Stage channel. QnA sessions are an opportunity for community members to ask questions and allow them to connect with the team behind the platform.

Here are some of the things we think about when running our Q&As:

Take questions ahead of time. At Autocode, our community can submit questions ahead of time via a /qna command.Learn how to build a similar command here. The questions are stored in a Google sheet and make it super simple for our moderator to organize and prepare. Submitted questions also appear in our #community-events channel, which helps create buzz around interesting questions.

Broadcast this Q&A to your Discord server using Discord’s Stage channels. Stage channels are the perfect way to conduct audio events since Stage channels allow you to set speakers, moderators, and members can join as the audience. In addition, there are no alerts interrupting the event when someone joins or leaves the stage.

Keep your Q&As relevant and casual. Remember, they are guided conversations. Allow your community to connect with you and your team members by finding the balance between being authentic and sharing the knowledge or info relevant to your community.
Prepare for the evolution of your Q&As. While QnA sessions may start off as a way for your community to get to know your team members, over time they may evolve into monthly updates on your bot, community, or product. Let things naturally evolve in a way that works for your community.

However, outside of events, you should still aim to have your staff online and around as much as possible. Simply having staff active in text and voice channels can make a huge difference to your server’s activity.

Elevate active and helpful community members

Community leadership is necessary for your server’s engagement and growth. It’s important for your team to quickly identify the most passionate, selfless, mature, and committed individuals in your Discord community. They will be the ones to foster a healthy and supportive server.

At Autocode, we recognize these leaders as our Community Heroes, and we’ve created a special role for them on our server. These Community Heroes are the backbone of our community and their presence is positive and helpful. They are the first to volunteer to test new features, help out in our support channels, and create amazing apps, websites, and Discord bots to share with others.

If you’re building a similar program for your server, here are some tips we’d recommend following:

Create a leadership role. Write a guide that outlines what the role entails, rules, and expectations, and explains their privileges.
Create an application process for this role in your community. Instead of promoting random community members, provide a path for leaders to achieve this role. This may also allow you to gain more insight into individual community members. You can check out our Community Hero application here.
Actively invite leaders to apply. Once you identify these leaders, it’s important to invite them to apply to this role. Encouraging them to apply rather than just waiting for them to can give them the confidence boost they need.
Introduce your leaders. Assign your community leaders a role in your Discord server and introduce them to your community
Recruit community leaders consistently. At Autocode, we review applications once a month.

Provide opportunities to showcase members and their work

Allowing your community to come together and showcase their work around a topic of interest can be a great way of driving more engagement in your Discord server.

At Autocode, our animated Content Producer, Ethan Kellogg, leads Show and Tell sessions. During these sessions, our community can share their latest apps, Discord Bots, and websites that they’ve been working on.
Here are some things to remember when planning these opportunities:

Plan and schedule ahead of time. Create a server event so that people know when your events start, but be sure to keep things casual when running them. Allow people join and leave, ask questions, or hang out for the duration of your event.
Be considerate of time. Utilize Discord’s server insights (https://support.discord.com/hc/en-us/articles/360032807371-Server-Insights-FAQ) to identify days and times during the week when your server is the most active. Try to select times to host these sessions that allow for international participation - remember that not everyone will be in the same timezone as you!
Be inclusive. You should encourage and allow everyone to participate. Take a quick poll before the event to see who is interested and check in with them to find out what they plan to talk about.
Be welcoming and encourage members to interact with each other. The purpose of Show and Tell sessions are to get people invested in each other's projects and to encourage the community to share those projects in the first place. Encouraging feedback, updates, WIPs, etc. can all help achieve this goal. When planning similar events for your community, think about what your members need to be successful in your community.
Leverage voice channels and text channels. Voice channels provide the ability to screen share and give live demos. You can also encourage members to share links, screenshots, and recordings of their projects in a text channel during these events.

Leverage the power of Discord Bots

Discord bots are undeniably one of the handiest tools you have, and we recommend using them to take your Discord server to the next level. A basic server can be transformed into a truly awesome place to hang out by building and adding fun bots to it.

At Autocode, we have built a multi-purpose bot that takes care of many of our moderation needs and also keeps our community jamming to their favorite tracks.

Here are some things to consider when adding Discord Bots to your Server.

Browse listing for popular Discord Bots. Read their descriptions carefully to figure out if they’d be a good tool for your community. For example, Bot.gg is Autocode's curated Discord bot list that you can easily search through to find the perfect bot for your server.

Build your own custom bot. You can start building your first bot with our guide for building Discord bots here.
Test bots in a test server. Make sure to create a test server when trying out bots. You want to avoid disrupting your community when installing and testing bots for the first time.

Thank you!

Thank you for reading! I hope you have found these suggestions for how to engage your Discord community helpful! If you would like to chat about any of the mentioned suggestions, please join our Discord server and ask our team! We’ll be happy to share!

Grow your server by building these 5 Discord bots

Janeth Graziani — Mon, 04 Apr 2022 18:52:04 +0000

Discord bots are awesome – they are very much like little helpers that can improve and grow your Discord server. You can transform your server into a truly awesome place to hang out by building and adding Discord bots to it. And as your server grows, it can become more challenging to manually manage and moderate it. Fortunately, moderation bots can help here too! We have handpicked some of the best Discord bot templates available on Autocode to help you improve and grow your server!

These bot templates are free and work right out of the box! The best part is that they are easily customizable with code to fit your Discord community needs and they come with amazing community support.

If you get stuck or want to customize any of these bots, you can reach out to a helpful community of 40,000 members on the Autocode Discord Server where someone is always willing to help.

Advanced Music Bot - Stream high-quality music from Youtube and Spotify with an audio player interface.
Basic Discord Music Bot - Stream tracks from Youtube with prefix commands
Basic Discord Economy App - Use prefix commands to give, steal, search, and gamble for money throughout the server
XMod App - Moderate your server with slash or prefix commands to warn, mute, kick and ban members
Advanced Ticketing System - Manage questions and requests in an efficient and organized manner
How to add bots to Discord
Support for adding Discord bots

1. Advanced Music Bot

One of our favorite features you can unlock via bots is music streaming! You can easily listen to music with friends while you game, stream, or work! If you're new to using music bots for your server, or if you're looking for a replacement for the Groovy Discord bot and Rythm bot, the Advanced Music Bot is just what you need!

Advanced Music Bot Features:

Supports Spotify playlists, tracks, albums
Supports Youtube
24/7 playback
Features a player menu with buttons similar to the popular Hydra bot for pausing/resuming, stopping, looping, and skipping through songs
Creates automatic queues of songs from the track links sent into the designated playlist channel
Displays upcoming tracks in the queue as well as the track cover image
Completely customizable with access to source code
Includes a video tutorial for guided setup https://www.youtube.com/watch?v=Gt-21iScTN4
Free!

If you and your friends love streaming music from Youtube and Spotify then this is the perfect tool to increase activity on your server! Have your friends add their favorite songs to the queue and jam out together! Head on over to Autocode and try it out!

2. Basic Discord Music Bot

If you need a Discord bot that uses prefix commands to play music instead of an audio player, the Basic Discord Music Bot template is complete with the commands you need!

Basic Discord Music Bot Features:

Play audio tracks from YouTube in a Discord voice channel of your choice
Easy setup and allows you to search for tracks or enter a direct YouTube link
Features system for queueing tracks in advance
Complete with the following prefix commands:
- !play <query> ; - Play or search for a track
- !play - Resume a paused track or play the latest track from the queue if the player is disconnected
- !pause - Pause the currently playing track
- !disconnect - Disconnect the bot from the voice channel
- !queue - Retrieve the current track and queued tracks
- !enqueue - Add a track to the queue
- !skip - Skip currently playing track and play the next track in the queue
- !clearqueue - Clear the current queue
- !help - Bring up a help menu
Customizable with access to source code
Includes a video tutorial for building this Music Bot from scratch
Free!

Get your server jamming to the latest and best tracks with your customizable Discord Music Bot. Install it free!

3. Basic Discord Economy App

Build and grow a fun, interactive, and rewarding server with this Basic Discord Economy app template. Keep your community entertained as they use prefix commands to give, steal, search, and gamble for money throughout the server.

Basic Discord Economy App Features:

Easy to set up currency system complete with the following commands:
- !createbank - Register yourself and create a bank account.
- !give <@user> $100 - Give a friend money from your account
- !rob <@user> - Steal money from a friend. You may fail and lose money!
- !search - Search for money
- !gamble - Attempt to gamble and have a chance of winning, drawing, or losing
Features rate-limiting for search and rob command.
Easily add additional extensions including a leaderboard to view a list of users with the most money on your server + more
Completely customizable with access to source code
Free!

Encourage and grow engagement in your Discord server with the Basic Discord Economy App. Install it here!

4. XMod App

To prepare for the growth of your server you will want to install the Xmod App. This bot will give you and your server’s admins access to commands that will make it super simple to fight off spammers and abusive users.

XMod Features:

Easy to setup moderation bot with the following commands:
- /ban <user> <reason> - will ban the mentioned Discord user.
- /kick <user> <reason> - will kick the mentioned Discord user.
- /mute <user> <reason> - will mute a Discord user by applying a mute role
- /unban <user_id> - will unban a banned Discord user by id
- /unmute <user> - will unmutes a Discord user by removing their mute role
- /warn <user> <warning> - will send the mentioned Discord user a warning
Set up prefix, slash commands, or both!
The warned, kicked, muted, and banned user will receive a direct message
Includes a logging system to keep a record of who was banned, muted, kicked, and warned and by whom
Completely customizable with access to source code

Install the XModd app template and maintain a fun and enjoyable environment as your server grows with easy-to-use moderation commands!

5. Advanced Ticketing System

As your server grows you will notice that the number of questions you receive will increase! Thanks to the Advanced Ticketing System you will be ready to handle all questions and requests in an organized manner. This template is a free, open-source, and fully customizable alternative to popular paid bots like Ticket Tool, TicketsBot, and Helper.gg.

Advanced Ticketing System features:

Reaction panels with Buttons - allow for your community members to open support tickets with a single click
Create tickets based on a topic including giveaways, claiming rewards, reports, and general help
Complete with slash commands - your moderators/admins can claim, rename, and close support tickets with a quick slash command
Transcripts - automatically saves a transcript of opened and closed tickets in a channel of your choice

Start managing support tickets in your server efficiently by installing this Discord bot template!

How to add bots to Discord

To install any one of these Discord Bot templates, first, make a free account at Autocode if you don’t already have one.

Read the instructions in the ReadMe.md section of the template you’d like to use to create your Discord bot.

Once you read through the instructions and are ready to install, select the green Install Free button.

Finally, Link your Discord account by clicking the red required button. If this is your first time linking a Discord account on Autocode, select Link a New Resource. And follow the instructions in the popup window carefully as it will walk you through the following steps to create a Discord Application and link it to your Autocode account. Or watch the video here: https://youtu.be/zvKzM_mb_v4?t=49

Support for adding Discord bots

I hope that you have found our top 5 Discord bots for improving and growing your server helpful! If you are interested in finding additional open-source templates for assigning roles, creating reaction roles, leveling systems, web dashboards, and scheduling events check out the templates published by our community here. If you come across any issues while installing or customizing these Discord bot templates, please join our Discord server and ask our #support-request channel. Or send a DM to janeth#2189!

How to Program Discord Message Embeds with Buttons

Janeth Graziani — Tue, 18 Jan 2022 04:16:38 +0000

Hey there Autocoder! If you are reading this tip of the week to level up your Discord bot development skills, I assume that you have already completed our first guide “How to build a free Discord bot with Node.js.” If you have not, I highly recommend you complete it first. It covers creating a Discord bot, linking accounts, creating slash commands, and so much more that we will build on top of.

What you'll learn

Today we will learn how to program buttons. We will add functionality to our Discord bot so that it replies to a prefix command like !addrole. It will post a message embed into the Discord channel where the command was invoked. The embed will contain buttons and upon selection, a role will be added to the user pressing the button.

Prerequisites

A Discord bot built on Autocode using this guide.
The ambition to level up your Discord Bot development!

Let’s get started!

Step 1: Mocking up Embed Messages with Buttons

First, let’s mock up the message our bot will send. Head on over to the embed builder. For this example, we'll set a simple embed message with a title, description, and two buttons.

In the Components section, select Button, give it a style, label and acustome_id This custom id is unique to your button and you will use it again to handle the request when a user presses one of the buttons. I have set my custom id as dev_button_id and techie_button_id for my buttons.

Once your embed message looks perfect toggle the view code button on the top right. This is the code that will execute when a user invokes a command.

To set it up, copy this code, and head on over to your dashboard.



const lib = require('lib')({token: process.env.STDLIB_SECRET_TOKEN});

await lib.discord.channels['@0.2.0'].messages.create({
  "channel_id": `${context.params.event.channel_id}`,
  "content": "",
  "tts": false,
  "components": [
    {
      "type": 1,
      "components": [
        {
          "style": 1,
          "label": `Developer`,
          "custom_id": `dev_button_id`,
          "disabled": false,
          "emoji": {
            "id": null,
            "name": `🧑`
          },
          "type": 2
        },
        {
          "style": 3,
          "label": `Techie`,
          "custom_id": `techie_button_id`,
          "disabled": false,
          "emoji": {
            "id": null,
            "name": `😎`
          },
          "type": 2
        }
      ]
    }
  ],
  "embeds": [
    {
      "type": "rich",
      "title": `Select Your Desired Role`,
      "description": `What best describes you`,
      "color": 0x00FFFF
    }
  ]
});

Step Two: Creating an Endpoint to Handle a Prefix Command

Click the project you built when completing the first tutorial “How to build a free Discord bot with Node.js.”.

Select New Endpoint.

Set your trigger to Discord and your event as message.create.prefix. A prefix input will appear, which we'll set as !role or whatever you wish your prefix command to be.

Hit the blue Okay to finish setting the trigger.

Replace the existing code with the code generated from the embed builder in step 1 and press the orange save button.

Great! We've created an endpoint that will handle a request whenever a user types !role in any channel.

Notice that we included the lib node package on line one which allows us to make the request to await lib.Discord.channels['@0.2.0'].messages.create API. This API will post our message back to the channel that sent the prefix command because ${context.params.event.channel_id} is populated with the data coming in from Discord.

Now we can test the prefix command by heading over to Discord and posting a message with our prefix command like so: !role

Great work so far! But you’ll notice that nothing will happen when you select a button. That is because we haven’t created the endpoint that will handle our request when a message button is clicked! Let’s go do that next.

Step 3: Create an Endpoint to Handle Button Interactions

Head back to your project in Autocode and select a new endpoint. Set your trigger as Discord and your event as message.button.interaction. A custom_id input will appear. This is where you place the custom_id of one of your buttons. I will begin programming my developer button that has the dev_button_id.

Hit the blue Okay to finish setting the trigger.

Next, we need to add the code which will give our user the Developer role upon selecting the button. We will use the members.roles.update() method from the discord/guilds API.

Copy this block of code onto the message.button.interaction handler.



const lib = require('lib')({token: process.env.STDLIB_SECRET_TOKEN});

let result = await lib.discord.guilds['@0.1.0'].members.roles.update({
  role_id: ``, // required
  user_id: context.params.event.member.user.id, // required 
  guild_id: context.params.event.guild_id // required
});

await lib.discord.channels['@0.2.0'].messages.create({
  channel_id: context.params.event.channel_id,
  content: `The Developer role has been assigned to &lt;@!${context.params.event.member.user.id}&gt;!`
});
```

On **line 4** in between the backticks, you will input the id for the role you wish to grant when a user presses the button. 

And a quick way to find your role’s id is by typing the role in Discord then adding a backslash before the role like this \@role.  

![Role Id](https://janethl.public.files.stdlib.com/_stdlib/provider/JanethL/images/roleId.png)

Your code should look like this with your unique role id on line 4. Press the orange save button.

![Button Handler Code](https://janethl.public.files.stdlib.com/_stdlib/provider/JanethL/images/code2.png)

On **lines 3 - 7** we are making a request to **members.roles.update.** In the argument for `role_id`, we pass in the unique id of the role we want to assign when a user selects the button. We also identify the user we want to assign with `context.params.event.member.user.id.` 

On **lines 9 - 12** we then make a request to **message.create** to post a message confirming that the developer role was assigned. We post the message to the channel where the button was invoked by passing in `context.params.event.channel_id` into `channel_id.` For the `content` argument we pass in a string and we use backticks for this  since we are using a [template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to retrieve the user id with `${context.params.event.channel_id}.` 

We use `context.params.event.member.user.id` and `context.params.event.channel_id` because all Discord endpoints on Autocode have a **context.params.event** property that holds all the data for the specific event. In this instance, the event is a button interaction. When that button is pressed, Discord sends a unique payload of data to your endpoint. A sample of that data can be seen when you press the `payload` button to the bottom right of Autocode. 

We use [dot notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors) to extract  the user id from this payload like this `context.params.event.member.user.id.`

![Sample Payload](https://janethl.public.files.stdlib.com/_stdlib/provider/JanethL/images/samplePayload.png)

Keep in mind that every endpoint receives a unique payload of data. The way you retrieved the user id for this endpoint is not the same as retrieving it when using other endpoints like message.create. You must check the sample payload or log your event to the console using `console.log(context.params.event).`

Great now that you’ve programmed your button, it’s time to test on Discord! 

Select the button and watch as your bot successfully gives you a role and confirm with a message.

![Developer Button](https://janethl.public.files.stdlib.com/_stdlib/provider/JanethL/images/DeveloperButton.png)

![Role Update](https://janethl.public.files.stdlib.com/_stdlib/provider/JanethL/images/roleUpdate.png)

Amazing! You have successfully programmed your first button on Autocode! You can now repeat the same steps to program the second button.

## Step 4: Repeating the Process to Program More Buttons

Create another endpoint for **message.button.interaction** and in the input for `custom_id`, type in the second button’s `custom_id`.

Replace the auto-generated code with the following.

```javascript

const lib = require('lib')({token: process.env.STDLIB_SECRET_TOKEN});

let result = await lib.discord.guilds['@0.1.0'].members.roles.update({
  role_id: ``, // required
  user_id: context.params.event.member.user.id, // required 
  guild_id: context.params.event.guild_id // required
});

await lib.discord.channels['@0.2.0'].messages.create({
  channel_id: context.params.event.channel_id,
  content: `The Techie role has been assigned to &lt;@!${context.params.event.member.user.id}&gt;!`
});

Press the orange save button.

You are on a roll! Time to test if it all works as expected! Head back to your discord server and press the second button.

You have learned to program buttons on Autocode! You should be very proud of yourself for leveling up your Discord bot development skills!

Additional Tips

The possibilities are infinite now that you know how to program buttons and have access to Discord’s APIs on Autocode. Take some time to explore each API and discover different actions you can invoke via Discord button interactions.

How to remove a role from a user after button is pressed

If you’d like to remove a role from a user once a button is pressed use members.roles.destory() method from the discord/guilds API.

How to disable buttons after a button is pressed

I want to disable the developer button after it has been clicked. Therefore I make a request to message.update inside my message.button.interaction endpoint for the specific button I want to disable. I set the disabled field inside components to true and paste the following code at the end of my previous code.



await lib.discord.channels['@0.2.2'].messages.update({

  "channel_id": context.params.event.channel_id,

  "message_id": context.params.event.message.id,

  "content": "",

  "tts": false,

  "components": [

    {

      "type": 1,

      "components": [

        {

          "style": 1,

          "label": Developer,

          "custom_id": dev_button_id,

          "disabled": true,

          "emoji": {

            "id": null,

            "name": 👨

          },

          "type": 2

        },

        {

          "style": 3,

          "label": Techie,

          "custom_id": techie_button_id,

          "disabled": false,

          "emoji": {

            "id": null,

            "name": 😎

          },

          "type": 2

        }

      ]

    }

  ],

  "embeds": [

    {

      "type": "rich",

      "title": Select Your Desired Role,

      "description": What best describes you,

      "color": 0x00FFFF

    }

  ]

});

Thank You!

Thank you for building with us! If you have additional questions regarding creating prefix commands, message embeds, updating roles, or anything else, don’t hesitate to ask us on our Discord Developer server.

Solving Coding Challenges with JavaScript Functions on Autocode

Janeth Graziani — Fri, 25 Jun 2021 17:43:10 +0000

In my first blog, I wrote about the many factors influencing my decision to join General Assembly's coding Bootcamp. I also committed to blogging about my journey and writing tutorials because teaching is the best way to reinforce learning. As promised, here is an update on my progress during the 12 week General Assembly Software Engineering Immersive program. This tutorial will cover my favorite topic in Unit 1 --- JavasScript and functions!

We've been zooming through every day and week, and while it's been challenging to intake so much information in such a short period of time, I'm loving the program's curriculum and structured daily agenda. Our 12 weeks are broken down into 4 units that cover fundamental technologies for full-stack application building.

In this tutorial, we will apply some of the tips that I've learned through General Assembly to strengthen our JavaScript skills and to approach solving coding challenges.

Let's get started! 🧑🏽‍💻👩🏽‍💻 👇🏼

Intro to JavaScript Functions

JavaScript is an essential programming language. These days, you can do everything with it: from selecting and manipulating elements on a website to setting up Node.js servers that can handle millions of requests per second. But before we can begin leveraging the power of JavaScript, we need to master functions.

Functions are fundamental building blocks of JavaScript. They are reusable blocks of code that we can leverage throughout our applications as many times as we need to create our desired functionality. Today we will practice solving 3 challenge JavaScript problems with functions. We will follow four steps to solve each problem:

Carefully read the problem to understand it
Use pseudocode to craft a plan for solving the problem
Code it out on Autocode
Test and Deploy your solution on Autocode

I've chosen to code on Autocode to help us better understand the power of functions. Autocode is an online code editor and hosting platform that will allow us to easily publish our functions and make them accessible via the web without worrying about setting up hosting through third-party services. Autocode will automatically turn our JavaScript functions into HTTP(S) endpoints. 🤯

Let's get started! 👩🏽‍💻

First ... set up your free account on Autocode

Head on over to Autocode.com and sign up for a free account. Choose a subdomain where your projects will be hosted and set a password.

Once you've signed up, navigate to your Project Management dashboard and click New Project.

We will be creating endpoints for each of the 3 functions that we will be coding. An endpoint is a means for you and other external apps to communicate with your system to perform certain actions by making HTTP requests to the URL representing it.

You'll be brought into Autocode's IDE; this is where we will write the logic to solve 3 challenge problems.

From here, there are a few pieces to point out;

The Event selector is at the top. Here you can choose what type of event will execute the code in your endpoint. For this tutorial, we will use the default, which is a normal HTTP request.

When you press the green "Run" button, you will be prompted to name your project. Name it functions for the tutorial and hit Save new project.

You'll notice the endpoint URL show up at the bottom of the file. This is where your endpoints will live on the web.

The Endpoint viewer window shows up in the bottom right. This will show you the results of your endpoint execution. You can use it to view logs as well.
All Autocode endpoints are immediately available on the web once they're saved.

Great, now that you have set up your coding environment, we can begin with Challenge Problem #1!

Let's tackle it together! 🤜🏼🤛🏼

Challenge Problem #1: Greatest Common Factor:

Step 1: Carefully read the problem to understand it

Write a function that returns the greatest common factor between **num1** and **num2**. This means that the function should return the largest number that divides both **num1** and **num2**.

For example, if we pass in the number 6 and number 10 into our function, our function should return 2. Inputting 4 and 8 should return 4 etc...

(6, 10); // => 2
(4, 8); // => 4
(45, 30); // => 15

Let's prepare our coding environment. Head back to Autocode. Create a new endpoint by right-clicking the functions folder on the left of the browser and selecting New endpoint file.

Name your file functions/greatestCommonFactor.js as I have:

You will notice that your new file is pre-populated with a sample hello world function.

Let's take a moment to analyze and understand how this function is created.

The comment in line 1--6 defines the parametertypes that the function takes and the return type. In this sample, the function is expecting a nameparameter of type string and it will return a body of type object.

line 7 is exporting our function with amodule.exports method. Let's check it out. Change the name in line 7 to your name as I have in the screenshot.

Press the green run button to test out this sample function. You will see your code executed in the Endpoint viewer window with "Hello <yourName>, welcome to Autocode!" message.

You can also click the autogenerated endpoint URL on the bottom left, and a new window will open in the browser to display the message:

You can test passing a name parameter into your function via the URL and press enter to reload the page as I have: ?name=Student

It's that simple to deploy reusable functions through Autocode! If you would like to dive deeper into Autocode's framework, check out FunctionScript on Github!

Now that we understand how to set up functions on Autocode let's begin solving our first challenge problem!

Step 2: Use pseudocode to craft a plan for solving the problem

First, let's begin planning our execution with pseudocode. Pseudocode is a technique that helps programmers plan out an algorithm in a manner that is easy to understand. Pseudocode does not use any coding syntax, but it fully describes the necessary logic to build our functions. This facilitates implementation because we'll translate each line into code using the JavaScript Syntax...easy, right?

Let's try it!

Reread the problem as many times as needed and begin pseudocoding when ready:

Write a function that returns the greatest common factor between **num1** and **num2**.This means that the function should return the largest number that divides both **num1** and **num2**.

For example, if we pass in the number 6 and number 10 into our function, our function should return 2. Inputting 4 and 8 should return 4 etc...

(6, 10); // => 2
(4, 8); // => 4
(45, 30); // => 15

Pseudocode:

//First we need to define the functions expected parameters and return types in a comment

//Then we use module.exports to export our function and pass in two numbers (num1, num2) as parameters

//We will set a for loop with the iterator (i) set to num1

//As long as i is greater or equal to 1 continue the for loop

//Everytime the for loop continues decrement i by 1

//As we decrement we check to see if num1 modulo i is equal to zero and if num2 modulo i is equal to zero

//If both conditions are met then we will return i

//If the conditions aren't met then we have our for loop continue decrementing until both are both are met

Step 3: Code it out on Autocode!

Now that we've planned out how to solve our challenge problem, we're ready to code it out.

Delete the sample hello world function inside the IDE.

Translate your pseudocode approach to JavaScript syntax inside the IDE as I have:

/**
* My greatestCommonFactor function 
* @param {number} num1 First number
* @param {number} num2 Second number
* @returns {number} i
*/
module.exports = async(num1, num2) => {
  for (let i = num1; i >= 1; i--) {
    if (num1 % i === 0 && num2 % i === 0) {
      return i;
    }
  }
}

Step 3: Test and Deploy your solution on Autocode

Select the Payload button on the bottom right. Set test parameters by creating an object setting num1 and num2 as your keys and give them any two numbers you'd like. I've chosen 1550 and 1000.

Select the green Run button once you've set your test parameters. The greatest common factor of 1550 and 1000 is in fact 50! Great Job. ⭐️

You can see your function live by clicking the autogenerated URL on the bottom left via your functions docs. To view the docs, select Advanced Settings in the bottom left cornerand then Generated API Reference.

You can test passing in different numbers in the parameters sections and Run yourfunctionto check the greatest common factor as times as your heart desires.

Breakdown of our Solution to challenge problem #1:

Line 1--6: We set type number for num1 and num2 and a return type of number for i

Line 8: We export our async function with module.exports and pass in our two parameters (num1, num2).

Line 9: We use a for loop and declare num1 to be our iterator i, as long as i is greater or equal to 1 we run our for loop and decrement by 1.

Line 10: Our if statement checks to see if num1 modulo i is equal to zero, and if num2 modulo i equal to zero.

Line 11: If either conditionnum1 % i === 0 or num2 % i === 0 returns false our loop continues and the following return statement is ignored. When our if condition returns true,that means that both conditions are met, and then we return the iterator i. The iterator i is our greatest common factor between num1 and num2 .

We did it! 🙌 Congrats! We solved Problem #1. The rest should be a breeze now that you are familiar with Autocode.

Challenge Problem #2:

Step 1: Take your time reading the problem

Write a function that takes in a name as a string and returns a string representing their nickname. A nickname is the name up to the second vowel repeated twice. See the examples.

Examples:

(Jacob); // => 'JACO-JACO'

(pikachu); // => 'PIKA-PIKA'

(janeth); // => 'JANE-JANE'

Step 2: Begin strategizing with pseudocode!


//First define the functions expected parameter and return type in a comment above the function

//Use module.exports to export the function and pass in a a name as a string

//Create a variable that defines all vowels inside an array

//Create a variable to keep count of vowels and set it equal to 0

//Use for loop to count through every letter in the string (name)

//Create an intermediate variable to save every character in the string

//Inside the for loop condition use indexOf() method to check and count if character is in the index of vowels

//Use toUpperCase() method to convert string to uppercase

//return a string with characters from index 0 to i (including i)

Step 3: Code it out on Autocode!

Create a new endpoint by right-clicking the functions folder on the left of the browser and select New endpoint file.

Name your file functions/nickname.js and translate your pseudocode to JavaScript Syntax.

/**
* My nickname function 
* @param {string} name 
* @returns {string} str
*/
module.exports = async(name) => { 
  let vowels = 'AEIOUaeiou'.split(''); 
  let vowelCount = 0; 
  for (var i = 0; i < name.length; i += 1) { 
    let char = name[i]; 
    if (vowels.indexOf(char) > -1) { 
      vowelCount += 1; 
      if (vowelCount === 2) { 
        break;
      }
    }
  }
let str = name.slice(0, i + 1).toUpperCase(); 
  return str + '-' + str; 
}

Step 3: Test and Deploy your solution on Autocode

Pass in a test nameparameter and select the green Run button on Autocode to view the results on the console.

And sure enough, when testing different names result in nicknames! 😃

(Jacob); // => 'JACO-JACO'

(pikachu); // => 'PIKA-PIKA'

(janeth); // => 'JANE-JANE'

Breakdown of our Solution:

Line 1--5: We set a parameter type string for name and a return type of string

Line 7: Weexport our async function with module.exports and pass in our (name) parameter

Line 8: We define our vowels and use the split method to break our string of vowels into an array

vowels = [ 'A', 'E', 'I'...,'a', 'e', 'i'...]

Line 9: We set our count equal to zero

Line 10: We use a for loop to iterate through every character in name

Line 11: We set an intermediate variable to return every character in the string

Line 12: The if condition checks to see if a character is found in the index of vowels: vowels.indexOf(char) and returns the char location in the vowels array. If the char isn't in the index of vowels, then a -1 is returned, and the loop continues to the next character. If its location is greater than -1, then the logic continues.

Line 13: If the location is greater than -1 we increment our vowelCount by one.

Line 14: We check to see if the vowelCount is 2, if false is returned, we skip the if statement and move on to the next letter, if true is returned that means that we have now counted two vowels, and we break out of the for loop.

Line 20: We use the slice() method to grab the characters starting at index 0 and ending at i, we add 1 to i because the slice method doesn't include the end value. We also use toUpperCase() method to convert all the letters in our string to uppercase.

Line 21: We return the string plus a dash plus another string to have our result resemble the examples in the question

Challenge Problem #3: Odd Ones Out

Step 1: Read Carefully.

Write a function that takes in an array of strings and returns a new array containing only elements that appeared an even number of times in the input array.

Examples:

const arr1 = ['a', 'b', 'b', 'c', 'd', 'c', 'c', 'd']\
oddOnesOut(arr1); // => [ 'b', 'd' ]

const arr2 = ['fish', 'fish', 'dog', 'cat', 'dog', 'dog']\
oddOnesOut(arr2); // => [ 'fish' ]

Step 1: Pseudo Code

Let's strategize!


//Create a helper function to count our elements in an array

//The helper function has one parameter that takes in an array of strings

//Use a for loop in the helper function to count our elements in the array

//Create and export a second function with a for loop to count the even elements

//Push the even elements into a new array

//Return that new array

Step 2: Code it out on Autocode!

Create a new endpoint by right-clicking the functions folder on the left of the browser and select New endpoint file.

Name it functions/oddOnesOut.js. Delete the sample function and translate your pseudocode to JavaScript syntax as I have:

/**
* My oddOnesOut function 
* @param {array} array 
* @returns {array} str
*/
function elementCount(array) { 
  let countObj = {};
for (let i = 0; i < array.length; i += 1) { 
    let key = array[i];

    if (countObj[key] === undefined) { 
      countObj[key] = 1; 
    } else { 
      countObj[key] += 1; 
    }
  }
return countObj; 
}
module.exports = async(array) => { 
  let count = elementCount(array);
  const result = [];
for (let key in count) { 
      let value = count[key] 
    if (value % 2 === 0) {
      result.push(key); 
    }
  }
return result;
}

Step 3: Test and Deploy your solution on Autocode

Pass in a test array parameter inside the payload window:

{"array": ['fish', 'fish', 'dog', 'cat', 'dog', 'dog']}

Select the green Run button on Autocode to view the results on the console:

Your function will filter the odd elements out and return the following:

["fish"]

Great job!

Breakdown of Solution:

Line 1--5: We set a parameter type array for array and a return type of array for str

Line 7: We define a helper function elementCount that takes in an array of strings

Line 8: Wedeclare a countObj variable and initialize it to an empty object. This is where we store the different counts of elements in an array.

Line 10: We iterate through the array using a for loop. We declare 0 to be our iterator (i), as long as i is smaller than the length of our array, we run our for loop and increment by 1.

Line 11: We set key as an intermediate variable that will give access to the element as we go through the for loop.

Line 13: We add a condition that checks to see if our countObject at index key is undefined. This condition will return true if the countobject does not contain the Key (element) that we're passing in.

Line 14: Whenthe condition returns true we set countObj[Key] equal to 1 If the condition is false which means that our key is already in the object, then we ignore this statement and move on to the next.

Line 15- 16: If our key is already stored in the countObj then we increment our key count by 1.

Line 20: We return the coutObj

Line 23: We export our second function that takes in an array of elements we want to count

Line 24: We declare a variable count and set it to the object returned from the previous helper function elementCount(array)

Line 25: We define a variable result and initialize it to an empty array where we will be pushing the elements that show up an even number of times

Line 27: We use a for...in loop to iterate through the count object and check if the key has a value of modulo 0.

A **for...in* loop is good for looping through all the key-value pairs in an Object.

Line 28: We set a variable value to count[key]

Line 29: Check to see if the key has a value modulo 0

Line 30: If the condition is true, then we push that key to our result variable

Line 34: Return the result

Thank you for reading and following my Journey!

That's it for now and thank you for reading! I hope you found this tutorial helpful. I'd love to hear from you if you have any questions. Feel welcome to email me at ledezmajane@berkeley.edu. I'll be happy to help!

How to Build a Meetup Slack App with Standard Library and Node.js

Janeth Graziani — Tue, 29 Jan 2019 22:20:40 +0000

In this guide, you will learn how to set up a Slack application that will display information from Meetup’s API, which serves stored data from Meetup to other application software.

Meetup is a popular website where individuals with similar interests form groups to organize events in their local cities. Once we’ve successfully made a request to Meetup’s API, we will receive a response from Meetup, we’ll pull specific data from the JSON payload, and display that data in Slack. We will design our Slack application’s attachment so that it displays the event’s name, description, date and time, location, and more!

How it Works:

When you submit /nextmeetup 94709&javascript (or any zip code and a topic of interest) in Slack’s message box; a webhook will be triggered. The webhook, built and hosted on Standard Library, will first make a request to Meetup’s API, which will return a JSON payload with results from the query.

The webhook will then create Slack messages for each event, and post those to a specified channel.

No need to get overwhelmed! Let’s take it a step at a time!

What You’ll Need:

1x Slack Account

1x Meetup Account

1x Standard Library Account

#Step 1: Set up your Slack Application

Make sure you’re signed in to Slack and visit your Slack Apps Dashboard at https://api.slack.com/apps. You’ll see a screen that looks like the following.

Click Create New App. You’ll be presented with a modal to enter your App Name and the Development Slack Workspace you’d like to add it to.

From here, click Create App, you’ll find yourself on a Basic Information page.

Scroll down to Display Information. This is where you can give your Slack app a name, description, and an image if you’d like.

Keep the Basic Information page open in your browser; we’ll be using it in a second to retrieve your Slack app’s credentials to connect this application to the backend logic hosted on Standard Library — the code running your application.

#Step 2: Create a Free Standard Library Account
We’ll be hosting our Slack application’s code on Standard Library— the code that will be requesting and receiving specific information from Meetups API. So head on over to Code on Standard Library and claim your free account.

#Step 3: Copy and Modify the Slack App Code Template on Standard Library

Once you’ve logged in or signed up, you will land on “Featured API Source.” These are application code templates available on Standard Library for anyone to easily copy and modify apps. You’re going to select the Slack application code template and modify it to create your API that will power your Slack app.

Enter a unique name for your API project and hit Okay.

A Brief Explanation of the Slack App Sourcecode Template:
Ok great! Let’s pause for a moment to understand what we are looking at. The left sidebar is an API project scaffold that Standard Library has set up for you to build Slack apps.

The code template for Slack Apps has four directories. For this tutorial, we will only work within the functions directory which comes equipped with three more folders actions/, commands/, and events/, as well as a single file __main__.js. The instructions for Slack actions, slash commands, and events for your app live inside those folders.

When you deploy your API, Standard Library will automatically generate HTTPS endpoints (URLs) for each directory. The resulting URLs will allow us to configure webhooks that listen and respond to Slack’s actions, slash commands, and events.

All five folders (including the functions folder are set up with a __main__.js file (the directory’s main endpoint). These endpoints __main__.js dispatch the appropriate functions when they receive a message from Slack. For this tutorial, the file __main__.js will be dispatching the commands endpoint when we call our API via our Slack Bot. Now, let’s return to our bot setup!

#Step 4: Add a Command to your Standard Library API

commands: The commands directory is the endpoint for all Slack slash commands. Create an additional command by placing your cursor over the commands directory and right-clicking. Select New File and name your slash command file nextmeetup.js and click Okay.

At this point, you will notice a “hello world” JavaScript function inside (__main__.js), which is automatically generated.

Replace the contents of nextmeetup.js with the following:

A Brief Explanation of the Code:

When you submit /nextmeetup via your Slack app, a GET request is made to Meetup’s API :

Every request to Meetups API has to be authenticated with an API key, so we pass our Meetup key from our env.json file into our request. We also send our GET request with the two parameters, zip and topic.

The Meetup API returns an array of meetup event objects, which we can view from Code on Standard Library logs by logging our response: console.log(response.data). Your logs tab is located underneath the debug section.

The response.data is an array of events that match your query, and we want to create two attachments for each event (one for location and one for details). We have a function called formatAttachement that we can call on each of the events. The results get put in an array called attachments that gets sent to Slack.

Once you’ve copied and pasted the code into your file nextmeetup.js, save the changes and navigate to the env.json file on the left bar menu.

#Step 5: Fill your env.json File with App Credentials and Keys

Inside the env.json you will notice environment variables for your API. You can set different values for local, dev, and release (production) environments. This file will hold all of your unique access keys to your Standard Library account, Meetup account and Slack app credentials.

We’ll only be making modifications to the "dev" environment variables — make sure you’re modifying the right set! Note that "dev” values are for your development environment and "release" values should only be populated when you’re ready to release your app. “local” variables can be left blank when deploying from Code on Standard Library, but they should be filled out when working with the command line tools.

Let’s start off by filling in the “STDLIB_TOKEN” variable. Place your cursor in between the quotation marks (see screen) and either right-click and select Insert Library Token… or use the shortcut ⌘ + K.

Select Library Token to fill in "dev" environment.

Now go back to the Basic Information page of your Slack App and scroll down to App Credentials:

Copy your Client ID, Client Secret, and Verification Token. Paste them into their respective fields in “dev” section of the env.json file.

Add the name you gave your Slack app for the SLACK_APP_NAME.

Ex: SLACK_APP_NAME:Meetup-bot

The “SLACK_REDIRECT” value will be an https endpoint generated by Standard Library once you deploy your API. Even though we haven’t yet deployed, go ahead an fill it in now using this structure:

https://<username>.lib.id/<apiname>@dev/auth/ — with your standard library username and your API name. Once we deploy the code you can return to confirm that you filled this value properly.

My SLACK_REDIRECT looks like this: https://Janethl.lib.id/slack-meetup-bot@dev/auth/ — make sure you add authentication path with a slash at the end.

Your Slack app’s capabilities and permissions will already be set up with the following scopes:

“SLACK_OAUTH_SCOPE”:bot,commands,chat:write:bot,chat:write:user,files:write:user,channels:history

The last variable that you will need to add is your Meetup API key. Meetup requires that every request is authenticated with an API key.

#Step 6: Retrieve your Meetup API Key

Login or create an account at Meetup.com. Head on over to https://secure.meetup.com/meetup_api/key/ to retrieve your unique API key. Click the lock to reveal your API key and copy it.

Return to your env.json file on Code on Standard Library. Add your Meetup key as a "key" value, exactly as I have done in the image:

Make sure to save the changes with ‘⌘ + s’ (or hit Save in the bottom right).

On the sidebar menu pen the __main__.js file located below the events directory. Deploy the code of your Slack app to Standard Library by clicking “Run”.

Shortly after deploying your code, Standard Library generates an HTTPS API endpoint URL where your code lives. This address consists of your and the name you gave your API followed by @ and the name of the environment: https://janethl.lib.id/slack-meetup-bot@dev/

We now have the URL that will allow us to send and receive messages from our Slack app to Meetup’s API. Now we need to set our URL as webhook in Slack, so let’s head back to the Slack app dashboard

#Step 7: Create a New Slash Command and Set a Webhook
We now need to set our Slack app to respond to a slash command (/). For this, we need to set up a webhook on Slacks API page.

What is a Webhook?

Perhaps we can understand what a webhook is by comparing it to an API. APIs are request based — meaning that they operate when a request is made from a third party application. A webhook is event-based — the code will run when a specific event triggers it.

To set a webhook, a service provider must allow it’s consumers to register a URL where the provider can send information when an event happens. In this example, Slack enables us to register our URL address, and once registered a slash command can trigger our webhook, which will execute the code in our URL.

Now that we understand this, let’s head on over to Slack’s API page to set our webhook. Find and select Slash Commands on the sidebar menu.

After clicking Create New Command, you’ll be asked to enter your command details, for this example use:

Command:/nextmeetup

RequestURL:https://<username>.lib.id/ <apiname>@dev/commands/:bg

Short Description: retrieves Meetup events

Usage Hint:[<zip>&<topic>]

Hit “Save” once complete

#Step 8: Enable OAuth & Permissions

Return to your Slack App, On the sidebar menu, click OAuth & Permissions.

Once there, you’ll want to enter in a Redirect URL as follows: https://<username>.lib.id/ <apiname>@dev/auth/

click “Add” and “Save URLS.”

This Redirect URL should match the URL that we set on the env.json file on Code on Standard Library.

#Step 9: Add a Bot to Your Slack App
Return to your Slack App page, and click Bot Users on the left sidebar. Click Add Bot User. Keep the default settings.

The final step is to authorize the app. In your browser, type: https://<username>.lib.id/<apiname>@dev/

Click the Add to Slack button. You will be taken to another authorization screen.

Click Authorize. You should see a success message!

#Step 10: Test Your Slack Meetup Application

You’re all done. Try it out! Your Slack App is now available for use in the Slack workspace you authorized it for. Your Slack app should respond to a /nextmeetup<94709>& as I show in the screenshot above.

That is it & Thank You!

I hope you found this tutorial helpful. I would love for you to comment here, e-mail me at Janeth [at] stdlib [dot] com, or follow Standard Library on Twitter, @stdlibhq .

Janeth Ledezma is a Developer Advocate for Standard Library and Cal grad — go bears! When she isn’t learning the Arabic language, or working out, you can find her exploring NorCal on her CBR500R. 🏍💨🤗 Follow her journey with Standard Library through Twitter @mss_ledezma.

Build a Slack Bot in 5 Minutes to Qualify Leads with Standard Library and Node.js

Janeth Graziani — Fri, 07 Dec 2018 00:56:45 +0000

Are you overwhelmed by hundreds of users signing up daily to use your online services? Do you need a better way to track and qualify leads? If so, look no further! Here are all the tools you'll need to help you and your team 😉.

What We'll Build: We'll create a Slack bot that alerts your channel when a visitor enters data into a Typeform embedded on your site. Our Slack bot will flag individuals as "High priority!" if they belong to a company with over 50 employees. Our bot will also display individuals' full name, email, title, location, Linkedin, company name, number of employees in company x, the amount raised, estimated annual revenue, and company domain as seen in the example below 🤓.

So… Let's get started!

What You'll Need Beforehand

1x Slack free account
1x Typeform free account
1x Clearbit free account
1x Standard Library free account
5x minutes (300x seconds)

If you're not familiar with Standard Library, you're in for a treat! Standard Library is turning everyone in your organization into a developer with Code on Standard Library - an embeddable development environment for easily building APIs, webhooks, and workflow automation tasks.

Minute 1: Prepare Your Slack App on Slack's API Page

Sign in to your Slack account and visit your Slack Apps page at https://api.slack.com/apps. Click on Create New App. You'll be presented with a modal to enter your App Name and the Development Slack Workspace you'd like to add it to. From here, click on Create App, and you'll find yourself on a Basic Information page.

Find "Incoming Webhooks" under the "Features" category on the left side menu bar, and toggle the button on to activate Incoming Webhooks.

Toggle the Button On

Select Add New Webhook to Workspace.

Next, select "Add New Webhook to Workspace" and authorize your Slack App to post on a channel.

Once authorized, Slack automatically generates a unique URL that you will use to send messages into Slack via HTTP request with a JSON payload from Clearbit. Copy and Save this URL; we will need it shortly.

Check to make sure that you've set up your Slack app properly. If you have, you should see a message like the one below on your Slack channel. If not, repeat this step 😉.

Minute 2: Set Up and Deploy the Signupalertsbot API using Code on Standard Library

Now that you've set up your Slack app and activated incoming webhooks, you need to deploy the code that will connect Typeform, Clearbit, and Slack via webhooks. To do this, we'll be using Standard Library's API platform and the online editor for APIs - if you're not a programmer don't worry! You won't need to write any of the code. We've provided the code for you, and it automatically handles high priority sign ups and cases where Clearbit does not have information on an email!

Head on over to Code on Standard Library. If you click that link, a template for the Signupalertsbot API will automatically open. If not, navigate to the "Community API Sources" tab and search for "janethl/signupalertsbot". Open to the env.json file on the left sidebar menu, and you'll find three environment variables that you'll need to fill in.

Enter the Slack webhook URL from Part 1 into SLACK_WEBHOOK_URL under the dev section.

Minute 3: Copy and Paste Your Clearbit API Key

Next, you'll want to log in, or sign up for a free Clearbit account at https://clearbit.com/.

Once signed into your Clearbit's dashboard, navigate to the API Key tab and copy the first key - the secret API key.

Note that below your keys, Clearbit has suppression settings to exclude certain contacts from your enrichment project to satisfy GDPR.

Now return to Code on Standard Library and populate the "CLEARBIT_API_KEY"variable inside env.json.

Finally, populate the "STDLIB_LIBRARY_TOKEN" variable by right-clicking between the two quotes and select Insert Library Token from the drop-down menu.

Now that your three environment variables are filled in, save these changes by clicking the orange "Save" button on the bottom right.

You are now ready to deploy your API. Return to the main.js file and click the green "Run" button on the bottom right.

Once you've deployed your API onto Standard Library, you'll notice a "Parameter Error" because your functions/main.js endpoint requires two parameters. The two parameters; event_type, form_response, will be provided by Typeform. The final step is to take the "API Endpoint URL" for your API and set it as a webhook on Typeform.

Minute 4: Set a Webhook on Typeform

Once you've logged in to Typeform, select "New typeform" from the dashboard. Find and select the "Contact Form" template.

For now, let's use this template as is; you can return at any time to modify the style and questions to your liking. Select "Integrate" on the top menu.

Navigate to the upper middle tab and select "Integrate" and then "WEBHOOKS."

Input your Standard Library API's endpoint url onto the Destination URL and toggle the "Webhooks" button on.

Minute 5: Test Your Slack Bot

Your Slack Bot is ready to test! Select the "View" button on the upper right corner of your Typeform.

Input a valid e-mail to test it out and answer the sample questions. Once submitted you should get notified by your Slack bot. 🙌

That’s it! 🤗

Thank you for taking the time to read and test this out! If you found this tutorial helpful please let me know!

Build a Lead Generator in 5 Minutes with Typeform, Clearbit, Airtable and Standard Library

Janeth Graziani — Thu, 27 Sep 2018 07:55:49 +0000

Looking to generate leads for your business, or qualify them after you've received some information from a service like Typeform? This tutorial is for you! We're going to be using Typeform as a lead intake form, and then use Standard Library to both connect to the Clearbit API to qualify those leads and store the updated lead information in AirTable.

When a lead submits a Typeform your Airtable Base is instantly populated with lead's data gathered by Clearbit.

To do this, we'll be using Standard Library's simple API-centric cloud platform and the online editor for APIs, Code.xyz - if you're not familiar with APIs yet, don't fret! All we mean is you'll be writing a little bit of your own custom business logic.

Marketers, CSMs, Sales Executives, this one's for you! 😉

What You'll Need Beforehand

1x Typeform free account - A platform for building dynamic online forms including landing pages, polls, quizzes and more.
1x Clearbitfree account - Clearbit's Enrichment API takes an e-mail and returns a person's employment, title, website, Linkedin and more.
1x Airtable free account - AirTable is a combination of a spreadsheet & database.
1x Standard Library free account - A Platform for building and deploying APIs, linking software tools, powering Slack apps, automating tasks, and more.
5x minutes (300x seconds) of your time - These tools, used together, will save you hours of work!

How it Works🤓

When a lead submits his/her e-mail via your embedded Typeform, a webook will trigger an API you've built on Standard Library that sends a notification via HTTP POST request. The request body (containing the response data from Clearbit's Enrichment API) will be sent in JSON format to populate your Airtable base.

So let's get to it!

Minute 1: Fire Up Code.xyz From your Browser

We will link Typeform, Clearbit, and Airtable via Code.xyz - the online API editor built by the team at Standard Library. You'll be deploying your function to Standard Library with zero setup or installations on your local machine.

Once you've logged in to Code.xyz, click on the "Community API Sources."

Find and select "typeform-clearbit-airtable by @JanethL."

Make sure to give your API a unique name, for example:

Once loaded, you will be taken to the __main__.js located under the functions directory (folder). This is the code that will connect your Typeform to Clearbit's Enrichment API and to Airtable. Once it is deployed live onto Standard Library, an https url endpoint is generated. You'll need the endpoint to set your webhook on Typeform. But let's not get too far ahead - first, we need to finish setting up your Standard Library API with your unique Clearbit and Airtable keys.

Open up the env.json file. You'll see three different variables:

Let's start by finding your Clearbit API key.

Minute 2: Copy and Paste Your Clearbit API Key

First you'll want to log in, or sign up for a free Clearbit account at https://clearbit.com/.

Note that below your keys, Clearbit has suppression settings to exclude certain contacts from your enrichment project to satisfy *(GDPR)*.

Now return to Code.xyz and populate the "CLEARBIT_API_KEY": variables inside env.json. We now have two remaining variables to populate.

Minute 3: Find Your API Keys on Airtable

Once you've logged in or signed up for Airtable, select the account icon on the top right corner to see your account information. Click generate API key and copy and paste that key into "AIRTABLE_API_KEY": "" inside your env.json file.

Now, for the last variable, click the link below and once routed to my Airtable Base sample, select Copy base on the upper right corner. It's your base now!

https://airtable.com/invite/l?inviteId=invcdodb7YgOFx7uS&inviteToken=540e9ae9d02ff30b0c089aab4efa8db6d426cdcd42c61f67b25a820fa98ca3ce

Once you've added a copy of my base onto your workspace, enter your "LeadGenerator" base. On the upper right corner click Help and then select API documentation.

Find and select your Airtable base key as I have done in the screenshot:

After you've copied and pasted your Base's key into your env.json, your env.json file should look like this:

You are finally ready to deploy your API to Standard Library. Return to the __main__.js file and hit the green "Run" button on the bottom right corner.

We see a Parameter Error. Don't worry - this is normal. This notification means that we expect this API / webhook response to accept parameters we haven't provided in this test run (event_type and form_response). They'll be provided by the Typeform Webhook automatically.

Notice that Standard Library has automatically generated an API endpoint url underneath the RESULTS area.

Copy that https endpoint, we will need it to set a web-hook on Typeform.

Minute 4: Set a Webhook on Typeform

Head over to Typeform to bring your lead generator to Life.

Once you've logged in or signed up, select ** "New typeform" ** from the dashboard. Find and select the "Contact Form" template.

For now, let's use this template as is; you can return at anytime to modify the style and questions to your liking. Select "Integrate" on the top menu.

Navigate to the upper middle tab and select "Integrate" and then ** "WEBHOOKS".**

Input your API's endpoint url onto the Destination URL and toggle the "Webhooks" button on.

Minute 5: Test Your Lead Generator

Your Lead Generator is ready to test! Select the "View" button on the upper right corner of your Typeform.

Input a valid e-mail to test it out and answer the sample questions. If you've linked up Typeform, Clearbit, and Airtable properly your Airtable Base should automatically populate:

*That's it! * 🤗
Thank you for taking the time to read and try this out! If you found this tutorial helpful please let me know! If you'd like to connect Clearbit, Typeform, and Airtable to any other tools or software, please reach out- I'd love to help. Just drop your name, e-mail, and request in the Typeform below and I'll get back to you as soon as possible!

Click here to be routed to my Typeform

Janeth is the Community Manager for Standard Library and UC Berkeley grad- go bears! 🐻 She speaks Spanish, English, Arabic and a little JavaScript 😉