DEV Community: ibenge Uforo

How to Build Apps with AI: From Idea to API (Or X)

ibenge Uforo — Sat, 26 Sep 2026 22:52:46 +0000

Can AI help you build useful apps without settling for slop? This guide shows a human-led workflow for taking a product idea through requirements, feature-level implementation, API design, and verification. I use Orbit, a Slack-style team chat demo, as a case study. You can apply the process to your own product, whether you write code or are still shaping the idea.

My first prompt was simple: “I want to build a Slack clone.” That sentence named a product category. It did not say who the product was for, what the first version had to do, what “done” meant, or which parts could be simulated.

On social media, I often see two absolute claims: AI only builds “slop,” and AI cannot help create applications that reach production. Both claims miss the role of the people building the product. AI can help create useful software when people set the scope, review the changes, test the behavior, and own the release decision. AI-generated code cannot certify itself as production-ready.

Orbit is a demo, not a production application. It has no sign-in, uses one shared public demo owner, and loses stored data when its process restarts. I will show what the AI-assisted workflow produced and what still needs verification before a production release. The prompt examples are teaching examples, not transcripts of the original conversations.

In this guide

Why AI output can be useful
Orbit, the running example
Turn the idea into requirements
Build and review features
Derive an API from accepted behavior
What production readiness requires
Apply the workflow to your product
Further reading

Why AI output can be useful

“Slop” is a fair description of output that looks complete but does not meet the user’s needs. A vague request gives an AI room to guess. If no one checks those guesses against real requirements, the result can look polished while behaving like the wrong product.

The process for Orbit added checks at each handoff. ChatGPT helped expose missing decisions. Claude organized the decisions in a PRD and feature specs. Grok Build implemented bounded changes. I reviewed the UI, revised the requirements, and asked for an API audit only after the UI behavior was accepted. Feature acceptance criteria and tests made some results observable.

That work is evidence that AI can contribute to product planning, interface work, API design, and implementation. It does not prove that Orbit is production-ready. The current demo has no sign-in, shared demo data, and process-scoped persistence. The last implementation notes report focused API and compose tests passing, but also note broader baseline failures and a blocked browser journey. The sections below describe both the work and its limits.

Orbit, the running example

The screenshots follow a new visitor from the welcome screen to a channel, a thread, and a direct message.

The welcome screen tells visitors that they share demo data. There is no sign-in. Do not enter private messages. Calls are simulated; they do not carry live audio or video.

The welcome screen explains the shared demo before a visitor enters.

The seeded workspace lets a reviewer see a populated channel at once.

The channel shows the navigation, conversation, and composer in one view.

The thread pane keeps replies beside the message that started them.

A thread is a separate conversation path inside the channel.

Direct messages use the same basic layout with a different recipient and history.

A direct message has its own conversation history.

These screens helped me judge the product's direction. They did not prove that every control behaved as required. I used the feature PRDs and acceptance criteria to review behavior.

Turn the idea into requirements before asking for code

“Build a Slack clone” leaves many decisions open. Does the first version need accounts, real-time messages, calls, file uploads, mobile navigation, or search across every message?

If a model answers those questions by guessing, it can build a polished interface for the wrong product. I used ChatGPT to make the missing decisions visible before I asked Claude to write the PRD.

For your own product, replace the chat-specific questions with the users, tasks, data, and risks that matter in your domain. Keep the same method: ask the AI to expose unknowns before it writes a specification.

Prompt 1: clarify the idea

I want to build a Slack-style team chat app.

Help me clarify the idea before you write a build prompt.
Ask questions about:
- who will use the app and what they need to do;
- the smallest useful first version;
- workspaces, channels, direct messages, threads, and search;
- accounts, data ownership, persistence, and real-time behavior;
- files, calls, mobile use, and accessibility;
- security, edge cases, and features that are out of scope.

Separate confirmed facts, assumptions, recommendations, and open questions.
Do not turn an unanswered question into a requirement.
Do not write code.
When the important questions are answered, write a structured brief I can
give to another assistant to draft a PRD.

The key instruction is to separate what I decided from what the model suggested. If the answer says “accounts are required” but I never chose an account system, that is an assumption to review, not a requirement to pass along.

For a non-technical builder, describe the user and the problem in everyday language. For a technical builder, add the stack, integrations, data boundaries, and deployment constraints. Either way, ask the model to list unanswered questions instead of filling them in.

What BRD, PRD, and SRS mean

The document names vary between companies. Teams also combine them. These are common meanings:

A BRD, or Business Requirements Document, describes the business problem, stakeholders, expected outcomes, constraints, and success measures.
A PRD, or Product Requirements Document, describes users, product outcomes, workflows, feature priorities, and acceptance criteria.
An SRS, or Software Requirements Specification, describes testable software requirements, interfaces, constraints, and verification details.

The terms are related, but they do not mean the same thing. An SRS is a software requirements specification, not a “software specification requirement.” Formal standards use their own artifact names. ISO/IEC/IEEE 29148 describes requirements engineering across the system and software lifecycle, including business and software requirements specifications.

For Orbit, Claude drafted the product requirements document, and we later created eight feature PRDs. We did not create separate BRD or SRS documents for this project. The feature PRDs and API contract captured the detail we used to build and review the app.

Prompt 2: ask Claude for the PRD

Use the brief below to draft a Product Requirements Document for Orbit.

Include:
1. product problem, users, goals, and success measures;
2. priority user journeys;
3. functional requirements with testable acceptance criteria;
4. non-functional requirements for security, privacy, accessibility,
   responsive behavior, and performance;
5. data and integration needs;
6. non-goals, dependencies, risks, and open questions.

For every requirement, mark its source as confirmed, assumed, or proposed.
Do not invent business decisions. Put unresolved choices in an open-questions
section. Use plain language. Do not write code.

A PRD gives the people building the product one description of the user, the goal, and the expected behavior. It also gives the AI a boundary. “Build Slack” is not a boundary.

Build the first UI, then break the work into features

Once Claude drafted the PRD, I passed it to Grok Build. The first design looked close to what I had in mind. That was a useful checkpoint. It was not a reason to assume that every behavior had been defined.

Prompt 3: give Grok Build the approved scope

Read the attached Orbit PRD and the existing project instructions.
First summarize the user, the first-release scope, and the acceptance criteria.
List conflicts and unanswered questions before changing the app.

Build the interface and behavior described in the approved scope.
Keep simulated behavior visibly separate from real persistence or services.
Do not add features because they are common in Slack.
After the change, report what works, what is simulated, what is incomplete,
and which acceptance criteria you could not verify.

The line about features common in Slack prevents scope creep. A clone brief does not automatically include every feature in the original product.

When the first interface looked right, I returned to Claude and asked: “For this application, list out the features.” I turned that list into separate feature PRDs. Then I fed those documents to Grok Build one at a time.

Prompt 4: ask for feature-level PRDs

Break the approved Orbit PRD into feature-level PRDs.

For each feature, include:
- user problem and user story;
- in-scope behavior and explicit non-goals;
- normal flow, edge cases, and empty/error states;
- data and permission rules;
- dependencies on other features;
- measurable acceptance criteria.

Keep accessibility and responsive requirements explicit.
Link each feature to the parent PRD requirement.
Flag overlap or conflict. Do not silently resolve it.
Separate the first release from later work.

Each feature needs a clear boundary. For example, “make channel switching smooth” is hard to verify. “When a user selects a channel, update the header, messages, composer placeholder, draft, and active sidebar item together” describes a visible result.

Prompt 5: implement one feature at a time

Implement only the attached feature PRD: [feature name].

Before editing, summarize its acceptance criteria and identify the relevant
existing UI and tests. Ask about any conflict with the parent PRD instead of
guessing. Keep unrelated features unchanged.

After editing, report each acceptance criterion as verified, not verified,
or blocked. Show the behavior change and remaining gaps.
Do not claim that a simulated feature uses a real service.

I checked each revision against the accepted requirements before moving to the next feature. That review caught differences between a screen that looked right and a behavior that was actually specified.

Review the eight feature PRDs

The first UI pass had eight feature-level PRDs. They describe UI behavior with local state and no backend. The calls PRD describes simulated calls and excludes WebRTC, signaling, and a media server. It refers to a separate future calls spec. The linked Gist contains only these eight feature PRDs. It does not contain the master product PRD, the later API specification, or the future calls spec.

I extracted the eight Markdown PRDs and published them as individual files in a public GitHub Gist. Select a title below to read the full PRD:

Feature PRD	What it specifies
Layout	Workspace rail, navigation sidebar, conversation pane, and thread pane.
Conversation experience	Message rendering, grouping, reactions, threads, and message actions.
Composer	Multiline input, sending, formatting controls, attachments, and per-conversation drafts.
Navigation and search	Channel and DM switching, search, Activity, Later, and menus.
Calls	Simulated personal and group call flows, call states, and call history messages.
Sample content	Seeded channels, DMs, threads, reactions, mentions, and work conversations.
Responsive behavior	Desktop, medium, and mobile navigation and layout rules.
Accessibility	Semantic structure, keyboard use, visible focus, contrast, and edge cases.

