DEV Community: MAURICE OMBEWA

A Complete Beginner’s Guide to Angular: Learn, Understand, and Build with Confidence

MAURICE OMBEWA — Mon, 03 Nov 2025 13:37:28 +0000

Introduction

If you’re just getting started with web development, you’ve probably heard of Angular, React, and Vue — the three giants of modern front-end frameworks. This guide will focus entirely on Angular, helping you move from zero to confident beginner. By the end, you’ll understand what Angular is, how it works, its file structure, and why it might be the right choice for your projects.

What Is Angular?

Angular is a powerful front-end JavaScript framework created and maintained by Google. It helps developers build dynamic, single-page applications (SPAs) that feel fast and seamless.

In simple terms, Angular lets you create web apps that behave like desktop apps — fast, responsive, and user-friendly.

It is built using TypeScript, a superset of JavaScript that adds static typing and better tooling, making your code more predictable and maintainable.

Why Angular?

Angular stands out because it offers a complete solution for building web applications. Unlike some frameworks that focus only on the view layer (like React), Angular provides everything you need — routing, form handling, HTTP communication, and state management — all built-in.

Key Advantages

Component-Based Architecture

Your app is divided into reusable pieces (components), making it easier to manage and scale.
Two-Way Data Binding

Data in the UI automatically updates when the underlying model changes and vice versa.
Dependency Injection

Helps manage how parts of your app depend on each other in a clean and testable way.
TypeScript Support

TypeScript makes your code more structured, less error-prone, and easier to debug.
Rich Ecosystem

Angular comes with powerful built-in tools like the Angular CLI, which speeds up setup, development, and deployment.

Angular vs Other Frameworks

Feature	Angular	React	Vue
Type	Full framework	UI library	Progressive framework
Language	TypeScript	JavaScript (JSX)	JavaScript
Data Binding	Two-way	One-way	Two-way
Learning Curve	Steeper	Moderate	Gentle
Best For	Large, enterprise apps	Dynamic UIs	Small to medium apps
Maintained By	Google	Meta (Facebook)	Open-source community

When to Choose Angular

When building large-scale enterprise applications
When your project needs structure and scalability
When you want strong TypeScript integration
When your team prefers an all-in-one framework rather than mixing libraries

If you need a small, fast, and flexible setup, React or Vue might be better. But if you’re working on something complex that will grow over time, Angular shines.

Setting Up Angular

1. Install Node.js

Angular runs on Node.js. Download and install it from nodejs.org.

To check installation:

node -v
npm -v

2. Install the Angular CLI

The Angular CLI (Command Line Interface) helps create and manage projects easily.

npm install -g @angular/cli

3. Create a New Angular Project

ng new my-angular-app
cd my-angular-app
ng serve

Then open your browser and go to http://localhost:4200. You’ll see the default Angular welcome page.

Understanding Angular File Structure

After running ng new, Angular creates a folder structure like this:

my-angular-app/
│
├── node_modules/        # All dependencies
├── src/                 # Source code of your app
│   ├── app/             # Application logic (components, modules, services)
│   │   ├── app.component.ts     # Main component logic
│   │   ├── app.component.html   # Template (UI)
│   │   ├── app.component.css    # Styling
│   │   └── app.module.ts        # Root module of your app
│   │
│   ├── assets/          # Static files (images, fonts, etc.)
│   ├── environments/    # Environment settings (dev/prod)
│   ├── index.html       # Main HTML file loaded in browser
│   ├── main.ts          # Entry point that bootstraps the app
│   └── styles.css       # Global styles
│
├── angular.json         # Project configuration
├── package.json         # Lists dependencies and scripts
└── tsconfig.json        # TypeScript compiler options

Key Files Explained

app.component.ts – Defines your main component logic.
app.component.html – Holds the HTML template.
app.component.css – Defines styling for that component.
app.module.ts – Registers components, directives, and services.
main.ts – Boots up the application.
angular.json – Configures build and project settings.
package.json – Lists packages required by your app.

Building Your First Component

Angular apps are made up of components. A component is just a combination of HTML, CSS, and TypeScript that represents part of the UI.

Example

Run this command:

ng generate component greeting

This creates a new folder inside app/ called greeting with four files:

greeting/
├── greeting.component.ts
├── greeting.component.html
├── greeting.component.css
└── greeting.component.spec.ts

In greeting.component.html, write:

<h2>Welcome to Angular, {{ name }}!</h2>
<input [(ngModel)]="name" placeholder="Enter your name">

And in greeting.component.ts:

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

@Component({
  selector: 'app-greeting',
  templateUrl: './greeting.component.html',
  styleUrls: ['./greeting.component.css']
})
export class GreetingComponent {
  name = 'Developer';
}

