DEV Community: Ekene Eze (Kenny)

Token Gating Websites with Collab.Land

Ekene Eze (Kenny) — Thu, 19 Jan 2023 13:46:03 +0000

Token gating is the idea of using tokens as a means of verifying membership or access to a community or resource. This can be done by requiring users to possess certain tokens in order to join a community or access certain resources.

This concept has gained significant traction in recent years, particularly within decentralized autonomous organizations (DAOs) and non-fungible token (NFT) communities. At its core, token gating involves using tokens to grant or restrict access to a community or resource. In this blog post, we'll explore the history, use cases, advantages, challenges, and future of token gating. We’ll also explore the possibilities of extending its current usage to cater for developers building for the web.

Yesterday, Collab.Land announced a new /access-control endpoint for its token gating API that allows developers to control access to their websites and web applications based on the possession of specific tokens.

The endpoint accepts two parameters:

account - The wallet address of the user.

rules - The token gating rules that specifies the token(s) to look for in the users address.

For each rule, Collab.Land will return a response indicating whether or not the rule has been granted or denied for the user. Here’s a sample request to the Collab.Land /access-control endpoint:

POST: https://api.collab.land/access-control/check-roles

BODY:

{
  "account": "0x01c20350ad8f434bedf6ea901203ac4cf7bca295",
  "rules": [
    {
      "type": "ERC721",
      "chainId": 1,
      "minToken": "1",
      "contractAddress": "0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d",
      "roleId": "001"
    }
  ]
}

Where account represents the users wallet address and rules is an array of objects representing each rule to be checked against the users wallet.

This call would return a sample response like this:

{
  "roles": [
    {
      "id": "001",
      "granted": true
    }
  ]
}

To learn more about the Collab.Land token gating APIs, please read the official documentation or dive into a practical tutorial to build a gated website in minutes. You can also get your hands dirty with the Github repo. Want to build a token-gated website with JavaScript? here’s a sample code snippet to call the Collab.Land TGR endpoint using fetch:

const res = await fetch(`https://api.collab.land/access-control/check-roles`, {
method: 'POST',
headers: new Headers({
    Accept: 'application/json',
    'X-API-KEY': process.env.COLLABLAND_KEY,
    'Content-Type': 'application/json',
}),
body: JSON.stringify({
    account: myWalletAddr,
    rules: [
      {},
      {}
    ]
  })
});

Using the website token gating APIs, Collab.Land extends the successful patterns of token-granted access to communities and DAOs to the web. You can learn how to build a token-gated website here or watch the video tutorial below

How to share DEV.to drafts

Ekene Eze (Kenny) — Mon, 20 Jun 2022 17:10:07 +0000

We can all benefit from reviews from friends, colleagues or specialists when authoring blog posts. Platforms like Hashnode and Medium has the Share draft feature that allows you to share a WIP post without publishing to the world.

This might already exist on DEV (or not) but I just can't seem to find it.

Anyone know how to do this? or if it exists? Otherwise it'll be really nice to have

Shopify announces enhanced Storefront APIs - A first look with Gridsome and Netlify 🔥🔥

Ekene Eze (Kenny) — Mon, 19 Jul 2021 18:10:43 +0000

The Shopify team recently announced updates to their Storefront APIs that makes it possible for store owners to access and manage their entire store and inventory via the new APIs.

This unlocks another level of use cases for store owners on the Shopify platform, like:

You can set up a Shopify store (as a backend service) and use any frontend tech of your choice to build your store.
You can have a Shopify powered e-commerce site without having a Shopify site.
You can sell products (in your Shopify store) from any application, website, video game, etc.

This is indeed exciting and like everyone else who's keen on trying out new things, I took the APIs for a spin and it resulted in this Shopify Gridsome Starter Template.

You can go ahead and check it out, or you can follow along in this post and I'll try to explain my process to you.

Getting started

Before we jump into things, here's a list of things you might want to have in place first:

Create a Shopify partner account if you don't have one.
Log in to your partner account and create a Shopify development store (to test your implementations)
Generate your API credentials to make authenticated requests to your Storefront APIs.
Create products and product variants in your store. This could be dummy products you got off an API.
Create a private app on your Shopify admin dashboard. This will represent your client application from where you'll be making requests.

With all that done, you're now ready to start using your store data in any client application of your choice.

Authentication

All you need to make authenticated requests to your Storefront API is a storefront access token which is available on the Shopify admin section of your app. To authenticate a request, pass this in the header of your API calls:

headers: {
    "Content-Type": "application/graphql",
    "X-Shopify-Storefront-Access-Token": process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN,
}

You can learn more about authorization and scopes on the Shopify docs but this was all the authentication I needed to get things done. Next, let's take a look at how we can retrieve data from the store.

Products

Get all products

Before we go any further, it's worth mentioning that the Storefront APIs are completely GraphQL based. There's no REST alternative so all the sample snippets we'll use here will be in GraphQL.

So, to get a list of all the products in your store, you need to make a post request to your Shopify store endpoint with a query like this:

{
  products(first:5) {
    edges {
      node {
        id
      }
    }
  }
}

In the snippet above, we are querying the products field. Without any arguments, this will return all the products available in your store. However, we've specified that we want only the first 5 products by providing the first argument to the products query.

What if you're making this request from your favorite Frontend framework like Next.js or Nuxt.js? what would it look like. In my case, I'm working on a Gridsome project, so i'll go into the gridsome.server.js file and write this Query:

const fetch = require("node-fetch");
module.exports = function(api) {
  api.loadSource(async actions => {
    const query = `{
      products(first: 10) {
        edges {
          node {
            id
            handle
            description
            title
            images(first: 1) {
              edges {
                node {
                  src
                  altText
                }
              }
            }
          }
        }
      }
    }`;

    const response = await fetch(process.env.SHOPIFY_STORE_URL, {
      method: "post",
      headers: {
        "Content-Type": "application/graphql",
        "X-Shopify-Storefront-Access-Token":
          process.env.SHOPIFY_STOREFRONT_API_TOKEN
      },
      body: query
    })
      .then(res => res.json())
      .then(data => console.log(data));
  });
};

The fields we've defined in the query above are the fields we'll get back in the response with their respective values. You can add more fields like variants, collections, etc., depending on your needs. I've kept it minimal to keep the snippets neat and readable. You can find the rest of this file here if you'd like a more comprehensive look.

The way that Gridsome works is, now that we've fetched all the product data, we can create a Product Collection and pass the product data into the Collection like this:

const collection = actions.addCollection({
  typeName: "Product"
});
for (const product of productData) {
  collection.addNode({
    id: product.id,
    title: product.title,
    handle: product.handle,
    description: product.description,
    images: product.images.edges[0].node.src,
    altText: product.images.edges[0].node.altText
  });
}

The result of creating this Collection is that now, we can access the products from all our projects components and pages as this.$page.product. This way, we can use it in all the places we need it within the Gridsome app.

Get a particular product

What if you want to request for a single product?. The products have unique identifiers that we can use to query for them. As a result, you can run this query:

{
  node(id: "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzMTA2NzM0MzA=") {
    id
    ... on Product {
      title
    }
  }
}

This query will run against your Product schema and return the particular product with the ID specified at the node query root. Here's a sample response for the query above:

{
  "data": {
    "node": {
      "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzMTA2NzM0MzA=",
      "title": "Aged Gruyeye"
    }
  }
}

Okay, enough about requesting for products. Let's take a look at how to manage the shopping cart when your users start making that decision to buy.

Cart

This was the trickiest part for me. There's a lot of moving pieces to tie together when dealing with the cart API. Hopefully, this explainer makes it more approachable for you. The first thing to note is that a cart doesn't exist until a product has been selected to be added to the cart (i.e a user clicks Add To Cart on your site).

Create cart

When that happens, then you can send a request to Shopify to create a cart with the selected item. The call to create a cart ultimately requires two fields, the id of the selected product and its quantity. Consider this mutation:

const { postToShopify } = require("./postToShopify");

// Create a cart with a single item
exports.createCartWithItem = async ({ itemId, quantity }) => {
  try {
    const response = await postToShopify({
      query: `
        mutation createCart($cartInput: CartInput) {
          cartCreate(input: $cartInput) {
            cart {
              id
              createdAt
              updatedAt
              lines(first:10) {
                edges {
                  node {
                    id
                    quantity
                    merchandise {
                      ...
                    }
                  }
                }
              }
              estimatedCost {
                totalAmount {...}
                subtotalAmount {...}
                totalTaxAmount {...}
                totalDutyAmount {...}
              }
            }
          }
        }
      `,
      variables: {
        cartInput: {
          lines: [
            {
              quantity,
              merchandiseId: itemId
            }
          ]
        }
      }
    });

    return response;
  } catch (error) {
    console.log(error);
  }
};

The mutation above will create a cart and return values for all the specified fields in the response. Note that the snippet has been truncated to keep it consice and readable, the rest of the file is available here. If you're also wondering what the postToShopify import is, it's a utility function we use to make requests to Shopify, also available here.

Here's something I missed that took a while to figure out. The product id i.e the itemId in the snippet above is not the product's ID (product.node.id) as you'd think. Instead, it's the ID of the selected product variant. If the product has no variants, the variants field will still be available in the product data with one item. And you can access it with product.variants[0].node.id. This is the ID you should be adding to the cart (or using to create a cart).

Add items to cart

In the case where a cart already exists and you'd like to add items to it, you'll need to supply

The cartId which is returned in the first call to create a cart,
The id of the product you're adding to the cart and
It's quantity.

Here's a sample mutation that takes the 3 required fields and adds the selected product to the cart whose ID equals the supplied cartId:

const { postToShopify } = require("./postToShopify");