The feature PRDs turn a product goal into work a designer or developer can review. Their acceptance criteria describe outcomes, not just appearance. The responsive spec, for example, says that mobile should show one primary pane at a time and keep the composer reachable when the keyboard is open.

After the UI review, derive the API from actual behavior

The eight PRDs above describe the initial UI scope. After I was comfortable with the interface and its revisions, I asked ChatGPT to help draft a prompt for a new task: audit what the platform actually did and derive the REST API from those behaviors.

This order matters. The API review started from accepted screens, feature specs, and user actions. It did not start from a list of endpoints or a guess about what Slack might need.

Prompt 6: audit the UI and propose an API contract

The Orbit interface and feature PRDs have been reviewed and accepted.
Audit the provided screens, PRDs, interaction list, and existing project behavior.
Use only these sources. Do not add features because a competitor has them.

First, inventory each user-visible action and the data it reads or changes.
Group related actions by resource. Do not create one endpoint for every button.
Separate browser-only state from data that must persist on the server.

For each proposed operation, document:
- user outcome and resource;
- HTTP method and versioned URI;
- request and response shape;
- success and error status codes;
- authentication, ownership, and authorization rules;
- validation, size limits, and safe failure behavior;
- idempotency or concurrency needs;
- pagination and ordering rules;
- one observable API behavior test.

Design a resource-oriented HTTP API using standard method semantics.
Use RFC 9457 Problem Details for API errors with the
application/problem+json media type.
Describe the contract in OpenAPI.
Before implementation, list assumptions, conflicts, and questions.
Do not write application code.

I reviewed the proposed operations before implementation. The API contract records the paths, methods, inputs, outputs, and failure cases that the UI and server agree to support. OpenAPI gives those details a machine-readable format for documentation and contract checks.

RESTful and resource-oriented APIs

REST means Representational State Transfer. It is an architectural style for networked systems. Roy Fielding's description includes constraints such as a uniform interface, stateless interactions, cacheable responses, a layered system, and hypermedia. Fielding's dissertation explains the REST constraints.

A resource-oriented API organizes its paths around the things the product manages. Orbit has workspaces, conversations, messages, reactions, saved messages, and calls. Clients use standard HTTP methods to read or change representations of those resources.

For example, GET reads a representation, POST submits data for processing or creates a resource in a collection, and DELETE requests removal of a resource. PATCH applies partial changes. RFC 9110 defines HTTP method semantics, and RFC 5789 defines HTTP PATCH.

Teams often use “RESTful” to describe APIs with resource paths and standard HTTP semantics. Those choices alone do not prove that an API follows every REST constraint. Orbit uses a resource-oriented REST API design. This article does not claim full hypermedia-driven REST conformance.

Here are actual operations from the Orbit API contract:

User behavior	HTTP operation
List workspaces	`GET /api/v1/workspaces`
Create a workspace	`POST /api/v1/workspaces`
List a workspace's channels and DMs	`GET /api/v1/workspaces/{workspaceId}/conversations`
Send a message or thread reply	`POST /api/v1/conversations/{conversationId}/messages`
Edit or restore the caller's message	`PATCH /api/v1/messages/{messageId}`
Add or remove a reaction	`PUT` or `DELETE /api/v1/messages/{messageId}/reactions/{emoji}`

These paths name resources, such as /messages, instead of actions, such as /sendMessage. That gives developers and clients a predictable contract to read and test. It does not provide authorization by itself. The server must still validate every request and enforce ownership.

Why use RFC 9457 Problem Details

An HTTP status code gives the general result. A 400 Bad Request response says that the request is invalid, but the client may need more detail to explain the problem or let the user fix it.

RFC 9457 defines a common, machine-readable format for those details. The response uses the application/problem+json media type. This gives API clients one shape for errors instead of a different format on each route. RFC 9457 defines Problem Details for HTTP APIs.

For example, an invalid message-page token could return:

{
  "type": "https://api.orbit.example/problems/invalid-page-token",
  "title": "Invalid page token",
  "status": 400,
  "detail": "The page token is malformed or expired.",
  "instance": "/api/v1/conversations/c_123/messages"
}

The HTTP response carries the actual status code. The JSON body gives the client a stable problem type and a safe explanation. Do not put stack traces, secrets, or private message content in the error detail.

Follow one feature from idea to test

Consider sending a message to a channel. This single behavior connects the product, UI, API, security rules, and tests:

Product goal: A teammate can send a message in the conversation they selected.
UI requirement: The composer names the selected channel or person. After a successful send, the message appears in that conversation.
API resource: The message belongs to a conversation, so the client submits it to POST /api/v1/conversations/{conversationId}/messages.
Server rules: Validate the message body and conversation. When authentication is enabled, derive the owner from the verified session. Do not trust an owner ID sent by the browser.
Error behavior: If the request is invalid, return the right HTTP status and a Problem Details response. If the send fails, keep the unsent draft available in the browser.
Behavior checks: Verify that a successful send returns the saved message and that a later read returns it. Verify that a different owner cannot read or change the message when authenticated mode is active.

The original Composer PRD described UI-only local state. The later API work changed that boundary: sent messages became server-owned, while unsent drafts stayed in the browser. The PRD and API contract describe different stages of the project.

The code history shows how the scope grew

Four commits record decisions after the first interface:

Commit	What changed	Why it mattered
“Finish workspace switching and the broken message actions.”	Workspace creation and switching, workspace-scoped search, safe links, and message actions became usable.	The main user journey needed to work as one product.
“feat(orbit): persist workspace data through API.”	Shared actions moved behind versioned REST routes and SQL-backed tables. The API contract and action map were documented.	The UI needed a consistent place to read and write saved data.
“chore: clarify Orbit interface copy.”	The interface text became clearer.	Labels affect what users expect each control to do.
“Optimize Orbit runtime and pagination.”	Repeated scans were reduced, message details were fetched in batches, and stable keyset pagination was added while offset cursors remained supported.	Long message histories need stable pages and bounded work.

The API build added a server boundary:

React interface → versioned REST API → validation and ownership checks → SQL

The browser keeps view state and unsent drafts. The API stores shared product data. When authentication is enabled, the server scopes reads and writes to the verified owner.

Orbit's current demo has no sign-in. All visitors use one shared public demo owner. Its local database survives page reloads while the process runs, but a process restart clears that data. Production identity and durable storage have not been verified. Do not use the demo for private messages.

The performance commit reduced repeated scans and batched reads. The project has no benchmark baseline, so the commit does not prove a measured speedup.

The implementation notes for the last code phase report 21 focused API and compose tests passing and a passing TypeScript check. The broader suite still had baseline failures. A browser journey also could not bind its server in the default sandbox. Those results do not support the claim that every check passed.

What production readiness still requires

AI does not change the release standard. A team still needs evidence that the application is safe, reliable, and operable in its target environment. A polished screen, a successful build, or a group of passing tests cannot establish that on its own.

Before a production release, review at least these areas:

Identity and access: authenticate users, enforce authorization on the server, and test that one user cannot read or change another user's data.
Data durability: verify production database configuration, migrations, backups, recovery, and retention. Orbit's current demo data is cleared when its process restarts.
Security and privacy: validate inputs, protect secrets, return safe errors, set resource limits, and check logs for sensitive data.
Behavior and failure tests: test user-visible outcomes, invalid requests, access boundaries, and service failures in the target deployment. Resolve or explain failures in the broader suite.
Operations: verify monitoring, alerts, capacity, recovery, and a rollback path. Measure performance before claiming an optimization improved it.
Usability: check accessibility, responsive behavior, and real user journeys on supported devices.

Orbit does not pass this full release review today. It has no sign-in, uses a shared public demo owner, and has process-scoped persistence. The project notes also record broader test failures, a browser journey that could not run in its environment, and no performance baseline. Those are known limits to address before production use.

This is how AI-assisted work can fit into production development: AI helps produce plans, code, and test ideas; the team verifies the system, closes release gaps, and owns the decision to ship. NIST's Secure Software Development Framework and OWASP's Application Security Verification Standard provide deeper guidance for that work.

Apply the workflow to your own product

Write one sentence that names the user and the problem.
Ask an AI assistant to find missing decisions. Keep confirmed facts, assumptions, suggestions, and open questions separate.
Ask for a PRD. Review users, outcomes, user journeys, non-goals, and acceptance criteria before building.
Build a first interface from the approved scope. Compare it with the user journeys and revise the requirements when the prototype exposes gaps.
Break the PRD into feature PRDs. Link each feature to its parent requirement and give each one observable acceptance criteria.
Feed one feature to the build assistant at a time. Review the result before moving to the next feature.
Once the UI behavior is accepted, inventory its actions and data. Map server-persisted behavior to resources, HTTP methods, paths, schemas, ownership rules, errors, and tests.
Describe the API contract in OpenAPI. Use consistent HTTP status codes and RFC 9457 Problem Details for API errors.
Implement one vertical slice. Check the public behavior, inspect the change, record gaps, and update the requirements.

