DEV Community: Bima

How I replaced Sentry and the rest for Good: The $0 Telegram Alerting Hack

Bima — Thu, 19 Mar 2026 18:37:54 +0000

Most production applications need some form of real-time alerting.
When something goes wrong — a payment fails, an API crashes, or a user submits a contact form — someone needs to know immediately.

Large teams often use tools like Sentry, Datadog, or PagerDuty for this. These platforms are powerful, but they can also be expensive and complex to configure, especially for small projects or solo developers.

So instead of integrating a full observability stack, I built a lightweight alerting system using something I already use every day: Telegram.

In this guide, I’ll show you how to set up a free Telegram-based notification system that can alert you about:

server errors
new leads and contact form submissions
important business events like payments or signups

Why Telegram Works So Well for Alerting

Telegram is surprisingly perfect as a developer alerting channel:

It’s free
Push notifications are instant
Bots are easy to create
Messages support Markdown, HTML, emojis, and buttons
You can add your entire team to a group and everyone gets notified at once

Instead of building dashboards or constantly checking logs, your application can send messages directly to a Telegram group.

What You Need Before Starting

You only need four things:

A Telegram account
A Telegram bot
A Telegram group
Your bot token and chat ID

That’s it. No servers, no SDKs, no third-party monitoring service.

Step 1: Create a Telegram Bot

Open Telegram and search for @botfather.
Run the command:

/newbot

Follow the prompts and Telegram will give you a bot token.
This token is basically the password your application will use to send messages.

If you’ve never done this before, you can simply ask any AI assistant:

“How do I create a Telegram bot and get the bot token?”

Or follow this tutorial.

Step 2: Create a Group and Add the Bot

Create a Telegram group for alerts, then:

Add your bot to the group
Add your teammates
Make sure notifications are enabled for the group

This allows your app to send one message and notify everyone at once.

Step 3: Get the Telegram Chat ID (Important Step)

Telegram bots don’t send messages using usernames or group names. They use a chat ID.

To get it:

Send any message in the group
Open your browser and visit:

https://api.telegram.org/bot<YOUR_TOKEN>/getUpdates

You’ll see a JSON response. Look for:

"chat": {
  "id": -1001234567890,
  "title": "My Alerts Group"
}

Copy the id. That is your chat ID.

Step 4: Send Your First Message Using the Telegram Bot API

Telegram provides a simple HTTP endpoint called sendMessage.

POST https://api.telegram.org/bot<TOKEN>/sendMessage

Example payload:

{
  "chat_id": "-1001234567890",
  "text": "Hello from my web app"
}

You can test this using:

curl
Postman
or directly from your backend code

Once this works, your alerting system is already functional.

Additionally, you can read more about the telegram api here.

Making Alerts Readable (Markdown, Emojis, and Structure)

Raw text alerts quickly become hard to read. Instead, format them so they are easy to scan on mobile.

Example:

🚨 *Server Error*
Endpoint: /api/payments
Status: 500

Telegram supports:

Markdown
HTML formatting
emojis
inline buttons

This means you can send alerts that look structured and professional instead of messy log dumps.

Real-World Things You Can Alert On

Once you have this set up, you can send notifications for almost anything.

Backend alerts

Unhandled exceptions
Failed background jobs
Payment confirmations

Frontend alerts

Contact form submissions
New user registrations
Demo bookings

DevOps alerts

Deployment completed
Server restarted
Environment variables missing

This turns Telegram into a lightweight observability and business monitoring tool.

Sending Alerts from a Backend (Node.js Example)

Here’s a minimal reusable function:

import axios from "axios";

const token = process.env.TELEGRAM_BOT_TOKEN;
const chatId = process.env.TELEGRAM_CHAT_ID;

export async function sendTelegramAlert(message: string) {
  const url = `https://api.telegram.org/bot${token}/sendMessage`;

  await axios.post(url, {
    chat_id: chatId,
    text: message,
    parse_mode: "Markdown"
  });
}

Now you can call this anywhere in your application:

await sendTelegramAlert("🚨 Database connection failed");

Using Telegram Alerts in Frontend Applications

You can also trigger alerts from the frontend when API calls fail.

try {
  await api.createOrder(data);
} catch (err) {
  await sendTelegramAlert("⚠️ Order creation failed");
}

This is especially useful for catching silent failures during production that users might not report.

Example: Alerting on Contact Form Submissions

Instead of relying only on email, you can push new leads directly to Telegram:

📩 New Contact Form Submission
Name: John Doe
Email: john@example.com
Message: I’m interested in your services.

This ensures you never miss an important message because it landed in spam.

Limitations of This Approach

Telegram alerts are simple and effective, but they are not a full replacement for tools like Sentry or Datadog.

You won’t get:

dashboards
error grouping
performance tracing

However, for:

side projects
startups
internal tools

this approach provides a huge improvement over having no alerting at all.

Final Thoughts

You don’t always need a complex observability stack to stay informed about what’s happening in your application. With just a Telegram bot and a few lines of code, you can build a real-time alerting system that notifies you and your team instantly.

It’s free, quick to set up, and flexible enough to integrate with both frontend and backend workflows.

Sometimes, simple tools are all you need.

5 Essential Security Headers for Modern Frontend Devs (Next.js, Angular, & Vue)

Bima — Mon, 26 Jan 2026 11:55:46 +0000

I. Introduction: The "Invisible" Firewall

Let’s be honest: as frontend engineers, we spend 90% of our time wrestling with state management, CSS layouts, API data, etc. Security usually feels like someone else's job—something handled by "The Backend Team" or a mysterious DevOps engineer in a dark room.

But here’s the truth: you can have the most secure database in the world, and your user can still get compromised because your browser instructions were too vague.

The Problem

We often think of security as building a massive, complex fortress. We worry about sophisticated SQL injections or server-side exploits. Meanwhile, the "front door" is left wide open to XSS (Cross-Site Scripting), Clickjacking, and MIME-sniffing because of a few missing lines of text in our HTTP responses.

The Solution: Low-Hanging Fruit

You don’t need to rewrite your authentication logic or change your component structure to fix this. HTTP Security Headers are essentially a "Rules of Engagement" list you send to the browser.

By spending just 10 minutes configuring these 5 headers, you’re not just writing code—you’re telling the browser exactly how to protect your users. Zero refactoring. High impact.

II. The 5 Essential Headers

For most modern frontend apps (React, Vue, Angular), these headers are handled at the Infrastructure level (where your app is hosted) or via Framework Config.

1. Strict-Transport-Security (HSTS)

The "Anti-Downgrade" Shield

The Threat: A "Man-in-the-Middle" (MitM) attacker intercepts an unencrypted http:// request before it redirects to https://, stripping your security.
The Fix: Force the browser to only communicate via HTTPS for a specified duration.
The Implementation String:

Strict-Transport-Security max-age=31536000; includeSubDomains; preload

Modern Note: Use preload only after you’ve verified your HTTPS setup is perfect, as it adds you to a hardcoded browser list that is difficult to "undo" quickly.

2. X-Content-Type-Options

The "Anti-Sniffing" Guard

The Threat: "MIME-sniffing." If a browser thinks a .txt file looks like a .js file, it might execute it, allowing an attacker to run malicious code hidden in an "innocent" upload.
The Fix: Force the browser to strictly follow the Content-Type header sent by the server.
The Implementation String:

X-Content-Type-Options: nosniff

3. X-Frame-Options

The "Clickjacking" Barrier

The Threat: An attacker embeds your site in an invisible <iframe> on their malicious site. They trick users into clicking buttons on your site (like "Delete Account") while the user thinks they are clicking something else.
The Fix: Block other sites from framing your content.
The Implementation String:

X-Frame-Options: SAMEORIGIN

Pro Tip: Modern apps should also use the frame-ancestors 'self' directive in their Content Security Policy (CSP), but X-Frame-Options remains the essential fallback for older browsers.

4. Referrer-Policy

The "Privacy" Filter

The Threat: When a user clicks a link to an external site, the browser sends the full URL of your page in the Referer header. If your URLs contain sensitive data (like /reset-password/token-123), you’re leaking secrets to third parties.
The Fix: Send the full URL for your own site, but only the domain name (origin) for everyone else.
The Implementation String:

Referrer-Policy: strict-origin-when-cross-origin

5. Permissions-Policy

The "Hardware" Lock

The Threat: A compromised third-party script (like an ad or analytics tool) tries to access a user's camera, microphone, or geolocation without their knowledge.
The Fix: Explicitly disable browser features you don't use.
The Implementation String:

Permissions-Policy: camera=(), microphone=(), geolocation=()

History Lesson: This header has officially replaced the older Feature-Policy. If you see Feature-Policy in old tutorials, it’s time to update!

Where to Paste These (Quick Reference)

Since these are HTTP Response Headers, you don't put them in your .js or .ts components. Here is the modern "pasting" guide:

Next.js: Add to the async headers() function in your next.config.js.
Vercel / Netlify: Add to your vercel.json or _headers file.
Angular / Vue (Standard): These are usually set in your Nginx/Apache config or via a Middleware (like helmet for Node/Express) that serves your build folder.

Time to get hands-on. This is where the "10-minute" promise comes to life. Since our audience ranges from Next.js fans to Angular/Nginx traditionalists, we’ll provide the two most common "recipes."

III. Implementation: The 10-Minute "Copy-Paste"

The beauty of these headers is that you don't need to touch your application logic. You just need to tell your web server or framework to attach these strings to every response.

1. The Next.js Way (Modern Full-Stack)

If you’re using Next.js, you can manage this directly in your configuration. This covers your React-based crowd perfectly.

File: next.config.js

const securityHeaders = [
  { key: 'Strict-Transport-Security', value: 'max-age=31536000; includeSubDomains; preload' },
  { key: 'X-Content-Type-Options', value: 'nosniff' },
  { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
  { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
  { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' }
];

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)', // Apply these headers to all routes
        headers: securityHeaders,
      },
    ];
  },
};

2. The Nginx Way (Angular, Vue, & SPAs)

For Angular or Vue developers, your app is usually a collection of static files served by a web server like Nginx. You’ll want to add these to your server block.

File: /etc/nginx/conf.d/default.conf

server {
    listen 80;
    server_name your-app.com;

    # Security Headers
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
    add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;

    location / {
        root /usr/share/nginx/html;
        index index.html;
    }
}

3. The "Platform" Way (Vercel / Netlify)

If you aren't managing a server and just deploying to a PaaS, use a config file in your root directory.

Vercel (vercel.json): Uses a similar JSON structure to the Next.js example above.
**Netlify (_headers):