exports.addItemToCart = async ({ cartId, itemId, quantity }) => {
  try {
    const shopifyResponse = postToShopify({
      query: `
        mutation addItemToCart($cartId: ID!, $lines: [CartLineInput!]!) {
          cartLinesAdd(cartId: $cartId, lines: $lines) {
            cart {
              id
              lines(first: 10) {
                edges {
                  node {
                    id
                    quantity
                    merchandise {
                      ... 
                    }
                  }
                }
              }
              estimatedCost {
                totalAmount {...}
                subtotalAmount {...}
                totalTaxAmount {...}
                totalDutyAmount {...}
              }
            }
          }
        }
      `,
      variables: {
        cartId,
        lines: [
          {
            merchandiseId: itemId,
            quantity
          }
        ]
      }
    });

    return shopifyResponse;
  } catch (error) {
    console.log(error);
  }
};

If the cart exists, as it should in our case, Shopify will find the cart with the ID that equals the ID we supplied in the cartId variable and then add the selected product to it as a line item. Again, the snippet is truncated so the whole file is available here.

Remove items from cart

So we've created a cart, and added items to the cart. Let's find out how to remove an item from it. I certainly change my mind a lot when shopping online so I'd like the ability to remove things I don't want any more from the cart.

As you might expect, this request won't be very different from the last one that adds an item to the cart. In this case, we just want to get rid of an item. So, specify the ID (lineId) of the line item (product variant) you want to get rid of and the ID of the cart (cartId) you want to remove it from and it'll be done. Here's how:

const { postToShopify } = require("./postToShopify");

exports.removeItemFromCart = async ({ cartId, lineId }) => {
  try {
    const shopifyResponse = await postToShopify({
      query: `
        mutation removeItemFromCart($cartId: ID!, $lineIds: [ID!]!) {
          cartLinesRemove(cartId: $cartId, lineIds: $lineIds) {
            cart {
              id
              lines(first: 10) {
                edges {
                  node {
                    id
                    quantity
                    merchandise {
                      ...
                    }
                  }
                }
              }
              estimatedCost {
                totalAmount {}
                subtotalAmount {}
                totalTaxAmount {}
                totalDutyAmount {}
              }
            }
          }
        }
      `,
      variables: {
        cartId,
        lineIds: [lineId]
      }
    });

    return shopifyResponse;
  } catch (error) {
    console.log(error);
  }
};

The mutation above will successfully remove the selected product whose line ID equals the lineId specified in the request from the cart whose cart ID equals the cartId specified in the request.

That's it! that's how far I've come in working with the Storefront API.

Here's the live site I built in this process to give you a general idea of how it all works together.
If you're keen on getting your hands on the source code, it's also available here on Github

Thoughts?

Generally, I love the idea that I now have a Gridsome e-commerce site powered by Shopify. I get all the benefits of working with Vue.js plus all the added benefits of having a Shopify powered backend system. The API took me a while to figure out (maybe because I was new to it), but it works! and that's exciting! Looking forward to hearing what y'all think about it.

How to rollback a deploy in 2 seconds on Netlify

Ekene Eze (Kenny) — Mon, 19 Jul 2021 13:07:02 +0000

Okay, let's talk about rollbacks in a minute. As you may already know, they are one of the most interesting features of the Jamstack. Having the ability to roll back to a previous deploy in seconds to recover from an error is simply great!

The idea of rollbacks is possible on the Jamstack because of atomic and immutable deploy concepts which ensure that each deploy on your site can function as an independent entity. This means you can rollback to any site deploy at any time.

So how does it work on Netlify?

Why do such much talking when I can show you instead? At the moment, I have this site hosted on Netlify. If you watch me as I hover around the Navbar, you'll notice that the link color gets darker as I focus on them.

That is the behaviour I want on this site, and that is the behaviour that my users are familiar with. It is accessible and the code has already passed all production tests. But what if I (unintentionally) deploy a new version of this site that breaks that behaviour?. Maybe in an attempt to make the Navbar fancier, I end up something like this:

Chaos right? this could potentially put me in trouble at work or with the client that I've built the site for. This behaviour will also impact the end-users, in which case I might end up trending on Twitter for all the wrong reasons. The good news is, If this happens, I can just rollback to the previous version in a few seconds like this:

Go to your Deploys tab
Select the previous production deploy
Click publish deploy
It's done!

And just like that, you're back to a stable working version of your site just by the click of a button. Now you can go and figure out what went wrong with the faulty deploy and fix it when your users continue surfing the site like nothing happened.

You might have also noticed in the demo that we get the option to lock publishing to this deploy. This gives you the option to say, whatever happens, this deploy will always be the published one. You can commit more code and Netlify will build those new versions but the locked deploy will remain published on your site until you enable auto publishing again.

That's it! if you've been wondering how to rollback a production site on Netlify, I hope this was all you needed to figure it out.

How to use Distributed Persistent Rendering in Nextjs with Netlify

Ekene Eze (Kenny) — Thu, 24 Jun 2021 13:58:01 +0000

I imagine that you must have heard about Distributed Persistent Rendering - DPR in some chatters around the Twitterverse and within the busy halls of the Jamstack community.

If you haven't, and this is your first time hearing about DPR, it is a new approach that aims to reduce build times for teams and individuals building large sites on the Jamstack. It works by separating your site's contents into two distinct parts, critical and deferred.

The critical parts are generated at build time to ensure that your site's contents are readily available to users while the deferred part is loaded on-demand at the first request.

For instance, consider a local news website that has breaking news and some archived news as well.

As the developer, you might prefer to generate all your breaking news pages at build time so that it's available to all your users as quickly as possible.

Then, seeing that the archived news section is rarely of interest to users, it would be ideal to generate those pages only when a user specifically requests for them.

This would ultimately lead to faster build times for your site and an overall better user experience for your users.

The good news is, you can do it with On-demand builders - a special type of serverless functions that helps bring the DPR idea to life on Netlify.

This is what I'd like to show you in practice today. We'll build out the news website, generate all our breaking news at build time and defer the archived news to be generated at the first request using Next.js on Netlify.

Set up Next.js

This part is really simple. Here's a great Next.js Netlify starter that was kindly prepared by the wonderful Cassidy Williams. To get up and running in a minute, click the Deploy To Netlify button on the repo and that's it, you're set. The advantage of using this starter is that:

The starter will be cloned to your personal Github repository.
The site will be deployed to Netlify and you can interact with it in seconds.
The Essential Next.js plugin (that will give you access to On-demand Builders out of the box) will be auto-installed on the site for you.

If you deploy the starter to Netlify and switch over to the Plugins tab, you should see the Essential Next.js plugin installed:

If you've cloned this project locally (I hope you did), then you should have a minimal Next.js site that you can run with:

npm run dev
//OR
yarn dev

And you should have the following view on your browser at localhost:3000:

Set up the news data source

Now that we have our Next.js app set up, we need to source our news data from somewhere right? ideally, I would use a content management system for this (maybe I still will) but in the meantime, let's simply fetch it from an external endpoint.

This is what the data would look like:

export const news = [
  {
    id: "1",
    tag: "breaking",
    title:
      "Facebook running special center to respond to content on Israeli-Gaza conflict - Reuters",
    excerpt:
      "Facebook Inc (FB.O) set up a 24-7 special operations center last week to respond to content posted on its platform about the ...",
    content:
      "Streaks of lights are seen from Ashkelon as rockets are launched from the Gaza Strip towards Israel, May 15, 2021. REUTERS/Amir Cohen/File PhotoFacebook Inc (FB.O) set up a 24-7 special operations. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
// some more data
]

Create the news page

So we have the data we need for our news site, great!. Next, let's show the news headlines to the users. In the pages directory, create a new index.js file in the pages/news/ directory. In this file, we'll fetch our news data and display the headlines so users can click through to read any news article of their choosing.

// pages/news/index.js
import Footer from "@components/Footer";
import styles from "../news/News.module.css";
import Link from "next/link";

export default function NewsHome({ news }) {
  return (
    <div className="container">
      <main>
        <h1>All News Headlines</h1>
        {news.map((article, index) => (
          <div key={index} className={styles.card}>
            <div className={styles.container}>
              <Link href={`/news/${article.id}`}>
                <a>
                  <h4>
                    <b>{article.title}</b>
                  </h4>
                </a>
              </Link>
              <p>{article.excerpt}</p>
            </div>
          </div>
        ))}
      </main>
      <Footer />
    </div>
  );
}

export async function getStaticProps() {
  const res = await fetch(process.env.DATA)
  const news = await res.json();
  return {
    props: {
      news,
    },
  };
}

The getStaticProps() function runs at build time to fetch our news data and pass it to NewsHome() via props for rendering. Also, you may have noticed that I'm using Next.js's Link component to route to /news/${article.id} when any of the news items is clicked. In accordance with Next.js's pattern of handling dynamic routes, let's create a new [id].js file in the same directory as our index file.

// pages/news/[id].js
import Footer from "@components/Footer";
export default function NewsDetail({ news }) {
  return (
    <div>
      <main>
        <h3>{news.title}</h3>
        <p> {news.content} </p>
      </main>
      <Footer />
    </div>
  );
}
export async function getStaticPaths() {
  const res = await fetch(process.env.DATA);
  const newsItems = await res.json();
  const breakingNews = newsItems.filter((news) => news.tag == "breaking");

  const paths = breakingNews.map((news) => ({
    params: { id: news.id.toString() },
  }));

  /*
  console.log(paths)
  [
    { params: { id: '1' } },
    { params: { id: '2' } },
    { params: { id: '3' } }
  ]
  The paths above will be generated at build time
  */

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`${process.env.DATA}/${params.id}`);
  const news = await res.json();
  return { props: { news } };
}

Here's where the magic happens. The getStaticPaths() function is how we tell Next.js which routes to generate at build time. Here, we are specifically telling Next.js to generate only the breaking news routes by:

Filtering through all our news items and returning only the items with the breaking tag (i.e our breaking news).
Generating all the dynamic routes of the breaking news items by looping through our breaking news and returning the paths to the individual pages I want to pre-generate.
Lastly, we pass the paths to the function's return statement along with the fallback value of false. This will cause the site to 404 when a page that hasn't been generated is requested.