The documents do not remove judgment from the process. They give the team something specific to review each time the AI makes a change.

Resources for further reading

Prompt design

Product and software requirements

ISO/IEC/IEEE 29148:2018, requirements engineering across system and software lifecycles
Atlassian's product requirements template
Atlassian's business requirements guide

HTTP APIs and errors

Accessibility

W3C Web Content Accessibility Guidelines (WCAG) 2.2

The takeaway

I started with one broad idea and used AI across product clarification, PRDs, interface work, feature revisions, and API design. The useful skill was making each decision explicit, reviewing the result, and recording what remained unverified.

That workflow applies beyond team chat. Start with the people and problem behind your product. Ask AI to expose uncertainty. Approve the requirements. Build and review one feature at a time. Derive the API from the behavior the product needs. Then check the evidence required for your own release.

Orbit shows that AI can contribute to serious application work under human direction. It also shows why a prototype and a production release need different evidence.

Link to UI - https://orbit-indol-alpha.vercel.app/
Link to Repo - https://github.com/ibengeu/orbit.git

Entry-9: Cache Control, Long story short.

ibenge Uforo — Sat, 13 Apr 2024 19:15:24 +0000

HTTP caching involves storing response messages locally to reduce response time and network bandwidth consumption for future equivalent requests. An HTTP "cache" acts as a local store managed by a subsystem that controls the storage, retrieval, and deletion of messages within it. By storing cacheable responses, this system optimizes performance by minimizing the need to fetch resources repeatedly from the origin server (source: RFC 9111) and reduce the server load.

To implement effective HTTP caching, it's essential to include cache control headers in responses. These headers provide directives to clients and intermediaries(Or Proxies eg. CDNs), guiding them on how to cache responses. Here's a breakdown of some crucial cache control options and directives:

Age: This directive indicates the age of the response since it was generated, aiding in determining freshness or staleness.
max-age: Specifies the maximum time in seconds that a response can be considered fresh, enhancing caching efficiency.
must-revalidate: Mandates revalidation of a cached response with the origin server before use, ensuring clients receive updated content.
private or public: Determine whether a response can be cached by private client caches or shared caches, providing flexibility in caching strategies.

As such, there are other important directives which can be used. we can refer to the Mozilla Cache Control documentation.

Additionally, using the Etag property can signal to clients that a resource has not changed therefore returning with a 304 not modified.

Example Scenarios

Cache control headers find utility in various scenarios:

Order Details: Setting cache control headers with a max-age directive for order details allows caching for improved performance, especially considering the infrequent changes to this data.
Static Content: Applying cache control headers to static content like images and stylesheets reduces server load and enhances page load times for subsequent visits. Implementing cache-busting techniques can further refine cache management for static assets.
Public API Responses: For frequently accessed public API responses, configuring cache control headers appropriately can alleviate server load and enhance response times.

A reason these examples are picked is due to the security considerations which one can be prone to and cannot be not to careful about hence, cache what you, your team or organization consider not sensitive information.

Some ways these risk can be mitigated are by using

CSRF Tokens
Not storing the cache, and if some item eventually ends up in the cache setting the no store and max-age immediately marks it as stale.
```
Cache-Control: no-store, max-age=0
```

Example Snippets

cache-control: max-age=3600, private, must-revalidate

This snippet instructs the consumer to cache the response for an hour using a private cache, ensuring revalidation with the server before the cached content can be reused after staleness.

