Category: Projects

Getting Started with DatoCMS – Creating a simple blog
DatoCMS is a relative newcomer in the CMS industry. There are plenty of Content Management Systems (CMS). A CMS is a powerful piece of software that helps users to create, manage, and modify content on a website without requiring special technical expertise and without the need to code. WordPress is the most popular CMS with over 43% of the market share. Some other examples of CMS are Drupal, Joomla.

DatoCMS rolled out for public use in 2019, is a cloud-based headless CMS for mobile apps, static websites, and server-side applications. The concept of headless CMS is relatively newer. It was born out of the modern need to serve content across multiple channels, like web apps, mobile apps, IoT devices, and wearable software. A headless CMS attempts to reduce the modules attached to the software since there is no presentation layer attached; the developer has the flexibility of serving the content across a wide range of channels.

Why DatoCMS?

DatoCMS is API-first. Every software powered by DatoCMS makes use of two APIs to work with the content – Content Delivery API, and Content Management API. To perform operations on the content programmatically, we make use of the Content Management API. To retrieve the content for displaying purposes, we make use of the Content Delivery API.

DatoCMS generates a static website, that results in a faster and more secure website. It fits in very well with frameworks, technologies and generators like React, Next.js, Jekyll, Nuxt, Vue, PHP, Middleman, and Ruby on Rails. It is flexible, offers granular permissions, and comes with a GraphQL API.

DatoCMS does not build and deploy your website, but delegates it to an external CI/CD services. DatoCMS offers integration with the following services out of the box:
To read more about the general concepts of DatoCMS, please refer the official docs.

Creating a DatoCMS Account & Starting a New Project

Well, signing up for any service should be a piece of cake, really! Just head to https://dashboard.datocms.com/signup and you know the drill!

DatoCMS – Sign Up Page

Once you sign up, you will be guided to the dashboard. DatoCMS is free for upto 3 projects and that should suit our use-case. DatoCMS Dashboard is easy to navigate, considering that the target audience is non-technical clients. We will start by hitting the ‘New Project’ button.

DatoCMS Dashboard

Click on ‘Demo project’ and you will be lead to the page of starter projects. We will be using Next.js Blog starter project.

DatoCMS – Starter Projects

Now, click on ‘Start free project’. Name your project and choosing a hosting solution. We will use Vercel to host your app.

DatoCMS – Starting a Demo Project

Configuring Vercel for DatoCMS Blog

Clicking on ‘Click project’ should open a new tab for Vercel configuration. First, we need to create a GitHub repository to enable CI/CD. I will create a private repo but it is absolutely all right to keep your repo public.

Vercel – Repo Config

Now, we must integrate DatoCMS with the Vercel app (for obvious reasons).

Vercel – Add Integration

The next and the final step is to deploy our Git repo to Vercel. It should happen automatically and you should see a nice-looking message on your DatoCMS Dashboard.

DatoCMS – Success Message

Editing the DatoCMS Blog

We have successfully deployed our blog. Now, we will modify global settings like Blog Description, SEO, and Favicon from the Dato Editor. Just click on your project in the dashboard and hit ‘Enter Project’. Once you are inside the editor, you will see a lot of settings in the left sidebar. Those are all the customizable options and essentially the content we can edit without having to tweak the codebase. To modify the favicon and SEO settings, we will click on ‘Settings’ option.

DatoCMS – Global Settings

Now, let’s configure the homepage settings like Blog Title using the ‘Homepage’ option from the left sidebar.

Exploring DatoCMS Blog Models

DatoCMS handles editable data as a scheme called ‘Models’, which you can think of as Tables. Each model has some set of user-editable fields, like Post Title, Post Content, Featured Image. Models are modular and provide a user-friendly editing experience.

To see our models, we will click on ‘Settings’ in the top bar. Once we are there, we will click on ‘Models’ in the left sidebar. Our starter project has four pre-defined models – Author, Blog, Category, and Post. Each model can have a collection of records/instances, like we can have multiple posts on a single website.

DatoCMS – Models

