DEV Community: Kartik Grewal

Building your blog in 2022

Kartik Grewal — Mon, 14 Feb 2022 14:33:21 +0000

In today’s time, blogging has become synonymous with tech. While there are some platforms out there that are amazing for publishing one’s blogs, a lot of people working in the tech industry prefer having their blog and take pride in it.

The blog author could be a grad school student trying to get their first project up and running and they chose a blog or could be an engineer trying to build their brand with exclusive content they want to publish on their blog.

The problem arises when the complexity of the project starts increasing multi-fold as and when the author decides to add more features or updates to their blog website. Similar to this, we at canonic too faced this exact problem.

When it comes to blog spaces, the requirements have a wide spectrum over industries/companies.

Basic requirements for a blog

Extremely SEO Friendly
It should be extremely SEO-friendly. All the different tags for the OG images and other meta tags should be present. Also, it should be a static website rendered as HTML, instead of a dynamically loading react bundle as that might not load in the time web crawlers are crawling your website.
Customizable Designs and Frontend
Users should have the ability to customize the design to match the brand we want. You may want to add your styling, brand, and customize it according to your requirement. Users should also be able to experiment with different features/or add more features going forward as the requirement comes in.
Publishing Experience
Users should be able to add draft posts, schedule them to get published. Along with that, we should be able to add team members with different permission levels. Rich text highlighting, code snippets, and other required markdown should be supported.

After gathering the above-mentioned requirements, our search for the combination that suited our MERN stack began. We compared different combinations to see which one worked best for us.

Strategies

Self Hosted Fullstack Platform (Ex. Ghost/WordPress)
Pro: They’re catering to this very use-case, hence very easy to use and manage. You can quickly get started with your blog.
Con: Customizability will be limited, we’ll have to use their choice of templating library. As we scale, we’ll also have to take into the cost consideration.
Headless Self Hosted Backend + static React App (Ex. WordPress + Gatsby / Ghost + NextJS)
Pro: Using React for the frontend fits right in our stack and allows us customizability. We’ll statically build the react and serve the pages as HTML.
Con: Frontend needs to be built with scratch/or we have to take react template already out there and customize it. We also need to set up some sort of trigger that builds the app on publishing content.
Headless Hosted CMS + React App (Ex. Contentful + Gatsby / WordPress cloud + NextJS / etc.)
Pro: We’ll be able to manage the backend quite extensively. It gives us the ability to customize and change if anything is required, currently or in the future.
Con: It requires a lot of effort across the board. It might not be the most cost-friendly.

What we chose:

In the end, we at Canonic decided to go with the middle option. We’ll use Ghost as the backend for our blog and React app for the frontend. Ghost already has the support for the requirements of a blog with features like scheduled publishing, adding drafts, customizable SEO tags, etc. It also provides you with APIs and Integrations so that integrating with a new frontend or different services becomes incredibly simple. Ghost is also built on the MERN stack - making it a good fit for our infrastructure.

The first option makes good sense if you’re not looking for high customizability. You can directly use ghost or WordPress and get started within minutes. They also provide basic customization tools to change color schemes or logos. The last option is good if you’re looking to build your blog structure connected to your other data services.

In the end, you should choose the option that best suits your needs. Consider which option is budget-friendly, least time-consuming, and checks all the boxes.

We would love to know in the comments what are you using for your blog?

Recording User Flows for Testing (feature in chrome)

Kartik Grewal — Tue, 08 Feb 2022 17:05:40 +0000

As developers, we are all aware of the crucial role testing plays in the stability of the platform. It helps catch bugs that might get pushed to production, leading to a poor user experience.

Often, there are multiple people involved in the process of testing, which may lead handoffs to QAs for testing user flows and other important details. Defining the test flow becomes tricky and lengthy without the help of external tools. One can always write it in a document, but it’s not the most ideal and intuitive.

Outcomes Chrome - with recording - built-in developer tools. It allows you to capture the screen and its elements when they’re getting engaged.

Let’s see how you can use it

Open Chrome and the website you wish to test. The, further click on Developer Tools in Chrome.
Hit Start new recording, give it a name Test flow 1. As you interact with your application, google chrome will record all of the interactions as well as your screen.
Once you stop the recording, you’ll see the summary of your interactions and different page views. You can also replay the recording and measure its performance and so on.

This addition makes it very easy to create videos for different flows. As it records the screen and the interactions, these flows, then can easily be handed over to QA for testing.

It also makes it easier for newer people, not familiar with the platform, to go back and test that flow with quite an ease. 💃

We’ve just discovered this tool at Canonic recently, and will probably start using it to its full potential. Learn more about this tool by Chrome.

What do you use for QA handovers and defining test flows?

Build Marketplace App with Stripe Billing

Kartik Grewal — Thu, 23 Dec 2021 01:37:54 +0000

Introduction

As a result of being home bound amidst the pandemic, public interest in marketplace apps has skyrocketed as it became the primary place for people to buy products. The marketplace model explains why online marketplaces are so popular and beneficial. It can be built for any market and niche with no initial inventory required and can grow exponentially, with benefits to all - sellers, buyers, and of course the marketplace owners.

To sell products online without a lot of marketing effort is appealing to sellers. Marketplace app is much easier and faster than creating your own e-commerce website/app and then struggling to get traffic.

It also makes it convenient for customers to buy products because of the wide selection and prices available, as well as the ability to compare products.

And owning a marketplace provides you with many effective ways to generate revenue. Advertising, charging a percentage for each deal, and a lot more. So, let’s take a deep dive and know how to build one yourself!

Let’s get started

Setting up the React

Let’s begin by creating a boilerplate using the creact-react-app

npx create-react-app marketplace

Install Material UI

We will be using Material UI to style the frontend that way we don’t end up writing the CSS

cd marketplace
npm install @mui/material @emotion/react @emotion/styled

Create a Product component

Create a directory inside src and name it components where we'll be place all the different components we are gonna build!

Create another directory inside of it and name it Product. Create a Product.js inside the Product directory. This component will display the list of products we have. At first, we will be looping through a static list of products

import React from "react";
import {
  Box,
  Card,
  CardActions,
  CardContent,
  Button,
  Typography,
  Rating,
} from "@mui/material";

const Products = [
  {
    title: "Oculus Quest All-in-one VR Gaming Headset",
    price: "11.96",
    rating: 5,
  },
  {
    title: "Nintendo Switch with Neon Blue and Neon Red Joy‑Con",
    price: "15.96",
    rating: 3,
  },
  {
    title: "Mass Effect",
    price: "23",
    rating: 5,
  },
  {
    title: "The LeanStartup2: How constant innovative creators",
    price: "9.96",
    rating: 2,
  },
  {
    title: "Dual Shock Controller",
    price: "19.96",
    rating: 5,
  },
];

function Product() {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "start",
      }}
    >
      {Products.map((product) => (
        <Card
          sx={{
            maxHeight: 450,
            minWidth: 100,
            width: "25%",
            margin: "1.5rem",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            alignItems: "start",
          }}
        >
          <CardContent>
            <Typography gutterBottom variant="h5" component="div">
              {product.title}
            </Typography>
            <Typography gutterBottom variant="h5" component="div">
              ${product.price}
            </Typography>
            <Rating name="read-only" value={product.rating} readOnly />
          </CardContent>
          <CardActions>
            <Button variant="contained" size="small">
              Buy now
            </Button>
          </CardActions>
        </Card>
      ))}
    </Box>
  );
}

export default Product;

Create a Header component.

Create a directory inside components and name it header, and create a file inside it and name it Header.js. This file will hold the header where we will display the app’s name and later on user sign in/sign out button.

import React from "react";

import Product from "./components/product/Product";
import Header from "./components/header/Header";

function App() {
  return (
    <>
      <Header />
      <Product />
    </>
  );
}

export default App;

It should look something like this:

Time to get the API ready!

Getting your APIs for the Marketplace app comes at real ease. All you have to do is clone this production-ready project on Canonic, and you're done. It will provide you with the backend, APIs, and documentation you need for integration, without writing any code. Just make sure you add your own callback URI, client ID and secret for your 0auth provider

You will have to add CMS entries for the Products as cloning a project does not clone CMS entries.

Backend integration with GraphQL

Let's now integrate! Now that we have our APIs ready, let's move on by installing GraphQL packages.

Install GraphQL packages

To pull our data from the backend, we will need two packages - Apollo Client and GraphQL

npm i @apollo/client graphql

Configure GraphQL to communicate with the backend

Configure the Apollo Client in the project directory, inside index.js configure your apollo client so it would communicate with the backend.

Note to replace the uri with the one you'll get from Canonic.

        import React from "react";
        import ReactDOM from "react-dom";
        import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

        import App from "./App";

        const client = new ApolloClient({
          uri: "https://marketplace-app.can.canonic.dev/graphql", //You can replace this with your URI
          cache: new InMemoryCache(),
        });

        ReactDOM.render(
          <React.StrictMode>
            <ApolloProvider client={client}>
              <App />
            </ApolloProvider>
          </React.StrictMode>,
          document.getElementById("root")
        );

Query the data

For querying the data, we will create a directory inside src called gql and create a file inside it called query.js. In it will write all the data we need from the backend.

        import { gql } from "@apollo/client";

        export const LOGIN_WITH_GOOGLE = gql`
          query {
            getLoginUrlsForLogin {
              GOOGLE
            }
          }
        `;

        export const GET_PRODUCTS = gql`
          query {
            products {
              title
              _id
              price
              ratings
              priceApiId
              image {
                url
                name
              }
            }
          }
        `;

Setting up login with Google 0auth

Let’s go back to the Header component, we will be importing the query we declared in previous step and holding it in data variable we get from useQuery hook by Apollo

        import { useQuery } from "@apollo/client";
        import { LOGIN_WITH_GOOGLE } from "../../gql/query";

            const { data, loading: loginDataLoading } = useQuery(LOGIN_WITH_GOOGLE)

We will add the following JSX to display the login button. data?.getLoginUrlsForLogin?.GOOGLE In here, the GOOGLE object contains login and callback links to let user login themeselves in.

        <Box sx={{ flexGrow: 0 }}>
          <Tooltip title="Account">
             {loginDataLoading && <CircularProgress color="secondary" />}
                <a href={data?.getLoginUrlsForLogin?.GOOGLE}>
                    <Button variant="contained" startIcon={<GoogleIcon />}>
                       <span sx={{ textDecoration: "none" }}>Login</span>
                    </Button>
                </a>
        </Box>

After adding these, the Header component should look something like this:

        import React from "react";
        import { useQuery } from "@apollo/client";
        import {
          AppBar,
          Box,
          Toolbar,
          Typography,
          Container,
          Button,
          Tooltip,
          CircularProgress,
        } from "@mui/material";
        import GoogleIcon from "@mui/icons-material/Google";

        import { LOGIN_WITH_GOOGLE } from "../../gql/query";

        function Header() {
          const { data, loading: loginDataLoading } = useQuery(LOGIN_WITH_GOOGLE); 
          return (
            <AppBar position="static">
              <Container maxWidth="xl">
                <Toolbar disableGutters sx={{ justifyContent: "space-between" }}>
                  <Typography
                    variant="h6"
                    noWrap
                    component="div"
                    sx={{ mr: 2, display: { xs: "none", md: "flex" } }}
                  >
                    Marketplace
                  </Typography>
                  <Box sx={{ flexGrow: 0 }}>
                    <Tooltip title="Account">
                      {loginDataLoading && <CircularProgress color="secondary" />}
                      <a href={data?.getLoginUrlsForLogin?.GOOGLE}>
                        <Button variant="contained" startIcon={<GoogleIcon />}>
                          <span sx={{ textDecoration: "none" }}>Login</span>
                        </Button>
                      </a>
                    </Tooltip>
                  </Box>
                </Toolbar>
              </Container>
            </AppBar>
          );
        }

        export default Header;

Getting logged in user’s status.

We are not yet done with the Header component, now that we have added a feature of letting the user sign themselves in on the app, we need to retrieve and store their information, so we could identify whether they are logged in or not, we can even use this persists their session, we also get some useful information such as first name, last name, email ID and all that good stuff. Let’s set up for it, first we have to create a mutation. Create a file called mutation.js inside the gql directory

        import { gql } from "@apollo/client";

        export const LOGIN_WITH_GOOGLE_MUTATION = gql`
          mutation Login($code: String!, $service: String!) {
            loginForLogin(code: $code, service: $service) {
              token
              user {
                email
                firstName
                lastName
                avatar {
                  url
                }
              }
            }
          }
        `;

Now that our mutation is ready, we can call that inside our Header component, let’s go back to it. The mutation would look like this:

        import { useMutation } from "@apollo/client";

        const [loginMutation, { data: mutationData }] = useMutation(LOGIN_WITH_GOOGLE_MUTATION);
        const urlCode = new URLSearchParams(window.location.search).get("code"); //We receive a code after a successful sign in, here pulling that code from the URL
            if (urlCode) {
              loginMutation({ variables: { code: urlCode, service: "GOOGLE" } });
                }