(C#)

As I’m a csharp guy, In a C# environment, leveraging the ICache or ResponseCacheAttribute at the controller level helps with cache control. for Icache do see below.

private readonly HttpClient client;
private readonly ICache cache;

public ProductCatalogClient(HttpClient client, ICache cache)
{
    client.BaseAddress = new Uri(productCatalogueBaseUrl);
    this.client = client;
    this.cache = cache;
}

private async Task<HttpResponseMessage> RequestProductFromProductCatalog(int[] productCatalogIds)
{
    var productsResource = "myProductResource";
    var response = this.cache.Get(productsResource) as HttpResponseMessage;
    if (response is null)
    {
        response = await this.client.GetAsync(productsResource);
        AddToCache(productsResource, response);
    }
    return response;
}

private void AddToCache(string resource, HttpResponseMessage response)
{
    var cacheHeader = response.Headers.FirstOrDefault(h => h.Key == "cache-control");
    if (!string.IsNullOrEmpty(cacheHeader.Key) &&
        CacheControlHeaderValue.TryParse(cacheHeader.Value.ToString(), out var cacheControl) &&
        cacheControl.MaxAge.HasValue)
    {
        this.cache.Add(resource, response, cacheControl.MaxAge.Value);
    }
}

Seems pretty straightforward ba?, if not here is an explanation.

The main goal which is to make use of the cache response, so to achieve this we first check if there is any available cache for the product resource and return the response else, we fetch from the product catalog resource, checking if we are allowed to cache and then add.

Some other ways we can do this is to make use of Redis or Valkey (Topic for another day) by the server and save/return cached responses from there!.

Conclusion

So!,In essence, caching holds significant importance for business stakeholders by enhancing customer experience through quicker response times and aiding developers in supporting business operations. However, the efficiency of caching hinges on how it's implemented and with careful consideration of security implications. Thus, when implementing caching, it's vital to assess the benefits and drawbacks in alignment with specific business requirement and thought.

Thanks for watching.

Additional links and Resources

Socials

Ongoing Research: Social Survey

Entry-8: PGP(Pretty Good Privacy) Encryption/Decryption c#

ibenge Uforo — Sat, 11 Nov 2023 23:57:29 +0000

One way or another, we would encounter a situation wherein we need to protect the privacy of data being shared over the internet or personal spaces.

PGP (short for Pretty Good Privacy), created by Phillip Zimmerman, has been touted as one of the encryption mechanisms, even considered unbreakable by governments—yes, at least known by our mortal info(source: trust me).

The decision to use PGP was driven by the limitations of asymmetric encryption, which had a size constraint on the data it could encrypt and other moving parts to sign or ensure the encrypted data was intended for the recipient (i.e., Web of trust). PGP, being asymmetric with a public and private key pair, provided the flexibility I needed.

My initial research involved exploring examples from the book by D. Hook, Bouncy Castle FIPS Java, specifically focusing on AEAD (Authenticated Encryption with Associated Data) and AE (Authenticated Encryption). Additionally, I referred to Stack Overflow discussions to address challenges, such as encountering an "invalid header" issue during decryption.

So, in basic steps, to encrypt and decrypt an item in PGP, one could summarize as follows:

Obtain the public and private key - This can be obtained from PGPGenerator.
Encrypt and Decrypt.

Obtain the Public and Private key.

After downloading the ascii-armoured file for the public and private key, which is the text-based representation of binary data (such as cryptographic keys) using ASCII characters. we would perform the following operations on it.

Open the specified PGP armored file (.asc) as a stream. This could be a text file as well, just ensure the content structure remains the same
Create an ArmoredInputStream from the file stream which is used to read PGP armored data.
Read the contents of the ArmoredInputStream into a byte array.
Create a new stream from the byte array.
Initialize a PgpPublicKeyRingBundle with the byte stream which is a container holding a set of public and private key rings.
Retrieve the key rings from the bundle.
Extract the public key ring from the key rings which is a set of keys with associated metadata.
Ensure that a public key ring is found in the specified key file.
Extract the public keys from the public key ring.
Return the first PGP public key from the extracted public keys.

Putting all these together, we would have.

/// <summary>
        /// Gets the public key from an pgp amoured file ie. asc
        /// </summary>
        /// <param name="publicKeyFilePath"></param>
        /// <returns></returns>
        /// <exception cref="InvalidOperationException"></exception>
        public static PgpPublicKey GetPgpPubKey(string publicKeyFilePath)
        {
            using (Stream keyFileStream = File.OpenRead(publicKeyFilePath))
            using (ArmoredInputStream armoredInputStream = new(keyFileStream))
            {
                try
                {
                    // Read the contents of the ArmoredInputStream into a byte array
                    byte[] keyData = Streams.ReadAll(armoredInputStream);

                    // Create a new stream from the byte array
                    using Stream keyDataStream = new MemoryStream(keyData);
                    PgpPublicKeyRingBundle publicKeyRingBundle = new(keyDataStream);

                    // Assuming you want the first public key in the file
                    PgpPublicKeyRing publicKeyRing = publicKeyRingBundle.GetKeyRings().OfType<PgpPublicKeyRing>().FirstOrDefault();

                    if (publicKeyRing != null)
                    {
                        return publicKeyRing.GetPublicKeys().OfType<PgpPublicKey>().FirstOrDefault();
                    }
                    else
                    {
                        throw new InvalidOperationException("No public key ring found in the specified key file.");
                    }
                }
                catch (PgpException ex)
                {
                    Console.WriteLine($"Error reading the key file: {ex.Message}");
                    throw;
                }
                catch (IOException ex)
                {
                    Console.WriteLine($"IO error reading the key file: {ex.Message}");
                    throw;
                }
            }
        }

Retrieving the private key is a different process as we need to add in the passphrase used in signing the private key.

Create a file stream to read the specified PGP armored private key file.
Use PgpSecretKeyRing to read the secret key ring from the file stream, decoding the armored data
- Get the secret key from the secret key ring. In my case, I would be retrieving the first key.
Use the ExtractPrivateKey method of PgpSecretKey to obtain the private key, providing the passphrase as a character array

Once more, putting this together.

/// <summary>
        /// Gets the private key from a pgp amoured file ie. asc
        /// </summary>
        /// <param name="privateKeyFilePath"></param>
        /// <param name="passphrase"></param>
        /// <returns></returns>
        public static PgpPrivateKey GetPgpPrivateKey(string privateKeyFilePath, string passphrase)
        {
            try
            {
                PgpSecretKeyRing secretKeyRing;
                using (var keyFileStream = new FileStream(privateKeyFilePath, FileMode.Open))
                {
                    secretKeyRing = new PgpSecretKeyRing(PgpUtilities.GetDecoderStream(keyFileStream));
                }

                PgpSecretKey secretKey = secretKeyRing.GetSecretKey();
                PgpPrivateKey privateKey = secretKey.ExtractPrivateKey($"{passphrase}".ToCharArray());

                return privateKey;
            }
            catch (Exception ex)
            {
                // Handle exceptions, log errors, or take appropriate action.
                Console.WriteLine($"Error reading PGP private key from file: {ex.Message}");
                throw;
            }
        }

Some issues encountered within this process

Invalid header exception - this was resolved by first using pgp.utilities.getdecoderstream to handle the memory stream and pass it to the underlying method.

Resources for this section.

https://stackoverflow.com/questions/65355150/read-ecc-private-key-pem-into-asymmetriccipherkeypair-c-sharp-bouncy-castle
https://stackoverflow.com/questions/10999542/bouncy-castle-c-sharp-pgp-decryption-example of which i got the idea to use PgpUtilities.GetDecoderStream(keyFileStream) for the pgp public key stream
https://stackoverflow.com/questions/10999542/bouncy-castle-c-sharp-pgp-decryption-example

Encrypting

In order to encrypt, we could follow these steps:

Create a memory stream, which enables us to buffer the object while reading.
Open a stream with the PgpLiteralDataGenerator, which writes the plain text data into a literal data packet.
Initialize a PgpEncryptedDataGenerator, configured to use AES-256 as the symmetric key algorithm, enable integrity checking, and utilize a secure random number generator for cryptographic operations.
Add the encryption type, which in my case is using a public key. At the time of writing, there are other methods such as using a passphrase.
Write the encrypted data to your specified stream.

That's enough theory, see what I mean below.

/// <summary>
/// Encrypts the provided plaintext data using the specified PGP public key.
/// </summary>
/// <param name="encryptionKey">The PGP public key used for encryption.</param>
/// <param name="plainText">The plaintext data to be encrypted.</param>
/// <returns>The encrypted data as a byte array.</returns>
public static byte[] EncryptDataWithPublicKey(PgpPublicKey encryptionKey, byte[] plainText)
{
    // Create a MemoryStream to store the encrypted data.
    using (MemoryStream encryptedStream = new())
    {
        // Create a PgpLiteralDataGenerator to generate literal data packets in PGP.
        using (PgpLiteralDataGenerator literalDataGenerator = new PgpLiteralDataGenerator())
        {
            // Open a stream with the PgpLiteralDataGenerator and write the plaintext data into a literal data packet.
            using (Stream literalDataStream = literalDataGenerator.Open(encryptedStream,
            PgpLiteralData.Binary,
            PgpLiteralData.Console,
            plainText.Length,
            DateTime.UtcNow))
            {
                literalDataStream.Write(plainText, 0, plainText.Length);
            }
        }

        // Create a MemoryStream to store the final result.
        using (MemoryStream resultStream = new())
        {
            // Create a PgpEncryptedDataGenerator with the specified symmetric key algorithm, enabling integrity protection.
            PgpEncryptedDataGenerator encryptedDataGenerator = new PgpEncryptedDataGenerator(
                SymmetricKeyAlgorithmTag.Aes256, true, new SecureRandom());

            // Add the encryption key to the generator.
            encryptedDataGenerator.AddMethod(encryptionKey);

            // Open a stream with the encryptedDataGenerator and write the encrypted data into the result stream.
            using (Stream compressedOut = encryptedDataGenerator.Open(resultStream, encryptedStream.ToArray().Length))
            {
                compressedOut.Write(encryptedStream.ToArray(), 0, encryptedStream.ToArray().Length);
            }

            // Return the encrypted data as a byte array.
            return resultStream.ToArray();
        }
    }

}

Decrypting.

We initialize a PgpObjectFactory to parse the PGP encrypted data.
Get the first object from the factory, which bouncycastle expects to be a PgpEncryptedDataList.
For situations where there are multiple recipients looping through PgpPublicKeyEncryptedData gets us the public keyid used in encrypting the data and matches it with the keyid provided by the private key. enabling us correctly decrypt the data.
The rest is history.


/// <summary>
/// Decrypts PGP encrypted data using the provided private key and returns the decrypted bytes.
/// </summary>
/// <param name="privateKey">The PGP private key used for decryption.</param>
/// <param name="encryptedB64String">The base64-encoded PGP encrypted data.</param>
/// <returns>The decrypted data as a byte array.</returns>
/// <exception cref="Exception">Thrown in case of decryption failure or IO exceptions.</exception>
public static byte[] DecryptDataWithPrivateKey(PgpPrivateKey privateKey, string encryptedB64String)
{
try
{
// Convert the base64-encoded PGP encrypted data to a byte array
byte[] pgpEncryptedData = Convert.FromBase64String(encryptedB64String);

    // Create a PgpObjectFactory for parsing the PGP encrypted data
    PgpObjectFactory pgpFact = new PgpObjectFactory(pgpEncryptedData);

    // Obtain the first object, which should be a PgpEncryptedDataList
    PgpEncryptedDataList encList = (PgpEncryptedDataList)pgpFact.NextPgpObject();

    // Find the correct PgpPublicKeyEncryptedData using the provided private key
    PgpPublicKeyEncryptedData? encData = null;
    foreach (PgpPublicKeyEncryptedData data in encList.GetEncryptedDataObjects())
    {
        if (data.KeyId == privateKey.KeyId)
        {
            encData = data;
            break;
        }
    }

    if (encData == null)
    {
        throw new PgpException("Provided private key not found in encrypted data.");
    }

    // Create a decrypted stream
    Stream clear = encData.GetDataStream(privateKey);

    // Create a new MemoryStream to hold the decrypted data
    using (MemoryStream decryptedStream = new MemoryStream())
    {
        // Read the decrypted data into the MemoryStream
        Streams.PipeAll(clear, decryptedStream);

        // Verify the integrity of the decrypted data
        if (encData.Verify())
        {
            // Create a PgpObjectFactory for parsing the decrypted literal data
            PgpObjectFactory litFact = new PgpObjectFactory(decryptedStream.ToArray());

            // Obtain the literal data packet
            PgpLiteralData litData = (PgpLiteralData)litFact.NextPgpObject();

            // Read the actual data from the literal data input stream
            using (Stream dataStream = litData.GetInputStream())
            {
                byte[] data = Streams.ReadAll(dataStream);
                return data;
            }
        }
        else
        {
            throw new PgpException("Modification check failed.");
        }
    }
}
catch (PgpException ex)
{
    throw new Exception("Decryption failed: " + ex.Message, ex);
}
catch (IOException ex)
{
    throw new Exception("IO exception during decryption: " + ex.Message, ex);
}

}

It was a lengthy war, but I emerged with a wealth of knowledge on the encryption process in terms of Symmetric and Asymmetric encryption, cryptographic algorithms such as RSA and in my opinion the improvement ECC (Elliptic curve cryptography) which offers greater security with a smaller key size, wherein the equivalent of an ECC 521 key size is equal to 15360 key size!.

This is not to claim that I am now a security expert or that I've covered the entire field. as usual there are some considerations here and there, which you should be aware of and can be addressed by conducting your own security and penetration testing.

Thanks and Happy Encrypting!

External Links

Link to implementation. Github
Twitter: @benny_wayn
LinkedIn: Ibenge-uforo
Ongoing Research: Social Survey

Entry-7: Different Ways to Collections in C#

ibenge Uforo — Sun, 23 Jul 2023 15:07:25 +0000

This short article discusses three different strategies for handling collections using C# language, where each strategy employs a unique looping approach to achieve the same result.

The implementations include a Foreach loop, a LINQ-based approach using the Select method, and a traditional For loop run on 1000 iterations. Let's analyze each strategy, including their execution times, memory usage, and CPU usage, to understand their performance characteristics.

Before we begin, some key terms to note

Compile Time:
Compile time refers to the duration it takes for the compiler to process the source code and generate executable machine code. During compilation, the compiler checks the code for syntax errors, performs optimizations, and translates it into machine-readable instructions. A shorter compile time indicates that the code is processed quickly and is ready for execution, which is desirable for development efficiency.

Execution Time:
Execution time, also known as runtime, is the time taken by a program to complete its execution once it starts running. It measures how long it takes for the program to execute all its statements and complete its tasks. A lower execution time means that the program runs faster, which is beneficial for applications that require quick responses and high performance.

Memory Usage:
Memory usage represents the amount of memory (RAM) that a program consumes while it is running. It indicates the space required to store data, variables, and program instructions during execution. Lower memory usage is generally preferred, especially for resource-constrained environments or when dealing with large datasets, as it reduces the risk of memory-related issues like crashes or slowdowns.

CPU Time:
CPU time measures the total amount of time the central processing unit (CPU) spends executing a program. It includes the time the CPU spends processing instructions for the program and any time spent waiting for external resources like I/O operations. A lower CPU time indicates that the program is using the CPU efficiently and is not overly taxing the processor, leading to better overall system performance.

Strategies

Foreach Doubling Strategy:

This strategy utilizes a foreach loop to iterate through the input list and double each element. The resulting doubled numbers are stored in a new list, which is then returned. This approach offers simplicity in syntax and is easy to read.

Compile Time: 0.156s
Execution Time: 0.016s
Memory Usage: 96kb
CPU Time: 0.016s

public List<int> ForeachDoublingStrategy(List<int> numbers)
{
   List<int> doubledNumbers = new List<int>();
   foreach (int num in numbers)
   {
       doubledNumbers.Add(num * 2);
   }
   return doubledNumbers;
}

LINQ Doubling Strategy:

In this strategy, we leverage LINQ's Select method, which provides a concise way to perform the doubling operation on each element of the input list. The Select method returns an IEnumerable that is then converted to a List<int> using the ToList() method.

Compile Time: 0.172s
Execution Time: 0.016s
Memory Usage: 152kb
CPU Time: 0.016s

public List<int> LinqDoublingStrategy(List<int> numbers)
{
   return numbers.Select(num => num * 2).ToList();
}

For Loop Doubling Strategy:

This strategy employs a traditional for loop to iterate through the input list and double each element. The doubled numbers are added to a new list, which is returned after the loop completes.

Last Run: 3:26:47 pm
Compile Time: 0.172s
Execution Time: 0.016s
Memory Usage: 104kb
CPU Time: 0.031s

public List<int> ForLoopDoublingStrategy(List<int> numbers)
{
   List<int> doubledNumbers = new List<int>();
   for (int i = 0; i < numbers.Count; i++)
   {
       doubledNumbers.Add(numbers[i] * 2);
   }
   return doubledNumbers;
}

Each of the provided strategies use a sample which effectively doubles the elements in the input list of integers.

The Foreach and For Loop strategies offer similar performance, with Foreach consuming slightly less memory. On the other hand, the LINQ-based Select approach uses a bit more memory but remains concise and easy to maintain.

To decide on the best strategy, consider the specific requirements of the application. If memory usage is a significant concern, especially for large datasets, the Foreach or For Loop strategy might be more suitable. These approaches can efficiently process data without creating additional memory overhead.

On the other hand, if code readability, simplicity, and ease of maintenance are higher priorities, the LINQ-based approach could be the better choice. The Select method offers an elegant way to perform the doubling operation, making the code more expressive and easier to manage.

Ultimately, it is essential to balance code readability, simplicity, and memory efficiency based on the specific needs of the application. For critical scenarios with memory constraints, profiling different strategies with representative data can help determine the most appropriate choice. Keep in mind that different situations may warrant different strategies, so it is crucial to assess the trade-offs and select the best approach accordingly.

Profiler used -

https://dotnetfiddle.net/KW7EW4

External Links

Twitter: @benny_wayn
LinkedIn: Ibenge-uforo
Ongoing Research: Social Survey

Entry-6: [Design Patterns] - Chain of Responsibility Pattern

ibenge Uforo — Tue, 02 May 2023 17:12:52 +0000

The chain of responsibility pattern is one of those essentials which can solve the headaches in building an authentication system in react.(or similar)

it’s a Behavioral design pattern which encapsulates the logic for a request, passing on that request along each handler or item till it’s ignored or handled as intended.

So how is this applied in React.

Say we would like to create an authentication system in react which checks

If a user is an admin or regular
checks if a users subscription has expired
Redirects or shows the appropriate selection.

We can make use of an if/else statement or violate the single responsibility principle but as more requirements arise that logic becomes messy. plus… we can move handlers around to handle requests before the next eg. check subscription before user type, remove if needed with minimal effort. ie, Reduced coupling!

Implementation

create an interface and contract for handling requests


interface IHandler {
  setNext(handler: Handler): void; // Can be named differently + (optional) - it passes the request to the next handler.
  handleRequest(request: any): void;
}

Implement Base handler class which is common to all

Implement base handler which implements logic common to all classes which would use the CoR pattern

abstract class AbstractHandler implements IGenericResponsibility {
  private _nextHandler: IGenericResponsibility | null = null;

  public addNextHandler(handler: IGenericResponsibility): IGenericResponsibility {
    this._nextHandler = handler;
    return handler;
  }

  public Handle(args: any): any { // Any can be replaced with your type as needed
    if (this._nextHandler !== null) {
      return this._nextHandler.Handle(args);
    } else {
      return null;
    }
  }
}

create a class which makes use of the abstract class above

// base class to handle the common request

class checkAdmin extends AbstractHandler {
  public Handle(args: any): any {
    // Handle the request here, or pass it to the next handler
    // if this handler cannot handle it.
    if (/* condition to handle the request */) {
      return /* Result from handling the request */;
    } else {
      return super.Handle(args); // Pass the request to the next handler
    }
  }
}
// we do the same above for all handlers extending the abstract or base handler.

class checkSubscription extends AbstractHandler {
  public Handle(args: any): any {
    // Handle the request here, or pass it to the next handler
    // if this handler cannot handle it.
    if (/* condition to handle the request */) {
      return /* Result from handling the request */;
    } else {
      return super.Handle(args); // Pass the request to the next handler
    }
  }
}

initialize class which makes use of the concrete handler.

const checkAdmin = new checkAdmin();
const checkSubscription = new checkSubscription();

checkSubscription.addNextHandler(checkAdmin); //if we have more handlers we keep stacking.
//Then we trigger the handler by calling the method at which we would like to start from.
concreteHandler.handle(request):

Create hook which makes use of the handler

import axios (or preferred) from "axios" or "preferred"

const useCOResponsibility = async ()=>{
const checkAdmin = new checkAdmin();
const checkSubscription = new checkSubscription();

checkSubscription.addNextHandler(checkAdmin); //if we have more handlers we keep stacking.
//Then we trigger the handler by calling the method at which we would like to start from.
const result = concreteHandler.handle(request):

    if(result === "condition")
    {
        //perform condition.
    }
}

Making use of a hook should not hinder us as well, as we can also make use of the concrete handler directly within our component ie.


const FuntionalComponent = ()=>{

const checkAdmin = new checkAdmin();
const checkSubscription = new checkSubscription();

checkSubscription.addNextHandler(checkAdmin); //if we have more handlers we keep stacking.
//Then we trigger the handler by calling the method at which we would like to start from.
const result = concreteHandler.handle(request):

useEffect (()=>{
    if(result === "condition")
    {
        //perform condition.
    }
},[result]) // or a similar logic to handle a result

return <JSX/>

}

}

