Title: Building a Slack Chat Bot
Description: Learn to build Slack bots for task automation and team collaboration. Integrate your bot with a Notion database, add info with the Slack Block Kit UI Framework, add API security, and deploy your bot!
Link: https://frontendmasters.com/courses/chat-apis/
Time: 2 hours, 10 minutes
Lessons: 17 / 17
Tags: #course #frontendmasters #720p
Description: Learn to build Slack bots for task automation and team collaboration. Integrate your bot with a Notion database, add info with the Slack Block Kit UI Framework, add API security, and deploy your bot!
Link: https://frontendmasters.com/courses/chat-apis/
Time: 2 hours, 10 minutes
Lessons: 17 / 17
Tags: #course #frontendmasters #720p
Frontendmasters
Slack Bot Development: Automate Tasks and Team Workflows | Integrate Bots with APIs like Notion
Learn to build Slack bots for task automation and team collaboration. Integrate your bot with a Notion database, add info with the Slack Block Kit UI Framework, add API security, and deploy your bot!
Media is too big
VIEW IN TELEGRAM
1. Introduction
Jason Lengstorf introduces the course and makes the case for using chatops to improve communication processes and reduce administrative tasks.
- https://github.com/learnwithjason/chatops-frontend-masters
#lesson
Jason Lengstorf introduces the course and makes the case for using chatops to improve communication processes and reduce administrative tasks.
- https://github.com/learnwithjason/chatops-frontend-masters
#lesson
Media is too big
VIEW IN TELEGRAM
2. Project Overview
Jason walks through the accounts and tooling required for the course. GitHub, Slack, Notion, and Netlify accounts will be required to complete the course, along with Node version 16 and the Netlify CLI. The free tier of each platform is all that is required.
#lesson
Jason walks through the accounts and tooling required for the course. GitHub, Slack, Notion, and Netlify accounts will be required to complete the course, along with Node version 16 and the Netlify CLI. The free tier of each platform is all that is required.
#lesson
Media is too big
VIEW IN TELEGRAM
3. Creating a Netlify Tunnel
Jason sets up the live tunnel using the Netlify CLI. The live tunnel makes the local development environment publicly available through a URL generated by Netlify.
#lesson
Jason sets up the live tunnel using the Netlify CLI. The live tunnel makes the local development environment publicly available through a URL generated by Netlify.
#lesson
Media is too big
VIEW IN TELEGRAM
4. Slack App Setup
Jason creates the Slack application and adds it to the test workspace. Scope permissions are assigned, and the slash command is configured.
#lesson
Jason creates the Slack application and adds it to the test workspace. Scope permissions are assigned, and the slash command is configured.
#lesson
Media is too big
VIEW IN TELEGRAM
5. API Credentials
Jason saves the API credentials in the project and uses them to permit the application to send messages back through the API to the user. A utility method is created to eliminate duplicate boilerplate code for fetch requests.
#lesson
Jason saves the API credentials in the project and uses them to permit the application to send messages back through the API to the user. A utility method is created to eliminate duplicate boilerplate code for fetch requests.
#lesson
Media is too big
VIEW IN TELEGRAM
6. Sending a Command
Jason creates a function for handling the slash command from Slack. When the command is sent to the API, the handler validates the input and returns a message to Slack. Before the slash command can be run, the application must be added to the channel.
#lesson
Jason creates a function for handling the slash command from Slack. When the command is sent to the API, the handler validates the input and returns a message to Slack. Before the slash command can be run, the application must be added to the channel.
#lesson
Media is too big
VIEW IN TELEGRAM
7. Securing the Application
Jason creates another utility method for ensuring requests to the Slack bot are API requests from Slack and not a malicious third party. The SLACK SIGNING SECRET environment variable is combined with a hashing algorithm to authenticate the request.
#lesson
Jason creates another utility method for ensuring requests to the Slack bot are API requests from Slack and not a malicious third party. The SLACK SIGNING SECRET environment variable is combined with a hashing algorithm to authenticate the request.
#lesson
Media is too big
VIEW IN TELEGRAM
8. Slack Block Kit
Jason introduces the Slack Block Kit UI framework. It allows developers to customize the order and appearance of information in the application. Users can be guided through the application's capabilities with composable, updating, and sequencing blocks.
#lesson
Jason introduces the Slack Block Kit UI framework. It allows developers to customize the order and appearance of information in the application. Users can be guided through the application's capabilities with composable, updating, and sequencing blocks.
#lesson
Media is too big
VIEW IN TELEGRAM
9. Generating a Modal
Jason uses a modal to display the blocks when the command is triggered. The handleSlashCommand method will send a modal when it receives the "/foodfight" slash command.
#lesson
Jason uses a modal to display the blocks when the command is triggered. The handleSlashCommand method will send a modal when it receives the "/foodfight" slash command.
#lesson
Media is too big
VIEW IN TELEGRAM
10. Handling User Input
Jason updates the application endpoint to handle the user input and return a message to Slack. The returned message displays in the same channel and includes a mention of the user along with their submitted message.
#lesson
Jason updates the application endpoint to handle the user input and return a message to Slack. The returned message displays in the same channel and includes a mention of the user along with their submitted message.
#lesson
Media is too big
VIEW IN TELEGRAM
11. Handling a Shortcut
Jason creates a shortcut in the Slack UI to ask a user to use the slash command. This is encourages team members to adhere to a process in a less intrusive way and reduces friction on the team.
#lesson
Jason creates a shortcut in the Slack UI to ask a user to use the slash command. This is encourages team members to adhere to a process in a less intrusive way and reduces friction on the team.
#lesson
Media is too big
VIEW IN TELEGRAM
12. Integration with Notion
Jason creates a Notion integration which will allow the Slack application to send data to a Notion database. An example database is provided and can be duplicated into individual Notion accounts. A notionAPI helper method is also created.
#lesson
Jason creates a Notion integration which will allow the Slack application to send data to a Notion database. An example database is provided and can be duplicated into individual Notion accounts. A notionAPI helper method is also created.
#lesson
Media is too big
VIEW IN TELEGRAM
13. Getting Items from Notion
Jason creates a helper method to retrieve a list of items from the Notion database. It filters based on the status of "new" so items already in progress or completed are not returned.
#lesson
Jason creates a helper method to retrieve a list of items from the Notion database. It filters based on the status of "new" so items already in progress or completed are not returned.
#lesson
Media is too big
VIEW IN TELEGRAM
14. Saving Items to Notion
Jason creates a helper method to save items to the Notion database. The saveItem method will get called any time a new food fight message is submitted from the modal in Slack.
#lesson
Jason creates a helper method to save items to the Notion database. The saveItem method will get called any time a new food fight message is submitted from the modal in Slack.
#lesson
Media is too big
VIEW IN TELEGRAM
15. Creating a Reminder
Jason creates a cron job to run at a set interval and posts a list of unaddressed items to the slack channel.
#lesson
Jason creates a cron job to run at a set interval and posts a list of unaddressed items to the slack channel.
#lesson
Media is too big
VIEW IN TELEGRAM
16. Deploying to Netlify
The application code and cron job are committed and pushed to the remote GitHub repo. Netlify is configured to deploy the application from a specific branch.
#lesson
The application code and cron job are committed and pushed to the remote GitHub repo. Netlify is configured to deploy the application from a specific branch.
#lesson
Media is too big
VIEW IN TELEGRAM
17. Wrapping Up
Jason wraps up the course by sharing some additional application ideas for ChatBot applications.
#lesson
Jason wraps up the course by sharing some additional application ideas for ChatBot applications.
#lesson
Title: Astro for Fast Website Development
Description: Use Astro, a modern web framework emphasizing minimal JavaScript, partial hydration, and UI-framework-agnostic development. Gain practical skills in state management, API usage, and server-side rendering while building a complete web application!
Link: https://frontendmasters.com/courses/astro/
Time: 3 hours, 37 minutes
Lessons: 21 / 21
Tags: #course #frontendmasters #720p
Description: Use Astro, a modern web framework emphasizing minimal JavaScript, partial hydration, and UI-framework-agnostic development. Gain practical skills in state management, API usage, and server-side rendering while building a complete web application!
Link: https://frontendmasters.com/courses/astro/
Time: 3 hours, 37 minutes
Lessons: 21 / 21
Tags: #course #frontendmasters #720p
Frontendmasters
Astro for Fast, Modern Web Development | Learn Zero-JavaScript, Partial Hydration, and UI Framework-Agnostic Dev
Use Astro, a modern web framework emphasizing minimal JavaScript, partial hydration, and UI-framework-agnostic development. Gain practical skills in state management, API usage, and server-side rendering while building a complete web application!
Media is too big
VIEW IN TELEGRAM
1. Introduction
Jason Lengstorf begins the course by introducing key aspects of Astro, a web framework that features zero JavaScript by default, incorporates partial hydration, and maintains a UI-agnostic approach. This course is compatible with Astro versions 2.x and 3.x.
- https://github.com/learnwithjason/astro-frontend-masters
#lesson
Jason Lengstorf begins the course by introducing key aspects of Astro, a web framework that features zero JavaScript by default, incorporates partial hydration, and maintains a UI-agnostic approach. This course is compatible with Astro versions 2.x and 3.x.
- https://github.com/learnwithjason/astro-frontend-masters
#lesson
Media is too big
VIEW IN TELEGRAM
2. Astro Adoption
Jason highlights the advantages of adopting Astro, which encompass a content-focused approach, streamlined maintenance, and decreased bundle sizes. This section also includes instances of websites that have utilized the Astro framework.
#lesson
Jason highlights the advantages of adopting Astro, which encompass a content-focused approach, streamlined maintenance, and decreased bundle sizes. This section also includes instances of websites that have utilized the Astro framework.
#lesson