That seems like a bit much code without testing, let's see what functionality we currently have on the browser by running the project again.

As expected, when we navigate to any of the pre-generated pages (breaking news - news/1, news/2, news/3) we see the news content and read it. However, if we request for any other news item (e.g archived news - news/4 or /5 etc) then we get a 404 page.

But that's not what we want. In line with the topic of this post, we want to use the On-demand builder function which is natively supported in Next.js on Netlify, to fetch any dynamic paths that we intentionally 'did not' generate at build time. And to achieve that, all we need to do is set the value of fallback to 'blocking' or true in the getStaticPaths() function like this:

// pages/news/[id].js
import Footer from "@components/Footer";
export default function NewsDetail({ news }) {
  return (
    <div>
      <main>
        <h3>{news.title}</h3>
        <p> {news.content} </p>
      </main>
      <Footer />
    </div>
  );
}
export async function getStaticPaths() {
  const res = await fetch(process.env.DATA);
  const newsItems = await res.json();
  const breakingNews = newsItems.filter((news) => news.tag == "breaking");

  const paths = breakingNews.map((news) => ({
    params: { id: news.id.toString() },
  }));

  /*
  console.log(paths)
  [
    { params: { id: '1' } },
    { params: { id: '2' } },
    { params: { id: '3' } }
  ]
  The paths above will be generated at build time
  */

  return { paths, fallback: "blocking" };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`${process.env.DATA}/${params.id}`);
  const news = await res.json();
  return { props: { news } };
}

Setting fallback:"blocking" or fallback:true means that we are telling Next.js to use an On-demand builder function to generate any paths that are not already pre-generated and specified in the getStaticPaths() function. If we test this again, we should be able to see archived news (e.g news/4 and above):

As expected, we get the archived news pages now with ODB. The experience is that when our app runs, all our breaking news pages get generated at build time while our archived news pages get generated with ODB when they're first requested.

Every ODB response will be cached and subsequently served from the cache for any new requests. This will result in a much faster build time for the site and a far better experience for our end users.

And with that, I think you have all you need to go forth and use On demand builders in your Next.js applications. Like always, I look forward to seeing what you do and what breakthroughs you achieve with them.

Deep dive into the Vue Composition API's watch() method

Ekene Eze (Kenny) — Tue, 18 May 2021 10:35:14 +0000

Introduction to the Watch API

The watch API is part of the larger Vue Composition APIs. It takes a data source and a callback function that executes when the provided data changes.

watch(data, (currentValue, oldValue) => {
  console.log(currentValue);
  console.log(oldValue);
});

In my experience, I’ve found that whenever I need to track reactive data and perform some operation when the data changes, computed properties were all I needed.

However, like the Options API, the Vue Composition API also shipped with watch(), which offers developers another way of watching and reacting to data changes. I have found that there’s some nuance around it and I wanted to deep dive into it in this post and shine more light on the different ways you can use it.

This is largely because it behaves differently depending on the type of data you’re watching, and it can get confusing if you’re not already familiar with it. In this post, we’ll look at how to use it when dealing with ref and reactive states as well as with arrays and objects.

Watch API with ref

A general rule of thumb when working with the watch API is to know that it takes two arguments. The first is the data source you want to watch and the second is a callback function that applies side effects to that data.

Watching a single ref

The examples that will follow are based on simple data types like: numbers, strings booleans. You can skip to examples on complex data types arrays and objects

The watch API allows us to watch a single ref or to collectively watch multiples refs. Let’s demonstrate how to watch a single ref with simple data types (strings, numbers booleans).

When watching a single ref, we simply pass it as the first argument to the watch API. Here’s a quick example:

import { watch, ref } from "vue";
export default {
  setup() {
    const name = ref("Jay");
    watch(name, (currentValue, oldValue) => {
      console.log(currentValue);
      console.log(oldValue);
    });
  },
};

This is fairly straightforward. We are watching name to ensure that when its value changes, we perform any operation we want in the callback. In this case, we just log the current and old values to the console. The same applies to all other ref’s of simple data types like booleans and numbers.

However, that’s not the case when watching a ref of more complex data types like arrays and objects.

Complex data types

Let’s see how to do that with an array:

import { watch, ref } from "vue";
export default {
  setup() {
    const level = ref([1, 2, 3, 4]);
    watch(() => [...level.value], (currentValue, oldValue) => {
      console.log(currentValue);
      console.log(oldValue);
    });
  },
};

Two things to notice here:

We used a function to return the array we want to watch (not passed-in directly as we did in the last example)
We returned a copy of the values of the array i.e ...level.value (not the existing array itself).

This is different from what we saw earlier with simple data types. But this is just an array, what if it was an object, would it be any different? Let’s find out:

import { watch, ref } from "vue";
export default {
  setup() {
    const state = ref({
      name: "",
    });   
    watch(state.value, (currentValue, oldValue) => {
      console.log(currentValue);
      console.log(oldValue);
    });
  },
}

The difference here is that with objects, we pass the data directly into the watch API, no need to return it with a function or make a copy as we did with the array.

One more thing you’ll notice is that for both cases (array and object), the value of currentValue and oldValue is in fact the same thing. Why? here’s why and how to fix it.

Nested objects/arrays

What if we had nested objects or arrays, how do we use the watch API to monitor changes in nested arrays/objects?. Let’s start with a nested array example:

import { watch, ref } from "vue";
export default {
  setup() {
    const secondLevel = ref([5, 6, 7]);
    const level = ref([1, 2, 3, 4, secondLevel.value]);
    watch(() => [...level.value], (currentValue, oldValue) => {
        console.log(currentValue);
        console.log(oldValue);
      }
    );
  },
};

We are watching level, which is the parent of the nested secondLevel array. Ideally, when the value of secondLevel changes, the watch API should execute and log the different values to the console. However, that won’t happen because:

Watching a reactive object or array will always return a reference to the current value of that object for both the current and previous value of the state. To fully watch deeply nested objects and arrays, a deep copy of values may be required. This can be achieved with a utility such as lodash.cloneDeep

As a result, we can use lodash to “deeply” watch the level array (this time with access to the nested secondLevel array):

import { watch, ref } from "vue";
import _ from "lodash";
export default {
  setup() {
    const secondLevel = ref([5, 6, 7]);
    const level = ref([1, 2, 3, 4, secondLevel.value]);

    watch(() => _.cloneDeep(level.value), (currentValue, oldValue) => {
        console.log(currentValue);
        console.log(oldValue);
      }
    );
  },
};

With this, the values of both our arrays will be tracked just fine. The good thing with this approach is that we did’t have to copy the array’s values anymore, we can simply pass it into cloneDeep() and it handles the rest for us. This also applies to nested objects:

import { watch, ref } from "vue";
export default {
  setup() {
    const state = ref({
      name: "",
      location: {
        country: "",
      },
    });
    watch(() => _.cloneDeep(state.value), (currentValue, oldValue) => {
        console.log(currentValue);
        console.log(oldValue);
      }
    );
  },
}

Watching multiple ref’s

If we had more than one item that we wanted to watch at once, we can pass them all into the watch API with an array. For instance, if we had firstName and lastName, we could watch for changes in their values at once like so:

import { watch, ref } from "vue";
export default {
  setup() {
    const firstName = ref("Jay");
    const lastName = ref("Pritchett");
    watch([firstName, lastName], (currentValue, oldValue) => {
      console.log(currentValue);
      console.log(oldValue);
    });
  },
};

Watch API with Reactive

The way the watch API handles ref values is somewhat different from how it handles reactive. Everything we’ve done so far has been with ref values, let’s try redoing them, but this time with reactive. This way, we’ll cover both values and you will be equipped to use the watch API either way.

Watching a reactive array

Once again we start off with an array. Here’s how to watch a reactive array and react to changes in its value:

import { watch, reactive } from "vue";
import _ from "lodash";
export default {
  setup() {
    const level = reactive([1, 2, 3, 4]);
    watch(() => _.cloneDeep(level),(currentValue, oldValue) => {
        console.log(currentValue);
        console.log(oldValue);
      }
    );
}

Using the watch API with a reactive array is no different from how we used it with a ref. In both cases, we deep cloned the array with lodash and return it as the first argument to the watch API. The only difference here is that we did not append .value to read the value of the level array.

Watching a nested reactive array

To cut to the chase quickly, using lodash like we did in the last example ensures that we track every aspect of the data we want to watch. As a result, if we have deeply nested arrays, it will track the values as well:

import { watch, reactive } from "vue";
import _ from "lodash";
export default {
  setup() {
    const secondLevel = reactive([5, 6, 7]);
    const level = reactive([1, 2, 3, 4, secondLevel]);
  watch(() => _.cloneDeep(level), (currentValue, oldValue) => {
      console.log(currentValue);
      console.log(oldValue);
    }
  );
}

This is almost exactly the same with the ref example, with the exception of the .value appends.

Watching a reactive object

When dealing with objects, I personally tend to go with reactive by default. However the implementation is also not very different from how you would approach a ref:

import { watch, reactive } from "vue";
import _ from "lodash";
export default {
    const state = reactive({
      name: "",
    });
    watch(() => _.cloneDeep(state),(currentValue, oldValue) => {
        console.log(currentValue);
        console.log(oldValue);
      }
    );
}

You can watch an object or an array by deep cloning it using lodash. I have made this approach my default since in most cases, I want to track both the previous and current values of the data I’m watching. If you’re okay tracking just the current values, you don’t need to use lodash here.

Watching a nested object

deep

The watch API can also take a third argument deep, which when set to true, will extend its functionality to keep an eye on deeply nested values:

import { watch, reactive } from "vue";
export default {
  setup() {
    const state = reactive({
      name: "",
      location: {
        country: "",
      },
    });
    watch(() => state, (currentValue, oldValue) => {
        console.log(currentValue);
        console.log(oldValue);
      },
      { deep: true }
    );
}

However, because it doesn’t track both previous and current values of state, lodash is still my preferred option for using the watch API with reactive nested arrays and objects:

import { watch, reactive } from "vue";
import _ from "lodash";
export default {
  setup() {
    const state = reactive({
      name: "",
      location: {
        country: "",
      },
    });
    watch(() => _.cloneDeep(state), (currentValue, oldValue) => {
        console.log(currentValue);
        console.log(oldValue);
      },
    );
}

Watch a specific property in the reactive object

When watching a specific property in a reactive object, the first argument you pass to watch() will be an anonymous function that returns the specific property you want to watch.

Note that in this case, deep copying the object is not required:

import { reactive, toRefs, watch } from 'vue'
export default {
  setup() {
    const state = reactive({
      name: "",
    })
    watch(() => state.name, (currentValue, oldValue) => {
      console.log(currentValue)      
      console.log(oldValue)
    })
  }
}

It is worthy to note that there’s a significant difference in how we watch an entire reactive object and how we watch a specific property in a reactive object as I just demonstrated above. If it’s not clear, feel free to text me on Twitter and I’ll be happy to provide some more clarity.

watchEffect

It would be incomplete to finish this post without telling you a little bit about watchEffect(). Unlike the watch API, it takes only one argument, which is a callback function that runs immediately and re-runs when any of its dependencies change. Maybe in a future post, we can look at watchEffect in more detail but in the meantime, you can learn more about it here.

Hope this helps you understand how to use the watch API in more detail. If you prefer to learn with videos, I made a not so comprehensive tutorial on YouTube as well.

More resources

Official Vue.js documentation
Vue 3 watch API deep dive – YouTube tutorial
Launching with the Composition API — Free Video Course

Building an Event Registration Page with Composition API and Serverless Functions

Ekene Eze (Kenny) — Mon, 17 May 2021 12:18:08 +0000

The Composition API was born out of the desire to offer Vue developers a different way of writing and organizing code while building Vue apps. It provided some flexibilities around how we build Vue applications that weren’t possible in the Options API, but like every other methodology, they all have trade-offs.

The Composition API at a high-level overview offers developers a different way of writing code that ensures that codebases remain legible, readable and easier to maintain even as it grows larger.

In this post, we’ll look at how to collect data from a conference registration form with the Composition API and post it to a serverless function that will receive the request and return a response. You can do pretty much anything else you want in the function, like saving users to a database using Hasura, or handling authentications with Netlify Identity.

If you’ll like to code along, I’ve prepared a starter repository here for you. Check out the start branch and build from there.

For visual context, this is what the form looks like at the end.

You should already have a src/components/Registration file set up for you in the start branch so we’ll go ahead and walkthrough handling the form fields with the Composition API. We’ll have fields for name, email, track, mobile track and tickets. This means that we need a way to handle state for these fields.

Reactivity in the Composition API

In the Options API, all the pieces of data in the data() option is tracked and made reactive in Vue by default. But, in the Composition API, all the data is static by default. This means that we need a way to make it reactive. The Composition API comes with the reactive and ref helper methods which are available by default in Vue 3. Wrapping the data we need in our Vue app with these methods ensures that they remain reactive across the app.

ref

ref provides us a way to make data reactive. For instance, if I wanted to track when a form is submitted, I could create a ref variable for it like so:

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const isUserRegistered = ref(false)
      return {
        isUserRegistered
      }
    }
  }
</script>

By returning isUserRegistered in the setup() function, I have exposed it to the template.

Accessing ref values

To access the value of ref variables, you have to append .value to it. Consider this example:

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const isUserRegistered = ref(false)
      const sayHi = () => {
        if (!isUserRegistered.value){
          // say hi to the registered user :
        }
      }
      return {
        isUserRegistered,
        sayHi
      }
    }
  }
</script>

This might seem like you need to write a lot of .value‘s when using ref but that is not the case in the render context. When you return a ref in the setup() function, it automatically unwraps to the inner value and becomes accessible to the template. As a result, you won’t need to append .value to access a ref in the template:

<template>
  <div v-if="!isUserRegistered">
    <!-- more template thingy -->
  </div>
</template>

Reactive

Just like ref, reactive also provides us with a way of keeping data reactive in Vue 3. Albeit different from ref, it achieves the same result. Let’s demonstrate how the reactive helper method works in the registration form:

<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      const formData = reactive({
        name: "",
        email: "",
      })
      return {
        formData
      }
    }
  }
</script>

formData in the setup() function above is a reactive object that contains all the pieces of data supplied by the user. We return it in the setup() function to expose it for use in the template. Speaking about the template, this is how we’ll use it there:

<template>
  <div>
    <h1>Let's JAM in Space!</h1>
    <p>
      Register for the upcoming Jamstack conference in space! <br />
      <strong>Free </strong>for one and <strong>$5 </strong> for 2+ tickets
    </p>
    <form>
      <label for="name">Name</label>
      <input id="name" v-model="formData.name" placeholder="Enter your name" />
      <label for="email">Email </label>
      <input
        id="email"
        v-model="formData.email"
        placeholder="Enter your email"
      />
    </form>
  </div>
</template>

You can immediately see why you may not want to keep binding data to the template using formData as doing that could lead to a bloated markup when you have multiple properties inside the object. In my case, I decided to destructure formData and get name and email directly from it like so:

return {
  ...formData // spread
};
//OR
const { name, email } = formData; // destructure
return {
  name,
  email
};

If we do that, then you might assume that name and email would be directly bound to the template so:

<template>
  <div>
    <form>
      <input v-model="name" placeholder="Enter your name" />
      <input v-model="email" placeholder="Enter your email" />
    </form>
  </div>
</template>

But unfortunately, that’s not possible for one reason: spreading or destructuring the formData object will remove reactivity from the different pieces of data inside the object. It suffices to say that it seems the reactive object cannot be destructured or spread directly with the spread operator. What do we do then?

toRefs

With respect to the snippet above, toRefs is a helper method that allows us to achieve the spread effect on the formData object while retaining reactivity for the different pieces of data inside it. In our case, we can use it to wrap the formData object like so:

<script>
  import { reactive, toRefs } from 'vue'
  export default {
    setup() {
      const formData = reactive({
        name: "",
        email: "",
        // other piece of data
      })
      return {
        ...toRefs(formData)
      }
    }
  }
</script>

With this, we can go ahead and use name and email directly in the template like we wanted to do here.

Computed

Computed properties in the Composition API work the same way they do in the Options API. However, they have a slightly different syntax. Imagine that I have an imaginary coupon that gives users with 2 or more tickets a $3 discount from the total price of their ticket. If that was the case, then I would use a computed property to calculate the total price of the ticket like this:

<script>
  import { computed, reactive, toRefs } from 'vue'
  export default {
    setup() {
      const formData = reactive({
        price: 0,
        tickets: 0,
        coupon: 3,
        discountedPrice: computed(() => {
          if (formData.tickets > 1) {
            return formData.price - formData.coupon;
          } else {
            return 0
          }
        });
        // other pieces of data
      })
      return {
        ...toRefs(formData),
      }
    }
  }
</script>

discountedPrice in the snippet above is a computed property that tracks all of it’s dependencies (formData.price and formData.coupon).

Here’s an even more interesting scenario. Let’s introduce a tickets property to the formData object, and calculate price based on how many tickets are selected. 1 ticket = $0 (free) while 2 or more tickets will be a flat rate of $5. Computed properties shines in this regard as you can see below:

<script>
  import { computed, reactive, toRefs } from 'vue'
  export default {
    setup() {
      const formData = reactive({
        tickets: 0,
        coupon: 3,
        price: computed(() => {
          if (formData.tickets > 1) {
            return 5 - formData.coupon
          } else {
            return 0
          }
        })
      })
      return {
        ...toRefs(formData)
      }
    }
  }
</script>

Here, the computed property price is tracking both coupon and tickets and ensures that anytime any of the values change, it will update automatically to capture the new changes. Bonus Point: You don’t even need to have a separate discountedPrice property anymore.

Methods

Methods in the Composition API are just regular functions defined in setup(). As the last step to creating and using them, you have to always return it in setup() so that it is exposed to the template. In our case, I want to create a method that takes all the information provided in the form and post it to a serverless function (which doesn’t exist yet). Here’s how to handle it in the Composition API:

<script>
import { reactive, ref, toRefs } from 'vue'
export default {
  setup() {
    const formData = reactive({
      name: "",
      email: "",
      tickets: 0,
      price: 0
    })
    const isUserRegistered = ref(false)
    // method
    const registerUser = () => {
      // "/.netlify/functions/register" is the path to my serverless function
      fetch("/.netlify/functions/register", {
        method:"POST",
        body:JSON.stringify(formData)
      })
        .then((response) => response.json())
        .then(body => {
          // do something with the response
          isUserRegistered.value = true
        })
    }
    return {
      ...toRefs(formData),
      isUserRegistered,
      registerUser
      }
    }
  }
</script>
<template>
  <button @click.prevent="registerUser" type="submit">Register</button>
</template>

Remember, methods in the Composition API are normal JavaScript functions. No special syntax needed. The notable thing here is that just like everything else you need in the template, you have to return it in the setup() function.

Serverless function

Serverless functions make it possible for developers to run a server without the overhead that come with fully managing a server. More-so, it comes with fewer cost implications as it only executes on demand. If this tutorial is your first look at serverless functions, I would recommend this awesome intro to serverless functions course by Jason Lengstorf.

A general rule of thumb for creating serverless functions is that it exports a function called handler and returns a response. The response must be an object containing at least a statusCode that matches a valid HTTP response code and a body that is a string by default. At the barest minimum, this is a valid serverless function:

exports.handler = async (event, ctx) => {
  return {
    statusCode: 200,
    body: "Hello World"
  };
};