That’s it.

At the moment, the CoR is one of my favorite design patterns compared to others, such as the strategy pattern. This is because the flow of my logic moves in a sequential and logical manner with the CoR pattern, and it allows me to call one item before the other, switch out places, and apply the single responsibility and open/closed principles with less complexity. These factors result in clear and concise functionality in my code.

What do you think/which is your pattern and why do you make use of it.? Feel free to send your response as a message or comment below.

Resources

External Links

LinkedIn: Ibenge-uforo
Ongoing Research: Social Survey

Entry-5: Automapper: Streamlining Object-to-Object Mapping for C# Developers

ibenge Uforo — Sat, 18 Feb 2023 22:13:10 +0000

Working with DTOs can be tedious, but working with AutoMapper makes it a breeze.

in simple terms, it is an object-to-object mapper. This means mapping the fields of one object to another ie.

Mapping...


class object1 {
  field1,
  field2
 }

// to 

class object2 {
  field1,
  field2
}

why do we need it, you might ask. We need AutoMapper when we have a lot of fields and we want to create a data transfer object that returns only the essentials the client needs. In this case, manually instantiating both items and appending to both is time-consuming. Instead, with the help of AutoMapper, we can easily map the fields.

see visual example below;

say we have a user model


public class User {

 public string FirstName {get; set;}
 public string LastName {get; set;}
 public string PhoneNumber {get; set;}
 public string Email {get; set;}
 public string Pin {get; set;}
 public string Password {get; set;}
 public int NoseSize {get; set;}
 public int HeadSize {get; set;}
 public int ToeSize {get; set;}

}

and then a DTO.


public class UserDTO {