Now open app.component.html and add:

<app-greeting></app-greeting>

You’ll see an input field that dynamically updates the welcome text.

Understanding Data Binding

Angular uses different types of data binding:

Type	Syntax	Description
Interpolation	`{{ data }}`	Displays dynamic values in HTML
Property Binding	`[property]="value"`	Binds a property of an element
Event Binding	`(event)="handler"`	Responds to user events
Two-Way Binding	`[(ngModel)]="data"`	Combines property and event binding

Example:

<input [(ngModel)]="username">
<p>Hello, {{ username }}</p>

Services and Dependency Injection

Services allow you to share logic or data across components. They are especially useful for things like fetching data from an API.

Example:

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

@Injectable({
  providedIn: 'root'
})
export class UserService {
  getUser() {
    return { name: 'Alice', role: 'Admin' };
  }
}

To use this in a component:

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  template: `<p>User: {{ user.name }}</p>`
})
export class UserComponent {
  user;
  constructor(private userService: UserService) {
    this.user = this.userService.getUser();
  }
}

Routing in Angular

Routing lets you navigate between different pages (components) in a single-page application.

Example:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Then add <router-outlet></router-outlet> in app.component.html — this is where pages will render.

Conclusion

Angular can feel like a lot at first, but once you get comfortable with its structure and concepts, it becomes one of the most powerful frameworks to work with. It gives you everything you need to build complex, high-performance web applications that scale gracefully.

With this foundation, you can now:

Understand the Angular file structure
Build your own components
Use data binding and services
Implement routing and navigation

Next steps:

Explore Angular forms and validation
Learn about lifecycle hooks
Experiment with APIs using the HTTP client

The best way to master Angular is to build something — even a simple to-do list app. Every project will deepen your understanding.

Happy coding!

Understanding APIs: The Beginner’s Complete Guide

MAURICE OMBEWA — Sat, 16 Aug 2025 20:58:57 +0000

If you’ve spent some time in the tech world, you’ve probably heard the word API thrown around a lot. But what exactly is an API? Why does everyone seem to rely on it? And how can you, as a beginner, understand and even use one?

This blog will break everything down in simple terms, with real-world analogies, types of APIs, code examples, and how you can test them. By the end, you’ll be able to confidently explain what an API is, and even make your first API call!

What is an API?

API stands for Application Programming Interface.

Think of an API as a waiter in a restaurant:

You (the customer) look at the menu (the API documentation).
You ask the waiter for a meal (you send a request).
The waiter takes your order to the kitchen (the server).
The kitchen prepares the food (processes the data).
The waiter brings the meal back to you (the response).

Without the waiter (API), you’d have to go into the kitchen yourself, figure out how to cook the food, and that would be complicated.

In short:

An API is a bridge that allows two software applications to talk to each other without you needing to know what’s happening behind the scenes.

Real-Life Examples of APIs

Google Maps API → Lets developers add maps and location data into their apps.
Weather API → Allows apps to fetch real-time weather info (like "27°C and sunny").
Payment APIs (Stripe, PayPal) → Enable apps to process secure payments.

Types of APIs

APIs come in different flavors depending on how they’re used. Let’s go through the main ones:

1. Open APIs (Public APIs)

Available for anyone to use.
Example: OpenWeatherMap API gives free weather data.

2. Internal APIs (Private APIs)

Used within a company only.
Example: A bank’s internal system uses APIs to connect customer accounts to the mobile app.

3. Partner APIs

Shared between trusted business partners.
Example: Travel booking sites accessing airline APIs to show real-time flights.

4. Composite APIs

Combine multiple APIs into one.
Example: An app that books a flight, hotel, and rental car all in one request.

Common Styles of APIs

The way APIs are designed and communicated also matters:

1. REST APIs (Representational State Transfer)

Most popular type.
Uses HTTP methods like GET, POST, PUT, DELETE.
Data is usually returned in JSON format.

Example request (GET):

curl https://jsonplaceholder.typicode.com/posts/1

Example response:

{
  "userId": 1,
  "id": 1,
  "title": "My first blog post",
  "body": "Hello world! This is a sample API response."
}

When to use REST:

Best for simple CRUD operations (Create, Read, Update, Delete).
Great for web and mobile apps needing standard data exchange.
Works well when you don’t need highly customized queries.

2. SOAP APIs (Simple Object Access Protocol)

Older, uses XML.
More strict and used in enterprise systems (e.g., banking).

When to use SOAP:

Best in enterprise systems where strict security and formal contracts are required.
Good for financial services, telecom, or legacy systems.
When transactions must be reliable (ACID compliance).

3. GraphQL APIs

Lets you ask for exactly the data you need.
Developed by Facebook.

