DEV Community: Eyuel Berga Woldemichael

Develop a Cryptocurrency Tracking WebApp with Instant Email Notifications

Eyuel Berga Woldemichael — Wed, 18 Jan 2023 15:07:11 +0000

Background

Crypto Track is a web application to help track market changes on your favorite cryptocurrency and receive instant email notifications. Cryptocurrency use is rapidly expanding, and many people are putting their money and resources into it. However, its volatility sets it apart from other assets. Even though staying current with market trends might be time-consuming, there are also considerable benefits to doing so. Crypto Track essentially aims to make this a lot easier by notifying subscribers when the desired change is reflected on the market.

Courier is ideal for this kind of application since it makes it simple to integrate notification systems. We will be using the Courier API to send email notifications for now, but it is quite easy to extend it to use SMS or other communication channels.

We will also be using Supabase, an open-source alternative to firebase with a built-in database and authentication system. We will use React for building out the front end and Chakra-UI for styling our React components. We will also set up a cron job that calls a webhook (that we will be building using Express). We will also use the CoinGecko API to fetch the latest cryptocurrency market data.

I know that's a lot! But if you have a working knowledge of Javascript, React, and have worked with APIs in the past, you can easily follow along.

Instructions

Quick Overview

Let’s start with a quick overview of what we will be building. We have a web application with authentication. After login, users are presented with a simple form for subscribing to notifications. The form has options for selecting the market data metrics, the cryptocurrency, and when to be notified, by choosing a target value and the change(whether the current market data is greater than or less than the specified target value). There is also a section to manage notifications. Here users can see all subscribed notifications and also have the option to remove them.

On the backend, we have Supabase, CoinGecko, and Courier working together. Authentication and data storage is handled in Supabase. We also have scheduled webhook calls to fetch the latest market data and notify subscribers using the Courier API.

Now that you have a general idea of what we will be building, let's get right to it.

Part 1: Setting Up Courier

Go to the "Channels" page after signing into your Courier account. We need to configure an email provider of choice. Let’s go with Gmail. Once that is done, the email provider should appear under "Configured Providers."

Channels and providers are important features of the Courier API. You can read more about them in this article

We then need to head over to the ‘Designer’ and create a new brand with the Crypto Track logo and theme colors. All emails that are sent will have this in the header and footer.

The Notification Designer allows us to create notification templates througn a nice GUI. You can read more about the designer here and also more about brands is avaliable on the docs

Next, we will create our notification template. We will use the brand we create earlier here. Additionally, we will enclose the dynamic portions of the message inside curly braces so that they may be filled out later on during our API call.

Part 2: Creating a Supabase Project

Head over to the Supabase website and log in to your account(or create a new account if don’t have one). We are going to create a new project named ‘Crypto Track’.

Configure Email Auth Provider

By default, the email Auth provider is enabled but we need to make sure the site URL and redirect URLs are pointing to our dev server running on localhost.

Creating Database Tables

We need to create two tables, the first one ‘notifications’ is for storing the subscription information for users and the other ‘snapshot’ is for saving the most recent market data to enable us to send notifications only when there is a significant change(we will talk about this in more detail later). Let’s use Table Editor to create the tables. Head over to the ‘Table Editor’ page and click on ‘New Table’.

First, we will create the notifications table. The table below summarises all the columns along with a description:

Column	Description	Type	Primary
`email`	The email address of the user	text	Primary
`coin`	The cryptocurrency to track	text	Primary
`metric`	The market metric to track	text	Primary
`change`	The change to track(true for greater than or false for less than)	boolean	Primary
`value`	The target value to compare with the latest market data	numeric	Primary
`created_at`	Date created	timestamptz
`updated_at`	Date updated	timestamptz

You may have noticed that we have more than one primary key; we create a Composite primary key by combining the five columns to uniquely identify each row in the table so that users don’t subscribe to the same notification twice.

This is how the table definition should look like in our Table Editor. Be sure to check the box to 'Enable Row Level Security (RLS)', we will use it later to create the table's authorization rules.

Next up is the ‘snapshots’ table. This table holds a recent snapshot of the market data for a cryptocurrency.

Column	Description	Type	Primary
`id`	The cryptocurrency	text	Primary
`price_change_24h`	The price change in 24 hours	numeric
`price_change_percentage_24h`	The price change percentage in 24 hours	numeric
`price_change_percentage_1h_in_currency`	The price change percentage in one-hour	numeric
`current_price_market_cap_change_24h`	The market cap price change in 24 hours	numeric
`ath_change_percentage`	All-time high change in percentage	numeric
`atl_change_percentage`	All-time low change in percentage	numeric
`market_cap_change_percentage_24h`	Market cap change percentage in 24 hours	numeric
`created_at`	Date created	timestamptz
`updated_at`	Date updated	timestamptz

Securing Data Access using Row-Level Security

We will need to add authorization rules to the notifications table so that users can only access and modify their data. We do this by adding a Row-level security policy to the table.

RLS is a feature that allows restricting access to rows in a table, you can read more about it here.

Navigate to ‘Authentication’ page and then ‘Policies’. Create a new policy on the notifications table by selecting the ‘Create a policy from scratch option.