 public string FirstName {get; set;}
 public string LastName {get; set;}
 public string PhoneNumber {get; set;}
 public string Email {get; set;}
 public int NoseSize {get; set;}
 public int HeadSize {get; set;}
 public int ToeSize {get; set;}

}

In order to make use of the DTO, we append the values such as.


UserDTO userDTO = new(){

FirstName = user.FirstName,
LastName = user.lastName,
PhoneNumber = user.PhoneNumber,
...
// You get the drift.

}

We would be manually appending to each field. but with the help of AutoMapper, it would be simple as

// After the setup of automapper
var userMap = autoMapper<Destination>(source); 
// and we are done!
}

So, the TLDR: it removes the manual task of working with Data Transfer Objects (DTOs).

Setup.

We would be making use of Dependency Injection for the task, enabling us make use of the automapper config and interface any where in our app.

Steps

Install the Automapper package with dependency Injection (D.I).

Create a source and Destination. source here means what we are mapping from and destination means, what would the final result be.

Using our example from above, the source is our user model and destination is our UserDTO

Create an assembly which extends the automapper profile containing the configuration for each mapping.

ie.

using System;
using AutoMapper;
using lastbank.Database;
using lastbank.DTO;
namespace lastbank.Configuration
{
    public class AutoMapperCfg: Profile
    {
        public AutoMapperCfg()
        {
            CreateMap<APIUser, UserDTO>().ReverseMap();
            CreateMap<APIUser, CreateUserDTO>().ReverseMap();
        }
    }
}

A twist above with the reverseMap, this enables us map both directions.

Add the automapper service to the DI container within your program.cs file with

services.AddAutoMapper(typeof(AutoMapperCfg));

Access through your DI method
Invoke Object.

            var userMap = _mapper.Map<Destination>(Source);

Voila!

Above we covered the basics of how to install and configure AutoMapper, as well as its more advanced features with D.I.

We've seen how AutoMapper can make mapping between object types easier, more concise, and less prone to errors. It's a powerful tool for any C# developer who works with complex/non-complex object hierarchies, of which it significantly reduces the time and effort spent on manual mapping. With its continuously evolving features, AutoMapper remains an exciting and valuable tool for developers.

... Also, checkout cool alternatives such as Mapster.

Resource;

Other Links

Twitter: @benny_wayn
LinkedIn: Ibenge-uforo
Ongoing Research[5 min]: Social Survey

Entry-4: Building a telegram client with react-native (Part 2)

ibenge Uforo — Sat, 11 Feb 2023 18:47:11 +0000

In my previous post on building a telegram client with react-native (Part 1). I outlined the basic steps in setting up and authenticating your app with Telegram.

In this post, I would be going through the process of displaying the chat list. So let's begin.

Prerequisites

Setup your project and Authenticated successfully. see post
A User Interface setup to call the methods required.

In order to display the chat list we would be building upon the Repository Example

Variables

    /** This is the client instance created from part 1, which
        is used throughout the app. You have the option of
        creating a singleton in order to use one instance of 
        the client or create a static function which returns
        the created instance.

        But note, the client should not be instantiated more       
        than once.
    **/
    private static Client client = null;

Java Method.



/** Limit here is the number of chats to return, do note 
telegram also handles the amount of chats to be returned when 
appropriate.**/

public void loadChatList(final String limit, Promise promise) {

        if (client == null) {
            client = Telegram.getClientInstance();
        }

/** Here we run a synchronized method to avoid race conditions, situations wherein variables or stores are updated
while being accessed.

Rephrased. Since we are running on a different thread, 
we restrict access to the "getMainchatlist" variable while operations are performed on it.
**/
        synchronized (ChatHandler.getMainChatList()) {

            try {

                if (client != null) {

                    client.send(new TdApi.LoadChats(new TdApi.ChatListMain(), Integer.parseInt(limit) - ChatHandler.getMainChatList().size()), new Client.ResultHandler() {
                        @Override
                        public void onResult(TdApi.Object object) throws JSONException {
                            switch (object.getConstructor()) {
                                case TdApi.Error.CONSTRUCTOR:

                                    if (((TdApi.Error) object).code == 404) {
                                        synchronized (ChatHandler.getMainChatList()) {
                                            haveFullMainChatList = true;
                                            try {
                                                initChatlist(promise);
                                            } catch (Exception e) {
                                                e.printStackTrace();
                                                promise.reject(e);
                                            }
                                        }

                                    } else if (((TdApi.Error) object).code == 401) { // user unauthorized
                                        Telegram.onAuthorizationStateUpdated(null);

                                    } else {
                                        System.err.println("Receive an error for LoadChats:" + newLine + object);
                                    }
                                    break;
                                case TdApi.Ok.CONSTRUCTOR:
                                    // chats had already been received through updates, let's retry request
                                    loadChatList(limit, promise);

                                    break;
                                default:
                                    System.err.println("Receive wrong response from TDLib:" + newLine + object);
                            }
                        }
                    });

                }


            } catch (Exception e) {
                e.printStackTrace();
            }
        }

    }

What the above snippet does in a nutshell is to.

Check if the client instance is available
Get the chat-list by calling the TDLIB API "loadchats" with its configurations
If we receive a 404, this means the chat-list has been processed by TDLIB and then initialize the chat-list.
In the case of a 401, we restart the authentication process.

Snippet for initialization.


/**
     * Handles the conversion to serializable data to be used in react-native
     * @throws JSONException
     */
    private void initChatlist(Promise promise) throws JSONException {
        java.util.Iterator<ChatHandler.OrderedChat> iter = ChatHandler.getMainChatList().iterator();
        Gson g = new Gson();

        WritableArray params = Arguments.createArray();
        DataHandler data = new DataHandler();


        for (int i = 0; i < chatLimits && i < ChatHandler.getMainChatList().size(); i++) {
            long chatId = iter.next().getChatId();
            TdApi.Chat chat = ChatHandler.getChat(chatId);
            synchronized (chat) {
                JSONObject jo = new JSONObject(g.toJson(chat));

                WritableMap wm = data.convertJsonToMap(jo);
                params.pushMap(wm);
            }

        }

        reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("PopulatedList", params);


    }

[Snippet above]

Due to the returned response from TDLIB not being compatible with React-Native, we convert it to JSON with the aid of GSON which is a ggogle library for easy serialization and deserialization of data.
Using the chatId as a key to access each chat, convert it to JSON, store in an array and send back as an event to React-Native

Why we make use of an iterator above is to create a "loopable" sequence as the mainChatlist is made up of a set collection, see below.


    private static final NavigableSet<OrderedChat> mainChatList = new TreeSet<>();

Annnnnddddd "OrderedChat"


public static class OrderedChat implements Comparable<OrderedChat> {
        final long chatId;
        final TdApi.ChatPosition position;

        OrderedChat(long chatId, TdApi.ChatPosition position) {
            this.chatId = chatId;
            this.position = position;
        }

        public long getChatId() {
            return chatId;
        }

        @Override
        public int compareTo(OrderedChat o) {
            if (this.position.order != o.position.order) {
                return o.position.order < this.position.order ? -1 : 1;
            }
            if (this.chatId != o.chatId) {
                return o.chatId < this.chatId ? -1 : 1;
            }
            return 0;
        }

        @Override
        public boolean equals(Object obj) {
            OrderedChat o = (OrderedChat) obj;
            return this.chatId == o.chatId && this.position.order == o.position.order;
        }
    }

[Snippet Above]
Built upon the repository example, this is done to quote the official page.

The positions of chats in chat lists are managed by TDLib, so the Application only needs to listen to updates that change the chat.positions field, maintain the list of all chats, sorted by the pair (position.order, chat.id) in descending order.

Se'fini und Merci.

External Links

Twitter: @benny_wayn
LinkedIn: Ibenge-uforo
Ongoing Research[5 min]: Social Survey

Entry-4: Building a telegram client with react-native (Part 1)

ibenge Uforo — Sat, 11 Feb 2023 17:53:11 +0000

it was quite cumbersome but entertaining - the notion of react-native learn once write anywhere rings true when faced with minimal apps but not with complex apps.

At some point having the knowledge of the underlying language ie. Swift, Kotlin or Java speeds up the process.

Although react-native has it’s good parts, being comfortable with the aforementioned languages would go along way.

A couple of things learnt

Swift, Android(Java or kotlin) and bits of obj-c to comfortable write functionalities.
React-native being tedious when you have to combine languages, and would recommend one to go for the native directly except of course in minimal cases.
Threading and concurrency as most examples which improves the performance of the app, although a couple of tdlib methods can only be run on one thread.

Setup

Tdlib pre-built library. Android or build from scratch, see TDLib Android example
Create a folder called jniLibs under main
Move contents of the libs folder gotten from the built files above to jniLibs eg. armv4 etc
Move contents of tdlib→ *.java to your folder eg. nativeclient, client.java
Add to build.gradle(:app) android - see, https://github.com/tdlib/td/issues/1904

        sourceSets {
        main {
            jniLibs.srcDirs = ['src/main/jniLibs']
            jni.srcDirs = []
        }
    }

Connect to react-native using your preferred method. either turbo-modules or legacy.
C*ode!*