Our Post model has a number of fields – it has a Title, Author (which is linked to another model ‘Author’), and a structured text field to store the post Content. Then, it has some fieldsets, which are models inside models (sort of). Those handle our previews and post metadata.

To know more about DatoCMS Models, you can check out DatoCMS’ documentation.

Adding Content

Now that we have an overview of what a model is, we will add a few posts. To add content (posts) to our blog, we will click on ‘Content’ in the top menu. Inside the left sidebar, we will have all our models. Before we do that, let’s add an author so that we can link it with our posts.

DatoCMS – Adding an Author

Let’s create a post. I will quickly copy my own post about how you can setup Grafana and Loki to monitor your server logs ?. DatoCMS Editor supports rich-text, and we can add things like lists, images, headings, and quotes by pressing the '/' key (just like WordPress). We will add stuff like quotes, and code blocks (DatoCMS Editor has some awesome codeblock editing experience).

DatoCMS Editor – Adding a New Post

Similarly, we can add the other two fieldsets – Preview and Metadata. Now, we are ready to publish!

Building the Blog

Once you are done with all the editing, you need to deploy the blog by ‘building’. In the top-right corner, click on ‘Build Status’ and hit ‘Build Now’. This will generate a static site and deploy it on Vercel. The logs can be checked in Settings > Activity Logs.

DatoCMS – Building the Site

Bravo! Our website is live now ?. Click on ‘Visit Site’ in the ‘Build Status’ dropdown to see your site. You can check mine here.

DatoCMS Blog

What’s Next?

In the next blog posts, I plan to go through how we can test our DatoCMS app/website locally, edit the code, and make it more customizable. Also, maybe we can check out how it compares to WordPress ?!?
```
I would like to thank the contributors of the DatoCMS Blog Starter Project. Do check out the repo.
```
December 11, 2021
Alfred – Slack Bot to Post Birthday and Anniversary Messages
At rtCamp, the family is expanding. We wanted to automate the process of sending birthday and work anniversary wishes to our Slack workspace, and so Alfred was born. Alfred lets you send birthday and work anniversary messages using the Slack API. It uses Google Apps Script, a cloud-based JavaScript platform, and integrates seamlessly to Google Sheets.

Alfred uses a single Google Sheet as the database for users’ data and wishes that you want to send out. Using time-based Google Triggers, one can run the Google Apps Script at specific intervals to send out the (random) messages automatically using the Slack API. Alfred is an open-source project, and you can find it on GitHub – https://github.com/danish17/alfred-slack-bot.

Let’s take a look at how you can set up Alfred for your workspace.

Creating a Google Sheet

Google Sheet is where your data will live. The spreadsheet will have two sheets, let’s call them Data and Messages. The Data sheet will store all the details about the users, like their birthdates, anniversary dates, and their names. The Messages sheet will contain a list of the wishes and their type, Birthday or Anniversary.

The Message spreadsheet should have the following columns:
1. Text – wish text
2. Type – whether the wish is for a birthday or an anniversary
In the Text, you can add text placeholders like <names>; Alfred will automatically replace them with the recipients’ names. For example, if the text is – “I wish <names> a very happy birthday”, Alfred will generate the wish – “I wish John Doe, and Lionel Messi a very happy birthday”.

If there are mutliple wishes for each type, Alfred will randomly choose one.

Google Sheet Example

Message Sheet Example

You can download a demo sheet (.xslx) using this link – https://github.com/danish17/alfred-slack-bot/blob/master/example-data/Test-Data.xlsx

Setting up the script

Now it is time to add Alfred to your Google Sheet. For that, we need to create a script and import Alfred as a library.

Open your sheet and click on Tools > Script Editor

Opening Script Editor

It will open Google Apps Script Console.

Importing Alfred

Before Alfred can serve us, we need to add him to the script. To do that, click on the Plus Icon (+) in front of Libraries in the left sidebar.

Paste the following Script ID: 1u4gU_yqTtdvhckO5JymTXz87MDKerxg8jc2bPeO4x6ATRS8O7cEs7eoj

Click on Look Up and it should detect Alfred. In Version, choose the latest version and hit Add. You may also choose HEAD (Development Mode) but it may cause breaking changes, so it is not recommended.