event

The event argument in the function above is an object that contains all the information you need to know about the request. Here’s a quick look at the structure:

{
  path: '/.netlify/functions/register',
  httpMethod: 'POST',
  queryStringParameters: {},
  multiValueQueryStringParameters: {},
  headers: {},
  multiValueHeaders: {}
  body: {},
  isBase64Encoded: false
}

This can be very useful to perform all sorts of operations in the function. Like validating the request methods, getting request query parameters, using data from the request body etc. When working with serverless functions, the event argument is your single source of truth for information about the request.

context

The second argument is context. It is an object that provides broader information about the request. In it, you will find information like:

The name of the function that was called
If Netlify identity is present
What the client context is and
Lots of other information that you will rarely need, but provided for you regardless.
I’ll go ahead and link you up with this doc that explains it in even more detail.

Now that we know what a serverless function looks like, let’s make one. Create a functions/register.js file in the root of your project and update it with this snippet:

// export a function called handler
exports.handler = async (event, ctx) => {
  // receive the request event and get the user's details from it
  const { name, email, track, mobileTrack, price } = JSON.parse(event.body);
  // Things you can do here!
  // create a user object and do what you want with, like:
  // Save user to a database
  // Authenticate user
  // Send event details to user's email
  // etc.
  const newUserDetails = {
    username: name,
    email: email,
    track: track,
    mobileTrack: mobileTrack,
    price: price
  };
  // Send response back to the client
  return {
    statusCode: 200,
    body: JSON.stringify(newUserDetails)
  };
};

Serverless functions help us perform server-side operations without maintaining a dedicated server. That is what we can do here. The form data sent from the client can be handled however you want in the function. You can save to your database, do server-side validation, handle authentication, roles etc. Talk about dynamic Jamstack? serverless functions is the way to go!

Finally, you’ll need to create a netlify.toml file where you tell Netlify where your functions folder is. This helps Netlify locate your functions and deploy them for you along with the rest of your site.

[build]
functions = "functions"

This site is hosted here on Netlify and you can play around with the repo yourself here on GitHub. I tried and failed to keep this post under 2k words, but I do hope you found some useful information here on both the Composition API and serverless functions.

More resources

vue serverless composition-api

Build a JamStack food ordering application with Strapi, Gridsome and Snipcart (2)

Ekene Eze (Kenny) — Sun, 13 Dec 2020 08:47:14 +0000

In the first part, we walked through the process of setting up a Strapi application and creating products for our application. In this part, we will concentrate more on how to set up the Gridsome application. Afterwards, we will set up some components, pages and layouts to get the application ready.

Part 1 - Generating a Strapi app and creating products
Part 2 - Setting up a Gridsome project
Part 3 - Consuming products with Gridsome and GraphQL
Part 4 - Creating single product views with Gridsome templates
Part 5 - Implementing cart and checkout with Snipcart
Part 6 - Deploying the apps Setting up a new Gridsome application.

Before we get started, here are some prerequisites:

Node v8.0 or higher
Working knowledge of JavaScript and Vue

Installing Gridsome

With Node installed, you can install the Gridsome CLI by running the command below:

    yarn global add @gridsome/cli
    #OR
    npm install --global @gridsome/cli

Having installed the Gridsome CLI, you can use it to create a new Gridsome project by running the following command:

    gridsome create mealzers

The above command will create a Gridsome project named mealzers. Navigate into to the created project folder with:

    cd mealzers

And start the project development server with:

    gridsome develop

The project will be available for preview on the browser. Navigate to localhost:8080 to view the app.

There, you have a Gridsome application running on the browser in minutes. Next, let's add Vuetify for styling.

Setting up Vuetify

Vuetify is a UI framework built on top of Vue.js. Whenever I'm working on a Vue project, Vuetify is by default my goto UI framework for styling. It is the most popular design framework for Vue.js and it comes packaged with tons of prebuilt components.

Amongst other things, it is mobile-first which ensures that my applications perform responsively irrespective of device or orientation. It is also simple to understand and use. Let's quickly add Vuetify to our Gridsome application by running the installation command below:

    # npm
    npm install vuetify --save
    #OR
    # yarn
    yarn add vuetify

Now that you've installed Vuetify, you need to register it as a plugin in your Gridsome application. You will also need to add Vuetify CSS file and a link to Google's material design icons to your app. To do that, copy the code snippet below into your project's main.js file and save:

    import Vuetify from 'vuetify'
    import 'vuetify/dist/vuetify.min.css'
    import DefaultLayout from '~/layouts/Default.vue'

    export default function (Vue, { appOptions, head }) {
      head.link.push({
        rel: 'stylesheet',
        href: 'https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css',
      })

      head.link.push({
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900',
      });
      Vue.use(Vuetify)
      const opts = {}; //opts includes, vuetify themes, icons, etc.
      appOptions.vuetify = new Vuetify(opts);

      // Set default layout as a global component
      Vue.component('Layout', DefaultLayout)
    }

Next, you need to whitelist Vuetify in Webpack so that your application can build properly. To do that, first, you need to install the webpack-node-externals plugin with the command below:

    npm install webpack-node-externals --save-dev

Then replace your project's gridsome.server.js file with the snippet below :

    const nodeExternals = require('webpack-node-externals')

    module.exports = function (api) {
      api.chainWebpack((config, { isServer }) => {
        if (isServer) {
          config.externals([
            nodeExternals({
              allowlist: [/^vuetify/]
            })
          ])
        }
      })

      api.loadSource(store => {
        // Use the Data store API here: https://gridsome.org/docs/data-store-api
      })
    }

Great! so we've just added Vuetify to our Gridsome project. But don't take my words for it. Let's quickly run the Gridsome app again and see if we observe any changes in the UI:

And we do. The presence of Vuetify in this application has already impacted the existing style which is why the app looks all jumbled up. Next, let's create a default layout that will cater to the applications Header and Footer needs. Let's start with the footer.

Footer component

Create a src/components/Footer.vue file and add the following snippet to it:


     <!-- src/components/Footer.vue -->
    <template>
      <v-footer absolute padless>
        <v-card flat tile class="orange lighten-1 white--text text-center">
          <v-card-text>
            <v-btn v-for="icon in icons" :key="icon" class="mx-4 white--text" icon>
              <v-icon size="24px">{{ icon }}</v-icon>
            </v-btn>
          </v-card-text>
          <v-card-text class="white--text pt-0">
            Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet.
            Mauris cursus commodo interdum. Praesent ut risus eget metus luctus
            accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a
            sit amet dui. Duis commodo vitae velit et faucibus. Morbi vehicula
            lacinia malesuada. Phasellus feugiat arcu sapien, et iaculis ipsum
            elementum sit amet. Mauris cursus commodo interdum. Praesent ut risus
            eget metus luctus accumsan id ultrices nunc. Sed at orci sed massa
            consectetur dignissim a sit amet dui. Duis commodo vitae velit et
            faucibus. Morbi vehicula lacinia malesuada.
          </v-card-text>
          <v-divider></v-divider>
          <v-card-text class="white--text">
            {{ new Date().getFullYear() }} — <strong>Mealsers</strong>
          </v-card-text>
        </v-card>
      </v-footer>
    </template>
    <script>
    export default {
      data: () => ({
        icons: ["mdi-facebook", "mdi-twitter", "mdi-linkedin", "mdi-instagram"],
      }),
    };
    </script>

Here, we defined a basic Vuetify footer component with a bunch of dummy text and social media icons. The icons are made available through the material design icons link we added in the applications main.js file.

Default layout

Next, open the src/layouts/Default.vue file and update it with the code snippet below:

     <!-- src/layouts/Default.vue -->
      <template>
        <v-app>
          <div>
            <v-app-bar
              absolute color="orange"
              dark shrink-on-scroll
              scroll-target="#scrolling-techniques-2"
            >
              <v-app-bar-nav-icon class="mt-5" @click="drawer = !drawer">
              </v-app-bar-nav-icon>
              <g-link
                class="mt-7 ml-3"
                style="text-decoration: none; color: inherit"
                to="/"
                >Mealzers</g-link
              >
              <v-spacer></v-spacer>
              <v-btn outlined rounded dense class="mt-5 mr-3">
                <g-link style="text-decoration: none; color: inherit" to="/shop/"
                  >Shop</g-link
                >
              </v-btn>
              <v-btn outlined rounded dense class="mt-5 mr-3">
                <g-link style="text-decoration: none; color: inherit" to="/support/"
                  >Support</g-link
                >
              </v-btn>
              <v-text-field
                v-model="searchText" @click:clear="searchText = ''"
                placeholder="Search products ..." class="mt-5 mr-4"
                style="max-width: 350px" prepend-inner-icon="mdi-magnify"
                clearable outlined rounded dense hide-details
              />
              <v-btn class="mt-4 mr-4 ml-4 snipcart-checkout" icon>
                <v-icon>mdi-cart</v-icon>
                <span class="snipcart-total-items"></span>
                <span class="snipcart-total-price">{{ this.totalPrice }}</span>
              </v-btn>
            </v-app-bar>
            <v-navigation-drawer v-model="drawer" absolute bottom temporary>
              <v-list nav dense>
                <v-list-item-group
                  v-model="group"
                  active-class="deep-purple--text text--accent-4"
                >
                  <v-list-item>
                    <v-list-item-title>
                      <v-btn elevation="0" rounded>
                        <g-link
                          style="text-decoration: none; color: orange"
                          to="/shop/"
                          >Shop</g-link
                        >
                      </v-btn>
                    </v-list-item-title>
                  </v-list-item>
                  <v-list-item>
                    <v-list-item-title>
                      <v-btn elevation="0" rounded dense>
                        <g-link
                          style="text-decoration: none; color: orange"
                          to="/support/"
                          >Support</g-link
                        >
                      </v-btn>
                    </v-list-item-title>
                  </v-list-item>
                </v-list-item-group>
              </v-list>
            </v-navigation-drawer>
            <v-sheet
              id="scrolling-techniques-2"
              class="overflow-y-auto"
              max-height="600"
            >
              <v-container style="height: 120px"></v-container>
            </v-sheet>
            <slot />
          </div>
          <Footer />
        </v-app>
      </template>

