Bring the Say Hello App to Life

Learning Objectives

In this project, you’ll:

• Build meaningful messages with Block Kit.
  
• Add interactivity for a simple onboarding process.
  
• Deploy a meaningful onboarding app.
  

Before You Start

Before you complete any steps in this project, make sure you complete the hands-on challenges in Develop a Slack App with Bolt using the same Slack sandbox. You won’t be able to complete the hands-on challenges here if you don’t complete that badge first.

Use Block Kit for Meaningful Messages

In Develop a Slack App with Bolt, you built a basic Slack app for your company’s employee onboarding team. Now, the team wants to deliver meaningful interactions in the app that engage users and help them move through the onboarding process. This is where Block Kit comes in.

Block Kit is a UI framework that helps you create more interactive and captivating messages within Slack. It offers a balance of control and flexibility when building experiences in Slack. Customize the order and appearance of information and guide users by composing, updating, sequencing, and stacking blocks, which are reusable components that work almost everywhere in Slack.

And guess what—the app you built already has a block. Let’s take a look.

Review Your Small-but-Mighty Block

While we’re just reviewing your app at the moment, you can follow along. Let’s open up your project file.

1. Head to say-hello | app.js on your machine using your preferred text editor.
   

When you built your app to listen for when a user posts “hello” (1), you prompt the app to post a response. That response is made up of a block (2).

Explore Block Types

There are multiple block types. Yours is a section; it combines several elements like markdown text with a wave emoji and a button that says Click Me. As you and the team think up how to bring this app to life, you review the other types at your disposal.

Now that you’ve identified how to lay out a message with various block types, you can find ways to upgrade your app’s interactivity using block elements.

Add Block Elements for More Interactivity 

Block elements are visual components that exist within section, context, input, and actions layout blocks. They include components like buttons, date pickers, multiselect menus, overflow menus, plain-text input, radio buttons, checkboxes, select menus, and time pickers. They can collect information from a user, trigger a link, or even kick off a complex workflow.

After talking with the team, you agree that the app should be designed with the following principles.

• Keep it simple.
  
• Minimal clicks.
  
• Onboard in minutes.
  

With that in mind, it’s time to get to work.

Connect Your Slack Playground

First, let’s make sure your Slack playground is connected and you have the app you created in the Develop a Slack App with Bolt project.

1. Scroll to the Challenge section of this page, where it says Verify Step.
   
   • If your playground isn't connected, go ahead and follow the remaining steps.
     
   • If it’s still connected, launch your playground and click Verify step to earn 100 points.
     
2. From the dropdown, select the Trailhead email you used to connect to the Slack Developer Program in the project, Develop a Slack App with Bolt.
   
3. Click Connect Slack Playground.
   
4. Click Launch to open your playground in a new tab.
   

Keep your sandbox open. In the next step, you use block kit to add more meaningful interactions and test your messages.