Example query:

{
  user(id: "1") {
    name
    email
  }
}

Response:

{
  "user": {
    "name": "Maurice Ombewa",
    "email": "maurice@example.com"
  }
}

When to use GraphQL:

Best when clients (like mobile apps) need flexibility to request specific fields.
Useful when working with complex data with many relationships.
Helps avoid over-fetching or under-fetching data.

4. gRPC APIs

Uses Protocol Buffers (faster, smaller than JSON).
Common in high-performance systems.

When to use gRPC:

Ideal for microservices communication.
Great for streaming data (real-time chat, video, IoT).
Best when you need speed and efficiency at scale.

Benefits of APIs

Simplify Development – You don’t reinvent the wheel; just use existing APIs.
Speed – Fetch data or trigger processes instantly.
Security – APIs can handle authentication (like OAuth for Google/Facebook login).
Scalability – Apps can grow faster with modular APIs.
Innovation – APIs let developers build new things on top of existing services.

How to Use an API (Step by Step)

Let’s walk through a simple API usage example with JavaScript.

We’ll use the free JSONPlaceholder API (a fake online REST API).

Example: Fetch Posts from API

// Simple JavaScript fetch example
fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json())
  .then(data => {
    console.log("Here are some posts:", data);
  })
  .catch(error => console.error("Error fetching data:", error));

Output (in console):

Here are some posts: 
[
  { userId: 1, id: 1, title: "My first blog post", body: "Hello world!" },
  { userId: 1, id: 2, title: "Another post", body: "APIs are fun!" }
  ...
]

How to Test APIs

You don’t need to build a whole app before testing APIs. Here are tools you can use:

Postman – Friendly GUI tool to test APIs.
cURL – Command line tool to make API requests.

Example (cURL GET request):

curl https://jsonplaceholder.typicode.com/users/1

Response:

{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "leanne@example.com"
}

API Authentication

Some APIs require keys or tokens to ensure only authorized people use them.

API Key → Like a password, added to the request.
OAuth → Used for login with Google, Facebook, etc.

Example (API key usage):

curl "https://api.openweathermap.org/data/2.5/weather?q=Nairobi&appid=YOUR_API_KEY"

Best Practices When Using APIs

Always read the documentation.
Keep your API keys safe (don’t push them to GitHub).
Use rate limits carefully (many APIs limit requests per hour).
Handle errors gracefully.

Conclusion

APIs are the invisible glue of the digital world. They connect apps, systems, and services together, from showing weather updates to processing payments.

You learned what APIs are.
You saw different types of APIs.
You got hands-on examples of REST and GraphQL.
You learned when to use each type of API.
You learned how to test APIs and why they’re powerful.

By now, APIs should feel less mysterious and more like a superpower you can use.

Understanding WebSockets: A Beginner-Friendly Guide

MAURICE OMBEWA — Tue, 12 Aug 2025 09:02:23 +0000

If you’ve ever used a chat app, online game, or real-time dashboard, you’ve probably benefited from WebSockets, even if you didn’t know it.

This guide will take you from zero to comfortable with WebSockets.

By the end, you’ll know what they are, why they’re useful, and how to use them, with simple examples.

1. What Are WebSockets?

Normally, when you load a webpage, your browser sends a request to a server, and the server sends back a response. This is called HTTP.

The problem?

HTTP is one-way. Once the server responds, the connection ends.
If you want new data, you must send another request.

WebSockets fix this by keeping a connection open so that the server and client can send messages to each other anytime.

Think of it like:

HTTP → sending a letter and waiting for a reply each time.
WebSockets → making a phone call and talking freely in real time.

2. Why Use WebSockets?

They’re perfect for situations where instant updates are important:

🗨️ Chat apps (messages appear instantly)
📈 Stock tickers (prices update live)
🎮 Online multiplayer games (real-time movement)
📊 Dashboards (live metrics and logs)

3. How WebSockets Work

Handshake

The client (browser) asks the server to upgrade the connection from HTTP to WebSocket.
Open Connection

Once accepted, both can send messages to each other anytime.
Data Exchange

Messages travel instantly in both directions.
Close Connection

When done, either side can close the connection.

4. A Simple Example

Let’s say we want a real-time chat between a browser and a server.

Server (Node.js)

// Install with: npm install ws
import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 3000 });