We will create a custom policy for ALL operations that will only allow reading and modifying notifications with the same email value as the authenticated user's email. We will use this for code for both the USING and WITH CHECK expression:


auth.email() = email

Part 3: The Web Frontend

Initializing a new project using Vite

Vite is a build tool for frontend applications, we will be using it to set up our React development server. Run this command to create a new project.

$ yarn create vite crypto-track --template react

The command above uses yarn but if you prefer to use npm or pnpm you can substitute that. You can find more info on that on the Vite Getting Started page.

After that, we need to add a couple of packages to our newly created project. Make sure you are at the root of the project folder before running the commands below:

$ yarn add @supabase/supabase-js @chakra-ui/react @emotion/react @emotion/styled framer-motion

We install the Supabase client library and also Chakra-UI which we will be using to build our React components.

Creating our React Components

Let’s start by modifying the main.js file. We need to wrap our main component with the ChakraProvider to use Chakra-UI components in our app. Here is what our main.js file should look like now.


import React from 'react'
import ReactDOM from 'react-dom/client'
import { ChakraProvider } from '@chakra-ui/react'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>
)

We will initialize the Supabase client inside our App.jsx file. Before that, we need to set two environment variables. Create a .env file at the root of the project folder and add the following values:

VITE_SUPABASE_URL=?
VITE_SUPABASE_KEY=?

We get these values from the project Settings page on the API tab. The VITE_SUPABASE_KEY is the anon public key, which is displayed in the Project API keys section.

Then we will add an onAuthStateChange listener, that will check if the user is authenticated and display either the Home component or the Auth component. We are using the useState and useEffects hooks here, you can find more details on them on the React Docs


function App() {
  const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
  const supabaseKey = import.meta.env.VITE_SUPABASE_KEY;
  const supabase = createClient(supabaseUrl, supabaseKey);
  const [user, setUser] = useState(null);

  useEffect(() => {
    const session = supabase.auth.session();
    setUser(session?.user ?? null);

    const { data: authListener } = supabase.auth.onAuthStateChange(
      async (event, session) => {
        const currentUser = session?.user;
        setUser(currentUser ?? null);
      }
    );

    return () => {
      authListener?.unsubscribe();
    };
  }, []);

  return <>

    {!user ? <Auth supabase={supabase} /> : <Home user={user} supabase={supabase} />}


  </>

}

We haven’t created those two components yet, so let’s start with the Auth component. In the Auth component we want to handle user login and signup. We will be using the Supabase client here, which we receive from the App component as a prop(you can read more about props here). Basically, we will be calling the auth.Signup and auth.SignIn methods to authenticate the user. We will also use some Chakra-UI components to build out the page.

export default function ({ supabase }) {

const handleSignInMagicLink = async (data) => {

        const { error } = await supabase.auth.signIn({
            email: data.get('email'),
        });
        handleError(error);
        alert("We have sent you a magic link. Please check your email inbox.")

    }
    const handleSignIn = async (data) => {
        const { error } = await supabase.auth.signIn({
            email: data.get('email'),
            password: data.get('password'),
        });
        handleError(error);
    };
    const handleSignUp = async (data) => {
        const res = await supabase.auth.signUp({
            email: data.get('email'),
            password: data.get('password'),
        });
        handleError(res.error);
        alert("We have sent you a confirmation email. Please check your inbox.")
    };

}

The whole code is a bit long to include here, but you can find the full version on GitHub

This is what the rendered Auth component looks like:

Next up is the Home component. The Home page has four sub-components:

A form to create a notification (Create.jsx)
A component to display a notification (Notification.jsx)
A component to hold a list of notifications (NotificationList.jsx)
A component to display current cryptocurrency market data (DataDisplay.jsx)

We place them all in folder named components. These are presentational components, so they don’t have any complex logic. You can check them out here

We handle all the logic for creating notifications and fetching active subscriptions on the Home component using the Supabase client.


const handleCreate = async (e) => {
        e.preventDefault();
        const data = new FormData(e.target);
        const payload = {
            email: user.email,
            coin: data.get('coin'),
            metric: data.get('metric'),
            value: parseFloat(data.get('value')),
            change: data.get('change') === "+" ? true : false,
        }
        setLoading(true);
        const { data: res, error } = await supabase
            .from('notifications')
            .insert([payload]);
        setLoading(false);
        handleError(error);
        setNotifications((prev) => ([...prev, ...res]))
    };

    const loadNotifications = async () => {
        setNotificationLoading(true);
        const { data, error } = await supabase.from('notifications').select();
        handleError(error)
        setNotifications([...data]);
        setNotificationLoading(false);
    };

We also handle displaying the latest cryptocurrency market data by calling the CoinGecko API.