In the template section above, we've defined a basic Vuetify header that features a navigation drawer and a few buttons to switch pages. We are using the custom Gridsome <g-link> tag to handle navigation between pages.

At the moment, we have a shop page, and a support page, which we'll create later in the next part of this series. So don't bother about them just yet. Next, let set up the script section of the layout file above using the code snippet below:


     <!-- src/layouts/Default.vue -->
    <script>
    import Footer from "@/components/Footer.vue";
    export default {
      components: {
        Footer,
      },
      data() {
        const drawer = false;
        const group = null;
        return {
          drawer,
          group
        };
      },
      watch: {
        group() {
          this.drawer = false;
        },
      },

    };
    </script>
    <static-query>
    query {
      metadata {
        siteName
      }
    }
    </static-query>

If you save the changes and run the application again, you should get the following output on the browser where the app is running:

At the moment, the buttons and navigation on the app will lead to a 404 page. This is because we haven't created the /shop and /support pages yet. We'll get to that eventually in the next part of this series, but in the meantime, let's add some Hero images to make this app look even more like an e-comnerce application.

Hero

Next, update your src/pages/index.vue file with the snippet below:


    <template>
      <Layout>
        <template>
          <v-carousel
            cycle
            height="400"
            hide-delimiter-background
            :show-arrows="false"
          >
            <v-carousel-item v-for="(image, i) in images" :key="i">
              <v-sheet height="100%">
                <v-row class="fill-height" align="center" justify="center">
                  <div class="display-3">
                    <img :src="image" />
                  </div>
                </v-row>
              </v-sheet>
            </v-carousel-item>
          </v-carousel>
          <div class="separator"></div>
        </template>
      </Layout>
    </template>
    <script>
    export default {
      metaInfo: {
        title: "Mealzers",
      },
      data() {
        return {
          images: [
            "https://bit.ly/33Ehev5",
            "https://bit.ly/33Ehev5",
            "https://bit.ly/33Ehev5",
            "https://bit.ly/33Ehev5",
          ],
        };
      },
    };
    </script>

Here, we define an array of 5 images and loop through them to display each one in the Vuetify v-carousel UI component we specified in the component template. If you save this snippet and check back on the browser, you should get an updated view like so:

Conclusion

We've come to the end of this part. Before we jump on to the next part, here's a quick
recap on what we've done. In the first part, we set up a Strapi application and created a bunch of products we'll sell on our store. In this part, we just set up a Gridsome application and modified the UI to get it ready. In the next part, we'll connect this application to display the products we created with Strapi using Gridsome's GraphQL data layer. See you on the next one!

Build a JamStack food ordering application with Strapi, Gridsome and Snipcart (1)

Ekene Eze (Kenny) — Sun, 13 Dec 2020 08:16:56 +0000

This series will walk you through the processes of setting up your own food ordering application and by extension any e-commerce app using modern development tools like Strapi, Gridsome and Snipcart.

Strapi

Strapi is one of the most popular headless content management systems at the moment. What makes Strapi a great choice for me is the fact that it is:

Open-sourced
Node.js based
100% JavaScript
Developer centric and
Fully customizable amongst other things.

The Strapi team have been doing incredible work and adding more features that improve the products developer experience. In the first part of this series, we will walk through the process of setting up a Strapi application and creating products to further demonstrate Strapi's capabilities and ease of use.

Gridsome

Gridsome is a free & open source Vue.js-powered framework for building websites & web applications that are fast by default. If you're familiar with Gatsby, which is also a static site generator for React, Gridsome can be considered the Vue-based alternative. That said, Gridsome is still very unique in its own ways.