wss.on('connection', (ws) => {
  console.log('New client connected');

  ws.on('message', (message) => {
    console.log('Received:', message.toString());
    ws.send(`You said: ${message}`);
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

Client (HTML + JavaScript)

<!DOCTYPE html>
<html>
<body>
  <input id="msg" placeholder="Type a message">
  <button onclick="sendMessage()">Send</button>
  <div id="chat"></div>

  <script>
    const socket = new WebSocket('ws://localhost:3000');

    socket.onopen = () => {
      console.log('Connected to server');
    };

    socket.onmessage = (event) => {
      document.getElementById('chat').innerHTML += `<p>${event.data}</p>`;
    };

    function sendMessage() {
      const message = document.getElementById('msg').value;
      socket.send(message);
    }
  </script>
</body>
</html>

💡 What’s happening here?

When you click Send, the browser sends the message to the server instantly.
The server sends back "You said: ..." immediately.
No refreshing or reloading!

5. Real-Life Analogy

Imagine a walkie-talkie:

You press the button and talk.
The other person hears you instantly.
They can talk back immediately.

That’s exactly how WebSockets work - real-time, two-way communication.

6. Common Use Cases with Examples

6.1 Live Chat

Example: WhatsApp Web, Slack
WebSocket allows messages to show up instantly for all participants.

6.2 Live Notifications

Example: Facebook showing “New comment” without refresh.

socket.onmessage = (event) => {
  alert(`🔔 Notification: ${event.data}`);
};

6.3 Real-Time Updates

Example: Sports scores, live election results.

6.4 Multiplayer Games

Example: Sending player movement data instantly.

7. Tips for Beginners

Start simple – build a small app first (like the chat example).
Use libraries – in Node.js, ws is great. In Python, try websockets.
Handle disconnects – always check if the connection drops and reconnect if needed.
Secure it – use wss:// for secure connections over HTTPS.

8. Wrapping Up

WebSockets make your apps interactive, real-time, and engaging.

If you understand the basics:

How they keep connections open
How they send messages both ways
How to use them with simple code

…then you can confidently build live features like chat apps, notifications, and dashboards.

Integrating Large Language Models (LLMs) into Your Application or Website

MAURICE OMBEWA — Tue, 12 Aug 2025 08:43:50 +0000

Large Language Models (LLMs) like OpenAI’s GPT-5, Anthropic’s Claude, and Meta’s LLaMA can bring natural language capabilities to your app, from chatbots and content generation to data analysis and automation.

In this guide, we’ll cover:

Understanding LLMs
Choosing the right model
Integrating via APIs
Adding LLMs to common use cases
Best practices and tips

1. What Are LLMs?

A Large Language Model is an AI system trained on massive amounts of text to understand and generate human-like language.

They can:

Answer questions
Summarize text
Write code
Generate creative content
Act as chat assistants

Think of an LLM as a super-smart text engine you can plug into your app.

2. Choosing the Right Model

There are many options, each with trade-offs in cost, speed, and capabilities.

Model Provider	Examples	Strengths	Notes
OpenAI	GPT-4, GPT-5	High-quality, multi-purpose	Paid API
Anthropic	Claude 3	Safer, good for reasoning	Paid API
Meta	LLaMA 3	Open-source	Needs self-hosting
Mistral	Mistral 7B, Mixtral	Fast, open-source	Smaller context window

💡 Tip:

If you need the easiest integration, start with OpenAI or Anthropic APIs.

If you want full control or offline capabilities, go for open-source models like LLaMA.

3. Integrating via APIs

Most LLMs can be accessed through simple HTTP APIs.

Example: Integrating OpenAI’s ChatGPT API in JavaScript

import OpenAI from "openai";

const client = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

async function askLLM(prompt) {
  const response = await client.chat.completions.create({
    model: "gpt-4o",
    messages: [{ role: "user", content: prompt }]
  });

  console.log(response.choices[0].message.content);
}

askLLM("Explain how a blockchain works in simple terms.");

Steps:

Install the SDK (npm install openai)
Get an API key from your provider
Send a request with your prompt
Receive and display the response

4. Example Use Cases

🗨️ Chat Applications

Real-time customer support
AI-powered community moderation
Knowledge-base Q&A

Implementation Idea:

Frontend: Chat UI (React/Vue)
Backend: LLM API request handling
Bonus: Add WebSockets for instant replies

📝 Content Generation

Blog post writing
Product descriptions
Email drafting

Example Prompt:

Write a friendly blog intro about healthy breakfast ideas.

🔍 Data Analysis

Summarize documents
Extract insights from CSVs
Generate reports from raw data

🧠 Personal Assistants

Scheduling help
Task reminders
Answering domain-specific questions

5. Best Practices

Prompt Engineering
- Be specific in your instructions
- Example: Instead of “Tell me about AI,” say: "Explain artificial intelligence to a high school student in 3 sentences."
Guardrails & Moderation
- Filter harmful content using moderation APIs
- Validate LLM output before showing to users
Caching
- Save repeated queries to reduce cost and speed up responses
UI/UX
- Make the AI interaction smooth and intuitive
- Provide clear loading states and feedback
Cost Control
- Limit max tokens
- Use cheaper models for simpler tasks

6. Wrapping Up

Integrating an LLM into your app can transform user experience, making it smarter, faster, and more human-like.

Whether you’re building:

A chat app
A content generator
A data assistant

… the process is similar: pick a model → connect via API → design a good prompt → show the results beautifully.

With LLMs, your app can go from static to interactive and intelligent.

💡 Next Step:

Try adding an LLM-powered feature to your current project today, even something simple like an “Ask AI” button.

You’ll be surprised how quickly it can add value to your users.

Blockchain for Beginners: Understanding Web3 and Its Layers

MAURICE OMBEWA — Thu, 31 Jul 2025 20:01:14 +0000

If you’ve ever heard the word blockchain and thought, “That sounds complicated,” you’re not alone. But here’s the truth: blockchain is easier to understand than you think when explained with simple examples.

Imagine a shared notebook where anyone can write, but no one can erase or cheat. Everyone can see what’s written, and once a note is added, it’s permanent.

That’s essentially what blockchain is:

A digital record of transactions.
Decentralized, meaning no single person or company controls it.
Secure and transparent, because everyone on the network can verify it.

In this guide, we’ll explore:

How the internet evolved to Web3.
The differences between Web2 and Web3.
The layers of Web3 and why they matter.

By the end, even if you’re a complete beginner, you’ll have a solid understanding of blockchain and its ecosystem.

1. What is Blockchain?

A blockchain is a chain of digital “blocks” that store information (like transactions). Each block is linked to the one before it, creating a chain that cannot be altered without everyone knowing.

A Simple Analogy

Think of blockchain like a public library logbook:

Every time a book is borrowed or returned, the entry is written in the log.
Everyone can see the logbook, but no one can rip out old pages.
If someone tries to lie about borrowing a book, everyone else can verify the truth.

This is how blockchain secures money (Bitcoin), digital assets (NFTs), and contracts (smart contracts).

2. How the Internet Evolved: Web1 → Web2 → Web3

The internet didn’t start with TikTok or YouTube. It evolved in three main stages:

Web1: Read-Only Internet (1990s – Early 2000s)

You could read information, but not interact much.
Websites were static like online brochures.
Example: Yahoo pages, early Wikipedia.

Web2: Read and Write Internet (2005 – Present)

You can read and create content: posts, videos, photos.
Social media, e-commerce, and online communities exploded.
Downside: Big companies (Google, Facebook) own your data.
Example: Facebook, YouTube, Instagram.

Web3: Read, Write, and Own (Emerging Now)

Built on blockchain and decentralization.
You own your data and digital assets without relying on big tech companies.
Payments are in cryptocurrency, and apps are decentralized (dApps).
Example:
- Cryptocurrencies: Bitcoin, Ethereum
- DeFi apps: Uniswap, Aave
- NFT markets: OpenSea

Key Differences Between Web2 and Web3

Feature	Web2 (Today)	Web3 (Emerging)
Ownership	Companies own your data	Users own their data and assets
Control	Centralized servers	Decentralized via blockchain
Monetization	Ads and platform revenue	Direct crypto payments and tokens
Examples	YouTube, Facebook	OpenSea, Uniswap, Axie Infinity

Web3 represents a shift of power from corporations to individuals.

3. The Layers of Web3 Explained

Web3 is like a layered cake. Each layer has its job, and together they make the blockchain world work smoothly.

Layer 0: Network Infrastructure

What it is: The foundation that connects multiple blockchains.
Purpose: Enables different blockchains to communicate with each other.
Examples:
- Polkadot (connects many blockchains)
- Cosmos (internet of blockchains)

Think of it as roads that connect different cities (blockchains).

Layer 1: Base Blockchain

What it is: The main blockchain network where transactions and smart contracts happen.
Purpose: Provides security, consensus, and decentralization.
Examples:
- Bitcoin (digital money)
- Ethereum (smart contracts and dApps)
- Solana (high-speed transactions)

Think of Layer 1 as the main highway where all vehicles (transactions) travel.

Layer 2: Scaling Solutions

What it is: A secondary layer built on top of Layer 1.
Purpose: Makes transactions faster and cheaper by reducing congestion on the main chain.
Examples:
- Polygon (Ethereum Layer 2)
- Lightning Network (Bitcoin Layer 2)

Think of Layer 2 as an express lane above the highway to avoid traffic.

Layer 3: Application Layer

What it is: Where users interact with blockchain through decentralized applications (dApps).
Purpose: Brings blockchain to life with games, DeFi apps, NFT marketplaces, and wallets.
Examples:
- OpenSea (NFTs)
- Uniswap (decentralized trading)
- Axie Infinity (Web3 gaming)

This is the layer most people see and use, just like your favorite app on your phone.

4. Why These Layers Matter

Layer 0 & 1 → Provide security and decentralization.
Layer 2 → Improves speed and reduces costs.
Layer 3 → Makes blockchain useful and accessible to everyday users.

Understanding these layers helps you see how the Web3 ecosystem works together to create a better internet.

5. Conclusion: Your First Step into Web3

Blockchain and Web3 are redefining the internet. They give us:

Transparency (no hidden changes or secret control)
Ownership (your data and assets belong to you)
Opportunities (from crypto to NFTs to decentralized finance)

If you’re new to this world, start by:

Learning how crypto wallets work.
Exploring Layer 1 and Layer 2 networks safely.
Trying a Web3 app to experience decentralization firsthand.

The future of the internet is decentralized, user-owned, and open to everyone.

Your journey into Web3 can start today! 🚀

Using Odoo as a Backend: Module Setup, API Access, and curl Commands

MAURICE OMBEWA — Sun, 01 Jun 2025 08:48:25 +0000

Odoo is a powerful open-source ERP platform written in Python that can serve as a robust backend for various types of applications—from CRMs to eCommerce systems, inventory management, and more. It comes with a well-structured modular system and provides both XML-RPC and JSON-RPC APIs for backend operations.

In this blog, we’ll walk through:

Setting up Odoo and modules
Using Odoo's XML-RPC and JSON-RPC APIs
Testing APIs with curl commands for major modules (like Contacts, Sales, Inventory, etc.)

Setting Up Odoo and Modules

Step 1: Install Odoo
Install dependencies:

sudo apt update
sudo apt install git python3-pip build-essential wget python3-dev python3-venv libxslt-dev libzip-dev libldap2-dev libsasl2-dev python3-setuptools node-less libpq-dev

Clone Odoo:

git clone https://www.github.com/odoo/odoo --depth 1 --branch 16.0 --single-branch odoo16
cd odoo16
python3 -m venv venv
source venv/bin/activate
pip3 install -r requirements.txt

Start Odoo:

./odoo-bin -d odoo_db -i base --addons-path=addons --db-filter=odoo_db$
Access http://localhost:8069 in your browser.

Step 2: Install Odoo Modules
Go to Apps > Update Apps List > Search and Install:

Contacts
Sales
Inventory
Project
Website (Optional)

Or via CLI:

./odoo-bin -d odoo_db -i contacts,sale_management,stock,project --addons-path=addons

Using Odoo's APIs

Odoo provides XML-RPC and JSON-RPC APIs. We’ll focus on JSON-RPC, which is more modern and easier to test with curl.

Authentication API
Before anything, authenticate and get the uid.

Endpoint:

POST http://localhost:8069/jsonrpc
Payload:

{
  "jsonrpc": "2.0",
  "method": "call",
  "params": {
    "service": "common",
    "method": "authenticate",
    "args": ["odoo_db", "admin", "admin", {}]
  },
  "id": 1
}

Curl:

curl -X POST http://localhost:8069/jsonrpc \
-H "Content-Type: application/json" \
-d '{
  "jsonrpc": "2.0",
  "method": "call",
  "params": {
    "service": "common",
    "method": "authenticate",
    "args": ["odoo_db", "admin", "admin", {}]
  },
  "id": 1
}'

This returns a uid, say 2.

Sample Module APIs & curl Commands

Contacts Module (res.partner)

Create a Contact

curl -X POST http://localhost:8069/jsonrpc \
-H "Content-Type: application/json" \
-d '{
  "jsonrpc": "2.0",
  "method": "call",
  "params": {
    "service": "object",
    "method": "execute_kw",
    "args": [
      "odoo_db", 2, "admin",
      "res.partner", "create",
      [{
        "name": "Maurice Ombewa",
        "email": "maurice@example.com",
        "phone": "+254712345678"
      }]
    ]
  },
  "id": 2
}'

Sales Module (sale.order)

Create a Quotation (Sale Order)

curl -X POST http://localhost:8069/jsonrpc \
-H "Content-Type: application/json" \
-d '{
  "jsonrpc": "2.0",
  "method": "call",
  "params": {
    "service": "object",
    "method": "execute_kw",
    "args": [
      "odoo_db", 2, "admin",
      "sale.order", "create",
      [{
        "partner_id": 1  // Use a real contact ID
      }]
    ]
  },
  "id": 3
}'

Inventory Module (stock.picking)

List Incoming Shipments

curl -X POST http://localhost:8069/jsonrpc \
-H "Content-Type: application/json" \
-d '{
  "jsonrpc": "2.0",
  "method": "call",
  "params": {
    "service": "object",
    "method": "execute_kw",
    "args": [
      "odoo_db", 2, "admin",
      "stock.picking", "search_read",
      [[["picking_type_code", "=", "incoming"]]],
      {"fields": ["name", "state", "scheduled_date"], "limit": 5}
    ]
  },
  "id": 4
}'