Note: There may be permission issues. Kindly drop a mail on [email protected] so that I can share access with you.

Adding Libraries – Google Apps Script

Adding Alfred

To check if Alfred is correctly working, you can add the following code and hit Run.
```
function main() {
  if (Alfred) Logger.log( 'Added' )
}
```
Configuring Alfred

Now, we need to configure how Alfred works. The first step to configuring Alfred is to add Alfred to your Slack workspace and obtain an Incoming Webhook URL.

Adding Alfred to Slack & Getting Webhook URL

To add Alfred, you can click the button below or visit the URL: https://slack.com/oauth/v2/authorize?scope=incoming-webhook,chat:write&client_id=2618518958503.2630472038933

After clicking, you will be redirected to alfred.danishshakeel.me and you will be shown the Incoming Webhook URL. Copy it, and save it.

IncomingWebhook URL

Adding Alfred to your Google Script

Now that we have obtained the Webhook URL, we can move ahead. Open your Google Script and add the boilerplate code:
```
function alfredExample() {
  // Instantiate a new config object with the Slack Webhook URL.
  const config = createConfig(YOUR_SLACK_WEBHOOK_URL_HERE)

  // Set parameters.
  config.dataSheet = YOUR_DATA_SHEET_NAME_HERE // Set name of the sheet containing data.
  config.messageSheet = YOUR_WISH_SHEET_NAME_HERE // Set name of the sheet containing messages.
  config.dobColumnKey = YOUR_BIRTHDATE_COLUMN_KEY_HERE // Birthdate column key.
  config.annivColumnKey = YOUR_ANNIVERSARY_COLUMN_KEY_HERE // Joining Date/Anniversary column key.
  config.namesColumnKey = YOUR_NAMES_COLUMN_KEY_HERE // Names column key.
  const date = new Date() // Init a date object.
  // date.setDate(date.getDate() - 1) // Example: match events for yesterday.
  config.dateToMatch = date // Set date.

  // Configure messages.
  config.birthdayHeader = YOUR_BIRTHDAY_HEADER_HERE
  config.birthdayImage = YOUR_BIRTHDAY_IMAGE_URL_HERE
  config.birthdayTitle = YOUR_BIRTHDAY_TITLE_HERE
  config.anniversaryHeader = YOUR_ANNIVERSARY_HEADER_HERE
  config.anniversaryImage = YOUR_ANNIVERSARY_IMAGE_URL_HERE
  config.anniversaryTitle = YOUR_ANNIVERSARY_TITLE_HERE

  // Run Alfred.
  runAlfred(config);
}
```
Layout

For our example:
- config.dataSheet = 'Data' (Sheet name which contains users’ data)
- config.messageSheet = 'Messages' (Sheet name which contains wishes)
- config.dobColumnKey = 'DOB' (Column name which contain birthdates)
- config.annivColumnKey = 'Joining' (Column name which contains anniversary dates)
- config.namesColumnKey = 'rtCamper' (Column name which contains users’ names)
For the messages, you can choose almost anything including some markdown and emojis.

Test

You can use Alfred.testAlfred(config)to test Alfred.
```
Note: It will send a message to the Slack channel that you've given Alfred access to.
```
Setup Automatic Messaging (Triggers)

You would want to make Alfred automatically wish people everyday. For this purpose, we will utilize Google’s Time-Based Triggers. In your Script Console, click on the Timer icon (⏰).

Google Triggers

Now, click on ‘Add Trigger’ button. We will run our function everyday at 8AM – 9AM Indian Standard Time.

Trigger Settings

Voila! Alfred is all ready to send out wishes in your Slack workspace every day.

Slack Message – Alfred

Future of Alfred

There are a lot of things that we can add to Alfred. Although Alfred was born to send out birthday and anniversary wishes, we can add the ability to send out important notifications.

In the short-term, I am planning to add:
1. Ability to create custom layouts
2. Use separate Google Spreadsheets for Data and Messages
3. Add codebase for JavaScript and Python
I want to see Alfred as an all-in-one Slack bot that behaves like the real ‘Alfred Pennyworth’
October 25, 2021