This is all thanks to its GraphQL data layer that helps pull and centralize information from external data sources (APIs, local file, CMS's). From the GraphQL data layer, the data is made available to the Vue components where you can utilize them. Finally, it gets generated into static HTML and rendered at build time by Gridsome.

Snipcart

Snipcart is a simple e-commerce solution that makes it possible for developers to add fully customizable checkout experiences to any website. What's more? Snipcart is 100% HTML and JavaScript with a great developer experience. We'll see more of its features towards the end of this series when we add checkout features to allow user's place orders for meals.

About that, Snipcart offers pre-configured payment processors like Stripe and PayPal by default while also making it possible for you to configure your custom processor of choice. That's a thoughtful feature in my opinion and I appreciate that.

What we'll build

If it is not already obvious, for this series, we'll build a Fullstack food ordering application using Strapi and Gridsome. We'll use Strapi on the backend to create our store products. Afterwards, we'll consume the products on the frontend using Gridsome and finally, we'll implement cart and checkout functionalities with Snipcart. Here's a demo and screenshots of the end product in action:

Demo:

Screenshots:

Part 1 - Generating a Strapi app and creating products
Part 2 - Setting up a Gridsome project
Part 3 - Consuming products with Gridsome and GraphQL
Part 4 - Creating single product views with Gridsome templates
Part 5 - Implementing cart and checkout with Snipcart
Part 6 - Deploying the apps

Let's get started with the first part!

Generating a Strapi app and creating products

Scaffolding a new Strapi application is a breeze. All that is required is Node. Once you have it installed (v12+) then you can run the command below in your terminal to create a new Strapi app:

yarn create strapi-app mealzers --quickstart
OR
npx create strapi-app mealzers--quickstart

This command will immediately install Strapi’s dependencies and generate a Strapi application for you. The newly created application will be available on the browser by default. Simply navigate to http://localhost:1337/admin to view it and complete the admin form.

Provide your details on the form and click the blue LET'S START button to proceed into the Strapi admin dashboard where the bulk of the work will be done:

And that is how you create a Strapi application. You can also open the application up on your favourite code editor and have a look at some of the default files generated if you're into that. In the meantime, let's go ahead and start creating products for our restaurant.

Create products

The next thing we should do is to create the products we'll display in our application. To do that, follow these steps listed below:

Click the visible blue button that says CREATE YOUR FIRST CONTENT-TYPE and type product in the display name field and click Continue to proceed:

Creating product fields

Next, you will be required to create fields that will be added to your product collection. Hence, for each product, we will have these fields —

title - The name of the meal (Text)
price - The price of the meal (Number, float)
description - Short description of the meal (Text)
rating - How the product is rated (Number, integer)
instructions - How to prepare the meal and (Text)
image - An image of the meal (Media, single media)

From the next screen shown below, let's walk through the process of creating the title field on the product collection and repeat the same process for all the other fields:

For the title field, select Text

Switch to the ADVANCED SETTINGS tab on the upper right corner of the screen and check the boxes below:

This is basically telling Strapi to make this field unique and required for every new product we create. When you're done, click Finish.

From here, you can click the + ADD ANOTHER FIELD TO THIS COLLECTION TYPE button and repeat the process for the remainder of the fields. You can decide which fields you want to mark required or unique as you see fit. When you're done with the rest of the fields, click the green save button, the Strapi server will restart and you should be presented with this screen:

Note: If you don't see this screen after the server restarts, simply refresh your browser and you should be good.

Adding products

Now that we've created all the fields that are required for our product collection, let's start adding products to the collection. Click on the Products section on the left side panel, then click on the Add New Product on the upper right corner.

The product fields are intuitive and simple to understand. Provide values for all the fields we've specified, and that's it. You can add as many products as you want to have in your online restaurant.
I have created an array containing all the products that I'm using in this project. Here's one product:

[
   {
      "id":1,
      "title":"Grilled Beef",
      "price":30,
      "description": "Beef is the culinary name for meat from cattle, particularly skeletal muscle. Humans have been eating beef since prehistoric times. Beef is a source of high-quality protein and essential nutrients. Check below for preparation instructions",
      "rating": 4,
      "instructions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "image": "https://www.themealdb.com/images/category/beef.png"
   },

]

If you would like to create the same products like mine, you can find the gist here, and quickly copy the contents over to your Strapi application.

When you're done adding products, you should get a product summary screen like this:

Fetch products

Now to fetch the list of all the products we've just created, you can easily navigate to localhost:1337/products on the browser:

Oops! we get status code 403. Basically, this means that you don't have the permission to access this endpoint. And that is expected because there's one last thing we need to do.

Setting Roles and Permissions

Strapi offers a roles and permissions feature under the settings tab where you can specify how users can access your endpoints. This will be fairly straightforward in our project. We won't be covering authentication so we'll make the endpoint completely public. To do so, click on settings on the left side panel > Users and Permission plugin > Roles > Public > Permissions and tick the boxes below:

Now when we navigate to localhost:1337/products on the browser again, we can see a list of all our products:

Conclusion

Congratulations, we've come to the end of this part. Before you go let's do a quick recap. In this part, we went over the tools we'll be using to build out our food ordering application. We also walked through the process of setting up a new Strapi application. Afterwards, we created some products that we will display on the frontend later on in this series. Thank you very much for sticking with me and see you on the next part.

Build a realtime location-based chat feed.

Ekene Eze (Kenny) — Mon, 21 May 2018 17:22:41 +0000

What I built

A mobile application that allows users share their location using Google map widgets. On clicking a Share Location button, a map widget containing the users current location is rendered in realtime to all connected users within a central chatbox. To identify each individual users location, i placed the supplied username on the map marker pointing down to their locations.

Usefulness

Well, I may have done a lengthy work there but how is this of any use to anyone ?. Well lets consider a situation where maybe your family members are all signed up on the app, y'all can share locations in realtime, If for instance, someone goes missing in the park or for some other serious cases like kidnap, all you have to do is click a button and it'll broadcast your current location to every member of your family who will then receive your location in realtime. It's just that simple. Not a big deal maybe but, it's a really useful tool to have.

Demo Link

Download the apk and try out the app

Link to Code

View Project on Github

How I built it

To best explain how i built this application, i'll like to first tell you how it works. When the app is launched, it displays an input for username to get the name of the particular user.

Once the username is supplied, the user can then click a Share Location button on the screen which will then send a request to our server with the provided username of the user and his/her current longitude and latitude. Then, the server will respond with the username, longitude and latitude of the user which we'll then use to create a Google map widget with a pin dropped on the users current location.

This will place the provided username of the user on the map marker. This widget is now rendered on the central layout where every connected user can see previously shared locations from other users.

If you are already familiar with Pusher, I bet you can already imagine how i did it. But if that's not the case, I'll provide some brief explanation to shine more light on it.

The technical bit

This will be an Android application built with Kotlin to monitor the activities of a Node.js REST API. Each time the endpoint of the API is hit, Pusher will publish an event with some information (the location shared by the user) to a channelfeed

First, i created the Android client that will communicate with our REST API. In the client, I defined a LoginActivity class and layout to handle signing users into the app when they supply a username on launching the app, no authentications necessary.

Then to render the location widget of the users from the server into a central layout in the app, I made use of Recyclerview which gave me access to an adapter class that served as the connection between my server and the client.

But first, to render the response from the server into the viewHolders in my app, i created a model class that served as a schema to define the content structure. After that i created an array list from this model in the Adapter class and then used it to populate my recyclerview object.

To make requests and get responses from the server, I used retrofit. First I initialized Pusher in the project and set it up in my MainActivity class. Then using retrofit, it was very simple for me to send a send a request with the users provided username, longitude, and latitude to the server and get a response i.e a JSONObject containing the current (longitude, latitude and username) of the user.

Then i passed this response into the Adapter and displayed it on the layout file i have modelled for it. Finally, I rendered the layout file containing the data on the recyclerview.

Then on the server side,
First i created a Node.js server and configured it with my pusher credentials such that whenever our API endpoint is reached, we’ll publish an event to a Pusher channel feed. Then send back the response as an object so we can show it in an activity feed on the client side.

Pusher events have an eventChannel, which allows them to relate to a particular topic, an eventName that is used to identify the type of the event, and a payload, which you can attach any additional information to and send back to the client.

In my case, i published an event to a Pusher channel feed when the endpoint of my API is called. Then send the response back as an object and from there pass data into my Adapter and display it

Conclusion

That's it guys. Hopefully by extension someone will extend the application from here on and build something more spectacular. The project is available on Github and i've also linked the apk for download. If you have an android device, download and give it a spin. Lastly before you log out, click the heart icon.

Build a PhoneBook with Cloud FireStore in 10 minutes

Ekene Eze (Kenny) — Thu, 19 Oct 2017 07:22:48 +0000

According to the Documentation, Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform.
Like Firebase Realtime Database it keeps your data in sync across client apps through realtime listeners and offers offline support for mobile and web so you can build responsive apps that work regardless of network latency or Internet connectivity, this is just amazing if you ask me, it solves the whole essence of PWA’s. You may ask how, well
Cloud Firestore caches data that your app is actively using, so the app can write, read, listen to, and query data even if the device is offline. When the device comes back online, Cloud Firestore synchronizes any local changes back to Cloud Firestore.
Cloud Firestore also offers seamless integration with other Firebase and Google Cloud Platform products, including Cloud Functions.
However, Cloud Firestore is still in beta release but if you’re enthusiastic (like me) and want to get hands on immediately, then this tutorial will help you get started with basic read, write, update and delete operations.
What you’ll learn
If you don’t know these yet then, you’ll
Â· Gain a better understanding of Firebase and Firestore
Â· Learn how to add firebase to your project
Â· Learn the FireStore database model and structure
Â· Learn how to write to Cloud FireStore
Â· Learn how to read from Cloud FireStore
Â· Learn how to update an existing data in Cloud FireStore
Â· Learn how to delete data from Cloud FireStore
Â· Learn how to listen for changes in realtime
Â· Learn how to combine all these features to create a Phonebook
As usual I like to prepare my tutorials to be very relative and not so abstract, so i won’t be talking too much, let’s start building something with FireStore.
Create a new android studio project and connect it to firebase. Once again there are two ways you can do this depending on the version of Android studio you’re on. If you’re using the latest version of Android Studio (version 2.2 or later), i recommend using the Firebase Assistant to connect your app to Firebase. The Firebase Assistant can connect your existing project or create a new one for you and automatically install any necessary gradle dependencies. Here’s how you can do it
To add firebase to your app with Firebase Assistant in Android Studio:
Â· Click Tools > Firebase to open the Assistant window.
Â· Click to expand one of the listed features (for example, Analytics), then click the provided tutorial link (for example, Log an Analytics event).
Â· Click the Connect to Firebase button to connect to Firebase and add the necessary code to your app.
That’s it!
If you are using the earlier versions of Android Studio or you prefer not to use the Firebase Assistant, you can still add Firebase to your app using the Firebase console.
To manually add Firebase to your app you’ll need a Firebase project and a Firebase configuration file for your app.

Create a Firebase project in the Firebase console, if you don’t already have one. If you already have an existing Google project associated with your mobile app, click Import Google Project. Otherwise, click Create New Project.
Click Add Firebase to your Android app and follow the setup steps. If you’re importing an existing Google project, this may happen automatically and you can just download the config file.
When prompted, enter your app’s package name. It’s important to enter the package name your app is using; this can only be set when you add an app to your Firebase project.
At the end, you’ll download a google-services.json file. You can download this file again at any time.
If you haven’t done so already, copy this into your project’s module folder, typically app/. Then you can add any of the Firebase libraries you’d like to use in your project to your build.gradle file, it is good practice to always add com.google.firebase:firebase-core. This guides are according to the firebase documentary however, if all of this is still not clear to you, you can always find more content on how to setup your firebase project here Now that you have your firebase project set up, let’s add the dependency for FireStore. As at the time of writing this tutorial, the latest version is compile â€˜com.google.firebase:firebase-firestore:11.4.2’ so add it to your app level build.gradle file dependency block. It might have changed depending on when you’re reading this so always check the Docs for the latest dependency and sync. Before we proceed let’s take a moment to understand the FireStore model Cloud Firestore is a document database; it stores all your data in documents and collections. Documents operates more like containers of fields(key-value pairs) of diverse data types however a document cannot contain other documents but can point to a sub-collection. Collections on the other hand operate also like documents but in its case, it’s a container of documents hence, it can’t contain anything else but documents.

From the above image, “Users is a collection of 3 documents “Joe”, “Tammy and “Vic”. Document Joe however, points to a sub-collection “Workouts which in itself has 3 documents (“Yoga level 2”, “Beginner Jogging”, and “7-minute thighs”). Then document “7-minute thighs further more points to a sub-collection “History which in turn holds 3 more documents etc.
This is deep nesting and it may seem a little bit deep but it is very efficient for query performance in both simple complex query structures. With this idea of how Firestore works, let’s dive into the firebase project we created earlier and start writing some code.
What are we building?
For the purposes of understanding the basics of Firestore in the best simple way, we’ll be building a Phone Book database that stores contacts with 3 fields (Name, Email and Phone). We’ll demonstrate how to write, read, update and delete data from the database.
Let’s get cracking…
Usually we would have started with setting up EditTextViews in the layout files but we won’t be taking inputs from users yet so we’ll just supply all the data we want to store to the database from our java files….for now. So open up MainActivity and initialize Firestore

You may have noticed I also initialized a Textview object and some String variables there; we’ll use the Textview to read data from the database and the String variables as “keys for storing data into our document.
Considering the model we’ll be working with, it is best to think of the Phonebook we are building as the collection, so let’s add/save a newContact to our PhoneBook.

Here we first created a method addNewContact(), the method will create the newContact that we’d want to save in the PhoneBook and then pass the fields to it. Next we need to specify in which document we want to save the contact. We do this by extending the Firestore instance we created to accommodate both the collection and the document.
“db.set (newContact) this creates the document if it doesn’t already exist and also creates the PhoneBook collection so as to store the data in the appropriate path according to the db path we initialized.
Then we add an OnSuccess/FailureListeners to make a Toast and keep us informed if the contact was registered successfully or if the registration failed.
Looks like we’ve got it all set up, before we run the app, we’ll need to head on over to the firebase console and tweak our RULES Tab a little bit to allow us read and write to the database because at default, nobody can read or write to it. So go to your firebase console, open the project and make sure you select Firestore in the database tab

Then open the RULES Tab, by default it looks like this

Then add this block of code to override the default security settings and gain external read and write access to your database,

Match/your-collection/{anything=}{
allow read, write: if true;
}

Now your RULES Tab should look like this

This is a terrible idea security wise, if you’re working on a real project or something proprietary, you would definitely want to properly authenticate users and define your security measures clearly. This tweaking is only serving the purpose of this tutorial.
Haven set up the security rules in the console, publish it and wait for a few minutes after which you can now run the app and go back to the DATA Tab on the console. Hurrray!! App works…. You’ve just stored your your data to FireStore.

Now let’s try and read the data we’ve stored in the database to a TextView.
READ | First we create ReadSingleContact() method that’ll read the data from the database and pass the data to the TextView object we earlier initialized for this Purpose.

If we run the app, it populates the TextView object with the information stored on the database as is expected.

UPDATE | Next we’ll try to update the already stored Contact informations

Now running the app will update the earlier stored data with the newly provided values in the UpdateData() method.
In the DATA Tab on your firebase console, you’ll find that the changes have been updated.

And if you run the ReadSingleContact() method again, it’ll update the TextView with the current details.
REALTIME UPDATE
Next up, we listen for update on the document “Contacts”, if we update these changes without running the code to Read (fetch) data from the database (ReadSingleContact()), we might not be able to see the changes in the UI so we’ll create a method that listens for update in realtime and makes a Toast to notify users of the changes in the database.

Build the Phonebook app
Now let’s take input from users instead of just adding and updating the database from the studio. I’ll go ahead and create view objects on the mainActivity layout file to take Inputs for the 3 fields (name, email and phone) such that we can save whatever data the user types into any of these fields to the PhoneBook.
We’ve already done all the major work required so just create the view objects in the layout file and initialize them in the MainActivity.java file. Here’s my activity_main.xml

Next we initialize the views in the java file

Notice the additions of the view objects as compared to the code gist we had under the WRITE heading. Then to save the details coming from this Views to the database, we’ll just tweak our newContact.put() method a little bit to capture its value from the EditTextViews. So we’ll open up the addNewContact() method and edit it to capture these changes

Then we need to set the save button to call this method, so lets set an onClick listener to the button and call the method in it.
save.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
addNewContact();
}
});
Then finally let’s update the TextView with any changes we make to the database in realtime, such that if a user fills up the input fields and clicks the save button, the TextView will update the changes in realtime wether there’s internet Connectivity or not.