Project Module (project.task)

Create a Task

curl -X POST http://localhost:8069/jsonrpc \
-H "Content-Type: application/json" \
-d '{
  "jsonrpc": "2.0",
  "method": "call",
  "params": {
    "service": "object",
    "method": "execute_kw",
    "args": [
      "odoo_db", 2, "admin",
      "project.task", "create",
      [{
        "name": "Blog Tutorial Task",
        "project_id": 1  // Use actual project ID
      }]
    ]
  },
  "id": 5
}'

Other Helpful API Operations

Read records

"method": "read",
"args": [[1, 2], ["name", "email"]]

Search + Read

"method": "search_read",
"args": [[["name", "ilike", "Maurice"]], ["name", "email"]]

Update (Write)

"method": "write",
"args": [[1], {"phone": "+254700000000"}]

Delete (Unlink)

"method": "unlink",
"args": [[1]]

Final Thoughts

Odoo provides a flexible backend that can power complex business applications. With its modular architecture and JSON-RPC APIs, you can integrate it with any frontend—whether it's React, Vue, Flutter, or Android.

In this guide, you've learned how to:

Set up Odoo and install modules
Authenticate using JSON-RPC
Use curl to interact with key models like Contacts, Sales, Inventory, and Projects

Unlocking Blockchain Consensus: PoW, PoS and DPoS Demystified