Begin.

Within this module, we would cover while building upon the Java example within the TDLIB Repository.

Authentication with Telegram.
Display chat-list
Display single chat
Send and receive messages.

Authentication with Telegram.

To authenticate with telegram, you should have your phone number and details registered with telegram either through the app or built as an interface.

A couple of functions we would need.

StartTdlib

This begins all communication to the TDLIB API

Variables.

/** client instance which would be used to make calls to the TDLIB api. **/
private static Client client = null;

/** 
Used to ensure we do not start the tdlib service once more, as it would throw an error
we can check for client above as well, if we have the client, this means  the service has been started
 **/
private static Boolean hasStartedTdlibService = false;

Method

@ReactMethod
    public static void startTdLib() throws InterruptedException {

/** 
 ** We check if the tdlib service has been started and then trigger the last status
**/
        if (hasStartedTdlibService) {
            onAuthorizationStateUpdated(null);
            return;
        }

        // disable TDLib log and redirect fatal errors and plain log messages to a file
        Client.execute(new TdApi.SetLogVerbosityLevel(0));

                /* create a path wherein tdlib can send write logs to and throws an error with the message below if the directory cannot be accessed*/
        if (Client.execute(new TdApi.SetLogStream(new TdApi.LogStreamFile(reactContext.getExternalFilesDir(null).getAbsolutePath() + "tdlib.log", 1 << 27, false))) instanceof TdApi.Error) {
            throw new IOError(new IOException("Write access to the current directory is required"));
        }

        // create client
        client = Client.create(new UpdateHandler(), null, null);
        hasStartedTdlibService = true;

    }

Functions not displayed from above are extracts from the repository example ie.

Login

On start of the TDLIB service, we would need to submit the phone number to receive the otp code.

Native (Java)

@ReactMethod
    public void login(ReadableMap userDetails, Promise promise) {
        String phoneNumber = userDetails.getString("countrycode") + userDetails.getString("phoneNumber");
                // client here links to the variable above which has been filled by the startTdlib Method,.
        client.send(new TdApi.SetAuthenticationPhoneNumber(phoneNumber, null), new NativeResponse(promise));

   }

React Native

Pending your UI requirements, ensure you have methods which

Calls the method ***Login* from above
Receives an event or promise for the next step to enter the OTP code.

Example submit function.

const handleSubmit =  () => {
        try {
                                // Calls the native method set above, ie. login sending the countrycode and phone number
                                TelegramModule.login({
                countrycode: methods.getValues('countryCode'),
                phoneNumber: methods.getValues('phoneNumber')
            });
        } catch (e: any) {
            ToastFeedback.showError(e.message);
        } finally {
                        // perform any clean up necessary.
        }
    };

Example event listener

const eventEmitter = new NativeEventEmitter(TelegramModule);

eventEmitter.addListener('AuthorizationStateWaitCode', () => {
            // Perform necessary actions when this event is received from call in submit function
    });

NB: Promise within the native module, is set from react native, no additional setup is required.

See for more info. Promises

Verify Phone Number

In this phase we would have received an OTP from the login process set above, with the OTP gotten we make setup some functions to handle the verification

Native (JAVA)

@ReactMethod
    public void verifyPhoneNumber(String otp, Promise promise) {
        client.send(new TdApi.CheckAuthenticationCode(otp), new NativeResponse(promise));
    }

React Native

Likewise we ensure the core process listed above ie. submit function, eventlisteners are setup to proceed with the next step

const submitOtp = async () => {
        try {
            if (TelegramModule) {
                const result = await TelegramModule.verifyPhoneNumber(methods.getValues().code);
                if (result) {
                                // handle result here
                }
            }
        } catch (error: any) {
            // catch errors
        }
    };

Exercise

see if you can implement the resend OTP phase, using the logic from above.

Hopefully with this you can start or resolve issues encountered while building your own telegram client using react native.

Some issues encountered along the way.

Sending responses from android to JS.
- Event Emitter does not get called.
  - Check for incorrect handling of updates - in my case I attached the wrong response handler
- Emitter does not send response back to react-native
  - Check you are making use of the correct event or method
- API_INVALID__ERROR
  - check for spaces or strings within the setTdlibParameters
  - Make use of the second constructor with parameters.
Making use of the react application context in other classes
- the idea was to instatiate the variable for the context with key of static when created and then access it through a static method.
Execution failed for task ':app:mergeDebugResources' occur while running the app
- In my case it was an XML file having the wrong property ***“app:…”*** under a wrong layout. checking for resources eg. drawables, fonts, xml etc could resolve this issue.
Duplicate class androidx.lifecycle.ViewModelLazy found in modules jetified-lifecycle-viewmodel-ktx-2.3.1-runtime
- As the error suggests there is a duplicate class used by one of the packages or your implementation with regards to the lifecycle - adding the following code unifies the dependency
This is added on under app → build.gradle
```
```
implementation "androidx.lifecycle:lifecycle-viewmodel:2.5.1"
implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:2.5.1"
```
```
Textview or views not populated with data
- each side of the display should contain the same ids as giving it a different name would not allow it to be populated.

Building a Telegram Client - Part 2

Building a telegram client with react-native (Part 1)

ibenge Uforo — Sun, 05 Feb 2023 17:07:19 +0000

Building a telegram client was quite cumbersome but entertaining, stretching my knowledge and learning process which is key to growth

The notion of react-native learn once write anywhere rings true when faced with minimal apps but not with complex apps.

Although react-native has it’s good parts, being comfortable with the aforementioned languages would go along way even speeding up the process.

A couple of things learnt

Swift, Android(Java or kotlin) and bits of obj-c to comfortable write functionalities.
React-native being tedious when you have to combine languages, and would recommend one to go for the native directly except of course in minimal cases.
Threading and concurrency as most examples which improves the performance of the app, although a couple of tdlib methods can only be run on one thread.

Setup

If you are making use of an expo managed app, the process still applies.

Tdlib pre-built library. Android or build from scratch, see TDLib Android example
Create a folder called jniLibs under main
Move contents of the libs folder gotten from the built files above to jniLibs eg. armv4 etc
Move contents of tdlib→ *.java to your folder eg. nativeclient, client.java ... See Folder structure below, peek the jniLibs folder.

Add to build.gradle(:app) android - see, https://github.com/tdlib/td/issues/1904

        sourceSets {
        main {
            jniLibs.srcDirs = ['src/main/jniLibs']
            jni.srcDirs = []
        }
    }

Connect to react-native using your preferred method. either turbo-modules or legacy.
Code!

Begin.

Within this module, we would cover while building upon the Java example within the TDLIB Repository.

Authentication with Telegram.
Display chat-list
Display single chat
Send and receive messages.

Authentication with Telegram.

To authenticate with telegram, you should have your phone number and details registered with telegram either through the app or built as an interface.

A couple of functions we would need.

StartTdlib Service
Login
Verify Phone Number
Resend OTP (exercise)

StartTdlib

This begins all communication to the TDLIB API

Variables.

/** client instance which would be used to make calls to the TDLIB api. **/
private static Client client = null;

/** 
Used to ensure we do not start the tdlib service once more, as it would throw an error
we can check for client above as well, if we have the client, this means  the service has been started
 **/
private static Boolean hasStartedTdlibService = false;

Method

@ReactMethod
    public static void startTdLib() throws InterruptedException {

/** 
 ** We check if the tdlib service has been started and then trigger the last status
**/
        if (hasStartedTdlibService) {
            onAuthorizationStateUpdated(null);
            return;
        }

        // disable TDLib log and redirect fatal errors and plain log messages to a file
        Client.execute(new TdApi.SetLogVerbosityLevel(0));

                /* create a path wherein tdlib can send write logs to and throws an error with the message below if the directory cannot be accessed*/
        if (Client.execute(new TdApi.SetLogStream(new TdApi.LogStreamFile(reactContext.getExternalFilesDir(null).getAbsolutePath() + "tdlib.log", 1 << 27, false))) instanceof TdApi.Error) {
            throw new IOError(new IOException("Write access to the current directory is required"));
        }

        // create client
        client = Client.create(new UpdateHandler(), null, null);
        hasStartedTdlibService = true;

    }

Functions not displayed from above are extracts from the repository example ie.

Login

On start of the TDLIB service, we would need to submit the phone number to receive the OTP code.

Native (Java)

@ReactMethod
    public void login(ReadableMap userDetails, Promise promise) {
        String phoneNumber = userDetails.getString("countrycode") + userDetails.getString("phoneNumber");
                // client here links to the variable above which has been filled by the startTdlib Method,.
        client.send(new TdApi.SetAuthenticationPhoneNumber(phoneNumber, null), new NativeResponse(promise));

   }

React Native

Pending your UI requirements, ensure you have methods which

Calls the method ***Login* from above
Receives an event or promise for the next step to enter the OTP code.

Example submit function.

const handleSubmit =  () => {
        try {
                                // Calls the native method set above, ie. login sending the countrycode and phone number
                                TelegramModule.login({
                countrycode: methods.getValues('countryCode'),
                phoneNumber: methods.getValues('phoneNumber')
            });
        } catch (e: any) {
            ToastFeedback.showError(e.message);
        } finally {
                        // perform any clean up necessary.
        }
    };