And that’s it!! At this point, Users can input their details and save it to the database as well as have that same details read from the database and displayed on their screen.
DELETE | Finally lets perform the delete operation to delete the Contact from the database.

This method successfully deletes the contact from the PhoneBook database. So congratulations if you followed up to this point, this means you can now perform basic operations on one of the most sophisticated and newest online database in the world. This is just a glimpse of what you can do with Cloud FireStore, there are a lot more features and operations to perform. My intention is just to get you started with the basics.
Thanks for reading, you are welcome to make contributions and ask for clarifications anytime you deem fit. Like always, I’m available (twitter @kenny_io) to provide more clarifications and answer your questions if you have any.
The source code is also available on github if you need it.

Add Firebase Authentication to your App in 7minutes

Ekene Eze (Kenny) — Tue, 17 Oct 2017 12:27:07 +0000

Based on popular demand from developers looking to build their stuff on firebase, I’ve put this tutorial together to help with the basics of firebase authentication.
First off, you need to create a Google account “if you don’t have one” then use it to create a firebase account at console.firebase.google.com. When your firebase account is ready, then connect it to your app.
I thought of different ways to handle this topic to bring out the whole essence of it and make sure you understand it clearly so I arrived at building a small firebase app that lets users signup, with their signup credentials, login with those credentials and retrieve as much information as they want.
Hopefully by building this app, you’ll learn how to handle authentications seamlessly, so either build along with me or just read along, either way, you’ll learn it. For my web friends, i’ll continue this article for web on my next release; right now I’ll just continue building from android studio.
So create a new android studio project called “FreeStyle” (if you can’t or still want to learn how to create a new project in AS, see my article on Parsing remote JSON, I explained how to do it in details).
Next is to connect your app to firebase, there are more than one way to do this but I’ll stick with the way I prefer amongst other ways and that is, in your android studio
Ã˜ Click on the tools tab
Ã˜ Click on firebase
Ã˜ Click Authentication and
Ã˜ Click connect to firebase
After it has created the firebase project,
Click on “Add firebase Authentication to your project”
Note: your system has to be online for this part and if you’ve not done this before, it’ll probably ask for your firebase credentials so just supply it and proceed.
Once your projected is connected to firebase, you’ll get a prompt to allow firebase make changes to your gradle files, once you allow it, it’ll automatic add the firebase dependency to your build.gradle file and Boooom!! Your firebase app is ready, congrats!! ðŸ˜€ðŸ˜€ðŸ˜€
You know it’s really good practice to smile and be happy when you accomplish something in your code, I mean, we can’t see it yet so it’s totally cool if you appreciate yourself every once in a while.
Now that you’ve had fun with yourself, let’s start creating the necessary layouts, first we’ll create the Registration layout. It’ll have 2 input fields; say an email field and a password field. This part should be fairly simple for everyone but for the sake of completeness, I’ll walk you through how to do this. Since you already have activity_main.xml, let’s just work on it instead of creating a separate layout file for Registration.
So open your activity_main.xml file and type in this code

You should pay more attention to the id’s you assigned to the view objects because you’ll use them for reference in other Activities but if you used exactly the same id’s as i did in the snippet above, then you’ll be just fine.

Now when the user fills up the fields and clicks the register button, their credentials should be stored in firebase and upon successful registration, the ProfileActivity will be launched so they can view their details as it’ll be displayed in the Profile page.
So in the MainActivity.java file we declare instances of the view objects and that of the FirebaseAuth;

Now let’s create a method that registers the user. First we’ll get() the values of the input fields and store them inside String variables so that we can use them as Strings to create the user in the firebase createUserWithEmailAndPassword() method.
Next we set conditions to check for empty or malformed input fields such that users cannot not register with malformed email addresses or empty password/email input fields.
Then finally to create the user on firebase, we call the createUserWithEmailAndPassword () method on the FirebaseAuth Instance and implement the onComplete () method. Inside the onComplete () method we’ll decide what happens when the user is successfully registered or when the registration fails. In my case, if the user registers successfully, then I’ll make a Toast (registration successful) and launch the users profile, if it fails, I’ll just make a Toast (registration failed). However I’ll surround everything inside the onComplete() method with “try and catch” since it’ll be performing network functions.

Then on the register button, we set an OnClickListener to call the registerUser() method. If the user is already registered, we also set an OnClickListener on the login button to start the LoginActivity when the button is clicked.

So let’s now create the ProfileActivity class, right click on java and select New>Activity>Empty Activity and name it ProfileActivity.
In the activity_profile.xml file, create the view objects that will hold the data that you’d like to display in the ProfileActivity. In my case, I want to display their email and user id. Hence, i’ll have 2 TextViews with their corresponding id’s.

In the ProfileActivity.java file, declare the FirebaseAuth instance and initialize it in the onCreate() method as we did for the MainActivity class.
Since we’ll be displaying the users information, we’ll also need to declare FirebaseUser and instantiate it as well as the instances of the view objects.
Then we display the users details on the view objects we created on the layout file.
Thus:
FirebaseUser user = mAuth.getInstance().getCurrentUser();
If (user!= null){
String email = user.getEmail();
String Uid = user.getUid();
}

i also added a logout button here so that the user can log out and return to the LoginActivity when they are done viewing their profile. it’s fairly simply to do, just add a button on the layout file, give it an id say button_logout. in the ProfileActivity class just initialize it and set an OnClickListener on it. the onClick method should do if(user !=null){
mAuth.signOut
}
LoginActivity
Create another Activity called LoginActivity (do this the same way we created the ProfileACtivity(). Open the activity_login.xml file and create input fields for login and password.

Next we open the LoginActivity.java file and declare instances of the view objects and the FirebaseAuth. Then initialize them in the oncreate() method as we did for the ProfileActivity.

Now let’s create a method that’ll login the user. First we’ll get() the values of the input fields and store them inside String variables so that we can use them as Strings to sign the user in to firebase with the signInWithEmailAndPassword() method.
Next we set the signInWithEmailAndPassword() method on the FirebaseAuth instance and implement the onComplete() method. Inside the onComplete() method we’ll decide what happens when the user is successfully signed in or when the sign in fails. In my case, if the user signs in successfully, then I’ll authenticate the user and launch the profileActivity, if it fails, I’ll just make a Toast (couldn’t login).

Then on the login button, we set an OnClickListener to call the loginUser() method.

Note before you run the app, you’ll need to set Internet permisions in the AndroidManifest.xml file and also enable Email/Password in your firebase console as the SignIn Method.
Secondly, to see the users who have successfully registered on your app, log in to your firebase console, click Authentication and click the users tab.

There are a lot more features you can implement, like storing data in the firebase database, retrieving it, adding more fields to the registration input fields and retrieving them etc. this tutorial is only serving the purpose of authentication to enable your users SignUp and SignIn into your app with their credentials. You can equally extend it to add email verifications, Twitter, Facebook or Google Sign in methods etc.
Like always, I’m available (twitter @kenny_io) to provide more clarifications and answer your questions if you have any.
The source code is also available on github if you need it.

DEV Community: Ekene Eze (Kenny)

Token Gating Websites with Collab.Land

How to share DEV.to drafts

Shopify announces enhanced Storefront APIs - A first look with Gridsome and Netlify 🔥🔥

Getting started

Authentication

Products

Get all products

Get a particular product

Cart

Create cart

Add items to cart

Remove items from cart

Thoughts?

How to rollback a deploy in 2 seconds on Netlify

So how does it work on Netlify?

How to use Distributed Persistent Rendering in Nextjs with Netlify

Set up Next.js

Set up the news data source

Create the news page

Deep dive into the Vue Composition API's watch() method

Introduction to the Watch API

Watch API with ref

Watching a single ref

Complex data types

Nested objects/arrays

Watching multiple ref’s

Watch API with Reactive

Watching a reactive array

Watching a nested reactive array

Watching a reactive object

Watching a nested object

deep

Watch a specific property in the reactive object

watchEffect

More resources

Building an Event Registration Page with Composition API and Serverless Functions

Reactivity in the Composition API

ref

Accessing ref values

Reactive

toRefs

Computed

Methods

Serverless function

event

context

More resources

Build a JamStack food ordering application with Strapi, Gridsome and Snipcart (2)

Table of Contents:

Installing Gridsome

Setting up Vuetify

Footer component

Default layout

Hero

Conclusion

Build a JamStack food ordering application with Strapi, Gridsome and Snipcart (1)

Strapi

Gridsome

Snipcart

What we'll build

Contents

Generating a Strapi app and creating products

Create products

Creating product fields

Adding products

Fetch products

Setting Roles and Permissions

Conclusion

Build a realtime location-based chat feed.

What I built

Usefulness

Demo Link

Link to Code

How I built it

The technical bit

Conclusion

Build a PhoneBook with Cloud FireStore in 10 minutes

Add Firebase Authentication to your App in 7minutes