MAURICE OMBEWA — Mon, 21 Apr 2025 20:13:24 +0000

Blockchains rely on consensus mechanisms to agree on transactions. These protocols help networks resist fraud and manipulation.
In this article, we’ll explore three popular algorithms: Proof of Work (PoW), Proof of Stake (PoS), and Delegated Proof of Stake (DPoS). By the end, you’ll understand how each solves unique problems and how they work under the hood.

Proof of Work(PoW)

Key Concepts

Miner: Node that competes to validate blocks.
Hash puzzle: A cryptographic challenge requiring trial‑and‑error.
Difficulty: Level of puzzle complexity.
Block reward: Incentive paid to the winning miner.

How It Works

A miner gathers pending transactions into a block.
The miner repeatedly hashes the block with a nonce until the hash meets the target.
Once found, the miner broadcasts the block to the network.
Other nodes verify the hash and transactions.
Upon validation, the block is appended to the chain.

`// Simplified PoW block verification in Go
func VerifyPoW(header BlockHeader) bool {
    // Compute block hash
    h := header.Hash()
    // Accept if hash is below target
    return h.Cmp(header.Target) == -1
}`

Proof of Stake (PoS)

Problem

PoS addresses PoW’s high energy use and hardware centralization risks.

Key Concepts

Validator: Node staking funds to propose blocks.
Stake: Amount of cryptocurrency locked as collateral.
Slashing: Penalty for malicious behavior.
Finality: Assurance that a block cannot be reverted.