const onShowCryptoData = async (id) => {
        setDataLoading(true);
        try {
            const res = await fetch(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=${id}&price_change_percentage=1h`);
            const list = await res.json();
            setMarketData(list[0]);
            onOpen();
        }
        catch (e) {
            alert(JSON.stringify(e));
        }

        setDataLoading(false);
    }

You can see the complete source-code from the Home component on GitHub.

Part 4: Setting Up a Scheduled Webhook

Creating a Webhook

We will now need to create a webhook that will fetch the latest market data and notify subscribers. But we also want it to run periodically so that users don’t miss anything. To do that, we will extend the Postgres database hosted on Supabase to act as a CRON server.

Let’s get started by creating our webhook. First, we need to create a new Nodejs project. Create a new folder called cron, and run the following command:

$ yarn init -y

Next, we add our dependencies. We want the server to run on Express(https://expressjs.com/) so we will add that and also the Courier Javascript client, the Supabase Javascript client and axios.

$ yarn add  @supabase/supabase-js @trycourier/courier axios

We need to get our authorization token to set up the Courier client. You can get this token from the Notification details page.

After retrieving our token we can create an instance of our Courier client:


import { CourierClient } from "@trycourier/courier";
const courier = CourierClient({ authorizationToken: process.env.COURIER_KEY });
export default courier;

There are a lot of utility functions we need to create for working with the Supabase database and also fetching latest market data. You can see all of them on GitHub. The most important one we need to focus on is the notification.js file. This holds the logic for how we notify new market changes to subscribers and send emails using the Courier API.

The main function here is notify:


const notify = async (supabase) => {
    // get all notifications
    const notifications = await getAllfromTable(supabase, "notifications");

    // get unique coins from the notification and load market data 
    const coins = getUniqueCoins(notifications);
    const marketData = await getLatestMarketData(coins);

    // create a lookup for market data
    const marketLookup = createLookup("id", marketData);

    // get previous snapshot of market data
    const snapshots = await getAllfromTable(supabase, "snapshots");

    // create a lookup for snapshot data
    const snapshotLookup = createLookup("coin", snapshots);

    // iterate over all notifications and evaluate if email should be sent
    const emails = [];
    for (const notification of notifications) {
        const email = shouldNotifyChange(notification, marketLookup, snapshotLookup);
        if (email) emails.push(email);
    }

    // take new snapshot of market data
    updateSnapshot(supabase, marketData);
    const requests = [];
    for (const email of emails) {
        const id = await sendEmail(email);
        requests.push(id);
    }
    return requests

}

On the notify function, we are fetching all notifications, snapshots and latest market data. Then we evaluate if a notification should be sent by calling the shouldNotify method, if so we add the subscription information to a list. We then go over this list and call the sendEmail method to notify subscribers about the latest market change. We also take a new snapshot of the market data and save it to the database.

The shouldNotify function is where we determine if we need to notify the user about the latest market change.


export const shouldNotifyChange = (notification, marketLookup, snapshotLookup) => {
    const { metric, change, value, coin, email } = notification;

    // get latest market data for coin
    const latestData = marketLookup[coin];

    // skip if latest data not found
    if (!latestData) return false;

    // get snapshot data for coin
    const snapshotData = snapshotLookup[coin];
    // check if the change has not already been notified
    if (snapshotData) {
        // get value from snapshot 
        const snapshotValue = snapshotData[metric];
        if (snapshotValue)
            if (compareChange(value, snapshotValue, change)) return false;

    }

    // get the requested metric value
    const latestValue = latestData[metric];

    // check if it should be notified  
    if (!compareChange(value, latestValue, change)) return false;
    const valueSuffix = metric.includes('percentage') ? "%" : "USD";
    return {
        email,
        metric: MetricMap[metric],
        targetValue: `${value} ${valueSuffix}`,
        latestValue: `${latestValue} ${valueSuffix}`,
        change: changeMap[change],
        coin: latestData.name
    }

}

Here we check if the latest market change is what the user wants to be notified. By comparing with the snapshot data, we also ensure that the user won't get notified if the change has already been notified.

We use the Courier API on the sendEmail function to send email notifications:



const sendEmail = async ({ email, metric, targetValue, latestValue, change, coin }) => {
    const { requestId } = await CourierClient.send({
        message: {
            to: {
                email: email,
            },
            channels: {
                "email": {
                    override: {
                        subject: `New update on the ${metric} of ${coin}`
                    }
                }
            },
            template: "REPLACE-WITH-YOUR-TEMPLATE-ID",
            data: {
                metric,
                targetValue,
                latestValue,
                change,
                coin
            },
        },
    });
    return requestId;
}

One thing to note here is, the template field should match the Notification template ID we created earlier, which you can find on the details page.

Now that we have defined all our notification logic, we will create our express app on the index.js file:


import express from "express";
import cors from "cors";
import SupabaseClient from "./supabase.js";
import notify from "./notification.js";

const app = express();

app.use(cors());

app.post("/", async (req, res) => {
  res.set("Content-Type", "application/json");
  try {
    const emails = await notify(SupabaseClient);
    return res.send(JSON.stringify({ message: "success", emails }));
  }
  catch (error) {
    console.log({ error })
    return res.status(500).send(JSON.stringify(error));
  }
});

const PORT = process.env.PORT || 5000
app.listen(PORT, () => {
  console.log(`Running on port ${PORT}.`);
});

export default app;

Sending a post request to the root route will call the notify method to send emails to subscribes if there is a desired change in the market.

Postgers CRON Server

Connecting our webhook to our Postgres cron server is the last step. Two extensions must first be added to our Postgres database. Run the following scripts to add the "http" and "pg cron" extensions in the SQL editor on the Supabase project dashboard:


create extension if not exists http;
create extension if not exists pg_cron;

After completing that, we can configure our webhook to be called periodically. But in order for the webhook to be accessible by our Postgres cron server, we either need to deploy it or use a service like ngrok. Then we can run the script below to set up a cron job that runs every minute:


select
  cron.schedule(
    'market-data', 
    '* * * * *',
    $$
    select status
    from
       http_post(
        'https://my-crypto-track-webhook.url/',
        '{}', -- payload
        'application/json'
      )
    $$
  );

Conclusions

And we are done, I hope you enjoyed this tutorial. Courier provides an easy way to handle notifications through different channels seamlessly, it is developer-friendly and has a comprehensive documentation. This project was done as part of the Courier Hacks hackathon and due to time limitations, I focused only in including email notifications. I encourage you to integrate more channels to Crypto Track like SMS, Discord and send a Pull Request to the Github Repo. You can find the full source code on Github and also check about the demo here.

About the Author

Eyuel is a software developer currently living in Boston. He has worked with various web frameworks and has extensive knowledge of JavaScript. He is also passionate about open-source and writes technical articles on software development.

Quick Links

🔗 Courier Docs

🔗 Postgres as CRON server.

🔗 CoinGecko API

🔗 Chakra-UI Docs

🔗 Supabase

3 Things You Should Know about Memoization in React

Eyuel Berga Woldemichael — Mon, 31 Jan 2022 11:14:32 +0000

Memoization is a technique of caching the results of a computationally expensive function. In React we can use this technique to avoid unnecessary re-renders and expensive recomputations. React provides three methods for this:

memo: a higher-order component used for memoizing components.
useMemo: hook for memoizing a value which is expensive to compute
useCallback: similar to useMemo, used for memoizing a callback function.

Even though memoization is great for improving performance, if used inappropriately it can have the opposite effect. Let's look at the top three things you should be mindful of before using these methods in your react projects.

1. Memoization is meant for performance optimization

Unless you encounter performance issues in your application, it is probably not a good idea to use any of the memoization methods. Your code should work without memoization(however slow it may be). As a rule of thumb, you should consider optimizing after implementing your components.

If you notice performance issues, the React DevTools can help in finding performance bottlenecks. But also keep in mind that all performance issues can't be solved with memoization. So it is best to always check if there is any improvement gained from it.

Also, be wary of premature optimization, so you don't waste time optimizing without the need for it. Most operations in JavaScript are optimized and overall the React framework is very performant. So, in most cases, further optimization might not be needed.

2. Memoization has performance overheads

Performance optimizations mostly come with some trade-offs. This is especially true with memoization. By caching previous results, we are using more memory in turn for better speed. So, you should always consider if the cost of memoization is worth it. This depends on the use case, but it is worth noting that there can be an extra overhead to its use if performance improvements are not substantial.

3. React doesn't always guarantee memoization

On the React docs if you see the section on useMemo it reads:

You may rely on useMemo as a performance optimization, not as a semantic guarantee

If you also look at React.memo in the docs you will find this:

This method only exists as a performance optimization. Do not rely on it to “prevent” a render, as this can lead to bugs.

React will cache results for as long as possible, but in some cases, it may also choose to invalidate the cache. So, there is no guarantee that the memoized value has not been discarded. This means you can't rely on React to always memoize values for you. To avoid introducing bugs to your application, always use memoization methods to optimize performance and nothing more.

Conclusion

I hope you now have all the information you need to use memoization in React responsibly. Please do share your comments and suggestions, and thank you for reading.

This article was originally published here

Singleton Pattern

Eyuel Berga Woldemichael — Tue, 14 Dec 2021 18:33:11 +0000

Singleton pattern allows creation of only a single instance from a class

Motivation

Consider a case where your application needs to access a shared resource from different places at various times. And also keep a consistent state between each access.

The Singleton pattern solves this problem by creating a class that is responsible for creating and insuring only a single instance is created, while allowing direct access to the instantiated object.

Applicability

The Singleton pattern can be used in cases where:

The class have exactly one accessible instance

Structure

Participants

Singleton: defines an Instance operation that lets clients access its unique instance

Collaborations

Clients access a Singleton instance only through the getInstance method.

Advantages

Can be sure of the number of instances
Can globally access instance

Disadvantages

Violates single responsibility principle. It is responsible for making sure that one instance is being created and also provide the core functionalities of the object itself.
It is hard to unit test because global states are hard to isolate.
Causes an object to be globally mutable which may not be desired in some cases.

Implementation

Singletons can be implemented in numerous ways:

Eager initialization: Object of class is created when it is loaded to the memory
Lazy initialization: In this method, object is created only if it is needed.
Thread Safe Singleton: A thread safe singleton in created so that singleton property is maintained even in multi-threaded environment.

Demo

The money received by customers of the cafe is stored in a cash register. It is important that there is only one cash register per cafe, so that the income of the cafe is accurately known.

To solve this problem, we implement CashRegister as a singleton. we make the constructor private so nobody can instantiate the class. And we implement a method getInstance to be called by user to obtain instance of the class.

Prototype Pattern

Eyuel Berga Woldemichael — Mon, 13 Dec 2021 23:23:11 +0000

Prototype(Clone) pattern allows copying an object using a prototypical instance

Motivation

Consider an application which requires using the same object numerous times. To create an exact clone of the existing object, you could create a new instance from the class and copy all the values. But this creates a problem if the object contains private properties and methods, so an exact copy might not be possible. In some cases, you might only know the interface and not the concrete class of the object.

The Prototype pattern solves this problem by implementing a clone method that allows creating an exact copy of an existing object without being dependent on the class of the object.

Applicability

The Prototype pattern can be used in cases where:

duplicating an object is favorable instead of building from scratch
the code is independent of any other third-party code

Structure

Participants

Prototype: declares an interface for cloning itself
ConcreteProtoype: implements cloning operation
Client: creates a new object by asking a prototype to clone itself

Collaborations

A client initiates the prototype clone operation

Advantages

Allows clients to add and remove prototype at run-time by registering a prototypical instance.
Allows us to avoid subclass hierarchy by using clone method.

Disadvantages

Cloning might be difficult when the existing class internals doesn’t support cloning or if there is a complicated nested structure.

Implementation

It is common to implement the prototype pattern using a prototype manager. A prototype manager is an associative store that returns the prototype matching a given key.

Demo

The waiters that serve at the cafe all have the same uniform and salary but different tables. The owners of the cafe want an easy way of getting new waiters, without going through the trouble of starting from scratch.

To solve this problem, we first create an abstract Prototype class with a copy method to enable cloning the object. We then create a Waiter class extending the Prototype class, implementing the cloning method. After that we create a WaiterFactory class that will use a Waiter object as a preset and clone it with different table numbers.

Builder Pattern

Eyuel Berga Woldemichael — Sat, 04 Dec 2021 18:11:52 +0000

Builder pattern separates the construction of complex object from its representation, so that the same construction process can create different representations.

Motivation

Consider an application which contains a complex object, with many specifications. Some of these specifications are optional and some mandatory. Keeping the different implementations of the construction process within the object will make the it less modular. And adding a new implementation requires change in the existing code-base.

The Builder pattern solves this problem by moving the object construction logic out of the object and into a builder class.

Applicability

The Builder pattern can be used in cases where:

Construction of an object must enable different representations of the object
Telescopic Constructor are to be avoided

Structure

Participants

Builder: Abstract interface for creating parts of Product object
ConcreteBuilder: Construct, assemble parts of Product
Director: Construct object using Builder
Product: Representation of the complex object under construction

Collaborations

Director is configured with a Builder object
One way communication between Director and Builder.
Director notifies Builder which part should be built, then Builder handles the request.

Advantages

isolates code for construction and representation
help avoid telescopic constructor
more control over the construction process

Disadvantages

Increased complexity in code due to increase in new interfaces and classes

Implementation

In most cases one builder instance is enough so builders are implemented as singletons.

Demo

There are different variety of cakes served at the cafe. Even though all of them are cakes, they all have different ingredients. The owners want an optimized way of making the cakes, that will save the chef's time and also easily add new cake types to the menu in the future.

To solve this problem, we create a Cake class with all the required attributes. Then we create an abstract CakeBuilder class, which has abstract methods for building each component of the cake. We then extend this class to make concrete classes for the different variety of cakes. Lastly, we create a Chef class that will use one of this concrete classes to make the cake and return the created object.

Object Pool Pattern

Eyuel Berga Woldemichael — Fri, 03 Dec 2021 08:26:38 +0000

Object Pool (resource pools) provide container to reuse objects that are expensive to create.

Motivation

Consider a scenario in which instantiating a new object is resource extensive. The Object Pool pattern solves this problem by providing a mechanism for creating object only when there no cached instance.

Applicability

The Object Pool pattern can be used in cases where:

Application contains objects which are expensive to create, resource and performance wise.
Clients require same resource but at different time period.
When created objects are reusable.
When we are working on a job that allocates and re-allocates many objects.

Structure

Participants

Client: the client uses pooled object type (reusable objects).
Reusable Pool: they manage reusable objects for the client.
Object Pool: they manage and maintain available objects and collect objects that are requested.

Collaborations

Clients configure object pool objects

Advantages

It increases performance.
Since it uses pools it is easier to manage and reuse, share objects.
It reduces time since objects are in pools one can reuse them which decreases significant amount of time.

Disadvantages

When reusing objects from the pool unless previous state is changed(reset) it has different output than expected.
Once an object is used unless it is sent back (released) to the pool it can’t be used (dependent on the client).

Implementation

The object pool creates objects to be used again (reusable) so when an object is needed it is fetched from the pool or if an object is already waiting it is then returned. Pools are where reusable objects are stored once the object is released it is sent back to the pool.

The implementation of an object pool must also consider a multi-threaded environment. If different threads access the pool concurrently a consistency error will occur. For this reason access to the object pool must be synchronized.

Demo

Let’s suppose in the cafe explained in the introduction of the series, the menus are printed out for every new customer, and are thrown out when the customer leaves. The owners have now realized this is very cost inefficient. They now want to reuse the menus and only print new ones when necessary.

To solve this problem, we first create a generic object pool
class with an abstract create method. Then we use this class to make a concrete EnglishMenuPool. Now we can use checkout and check-in methods to reuse menu object and create new ones when all objects are in use.

Abstract Factory Method Pattern

Eyuel Berga Woldemichael — Thu, 02 Dec 2021 10:54:54 +0000

Abstract Factory Method(kit) provides an interface for creating suits of related objects without specifying their concrete classes

Motivation

Consider an application which supports different standard of appearance and behavior. Each component in a standard should be used together. Hard-coding this standards will pose a problem as it will not be portable. We also should not mix the components that make up the standard.

The Abstract Factory method pattern solves this problem by providing the necessary interface for creating an appropriate class instance. And also enabling clients to work with interfaces, without worrying about the concrete classes.

Applicability

The abstract factory method pattern can be used in cases where:

Configuration of the system requires a suite of products.
Implementation of products must be hidden and only their interface disclosed
Suites of objects must be used together

Structure

Participants

AbstractFactory: Interface for methods that create abstract products
ConcreteFactory: Implementation for methods that create abstract products
AbstractProduct: Interface for Product object
ConcreteProduct: Implementation of the AbstractProduct interface.
Client: Use interfaces declared by AbstractFactory and AbstractProduct classes.

Collaborations

AbstractFactory transfers the responsibility of product object creation to its concrete sub- classes

Advantages

Promotes loose-coupling between client and concrete products
Increased flexibility in code as new variants of products can be integrated without changes in client code

Disadvantages

Increased complexity in code due to increase in new interfaces and classes

Implementation

Applications generally need one instance of a Factory, so they are typically implemented as Singletons. The AbstractFactory does not have an implementation for product creation and the ConcreteProduct sub-classes commonly define factory methods for this purpose.

Demo

Following up on our cafe example:

There are now several new branches of the cafe and we have managed to change the language of the menu for each branch. But the owners now want each branch to have unique interior design. Each branch will have a different look, the pictures on the wall and the staff uniform should be different.

To solve this problem, we create interfaces for WallPicture and StaffUniform. Then we create concrete classes that implement these interfaces. After that, we create an abstract BranchFactory class that will return WallPicture and StaffUniform objects. Lastly we will create a static class FactoryCreator to generate BranchFactory object based on the information passed.

Factory Method Pattern

Eyuel Berga Woldemichael — Wed, 01 Dec 2021 20:44:12 +0000

Factory Method(virtual constructor) provides an interface for creating objects in a super-class, but defers instantiation to sub-classes.

Motivation

Consider an application which has to access a class, but does not know which class to choose form among a set of sub-classes of the parent class. The application class can’t predict the sub-class to instantiate as the choice might depend on numerous factors, such as the state of the application at run-time or its configuration.

The Factory method pattern solves this problem by encapsulating the functionality of selecting and instantiating the appropriate class inside a designated method, which we refer to as the factory method.

Applicability

The factory method pattern can be used in cases where:

A class can not know or predict the object it must create
A class wants to transfer the instantiation of objects to its sub-classes

Structure

Participants

Product: Interface of objects created by the factory method
ConcreteProduct: Implementation of the Product interface
Creator: declares the factory method that returns a Product instance.
ConcreteCreator: Overrides factory method and returns ConcreteProduct instance

Collaborations

In case the Creator does not have a default implementation of the factory method, it relies on its sub-classes to define the factory method.

Advantages

Provides hook for sub-classes, enabling sub-classes to affect their parents’ behavior.
Dynamic or concrete types are isolated form the client code, hence promotes loose-coupling

Disadvantages

To create even one ConcreteProduct object the creator class must be sub-classed. This might overburden the clients.

Implementation

The implementation of the factory method could have in general three variations:

Creator class is an abstract class and does not have a default implementation for the factory method
Creator class has a default implementation for the factory class, sub-classes override the default implementation if necessary
factory methods are parameterized and can create multiple kinds of products corresponding to the value passed.

Demo

Let us look at how we could apply the Factory Method Pattern to the cafe discussed in the introduction article of the series.

The cafe is growing popular and the owners decided to open a new branch in France. But there is a problem, the menu is in English but the customers expect it to be in French. There is also a confusion in the currency. In France, the currency is Euro but the system displays price in US Dollars.

We can solve this problem by first creating an abstract Menu class, and then creating concrete classes that extend this abstract class to make a french and other language versions of the menu. We then create a GetMenuFactory class to generate object of the different language versions based on the information given.

Introduction

Eyuel Berga Woldemichael — Wed, 01 Dec 2021 19:54:05 +0000

Creational patterns hide how instance of classes are constructed. Thereby enabling more independence and increasing flexibility in a system. In this series, we try to look at the most common creational patterns and their unique features.

To demonstrate the implementation of the creational patterns, we will use, as an example, what we have named as “The Design-pattern Cafe”. The Design-pattern Cafe is a fictitious Cafe based in Ethiopia. For each pattern,
we have devised a problem-scenario that could potentially be solved with the pattern.

All of the sample code used as examples can be found on GitHub at:

dp-team / creationaldesignpatterns

Demo code on creational design patterns

Creational Design Patterns Demo

This repo contains demo codes for creational design patterns using, as an example a fictitious virtual cafe named "the design-pattern cafe".

We came up with this example to better illustrate the design patterns For each pattern, we have devised a problem-scenario that could potentially be solved with the pattern.

Factory Method Pattern

Scenario: The design-pattern cafe is growing popular and the owners decided to open a new branch in France But there is a problem, all the menus are in English and the French could not understand it. There is also a confusion in the currency. The French use the Euro but the system displays price in Ethiopian Birr.

Solution: We can solve this problem by first creating an abstract Menu class, and then creating concrete classes that extend this abstract class to make a French and other language versions of the menu. We then create…

View on GitHub

Developing an Internet-based GIS Application to Analyze and Determine Potential Public School Locations in Addis Ababa

Eyuel Berga Woldemichael — Sat, 30 Oct 2021 05:32:58 +0000

Introduction

The Demographic situation of Addis Ababa has changed over the last few decades. There is an ongoing increase in population and many areas, once uninhabitable forests are now suburban residential places. Nevertheless the construction of public schools is not keeping up with the dramatic changes in the city.

Because of the increase in residential areas in the city, new suitable locations for public schools must be determined for construction. Because of the dynamic changes in the city, a tool is required to make the appropriate analysis. Hence, enabling better decisions to be made in the construction of public schools.

Purpose of the project

The objective of the project is to develop an internet-based tool that identifies suitable public school locations in the city of Addis Ababa, taking to consideration these factors:

Availability of transportation from the residential areas to the proposed location
Proximity of the proposed location to the residential areas
The demography of the residential area for which the public school is to be constructed

1. Availability of transportation

The suitability of a site should consider the availability of transportation form the residential area to the proposed site. The application should analyze the availability of transportation and regard a location with no feasible transport access to a residential area as unsuitable.

2. Proximity to residential area

Proximity in our case refers to the closeness of a particular location to the residential area. The application should consider a location closer to a residential area as a more suitable location.

3. Demography of the residential area

The population of the residential areas should also be considered when proposing new public school locations. The population size and the residential area size should be used as a primary factor to determining a new location.

Project Scope

The project is focused in analyzing and determining site suitability for the construction of public schools. It is also limited to the city of Addis Ababa. However this restraint is not forcefully enforced. The application is flexible enough to also include residential areas that exist between the borders. The application can also be expanded by including additional data about schools and residential areas, that might come up in the future.

Data Collection, Compilation and Formatting

The initial data about schools and residential areas was collected from openstreetmap. With the help of the Overpass API, data from openstreetmap was extracted and stored in a PostgreSQL database with a PostGIS extension.

Some unnecessary data was also eliminated form the database. Data without names and other missing information were also removed.

Design and Development of the Application

Spatial information for the application are stored in a PostgreSQL database with a PostGIS extension. The PostGIS extension allows for spatial data to be stored in a PostgreSQL database. For users to interactively navigate the spatial information and perform analysis on it, GeoDjango Server is used.

GeoDjango is a python based web server application, with GIS functionalities. It allows performing spatial analysis against a database and also deploy a web-based user interface.

The diagram below illustrates the basic architecture of a GeoDjango web application:

The tools provided by the application maybe used by numerous users, but data modifications need to be handled by privileged users only to avoid misrepresentation of facts. The application is designed to allow multiple users to use the analysis tools to get general information about schools
and residential areas and also find suitable locations for school construction.

The Illustration above shows the working scheme of the system. The working scheme is as follows:

user sends a request, then the request will be sent through the internet to the server
on the server, the request will be processed and data is fetched form the database server
data from the database will be retrieved and sent to the application server.
The application server will then send the processed data to the user

Admins and normal users generally go through the same procedures, the key difference being that admins have the ability to modify stored information on the database server.

The UML design illustrates the interaction between data and other objects that will be implemented into the system.

Functions and features of the Application

The application provides three tools for the analysis of schools. These tools take advantage of basic GIS functionalities to provide useful operations for analysis.

Distance Analysis

This tool enables users to find schools which are closer to an arbitrary location. This tool primarily uses the Distance function. The Distance function is an abstraction for the distance calculation supported by the backend database. It enables us to find the distance between two geographic fields.

Schools Visualization

This tool provides a spatial analysis of all schools registered on the database. For this tool the Leaflet mapping library is used. Leaflet is a JavaScript library for creating interactive maps on the front-end.

Using the spatial data from the database, we are able to dynamically add new data to the map and display it on the web-page.

Suitable Sites analysis

This tool helps in analyzing if a particular residential area requires a new public school. It gives insightful indications of where to construct a new school.

In order to determine if a residential area requires a new school, the application has a set of criterion which it checks against. These are the proximity criteria, size criteria and overall criteria

Proximity criteria: checks if there is a school which is only 5 kms away from the residential area. If there are no schools in a 5 km radius, then it is a fail.
Size criteria: checks if the student demography is proportional to the schools in the residential area. Population statistics about residential areas are not stored in the database, but are approximated using an algorithm based on a generalized data. Python implementation of the algorithm is as follows:


# area of residential area is square kms
residential_area_sq_km = obj.area.sq_km
# population density in addis ababa is 5165/km2
population = 5165 * residential_area_sq_km
# 43 % of the population is a student
students = population * (43 / 100)
‘’’
one school holds more than 10,000 students
‘no_schools’ varaible gives us the number of schools that need to #
be located in a 5km radius for the # criteria to pass
‘’’
no_schools = math.ceil(students / 10000)

Overall criteria: checks if both the size and proximity criterion pass. This determines if a new school needs to be constructed for a residential area.

If a residential area fails the overall criteria, it is an indication that the area is in need of a new public school. The tool also gives an insight of where to construct the new school by creating a 5km buffer form the centroid of the residential area.

User Interface

The Dashboard

Distance Analysis Form

Distance Analysis Result

Schools Visualization

Suitable Site analysis

Suitable Site result– new school required

Suitable site result- new school not required

Source-code

Check out the source-code on GitHub

eyuelberga / gis-school-analysis-tool

GIS School Location Analysis Tool made with GeoDjango PostGIS

Geo-Django Project to Analyze and Determine Potential Public School Locations in Addis Ababa

The objective of the project is to develop an internet-based tool that identifies suitable public school locations in the city of Addis Ababa, taking to consideration these factors:

Availability of transportation from the residential areas to the proposed location
Proximity of the proposed location to the residential areas
The demography of the residential area for which the public school is to be constructed

The initial data about schools and residential areas was collected from openstreetmap. With the help of the Overpass API, data from openstreetmap was extracted and stored in a PostgreSQL database with a PostGIS extension Some unnecessary data was also eliminated form the database. Data without names and other missing information were also removed.

Read This Article for more detail

Running Locally

To run this project locally, the easiest way would be using docker-compose

…

View on GitHub

Security Alarm System using a Bipolar Junction Transistor Switch

Eyuel Berga Woldemichael — Thu, 28 Oct 2021 06:06:51 +0000

Introduction

The security alarm system will use a bipolar junction transistor switch to detect security problems. Theft attempt and other security threats can be controlled by using this simple circuit.

For the purpose of this application, we will design a security system for one room in a house. The sensor used for each opening can be either a mechanical switch, a magnetically operated switch, or an optical sensor. Detection of an intrusion can be used to initiate an audible alarm signal.

We will be using a mechanical switch as our sensor and use a transistor as a NOT gate, so that when there is an open switch in our room a transistor will show a signal that an intruder has entered.

Equipment Used

Resistor
Transistor
Buzzer
Voltage source

Circuit Design and Experimental Setup

Block Diagram

Room Sensor

Room sensor is normally in a closed position and it is connected to a DC voltage source. When a door is open it creates an open circuit.

At its normal state the room sensor looks like the above.

If intrusion occurs the switch will be open.

Transistor Switch

BJT as a Switch

Transistor switches are used for high power devices such as
motors or lamps which often require more power than supplied by an ordinary logic gate

The areas of operation for Transistor switch are known as the Saturation Region and the Cut-Off Region.

Cut-off Region: here there is a large depletion layer
and no current flowing through the device. Therefore the transistor is switched “OFF”
Saturation Region: here the depletion layer is as
small as possible and maximum current is flowing through the transistor. Therefore the transistor is switched “ON”.

NOT Gate Transistor

A NOT gate simply inverts its input. If the input is high, the output is low, and if the input is low, the output is high

The operation of this circuit is simple. The input is connected through resistor R2 to the transistor’s
base. When no voltage is present on the input, the transistor is turned off. Then, no current flows through the collector-emitter path. Thus, current from the supply voltage (Vcc) flows through resistor R1 to the output. This way, the circuit’s output is high when the input is low.

When voltage is present at the input, the transistor turns on, allowing current to flow through the collector-emitter circuit directly to ground. This ground path creates a shortcut that bypasses the output, which causes the output to go low.

Simulation

We run our simulation with a voltmeter connected to the output, in place of the buzzer .

In the normal state, the switch will be closed.

When intrusion happens, the switch will open and the alarm (buzzer) will go off.

De-Comment Program in C

Eyuel Berga Woldemichael — Tue, 26 Oct 2021 19:55:24 +0000

De-commenting is one of the primary tasks of the C preprocessor. This article demonstrates a simplified C program to remove comments from source-code.

DFA Design

The deterministic finite state automaton (DFA) expresses the required de-commenting logic. The DFA is represented using the traditional "labeled ovals and labeled arrows" notation. Each oval represent a state. Each state is given short name with detailed descriptions of the left. Each arrow represent a transition from one state to another. Each arrow is labeled with the single character that causes the transition to occur.

Usage

$ ./decomment <file_path>

If the program is run without argument, the code to be decommented will be read from the standard input and displayed[decommented code] on the standard output
If argument is given, the code to be decommented will be read form the file and displayed in the standard output.

The full source-code for the project is on GitHub:

eyuelberga / decomment-program-c

C program to remove comments from source-code

De-Comment Program

C program to remove comments from source-code

DFA Design

Build

You can compile the program using gcc.

$ gcc decomment.c -o decomment

Usage

$ ./decomment <file_path>

If the program is run without <file_path> argument, the code to be decommented will be read from the standard input and displayed[decommented code] on the standard output
If <file_path> argument is given, the code to be decommented will be read form the file and displayed in the standard output.

Test

test.py contains a simple…

View on GitHub