We receive a code from our provider be it, Google, Facebook or GitHub after the user successfully sign ins. We can get that code using this call to windows object URLSearchParams(window.location.search).get("code") and once we store that code we could just pass it in as a variable to the mutation. In service, you should write which ever service you are using, here this app just uses Google, so we added Google statically.

We will pass in this mutation inside a useEffect hook with empty array as a dependency. We’ll also need a state to hold this data we get back from mutation, so it could be used elsewhere, and while we are at it, we can store the token we receive from the mutation inside local storage, so we can persist the user login session.

        const [accessToken, setAccessToken] = useState();
        const [isLoggedIn,setIsLoggedIn] = useState()

        useEffect(() => {
            const urlCode = new URLSearchParams(window.location.search).get("code");
            if (urlCode) {
              loginMutation({ variables: { code: urlCode, service: "GOOGLE" } }); 
          }, []);

        useEffect(() => {
            setAccessToken(mutationData?.loginForLogin?.token);
            setIsLoggedIn(mutationData?.loginForLogin?.user);
            if (accessToken) localStorage.setItem("_id", accessToken);
          }, [accessToken, mutationData, setIsLoggedIn]);

But, we will need this isLoggedIn state elsewhere as well, so a better option is to move this to App.js since it is a parent to all the component, we’ll let Header component receive it as props. So the App.js will look like this:

        import React, { useState } from "react";

        import Header from "./components/header/Header";
        import Product from "./components/product/Product";

        function App() {
          const [isLoggedIn, setIsLoggedIn] = useState(); 

          return (
            <>
              {
                <div className="App">
                  <Header setIsLoggedIn={setIsLoggedIn} isLoggedIn={isLoggedIn} />
                  <Product />
                </div>
              }
            </>
          );
        }

        export default App;

We will also add a way, so user can sign out. For that we will be using Material UI’s components, after adding all that UI enhancements, the Header component will look like this

        import React, { useEffect, useState, useCallback } from "react";
        import { useQuery, useMutation } from "@apollo/client";
        import {
          AppBar,
          Box,
          Toolbar,
          IconButton,
          Typography,
          Menu,
          Container,
          Avatar,
          Button,
          Tooltip,
          MenuItem,
          CircularProgress,
        } from "@mui/material";
        import GoogleIcon from "@mui/icons-material/Google";

        import { LOGIN_WITH_GOOGLE } from "../../gql/query";
        import { LOGIN_WITH_GOOGLE_MUTATION } from "../../gql/mutation";

        function Header({ setIsLoggedIn, isLoggedIn }) {
          const [accessToken, setAccessToken] = useState();
          const { data, loading: loginDataLoading } = useQuery(LOGIN_WITH_GOOGLE);
          const [loginMutation, { data: mutationData }] = useMutation(
            LOGIN_WITH_GOOGLE_MUTATION
          );
          useEffect(() => {
            const urlCode = new URLSearchParams(window.location.search).get("code"); 
            if (urlCode) {
              loginMutation({ variables: { code: urlCode, service: "GOOGLE" } }); 
            }
          }, []);
          useEffect(() => {
            setAccessToken(mutationData?.loginForLogin?.token);
            setIsLoggedIn(mutationData?.loginForLogin?.user);
            if (accessToken) localStorage.setItem("_id", accessToken); 
          }, [accessToken, mutationData, setIsLoggedIn]);

          const [anchorElNav, setAnchorElNav] = React.useState(null);
          const [anchorElUser, setAnchorElUser] = React.useState(null);

          const handleOpenUserMenu = useCallback((event) => {
            setAnchorElUser(event.currentTarget);
          });

          const handleCloseNavMenu = useCallback(() => {
            setAnchorElNav(null);
          });

          const handleCloseUserMenu = useCallback(() => {
            setAnchorElUser(null);
          });

          const onLogout = useCallback(() => {
            localStorage.removeItem("_id"); 
          });

          return (
            <AppBar position="static">
              <Container maxWidth="xl">
                <Toolbar disableGutters sx={{ justifyContent: "space-between" }}>
                  <Typography
                    variant="h6"
                    noWrap
                    component="div"
                    sx={{ mr: 2, display: { xs: "none", md: "flex" } }}
                  >
                    Marketplace
                  </Typography>

                  <Box sx={{ flexGrow: 0 }}>
                    <Tooltip title="Account">
                      {loginDataLoading ? (
                        <CircularProgress color="secondary" />
                      ) : !isLoggedIn && !localStorage.getItem("_id") ? ( 
                        <a href={data?.getLoginUrlsForLogin?.GOOGLE}>
                          <Button variant="contained" startIcon={<GoogleIcon />}>
                            <span sx={{ textDecoration: "none" }}>Login</span>
                          </Button>
                        </a>
                      ) : (
                        <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                          {isLoggedIn?.avatar?.url ? (
                            <Avatar alt="User" src={isLoggedIn.avatar.url} />
                          ) : (
                            <Avatar src="/broken-image.jpg" />
                          )}
                        </IconButton>
                      )}
                    </Tooltip>
                    <Menu
                      sx={{ mt: "45px" }}
                      id="menu-appbar"
                      anchorEl={anchorElUser}
                      anchorOrigin={{
                        vertical: "top",
                        horizontal: "right",
                      }}
                      keepMounted
                      transformOrigin={{
                        vertical: "top",
                        horizontal: "right",
                      }}
                      open={Boolean(anchorElUser)}
                      onClose={handleCloseUserMenu}
                    >
                      <MenuItem onClick={handleCloseNavMenu}>
                        <Typography textAlign="center">
                          <a
                            onClick={onLogout}
                            href={`https://www.google.com/accounts/Logout?continue=https://appengine.google.com/_ah/logout?continue=${window.origin}`}
                          >
                            Logout
                          </a>
                        </Typography>
                      </MenuItem>
                    </Menu>
                  </Box>
                </Toolbar>
              </Container>
            </AppBar>
          );
        }

        export default Header;

Finish the Product component

We will now shift our focus to Product component. To maintain component simplicity so, one component doesn’t get too complicated, we will create a Home component that would act as a parent Product components. Let’s set that up by creating a directory inside component and calling it Home and creating a Home.js file inside it.

        import React, { useMemo } from "react";
        import { useQuery } from "@apollo/client";
        import { Box, CircularProgress } from "@mui/material";

        import Product from "../product/Product.js";
        import { GET_PRODUCTS } from "../../gql/query";

        function Home() {
          const { data, loading: productsLoading } = useQuery(GET_PRODUCTS); 
          const products = useMemo(() => data?.products || [], [data?.products]); 

          return (
            <Box
              sx={{
                display: "flex",
                flexDirection: "row",
                flexWrap: "wrap",
                gap: "4rem",
                marginTop: "4rem",
              }}
            >
              {productsLoading && (
                <CircularProgress sx={{ position: "absolute", left: "50%" }} />
              )}
              {products.map((item, i) => {
                return (
                  <Product
                    key={i}
                    id={item.id}
                    title={item.title}
                    image={item.image.url}
                    price={item.price}
                    rating={item.ratings}
                    price_api={item.priceApiId}
                  />
                );
              })}
            </Box>
          );
        }

        export default Home;

Now that we are receiving the data dynamically, we can finally toss the static array of data from Product.js, let’s get to it.

        import React from "react";
        import {
          Card,
          CardContent,
          CardMedia,
          Typography,
          Rating,
        } from "@mui/material";

        function Product({ title, price, rating, image, price_api }) {
          return (
            <Card
              sx={{
                maxHeight: 450,
                minWidth: 100,
                width: "25%",
                margin: "1.5rem",
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                alignItems: "start",
              }}
            >
              <CardMedia
                component="img"
                alt="title"
                height="auto"
                image={image}
                sx={{ objectFit: "contain", maxHeight: "200px" }}
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="div">
                  {title}
                </Typography>
                <Typography gutterBottom variant="h5" component="div">
                  ${price}
                </Typography>
                <Rating name="read-only" value={rating} readOnly />
              </CardContent>
            </Card>
          );
        }

        export default Product;

We are almost the completion here, just need to Stripe’s client only checkout

For that, first you need to have an account on Stripe, after that you should have Stripe’s API key. You can get your keys here. Then we will install stripe

        npm install --save @stripe/react-stripe-js @stripe/stripe-js

Now that all these is done, let’s hop back into Home component. We will create an asynchronous function let’s name it handle click since it will be handle click from a ‘Buy now’ button.

        import { loadStripe } from "@stripe/stripe-js";

        const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_API);
        const handleClick = async () => {
              setLoading(true);
              const stripe = await stripePromise;
              const { error } = await stripe.redirectToCheckout({
                lineItems: [
                  {
                    price: price_api, 
                    quantity: 1,
                  },
                ],
                mode: "payment",
                cancelUrl: "https://canonic-marketplace.netlify.app/", 
                successUrl: "https://canonic-marketplace.netlify.app/", 
              if (error) {
                setLoading(false);
                console.log("The error ", error);
              }
          };

Instead of process.env.REACT_APP_STRIPE_API you can add your own API key, you can replace cancelUrl and successUrl with your own URL as well. In here we are using price_api as a value to price key. In stripe every product has a unique product price ID I have stored all my product price ID on Canonic CMS, you thus using it as a value.

In your own project’s CMS you can add your own Product’s price ID in the price_api field.

Last bit of validation we can is to check if the user is signed in or not before proceeding, since we have isLoggedIn inside the App component, we can easily get it through pass it to Home components

        import React, { useState } from "react";

        import Header from "./components/header/Header";
        import Home from "./components/home/Home";

        function App() {
          const [isLoggedIn, setIsLoggedIn] = useState(); 

          return (
            <>
              {
                <div className="App">
                  <Header setIsLoggedIn={setIsLoggedIn} isLoggedIn={isLoggedIn} />
                  **<Home isLoggedIn={isLoggedIn} />**
                </div>
              }
            </>
          );
        }

        export default App;

We will have to pass in handleClick function along with loading state, we are using loading state to disable to ‘Buy now’ button after user click on it, so there won’t be multiple call to Stripe.

        import React, { useState, useEffect, useMemo } from "react";
        import {  useQuery } from "@apollo/client";
        import { loadStripe } from "@stripe/stripe-js";
        import { Box, CircularProgress } from "@mui/material";

        import Product from "../product/Product.js";
        import { GET_PRODUCTS } from "../../gql/query";

        function Home({ **isLoggedIn** }) {
          const { data, loading: productsLoading } = useQuery(GET_PRODUCTS); 
          const products = useMemo(() => data?.products || [], [data?.products]);
          const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_API); 
          const [loading, setLoading] = useState();

          const handleClick = async (price_api, title) => {

            if (isLoggedIn) {
              setLoading(true);
              const stripe = await stripePromise;
              const { error } = await stripe.redirectToCheckout({
                lineItems: [
                  {
                    price: price_api, 
                    quantity: 1,
                  },
                ],
                mode: "payment",
                cancelUrl: window.origin,
                successUrl: window.origin + `?session_id=${title}`,
              });
              if (error) {
                setLoading(false);
              }
            } else alert("Please log in to continue");
          };

          return (
            <Box
              sx={{
                display: "flex",
                flexDirection: "row",
                flexWrap: "wrap",
                gap: "4rem",
                marginTop: "4rem",
              }}
            >
              {productsLoading && (
                <CircularProgress sx={{ position: "absolute", left: "50%" }} />
              )}
              {products.map((item, i) => {
                return (
                  <Product
                    key={i}
                    id={item.id}
                    title={item.title}
                    image={item.image.url}
                    price={item.price}
                    rating={item.ratings}
                    price_api={item.priceApiId}
                    **handleClick={handleClick}
                    loading={loading}**
                  />
                );
              })}
            </Box>
          );
        }

        export default Home;

Product component is now receiving props of handleClick and loading, we can finally create a Buy now button

        import React from "react";
        import {
          Card,
          CardActions,
          CardContent,
          CardMedia,
          Button,
          Typography,
          Rating,
        } from "@mui/material";

        function Product({
          title,
          price,
          rating,
          image,
          price_api,
          handleClick,
          loading,
        }) {
          return (
            <Card
              sx={{
                maxHeight: 450,
                minWidth: 100,
                width: "25%",
                margin: "1.5rem",
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                alignItems: "start",
              }}
            >
              <CardMedia
                component="img"
                alt={title}
                height="auto"
                image={image}
                sx={{ objectFit: "contain", maxHeight: "200px" }}
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="div">
                  {title}
                </Typography>
                <Typography gutterBottom variant="h5" component="div">
                  ${price}
                </Typography>
                <Rating name="read-only" value={rating} readOnly />
              </CardContent>
              <CardActions>
                <Button
                  variant="contained"
                  size="small"
                  onClick={() => handleClick(price_api, title)} 
                  disabled={loading}
                >
                  Buy now
                </Button>
              </CardActions>
            </Card>
          );
        }

        export default Product;

And, with this we can conclude our frontend.

Bonus! - Sending email and Slack notification

We can add webhooks to perform actions such as send a Slack notification whenever a product is purchased or send an email notification. Let’s see how that done.

Configuring the webhooks

Open your cloned project on Canonic, navigate to API and choose Notify table. Click on createNotify endpoint there you can see Message webhook of Slack, you can click on it and replace trigger URL and message body with your own trigger URL and message body. Chained to that you will find email webhook of Canonic, there as well, you can replace email subject and email body with your content.

Configuring frontend

In order to trigger these webhooks, we need to make a mutation. Let’s begin by declaring a mutation in our mutation.js file

            export const NOTIFY = gql`
              mutation Notify($title: String!) {
                createNotify(input: { title: $title }) {
                  title
                }
              }
            `;

Final file would look like this:

            import { gql } from "@apollo/client";

            export const LOGIN_WITH_GOOGLE_MUTATION = gql`
              mutation Login($code: String!, $service: String!) {
                #This mutation is used to get logged in user's details
                loginForLogin(code: $code, service: $service) {
                  #We feed in code which we get after user successfully signs in, services are the 0auth services we are using such as Google,Github and Facebook.
                  token
                  user {
                    email
                    firstName
                    lastName
                    avatar {
                      url
                    }
                  }
                }
              }
            `;

            export const NOTIFY = gql`
              mutation Notify($title: String!) {
                createNotify(input: { title: $title }) {
                  title
                }
              }
            `;

We have to trigger this mutation from Home component. Let’s go back to the Home component, there we will modify successUrl in handleClick function to include the title of the product in URL whenever a product is checked out successfully

            const handleClick = async (price_api, title) => {

                if (isLoggedIn) {
                  setLoading(true);
                  const stripe = await stripePromise;
                  const { error } = await stripe.redirectToCheckout({
                    lineItems: [
                      {
                      price: price_api, 
                        quantity: 1,
                      },
                    ],
                    mode: "payment",
                    cancelUrl: window.origin,
                    successUrl: window.origin + `?session_id=${title}`,
                  });
                  if (error) {
                    setLoading(false);
                  }
                } else alert("Please log in to continue");
              };

And, add useEffect to with empty dependency array, to check if URL has the product’s title

            useEffect(() => {
                const hasSuccessUrl = new URLSearchParams(window.location.search).get(
                  "session_id"
                ); 
                if (hasSuccessUrl) {
                 //Do something
                }
              }, []);

Now that everything is set up we can trigger the mutation

            import { useMutation } from "@apollo/client";
            import { NOTIFY } from "../../gql/mutation";

            const [notify] = useMutation(NOTIFY);

            useEffect(() => {
                const hasSuccessUrl = new URLSearchParams(window.location.search).get(
                  "session_id"
                ); 
                if (hasSuccessUrl) {
                  notify({ variables: { title: hasSuccessUrl } });
                }
              }, []);

So the final file would look like this


import React, { useState, useEffect, useMemo } from "react";
import { useMutation, useQuery } from "@apollo/client";
import { NOTIFY } from "../../gql/mutation";
import { loadStripe } from "@stripe/stripe-js";
import { Box, CircularProgress } from "@mui/material";

import Product from "../product/Product.js";
import { GET_PRODUCTS } from "../../gql/query";

function Home({ isLoggedIn }) {
  const { data, loading: productsLoading } = 
  useQuery(GET_PRODUCTS); 
  const products = useMemo(() => data?.products || [], [data?.products]); 
  const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_API); 
  const [loading, setLoading] = useState(); 
  const [notify] = useMutation(NOTIFY);

  const handleClick = async (price_api, title) => {
                if (isLoggedIn) {
                  setLoading(true);
                  const stripe = await stripePromise;
                  const { error } = await stripe.redirectToCheckout({
                    lineItems: [
                      {
                        price: price_api, 
                        quantity: 1,
                      },
                    ],
                    mode: "payment",
                    cancelUrl: window.origin,
                    successUrl: window.origin + `?session_id=${title}`, 
                  });

                  if (error) {
                    setLoading(false);
                  }
                } else alert("Please log in to continue");
              };

              useEffect(() => {
                const hasSuccessUrl = new URLSearchParams(window.location.search).get(
                  "session_id"
                ); 
                if (hasSuccessUrl) {
                  notify({ variables: { title: hasSuccessUrl } });
                }
              }, []);
              return (
                <Box
                  sx={{
                    display: "flex",
                    flexDirection: "row",
                    flexWrap: "wrap",
                    gap: "4rem",
                    marginTop: "4rem",
                  }}
                >
                  {productsLoading && (
                    <CircularProgress sx={{ position: "absolute", left: "50%" }} />
                  )}
                  {products.map((item, i) => {
                    return (
                      <Product
                        key={i}
                        id={item.id}
                        title={item.title}
                        image={item.image.url}
                        price={item.price}
                        rating={item.ratings}
                        price_api={item.priceApiId}
                        handleClick={handleClick}
                        loading={loading}
                      />
                    );
                  })}
                </Box>
              );
            }

  export default Home;