How It Works

Validators lock up stake to participate.
The protocol selects a validator based on stake weight.
The chosen validator proposes a new block.
Other validators vote on the proposal.
If at least two‑thirds vote yes, the block is finalized.

// Simplified PoS voting in Go
func CastVote(v Validator, blk Block) (Vote, error) {
    // Ensure block is valid
    if err := ValidateBlock(blk); err != nil {
        return Vote{}, err
    }
    // Sign block hash with validator key
    sig := v.Sign(blk.Hash())
    return Vote{BlkHash: blk.Hash(), PubKey: v.PubKey, Sig: sig}, nil
}

Delegated Proof of Stake (DPoS)

Problem

DPoS improves scalability and on‑chain governance.

Key Concepts

Delegate: Elected validator with block‑producing rights.
Voting power: Influence based on stake by token holders.
Round: A cycle in which each delegate produces one block.
Revocation: Removal of misbehaving delegates.

How It Works

Stakeholders vote to elect a fixed set of delegates.
Delegates take turns producing blocks in a round‑robin.
Each delegate verifies the previous delegate’s block.
Misbehaving delegates can be voted out.
Elections repeat at set intervals.

// Round‑robin delegate selection in JavaScript
function getNextDelegate(delegates, round) {
  // Cycle through elected delegates
  return delegates[round % delegates.length];
}

Summary

PoW: Secure via computational puzzles; energy‑intensive.
PoS: Secures with stake; energy‑efficient.
DPoS: Secures via elected delegates; highly scalable.

How to Use LocalStorage, SessionStorage and Cookies in JavaScript

