Building a Daily Standup Application in 30 Minutes
Tags: opensource, javascript, firebase, lowcode
Published: 2021-04-20 13:42:23

by **Kayode Alade**

The daily standup has become a norm in the schedule of most developers around the world. A [standup](https://www.atlassian.com/agile/scrum/standups) is a daily team meeting, at a specific time for a specific duration, that asks team members to answer three major questions:

1. What did I work on yesterday?
2. What am I working on today?
3. What issues are blocking me?

The daily standup answers these questions but does not resolve them. When put to good use, daily standups increase team productivity and also enhance cohesion between all the parties involved.

## Tutorial Overview with Appsmith

In this tutorial, you’ll learn how to build a daily standup application using [Appsmith](https://www.appsmith.com?utm_source=devto&utm_medium=blog&utm_content=standup_appsmith_tutorial&utm_campaign=weeklyblog&utm_term=standup_appsmith), an open-source framework for building internal tools, admin panels, dashboards, and workflows. You’ll be using Appsmith to forward a summary of daily standups to [Slack](https://slack.com/ ). Using a web framework like Appsmith is a much quicker way to add this feature to your workspace than building a completely new internal tool. 

![Screenshot of Stand up App](https://cdn.hashnode.com/res/hashnode/image/upload/v1618918604640/nQGlL3fPK.png)


Appsmith comes out-of-the-box with prebuilt widgets like forms, charts, and maps that you can easily configure to your team’s needs. It also supports APIs and different types of databases. For more details about its capability, visit their official [GitHub page](https://github.com/appsmithorg/appsmith?utm_source=devto&utm_medium=blog&utm_content=standup_appsmith_tutorial&utm_campaign=weeklyblog&utm_term=standup_appsmith).

## Setting Up the Application and Data Model

First things first: head over to [Appsmith](https://www.appsmith.com?utm_source=devto&utm_medium=blog&utm_content=standup_appsmith_tutorial&utm_campaign=weeklyblog&utm_term=standup_appsmith) to get a free account. After you sign up, it’s time to set up the user interface of your standup app. 

- Click **Create New** on the dashboard to create a new app. You will be taken to an empty canvas as shown below where you can start creating your app. The explorer sidebar on the left is used to add widgets, create pages, and connect to APIs and data sources such as [Firestore](https://firebase.google.com/docs/firestore). 

![An empty canvas in Appsmith](https://imgur.com/GVebMrR.png)

- To build all the features needed for this app, you’ll need to create two pages in Appsmith. Double-click **Page1** to rename it as _First Page_.
- On the Pages bar, click the **+** icon to add a page, then double-click to rename the new page as _Second Page_.

Now that you’ve created your two pages, it’s time to start adding widgets. Your app’s first page will contain:

*   A personalized welcome message
*   A paragraph showing yesterday's standup
*   A text area where the user can enter what was done the previous day
*   A text area to write out what they plan to do today
*   An option field to show their blockers
*   A table to show users who completed yesterday’s tasks
*   Submit and reset buttons

Let’s create the custom welcome message next:

- Navigate to the **First Page** and click the **+** icon beside **Widgets** to add a new widget.
- Drag the text widget and drop it on the canvas.
- Type in a custom welcome message as shown below.

![Custom welcome message](https://imgur.com/1vWtx55.png)

Next, let’s display yesterday’s standup to-do on top so that you can see at a glance what you planned to do yesterday and then make plans based on that for today.

1. Add two text widgets side by side on your canvas.
2. Label the first _Last Standup todo_. The second widget will hold the value, or what was on the last standup to-do list. This will eventually be drawn from the database, but for now, you can pre-populate it with filler text. 
3. Style the widget’s text as you prefer via the Settings gear at the top right of each widget.

![Setting up a widget for yesterday’s standup](https://imgur.com/RuCsIfN.png)

As mentioned earlier, the goal of a standup is to provide information about the previous day’s tasks, tasks that need to be done today, and anything standing in the way of accomplishing those tasks. Obviously, you’ll need a form to input all that information.

To create a form:
- Drag the form widget from the sidebar onto the canvas.
- Label the inputs or dropdowns appropriately (eg, _User_, _Yesterday’s todos_, _Yesterday completed_, and so on). Note that the form widget comes out-of-the-box with **Reset** and **Submit** buttons.

![Creating a form widget](https://imgur.com/BZmtLg4.png)

- Rename the form by double-clicking on the default name and editing it. Naming this particular form seemed unnecessary, so that the title widget in the form was deleted.
- To delete a widget, hover over it, then right-click the widget name at the top right corner. In the dropdown menu, you’ll see a Delete option. Click to delete the widget.  

To finalize your first page’s UI, let’s add a table to display the users who’ve submitted their standup for the day:

- Drag the table widget onto the canvas. Note that the Table Data option in this widget already contains an array of objects. Later, you’ll change this to a query response from your database. 

![Table showing users who have submitted their standup report](https://imgur.com/Yvvh7cf.png)

- Navigate to your **Second Page**, where you’ll add your table.
- Drag the table widget onto the canvas.
- Open the table options and add a new column called _Actions_.
- Click the Settings gear above the **Actions** column and set the following properties: 
    - Column Type: Button
    - Label: Edit
    - onClick: OpenModal
    - Modal Name: New Modal 

![Configuring the Edit button](https://imgur.com/sW6K1sv.png)

- In the **Actions** column you just created, click the button that now reads **Edit**. A new modal will popup, which you’ll use to edit the table’s data.
- Change the title text widget to _Edit Table_.
- Drag a text widget into the modal and set the following properties:
    - Text value: Username
    - Text align: Left
    - Text style: Label
- Add a dropdown widget beside the label you just created. In the Settings for that widget, set **Selection type** to _Single Select_. This dropdown, which ought to display all users of your app, will read data from your database after connecting the database to Appsmith later in this tutorial.
- To add a field for blockers, drop in a text widget, name it _Blocker_, and add a dropdown widget as you’ve done previously.
- Add one field each for today’s to-do and yesterday’s to-do. These will take a text widget and an input widget each.
- Finally, add a field to confirm if yesterday’s to-do is complete. Drag over a text widget and a dropdown widget with the values _Yes_ or _No_.

![Configuring the EditModal](https://imgur.com/83PV3Xj.png)

## Connecting Your Database

Appsmith allows you to link data from several databases. For this tutorial, you’ll make use of [Firestore](https://firebase.google.com/products/firestore).

- In Appsmith, click **Second Page** on the sidebar, then click the **+** icon beside **DB Queries**. 
- Select **Add a new data source**.
- Select **Firestore**.

![Selecting your datasource](https://imgur.com/3pXdCqf.png)

- [Create a Firestore database](https://firebase.google.com/docs/firestore/quickstart) to get the project ID.
- From your Firebase console, click the Settings gear on the sidebar.
- Copy your project ID and paste it into Appsmith. Your database URL is `https://_your-project-id_.firebaseio.com`.

![Connecting Firestore](https://imgur.com/MEfHiRG.png)

- Back in your Firebase console, click the **Service accounts** tab.
- Click **Create service account**. The JSON file containing your service account's credentials will download.
- Copy the contents of the file and paste it into the **Service Account Credentials** field.
- Click **Test** so that Appsmith can verify everything is correct, then click **Save**.
- Back in Firestore, click **Start Collection** to create a collection, or database table. Set the Collection ID to **User** and add fields for **name** and **email**, both as string type. Sample user values will work for each, eg _Chris_ for the name value and _chris@email.com_ for the email.

![Adding collections and values to your Firestore](https://imgur.com/eg2q0eF.png)

- To add a collection named _StandUps_, add fields for date ([in seconds](https://stackoverflow.com/questions/3830244/get-current-date-time-in-seconds)), today's to-dos, yesterday's to-dos, completed, and blocker in Firestore.

Note that since you’re building an internal app, you can create more users and standups in their respective collections.

## Creating Standup Queries

Mustache syntax (`{{...}}`) allows you to write JavaScript in Appsmith to read data from elements defined on a particular page. Let’s take advantage of this to pull information from queries or other widgets. First, let’s create the queries:

1. Click the **+** icon on the **DB Queries** menu. You should see your database as an option.
2. Click **New query** on the top right corner of your database option. 
3. Rename it to _createStandUp_. 
4. In the **Method** dropdown of the **createStandUp** window, select **Add Document to Collection**.
5. Set the database to the name of your database in Firestore. Fill in the body with the following code:

```
{
	"yesterday": "{{Input3.value}}",
	"user": "{{Input2.value}}",
	"blocker": "{{Input5.value}}",
	"todos": "{{Input4.value}}",
	"prev_completed": "{{Dropdown2.value}}"
	"date": {{Date.now()}}
}

```

Note that widgets in Appsmith are global objects, so you can access their values simply by calling `widget_name.value`.

![createStandUp](https://imgur.com/zXEBb4e.png)

Continue to round out your app’s queries:

- For **fetchUsers,** set the following properties:
    - Method: Get Documents in Collection
    - Document/Collection Path: users

![fetchUsers](https://imgur.com/fgVYFeV.png)

- For **fetchStandUps**, set the following properties:
    - Method: Get Documents in Collection
    - Document/Collection Path: standUps
    - Order By: `["date"]`

![fetchStandUps](https://imgur.com/kxfCjwD.png)

- For **updateStandUps**, set the following properties:
    - Method: Update Document
    - Document/Collection Path: `standUps/{{Table1.selectedRow._ref.id}}`
    - Body: _paste in the following JSON_

```
{
	"yesterday": "{{Input3.value}}",
	"user": "{{Dropdown3.value}}",
	"blocker": "{{Dropdown4.value}}",
	"todos": "{{Input4.value}}",
	"prev_completed": "{{Dropdown2.value}}"
}

```

![updateStandUps](https://imgur.com/0aagauF.png)

Note that queries can only be referenced on the page where they’re defined. If you need the same query on another page, you need to copy and rename it on the other page.

## Connecting Widgets to Queries 

Now let’s connect these queries to the widgets in your Appsmith app.

- On the **First Page** of your Appsmith app, replace the text in the widget next to **Last Standup todo** with:

```Javascript
{{fetchUserStandUps.data[0].todos}}
```

- For the **User** and **Blockers** dropdowns, replace the options with this:

```Javascript
{{fetchUsers.data.map((e,i) => {return {label: e.name, value: e.name}}) }}
```

- Fo the **Yesterday completed** dropdown, replace its options with this:

```JSON
[{"label": "Yes", "value": "true" }, { "label": "No", "value": "false" }]
```

- To configure the First Page’s Submit button, select **Execute DB query** under **onClick**, then select the **createStandUp** query.

![First Page’s Submit button](https://imgur.com/QmQmrGs.png)

- To configure the Second Page’s Refresh button, select **Execute DB query** under **onClick**, then select the **fetchStandUps** query. 

![Second Page’s Refresh button](https://imgur.com/tzz3anQ.png)

- To configure the Second Page’s Search button, select **Execute DB query** under **onClick**, then select the **StandUpsByName** query. Set **onSucess** to store value, key to data, then set value to `{{StandUpsByName.data}}`.

![Second Page’s Search button](https://imgur.com/zFVDISo.png)

## Integrating with Slack

To send the summary of your standup to Slack, integrate your Appsmith app with Slack using incoming webhooks. 

> “Incoming Webhooks are a simple way to post messages from apps into Slack. Creating an Incoming Webhook gives you a unique URL to which you send a JSON payload with the message text and some options. You can use all the usual formatting and layout blocks with Incoming Webhooks to make the messages stand out.” - [Slack](https://api.slack.com/messaging/webhooks)

Let’s dive in with the integration:

- Head to [Slack](https://slack.com/) to create an account if you don’t have one. 
- Open the [Create an App page](https://api.slack.com/apps?new_app=1). The **Create a Slack App** window appears automatically. If it doesn’t, click **Create New App*.
- Give your app a name and choose the Slack workspace you’re building it for. Click **Create App**. The **Building Apps for Slack** page opens.

![Creating a Slack app](https://imgur.com/nTNcCL4.png)

- Click **Incoming Webhooks** to open the feature, and toggle the switch to **On** to activate it. Scroll to the bottom of the page to copy the webhook URL.

![Activating incoming webhooks](https://imgur.com/zuMbnTV.png)

- Back in Appsmith, under **First Page**, click the **+** icon beside **APIs**, then select **Create new**.
- Paste the webhook in the first input field and change the request type to **POST**.
- Click the **Body** tab and fill in the message as a JSON object as shown:

```
{
	"text": "New Standup added by {{Dropdown1.value}}, Yesterdays todo: {{Input1.value}}, Completed: {{Dropdown3.value}}, Todays todo: {{Input2.value}}, Blockers: {{Dropdown2.value}}, link: https://app.appsmith.com/applications/6043f3a5faf5de39951a897e/pages/6043f3a5faf5de39951a8980  "
}

```

![Slack post request](https://imgur.com/HEFwDxG.png)

Let’s go back to your **First Page** in your app and configure the **Submit** button so that it sends a Slack message on submit.

Click the Settings gear for the **Submit** button. Below **onClick**, find the **onSuccess** field and from the **Call An API** option, select your Slack API.

![Submit button edit](https://imgur.com/nh3bNrE.png) 

## Viewing the Completed Daily Standup Application

At this point, your Appsmith app should look like this:

![Completed standup app in Appsmith](https://imgur.com/9elAsRJ.png)

And as a result, your Slack channel should look like this:

![Slack channel](https://imgur.com/TWTcCua.png)

You can check out [this tutorial’s completed app on Appsmith](https://app.appsmith.com/applications/6043f3a5faf5de39951a897e/pages/6043f3a5faf5de39951a8980?utm_source=devto&utm_medium=blog&utm_content=standup_appsmith_tutorial&utm_campaign=weeklyblog&utm_term=standup_appsmith).

## Summary

In this tutorial, you learned how to build a daily standup app using [Appsmith](https://www.appsmith.com?utm_source=devto&utm_medium=blog&utm_content=standup_appsmith_tutorial&utm_campaign=weeklyblog&utm_term=standup_appsmith), including widgets that enable users to detail their accomplished tasks, their daily to-do lists, and any blockers keeping them from their goals. You then integrated your app with Slack, so you can send summarized standup reports to a specific Slack channel via incoming webhooks.

Have an idea for another app you’d like to build without reinventing the wheel? Check out Appsmith’s Getting Started [documentation](http://docs.appsmith.com?utm_source=devto&utm_medium=blog&utm_content=standup_appsmith_tutorial&utm_campaign=weeklyblog&utm_term=standup_appsmith), or jump right in by [signing up for a free account](https://app.appsmith.com/user/signup?utm_source=devto&utm_medium=blog&utm_content=standup_appsmith_tutorial&utm_campaign=weeklyblog&utm_term=standup_appsmith).

----

Author Bio: Kayode is a tech enthusiast specializing in embedded systems and system design and modelling. His programming languages of choice include C, C++, JavaScript, and Python. In his free time, he loves adding value to people's lives with technology.