Once you've reached here, you've successfully completed the Marketplace project.

You can clone this sample project here. We hope this guide helped you to create your own Marketplace app; if you do, then share it with us in our Discord community.If you are not already a member, join us, and let's build together.

Connect on Discord.If you'd like to see our other guides, they're all here.For any support requests, write to us at support@canonic.dev. Check out our website to know more about Canonic.

How to create an awesome slack approval workflow

Kartik Grewal — Sat, 18 Dec 2021 23:29:44 +0000

Slack is a very popular workplace place, to a point where now it’s become a verb — “Slack me if you need something!” — and there’s good reason for it. During these pandemic times, it’s so much more than just a chat app.

Today, we’ll explore how we can do even more with Slack Approvals. We’ll bring in Canonic and use the power of slack approvals to approve or disapprove our message. We want the ability that whenever a message is added to the database, its respective slack approval message is sent, based on the response, the same gets updated in the database.

Let’s dive in! 🚀

Step 1: Create necessary slack app & generate tokens

Let’s start with getting all the slack requirements in place. We have to create an app with Slack and generate its respective tokens.

For this step, we’ll follow the slack guides linked with the respective text as they’ll be the best source to get all these requirements.

Step 2: Starting with a slack integration workflow

Jump to Canonic and clone this sample project which already has slack integration added, or create one for yourself and move to the API section to manually add the slack integration for your createMessage API.

You will be asked to authenticate and add in a token (the one that we got in step 1) Once authorized you should have a green tick to reflect that.

Step 3: Slack payload creation

Now that we have our integration set up complete and attached to our createMessage API. Whenever we trigger this API, an approval message with the trigger message should be sent to slack.

For this, we need to add our payload to slack. For using this feature, we’ll use a slightly different payload than we usually do for a simple chat message. Our payload should look something like this:

{
    "text": "New approval request",
    "blocks": [
        {
            "type": "header",
            "text": {
                "type": "plain_text",
                "text": "New request",
                "emoji": true
            }
        },
        {
            "type": "section",
            "fields": [
                {
                    "type": "mrkdwn",
                    "text": {{ title }}
                },
            ]
        },
        {
            "type": "actions",
            "elements": [
                {
                    "type": "button",
                    "text": {
                        "type": "plain_text",
                        "emoji": true,
                        "text": "Approve"
                    },
                    "style": "primary",
                    "url": "click_me_123"
                },
                {
                    "type": "button",
                    "text": {
                        "type": "plain_text",
                        "emoji": true,
                        "text": "Reject"
                    },
                    "style": "danger",
                    "url": "click_me_123"
                }
            ]
        }
    ]
}

Here, in place of click_me_123, we’ll add the URL for the respective API to get triggered when someone approves or disapproves it. For that, we’ll need to build a custom API. Let’s do that.

Step 4: Create custom API for approving/disapproving messages

We now create a custom API in Canonic to look for the query parameters and update the respective record. Create a new API by clicking on the + icon against the Endpoints tab.

Next, add details regarding the API.

Go to the Code tab and add the following code to find the id for the message and add in the approval or disapproval in the database. We use query parameters to fetch the details then do the processing.

module.exports = async function endpoint({ query }) {
  const { id, approved } = query
  return Message.findOneAndUpdate({ _id: id }, { $set: { approved: approved }}, { upsert: true })
}

Step 5: Update back the message

We deploy this project to get the API URL. Click on the top right corner saying deploy, then go to the docs to get its URL.

We replace **click_me_123** to*https://messages.can.canonic.dev/api/messages/approvalornot?id=1234&approved=false* in the danger button and replace the same with https://messages.can.canonic.dev/api/messages/approvalornot?id=1234&approved=true.

Now whenever a user will approve or disapprove, the following URL will get triggered saving the approval of the message in the database. This can be used in place of any Micro-service which is built is to handle slack integration or become a slack server for that business.

Hope this guide helps you make your day a little bit more productive!
Check out the sample project here

Conclusion

Thank you for reading this guide. If you happen to create any of these integrations, please remember to mention us on social media or drop us a line on our discord channel.

You can also check out our other guides here.

Join us on Discord to discuss or share with our community. Write to us for any support requests at support@canonic.dev. Check out our website to know more about Canonic.

Youtube to Google Sheets: How to import Youtube public data

Kartik Grewal — Tue, 14 Dec 2021 03:38:03 +0000

We use a variety of services today to support multiple use cases and so, it becomes increasingly important to be able to connect to different integrations.

Here is a step-by-step guide to fetch YouTube metrics and add it to google sheets every day or every month. Also get a notification while we're at it :P

Let's get started! 🚀

Step 1: Creating necessary sheets to hold our statistics

So the first step is to create two different empty set of google sheets to hold our every day and every month statistics. We're looking to create two sets of sheets like this:

Step 2: Let's start working on those integrations!!
Go to this sample project and click on the top right corner to clone it. This project already has youtube integration for metrics set up. So we can simply clone it and get started.

Step 3: Explore API tab

From left hand navigation bar, move to the API tab. In the left hand panel, you'll find different divisions like - Endpoints, Scheduled triggers, DB triggers, Integration triggers, etc. In the scheduled triggers, you should find two triggers already set up.

dailyReporting - Gets executed daily.
monthlyReporting - Get executed monthly.

Step 4: The dailyReporting flow

Click on the dailyReporting trigger and it'll open up the graph for it. Our flow looks something like this:

Clicking on these individual pills will reveal its settings and configurations.

NOTE: You may need to re-authenticate yourself on each plugin as you've cloned the project.

Step 5: Updating configuration of integrations

Let's start inspecting and correcting any integration settings should we have to. Click on the left most trigger will reveal its settings.

As you can check we've set it up to execute every day around 12:17AM. You can change this schedule should you want to by clicking on the trigger.

Similarly, Youtube integration also has different settings that you can configure. Please move to the auth tab to re-authenticate in case it's required. In the optional parameters, you can define the different variables through which you want to query youtube. In this instance we're using these query parameters:

dimentions: day
endDate: 2021-12-30
ids: channel==INSERT_CHANNEL_ID or MINE
metrics: estimatedMinutesWatched
startDate:2021-12-12

Very similarly to how above settings were configured, we can similarly click on the google sheets to configure it's settings.