MAURICE OMBEWA — Fri, 28 Mar 2025 09:30:46 +0000

Web storage is a powerful feature in modern browsers that allows you to store data directly on a user's computer. In JavaScript, the three primary ways to handle client-side storage are LocalStorage, SessionStorage and Cookies. In this article, we'll explore each method, explain their differences and provide simple examples to get you started.

LocalStorage

LocalStorage is designed for storing data with no expiration date. This means that the data you store remains available even after the browser is closed and reopened. It’s perfect for settings, user preferences, or any other information you’d like to persist across sessions.
Key Characteristics:

Persistence: Data persists until explicitly removed.
Storage Limit: Approximately 5-10 MB per origin (depending on the browser).
Scope: Accessible only within the domain that stored it.

Basic Operations:

Setting an Item:

// Save data to localStorage
localStorage.setItem('username', 'Alice');

Getting an Item:

// Retrieve data from localStorage
const username = localStorage.getItem('username');
console.log(username); // Outputs: Alice

Removing an Item:

// Remove a specific item
localStorage.removeItem('username');

Clearing All Items:

    // Remove all data from localStorage
    localStorage.clear();

SessionStorage

SessionStorage is similar to LocalStorage, but with one key difference: data stored in SessionStorage is cleared when the page session ends. A page session lasts as long as the browser is open, and survives over page reloads and restores. However, once the browser is closed, the data is lost.
Key Characteristics:

Session-Based: Data is available only during the page session.
Scope: Accessible only within the tab or window where it was stored.
Usage: Ideal for temporary data, such as shopping cart contents that don’t need to persist after the session.

Basic Operations:

Setting an Item:

// Save data to sessionStorage
sessionStorage.setItem('sessionData', 'This is temporary data');

Getting an Item:

// Retrieve data from sessionStorage
const data = sessionStorage.getItem('sessionData');
console.log(data); // Outputs: This is temporary data

Removing an Item:

// Remove a specific item
sessionStorage.removeItem('sessionData');

Clearing All Items:

    // Remove all data from sessionStorage
    sessionStorage.clear();

Cookies

Cookies have been around much longer than the Web Storage APIs and are primarily used for storing small pieces of data that need to be sent back to the server with each HTTP request. They can have an expiration date, and you can set options like path, domain, and security flags.
Key Characteristics:

Small Data Size: Typically limited to around 4 KB per cookie.
Server Communication: Automatically sent with every HTTP request to the same domain.
Expiration: Can be set to expire at a specific time.

Basic Operations:

Unlike localStorage and sessionStorage, cookies do not have a simple API for get/set operations in JavaScript. Instead, you manipulate the document.cookie string.

Setting a Cookie:

// Set a cookie that expires in 7 days
const setCookie = (name, value, days) => {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
  const expires = "expires=" + date.toUTCString();
  document.cookie = name + "=" + value + ";" + expires + ";path=/";
};

setCookie('user', 'Bob', 7);

Getting a Cookie:

// Retrieve a cookie value by name
const getCookie = (name) => {
  const cname = name + "=";
  const decodedCookie = decodeURIComponent(document.cookie);
  const cookieArray = decodedCookie.split(';');
  for (let cookie of cookieArray) {
    cookie = cookie.trim();
    if (cookie.indexOf(cname) === 0) {
      return cookie.substring(cname.length, cookie.length);
    }
  }
  return "";
};

console.log(getCookie('user')); // Outputs: Bob

Deleting a Cookie:

    // To delete a cookie, set its expiry date to a past date
    const deleteCookie = (name) => {
      document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    };

    deleteCookie('user');

Choosing the Right Storage Option

Each storage method serves a different purpose:

LocalStorage: Best for storing data that you want to persist over long periods, such as user preferences.
SessionStorage: Ideal for data that should only be available during a single session, such as temporary form data.
Cookies: Useful when you need to send data back to the server with HTTP requests or when working with authentication tokens (keeping in mind the data size limitations).

When building your web application, consider the nature and lifetime of the data you’re storing. For example, if your application needs to remember user preferences even after closing the browser, LocalStorage is your go-to. Conversely, if you need data only during the session, SessionStorage is more appropriate.
Conclusion

Understanding the differences between LocalStorage, SessionStorage, and Cookies is essential for effective client-side data management in JavaScript. Each method has its unique benefits and limitations:

_LocalStorage_ provides persistent storage across sessions.

_SessionStorage_ offers temporary storage within a single session.

_Cookies_ enable small data transfers between the client and server.

By choosing the appropriate storage solution, you can optimize your web application's performance and ensure that data is handled in the most efficient manner. Experiment with these examples and see how they can enhance the user experience on your site!

Happy coding!