Example event listener

const eventEmitter = new NativeEventEmitter(TelegramModule);

eventEmitter.addListener('AuthorizationStateWaitCode', () => {
            // Perform necessary actions when this event is received from call in submit function
    });

NB: Promise within the native module, is set from react native, no additional setup is required.

See for more info. Promises

Verify Phone Number

In this phase we would have received an OTP from the login process set above, with the OTP gotten we make setup some functions to handle the verification

Native (JAVA)

@ReactMethod
    public void verifyPhoneNumber(String otp, Promise promise) {
        client.send(new TdApi.CheckAuthenticationCode(otp), new NativeResponse(promise));
    }

React Native

Likewise we ensure the core process listed above ie. submit function, eventlisteners are setup to proceed with the next step

const submitOtp = async () => {
        try {
            if (TelegramModule) {
                const result = await TelegramModule.verifyPhoneNumber(methods.getValues().code);
                if (result) {
                                // handle result here
                }
            }
        } catch (error: any) {
            // catch errors
        }
    };

Exercise

see if you can implement the resend OTP phase, using the logic from above.

Some issues encountered along the way.

Sending responses from android to JS.
- Event Emitter does not get called.
  - Check for incorrect handling of updates - in my case I attached the wrong response handler
- Emitter does not send response back to react-native
  - Check you are making use of the correct event or method
- API_INVALID__ERROR
  - check for spaces or strings within the setTdlibParameters
  - Make use of the second constructor with parameters.
Making use of the react application context in other classes
- the idea was to instatiate the variable for the context with key of static when created and then access it through a static method.
Execution failed for task ':app:mergeDebugResources' occur while running the app
- In my case it was an XML file having the wrong property ***“app:…”*** under a wrong layout. checking for resources eg. drawables, fonts, xml etc could resolve this issue.
Duplicate class androidx.lifecycle.ViewModelLazy found in modules jetified-lifecycle-viewmodel-ktx-2.3.1-runtime
- As the error suggests there is a duplicate class used by one of the packages or your implementation with regards to the lifecycle - adding the following code unifies the dependency
This is added on under app → build.gradle
```
```
implementation "androidx.lifecycle:lifecycle-viewmodel:2.5.1"
implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:2.5.1"
```
```
Textview or views not populated with data
- each side of the display should contain the same ids as giving it a different name would not allow it to be populated.

Conclusion

In conclusion, building a Telegram clone with React-Native is a great way to explore the capabilities of this powerful framework. By following the steps outlined in this blog post, you should now have a basic understanding of how to set up the project native(java) and react-native.

Watch out for Part two as I would be taking a look at building the chat list and chat screens.

External Links

Twitter: @benny_wayn
LinkedIn: Ibenge-uforo
Ongoing Research[5 min]: Social Survey

Entry-3: Display Image with Intent (React-native)

ibenge Uforo — Sun, 04 Dec 2022 13:24:27 +0000

A simple way I came up with to open an image, given a file path linked to the internal storage on mobile (Android)

public void openFileWithIntent(String completeFilePath, String directory) {

                //convert file path to File
        File newFile = new File(String.valueOf(Uri.parse(fileName)));
                // convert create content Uri for sharing with other apps
        Uri contentUri = getUriForFile(reactContext, reactContext.getApplication Context().getPackageName() + ".fileprovider", newFile);

                //create an intent
        Intent intent = new Intent();
                // set the action type 
        intent.setAction(Intent.ACTION_VIEW);
                // set the data and mime type
                String mimeType = ...
        intent.setDataAndType(contentUri, mimeType);
                // Grant temporary access to application opening the file
        intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION | Intent.FLAG_GRANT_WRITE_URI_PERMISSION);
                // Due to context being outside an activity, we add the flag.
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
                // Launch file chooser
        reactContext.startActivity(intent);
 }

Add to your android manifest


<provider
android:name="androidx.core.content.FileProvider"
android:authorities="${applicationId}.fileprovider"
android:exported="false"
android:grantUriPermissions="true">
    <meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/file_paths" />
</provider>

We create a file path.xml for above “******android:resource….”******

<?xml version="1.0"encoding="utf-8"?>
<pathsxmlns:android="http://schemas.android.com/apk/res/android">
    <external-files-pathname="photos"path="photos/"  />
</paths>

And that’s it.

Deep dive.

External Links

Twitter: @benny_wayn
LinkedIn: Ibenge-uforo
Ongoing Research[5 min]: Social Survey

Entry-2: ByteArray conversion (React-native)

ibenge Uforo — Fri, 02 Dec 2022 17:39:47 +0000

Tasked with building a chat client with the telegram API (Post coming soon), I encountered this issue wherein the byte array had to be converted to a base64 string to display a thumbnail.

After a couple of hours of research with no solution in sight of which I did not need aspirin for, the following solution below settled it.

byte[] bytes = new byte[byteArray.size()];

for(inti = 0; i<byteArray.size(); i++){
    /*
     * In this context the values of the array is parsed as a string hence the method 'getString'.
     */
    bytes[i] = Byte.parseByte(byteArray.getString(i));
}

Example with a Base64Converter

public class FileToBase64 {

    public static String convertToBase64 (byte[] imageBytes){

        return Base64.encodeBase64String(imageBytes);

    }

}

Full code

@ReactMethod
public void convertToBase64(Readable ArraybyteArray,Callback callback){
byte[] bytes =new byte[byteArray.size()];

for(inti = 0; i<byteArray.size(); i++){
        bytes[i] = Byte.parseByte(byteArray.getString(i));
    }

// Regular callback gotten from react native
// see - https://reactnative.dev/docs/native-modules-android#callbacks
    callback.invoke( FileToBase64.convertToBase64(bytes));

}

TLDR

Send the byte to the native OS
Convert and return to react-native.

PS: Do comment below if further explanation is required, I am happy to oblige!.

Cheers (:

External links

Twitter: @benny_wayn
LinkedIn: Ibenge-uforo
Ongoing Research: Social Survey

Entry-1: S - in SOLID

ibenge Uforo — Thu, 24 Nov 2022 20:11:59 +0000

There is a common misunderstanding at-least from articles and videos on the topic where the "S" short for the single responsibility principle has been mentioned to mean.

A module should do just one thing.

Although there is a principle like that, this does not capture the entire idea. What the “*S”* essentially was intended to mean is.

"A module should be responsible to one, and only one, actor."

The term actor refers to a group (consisting of one or more stakeholders or users) that requires a change in the module.

where a module is regarded as a source file. a cohesive set of functions and data structures.

Still here? let’s go further…

A way we could discuss this is in the results. say we have a student class which has the following functions, calculateFees(), calculateClassHours().

public class Student {
    public void calculateFees(){
        //logic
    }

    public void calculateClassHours(){
        //logic
    }
}

This class violates the SRP because those two methods are responsible to two very different actors.

The calculateFees() method is specified by the accounting department, which reports to a financial officer
The calculateClassHours() method is specified and used by the Lecturers, which reports to the H.O.D for some reason to the team.

From a bird’s eye-view, no deep thoughts into the matter, the code above will work as intended but will lead to some challenges. ie. making the code reusable,tight coupling etc. and due to the way programs tend to work ie. the larger the code-base -> the proportional logic, making it even harder to understand what is going on.

So… How can we solve?.

A simple way would be to incorporate a design pattern called the Facade, which could mean a figure head for the methods, wherein we move the core logic to a separate class and then make use of those classes in the facade. Well confusing… see below.

// First, we create the student facade
public class StudentFacade {

    public void calculateFees(args1, args2){ // this should have types but we digress

    //perform logic to calculate the fees.
    HourReporter hourReporter = new HourReporter();
    hourReporter.reportHours();

    }

  public void calculateClassHours(args1, args2){
   //logic
    FeeCalculator feeCalculator = new FeeCalculator();
    feeCalculator.calculateFees();
  }
}

public class HourReporter {
    public void reportHours(){
        //logic
    }
}

public class FeeCalculator {
    public void calculateFees(){
        //logic
    }
}

So now the classes are not tightly coupled + the student facade contains very little code. It is responsible for instantiating and delegating to the classes with the functions.

Konclushun.

The SRP has the tendency to be easily misunderstood due to the name of which I hopefully clarify with some examples and improvements we can make going forward. so…what next?

You could get the Book by Uncle bob on Clean architecture, this goes deeper or dive into the references (excluding the book) to have a feel. Connect with me on the linkedIn or twitter, comment (I would love to see your thoughts), throw me a question or do something out of the blue you fancy.

That being said, this is all i have for now, thanks for coming to my talk.

References

https://en.wikipedia.org/wiki/Single-responsibility_principle
The Facade Pattern Explained and Implemented in Java
Clean Architecture - Robert C. Martin , SRP: The Single Responsibility Principle chapter 7.

External Links

LinkedIn: Ibenge-uforo
Ongoing Research: Social Survey