Authenticate yourself with the account that owns the recently created Google Sheet
Put in the sheet ID (You can get that in your sheet’s url) and put in range e.g A1:B30
Go to option fields there set valueInputOption to RAW
In values, check static, then click on add item, in there type {{1.rows.[0].[0]} - here 1 refers to 1st webhook in the chain that is Youtube, and the array [0][0] represents the first value returned by youtube webhook.

Finally we move to slack, and update its minimal configuration to trigger a message whenever this workflow is executed. It'll look like this:

and Voila! We have our entire chain set up where

We trigger a workflow every day at X time
Where it fetches metrics from youtube
Adds them to google sheet
Sends a message on slack when done!

Step 6: Creating the flow for monthly Reporting

Similar to how we've created the flow for daily reporting, we'll create on for monthly reporting, where most of the queries will be similar.

We just have to change youtube query parameters, like this

dimentions: day
endDate: 2021-12-30
ids: channel==INSERT_CHANNEL_ID or MINE
metrics: likes,comments,views,estimatedMinutesWatched,averageViewDuration
startDate: 2021-12-12

and change google sheet values like this 👇

With these minor changes, we can modify our trigger to post youtube metrics to google sheet monthly. All of the above mentioned query parameters can be found in the documentation for google sheets and youtube.

Conclusion

Hope this guide turns out to be a good help for you guys. You can clone the sample project directly from here.

You can also check out our other guides here.

Join us on discord to discuss or share with our community. Write to us for any support requests at support@canonic.dev. Check out our website to know more about Canonic.

How to build a marketing dashboard (twitter & youtube) with React

Kartik Grewal — Sat, 11 Dec 2021 22:36:59 +0000

Integrations play a huge role in communicating across different services. In this guide, we'll build a marketing analytical dashboard with Twitter and Youtube integrations. This dashboard can be used to track stats across both platforms in a single view.

We're looking to build something like this 👇

We'll be using:

React for building the frontend.
Blueprint as our UI Library
Backend template from Canonic
GraphQL for fetching the data.
React-chartjs-2 for building charts.

Lets get started! 🚀

Step 1: Getting started with the project

To create the project, we'll use create-react-app. Execute the command below in a terminal to create the basic boilerplate setup. We'll name our project marketing-dashboard.

npx create-react-app marketing-dashboard

Step 2: Add the dependencies

Let's add all the dependencies listed above for ui and GraphQL. Navigate to project folder, and start adding the dependencices.

yarn add @blueprintjs/core @apollo/client graphql@15.7.1 react-chartjs-2 chart.js

Now let's discuss the project setup. We'll have three top level component setups:

Header
Middle Component - Further divided into two components - Twitter & Youtube
Footer

Step 3: Building top level components

Let's first modify App.js to accommodate for our top level components. We'll add the Header and Footer components directly in the App and create space for Twitter and Youtube components. While we're at it, might as well add some styling :P

// Import React and Blueprint dependencies
import React from "react";

import "@blueprintjs/core/lib/css/blueprint.css";
import { Navbar, Alignment, Divider } from "@blueprintjs/core";

import "./App.css";

const App = () => {
  return (
    <div className="App">
      {/* Header */}
      <Navbar className="bp3-dark" style={{ position: "fixed", top: "0" }}>
        <Navbar.Group align={Alignment.LEFT}>
          <Navbar.Heading style={{ marginLeft: "30px" }}>
            Marketing Dashboard
          </Navbar.Heading>
        </Navbar.Group>
      </Navbar>
      {/* Middle Container to hold our Metrics */}
      <div
        style={{ marginLeft: "30px", marginTop: "80px", marginRight: "30px" }}
      >
        <div style={{ marginTop: "50px" }}>
         {/* Youtube component will go here */}
        </div>
        <Divider style={{ marginTop: "50px" }}></Divider>
        <div style={{ marginTop: "50px" }}>
          {/* Twitter component will go here */}
        </div>
        <Divider style={{ marginTop: "50px" }}></Divider>
      </div>
      {/* Footer */}
      <div>
        <h5
          style={{
            fontSize: "medium",
            textAlign: " left",
            margin: "30px 30px 20px 30px",
          }}
        >
          Canonic ©2021 Created by Canonic Inc
        </h5>
      </div>
    </div>
  );
};

export default App;

Remove all of the preloaded CSS in App.css file.

Step 4: Mocking data to display

We'll create dummy data that mimics the API response and feeds directly into our Twitter and Youtube components.

Let's create dummyData.js at src directory and add the following dummy data containing metrics for both the platforms.

export const dummyData = {
  metric: {
    youtubeMetrics: {
      rows: [[745, 2, 16, 1, 597, 48]],
      columnHeaders: [
        {
          columnType: "METRIC",
          dataType: "INTEGER",
          name: "views",
        },
        {
          columnType: "METRIC",
          dataType: "INTEGER",
          name: "comments",
        },
        {
          columnType: "METRIC",
          dataType: "INTEGER",
          name: "likes",
        },
        {
          columnType: "METRIC",
          dataType: "INTEGER",
          name: "dislikes",
        },
        {
          columnType: "METRIC",
          dataType: "INTEGER",
          name: "estimatedMinutesWatched",
        },
        {
          columnType: "METRIC",
          dataType: "INTEGER",
          name: "averageViewDuration",
        },
      ],
    },
    youtubeMinutesDay: {
      rows: [
        ["2020-10-17", 0],
        ["2020-10-18", 1],
        ["2020-10-19", 4],
        ["2020-10-20", 0],
        ["2020-10-21", 4],
        ["2020-10-22", 4],
        ["2020-10-23", 1],
        ["2020-10-24", 4],
        ["2020-10-25", 0],
        ["2020-10-26", 1],
        ["2020-10-27", 0],
        ["2020-10-28", 0],
        ["2020-10-29", 0],
        ["2020-10-30", 1],
        ["2020-10-31", 0],
        ["2020-11-01", 1],
        ["2020-11-02", 1],
        ["2020-11-03", 2],
        ["2020-11-04", 5],
        ["2020-11-05", 0],
        ["2020-11-06", 1],
        ["2020-11-07", 0],
        ["2020-11-08", 5],
        ["2020-11-09", 3],
      ],
      columnHeaders: [
        {
          columnType: "DIMENSION",
          dataType: "STRING",
          name: "day",
        },
        {
          columnType: "METRIC",
          dataType: "INTEGER",
          name: "estimatedMinutesWatched",
        },
      ],
    },
    youtubeMinutesCountry: {
      rows: [
        ["IN", 30],
        ["US", 12],
      ],
      columnHeaders: [
        {
          columnType: "DIMENSION",
          dataType: "STRING",
          name: "country",
        },
        {
          columnType: "METRIC",
          dataType: "INTEGER",
          name: "estimatedMinutesWatched",
        },
      ],
    },
    twitter: {
      data: {
        name: "Canonic",
        username: "CanonicHQ",
        profile_image_url:
          "https://pbs.twimg.com/profile_images/1316281577148571653/-12Ans7U_normal.jpg",
        location: "United States",
        description:
          "The lowcode backend to your frontend. Ranked #3 Product of the day on @producthunt #lowcode #nocode #reactjs #graphql #technology #automation #backend",
        public_metrics: {
          followers_count: 394,
          following_count: 641,
          tweet_count: 161,
          listed_count: 25,
        },
      },
    },
  },
};

When we're feeding this data into our components, we need to normalise it so that we can display the data efficiently. To achieve this, we'll create utility functions that will transform this data into a more readable format.

Create a new directory - utils at src/ and a new file inside src/utils/normaliseData.js. Inside normaliseData.js we'll add functions to convert normalise youtube data, twitter data, as well as data for our charts.

export const normaliseTwitterData = (twitter) => {
  if (Object.keys(twitter).length === 0) {
    return { accountInformation: {}, metrics: [] };
  }

  const twitterData = twitter.twitter;
  return {
    accountInformation: {
      title: "Account Information",
      username: `@${twitterData.username}`,
      description: twitterData.description,
      location: twitterData.location,
    },
    metrics: [
      {
        title: "Followers",
        description: twitterData.public_metrics.followers_count,
      },
      {
        title: "Following",
        description: twitterData.public_metrics.following_count,
      },
      {
        title: "Tweets",
        description: twitterData.public_metrics.tweet_count,
      },
      {
        title: "Listed",
        description: twitterData.public_metrics.listed_count,
      },
    ],
  };
};

export const normaliseYoutubeMetrics = (youtubeData) => {
  return (
    youtubeData.columnHeaders.map((column, index) => {
      return {
        title: camelCaseToSentenceCase(column.name),
        description: youtubeData.rows[0][index],
      };
    }) || []
  );
};

export const normaliseEstimatedMinutesWatched = (estimatedMinutes) => {
  const labels =
    estimatedMinutes.rows.map((row) => {
      return row[0];
    }) || [];

  const data = estimatedMinutes.rows.map((row) => {
    return `${row[1]}`;
  });

  return {
    labels,
    datasets: [
      {
        label: "Minutes Watched / Day",
        data,
        fill: true,
        backgroundColor: "rgba(53, 162, 235, 0.5)",
        borderColor: "rgb(53, 162, 235)",
      },
    ],
  };
};

export const normaliseEstimatedMinutesPerCountry = (
  estimatedMinutesCountry
) => {
  const labels =
    estimatedMinutesCountry.rows.map((row) => {
      return row[0];
    }) || [];

  const data = estimatedMinutesCountry.rows.map((row) => {
    return `${row[1]}`;
  });

  return {
    labels,
    datasets: [
      {
        label: "Minutes Watched / Country",
        data,
        fill: true,
        backgroundColor: "rgba(255, 99, 132, 0.5)",
      },
    ],
  };
};

const camelCaseToSentenceCase = (text) => {
  const result = text.replace(/([A-Z])/g, " $1");
  return result.charAt(0).toUpperCase() + result.slice(1);
};

Step 5: Creating Twitter and Youtube components

Let's create our final two components required - Twitter and Youtube. We'll create a card shaped dashboard.
Create a components directory, and add Twitter.js and Youtube.js inside their respective folders. Let's add code!!

src/components/Twitter/Twitter.js

import React from "react";

import { Card, Elevation } from "@blueprintjs/core";
import { normaliseTwitterData } from "../../utils/normaliseData";

const Twitter = (twitter = {}) => {
  const twitterData = normaliseTwitterData(twitter);
  return (
    <div>
      <h5 style={{ fontSize: "large", textAlign: " left" }}>Twitter</h5>
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          justifyContent: "space-between",
          gap: "10px",
        }}
      >
        <Card
          interactive={true}
          elevation={Elevation.TWO}
          style={{
            minWidth: "200px",
            minHeight: "200px",
            maxWidth: "500px",
          }}
        >
          <h5 style={{ fontSize: "large", color: "#394b59" }}>
            {twitterData.accountInformation.title}
          </h5>
          <div style={{ fontSize: "medium" }}>
            <p>{twitterData.accountInformation.username}</p>
            <p>{twitterData.accountInformation.description}</p>
            <p>{twitterData.accountInformation.location}</p>
          </div>
        </Card>
        {twitterData?.metrics.map((card) => {
          return (
            <Card
              interactive={true}
              elevation={Elevation.TWO}
              style={{
                minWidth: "200px",
                minHeight: "200px",
              }}
              key={card.title}
            >
              <h5 style={{ fontSize: "large", color: "#394b59" }}>
                {card.title}
              </h5>
              <p style={{ fontSize: "xx-large" }}>{card.description}</p>
            </Card>
          );
        })}
      </div>
    </div>
  );
};

export default Twitter;

src/components/Twitter/index.js

export { default } from "./Twitter.js";

Similarly, adding to the youtube component.

src/components/Youtube/Youtube.js

import React from "react";

import { Card, Elevation } from "@blueprintjs/core";
import Chart from "chart.js/auto";
import { Line, Bar } from "react-chartjs-2";
import {
  normaliseYoutubeMetrics,
  normaliseEstimatedMinutesWatched,
  normaliseEstimatedMinutesPerCountry,
} from "../../utils/normaliseData";

const Youtube = ({
  youtubeMetrics = {},
  youtubeMinutesDay = {},
  youtubeMinutesCountry = {},
}) => {
  const youtubeData = normaliseYoutubeMetrics(youtubeMetrics);
  const estimatedMinutesWatched =
    normaliseEstimatedMinutesWatched(youtubeMinutesDay);
  const estimatedMinutesWatchedCountry = normaliseEstimatedMinutesPerCountry(
    youtubeMinutesCountry
  );
  return (
    <div>
      <h5 style={{ fontSize: "large", textAlign: " left" }}>Youtube</h5>
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          justifyContent: "space-between",
          gap: "10px",
        }}
      >
        {youtubeData?.map((card) => {
          return (
            <Card
              interactive={true}
              elevation={Elevation.TWO}
              style={{
                minWidth: "200px",
                minHeight: "200px",
              }}
              key={card.title}
            >
              <h5 style={{ fontSize: "large", color: "#394b59" }}>
                {card.title}
              </h5>
              <p style={{ fontSize: "xx-large" }}>{card.description}</p>
            </Card>
          );
        })}
        <Line
          data={estimatedMinutesWatched}
          style={{ maxHeight: "60%", maxWidth: "47%", marginTop: "10px" }}
        />
        <Bar
          data={estimatedMinutesWatchedCountry}
          style={{ maxHeight: "60%", maxWidth: "47%", marginTop: "10px" }}
        />
      </div>
    </div>
  );
};

export default Youtube;

src/components/Youtube/index.js

export { default } from "./Youtube.js";

Let's make a few changes to App.js and add in the dummy data to get this all up and running!

src/App.js

...

import Twitter from "./components/Twitter";
import Youtube from "./components/Youtube";

import { dummyData } from "./dummyData";

...