/*
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()

IV. Verification: "How do I know it worked?"

You’ve updated your config and deployed your code. But security is invisible—how do you actually see that you’re protected? There are two main ways to verify your headers in under 60 seconds.

1. The "Under the Hood" Method (DevTools)

You don't need fancy tools; the proof is already in your browser.

Open your app and hit F12 (or Cmd+Option+I) to open Developer Tools.
Go to the Network tab and refresh the page.
Click on the very first request (usually your domain name).
Look for the Response Headers section in the right-hand pane.

If you see your new headers listed there, you’re officially live.

2. The "Report Card" Method (SecurityHeaders.com)

If you want to show off your work to your team (or your boss), use a scanner like SecurityHeaders.com.

The Process: Enter your URL and hit "Scan."
The Goal: Most apps start with a "D" or "F" grade. After adding these five headers, you’ll likely jump straight to an "A". It’s an incredibly satisfying visual "win" for 10 minutes of work.

V. The "AI Agent" Shortcut: One Prompt to Rule Them All

If you’re using an AI coding assistant, don’t manually type these headers. Instead, use this System Prompt to ensure your agent implements them perfectly every time.

You can paste this into your "Project Rules" (like .cursorrules or a custom Copilot instruction) or simply use it as a one-time request.

The Security Header Prompt

"I need to harden the security of my frontend application. Please update my configuration to implement the 'Essential 5' security headers.
Requirements:

HSTS: Enforce HTTPS with a 1-year max-age, including subdomains and preloading.

X-Content-Type-Options: Set to 'nosniff'.

X-Frame-Options: Set to 'SAMEORIGIN' to prevent clickjacking.

Referrer-Policy: Set to 'strict-origin-when-cross-origin' to protect sensitive tokens.

Permissions-Policy: Disable unused hardware features (camera, microphone, geolocation).

Context: My app is built using [Insert Framework: e.g., Next.js / Angular] and is hosted on [Insert Platform: e.g., Vercel / Nginx]. Provide the exact configuration file changes needed."

Why this works:

Precision: It uses the specific directives (like nosniff and SAMEORIGIN) we covered, so the AI doesn't hallucinate weaker settings.
Context-Aware: By telling the AI your framework and host, it will choose between a next.config.js, a vercel.json, or an nginx.conf automatically.
Safety First: It treats security as a "requirement," not a suggestion.

VI. Conclusion: One Giant Leap for Dev-kind

Implementing these headers doesn't make your app 100% unhackable—nothing does—but it massively raises the cost and effort required for an attacker to succeed. You've effectively moved from leaving your front door wide open to installing a deadbolt and a security camera.

Summary of your new baseline:

HSTS: No more unencrypted connections.
X-Content-Type-Options: No more file-type "guessing."
X-Frame-Options: No more invisible iframes.
Referrer-Policy: No more leaking sensitive URLs.
Permissions-Policy: No more rogue hardware access.

Got thoughts? Questions? Ideas? Please discuss in the comment section below. CHEERS!!

From Zero to Wow: Building a Beginner-Friendly Angular GPT AI-Powered App

Bima — Sun, 26 Jan 2025 18:23:16 +0000

Section 1: Introduction 🖋️

What This Article is About

Welcome to the exciting journey of building your very first Angular application! This article is designed specifically for beginners who want to dive into the world of web development. Together, we’ll build a simple yet powerful chat application powered by OpenAI’s GPT API. Along the way, you’ll discover how Angular, a popular front-end framework, enables developers to create scalable, modern web applications.

Whether you’re entirely new to coding or just starting with Angular, this article will guide you every step of the way, ensuring no prior experience is required.

Why Angular?

Angular is one of the most versatile frameworks for building interactive and dynamic web applications. Here’s why we’ve chosen it for this project:

Beginner-Friendly: Angular provides a structured and consistent development experience, making it an excellent choice for those just starting out.
TypeScript Integration: It leverages TypeScript, a strongly typed superset of JavaScript, to enhance productivity and catch errors during development.
Powerful Ecosystem: With features like built-in dependency injection, reusable components, and an active community, Angular equips you to build professional-grade applications.

What You’ll Achieve

By the end of this article, you will have:

A Fully Functional GPT-Powered App: A simple, interactive chat application where users can ask questions and receive responses from OpenAI’s GPT model.
Angular Knowledge: A foundational understanding of how Angular components, services, and configurations come together to create a web application.
API Integration Experience: Learn how to connect Angular applications to external APIs, like OpenAI’s GPT, through HTTP requests.

What Makes This Article Special

Unlike many tutorials, this guide not only walks you through creating an app but also provides clear explanations for every step, helping you grasp the underlying concepts of Angular. By the end, you’ll not only have a working app but also the confidence to build your own projects.

💡 Ready to start coding? In the next section, we’ll explore the basic tools and setup required to build this app.

👉 Full Code Repository: You can find the complete source code for this tutorial here.

Section 2: Getting Ready to Learn Angular: Becoming an Angular developer

Before you start building your Angular GPT-powered app, it’s important to prepare your environment and familiarize yourself with the tools and concepts you’ll be using. This section guides you step-by-step to ensure a smooth setup and learning experience.

What You Need to Learn First

To build an Angular app, there are a few foundational skills you need to acquire:

1. HTML and CSS

What They Are:
- HTML (HyperText Markup Language) defines the structure of your webpage.
- CSS (Cascading Style Sheets) is used to style the content.
Why They’re Important: Angular components rely on HTML templates and CSS styles to define their structure and appearance.
Resources:
- HTML and CSS for Beginners: Article
- HTML Crash course: Video

2. TypeScript

What It Is: TypeScript is a strongly typed superset of JavaScript, used by Angular to enhance code quality and maintainability.
Why It’s Important: Angular uses TypeScript for features like type checking, interfaces, and decorators.
Resource:
- TypeScript Official Docs
- Typescript Crash Course: Video

3. Node.js

What It Is:
Node.js is a JavaScript runtime that Angular uses to manage dependencies and run development tools.
How to Install:

Download the installer for your OS from Node.js Official Website.
Follow the instructions to complete the installation.
Verify the installation:

   node -v
   npm -v

4. Git Basics

What It Is: Git is a version control system that allows you to track changes and collaborate effectively.
Key Steps:
1. Install Git: Git Installation Guide.
2. Initialize a repository:

   git init

Resource:
- Git Basics Guide

Setting Up Angular CLI

The Angular CLI (Command Line Interface) is a powerful tool that helps you scaffold and manage Angular projects effortlessly.

Install the Angular CLI globally using npm:

   npm install -g @angular/cli

Verify the installation:

   ng version

Resource:
- Angular CLI Documentation

Getting Your OpenAI API Key

You’ll need an API key to connect your Angular app to OpenAI’s GPT API.

Create an OpenAI Account:
- Sign up at OpenAI.
Generate Your API Key:
- Navigate to the API Keys section.
- Click Create New Key and copy the generated key.

⚠️ Important: Keep your API key private to avoid unauthorized access.

Familiarizing Yourself with Angular

Take time to understand Angular’s structure and ecosystem. Here are some helpful resources:

Official Tutorials:
- The Angular team provides beginner-friendly guides to help you get started.
- Angular Tutorials
Angular Documentation:
- Use the official documentation as a reference throughout your journey.
- Angular Documentation
Communities to Join:
- Angular Reddit
- Stack Overflow - Angular Questions
- Angular Discord Community: Engage with developers to ask questions and share knowledge.

💡 You’re Ready!

With the environment set up and foundational knowledge in place, you’re prepared to start planning your GPT-powered app.

Next up: Section 3: Planning the GPT-Powered Chat App.

Section 3: Planning the GPT-Powered Chat App

Before diving into coding, it’s essential to have a clear plan. In this section, you’ll understand the app’s purpose, the technologies involved, and how the app will function.

Overview of the App

The goal is to build a GPT-powered chat interface that allows users to send a prompt and receive responses from OpenAI’s GPT API. The app will focus on simplicity and usability while introducing key Angular concepts.

Key Features:

A user-friendly chat interface.
Integration with OpenAI’s GPT API to handle prompts and generate responses.
A responsive design for better usability.

Technologies You’ll Use

To bring this app to life, you’ll rely on the following technologies:

Angular:
- Angular serves as the frontend framework for building a dynamic and scalable user interface.
- You’ll leverage Angular features such as components, services, and dependency injection.
OpenAI’s GPT API:
- The GPT API will power the chatbot’s responses.
- You’ll use the Chat Completions API to send and receive user prompts.

How the App Works

Here’s a step-by-step breakdown of how your app will function:

User Input:
- The user types a prompt into the chat input field.
API Request:
- The input is sent to OpenAI’s GPT API using Angular’s HTTP client service.
Response Handling:
- The GPT API generates a response based on the prompt and sends it back.
Display Response:
- The response is displayed in the chat interface for the user to see.

Preparing for Development

API Key Reminder:

Before you proceed, ensure you have:

Registered for an OpenAI account.
Generated and securely saved your API key. You’ll need it to configure the GPT service in your app.

💡 Next Steps: Now that you have a plan, it’s time to set up your Angular project in Section 4: Setting Up the Angular Project.

Fantastic! Ready to move forward with Section 4: Setting Up the Angular Project. Let’s get it done! 🚀🖋️

Section 4: Setting Up the Angular Project

With your environment ready and a clear plan in place, it’s time to create the foundation of your GPT-powered Angular app. In this section, you’ll set up the Angular project, explore its structure, and ensure everything runs correctly.

Install Angular CLI

If you haven’t already installed the Angular CLI, here’s a quick recap:

Open your terminal and run the following command to install the CLI globally:

   npm install -g @angular/cli

Verify the installation:

   ng version

Create and Explore Your Project

Generate a New Project:
- Use the Angular CLI to scaffold a new project:

   ng new gpt-powered-app

Navigate to Your Project Directory:
- Once the project is created, move into the project folder:

   cd gpt-powered-app

Project Structure Overview

Angular generates a default project structure. Here are the key folders and files:

src/app:
- The main folder where your app’s code lives.
- You’ll create components, services, and modules here.
angular.json:
- The configuration file for your Angular app.
package.json:
- Lists all dependencies and scripts for your project.
node_modules:
- Contains all installed dependencies for the app.

Understanding this structure will help you navigate your project as you develop.

First Run: Test Your Setup

Start the Angular development server:

   ng serve

Open your browser and navigate to:

   http://localhost:4200/

You should see the default Angular app running. If the page loads successfully, your setup is complete!

💡 Next Steps: With the foundation in place, it’s time to start building the core features of your GPT-powered chat app in Section 5: Building the Chat App.

Section 5: Building the GPT Powered Angular Chat App

Now that your Angular project is set up, it’s time to build the core feature: the GPT-powered chat app. In this section, you’ll create a chat component, implement the GPT service, and connect them together for a fully functional experience.

Create the Chat Component

Angular components are the building blocks of your application. Follow these steps to create a standalone chat component:

Generate the Component:
- Use the Angular CLI to generate a standalone chat component:

   ng generate component components/chat --standalone

What Happens:
- This command creates the following files in src/app/components/chat/:
  - chat.component.ts (logic and structure)
  - chat.component.html (HTML template)
  - chat.component.css (styles)

Update the Chat Component Template

To create the chat interface, update chat.component.html:

   <div class="chat-container">
     <h1>GPT-Powered Chat</h1>
     <textarea [(ngModel)]="userInput" placeholder="Ask something..."></textarea>
     <button (click)="sendPrompt()">Send</button>

     <div class="response" *ngIf="response">
       <h3>Response:</h3>
       <p>{{ response }}</p>
     </div>
   </div>

Explanation:

<textarea>: Captures user input using Angular’s two-way data binding ([(ngModel)]).
<button>: Triggers the sendPrompt() function when clicked.
<div class="response">: Displays GPT’s response conditionally (*ngIf="response").

Add Logic to the Chat Component

Edit chat.component.ts to handle user input and display the GPT API response:

   import { Component } from '@angular/core';
   import { GptService } from '../../services/gpt.service';
   import { CommonModule } from '@angular/common';
   import { FormsModule } from '@angular/forms';

   @Component({
     selector: 'app-chat',
     standalone: true,
     imports: [CommonModule, FormsModule],
     templateUrl: './chat.component.html',
     styleUrls: ['./chat.component.css']
   })
   export class ChatComponent {
     userInput: string = '';
     response: string = '';

     constructor(private gptService: GptService) {}

     sendPrompt(): void {
       this.gptService.generateResponse(this.userInput).subscribe(
         (data) => {
           this.response = data.choices[0].message.content.trim();
         },
         (error) => {
           console.error('Error:', error);
           this.response = 'Something went wrong. Please try again.';
         }
       );
     }
   }

Explanation:

Dependency Injection: The GptService is injected into the component through the constructor.
Two-Way Binding: The userInput variable is bound to the <textarea> for seamless input handling.
API Integration: The sendPrompt() function calls the GPT service, handles responses, and updates the response variable.

Create the GPT Service

Services in Angular manage data and logic that can be reused across components. Follow these steps to create and configure the GPT service:

Generate the Service:
- Run the following command:

   ng generate service services/gpt

Update the GPT Service Logic:
- Open src/app/services/gpt.service.ts and update it as follows:

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';

   @Injectable({
     providedIn: 'root',
   })
   export class GptService {
     private apiUrl = 'https://api.openai.com/v1/chat/completions';
     private apiKey = 'your-api-key-here'; // Replace with your OpenAI API key

     constructor(private http: HttpClient) {}

     generateResponse(prompt: string): Observable<any> {
       const headers = {
         Authorization: `Bearer ${this.apiKey}`,
         'Content-Type': 'application/json',
       };
       const body = {
         model: 'gpt-4o-mini',
         messages: [
           { role: 'system', content: 'You are a helpful assistant.' },
           { role: 'user', content: prompt },
         ],
         max_tokens: 100,
       };
       return this.http.post(this.apiUrl, body, { headers });
     }
   }

Explanation:

HttpClient: Used to send HTTP requests to OpenAI’s GPT API.
generateResponse(): Sends the user prompt to the API and returns an observable with the response.
API Key: Replace 'your-api-key-here' with your actual OpenAI API key.

Style the Chat Component

Add basic styling to chat.component.css:

   .chat-container {
     max-width: 600px;
     margin: auto;
     text-align: center;
   }

   textarea {
     width: 100%;
     height: 100px;
     margin: 10px 0;
   }

   button {
     padding: 10px 20px;
     font-size: 16px;
   }

   .response {
     margin-top: 20px;
     padding: 10px;
     border: 1px solid #ccc;
   }

Explanation:

The chat-container centers the chat interface.
The textarea and button styles ensure usability and aesthetics.

Securing Your API Key with Environment Variables

Hardcoding sensitive data like API keys in your service files is risky. A better approach is to use environment variables to keep your keys secure. This section will guide you on how to set up and use environment files in your Angular project.

Step 1: Create Environment Files

Navigate to the src/ directory in your project.
Create a new folder named environments if it doesn’t already exist.
Inside the environments/ folder, create two files:
- environment.ts: For development settings.
- environment.prod.ts: For production settings.

Step 2: Add Your API Key

Open the environment.ts file and define your API key:

   export const environment = {
     production: false,
     openAiApiKey: 'your-api-key-here',
   };

Open the environment.prod.ts file and add the same key for production:

   export const environment = {
     production: true,
     openAiApiKey: 'your-api-key-here',
   };

Step 3: Update the GPT Service

Modify the gpt.service.ts file to use the environment variable instead of a hardcoded API key:

   import { environment } from '../../environments/environment';

   private apiKey = environment.openAiApiKey;

Step 4: Prevent Sensitive Data from Being Committed

Open the .gitignore file in your project’s root directory.
Add the following line to ignore your environment files:

   src/environments/*.ts

This ensures your API keys and sensitive data won’t be included in version control.

Step 5: Share Environment Setup Instructions

When working on a team or sharing the project, provide clear instructions (like this section) on how to create and configure environment files. Avoid sharing actual API keys.

💡 Why Use Environment Variables?

This approach keeps your sensitive information secure while allowing different configurations for development and production environments. It’s a best practice for modern web development.

💡 Next Steps: Now that the chat component and GPT service are ready, you’ll integrate the component into your app in Section 6: Testing Your Application.

Section 6: Testing Your Application

Now that your GPT-powered chat app is built, it’s time to test it and ensure everything works as expected. This section will guide you through running your app locally, testing its features, and troubleshooting common issues.

Run the App Locally

Start the development server:

   ng serve

Open your browser and navigate to:

   http://localhost:4200/

What You Should See:

The default Angular app should load with your custom GPT-powered chat component at the center.
If you can interact with the chat interface and get responses from the API, congratulations! Your app is working.

Interact with the Chat Interface

Enter a message or question into the chat input field.
Click the Send button.
Wait for the GPT API to respond. The reply should display in the response area below the input.

Troubleshooting Tips

If something isn’t working as expected, use the following checklist to debug your app:

Common Issues and Solutions

The Page Doesn't Load:
- Check the terminal output for errors when running ng serve.
- Ensure all dependencies are installed:

     npm install

No Response from GPT API:
- Verify your API key in the environment.ts file.
- Check for typos in your GPT service URL (https://api.openai.com/v1/chat/completions).
- Ensure you’ve included the necessary headers (Authorization and Content-Type).
CORS Issues:
- Ensure your browser isn’t blocking API requests due to Cross-Origin Resource Sharing (CORS).
- If needed, use a browser extension or configure your backend to allow CORS.
Error in the Console:
- Look for error messages in the browser developer console.
- If the error relates to the API, double-check your service configuration.
Styling Issues:
- Ensure the styles in chat.component.css are applied correctly.
- Use browser developer tools to inspect the DOM and debug CSS.

💡 Pro Tip: Regularly check the terminal and browser console for any warnings or errors. These often provide useful hints for troubleshooting.

💡 Next Steps: Once your app is tested and functional, you can enhance it further in Section 7: Taking the Next Steps.

Section 7: Taking the Next Steps

Congratulations! You’ve successfully built and tested a GPT-powered chat app using Angular. Now, let’s explore Angular-specific enhancements and techniques to elevate your app and expand your skillset.

Enhancing Your App

Loading Indicators:
- Improve user experience by adding a loading spinner or message while waiting for a response.
- Use Angular’s *ngIf directive to display a spinner conditionally during HTTP calls.
Styling with Angular Material:
- Enhance your app’s appearance with Angular Material components.
- Install Angular Material:

   ng add @angular/material

Add prebuilt components like buttons, input fields, and dialog boxes for a polished look.
🖥️ Resource: Angular Material Documentation.

Form Validation:
- Implement validation for user inputs to ensure prompts meet criteria (e.g., non-empty, character limits).
- Use Angular’s FormBuilder and reactive forms to manage form state and validation logic.

   import { FormBuilder, Validators } from '@angular/forms';

   this.chatForm = this.fb.group({
     userInput: ['', [Validators.required, Validators.minLength(5)]],
   });

Reusability with Shared Components:
- Extract reusable UI elements, such as buttons or input fields, into shared components.
- Use these components across multiple parts of your app to maintain consistency.
Routing:
- Add multiple pages to your app, such as a settings page for customization or a help page for user guidance.
- Use Angular Router to set up and navigate between these pages.
- 🖥️ Resource: Angular Routing Guide.
State Management:
- Manage app-wide state, such as chat history or user preferences, using Angular services or state management libraries like NgRx.
- 🖥️ Resource: Introduction to NgRx.

Connecting to Other Endpoints

Learning how to work with APIs is a crucial skill in Angular development. Practice by integrating additional endpoints into your app:

REST API Integration:
- Experiment with connecting to public APIs, such as weather or news APIs.
- Use Angular’s HttpClient to fetch data and display it dynamically in your app.
- 🖥️ Resource: Angular HTTPClient Guide.
CRUD Operations:
- Build a simple feature to Create, Read, Update, and Delete data using a RESTful API.
- Practice building forms for input, lists for data display, and edit/delete functionality.
Error Handling:
- Learn to handle API errors gracefully using Angular’s catchError operator in rxjs.
- Display user-friendly error messages for better usability.

Share Your Work

Deploy Your App:
- Host your app using platforms like Firebase, Vercel, or Netlify.
- 🖥️ Resource: Angular Deployment Guide.
Collaborate with Others:
- Share your code on GitHub and invite feedback or contributions from the Angular community.
- Include a README file with setup instructions and a project overview.

💡 Next Steps:
Keep refining your app, experimenting with Angular’s features, and building more projects to deepen your understanding. Angular offers powerful tools to build dynamic and scalable web applications—mastering them is your next milestone!

Section 8: Conclusion

You’ve come a long way! From setting up your development environment to building and testing your GPT-powered chat app, you’ve successfully taken your first steps into Angular development. Along the way, you’ve learned critical skills like creating components, managing services, and integrating APIs.

What You’ve Accomplished

Built a Functional Angular App: You created a GPT-powered chat interface using Angular's powerful framework and tools.
Learned Angular Fundamentals: From components to dependency injection, you’ve explored Angular’s core features.
Connected to External APIs: You integrated a third-party API and handled HTTP requests and responses effectively.
Followed Best Practices: By using environment variables and secure development techniques, you’ve adopted professional coding standards.

Call to Action

Your journey into Angular development has only just begun. Here’s how you can keep progressing:

Practice Regularly:
- Build more projects to solidify your understanding of Angular concepts.
- Experiment with features like routing, state management, and animations.
Explore Advanced Angular Topics:
- Learn about lazy loading, optimizing performance, and testing Angular applications.
- 🖥️ Resource:
  - Angular Advanced Topics.
  - Angular & AI
Join the Community:
- Engage with other Angular developers for inspiration and support.
- Contribute to open-source Angular projects to sharpen your skills.
Stay Updated:
- Angular is a constantly evolving framework. Follow the official Angular blog and community channels to stay informed about new features and best practices.

Encouragement

Starting something new can be daunting, but remember: every expert was once a beginner. The effort you’ve put into learning Angular will pay off as you continue to build and grow. With the resources and knowledge you now have, you’re well-equipped to tackle more ambitious projects.

💡 Keep Building: The world of web development is vast and full of opportunities. Angular is just the beginning—dive deeper, experiment, and make your ideas come to life. Please feel free to ask questions if any or make contributions, you are highly welcomed!

💡 Explore the Code: The full source code for this project is available on GitHub. Feel free to clone, modify, or contribute to the project!

From Web2 to DeFi: Leveraging Liquidity Aggregation Tools for Seamless Integration: OneLiquidity

Bima — Thu, 17 Oct 2024 20:51:07 +0000

A big change is happening in the IT sector. It's not just a catchphrase; the transition from Web2's centralized models to Web3's decentralized promise is a revolution changing how we think about the Internet, banking, and digital connections. Decentralized Finance (DeFi) is at the vanguard of this movement, offering businesses and entrepreneurs previously unheard-of potential.

Web2 developers and IT specialists may find it difficult to include DeFi features in existing projects. However, this integration can be easy and very fruitful if you have the correct resources and knowledge. This article explains how to use liquidity aggregation technologies such as OneLiquidity to improve your platforms and maintain an advantage in the cutthroat IT industry by bridging the Web2 and DeFi gaps.

Section 1: The Evolution from Web2 to DeFi

1.1 Understanding Web2 and Its Limitations

Web2 has been the backbone of the internet for over a decade, characterized by user-generated content, social media platforms, and centralized control of data. While it has enabled significant advancements, it also comes with limitations:

Centralized Control: A few entities hold the majority of control over data and platforms, leading to concerns about privacy and censorship.
Scalability Issues: Central servers can become bottlenecks, affecting performance and user experience.
Innovation Constraints: Centralization can stifle innovation due to gatekeeping and proprietary systems.

1.2 Introduction to DeFi

Enter Decentralized Finance (DeFi)—a movement that leverages blockchain technology to create an open, permissionless, and highly interoperable financial ecosystem. DeFi aims to:

Eliminate Intermediaries: By using smart contracts, DeFi removes the need for traditional financial middlemen.
Enhance Transparency: Transactions are recorded on public blockchains, ensuring transparency and trust.
Promote Accessibility: Anyone with an internet connection can access DeFi services, fostering financial inclusion.

1.3 Why Transition to DeFi

For developers and businesses, embracing DeFi offers numerous benefits:

Innovative Opportunities: Create new financial products and services that were not possible in the Web2 paradigm.
Global Reach: Access a global market without the limitations imposed by centralized platforms.
User Demand: As users become more aware of data privacy and control, there's a growing demand for decentralized solutions.

Section 2: The Role of Liquidity in DeFi Integration

2.1 Importance of Liquidity

In any financial system, liquidity refers to the ease with which assets can be bought or sold without causing significant price changes. High liquidity ensures:

Efficient Markets: Smooth execution of trades with minimal slippage.
Better Pricing: Competitive rates for buyers and sellers.
Market Stability: Reduced volatility due to the availability of assets.

2.2 Challenges with Liquidity in Decentralized Platforms

Despite its advantages, DeFi faces liquidity challenges:

Fragmented Markets: Liquidity is spread across multiple decentralized exchanges (DEXs), leading to inefficiencies.
Slippage and Inefficiencies: Low liquidity can cause significant price slippage, affecting trade execution.
Complex Navigation: Users and developers need to interact with multiple platforms to access sufficient liquidity.

2.3 Liquidity Aggregation as a Solution

Liquidity aggregation addresses these challenges by consolidating liquidity from various sources into a single platform. This approach offers:

Enhanced Trade Execution: Access to deeper liquidity pools reduces slippage.
Simplified Integration: Developers can tap into multiple liquidity sources through a single API.
Improved User Experience: Users benefit from better pricing and faster transaction times.
Introducing OneLiquidity: A leading liquidity aggregation tool that simplifies DeFi integration for developers.

👉 Discover how OneLiquidity can provide seamless access to aggregated liquidity pools for your projects.

Section 3: Leveraging Liquidity Aggregation Tools for Seamless Integration

3.1 Benefits for Web2 Developers and Businesses

Integrating liquidity aggregation tools into your projects brings several advantages:

Simplified DeFi Integration: Reduce the complexity of connecting to multiple DEXs.
Enhanced User Experience: Offer users better pricing and faster transactions.
Competitive Edge: Stay ahead by adopting cutting-edge technologies that set your platform apart.

3.2 Key Features of OneLiquidity

OneLiquidity stands out with features tailored for developers:

Developer-Friendly APIs and SDKs
- Easy Integration: Straightforward APIs allow for quick and efficient integration into your existing platforms.
- Multi-Language Support: Compatible with various programming languages to suit your development environment.
Cross-Chain Compatibility
- Broad Network Access: Interact with multiple blockchain networks, including Ethereum, Binance Smart Chain, and more.
- Expanded Functionality: Offer users access to a wider range of assets and services.
Smart Order Routing
- Optimized Trades: Automatically find the best execution paths across different liquidity sources.
- Cost Efficiency: Minimizes transaction costs and maximizes value for users.

3.3 Integration Process Overview

Integrating OneLiquidity into your project is straightforward:

Sign Up: Create an account on the OneLiquidity platform.
Access the Developer Portal: Obtain your API keys and access documentation.
Integrate the APIs: Use the provided SDKs and code samples to integrate into your application.
Test and Deploy: Utilize sandbox environments for testing before going live.

👉 Ready to integrate DeFi into your platform effortlessly? Visit the OneLiquidity Developer Portal to get started.

Conclusion

The integration of DeFi functionalities into Web2 platforms is no longer a futuristic concept—it's a present-day opportunity that can redefine your business and development projects. By leveraging liquidity aggregation tools like OneLiquidity, you can seamlessly bridge the gap between traditional web technologies and the decentralized finance revolution.

Embracing these tools not only enhances your platform's capabilities but also positions you at the forefront of technological innovation. With improved user experiences, access to global markets, and the ability to create novel financial products, the benefits are substantial.

Transform your development journey and stay ahead in the evolving tech landscape.

👉 Embrace the future of finance today. Integrate with OneLiquidity and transform your platform with cutting-edge DeFi capabilities. Get Started Now.

Integrate Fingerprint and Face ID Authentication in Your Angular App Using WebAuthn: A Step-by-Step Guide

Bima — Thu, 05 Sep 2024 09:50:27 +0000

Let’s be honest—we’ve all wished we could log into websites using our fingerprints or Face ID, just like on mobile apps, right? Well, thanks to web biometrics, that dream isn’t so far-fetched anymore. Imagine ditching those long, complicated passwords and simply using our fingerprint or face to sign in to our favorite websites. Sounds cool, doesn’t it?

Web biometrics, powered by WebAuthn, is making this possible. It's a fancy name for something quite simple: authenticating us with the same kind of security as our phone’s fingerprint sensor or facial recognition, but directly in our web browser. No more worrying about passwords getting leaked or stolen—just a quick scan, and we’re in.

In this tutorial, we’re going to get hands-on with integrating fingerprint and Face ID login into our Angular apps. We’ll cover the essentials, like how the WebAuthn API works and what we need to do on the backend to keep everything secure and smooth. It’s easier than you might think, and by the end, we’ll have our app all set up for the future of authentication. So, let’s dive in and make logging in a breeze!

Understanding WebAuthn: The Basics for Fingerprints and Face-recognition in Angular Apps

Alright, before we jump into the code, let’s get a quick handle on what WebAuthn is all about. Think of WebAuthn as the bridge that connects our apps to the cool biometric features we love on our phones—like fingerprints and Face ID—right in our browsers. It uses public key cryptography to authenticate users, which means no more storing plain old passwords that hackers can easily snatch up. Instead, we’re talking about securely generated keys that make our logins both safe and seamless.

Key Objects and Their Roles

To get things rolling, we need to understand a couple of key players in the WebAuthn game: PublicKeyCredentialCreationOptions and PublicKeyCredentialRequestOptions. Don’t let the long names scare you—they’re just fancy ways to tell the browser how we want to register and authenticate users.

1. PublicKeyCredentialCreationOptions

This is our go-to object when setting up new user credentials. It includes:

challenge: A unique, random value generated by the server to ensure the response is fresh and can’t be reused.
rp: Stands for Relying Party (our app) and includes details like the app’s name and ID.
user: Info about the user, like a unique ID, username, and display name.
pubKeyCredParams: A list of public key algorithms we’ll allow.
authenticatorSelection: Helps us choose the right type of authenticator based on things like attachment type (platform or cross-platform) and user verification level.

2. PublicKeyCredentialRequestOptions

When it’s time to verify our users, this object takes the spotlight. It includes:

challenge: Just like before, this ensures our authentication request is fresh and unique.
allowCredentials: Specifies which credentials are allowed for the user.
userVerification: Dictates whether user verification (like a fingerprint scan) is required.

With these objects in hand, our Angular app will be able to guide users through registering their biometric data and authenticating quickly and securely. Next, we’ll get into the code and see how to make this magic happen in our app!

Setting Up the Angular App

In this section, we’ll guide you through setting up an Angular application with biometric authentication using WebAuthn. We’ll focus on using fingerprints and Face ID, so let's get our hands dirty!

Step 1: Setting Up Our Angular Project

To get started, let’s create a new Angular project. Open your terminal and type the following commands:

ng new web-biometrics-demo
cd web-biometrics-demo
ng serve

This sets up a basic Angular application, and running ng serve will start your app on http://localhost:4200/. You should see the default Angular welcome page. Now, we’re ready to integrate WebAuthn for biometric authentication.

Step 2: Creating the WebAuthn Service

We need a service in Angular to manage all our WebAuthn functionality, including registration and authentication using biometrics. Let’s create this service by running:

ng generate service services/webauthn

Now, open webauthn.service.ts and add the following code:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class WebAuthnService {

  constructor() { }

  // Generates a random buffer to use as a challenge, which is a unique value needed for security
  private generateRandomBuffer(length: number): Uint8Array {
    const randomBuffer = new Uint8Array(length);
    window.crypto.getRandomValues(randomBuffer); // Fills the buffer with cryptographically secure random values
    return randomBuffer;
  }

  // Registers a new credential (like a fingerprint or Face ID) for the user
  async register() {
    // Generate a unique challenge for the registration process
    const challenge = this.generateRandomBuffer(32);

    // PublicKeyCredentialCreationOptions is the core object needed for registration
    const publicKey: PublicKeyCredentialCreationOptions = {
      challenge: challenge, // A random value generated by the server to ensure the request is fresh and unique
      rp: { // Relying Party (your app) information
        name: "OurAwesomeApp" // Display name of your app
      },
      user: { // User information
        id: this.generateRandomBuffer(16), // A unique identifier for the user
        name: "user@example.com", // User's email or username
        displayName: "User Example" // A friendly name for the user
      },
      pubKeyCredParams: [{ // Array of acceptable public key algorithms
        type: "public-key",
        alg: -7  // Represents the ES256 algorithm (Elliptic Curve Digital Signature Algorithm)
      }],
      authenticatorSelection: { // Criteria for selecting the appropriate authenticator
        authenticatorAttachment: "platform", // Ensures we use the device's built-in biometric authenticator like Touch ID or Face ID
        userVerification: "required" // Requires user verification (e.g., fingerprint or face scan)
      },
      timeout: 60000, // Timeout for the registration operation in milliseconds
      attestation: "direct" // Attestation provides proof of the authenticator's properties and is sent back to the server
    };

    try {
      // This will prompt the user to register their biometric credential
      const credential = await navigator.credentials.create({ publicKey }) as PublicKeyCredential;
      this.storeCredential(credential, challenge); // Store the credential details locally for demo purposes
      console.log("Registration successful!", credential);
      return credential; // Return the credential object containing the user's public key and other details
    } catch (err) {
      console.error("Registration failed:", err);
      throw err; // Handle any errors that occur during registration
    }
  }

  // Authenticates the user with stored credentials (like a fingerprint or Face ID)
  async authenticate() {
    const storedCredential = this.getStoredCredential(); // Retrieve stored credential information
    if (!storedCredential) {
      throw new Error("No stored credential found. Please register first."); // Error if no credentials are found
    }

    // PublicKeyCredentialRequestOptions is used to prompt the user to authenticate
    const publicKey: PublicKeyCredentialRequestOptions = {
      challenge: new Uint8Array(storedCredential.challenge), // A new challenge to ensure the request is fresh and unique
      allowCredentials: [{ // Specifies which credentials can be used for authentication
        id: new Uint8Array(storedCredential.rawId), // The ID of the credential to use
        type: "public-key"
      }],
      userVerification: "required", // Requires user verification (e.g., fingerprint or face scan)
      timeout: 60000 // Timeout for the authentication operation in milliseconds
    };

    try {
      // This will prompt the user to authenticate using their registered biometric credential
      const credential = await navigator.credentials.get({ publicKey }) as PublicKeyCredential;
      console.log("Authentication successful!", credential);
      return credential; // Return the credential object with authentication details
    } catch (err) {
      console.error("Authentication failed:", err);
      throw err; // Handle any errors that occur during authentication
    }
  }

  // Stores credential data in localStorage (for demo purposes only; this should be handled securely in production)
  private storeCredential(credential: PublicKeyCredential, challenge: Uint8Array) {
    const credentialData = {
      rawId: Array.from(new Uint8Array(credential.rawId)), // Converts the raw ID to an array for storage
      challenge: Array.from(challenge) // Converts the challenge to an array for storage
    };
    localStorage.setItem('webauthn_credential', JSON.stringify(credentialData)); // Store the data as a JSON string
  }

  // Retrieves stored credential data from localStorage
  private getStoredCredential(): any {
    const storedCredential = localStorage.getItem('webauthn_credential');
    return storedCredential ? JSON.parse(storedCredential) : null; // Parse the stored JSON back into an object
  }
}

What’s Happening in the Code?

generateRandomBuffer: Creates a random buffer that serves as a challenge to ensure each authentication or registration request is unique.
register: This method sets up the biometric registration process. It uses PublicKeyCredentialCreationOptions to define parameters like the challenge, relying party (your app), user information, and acceptable public key algorithms. When navigator.credentials.create() is called, the browser prompts the user to register their biometric data.
authenticate: This method handles user authentication with biometrics. It uses PublicKeyCredentialRequestOptions to define the authentication challenge and credentials that can be used. The method prompts the user to authenticate with their registered biometrics.
storeCredential and getStoredCredential: These methods handle storing and retrieving credentials in localStorage for demonstration purposes.

In a real-world app, you’d securely store this information on your backend.

Step 3: Building the UI

Now, let’s create a basic UI with buttons to trigger the registration and login functions. This UI will provide feedback based on whether the registration or login was successful.

Open app.component.ts and replace the content with the following:

import { Component } from '@angular/core';
import { WebAuthnService } from './services/webauthn.service';

@Component({
  selector: 'app-root',
  template: `
    <div class="auth-container">
      <h1>Web Biometrics in Angular</h1>
      <button (click)="register()">Register with Fingerprint</button>
      <button (click)="login()">Login with Face ID</button>
      <p *ngIf="message" [ngClass]="{'success': isSuccess, 'error': !isSuccess}">{{ message }}</p>
    </div>
  `,
  styles: [`
    .auth-container {
      text-align: center;
      padding: 50px;
    }
    .success {
      color: green;
    }
    .error {
      color: red;
    }
    button {
      margin: 10px;
      padding: 10px 20px;
      font-size: 16px;
    }
    p {
      margin: 10px;
      font-size: 16px;
    }
  `]
})
export class AppComponent {
  message: string | null = null; // Message to display feedback to the user
  isSuccess: boolean = false; // Indicates if the last action was successful

  constructor(private webAuthnService: WebAuthnService) { }

  // Trigger registration process and update the UI based on the outcome
  async register() {
    try {
      await this.webAuthnService.register();
      this.message = "Registration successful!"; // Success message if registration works
      this.isSuccess = true;
    } catch (err) {
      this.message = "Registration failed. Please try again."; // Error message if something goes wrong
      this.isSuccess = false;
    }
  }

  // Trigger authentication process and update the UI based on the outcome
  async login() {
    try {
      await this.webAuthnService.authenticate();
      this.message = "Authentication successful!"; // Success message if authentication works
      this.isSuccess = true;
    } catch (err) {
      this.message = "Authentication failed. Please try again."; // Error message if something goes wrong
      this.isSuccess = false;
    }
  }
}

What’s Happening in the Component?

register and login methods: These methods call the respective register and authenticate methods from the WebAuthnService. If successful, a success message is displayed; otherwise, an error message is shown.

Template and Styling: The template includes buttons to trigger registration and login, and it displays messages to the user based on the operation's outcome. The buttons are styled for simplicity.

That’s it! We’ve built a basic Angular app with WebAuthn-based biometric authentication, supporting fingerprints and Face ID. This setup captures the core concepts and lays a foundation that can be expanded with additional features and security measures for a production environment.

Backend Considerations

When implementing biometric authentication like fingerprints or Face ID in web applications using WebAuthn, the backend plays a crucial role in managing the security and flow of data. Here’s a breakdown of how the backend processes work in theory, focusing on registration and login functionalities.

Registration: Sign-up

1. User Registration Flow:

User Data Capture: During registration, the user provides basic credentials, such as an email and password. If biometric data is also being registered, this is captured as part of the WebAuthn response.
Password Hashing: For security, passwords are never stored in plain text. Instead, they are hashed using a library like bcrypt before being stored in the database.
Storing WebAuthn Credentials:
- Challenge Handling: The server sends a challenge during the registration process, which is a randomly generated value to prevent replay attacks.
- Response Validation: When the client responds with the WebAuthn data, it includes clientDataJSON and attestationObject that need to be decoded and verified.
- Credential Storage: After validation, key data from the response—like the webauthnId (a unique identifier for the credential) and the publicKey (used to verify future authentications)—are stored in the database alongside the user record.

2. Backend Code Responsibilities:

The backend uses libraries like cbor to decode binary data formats from the WebAuthn response, extracting necessary elements like the public key and authenticator data.
It ensures that the challenge from the initial registration request matches what is returned in the WebAuthn response to verify the authenticity of the registration.
If the WebAuthn response passes all checks, the credentials are saved in the database, linked to the user account.

Login

1. User Login Flow:

Challenge Generation: Similar to registration, the server generates a challenge that must be responded to by the client’s authenticator during login.
Validating the WebAuthn Response:
- The client sends back a PublicKeyCredentialRequestOptions object containing the response to the challenge.
- The backend decodes and verifies this response, ensuring that the challenge and the credentials match what is stored in the database.
Credential Verification:
- The public key stored during registration is used to verify the signature in the login response.
- If the credentials match, the backend allows the login and generates an authentication token (like a JWT) for the session.

Error Handling:

Mismatch or Invalid Response: If the challenge response does not match the expected values, or if the WebAuthn credentials do not verify correctly, the backend responds with an error, preventing unauthorized access.
Fallback to Password: If WebAuthn fails or is unavailable, the system can revert to traditional password verification, ensuring users can still access their accounts.

Security Considerations

Data Integrity: The integrity of WebAuthn credentials is critical. Any modification in storage or transmission would cause verification to fail, thereby securing the authentication process.
Challenge Nonces: The use of unique, time-limited challenges ensures that responses cannot be reused, protecting against replay attacks.
Public Key Storage: Storing only public keys (which cannot be used to impersonate the user) enhances security, as private keys remain on the client device.

By following these principles, the backend effectively manages biometric authentication, ensuring a secure, seamless experience for users wanting to use features like fingerprint or Face ID in their Angular apps.

Summary

In this tutorial, we walked into integrating biometric authentication with Angular using WebAuthn. We covered the essentials, from understanding key WebAuthn objects like PublicKeyCredentialCreationOptions and PublicKeyCredentialRequestOptions to setting up Angular services and UI components for a smooth registration and login process. We also discussed the backend considerations necessary for handling biometric authentication securely.

For those eager to see WebAuthn in action, I have provided a demo and a repository with a complete implementation. You can check out the demo here and explore the source code on GitHub at this repository.

Embracing biometric authentication not only enhances security but also simplifies the user experience, paving the way for a future where logging in is as easy as a fingerprint scan or a quick face recognition. As you integrate these features into your Angular apps, you'll be contributing to a more secure and user-friendly web. Happy coding!

What are Angular Signals?: Exploring State Control and Rendering in Angular Apps

Bima — Mon, 17 Jul 2023 20:29:44 +0000

The ability to create stable and feature-rich web applications has made Angular, a potent JavaScript framework, extremely popular. Managing states becomes a crucial part of development as applications become more complex. Angular Signals can be used in this situation. Within Angular applications, signals offer a method for effectively managing state and improving rendering updates.

Developers can take fine-grained control over state changes by utilizing Signals, which enables Angular to optimize rendering updates for faster performance and a seamless user experience. We will examine the foundations of Angular Signals in this article, along with their types and applications. We will delve into real-world scenarios and code snippets to demonstrate the advantages of utilizing Angular Signals for state management and rendering optimization in our Angular applications. Let's get started and see how Signals can transform the way we manage state and optimize rendering updates, resulting in Angular applications that are more effective and reactive.

It is important to note that the Angular signal is a new update that is usable only when we have the new Angular 16 version installed or running.

Prerequisites

Hands-on experience with Angular
Basic knowledge of Angular's Reactive principles

Importance of Signals in Angular Apps

Angular Signals play an important role in state management and rendering optimization in Angular applications, providing distinct advantages over other reactive primitives such as RxJS and Co. The importance of Angular Signals lies in their lazily evaluated and memoized computed Signals, automatic dependency tracking, simplified state updates, granular state tracking, and change detection integration. Signals give developers granular control over state changes, allowing for more effective and focused state management.

The writable Signals make updating state values simpler without requiring difficult operations. By only launching necessary updates, automatic dependency tracking optimizes rendering performance. Computed signals that have been hastily evaluated and memorized save time by avoiding unnecessary calculations. The efficient updates in OnPush components are ensured by the integration with Angular's change detection. Angular Signals is a useful tool for state management and rendering optimization in Angular applications because of these benefits.

What are Angular Signals?

We appear to have begun defining what angular signals are in the preceding sections, but let us first define what a signal is. Assume we are in a room with people who cannot hear or speak, and we can only communicate with them by using signs with our hands and expression. For example, if we need to tell them to stand on their feet, we do so by sequentially moving our hands upwards, they get the sign, and then stand on their feet, and so on. We have signaled to them with our hands, causing them to change their current state from sitting to standing.

Angular signals work in the same way; we have a variable written as a signal, and when we update it, the signal catches it and automatically updates the variable, resulting in reactivity. Signals in angular, on the other hand, are variables that store a variable and provide a signal or notification whenever the variable is updated.

How to create and use Angular Signals

Now that we know what signals are and why they are important, we can look at how to use them in our angular applications. In its version 16 release, the angular team included three (3) reactive primitives (signals):

Writable Signals
Computed Signals
Effects

These are the primary primitives for using Signals to achieve reactivity in angular applications. However, let us go a step further and learn how to combine and use the aforementioned primitives.

We can check out this article's Stackblitz project here for a better understanding.

1. Writable Signals

Writable signals are Angular signals whose values can be directly updated. They are essentially pre-defined signals. A signal must be defined or created before it can be written to, updated, or read. To have a writable signal, we must first define it. However, defining or creating a signal is not a difficult process; consider the code below to see how a signal is defined.

// defination of a signal
our_first_signal = signal<number>(0);

The above line of code is the technical demonstration of how to define or create a signal. We create a property named our_first_signal, we then assign the signal() function, provided by the angular team with an initial value of 0, hence making the property our_first_signal a signal and not a normal property.

Generally, signals are getter functions hence, to read the value of our defined signal we would need to call the signal like we would call a function. The lines of code below demonstrate how to read the value from a signal.

//reading the value of signal
ngOnInit(): void {
 console.log("Our first signal:", this.our_first_signal())
 // returns 0
}

In the above line of code, we have a console.log statement that logs the value of the signal that we are reading by calling it.

So far we have defined a signal and read its value. Now let us get to the interesting part of updating or writing to the signal. Let us take for example we want to update the value of our signal from 0 to 5, how do we go about this? Thanks to the angular team, we can use the set() or update() method to change or update our signal. The update() method modifies the signal based on its current value while the set() method changes the value of a signal. Let us examine the following lines of code below for a better understanding of how to use these methods:

 ngOnInit(): void {
    this.our_first_signal.set(8);
    // or
    this.our_first_signal.update((val) => val + 2);
    console.log('Our first signal:', this.our_first_signal());
    // expected results: 10
}

Using the set() method, we set the value of our_first_signal signal to 8, as shown in the code above. In the second line, we use the update() method to add 2 to the value of our_first_signal. The update method accepts a callback function as an argument, which is called with the current value of the signal, and the callback function's return value is set as the new value of the signal. The value of our_first_signal is logged to the console in the third line.

It is important to note that signals also work with strings, numbers, arrays, and objects. When working with either arrays or strings, situations may require updating a particular property while maintaining other values in the array. To achieve this, the angular team has a mutate() method that changes the content of a signal value rather than the value itself. Let us take for example we have an array of objects with properties name and age and we want to update the age property while retaining the value of name we would use the mutate() method to do this. Let us carefully examine the lines of code below to understand the technical application of the mutate() method.

// creating the signal

 persons = signal(
    [
      {
        name:"Alice",
        age: 10
      },
      {
        name: "John",
        age: 15
      }
    ]
  );

// using the mutate() method to replace the first object's age to 21

this.persons.mutate(value =>
        value[0].age = 21
)

// reading our signal by calling and logging it to the console
ngOnInit(): void {
 console.log("personsSignal", this.persons())
}

We created a signal called persons and assigned it an array of objects in the preceding code. We then used the mutate() method to change the age of the first object to 21. Finally, we called the signal and recorded it on the console. The console's output can be seen in the image below.

As we can see, the age of the first object has been replaced with 21. This is because the mutate() method is used to change the signal's value. A callback function is passed as an argument to the mutate() method. The callback function takes the current signal value as an argument and returns the new signal value.

2. Computed Signals: Getting Dynamic Values

Computed signals are a powerful tool in Angular applications for deriving values from other signals. When calculating derived values, computed signals are lazily evaluated and memoized, resulting in efficient and reactive behavior.

We use the computed() function with a derivation function as its argument to create a computed signal. Let's look at some code samples to see how computed signals work.

// Create two signals: price and quantity
const price = signal(10);
const quantity = signal(5);

// Create a computed signal for total cost based on price and quantity

const totalCost = computed(() => price() * quantity());

ngOnInit(): void {
 console.log(totalCost()); // Output: 50
}

We created two signals, price, and quantity, in the code above to represent the price and quantity of a product.

Following that, we define a computed signal named totalCost. The total cost is calculated by multiplying the values of the price and quantity signals. Only when the computed signal is read for the first time or when its dependencies (price or quantity) changes will it perform this calculation.

Finally, we log the value of totalCost to the console, which in this case is 50 based on the initial price and quantity values.

The ability of computed signals to handle complex calculations and transformations is a notable advantage. Consider the following scenario: we have a signal that represents an array of products, and we want to compute the total value of all products:

  // Create a signal for the array of products
  products = signal([
  { name: 'Product A', price: 10 },
  { name: 'Product B', price: 15 },
  { name: 'Product C', price: 20 },
]);

// Create a computed signal for total value based on products
 totalValue = computed(() =>
  this.products().reduce((sum, product) => sum + product.price, 0)
);

//reading the signal
ngOnInit(): void {
   console.log("computed2",this.totalValue()); // Output: 45
}

In this example, we define a signal called products, which represents an array of products and their prices. The computed signal, totalValue is then created, which uses the reduce() method to calculate the sum of all product prices in the array.

We can easily calculate the total value of the products by using computed signals, regardless of changes in individual product prices.

Overall, computed signals offer a declarative and effective method of handling derived values. By avoiding pointless calculations, their hastily evaluated and memoized nature ensures optimal performance. With computed signals, we can keep our application responsive and effective while carrying out complicated computations, filtering data, or producing derived values from other signals.

3. Effects: Reacting to Signal Changes

Effects are methods that take place whenever the values of one or more signals change. Effects offer a practical way to respond to changes in the signal and carry out additional tasks or actions in response to those changes. Let's investigate effects more thoroughly with the aid of some code examples.

We employ the effect() function and supply a callback function as its argument to produce an effect. The action that needs to be taken whenever the dependent signals change is represented by this callback function. Let's use a real-world example to demonstrate how effects work.

    // Create a signal for user authentication status
     isAuthenticated = signal(false);

    // Create an effect to perform actions based on authentication status
    // Place in ngOninit 
    ngOnInit(): void {
      effect(() => {
        if (this.isAuthenticated()) {
           console.log('User is authenticated. Redirecting to dashboard...');
           // Code to redirect to the dashboard can be added here
          } else {
          console.log('User is not authenticated. Redirecting to login page...');
          // Code to redirect to the login page can be added here
         }
    });
          // Simulate authentication status change
          this.isAuthenticated.set(true);
  }

In this illustration, the authentication status of a user is represented by a signal called isAuthenticated. The effect is triggered when the isAuthenticated signal changes and, depending on the authentication status, takes particular actions.

We determine the value of isAuthenticated inside the callback function for the effect. We log a message to the console and redirect to the dashboard page if it is true, indicating that the user has been authenticated. We log a different message and direct the user to the login page, however, if the isAuthenticated value is false, indicating that the user is not authenticated.

The use of effects to respond to changes in authentication status and initiate corresponding actions in our Angular application is illustrated by the example given here. It demonstrates the adaptability of effects in handling a variety of scenarios, like user authentication, and lets us include custom logic to meet the requirements of our application.

Conclusion

In this article, we looked at how Angular Signals play an important role in state management and rendering optimization in Angular applications. Developers gain precise control over state changes by using Signals, resulting in improved performance and reactivity. These Signals, which include writable signals, computed signals, and effects, provide benefits such as granular state tracking, simplified updates, automatic dependency tracking, and computed values that are evaluated lazily. Using Angular Signals allows developers to build stable, feature-rich web applications that provide a consistent user experience. Using Signals in Angular development projects allows us to realize the full potential of state management and rendering optimization, improving application performance and maintainability.

4 Best Code Practices for Creating a Responsive Website

Bima — Sat, 24 Jun 2023 20:03:57 +0000

It's a pleasure to have you here as we explore the "4 Best Code Practices for Creating a Responsive Website." You've come to the right place if you want to improve your web development abilities and make sure that your websites work properly on a variety of devices and screen sizes. Join me as we examine the essential tactics and strategies for creating user-friendly, responsive websites. Let's begin code optimization for a fantastic user experience on all devices!

Before we begin looking at code optimizations and other code-related applications, let us take a look at why it is needed to build websites that look good on various screen sizes.

Why is Responsiveness crucial in Web design and performance?

Using a responsive design strategy, you can make sure that a website will function properly and adapt to different devices and screen sizes. The website dynamically modifies its layout, images, and content to offer the best user experience, fully aware that responsive design entails creating a website that responds to its environment.

The ability of responsiveness to improve user experience, increase search engine visibility, and increase conversion rates makes it crucial. A responsive design makes sure that your website is accessible and aesthetically pleasing on all the devices that your audience uses, despite the increasing dominance of mobile devices and the constantly shifting technological landscape. The responsive design encourages greater engagement, lowers bounce rates, and increases general customer satisfaction by providing a consistent and user-friendly experience. In the end, investing in responsive design ensures that your website is future-proof and can easily adapt to new devices and screen sizes as they are developed, which will be advantageous for your company in the long run.

Having known this, let us go ahead to discuss the 4 best code practices to follow when building a responsive web page for better web performance in the section below.

The 4 Best Code Practices for Creating a Responsive Web Design.

1. Proper Page Layouting

Most websites have a header at the top that includes the logo, navigation menu, and a few other menus. which could be positioned to take up the entire width of the screen, the left, the center, or both, followed by the hero section, and so on.

Moreover, Page Layouting is the process of arranging and positioning these various elements on a web page to produce a high-quality content rendering that is visually appealing to users.

Flexbox and Grid systems are primarily used in web design to position layouts. These are effective layout systems with unique strengths and functions. The key to choosing which system to use in any given situation is to have a thorough understanding of how both of them operate. Once we have this understanding, we can move forward and start the act of proper page layout.

The CSS Flexbox system is great for making responsive designs, vertical centering, and handling dynamically expanding or contracting content. While the CSS Grid, with its capacity to manage both rows and columns simultaneously, is well-suited for overall page layouts. It supports responsive grid structures, grid alignment, spanning, and placing objects within particular cells.

The CSS Flexbox systems, as is well known, have many different properties, including flex-direction, justify-content, and flex-wrap. With these characteristics and simulation using CSS Media Queries, we are not far from achieving a completely responsive layout. As a result, it is the easiest layout system to use when designing not overly complicated layouts. Let's say that on large screens, two elements are placed side by side; however, on smaller screens, these elements are compressed and appear squeezed. On smaller screens, however, we prefer that these components stack one on top of the other for convenience. How do we proceed with this? This is accomplished by setting the flex-direction property to row on big screens and column on smaller ones. For a better understanding, let's look at the code illustration below.

.contents {
    display: flex;
    flex-direction: row;
}

@media only screen and (min-width: 600px) {
.contents {
    display: flex;
    flex-direction: row;
   }
}

The @media rule was used in the code above to apply various styles for various media types and devices to the contents class. This means that the contents class will have the flex-direction: column; property applied to it if the screen size is less than 600px. Additionally, the contents class will have the flex-direction: row; property applied to it if the screen size is greater than 600px. making the contents appear on smaller screens in a column and on larger screens in a row.

It is crucial to remember that CSS Flexbox also provides other styling options, including the flex-wrap property, to enable the creation of fluid, responsive layouts. Since the flex-wrap property regulates how flex items are wrapped or displayed when they exceed the available space within a flex container along the main axis, applying it to the logic in the previous explanation would eliminate the need for media queries. In this manner, the elements adapt automatically as our screen size changes, producing the desired responsive response.

Overall, it is significant to note that a thorough understanding of the CSS Grid and Flexbox systems is crucial to achieving proper page layout because it will aid in the proper structuring of divs and provide knowledge of when to use Flexbox or Grid.

2. Embracing Percentage for Width Sizes

We are quite familiar with setting sizes for the widths of images, sections, elements, and other components as front-end engineers and UI/UX designers. Then as we move forward with our development, particularly on the part of frontend engineers who write the code, we would notice that when we adjust screen sizes into smaller and smaller pixels, we tend to have problems with the page having an excessive width that causes a scroll bar to appear at the bottom of the screen. Yes, of course. The interesting part is that, despite the fact that most browsers use pixels (px) as their standard unit of measurement, we can still think of our computer's screen as a space that is 100% wide and tall. This means that regardless of whether the screen size decreases or increases, the width, and height remain at 100%.

As a result, problems with elements or divs having extra width are lessened or completely resolved, assisting in the creation of a responsive layout. Let's say we have two adjacent div elements. To prevent extra width issues and ensure that they maintain the screen's width across all devices, we would set the width of the aforementioned elements or divs to 50%. This indicates that these elements or divs should take up 50% of the full screen on any screen size or device. And keep in mind that, as was already mentioned, the measurement for the entire HTML page remains at 100%, regardless of the size of the screen. By doing this, the aforementioned elements or divs will easily adapt to any screen size, resulting in simpler and more seamless responsive web design.

Furthermore, it's essential to remember that the 100% rule can be applied to divs or elements in addition to the entire page, as described in the paragraphs above in this section. This indicates that the child div or elements view the div above them as their parent div and that this parent div also acts as if it were our entire screen, with 100% height and 100% width. The styling for the child div or element can therefore be set to take 50% of its parent div, and so on. which makes a significant contribution to the fluidity of our apps.

3. Harness the Power of "em" Units for Font Sizes

Font size is a key factor in determining readability and overall design aesthetics when it comes to designing visually appealing and user-friendly websites. Employing em units to specify font sizes has become a potent strategy in web design that has a wealth of advantages.

Em units, also known as "emerald units," are a type of relative measurement that is frequently applied in web development. em units offer a flexible and scalable method for defining font sizes in contrast to fixed pixel values. With such adaptability, the text on your website can easily adjust to various screen sizes and resolutions, improving user experience on a variety of devices.

You can have more control over the typography on your website by utilizing the strength of em units. Em units are based on the parent element's font size, allowing you to create a unified visual hierarchy across all of your web pages. A consistent and well-balanced design is achieved by changing the font size at the parent level, which automatically cascades the changes to child elements.

Em units also provide a responsive design benefit. Font sizes specified in em units will proportionally scale as users zoom in or out on their browsers, maintaining optimal legibility and readability. In the mobile age, where users access websites on a variety of devices with different screen sizes and resolutions, this adaptability is especially valuable.

Additionally, em units encourage inclusivity and accessibility by enabling dynamic text resizing. Websites using em units will gracefully respond to these modifications, accommodating their needs without compromising the design integrity. People with visual impairments or those who prefer larger text sizes can easily adjust the font size in their browser settings.

It's critical to maintain balance when using em units to specify font sizes. Although em units' relative nature allows for flexibility, it is important to avoid overcrowding elements with em units because this can result in compounding font size increases or decreases. A unified and aesthetically pleasing outcome will be achieved by maintaining a clear hierarchy and carefully applying em units to the appropriate elements.

Finally, utilizing em units for font sizes gives web designers the ability to produce visually stunning, responsive, and inclusive websites. By following this best practice, you can improve the readability, adaptability, and overall aesthetics of the typography on your website. So take advantage of em units' potential to open up a world of opportunities for your web projects.

4. Embrace the Art of Minimalism: Mastering the Practice for Responsive Web Designs

It has become essential to create a responsive web design in the quick-paced digital environment where users browse websites on a variety of devices. Websites must now seamlessly adjust to various screen sizes and resolutions; it is no longer enough for them to just look good visually. Adopting the minimalist aesthetic in web design not only improves aesthetics but is essential for creating a website that is truly responsive.

With its emphasis on clarity and simplicity, minimalism is perfectly in line with the fundamentals of responsive web design. Minimalistic designs offer a strong foundation for creating fluid layouts that adapt naturally to different screen sizes by eliminating extraneous clutter and elements. A minimalist design's clear and uncluttered interface gives content room to breathe and gives responsive elements room to resize and reposition themselves gracefully.

The use of minimalism in responsive web design enhances user experience across various devices. The user interface can be made simpler and less distracting by removing extraneous visuals, excessive text, and redundant features. This makes it possible for users to interact and navigate your website without any difficulty, whether they are using a desktop, tablet, or smartphone. A consistent and intuitive user experience across devices is offered by minimalist designs, which improves engagement and promotes repeat visits.

Improved website performance is another advantage of minimalism in responsive web design. Minimalist designs help reduce the overall file size, which leads to faster load times as there is an increasing expectation for websites to load quickly. Your website becomes more effective by reducing the number of elements and improving the code, providing users with a fluid and responsive browsing experience across various devices and network conditions.

Additionally, minimalism encourages a mobile-first mindset, which is crucial in the current mobile-centric era. You can make sure that your website works flawlessly on mobile devices by giving priority to the content and features that are absolutely necessary. A minimalist design's clarity and simplicity make it simpler to identify and prioritize the most important components for smaller screens, ensuring that users can access and interact with your content without difficulty.

It's critical to strike a balance between functionality and simplicity when incorporating minimalism into responsive web design. You should keep the essential components and make sure the website is still simple to use while removing any extraneous elements. To ensure a consistent and satisfying experience for all users, pay attention to how elements respond to changes in size and test the design on various devices.

In conclusion, embracing the minimalist aesthetic is a potent technique for developing responsive web designs. You can achieve aesthetic appeal, improve user experience, and increase website performance across devices by implementing minimalist principles. So, if you want to realize the full potential of responsive web design, dive into the world of minimalism and become an expert practitioner.

Conclusion

We have looked at the "4 Best Code Practices for Creating a Responsive Website" throughout this article, as well as the key methods and procedures for achieving the best possible web design. By incorporating these practices, your websites would appear flawlessly on a variety of devices and screen sizes.

So keep in mind the strength of these coding techniques because they can make your websites more responsive and user-friendly. Apply them diligently, try out various strategies, and keep improving your abilities. By doing this, you'll not only stay ahead in the fast-paced field of web development but also build websites that engage visitors across all platforms.

The Power of Angular @Input and @Output Decorators: A Comprehensive Overview

Bima — Sun, 11 Jun 2023 02:23:49 +0000

Are you working on a codebase in which you use a component you created but need to display data or perform a click function in your child component from the parent component? or perhaps you learned about reusable components and wanted to test them out, but your child or reusable component is having issues talking and communicating with other components? Cheers and congratulations; the purpose of this article is to help you not only comprehend but also solve the problem of communication between components in Angular using Angular's @input and @output decorators.

What is the `@input` and `@output` Decorator?

So, first and foremost, let's talk about decorators. Decorators are a way of adding metadata to a class, its properties, or its methods in the context of Angular. Decorators are basically functions that wrap around a class, property, or method and change its behavior in some way.

However, let us briefly discuss class decorators and class field decorators. Class decorators are used to decorate classes, whereas class field decorators are used to decorate class fields or properties.

Class decorators modify the behavior of the entire class. By way of illustration, the @Component() decorator, which is mentioned immediately before a class definition, contains metadata that aids Angular in understanding how the classes or properties should function.

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
}

Whereas class field decorators modify the behavior of a specific property or field within a class. The best examples are the @Input and @Output decorators.

Now that we've covered that, let's look at the @Input and @Output decorators in particular. These are two of the most common Angular decorators.

`@Input` Decorator - Parent-to-Child communication

The @Input decorator is used to pass data from one component to another. When the @Input decorator is applied to a property in a child component, it transforms it into a property that can receive data from its parent component. This enables the parent component to communicate with the child component and pass data to it, which can then be used in the template or logic file of the child component.

To have a practical understanding of the above theory, take for example you have two components:

Parent Component
Child Component

The parent component is trying to teach its child how to count numbers, it does this by asking its child to render the number of times a button in its component was clicked. How would this be achieved? Let's take a look at how the parent component HTML would look like below:

parent-component.html file

<button (click)="teachChildNumbersCounting()">Ask Child</button>
<app-child [clickCounts]="clicks"></app-child>

The child component is given the value of clicks in the code above. The child component keeps track of changes in the clickCounts value and updates the child component's count value accordingly. Using interpolation from the child.component.html file, the child component will then show the value of the count in the template.

Wondering what the logic file for the parent component would look like? You can examine the following lines of code below:

parent-component.ts file

export class Component1 { 
  clicks = 0;  
  teachChildNumbersCounting() { 
    this.clicks++; 
  }
}

In the above lines of code, the property clicks is defined and a value of 0 is set to it. Following it is a definition of the teachChildNumbersCounting() function used in parent-component.html, the file that adds +1 to the clicks' value whenever the function is triggered by clicks from the button and then passed to the child component.

However, the child component's clickCounts property is decorated with the @Input decorator in the child-component.ts file so that the child component can render the clicks property through it. The majority of the work is completed here. As was already said, the @Input decorator turns the property clickCounts into a data-receiving property for its parent component. This allows communication between the parent and child components, all thanks to the @Input decorator.

The code implementation for the above explanation on how the @Input decorator is used in the child-component.ts file can be examined in the lines of code below:

child-component.ts file

@Component({
....
}}
export class childComponent {
  @Input() clickCounts: number;
}

With the above implementation, the child component can now render the number of times the parent component clicked the button in its component.html file by making use of interpolation for data binding to display the value set to the clickCounts property.

However, you can examine the code implementation for the explanation made below:

child-component.html file

 <div>
     <p>No of clicks from parent's Component - {{clickCounts}}</p>
</div>

@Output Decorator - Child-to-Parent communication

The @Output decorator, on the other hand, is used to emit events from a child component to a parent component. When the @Output decorator is applied to a property or method in a child component, it transforms it into an event emitter that can be triggered to emit data or events from the child component to its parent component. This enables the child component to communicate with and send data or events back to the parent component.

Nevertheless, keep in mind the example from the section above. Since the child component can now display how many times the button in the parent component was clicked on. Now consider our example in reverse, where the parent component displays the number of times the button in its child component was clicked.

To achieve this, some edits would be made to the child component. First, you can take a look at the child's template component in the following lines of code below:

child-component.html file

  <div>
     <p>No of clicks from parent's Component - {{clickCounts}}</p>
     <button (click)='countClicks()'>Click to count from child</button>
  </div>

The logic file for the above template can be examined below:

child-component.ts file

export class Component2 {
@Output() childToPrentCountClick: EventEmitter<number> = new EventEmitter<number>();
@Input() clickCounts: number;
countClicks() { 
  this.childToPrentCountClick.emit();
  }
}

The event emitter in the component mentioned above is childToPrentCount. This listens to when a click event is triggered. For this to be effective, the parent component would need to be updated. This can be observed in the following lines of code:

parent-component.html file

<button (click)="teachChildNumbersCounting()">Ask Child</button>
<p>No of clicks from child's Component - {{clicks}}</p>
<app-child 
[clickCounts]="clicks" 
childToPrentCountClick="teachChildNumbersCounting()" 
></app-child>

In the above lines of code, the function teachChildNumbersCounting() was passed to the childToParentCountClick event emitter that is decorated with the @Output decorator in the child's decorator. This allows our button clickable with desired logic controlled by the parent component without the child component performing any logic on the button click.

Conclusion

To summarize, during this article, we have discussed how the @Input decorator passes data from a parent component to a child component, whereas the @Output decorator emits events from a child component to a parent component. These decorators, when used together, enable powerful communication and interaction between components in Angular applications.

How to Implement Animate on Scroll in Angular Web Apps - Using the AOS Library

Bima — Wed, 18 May 2022 03:58:17 +0000

Introduction

Animations pique a user's interest in applications. Not only that, animations can also be used to improve UX(user experience) considering the fact that making dramatic transitions and movements on the screen can be a way to retain a user’s attention while the content of a page loads . In this article, we’ll go over how to use the Animate On Scroll (AOS) library to animate Angular web pages.

Learning Objectives

At the end of this article, you would have learned how to:

Install and configure the Animate On Scroll Library
Initialize and animate web pages in Angular applications.

Prerequisites

To get the most out of this tutorial, a basic understanding of the following is required;

HTML
CSS
Angular
Typescript

Let's get started by going over the step-by-step process to
achieve the learning objectives of this tutorial.

1. Setting up/installing an Angular app.

An angular app must be running before we begin at all. This can be accomplished by executing the following sequence of commands:

ng new my-app

 // ? Would you like to add Angular routing? Yes
 // ? Which stylesheet format would you like to use? CSS

All of our routing configuration would need to be defined in
our
angular project's app-routing.module.ts file. Angular CLI
will add the app-routing.module.ts file to our Angular
project if we answer "YES" to the question "Would you like
to add Angular routing?".

cd myApp

This would change our directory to myApp folder.

ng serve --o

This would serve and open our Angular project on http://localhost:4200 by default. This way we can now view our project.

2. Configuring/installing the Animate On Scroll (AOS) library.

We will install and configure the animation library in this step so that it can be accessed and used in the project. To install the library, run the following command:

npm install aos

The above command will install the animation library, and once it has been successfully installed, it is important to update the styles array in the angular.json file to include the animation library. To do this, open the angular.json file and add the following line to it;

“node_modules/aos/dist/aos.css”

Having done that correctly, we have successfully installed and configured the AOS library, which makes it ready for use in our project.

We may need to restart our server in order for our project to be updated with recent changes after installation, but only if our project appears to be out of date.

3. Initializing/ Animating with the Animate On Scroll Library (AOS).

In this step, we would finally bring our animations to life and make them work as we scroll through our web pages. Let's get started and see what happens.
First, we must open our desired component's TS file, for example, “home-component.ts”, import the AOS library, and initialize it. This can be accomplished by following the steps outlined below;

Import the library: Inside the desired component.ts file, add the import;

import AOS from "aos";

Initialize the functionality: To get the AOS library functioning, it is important to call the init() function in the ngOnInit of our component.ts file. This can simply be done by adding the the following line of code:

AOS.init();

By doing this, the AOS library has been initialized and our animations are ready for action. But before we can see the effects, we must open our component.html file(e.g home-component.html), which must be the html component of the ts file we just worked on, and set animation using the data-aos attribute in our desired divs. Example;


<div data-aos="fade-up" data-aos-duration="3000">
  <!-- our contents —->
</div>

The code above would add a fade-up animation to the div on scroll, but the capability of the AOS Library is not limited to this. To discover more animations, The official Animate on Scroll website has an experience of animations and effects provided by the library. You may check it out here and notice how the effects happen as you scroll down and up the page.

Conclusion.

So far in this article, we've been able to see how easy it is to set up an Angular app with Animate On Scroll effects on its pages using the AOS Library. Questions and suggestions are always welcome in the comments. See you in the next article.
Happy Coding!

Thank you for reading this far. I hope you found the tutorial useful. If you have any questions or comments, please leave them in the comments section.

HOW TO BUILD A LOGIN AND SIGN UP PAGE WITH API AUTHENTICATION IN ANGULAR

Bima — Mon, 10 Jan 2022 04:17:55 +0000

Introduction

Login and sign-up pages are used to control some aspects of a website's user interactions. In this article, we'll go over how to use an API to authenticate a login and sign-up page in Angular.

Learning Objectives

By the end of this article, we should be able to:

Perform basic route configurations in angular.
Call an API to register users (sign-up).
Call an API to login users.
Create and make use of JSON server.

We will make use of JSON server as our fake backend in this
article

Let's get started and walk through the steps to archiving this article's learning objectives.

1. Setting up/installing Angular app

A running angular app must be created before beginning work on the login or sign-up forms. This can be accomplished by executing the following commands:

ng new myApp

 // ? Would you like to add Angular routing? Yes
 // ? Which stylesheet format would you like to use? CSS

All of our routing configuration would need to be defined in
our
angular project's app-routing.module.ts file. Angular CLI
will add the app-routing.module.ts file to our Angular
project if we answer "YES" to the question "Would you like
to add Angular routing?".

cd myApp

This would change our directory to myApp folder.

ng serve --o

This would serve and open our Angular project on http://localhost:4200 by default. This way we can now view our project.

2. Generating components

Angular applications are composed of components, which serve as the foundation for angular projects or applications. We would create or generate three (3) components, which are as follows:

Sign-up component
Login component
Home page component

The following commands must be executed to generate the required components:

ng generate component components/signup-up-page

ng generate component components/login-page

ng generate component components/home

The commands above would generate our required component.

3. Routing And Route Configuration

Navigation between our components or pages would be possible thanks to routing and route configuration. You can learn more about angular routing Here. The steps to accomplishing this, however, are as follows:

Go to the app.component.html file, delete everything in it (for newly installed projects only), and add
<router-outlet></router-outlet>
Go to the app-routing.module.ts file, import all of our generated components in it.
Example:

import { LoginPageComponent } from './components/login-page/login-page.component';
import { SignUpPageComponent } from    './components/sign-up-page/sign-up-page.component';
import { HomeComponent } from './components/home/home.component';

Still in the app-routing.module.ts file , we would go to our routes array and, define our path of our route using our generated Angular components. Here in our path: ".." we would insert our route name. Example:

const routes: Routes = [
  {path:"", redirectTo:"login", pathMatch:"full"},
  {path:"login", component:LoginPageComponent},
  {path:"signUp", component:SignUpPageComponent},
  {path:"home", component:HomeComponent},
];

With the above configuration, our angular application would default to displaying the login component and other components when their pathnames (e.g., /login) are called.

4. Building a simple Login and Sign-Up form

We would create our login and sign-up forms here. To begin, navigate to our login-page.component.html file and copy the following code:

<div>
    <h1>Hi Welcome Back</h1>
     <h3>Login Here</h3>
      <form>
        <div>
          <label for="email">Email</label>
          <input  required  type="text">
          <label for="password">Password</label>
          <input  type="password">
        </div>
        <button>Submit</button>
        <span>Don't have an account? 
        <a routerLink="/signUp">signUp</a></span>
      </form>
  </div>

Now that our login page is complete (we can add our desired stylings), let's move on to our sign-up-page.component.html file and copy the following code:

<div>
   <h1>Hello Welcome </h1>
     <h3>Create An Account</h3>
      <form>
        <div>
          <label for="email">Email</label>
          <input  required  type="text">
          <label for="password">Password</label>
          <input  type="password">
        </div>
        <button>Submit</button>
        <span>Already have an account? 
        <a routerLink="/login">signUp</a></span>
      </form>
  </div>

With this, we have gotten our login and sign-up form ready.

5. Setting up JSON server

In a matter of seconds, JSON server creates a rest API with no code, and we can access the full documentation HERE. This would serve as our fake backend, allowing our application to function as if it had a real backend. Let's get started with our setup by going through the steps below:

1 Install JSON server

npm install -g json-server

2 Create db.json file

Let's create a db.json file with some data
We will create a new file inside myApp folder in our project and name it db.json. We would as well copy some data in it.

{
"signupUsersList": [
    {
      "email": "bolu@gmail.com",
      "password": "1234"
    }
  ],
}

3 Start JSON server

json-server --watch db.json

Now let us open http://localhost:3000/signupUsersList(would serve as our API link), we would see the data we added previously. This way we have successfully gotten our JSON server up and running.

6. Making API calls for authentication

To begin, we would need to make a post request in our sign-up form in order to register our users, followed by a get request for validation and authentication. We will be working with REACTIVE FORMS in angular. Let's follow the steps below to get started:

Call API to register users

Import necessary modules Let's go to our sign-up-page.component.ts file and copy the following:

import { FormGroup, FormBuilder } from '@angular/forms';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';

Call API to register users Still inside our sign-up-page.component.ts let's go inside our exports and copy the following code:

public signUpForm !: FormGroup
  constructor(private formBuilder: FormBuilder, private http: HttpClient, private router: Router) { }

  ngOnInit(): void {
    this.signUpForm = this.formBuilder.group({
      email: [""],
      password: [""]
    })
  }

  signUp(){
    this.http.post<any>("http://localhost:3000/signupUsersList",this.signUpForm.value)
    .subscribe(res=>{
      alert('SIGNIN SUCCESFUL');
      this.signUpForm.reset()
      this.router.navigate(["login"])
    },err=>{
      alert("Something went wrong")
    })
  }

Let's go into our sign-up-page.component.html file to implement our formGroup in our form tag, formControlName in our input tags and signUp function.
we would simply rewrite previous code as the following:

<div>
   <h1>Hello Welcome </h1>
    <h3>Create An Account</h3>
      <form [formGroup]="signUpForm" (ngSubmit)="signUp()">
        <div>
          <label for="email">Email</label>
          <input formControlName="email"  type="email"  required>
          <label for="password">Password</label>
          <input formControlName="password"  type="password">
        </div>
        <button>Submit</button>
        <span>Already have an account? 
        <a routerLink="/login">signUp</a></span>
      </form>
  </div>

The code blocks above would retrieve all of our formGroup's input field values, store them in our db.json file with the help of our JSON server, and navigate our page to our login page.

Cheers!! We were able to successfully register our users by making an API call.

Call API to login users Now let's go into our login-page.component.ts file and follow the steps below:

Import necessary modules

import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

Inside our exports

public loginForm!: FormGroup

  constructor(private formbuilder: FormBuilder,private http: HttpClient, private router: Router) { }

  ngOnInit(): void {
    this.loginForm = this.formbuilder.group({
      email: [''],
      password: ['', Validators.required]
    })
  }
  login(){
    this.http.get<any>("http://localhost:3000/signupUsersList")
    .subscribe(res=>{
      const user = res.find((a:any)=>{
        return a.email === this.loginForm.value.email && a.password === this.loginForm.value.password 
      });
      if(user){
        alert('Login Succesful');
        this.loginForm.reset()
      this.router.navigate(["home"])
      }else{
        alert("user not found")
      }
    },err=>{
      alert("Something went wrong")
    })
  }

Let's go into our sign-up-page.component.html file
we would rewrite previous code as the following:

<div>
    <h1>Hi Welcome Back</h1>
     <h3>Login Here</h3>
      <form  [formGroup]="loginForm" (ngSubmit)="login()">
        <div>
          <label for="email">Email</label>
          <input formControlName="email"  required  type="email">
          <label for="password">Password</label>
          <input formControlName="password"  type="password">
        </div>
        <button>Submit</button>
        <span>Don't have an account? 
        <a routerLink="/signUp">signUp</a></span>
      </form>
  </div>

The code blocks above would retrieve all of our formGroup's input field values, validate them against the data in our db.json file, and navigate our page to our home page using our JSON server.
Cheers!! We successfully used an API call to authenticate our users.

Conclusion

Finally, we went through the process of "How to build a login and sign-up page in Angular," where we learned how to perform basic routing in angular, set up and use a JSON server, and login and sign-up our users using api calls.