const App = () => {
  const { metric = {} } = dummyData;

  return (
    <div className="App">
      ...
      {/* Middle Container to hold our Metrics */}
      <div
        style={{ marginLeft: "30px", marginTop: "80px", marginRight: "30px" }}
      >
        <div style={{ marginTop: "50px" }}>
          <Youtube
            youtubeMetrics={metric.youtubeMetrics}
            youtubeMinutesDay={metric.youtubeMinutesDay}
            youtubeMinutesCountry={metric.youtubeMinutesCountry}
          ></Youtube>
        </div>
        <Divider style={{ marginTop: "50px" }}></Divider>
        <div style={{ marginTop: "50px" }}>
          <Twitter twitter={metric.twitter.data}></Twitter>
        </div>
        <Divider style={{ marginTop: "50px" }}></Divider>
      </div>
      {/* Footer */}
      ...
   ...
...

It should look like this

Step 6: Getting the backend APIs

Let's head to Canonic and clone this template to get started. It already has all of the setup required for youtube and twitter integrations. You can either:

Use this sample project to and continue, or
Clone it, replace the Twitter & Youtube credentials with yours and hit Deploy 🚀 . This will then use your data from the services to fetch.

You can see the GraphQL API Endpoint in the Docs Section of your project

Step 7: Configuring GraphQL

We are using ApolloClient to connect with our backend through GraphQL. Head to src/index.js and:

Import the new dependencies
Configure ApolloClient
Wrap our top component with ApolloProvider

...
import { ApolloProvider, InMemoryCache, ApolloClient } from "@apollo/client";

/**
 * Connecting with the backend using apollo client
 */
const client = new ApolloClient({
  // Make sure you update the URI here to point to your backend
  uri: "https://marketing-dashboard.can.canonic.dev/graphql",
  cache: new InMemoryCache({
    addTypename: false,
  }),
});

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Replace the uri with your GraphQL API Endpoint if you cloned and deployed your own project.

Step 8: Configuring GraphQL queries to fetch data

After setting up our client and backend, you can always head to Docs tab to get more information about the API. It has a nice layout that lets you explore docs for your APIs.

Create a javascript file at src/gql/query.js and add the following code.

import { gql } from "@apollo/client";

/**
 * gql query to get customers information
 * The query parameters we got straight from Canonic autogenerated documentation
 */
export const GET_MARKETING_METRICS = gql`
  query {
    metric {
      youtubeMetrics {
        rows
        columnHeaders {
          columnType
          dataType
          name
        }
      }
      youtubeMinutesDay {
        rows
        columnHeaders {
          columnType
          dataType
          name
        }
      }
      youtubeMinutesCountry {
        rows
        columnHeaders {
          columnType
          dataType
          name
        }
      }
      twitter {
        data {
          name
          username
          profile_image_url
          location
          description
          public_metrics {
            followers_count
            following_count
            tweet_count
            listed_count
          }
        }
      }
    }
  }
`;

Step 9: Executing the query

Let's head to App.js for one final time. We'll execute our API and pass the data to our components so that they can display the actual numbers. Since we've already setup the dummy data similar to our API response, this will be just like flipping a switch, and we'll be done.

src/App.js

...
import { Navbar, Alignment, Divider, Spinner } from "@blueprintjs/core";

import { useQuery } from "@apollo/client";
import { GET_MARKETING_METRICS } from "./gql/query";

...

const App = () => {
  const { data = {}, loading } = useQuery(GET_MARKETING_METRICS);
  const { metric = {} } = data.metric ? data : dummyData;

  if (loading)
    return (
      <div style={{ margin: "200px" }}>
        <Spinner></Spinner>
      </div>
    );

  return (
    <div className="App">
      ...
    </div>
  );
};

export default App;

and Voila! We're done with the entire integration. Now if you run your project with yarn start it should show like this:

Live Link

Sample code on GitHub

Conclusion

Hope this guide helped you gain better insight about creating a dashboard that fetches data from Twitter and Youtube, how you can structure it, and how to quickly get a basic dashboard up and running. You can also check out our other guides here.

Join us on discord to discuss or share with our community. Write to us for any support requests at support@canonic.dev. Check out our website to know more about Canonic.

Creating a dashboard for Postgres db with React and Recharts

Kartik Grewal — Mon, 06 Dec 2021 22:21:01 +0000

Dashboards offer us visibility into the data and provides us with a holistic view of everything that's happening with that product or field of interest.

In this tutorial, we'll build a dashboard on top of postgresSQL database. This is a simple dashboard showing a view of projects and users stored in the database. We'll use React for frontend, semantic-ui for UI library, Canonic for creating APIs, and to add some graphics we'll use recharts library.

We're looking to create something like this:

Since this is a guide on building dashboard on postgres database, make sure you have one ready.

Let's dive into it! 🌊

Step 1: Kicking things off with CRA

We start by creating a new project with create-react-app



npx create-react-app postgres-dashboard

This will create a basic react project for us. Let's also install semantic-ui-react for our styling and basic UI components.



yarn add semantic-ui-react semantic-ui-css

Step 2: Creating our Dashboard Components

We'll divide our dashboard into two parts:

Top level stats & graph displayed in the upper half - named - DashboardGrid
Table displayed in the lower half - named - DashboardTable

Create both the components inside a components folder in src directory. In each folder, we'll create three files - one for the react code, one for the css, and one for exporting the component.

Let's start by creating DashboardGrid component.

Dashboard Grid

We create 4 boxes and add styles - and dummy data for now.

src/components/DashboardGrid/DashboardGrid.js



import React from "react";
import { Card, Statistic } from "semantic-ui-react";

import "./DashboardGrid.css";

const DASHBOARD_BOXES = [
  {
    title: "Total Users",
    className: "purple",
  },
  {
    title: "Total Projects",
    className: "green",
  },
  {
    title: "Projects Created",
  },
  {
    title: "Projects Completed",
  },
];

function DashboardGrid() {
  return (
    <div className="dashboardGrid">
      <div className="dashboardGrid-boxes">
        {DASHBOARD_BOXES.map((box, i) => (
          <Card className="dashboardGrid-boxes-item" centered raised>
            <Statistic
              className={box.className ? box.className : ""}
              as="h4"
              label={box.title}
              value="89"
            />
          </Card>
        ))}
      </div>
      <div>
        {/** We'll add the chat here later */}
      </div>
    </div>
  );
}

export default DashboardGrid;

src/components/DashboardGrid/DashboardGrid.css



.dashboardGrid {
  display: flex;
  justify-content: space-between;
}

.dashboardGrid-boxes {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.dashboardGrid-boxes-item {
  text-align: center;
  border: 2px solid #9e9e9e;
  border-radius: 4px;
  padding: 0 30px;
}

.dashboardGrid-boxes-item .value {
  font-size: 32px;
}

.dashboardGrid-boxes-item .label {
  margin-top: 6px;
  font-weight: 400;
}

.dashboardGrid-boxes-item .purple .value {
  color: #8f8cda;
}

.dashboardGrid-boxes-item .green .value {
  color: #8fcfa7;
}

src/components/DashboardGrid/index.js



export { default } from "./DashboardGrid";

Dashboard Table

Similar to DashboardGrid component, we create basic table structure and respective styling - DashboardTable.

src/components/DashboardTable/DashboardTable.js



import React from "react";
import { Table } from "semantic-ui-react";

import "./DashboardTable.css";

const TABLE_DATA = [
  {
    name: "Lorem Ipsum",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    owner: "John Doe",
    status: "in progress",
  },
];

function DashboardTable() {
  return (
    <div className="dashboardTable">
      <Table celled padded>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Name</Table.HeaderCell>
            <Table.HeaderCell>Description</Table.HeaderCell>
            <Table.HeaderCell>Owner</Table.HeaderCell>
            <Table.HeaderCell>Status</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {TABLE_DATA.map((item, i) => (
            <Table.Row>
              <Table.Cell>
                <div>{item.name}</div>
              </Table.Cell>
              <Table.Cell>
                <div>{item.description}</div>
              </Table.Cell>
              <Table.Cell>
                <div>{item.owner}</div>
              </Table.Cell>
              <Table.Cell>
                <div>{item.status}</div>
              </Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    </div>
  );
}

export default DashboardTable;

src/components/DashboardTable/DashboardTable.css



.dashboardTable {
  margin-top: 60px;
}

src/components/DashboardTable/index.js



export { default } from "./DashboardTable";

Step 3: Hooking them up to App.js

Let's add both of our components to App.js and see how our design looks.

src/App.js



import React from "react";
import { Header } from "semantic-ui-react";

import DashboardGrid from "./components/DashboardGrid";
import DashboardTable from "./components/DashboardTable";

import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Header as="h3">Analytics Dashboard connected with Postgres</Header>
      </header>
      <div className="App-main">
        <DashboardGrid />
        <DashboardTable />
      </div>
    </div>
  );
}

export default App;

src/App.css



.App-header {
  padding: 0 16px;
  text-align: center;
}

.App-main {
  padding: 0 16px;
  max-width: 1160px;
  margin: 60px auto 0;
}

Let's head to the terminal, and run yarn start to check how our dashboard looks so far. It should look something like this 👇

Step 4: Building APIs on top of PostgresSQL

Now that we're done with the basic skeleton of our dashboard, let's move on to building APIs on top of postgresSQL database. Generally, there's two route we can go for this -

Build a nodejs server connecting with Postgres database
Use a developer tool that let's us create APIs quickly

Keeping this guide short, let's move ahead with the second option. We head to Canonic to create a new project for our backend.

Create new project → Select "link" → Select Postgres and add Postgres Url - looking something like - postgres://......

For this guide purposes, you can directly clone this project and get started - if you choose this route — skip the rest of this step and skip Step 6.

It'll end up creating APIs linked to our database and deploy those APIs on a URL for us. You can also see the structure of our tables in the postgres database.

In our current setup, we have two table - projects and users. We get CRUD APIs for both the tables. Docs tab should have the documentation.

Step 5: Integrating DashboardTable API

Now that we have our APIs, let's integrate it in DashboardTable component. We're using axios library that you can install by yarn add axios.

We modify the DashboardTable.js file to call our API and get the data.



...
import axios from "axios";
import { Table, Loader, Dimmer } from "semantic-ui-react";

import "./DashboardTable.css";

// get this URL from your project on Canonic
const GET_PROJECTS_URL =
  "https://postgres-dashboard-7fc.can.canonic.dev/api/projects";

function DashboardTable() {
  const [loading, setLoading] = React.useState(false);
  const [projects, setProjects] = React.useState([]);

  React.useEffect(() => {
    setLoading(true);
    axios(GET_PROJECTS_URL).then(({ data }) => {
      setProjects(data.data || []);
      setLoading(false);
    });
  }, []);

  return (
    <div className="dashboardTable-wrapper">
      ...
        <Table.Body>
          {projects.map((item, i) => (
            <Table.Row>
              ...
                            // change item.owner to below
              <Table.Cell width={1}>
                <div>{item.users.name}</div>
              </Table.Cell>
              ...
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    </div>
  );
}

export default DashboardTable;

Step 6: Creating custom APIs for dashboard stats

Now, as we just have our basic CRUD APIs for now, we'll have to create custom GET API for the metric to get displayed in our boxes and for the graph.

The metrics required are - total users, total projects, number of projects in progress, number of projects completed, and a distribution of new users/projects per day.

Let's head back to our project on Canonic. Go to the API tab, and create a new API in projects table to get all these metrics. Fill in the top level details - title, path.

Then add in the following in the outputs section.

Move to the code section from the top of the properties panel, and add the following code.



module.exports = async function endpoint(params, ctx) {
  const [users, projects] = await Promise.all([User.find({}),Project.find({})]);
  return {
    users: users.map((user) => user.created_at),
    projects: projects.map((project) => project.created_at),
    usersCount: users.length,
    projectsCount: projects.length,
    inProgressCount: projects.filter(project => project.status === 'in progress').length,
    completedCount: projects.filter(project => project.status === 'completed').length
  }
}

Deploy the project again, and our API should be ready to consume. Find the link and request parameters in the docs tab.

Step 7: Integrating DashboardGrid API

We integrate our newly built API in the DashboardGrid component.



...
import axios from "axios";
import { Card, Statistic } from "semantic-ui-react";

import "./DashboardGrid.css";

const DASHBOARD_API_URL =
  "https://postgres-dashboard-7fc.can.canonic.dev/api/projects/dashboard";

function DashboardGrid() {
  const [dashboardCount, setDashboardCount] = React.useState({});

  React.useEffect(() => {
    axios(DASHBOARD_API_URL).then(({ data }) => setDashboardCount(data.data));
  }, []);

  const DASHBOARD_BOXES = [
    {
      title: "Total Users",
      className: "purple",
      value: dashboardCount?.usersCount,
    },
    {
      title: "Total Projects",
      className: "green",
      value: dashboardCount?.projectsCount,
    },
    {
      title: "In Progress",
      value: dashboardCount?.inProgressCount,
    },
    {
      title: "Completed",
      value: dashboardCount?.completedCount,
    },
  ];

  return (
    <div className="dashboardGrid">
      ...
            <Statistic
              ...
              value={box.value ? box.value : "-"}
            />
          </Card>
        ))}
      ...
    </div>
  );
}

export default DashboardGrid;

BONUS: Adding Recharts for the graph!

Step 8: Install Recharts

Adding recharts like other packages is easy with yarn.



yarn add recharts

Step 9: Modify DashboardGrid to add graph

Let's modify the code of DashboardGrid and add in our graph. We'll use AreaChart for our purposes.



...
import {
  AreaChart,
  CartesianGrid,
  XAxis,
  YAxis,
  Tooltip,
  Area,
} from "recharts";

...

function DashboardGrid() {
  ...

  const { projects = [], users = [] } = dashboardCount || {};

    // We're manually making displaying the trend for this week.
  // You can always make it dynamic by using Date.now().
  // Let me know in the comments if you want me to cover this part.
  const PREVIOUS_WEEK_DATA = [
    {
      name: "30th Nov",
      projects: projects.filter(
        (created_at) =>
                // for now, we're using timestammps of the day to compare which 
                // data point lies on which day
          created_at >= 1638230400000 && created_at < 1638316799000
      ).length,
      users: users.filter(
        (created_at) =>
          created_at >= 1638230400000 && created_at < 1638316799000
      ).length,
    },
    {
      name: "1st Dec",
      projects: projects.filter(
        (created_at) =>
          created_at >= 1638316800000 && created_at < 1638403199000
      ).length,
      users: users.filter(
        (created_at) =>
          created_at >= 1638316800000 && created_at < 1638403199000
      ).length,
    },
    {
      name: "2nd Dec",
      projects: projects.filter(
        (created_at) =>
          created_at >= 1638403200000 && created_at < 1638489599000
      ).length,
      users: users.filter(
        (created_at) =>
          created_at >= 1638403200000 && created_at < 1638489599000
      ).length,
    },
    {
      name: "3rd Dec",
      projects: projects.filter(
        (created_at) =>
          created_at >= 1638489600000 && created_at < 1638575999000
      ).length,
      users: users.filter(
        (created_at) =>
          created_at >= 1638489600000 && created_at < 1638575999000
      ).length,
    },
    {
      name: "4th Dec",
      projects: projects.filter(
        (created_at) =>
          created_at >= 1638576000000 && created_at < 1638662399000
      ).length,
      users: users.filter(
        (created_at) =>
          created_at >= 1638576000000 && created_at < 1638662399000
      ).length,
    },
    {
      name: "5th Dec",
      projects: projects.filter(
        (created_at) =>
          created_at >= 1638662400000 && created_at < 1638748799000
      ).length,
      users: users.filter(
        (created_at) =>
          created_at >= 1638662400000 && created_at < 1638748799000
      ).length,
    },
  ];

  return (
    <div className="dashboardGrid">
      <div className="dashboardGrid-boxes">
        ...
      </div>
      <div>
        <div className="dashboardGrid-chart">
          New users/projects trend per day
        </div>
        <AreaChart
          width={700}
          height={250}
          data={PREVIOUS_WEEK_DATA}
          margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
        >
          <defs>
            <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8} />
              <stop offset="95%" stopColor="#8884d8" stopOpacity={0} />
            </linearGradient>
            <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8} />
              <stop offset="95%" stopColor="#82ca9d" stopOpacity={0} />
            </linearGradient>
          </defs>
          <XAxis dataKey="name" />
          <YAxis />
          <CartesianGrid strokeDasharray="3 3" />
          <Tooltip />
          <Area
            name="Projects"
            type="monotone"
            dataKey="projects"
            stroke="#8884d8"
            fillOpacity={1}
            fill="url(#colorUv)"
          />
          <Area
            name="Users"
            type="monotone"
            dataKey="users"
            stroke="#82ca9d"
            fillOpacity={1}
            fill="url(#colorPv)"
          />
        </AreaChart>
      </div>
    </div>
  );
}

export default DashboardGrid;

And finally! After all the back and forth, let's run the app and see what it looks like! It should match the screenshot at the begning.

Congratulations! You've successfuly built a dashboard! 🎉

Live Demo
Sample Code on github

Conclusion

Hope this guide helped you gain better insight about creating a dashboard in react, how you can structure it, and how to quickly get a basic dashboard up and running. You can also check out our other guides here.

Join us on discord to discuss or share with our community. Write to us for any support requests at support@canonic.dev. Check out our website to know more about Canonic.

How to add a notification banner or popup to your website

Kartik Grewal — Thu, 02 Dec 2021 20:02:04 +0000

A product's ability to capture the user's attention is crucial, and dynamic prompts/notification is one such efficient way to engage users.✨

It allows you to communicate with users by directing their attention to the navigation bar and can be used for a variety of purposes, such as for announcing business news, showing off the best features, generating leads, and so on.

This article will guide you step by step to build your own Dynamic Prompts/Notifications bar. 👩‍💻

We used React for the frontend, Canonic for the Part backend.

Let's begin! 📌

📝Step 1: Create-react-app

Lets start with creating a new react project - Use create-react-app

npx create-react-app dynamic-notifications

Next, to create a basic skeleton, just edit src/App.js

import React from "react";
import "./App.css";

function App() {
  return (
    <div className="app">
      <section className="app-body">
        <h3>Dynamic popups and notifications</h3>
        <p>These notifications come from the data stored on your Canonic app</p>
      </section>
    </div>
  );
}

export default App;

✨Step 2: Add some styling

Once you're done with the basic skeleton, it's time to add some styling to it. To add the styling use - Edit src/App.css

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h3 {
  font-size: calc(10px + 2vmin);
  margin-bottom: 8px;
}

.app {
  text-align: center;
}

.app-body {
  background-color: #020d57;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  overflow: hidden;
}

.app-body p {
  font-size: calc(2px + 2vmin);
  margin: 0;
  opacity: 0.5;
}

After completing the steps above, run npm start and you should have something similar to this👇

🔔Step 3: Add the Notification details

Now it's time to add the notification and some basic styles, add the HTML to src/App.js

...
<div className="app">
    **<header className="app-notification"> 🚀 This is a notification </header>**
    <section className="app-body">
...

✨Step 4: Make it look nice!

Let's add some styling to app, edit src/App.css


...

.app-notification {
  position: absolute;
  background-color: #4760ff;
  padding: 8px;
  width: 100%;
  color: #fff;
}

.app-notification p {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

...

Once done with the stated steps, this is how it should look: 👇

👩‍🔧Step 5: Let's make it dynamic

Let's move ahead and make it dynamic.

Here, we want to show a different popup based on certain criteria. However, if we do it on the front end, the logic can easily be exposed. Thus, let’s rather create an API where the logic is computed on the backend, using Canonic.

Clone this project and head on to the CMS to create a few notifications.

🚀Step 6: Create custom API

Once done, head on to the API section and create an API to return random notifications.

Put the below code into the code section to return random notifications from the database.

module.exports = async function getRandom() {
  const count = await Notification.count();
  const random = Math.floor(Math.random() * count);
  return Notification.findOne().skip(random);
}

🧪Step 7: Let's test it!

In order to do the testing, navigate to the Docs section and select the newly created endpoint. Click Open In Playground and hit the play button. The data should now appear.

⚒Step 8: Time to integrate backend

We can easily integrate it by modifying App.js so that we fetch the data.

We'll use Axios to make the API call, install it using -npm install axios.

Make sure to replace "YOUR_API_URL_HERE" with the URL for your endpoint. You should be able to get that from the docs section.

...
import axios from "axios"
...
function App() {
  const [notification, setNotification] = React.useState();

  const getNotification = React.useCallback(
    () =>
      axios("YOUR_API_URL_HERE").then(({ data }) => data.data),
    []
  );

  React.useEffect(() => {
    getNotification().then(setNotification);
  }, [getNotification, setNotification]);

    ...

    <div className="app">
        {notification && (
      <header
        className="app-notification"
        dangerouslySetInnerHTML={{ __html: notification.text }}
      />
    )}
    ...

🔔Step 9: Refresh to get random notification

After the successful implementation of all the above states steps, you will get a random notification each time you refresh.

🎉 Voila!

You have successfully made your one dynamic prompt. 💃🕺

Check out the live demo here and sample code on github here.

Conclusion

Hope this guide helps you. You can also check out our other guides here.

Join us on discord to discuss or share with our community. Write to us for any support requests at support@canonic.dev. Check out our website to know more about Canonic.

How to build a customer-facing roadmap with React

Kartik Grewal — Mon, 29 Nov 2021 21:01:12 +0000

A product roadmap summarizes how a product strategy leads to the actual implementation and charts out your product's vision and direction.

This article will guide you through each step you need to build a roadmap tool using React for your SaaS startup.

Let's get started 🚀

📩 Step 1: Installing React
We'll start by creating a new react project using create-react-app.



npx create-react-app roadmap

📝Step 2: Create a roadmap component

We'll create a component - Roadmap - that'll contain our display and API logic - src/components/Roadmap.

Create respective Roadmap.js, index.js and Roadmap.css files. Add following code in respective order.



import React from "react";

import "./Roadmap.css";

function Roadmap() {
  const columnMap = [
    {
      title: "\"Exploring\","
      tickets: [],
    },
    {
      title: "\"In Progress\","
      tickets: [],
    },
    {
      title: "\"Done\","
      tickets: [],
    },
    {
      title: "\"Leaving it for now\","
      tickets: [],
    },
  ];

  return (
    <div className="roadmap">
      {columnMap.map((column, i) => (
        <div className="roadmap-column" key={`${column.title}-${i}`}>
          <div className="roadmap-column-heading">{column.title}</div>
          <div className="roadmap-cards">
            {column.tickets.map((t, i) => (
              <div key={`exploring-${i}`} className="roadmap-cards-item">
                <div className="roadmap-cards-item-heading">{t.title}</div>
                <div
                  className="roadmap-cards-item-content"
                  dangerouslySetInnerHTML={{ __html: t.description }}
                />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  x="0px"
                  y="0px"
                  viewBox="0 0 100 125"
                  style={{
                    enableBackground: "new 0 0 100 100",
                    maxWidth: "18px",
                    cursor: "pointer",
                  }}
                >
                  <g>
                    <g>
                      <path d="M81.7,40.4H64.6l3.6-17.9c0.5-2.5,0.1-5-1.2-7.1l0,0c-1.5-2.5-4.9-3-7-1.1L29.8,38.7c-1.2,1.1-1.8,2.6-1.8,4.1v33.1    c0,2.4,1.5,4.5,3.7,5.3l12.9,3.4c3.1,1.1,6.4,1.6,9.7,1.6h18c6.6,0,12.5-4.2,14.7-10.5l6.9-20c0.3-0.9,0.4-1.9,0.4-2.9v0    C94.3,46,88.7,40.4,81.7,40.4z" />
                      <path d="M22.2,40.4H7.8c-1.5,0-2.8,1.2-2.8,2.8v34c0,1.5,1.2,2.7,2.7,2.8h14.5c1.5,0,2.8-1.2,2.8-2.8v-34    C25,41.6,23.7,40.4,22.2,40.4z" />
                    </g>
                  </g>
                </svg>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

export default Roadmap;



export { default } from "./Roadmap";



.roadmap {
  display: flex;
  width: 100%;
  max-width: 900px;
  min-height: 400px;
}

.roadmap > div:not(:last-child) {
  margin-right: 16px;
}

.roadmap-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #eef0fc;
  border-radius: 4px;
  padding: 6px 10px;
}

.roadmap-column-heading {
  color: #4d5273;
  font-size: 14px;
  font-weight: 500;
  padding: 10px;
  margin-bottom: 10px;
  text-align: center;
}

.roadmap-cards {
  display: flex;
  flex-direction: column;
}

.roadmap-cards > div:not(:last-child) {
  margin-bottom: 12px;
}

.roadmap-cards-item {
  background: #fff;
  border-radius: 4px;
  padding: 12px;
  box-shadow: 0 1px 0 #091e4240;
}
.roadmap-cards-item-heading {
  font-size: 14px;
  font-weight: 500;
}

.roadmap-cards-item-upvote {
  display: flex;
  font-size: 12px;
  line-height: 18px;
}

.roadmap-cards-item-upvote-count {
  margin-left: 6px;
}

.roadmap-cards-item p {
  font-size: 12px;
  margin-top: 7px;
  line-height: 1.5;
}

svg.not-filled path {
  fill: #fff;
  stroke: #000;
  stroke-width: 8px;
}

@media (max-width: 600px) {
  .roadmap {
    flex-direction: column;
  }

  .roadmap > div:not(:last-child) {
    margin-right: 0;
    margin-bottom: 26px;
  }
}

Now that our display component is created, let's app it to App.js and see how our component looks.

👨‍🔧Step 3: Add component to App
We import our component in App.js and remove all the unnecessary files and code. Our code - App.js, App.css and component should look like below.

Add following code to App.js and App.css respectively.



import React from "react";

import Roadmap from "./components/Roadmap";
import "./App.css";

function App() {
  return (
    <div>
      <div className="wrapper-heading">Roadmap</div>
      <Roadmap />
    </div>
  );
}

export default App;



@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");

html,
body {
  font-family: "Roboto", sans-serif;
}

.wrapper-heading {
  padding: 16px;
  text-align: center;
  margin-bottom: 18px;
  max-width: 900px;
  color: #4d5273;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.6px;
}

Now run yarn start in root of our project and our component should look like this.

Now it's time to integrate this with a backend to fetch our roadmap tickets and display them. 👩‍🔧

👩‍💻Step 4: Get your APIs

Follow the below-stated pointers and get your APIs!

Cloning the sample project - To get the APIs, you can visit this link and click on the top right button to clone the project.

Deploy and get the backend URL - Having cloned the project, it's now time to deploy it so that we can get our APIs and backend hosted. Open the cloned project if you are not already there and you’ll see a Deploy button on the top right.

Click Deploy → Select an environment → Hit deploy.

Upon completing the project, it will provide an API URL.

📝Checking the documentation
Before we get started with backend integration, let's move to the documentation by clicking on docs on the left sidebar so that we get a better understanding of the APIs involved.

Backend integration with GraphQL 👇

Once you have your APIs ready, we can start by installing graphql.

📩Step 5: Install GraphQL packages
We will need two packages for this step since we'll be using graphql to pull our data from the backend - Apollo Client and GraphQL.



yarn add @apollo/client graphql

⚒Step 6: Configure graphql

Configure the Apollo Client in the project directory, inside App.js so it would communicate with the backend.

Be sure to replace the uri with the one you'll get from Canonic.



import React from "react";
import { ApolloProvider, InMemoryCache, ApolloClient } from "@apollo/client";

import Roadmap from "./components/Roadmap";

import "./App.css";

/**
 * Connecting with the backend using apollo client
 */
const client = new ApolloClient({
  // make sure you update the URI here to point to your backend
  uri: "https://roadmap-35a418.can.canonic.dev/graphql",
  cache: new InMemoryCache(),
});

function App() {
  return (
    <ApolloProvider client={client}>
      <div>
        <div className="wrapper-heading">Roadmap</div>
        <Roadmap />
      </div>
    </ApolloProvider>
  );
}

export default App;

👨‍🔧Step 7: Querying the data

We store our graphql queries inside a directory src/gql. Inside which we create a file and name it queries.js.

This is where we will write the graphql queries for querying the data.



import { gql } from "@apollo/client";

/**
 * gql query to get roadmap
 * The query parameters we got straight from Canonic autogenerated documentation
 */
export const GET_ROADMAP = gql`
  query {
    roadmaps {
      _id
      title
      description
      upvotes {
        count
      }
      stage {
        value
      }
    }
  }
`;

The next step is Querying data and displaying our roadmap tickets. We'll execute the graphql query in the Roadmap component and display the tickets fetched according to their status.

We modify Roadmap.js to achieve the above mentioned logic and get the tickets.



import React from "react";
import { useQuery } from "@apollo/client";

import { GET_ROADMAP } from "../../gql/queries";

import "./Roadmap.css";

function Roadmap() {
  const { data = {}, loading } = useQuery(GET_ROADMAP);

  const { roadmaps = [] } = data;

  // dividing tickets into their respective categories
  const exploringTickets = roadmaps.filter(
    (t) => t.stage.value === "EXPLORING"
  );
  const inProgressTickets = roadmaps.filter(
    (t) => t.stage.value === "IN_PROGRESS"
  );
  const doneTickets = roadmaps.filter((t) => t.stage.value === "DONE");
  const leavingItForNowTickets = roadmaps.filter(
    (t) => t.stage.value === "LEAVING_IT_FOR_NOW"
  );

  const columnMap = [
    {
      title: "Exploring",
      tickets: exploringTickets,
    },
    {
      title: "In Progress",
      tickets: inProgressTickets,
    },
    {
      title: "Done",
      tickets: doneTickets,
    },
    {
      title: "Leaving it for now",
      tickets: leavingItForNowTickets,
    },
  ];

  return (
    <div className="roadmap">
      {loading ? (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          style={{
            margin: "auto",
            background: "none",
            display: "block",
            shapeRendering: "auto",
            maxWidth: "30px",
            marginTop: "-20px",
          }}
          width="200px"
          height="200px"
          viewBox="0 0 100 100"
          preserveAspectRatio="xMidYMid"
        >
          <circle
            cx="50"
            cy="50"
            fill="none"
            stroke="#4d5273"
            strokeWidth="10"
            r="35"
            strokeDasharray="164.93361431346415 56.97787143782138"
          >
            <animateTransform
              attributeName="transform"
              type="rotate"
              repeatCount="indefinite"
              dur="1s"
              values="0 50 50;360 50 50"
              keyTimes="0;1"
            ></animateTransform>
          </circle>
        </svg>
      ) : (
        <>
          {columnMap.map((column, i) => (
            <div className="roadmap-column" key={`${column.title}-${i}`}>
              <div className="roadmap-column-heading">{column.title}</div>
              <div className="roadmap-cards">
                {column.tickets.map((t, i) => (
                  <div key={`exploring-${i}`} className="roadmap-cards-item">
                    <div className="roadmap-cards-item-heading">{t.title}</div>
                    <div
                      className="roadmap-cards-item-content"
                      dangerouslySetInnerHTML={{ __html: t.description }}
                    />
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      x="0px"
                      y="0px"
                      viewBox="0 0 100 125"
                      style={{
                        enableBackground: "new 0 0 100 100",
                        maxWidth: "18px",
                        cursor: "pointer",
                      }}
                    >
                      <g>
                        <g>
                          <path d="M81.7,40.4H64.6l3.6-17.9c0.5-2.5,0.1-5-1.2-7.1l0,0c-1.5-2.5-4.9-3-7-1.1L29.8,38.7c-1.2,1.1-1.8,2.6-1.8,4.1v33.1    c0,2.4,1.5,4.5,3.7,5.3l12.9,3.4c3.1,1.1,6.4,1.6,9.7,1.6h18c6.6,0,12.5-4.2,14.7-10.5l6.9-20c0.3-0.9,0.4-1.9,0.4-2.9v0    C94.3,46,88.7,40.4,81.7,40.4z" />
                          <path d="M22.2,40.4H7.8c-1.5,0-2.8,1.2-2.8,2.8v34c0,1.5,1.2,2.7,2.7,2.8h14.5c1.5,0,2.8-1.2,2.8-2.8v-34    C25,41.6,23.7,40.4,22.2,40.4z" />
                        </g>
                      </g>
                    </svg>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </>
      )}
    </div>
  );
}

export default Roadmap;

🙌BONUS: Adding upvote to Roadmap tickets

As a bonus, let's add a feature for the users to upvote the tickets. By doing so, we can gain a deeper understanding of what our users are thinking and what they expect from us. Find out more about the benefits of having a public roadmap here.

Step 8: Mutating Data

We create a new file to store our mutations in src/gql/mutations.js. Taking a reference from auto-generated documentation, we can specify the mutation parameters.



import { gql } from "@apollo/client";

/**
 * gql query to get roadmap
 * The query parameters we got straight from Canonic autogenerated documentation
 */
export const UPVOTE = gql`
  mutation Upvote($ticketId: ID!) {
    createUpvote(input: { ticket: $ticketId }) {
      _id
    }
  }
`;

Step 9: Add upvote logic in the Component

We can now connect our mutation in Roadmap component. In this case, we will save the upvote not only on the backend but also in the local storage since we will not be creating a user on the backend and we want to retain the upvote information.

We make the following changes in Roadmap.js and add the mutation logic. Our final file looks like below.



import React from "react";
import { useQuery, useMutation } from "@apollo/client";

import { GET_ROADMAP } from "../../gql/queries";
import { UPVOTE } from "../../gql/mutations";

import "./Roadmap.css";

function Roadmap() {
  const { data = {}, loading } = useQuery(GET_ROADMAP);
  const [upvoteTicket] = useMutation(UPVOTE, {
    context: {
      headers: {
        Authorization:
          "617bdcfc530d0d0009c04985-c2ca6caf-485c-4bc1-8ac8-4b9defe2707e",
      },
    },
  });

  const { roadmaps = [] } = data;

  const [upvotes, setUpvotes] = React.useState([]);

  // dividing tickets into their respective categories
  const exploringTickets = roadmaps.filter(
    (t) => t.stage.value === "EXPLORING"
  );
  const inProgressTickets = roadmaps.filter(
    (t) => t.stage.value === "IN_PROGRESS"
  );
  const doneTickets = roadmaps.filter((t) => t.stage.value === "DONE");
  const leavingItForNowTickets = roadmaps.filter(
    (t) => t.stage.value === "LEAVING_IT_FOR_NOW"
  );

  const columnMap = [
    {
      title: "Exploring",
      tickets: exploringTickets,
    },
    {
      title: "In Progress",
      tickets: inProgressTickets,
    },
    {
      title: "Done",
      tickets: doneTickets,
    },
    {
      title: "Leaving it for now",
      tickets: leavingItForNowTickets,
    },
  ];

  const handleUpvoteTicket = React.useCallback(
    async (id) => {
      setUpvotes((upvotes) => [...upvotes, id]);
      localStorage.setItem(`${id}`, true);

      upvoteTicket({ variables: { ticketId: id } });
    },
    [upvoteTicket]
  );

  const isTicketUpvoted = React.useCallback(
    (id) => !!upvotes.find((t) => t === id) || localStorage.getItem(id),
    [upvotes]
  );

  return (
    <div className="roadmap">
      {loading ? (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          style={{
            margin: "auto",
            background: "none",
            display: "block",
            shapeRendering: "auto",
            maxWidth: "30px",
            marginTop: "-20px",
          }}
          width="200px"
          height="200px"
          viewBox="0 0 100 100"
          preserveAspectRatio="xMidYMid"
        >
          <circle
            cx="50"
            cy="50"
            fill="none"
            stroke="#4d5273"
            strokeWidth="10"
            r="35"
            strokeDasharray="164.93361431346415 56.97787143782138"
          >
            <animateTransform
              attributeName="transform"
              type="rotate"
              repeatCount="indefinite"
              dur="1s"
              values="0 50 50;360 50 50"
              keyTimes="0;1"
            ></animateTransform>
          </circle>
        </svg>
      ) : (
        <>
          {columnMap.map((column, i) => (
            <div className="roadmap-column" key={`${column.title}-${i}`}>
              <div className="roadmap-column-heading">{column.title}</div>
              <div className="roadmap-cards">
                {column.tickets.map((t, i) => (
                  <div key={`exploring-${i}`} className="roadmap-cards-item">
                    <div className="roadmap-cards-item-heading">{t.title}</div>
                    <div
                      className="roadmap-cards-item-content"
                      dangerouslySetInnerHTML={{ __html: t.description }}
                    />
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      x="0px"
                      y="0px"
                      viewBox="0 0 100 125"
                      style={{
                        enableBackground: "new 0 0 100 100",
                        maxWidth: "18px",
                        cursor: "pointer",
                      }}
                      className={!isTicketUpvoted(t._id) && "not-filled"}
                      onClick={() => handleUpvoteTicket(t._id)}
                    >
                      <g>
                        <g>
                          <path d="M81.7,40.4H64.6l3.6-17.9c0.5-2.5,0.1-5-1.2-7.1l0,0c-1.5-2.5-4.9-3-7-1.1L29.8,38.7c-1.2,1.1-1.8,2.6-1.8,4.1v33.1    c0,2.4,1.5,4.5,3.7,5.3l12.9,3.4c3.1,1.1,6.4,1.6,9.7,1.6h18c6.6,0,12.5-4.2,14.7-10.5l6.9-20c0.3-0.9,0.4-1.9,0.4-2.9v0    C94.3,46,88.7,40.4,81.7,40.4z" />
                          <path d="M22.2,40.4H7.8c-1.5,0-2.8,1.2-2.8,2.8v34c0,1.5,1.2,2.7,2.7,2.8h14.5c1.5,0,2.8-1.2,2.8-2.8v-34    C25,41.6,23.7,40.4,22.2,40.4z" />
                        </g>
                      </g>
                    </svg>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </>
      )}
    </div>
  );
}

export default Roadmap;

Note be sure to create access_tokens for your canonic APIs for mutating the data. Read more about it here

And that's it, you've built the roadmap! 🎉

Conclusion:

Roadmaps for your products offer several advantages, including a better understanding of the strategy and vision, guidance for executing the strategy, facilitation of discussion and opinions, etc.

Follow this step to step guide and build Roadmaps for your own SaaS startups.

Check out the live demo link here

and you can checkout the sample code here

You can also check out our other guides here.

Join us on discord to discuss or share with our community. Write to us for any support requests at support@canonic.dev. Check out our website to know more about Canonic. Let us know in the comments below what you think about the guide. Thank you!

Creating an Airbnb clone

Kartik Grewal — Tue, 20 Jul 2021 10:42:36 +0000

Airbnb is one of the most successful products and is widely used across the world. It fits under the marketplace category and therefore we decided to recreate it on Canonic. The goal was simple:

Allow users to sign up/log in
Show a list of various Airbnb's available
Show details of the listing
Allow users to make a reservation
Allow users to review a listing
Allow hosts (users who make the listing) to review the guests (users who book the listing)
Allow users to create a wishlist

We'll show how easy, fast and flexible it is to build your production-ready backend in less than 25 minutes. What are we waiting for then! Go to app.canonic.dev and Log In. If you don't have an account, Signup! It's free to use under very generous limits! After you log in, you'll come straight to the dashboard.

Creating a Project

Create a New Project *by clicking on the *+ Create New button on the top.

After you click, you'll be presented with the options to name your project, select which category it belongs to, etc.

After filling in the details, click Next. It'll present you with 3 options for the Database Configurations. Since we are making a new project from the start, we'll select the first option Create, where canonic will automatically provision a database for your project!

Hit Create, and your new project is created! You can find more about creating a project here.

Creating a backend involves three main parts:

Defining your Model: How the data structure is gonna look like for your database, your schema!
Feeding Data: After you define the structure/model of your database, entering data into it.
Fetching Data: Getting the data over REST or GraphQL APIs for your frontend to consume and show!
Defining business logic:
Integrating with 3rd party applications:

I - Defining your Model

Now as per our requirements, we have 5 main points of information that we need to make the backend for our Airbnb marketplace:

User: Our frontend will need to fetch the information of the user who host or book
Reservations: Our frontend will need to fetch all the bookings made via Airbnb
Listing: Our frontend will need to fetch all the various places available on Airbnb for users to book
Listing Review: Our frontend will need to fetch the review of the guest who made a reservation at a listing
Guest Review: Our frontend will need to fetch the review of the user who books their listing
Wishlist - Our frontend will need to fetch the Wishlist created by the users

In database terms, we can think of them as tables that will hold all the information related to them respectively. Let's start defining them! Once you fill in all the information, you'll see an option to create a table:

Enter the name: User. We'll choose the type of the table as Identity since we want to allow users to login via Facebook, Google, etc, and store all user information in one place. Hit Create!

Click on the + Field option to add attributes to our table. A panel will come up from below, where you can set, what type the field should be, its name, etc. Different types are available for different needs like: TEXT, NUMBER, DATE, IMAGE, etc. You can see some system-generated fields automatically for you! + Fieldset option allows you to group certain fields for better structuring of the CMS.

We'll define 4 additional attributes to our table, the rest are pre-created and available on Canonic as system fields: You can also set default values for your fields, setup validations if you like, etc.

Phone Number of the ticket - TEXT
Email Verification of the user - FIELDSET
Date of email verification - DATE
Time of email verification - TIME

Here is how to create a TEXT field type under the name Phone Number.

Create Email Verification as a FIELD SET and then add the Date and Time fields as DATE and TIME field types. Your graph should look like this:

Next, you can click on the + Table option and create a table called Listing and set table type as a LIST

Listed below are the attributes required apart from System Fields pre available in the Listing Table.

Title of the Listing. - TEXT
Hosted By - LINK (USER Table)
Type of Listing - PICKER
Total Occupancy possible at the Listing - TEXT
No. of bedrooms available at the Listing - TEXT
No. of beds available at the Listing - TEXT
No. of bathroom available at the Listing - TEXT
Summary about the Listing - TEXT
Location of the Listing - TEXT
Address of the Listing - TEXT
Kitchen Availability at the Listing - TOGGLE
Wifi Availability at the Listing - TOGGLE
Free Parking Availability at the Listing - TOGGLE
Air Conditioning Availability at the Listing - TOGGLE
Price of the listing/night - TEXT

Click on the + Field option to add all the above-mentioned attributes to the Listing table. I'm sure you have an idea of how to create and choose field types by now.

Here's how to create a PICKER field type for the Type of Listing attribute.

Click the edit options button on the bottom left to add types of listing

Here's how to add a TOGGLE functionality to your table for some of the properties

Kitchen Availability at the Listing - TOGGLE
Wifi Availability at the Listing - TOGGLE
Free Parking Availability at the Listing - TOGGLE
Air Conditioning Availability at the Listing - TOGGLE

This is what the final Listing Table should look like.

Next, you can click on the + Table option and create a table called Reservation and set table type as a LIST.

Listed below are the various field types you can define for
the Reservations Table. You can also set default values for your fields, set up validations if you like, etc.

Listing booked by a user. - LINK (LISTING Table)
Booked by - LINK (USER Table)
Start Date of the Reservation - DATE
End Date of the Reservation - DATE
Price of the Reservation - TEXT
Total Price of the Reservation - COMPUTED
No. of Adults staying - TEXT

This is how your graph will look like:

Next, you can click on the + Table option and create a table called Listing Review and set table type as a LIST

Listed below are the attributes required apart from System Fields pre available in the Listing Review Table.

Listing for which the review is provided - LINK (LISTING Table)
Written by - LINK (USER Table)
Rating provided by the User - PICKER
Comments added by the User - TEXT

This is how your graph will look like:

Next, you can click on the + Table option and create a table called Guest Review and set table type as a LIST. Listed below are the attributes required apart from System Fields pre available in the Listing Review Table.

Written for - LINK (USER Table)
Written by - LINK (USER Table)
Rating provided by the Host - PICKER
Comments added by the User - TEXT

This is how your graph will look like:

Next, you can click on the + Table option and create a table called Wishlist and set table type as a LIST. Listed below are the attributes required apart from System Fields pre available in the Wishlist Table.

Wishlist Owner - LINK (USER Table)
Title of the Wishlist- TEXT
Listings inside the Wishlist - LINK (LISTING Table)

This is how your graph will look like:

Once your graph is complete just go ahead and hit Deploy

Canonic will:

Deploy your project
Give you a CMS (Content Management System) tailored for your project so that you can start adding data into your tables immediately!
Spit out the CRUD (Create, Read, Update, Delete) APIs, both REST and GraphQL for all the tables you've defined to consume your data by your frontend.
Generate documentation for your APIs for you to get started immediately!

You can find more documentation on modeling your content here.

II - Feeding Data

Navigate to the CMS to start entering or managing the data!

III - Fetching Data

Once you deploy your project, all the CRUD APIs are also deployed and are there to use straight-up for you. If you head to the DOCS tab, you'll be able to see all necessary information needed to fetch your data over REST and GraphQL Endpoints. You'll be able to see:

The endpoint you need to call to fetch the data
The request and response parameters
Example requests and responses for all of the available APIs

Hope this guide was helpful and we are excited to see you built your Airbnb App using Canonic. If you want you can also duplicate this project from Canonic's sample app and easily get started by customising it as per your experience. Check it out app.canonic.dev.

You can also check out our other guides here.

Join us on discord to discuss or share with our community. Write to us for any support requests at support@canonic.dev. Check out our website to know more about Canonic.

How to send a SMS using Twilio

Kartik Grewal — Wed, 14 Jul 2021 09:23:57 +0000

Whether that be notification, security OTPs or alerts, SMS is one of the best methods of reaching your user base. Adding SMS services requires a backend setup for Twilio or other SMS services. Our goal is to create an endpoint that we can trigger to send our SMS on the Twilio without writing any backend code.

Creating project on low-code tool

We head over to Canonic and sign in using our social accounts. Next, we click on Create New to create a project for our application. Click on next, then click on create to complete the process.
A popup asking your first table name will appear. If not, you can click on the + icon in the header to create a new table. Let's name our first & only table for this project as Messages.
We create a text field named "Message" as we'll need it in the API & also to store the messages we send out.
We hit deploy on the top right, and we'll be provided with a hosted backend. a database & basic CRUD endpoints per table to help us create an API for our Twilio integration.
Click on the API tab on the left to start adding the twilio webhook. We select the createMessage block in mutations. Click on the + button. It'll open up a new webhook settings on the right hand side.
Select Message type → Choose Twilio from the list of providers & you'll be provided with fields for settings.
SID → This is your Twilio account number, generated along with access tokens..
Auth Token → To generate auth token, you should follow Twilio's guide - https://www.twilio.com/docs/iam/access-tokens#creating-tokens
Sender's phone number → Phone number to be used to send (should be verified by twilio)
Receiver's phone number → Phone number of the receiver of the sms (should be verified by twilio)
Message Body → Message to send to the user.
For Message body → We want to send the text found in the message field of the API to Twilio. So we can make use of Handlebars templates & simply write

{{message}}

in that field. This will extract the message field from the API payload and forward it to Twilio.

The above concludes the setup for the API that was required. Now let's start using this API to start sending SMS to our user base.

Integrating our existing app with this API:

This will require a combination of things that we need for securely connecting our application with this API.

Access token for our API
Documentation for the API

Access Tokens

Click on Settings using left side menu. Go to Access tokens tab.
Click on Create a new token, and provide it a suitable name and permissions. Click on Create.
You've successfully generated an access token for your API. Copy it & save it some place safe as you won't be able to see it again.

Documentation

Head over to the docs tab using the left-hand side, and you'll find documentation for createMessage API (the API block where we added our twilio webhook).

Testing

After completing all the necessary steps, we're finally ready to deliver our first SMS using our Twilio-connected API.

Let's copy the CURL command that was mentioned in the documentation. Fill in your access token and paste it into the terminal.

Our curl command will look something like this.

➜  ~ curl 'https://xxxx.hem.canonic.dev/api/messages' \
  --request POST \
  --header "Content-type: application/json" \
  --header "Authorization: xxxxxx-xxxxx-xxxx" \
  --data '{
    "input": {
      "message": "Hello! how are you?",
    }
  }'

A successful response will look like this:

{"data":{"messages":"Hello! how are you?","_id":"60bf30ee2529700009fd2a4a","createdAt":"2021-06-08T08:57:18.316Z","updatedAt":"2021-06-08T08:57:18.316Z","__v":0,"id":"60bf30ee2529700009fd2a4a"},"error":null,"success":true}%

And you'll hear a bell ring in the receiver's phone 🔔, and our SMS has been successfully delivered.

Dynamic Receiver phone number

So far we've added a fixed receiver's phone number, but what if you want to dynamically change who you send the SMS to. For achieving this, we can add another field in our graph of type Number & Deploy it.

In the Twilio webhook settings, you can modify the receiver phone number option to

{{ receiverNumber }}

and it'll extract the receiver's phone number from the API to send SMS to.

Find detailed documentation for this feature here - https://docs.canonic.dev/concepts/webhook-providers/twilio

Hope this guide was helpful and we are excited to see you built your roadmap using Canonic. If you want you can also duplicate this project from Canonic's sample app and easily get started by customising it as per your experience. If you want to experience how our roadmap turned out. Check it out app.canonic.dev.

Join us on Discord to discuss or share with our community. Write to us for any support requests at support@canonic.dev. Checkout our website to know more about Canonic.

Checkout other guides here:

How to build API to deliver slack messages with no code

Kartik Grewal — Thu, 17 Jun 2021 10:23:41 +0000

Every day so many people depend on slack to stay updated in their daily life. Hence, we may need to deliver some message or an alert to slack programmatically via an API in our product or webapp. This is a simple guide to show how you can achieve the same with no coding, to quickly hook up slack with your webapp.

Our goal is to create an endpoint that we can trigger to send our message on the slack.

We head over to Canonic and sign in using our social accounts. Next, we click on Create New to create a project for our application. Click on next, then click on create to complete the process.

Create new project screen
A popup asking your first table name will appear. If not, you can click on the + icon in the header to create a new table. Let's name our first & only table for this project as Messages.
We create a text field named "Message" as we'll need it in the API & also to store the messages we send out.
We hit deploy on the top right, and we'll be provided with a hosted backend. a database & basic CRUD endpoints per table to help us create an API for our slack.
Click on the API tab on the left to start adding the slack webhook. We select the createMessage block in mutations. Click on the + button. It'll open up a new webhook settings on the right hand side.
Select Message type → Choose Slack from the list of providers & you'll be provided with 2 fields for settings.
Trigger URL → This is the url which will be generated by slack
Message Body → Message to send to slack channels.
For Trigger URL → You'll need to create a webhook endpoint on Slack. Follow the slack documentation to help you through - https://api.slack.com/messaging/webhooks. After you complete this guide, you should have a slack webhook endpoint, something like this - https://hooks.slack.com/services/xxx/xxxx/xxxxx
For Message Body → We want to send the text found in the message field of the API to slack. So we can make use of Handlebars templates & simply write {{message}} in that field. This will extract the message field from the API payload and forward it to slack.

The above concludes the setup for the API that was required. Now let's start using this API to start sending messages to our slack channels.

Triggering Slack API:

This will require a combination of things that we need for securely connecting our application with this API.

Access token for our API
Documentation for the API

Access Tokens

Click on Settings using left side menu. Go to Access tokens tab.
Click on Create a new token, and provide it a suitable name and permissions. Click on Create.
You've successfully generated an access token for your API. Copy it & save it some place safe as you won't be able to see it again.

Documentation

Head over to the docs tab using the left-hand side, and you'll find documentation for createMessage API (the API block where we added our webhook).

Testing

After completing all the necessary steps, we're finally ready to deliver our first message to the slack using API.

Let's copy the CURL command that was mentioned in the documentation. Fill in your access token and paste it into the terminal.

Our curl command will look something like this.

➜  ~ curl 'https://xxxx.hem.canonic.dev/api/messages' \
  --request POST \
  --header "Content-type: application/json" \
  --header "Authorization: xxxxxx-xxxxx-xxxx" \
  --data '{
    "input": {
      "message": "Hello Slack! How are you?",
    }
  }'

A successful response will look like this:

{"data":{"message":"Hello Slack! How are you?","_id":"60bf30ee2529700009fd2a4a","createdAt":"2021-06-08T08:57:18.316Z","updatedAt":"2021-06-08T08:57:18.316Z","__v":0,"id":"60bf30ee2529700009fd2a4a"},"error":null,"success":true}%

And show up on your slack like this!

And just like that, we can setup an alerting or notification system for slack. You can also add more fields apart from message like name. This will allow you to formulate a much better structured in message body.

Hi {{ name }},

My message - {{ message }}

Thanks

Find detailed documentation for this feature here - https://docs.canonic.dev/concepts/webhook-providers/slack

Also checkout how we can integrate 3rd party authentication services with your backend without coding here. Looking forward to your feedback!