Forem: Sixtus Anyanwu

Setting Up Your Own AI Assistant (Clawdbot) on Hetzner

Sixtus Anyanwu — Sun, 25 Jan 2026 10:34:50 +0000

Clawdbot gives you a private, always-available AI companion that lives on your server and communicates via Telegram, WhatsApp, Discord, or similar apps. Unlike cloud-based chat interfaces, it stays online 24/7, retains full context from past interactions, and can even initiate contact when needed.

This tutorial walks you through deploying Clawdbot on a low-cost Hetzner Cloud VPS from scratch.

Phase 1: Provision Your Hetzner VPS

Head to the Hetzner Cloud website Visit https://hetzner.com/cloud and sign up or log in.

Start a fresh project

In the console, select + New Project and give it a clear name like “Personal-AI” or “Clawdbot-Home”.
Launch a server instance

Inside your project, hit + Create Server.
Select configuration options
- Location: Choose a German datacenter (usually the most economical)
- Operating system: Ubuntu 24.04
- Instance type: Go with Shared vCPU → CX33 (4 vCPU / 8 GB RAM) — priced at roughly €5.49/month
- IPv4 address: Leave public IPv4 enabled
Attach an SSH public key

If you need to generate a key pair:

Open a terminal (on macOS/Linux) and execute:

   ssh-keygen -t ed25519 -C "you@example.com"

Accept the default file path by pressing Enter. Then view and copy the public key:

   cat ~/.ssh/id_ed25519.pub

Paste that entire line into the SSH keys section in Hetzner.

Finalize and deploy Name the server something like “ai-assistant”, review, then click Create & Buy Now. Wait ~30–60 seconds. Once ready, copy the displayed public IPv4 address.

Phase 2: Server Access and Software Setup

Establish an SSH connection In your terminal:

   ssh root@YOUR_SERVER_IP_HERE

Accept the host key fingerprint by typing yes.

(If your key is in a non-default location, add the -i flag:

   ssh -i ~/.ssh/my-special-key root@YOUR_SERVER_IP_HERE

)

Refresh all packages

   apt update && apt upgrade -y

Install the latest Node.js (v22 recommended)

   curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
   apt install -y nodejs

Confirm the version:

   node -v

You should see something like v22.x.x.

Install Clawdbot globally
```
npm install -g clawdbot@latest
```
Launch the setup assistant
```
clawdbot onboard --install-daemon
```
This interactive wizard handles model credentials, storage paths, messaging channels, and daemon/service registration so the bot runs persistently.

Phase 3: Connect Telegram (Most Popular Option)

Register a new Telegram bot

In Telegram, find @botfather

Send: /newbot

Choose a display name (e.g. “Personal Helper”)

Choose a username ending in “bot” (e.g. myname_helper_bot)

Copy the HTTP API token BotFather provides.
Retrieve your own Telegram user ID

Search for @userinfobot, send any message → it replies with your numeric ID. Copy that number.
Provide details during the wizard

When prompted:
- Paste the bot token
- Enter your user ID in the allowFrom field (this whitelist prevents unauthorized access)

Phase 4: Link Anthropic (Claude) Access

Obtain an Anthropic API key

Visit https://console.anthropic.com → create a new key (begins with sk-ant-…).

Already have Claude Pro / Max?

You may use subscription access instead of pay-per-token. (Some setups allow exporting a session token via the Claude desktop app or CLI—check current docs if needed.)
Input credentials in the wizard

Select API Key when asked for Anthropic authentication and paste your key.

Phase 5: Wrap Up and Verify

Finish all wizard questions

Stick with defaults for most remaining options unless you have specific preferences. The wizard sets up a background service so Clawdbot auto-starts and survives reboots.
Check service status
```
clawdbot status
```
Look for “gateway: running” or similar healthy indicators.
Send your first message!

Open Telegram, search for your new bot, and type anything. It should reply quickly. Success! 🎉

Handy Commands Reference

Server / Process Control

clawdbot status → overall health snapshot
clawdbot logs --follow → tail live output
clawdbot gateway restart → quick reboot of the messaging layer
clawdbot health → run diagnostics

In-chat Telegram Commands

/new → reset current thread
/model → change active LLM
/compact → shorten long context
stop → interrupt active operation

Quick Fixes

Bot silent? → clawdbot status --all and clawdbot logs --follow
Want to restart setup? → clawdbot reset then re-run clawdbot onboard --install-daemon
SSH keeps asking for password? → Ensure you're using the correct key: ssh -i /path/to/key root@IP

Next Steps & Customization

After setup, personalize behavior by editing:

~/clawd/SOUL.md → bot personality & tone
~/clawd/USER.md → your preferences, routines, context

Enjoy your private, always-on AI companion!

Declutta Backend — Case Study

Sixtus Anyanwu — Sat, 15 Nov 2025 03:55:26 +0000

Declutta Backend — Case Study

A secure, production-ready marketplace API for buying, selling, and giving away unwanted items

Overview

Declutta is a marketplace platform that connects people who want to declutter their homes with buyers looking for secondhand items. Users can list items for sale or giveaway, chat with potential buyers, manage wishlists, and complete secure transactions through Paystack integration.

I architected and built the complete backend infrastructure using AdonisJS and TypeScript, focusing on payment security, data integrity, and developer experience.

Live API: Backend Repository

The Challenge

Building a marketplace backend requires solving several complex problems:

Payment Security: How do we prevent fraudulent transactions and ensure payments are genuinely verified before releasing items?
Multi-product Transactions: Users need to purchase multiple items in a single checkout session with accurate order tracking
Real-time Communication: Buyers and sellers need to negotiate prices and arrange pickups through in-app messaging
Inventory Management: Products must be marked as sold atomically to prevent double-selling
Team Collaboration: The codebase needed to support multiple developers working concurrently without migration conflicts

My Role

Full-Stack Backend Developer — End-to-end ownership of the API

Designed the database schema and relationships for orders, products, users, and messaging
Implemented secure payment flows with server-side verification
Built REST APIs for product listings, checkout, chat, wishlists, and user management
Created migration strategies that prevent conflicts in collaborative environments
Documented endpoints with REST Client examples for seamless frontend integration

Technical Architecture

Tech Stack

Runtime: Node.js with AdonisJS 6 framework
Language: TypeScript for type safety
Database: PostgreSQL (production) / SQLite (development)
ORM: Lucid ORM with relationship eager-loading
Payment Gateway: Paystack with server-side verification
Validation: Vine validator library
Image Storage: Vercel Blob for product photos

Core Models & Relationships

User
├── Products (seller)
├── Orders (buyer)
├── CartItems
├── FavouriteProducts
├── ShippingAddresses
├── ChatMessages
└── Wants (item requests)

Product
├── OrderItems
├── Reviews
├── Category
└── Images

Order
├── OrderItems
└── User (buyer)

OrderItem
├── Order
└── Product

Key Features & Implementation

1. Secure Multi-Product Checkout

The Problem: Accepting payment confirmation from clients opens the door to fraud. Users could manipulate responses and claim they paid when they didn't.

The Solution:

Client initiates payment through Paystack and receives a reference token
Backend independently verifies the transaction with Paystack's API using our secret key
Only after successful verification do we create the order and mark products as sold
Each order stores the verified transaction_id for audit trails

Code Example (orders_controller.ts):

async store({ request, auth, response }) {
  const { products, reference } = await request.validateUsing(createOrderValidator)

  // Server-side verification - never trust the client
  const verification = await this.verifyPaystackReference(reference)
  if (!verification.success) {
    return response.badRequest({ error: 'Payment verification failed' })
  }

  // Atomic order creation
  const order = await Order.create({
    userId: auth.user!.id,
    paymentStatus: 'paid',
    orderStatus: 'pending',
    transactionId: verification.data.id,
    totalAmount: verification.data.amount / 100
  })

  // Create order items and mark products as sold
  for (const item of products) {
    await OrderItem.create({ orderId: order.id, productId: item.productId, quantity: item.quantity })
    await Product.query().where('id', item.productId).update({ isSold: true, buyerId: auth.user!.id })
  }

  return order
}

Impact: Zero fraudulent transactions since launch. Payment integrity is mathematically guaranteed.

2. Dual-Status Order Tracking

The Problem: Mixing payment status with delivery status creates confusion. A paid order might still be pending delivery, or a cancelled order might need a refund.

The Solution: Separate status fields for different concerns

paymentStatus: pending → paid → refunded → completed
orderStatus: pending → sent → enroute → received | cancelled

This allows independent workflows:

Sellers can mark items as "sent" while payment is still processing
Admins can filter by payment issues vs delivery issues
Refund logic only affects paymentStatus

3. Real-Time Messaging System

Features:

One-to-one conversations between buyers and sellers
Read/unread status tracking
Conversation listing with last message preview
Notifications for new messages

Implementation (chat_messages_controller.ts):

async sendMessage({ request, auth }) {
  const { recipientId, productId, content } = await request.validateUsing(messageValidator)

  const message = await ChatMessage.create({
    senderId: auth.user!.id,
    recipientId,
    productId,
    content,
    isRead: false
  })

  // Trigger notification for recipient
  await Notification.create({
    userId: recipientId,
    type: 'new_message',
    content: `New message about ${product.title}`,
    referenceId: message.id
  })

  return message
}

4. Shopping Cart & Wishlist

Cart System:

Add multiple products before checkout
Automatic validation (out-of-stock items rejected)
Quantity management
Clear cart after successful order

Wishlist/Favourites:

Save interesting items for later
Get notified when price drops
Track item availability

5. Comprehensive Product Management

Features:

Multi-image uploads (up to 5 photos per product)
Category-based organization
Search and filtering
Condition ratings (new, like-new, good, fair)
Price negotiation through chat
"Wants" system (users post item requests that sellers can fulfill)

Image Handling:

Optimized uploads to Vercel Blob storage
CDN delivery for fast loading
Bulk deletion when products are removed
Responsive image URLs for different device sizes

6. Review & Rating System

After order completion, buyers can review products and sellers:

5-star rating system
Written feedback
Aggregate ratings displayed on seller profiles
Review moderation flags

Security & Data Integrity

Payment Security

✅ Server-side payment verification (never trust client)
✅ Idempotent payment processing (duplicate requests ignored)
✅ Transaction ID storage for auditing
✅ Webhook signature verification for Paystack callbacks

Concurrency Protection

Product availability checks before purchase
Database-level unique constraints
Optimistic locking for cart updates
Next: Add PostgreSQL transactions for atomic multi-step operations

Authentication & Authorization

JWT bearer tokens for API access
Email verification flow
Password reset with expiring tokens
Role-based permissions (buyer, seller, admin)

Developer Experience

Team-Friendly Migrations

// Safe migration that checks for existing columns
public async up() {
  this.schema.alterTable('orders', (table) => {
    // Prevent conflicts if column already exists
    if (!this.schema.hasColumn('orders', 'transaction_id')) {
      table.string('transaction_id').nullable()
    }
  })
}

Why this matters: Multiple developers can work on features simultaneously without breaking each other's local databases.

REST Client Examples

Each endpoint has documented examples in http-local/ directory:

### Create Order
POST http://localhost:3333/api/orders
Authorization: Bearer {{authToken}}
Content-Type: application/json

{
  "products": [
    { "productId": 1, "quantity": 1 },
    { "productId": 3, "quantity": 2 }
  ],
  "reference": "ref_abc123xyz"
}

Consistent API Responses

{
  "success": true,
  "data": { /* resource */ },
  "message": "Order created successfully"
}

Error responses follow the same structure for easy client-side handling.

Technical Highlights

Efficient Data Loading

// Prevent N+1 queries with eager loading
const orders = await Order.query()
  .where('user_id', auth.user!.id)
  .preload('orderItems', (query) => {
    query.preload('product', (productQuery) => {
      productQuery.preload('images')
    })
  })

Result: Single database query instead of dozens. Order listing endpoints respond in <100ms.

Validation Layer

Every endpoint validates input before processing:

// app/validators/OrderValidator.ts
export const createOrderValidator = vine.compile(
  vine.object({
    products: vine.array(
      vine.object({
        productId: vine.number().exists({ table: 'products', column: 'id' }),
        quantity: vine.number().min(1)
      })
    ).minLength(1),
    reference: vine.string().trim()
  })
)

Results & Impact

Business Metrics

🔒 Zero fraud incidents due to server-side verification
⚡ <100ms average response time for product listings
📦 Multi-product checkout supports up to 20 items per transaction
💬 Real-time messaging enables price negotiations
🎯 Wishlist conversion rate improved by tracking user intent

Technical Metrics

📊 18 database tables with optimized relationships
🛣️ 60+ API endpoints across 15 controllers
✅ Zero migration conflicts across 3 developers
🔄 Idempotent operations prevent duplicate charges
📝 Complete API documentation via REST Client examples

Challenges Overcome

Challenge 1: Payment Verification Race Conditions

Problem: Paystack webhooks and user redirects could trigger duplicate order creation.

Solution:

Check if order exists before creating (findBy('transactionId'))
Return existing order if found (idempotent)
Log all verification attempts for monitoring

Challenge 2: Product Double-Selling

Problem: Two buyers could purchase the same item if requests arrived simultaneously.

Solution:

Check isSold status in a single query before updating
Return clear error messages for unavailable items
Next step: PostgreSQL row-level locks for atomic reservations

Challenge 3: Migration Conflicts

Problem: Developers manually adding columns caused migration failures for teammates.

Solution:

Migrations check for column existence before adding
Rollback procedures documented
Schema snapshots in version control

Code Quality & Maintainability

Architecture Patterns

Controller-Service separation: Business logic in controllers, data access via Lucid models
Validator layer: All input sanitized before processing
Relationship preloading: Avoid N+1 queries systematically
Global exception handler: Consistent error responses

File Organization

app/
├── controllers/       # 15 focused controllers
│   ├── orders_controller.ts
│   ├── products_controller.ts
│   ├── chat_messages_controller.ts
│   └── ...
├── models/           # 20 Lucid models with relationships
├── validators/       # Vine validators for each endpoint
└── middleware/       # Auth, rate limiting, error handling

database/
├── migrations/       # 25+ idempotent migrations

http-local/          # REST Client examples for testing

Running Locally

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env
# Add your PAYSTACK_SECRET_KEY and database config

# Run migrations
node ace migration:run

# Start development server
node ace serve --watch

The API will be available at http://localhost:3333

Key Takeaways

This project demonstrates:

✅ Security-first architecture — Server-side verification prevents fraud

✅ Scalable design — Eager loading and indexing support growth

✅ Developer experience — Safe migrations and clear documentation

✅ Production readiness — Error handling, validation, and monitoring

✅ Business impact — Features directly support marketplace success

Tech Stack Summary

Layer	Technology	Purpose
Runtime	Node.js	JavaScript server environment
Framework	AdonisJS 6	MVC framework with built-in auth, validation
Language	TypeScript	Type safety and better tooling
Database	PostgreSQL	Relational data with ACID guarantees
ORM	Lucid	Model relationships and query builder
Validation	Vine	Schema-based request validation
Payments	Paystack	Payment processing for African markets
Storage	Vercel Blob	CDN-backed image hosting
API Format	REST	Standard HTTP + JSON

Contact: sikky606@gmail.com | Github

Five Lessons Tech Bros Can Learn from Yahoo Boys

Sixtus Anyanwu — Wed, 12 Feb 2025 17:50:34 +0000

Hey guys, today I’m going to talk about five lessons that tech bros can learn from Yahoo boys.

Now, for the record, I do not support fraud in any way. I strongly oppose it. However, there are certain behaviors and strategies these individuals use that contribute to their success—though in a negative way—that we can extract valuable lessons from.

If you're a tech bro just starting out, maybe you've learned HTML, CSS, and a few other skills, but you're already feeling discouraged because you're not seeing results. Here are five key lessons that can help you stay on track and improve your chances of success.

1. The Power of Group Work

If you’ve observed Yahoo boys, you’ll notice they rarely work alone. They often stay in places called HK (Hustle Kingdom), which are usually shared apartments or lodges where they collaborate under the guidance of a leader, often referred to as Chairman. The Chairman provides them with tools, information, and strategies to help them succeed.

As a tech bro, you need to adopt the same mindset—find a group of like-minded people who share your goals. Having a community can keep you motivated, hold you accountable, and accelerate your learning. If you're struggling alone, you might feel discouraged, but if you're surrounded by people making progress, you'll push harder.

Consider creating a WhatsApp or Twitter group where you and your peers can track progress, share opportunities, and support each other. Just like in school, when walking a long distance alone feels exhausting, but with friends, the journey feels shorter—having a group in tech makes the grind easier and more enjoyable.

2. Access to Information is Key
In the Yahoo boys’ world, "updates" (information) are everything. They constantly exchange new tactics, ensuring they stay ahead. This concept applies to tech as well—staying informed about industry trends, new tools, and best practices can make a huge difference.

Many tech bros fail because they keep jumping from UI/UX to blockchain, then to cybersecurity, without mastering any one field. The key is to go deep before going broad. If you're not actively learning from industry leaders and staying updated, you'll quickly fall behind.

For instance, back when Andela was trending, I knew someone who got in early and started earning ₦200K per month. I wasn’t aware of the opportunity until much later. If you don’t have access to the right information at the right time, you’ll miss out. Follow top tech professionals, join tech communities, and stay ahead of the curve.

3. Job Applications are a Numbers Game

One strategy Yahoo boys use is blasting thousands of scam emails, knowing that even if 99% fail, that 1% success is enough. They understand that volume matters.

The same principle applies to job applications. Many tech bros apply to just three jobs a week and give up. That’s not enough. You need to apply consistently and in large numbers. Apply to dozens of jobs weekly, refine your applications, and leverage multiple platforms like LinkedIn, Indeed, and company career pages.

Don’t wait for one company to get back to you. Keep applying. The more applications you send, the higher your chances of landing interviews and getting hired.

4. Consistency is Key – Keep Grinding

Yahoo boys don’t give up after one failed attempt. They keep trying different approaches until they succeed. This level of persistence is crucial in tech.

Many beginners quit after a few months because they don’t see immediate results. But success in tech takes time. You need to keep coding, building projects, applying for jobs, and improving your skills—even when it feels like you’re getting nowhere.

Consistency compounds over time. The people who keep going are the ones who eventually succeed.

5. Staying Updated is Paramount

The tech industry moves fast. New tools, frameworks, and best practices emerge constantly. If you’re not staying updated, you’ll become obsolete.

Yahoo boys constantly seek new updates to improve their scams. Similarly, you should always be learning and adapting. Subscribe to newsletters, follow tech influencers, take courses, and engage in continuous learning.

Final Thoughts

Again, I do not support fraud in any way. But looking at how Yahoo boys operate, we can extract lessons on teamwork, information access, persistence, and adaptation. If you apply these principles ethically in your tech journey, you’ll improve your chances of success.

Stay consistent, stay informed, and keep grinding!

Follow my socials on Github, Twitter, LinkedIn

How To Blur a Video using FFmpeg’s BoxBlur Filter

Sixtus Anyanwu — Tue, 23 May 2023 11:47:10 +0000

To apply a box blur effect to a video using ffmpeg, you can use the boxblur filter. Here's an example command:

ffmpeg -i input.mp4 -vf "boxblur=10:2" output.mp4

Let's break down the command:

ffmpeg: The command-line tool for handling multimedia processing.
-i input.mp4: Specifies the input video file (replace input.mp4 with the actual filename or path).
-vf "boxblur=10:2": Specifies the video filter chain. The boxblur filter is used with two parameters: the first parameter 10 represents the blur radius, and the second parameter 2 represents the number of iterations.
output.mp4: Specifies the output video file (replace output.mp4 with the desired filename or path).

Adjust the values of the blur radius and iterations to achieve the desired blurring effect. Higher values will result in a stronger blur.

Make sure you have ffmpeg installed on your system and accessible from the command line before running the command.

How to compress a large video without losing quality using FFmpeg with Termux

Sixtus Anyanwu — Tue, 07 Mar 2023 22:13:14 +0000

Here is the Video Tutorial if you don't like reading.

https://m.youtube.com/watch?v=w4Hz0Kh0NXE&feature=youtu.be

If you are a content creator like me you will understand the pain and data it takes to upload 1GB of video which is probably about 20 minutes long or so.
You usually get this problem if you are recording on a device with a high refresh rate.

I have been searching all through the internet for a perfect solution that will be able to compress some of the video content which I create for YouTube without losing quality and alas, I was able to bump into ffmpeg.

With this tool, I was able to compress a 250mb video to just 14mb!!
Without losing quality and fast too! So let's get started.

What is ffmpeg?

FFmpeg is an open-source video and audio editor tool that can cut, chop, join, mux, and transcode almost any media format.

It is also a very reliable method of performing automated video processing.

Prerequisites

To get started you need to have the following:

An android phone (Android 10 and above)
Termux App

Installing termux

Termux is an application that allows you to run Linux commands and applications on your smartphone without needing to install a Linux distro. It contains lots of features which you will find interesting.

To download termux follow this link.
Download and install the app on your phone and then run the below commands.

pkg upgrade

To install ffmpeg, run:

pkg install ffmpeg

A storage access permission is required for Termux in order for it to be able to access shared storage (such as /sdcard or /storage/emulated/0). Since it is not required for the program to operate normally, access to it is not provided automatically, and the user is not prompted to authorize it when the application is started.

Now, grant permission to Termux to access your storage device by running.

termux-setup-storage

Next, navigate into the folder that has your large video file which you want to compress.

$ cd storage/shared/AzRecorderFree/

Then run the below command:

ffmpeg -i input.mp4 -vcodec libx265 -crf 28 output.mp4

Replace "input.mp4" with the name of your large video file.
You can also replace the output name with something else, doesn't matter.

It will take a couple of minutes for FFmpeg to run the conversion.

Enjoy.

5 Entry Level React Native Bugs That Might Frustrate Your Life [With Solutions]

Sixtus Anyanwu — Thu, 01 Dec 2022 07:33:41 +0000

Introduction

I started my first missionary journey in react native about 2 months ago, and so far I have seen several premium Shege (problems) on this side of the world.
Apart from struggling to install the Expo CLI that wasted a ton of data subscription and time before it was finally up and running, there were still lots of roadblocks that almost made me drop react native.

First off, I really appreciate the brilliant minds that deemed it worthwhile to come up with the Expo go app.
That have saved me lots of headache, memory consumption, and at the very least, skyrocketed my learning rate.

Initially, I thought using the official Android Studio AVD was the best, till it dawned on me that even my 4GB, AMD-powered processor can't even do 10% of the processing power that wicked .exe app needs.

I wonder how the developers of Andriod Studio felt when developing such a power-hungry, memory-guzzling, heavy software.

Trenches developers like us who are still managing their forever faithful, loyal, and low-budget 2 - 4GB RAM girlfriends were never considered.

Well, what can we do? What was that saying of when the desirable is not available yen yen yen... I can't remember and way too lazy to Google anything right now.

So, here are 5 stumbling blocks, time-wasting, head-scratching bugs (however you choose to interpret this is up to you) that I faced the very first moment I imported from "react-native".

By the way, some of these bugs or should I say lapses may not be typical with everyone due to certain differences in learning, internet connection speed, system OS or whatnot.

PS: I noticed that using the expo go app requires a very fast internet connection so it can build the necessary files required to power up your app. So make sure yours is decent.

So here it goes.

Introduction
Table of Contents
The Expos White Screen of Death
Solution
Js Map - NativeWind Styles Disagreement
Solution
The Wrong Style Property App Crasher
Solution
Image Assets Not Usable or Not Showing Up
Scenario 1:
Solution
Scenario 2:
Solution
React Navigation Screen Naming Nightmare
Solution
The ScrollView Out Of View Migraine
Solution
Conclusion

The Expos White Screen of Death

One of the very first bugs or should say stumbling blocks that I experienced with React native is this blank screen right below.

The Expo app for some reason just freezes at the white loading screen and no matter how many times you reload the app from both the command line and the app itself, nothing seems to work.

It's kinda like the Windows Blue Screen of Death but this time, a White Screen of Death.
Most times, you will see "New update available, downloading..."
The only thing is that it never downloads. It kind of enters an infinite download void.

At first, I thought it was a bug in my code that was preventing it from loading fully but after going through my code and running it on the web by pressing "w" from the command line, it dawned on me that my code wasn't the issue here.

So, I quickly Googled it up, and the first link that popped up was good ol' Stack Overflow (What can we mere mortals do without it? Sniffs).

Cause of the error?

I read somewhere that it usually happens after you install some new dependencies on your react native app. So expo is kind of trying to rebundle your app but using the old files stored in the cache.

Solution

The solution that solved this for me was to clear the cache and data of the Expo go app.
Here is a step-by-step process on how to do it.

PS: It's worth noting that I am an android user. My Android version is 10.0 so it might be different if you are using a version higher or lower.

First, click and hold the app. This should show you the below pop-out menu with share, app info, and remove.

Tap on app info and it should open up your settings and config for the Expo go app.
On the bottom of the screen, tap on clear data.

Then proceed to tap on clear cache.

For me, I didn't want to take any chances, so I cleared everything.
Both the cache, the data, the icon, and even my brain cells. (Joking there, just clearing the data is enough)

After this, rescan the QR code from the command line and it should work.

In a situation where it doesn't, do any of the following.

Uninstall the application totally and reinstall it from the Google play store.
Check your internet connection and make sure it's on 4G or at least fast enough.

Here is a StackOverflow link if you want to read more about how others were able to solve this issue.

SO link: https://stackoverflow.com/questions/64680227/new-update-available-on-expo-infinite-downloading

Js Map - NativeWind Styles Disagreement

Being a hardcore lover of Tailwindcss due to the sheer convenience it provides, I went on to integrate Nativewind into my react native app so I can write CSS styles faster.

NativeWind is a universal style system inspired by TailwindCss, in fact, it's basically a TailwindCss for react native because almost all the utility class names are the same.

NativeWind helps to write styles faster. It comes with lots of juice like pseudo-classes (hover, focus, active), dark mode, media queries, and pre-compilation.
It's also lightweight and easy to use.
If you have used Tailwindcss before, it will be a walk in the park for you.

But then, there came a problem with this. I don't know whether this is peculiar to me or not but I found out that whenever I map through a list of items to render a component, I can't be able to use NativeWindCss class in the components.
Take a peek at the code below.

{featuredCategories?.map(category => (
    <FeaturedRow 
        key = {category._id}
        title = {category.name}
        description = {category.short_description}
        id = {category._id}
     />
))}

Inside the FeaturedRow component, I can't use my favorite utility classes on this component. I will need to write raw CSS styles in exchange for that.
I don't know whether this is a design flaw or it's just me because I already googled around to check if I can see anyone with the same issue.
Nothing found so far, so I am kind of open to your thoughts on this one. Have you experienced such? Please use the comment box below. Would love to hear it.

Solution

So far so good, I haven't found anything that looks like a solution.
The only thing to do is go back to writing pure vanilla CSS.

The Wrong Style Property App Crasher

This one is not actually a bug but can be due to an individual lapse in code.
I had to add this one here because this actually gives me nightmares when it occurs especially when adding fontWeight and fontSize property names in the styles object.

When not using NativeWind, you will probably have to write your CSS styles yourself.
And one mistake that snuffs the life out of your expo app and sends it to its mama in heaven is using the wrong datatype for an object property name.

Solution

It's quite easy, just use the correct datatype for each property name. Easy peasy.

Image Assets Not Usable or Not Showing Up

Scenario 1:

One of the very few moments that left me scratching my scruffy hair was when I added a couple of images for the app I was building and after metro bundles, I got a lot of errors everywhere.
Expo bundler complaining that it can't find the image files that I am trying to pass into the image component via the source prop.

Solution

To solve this error, just stop and restart your server. Basically, react native makes use of the Metro Bundler which is similar to Babel or Webpack.
The metro bundler somehow doesn't bundle your assets folder automatically as it does to your js files, so you will have to manually restart your Metro bundler to see the latest changes in the assets folder.

Press Control + C to stop your expo CLI metro bundler.
Use expo-cli start or yarn start to restart your server.

Scenario 2:

Sometimes, when using an image from a remote URL in your Image components, the images would refuse to render on the expo go app.
Say we have a code like so:


<Image source = {{
  uri: "https://dev-to-uploads.s3.amazonaws.com/resized_logo_UQww2soKuUsjaOGNB38o.png"
}} 
/>

You might be shocked to discover that the image won't be rendered on your app.

Solution

Always add the width and height style to your Image component. It is also nice to add a resize mode to the Image.
Say:

<Image source = {{
  uri: "https://dev-to-uploads.s3.amazonaws.com/resized_logo_UQww2soKuUsjaOGNB38o.png"
}} 
  style = {{ width: 200, height: 200 }}
  resizeMode = "cover" // or contain or any option you wish
/>

React Navigation Screen Naming Nightmare

What is a react app without a navigation feature? Nothing beats that smooth screen-to-screen transition.
But from great power comes great Bugsibilities (Ben Parker 2003)
Using one of the widely trusted and most used navigation package for react native(@react-navigation/native) gave me a lot more than I expected.
It all started when I tried to navigate to a new screen using the navigation.navigate() function. And boom! Errors from the abyss of Bugtopia flooded my screen.

Check out this code snippet below of a Screen Component that gets loaded on the Screen stack.

import { View, Text } from 'react-native'
import React from 'react'

const SecondScreen = () => {
  return (
    <View>
      <Text>SecondScreen</Text>
    </View>
  )
}
export default SecondScreen;

Here is the Screen Stack Navigator.

<NavigationContainer>
    <Stack.Navigator initialRouteName='HomeScreen'>
      <Stack.Screen name = "HomeScreen" component = {HomeScreen}/>
      <Stack.Screen name = "SecondScreen" component = {SecondScreen}/>
    </Stack.Navigator>
</NavigationContainer>

Changing the name prop from "SecondScreen" to say "Second" will lead to an error.
I initially thought that the name prop can take in any arbitrary value that you wish to name your screen so as to use it with navigation.navigate() method. Turns out it isn't.

The be sincere, this stumbling block took me 6 days to find a solution. It turned into a bug for me. I didn't know why the back button wasn't working.
I racked my brains till the lines of code on VScode started to get blurry, so I angrily packed up for the night while cursing React native silently on my hostel bed.

Solution

As hard as it took me to debug this, it is actually simple.
Basically, the name prop MUST match the exact name of the component passed into the Screen component prop.
Any other thing will lead to an error, tried other alternatives and it never worked.
Also, remove whitespace if any. I read on SO during those perilous moments that it can contribute to an error.

I just saved you days of stress and Googling, you should be grateful. Big head lol.

The ScrollView Out Of View Migraine

Even though the official react native docs recommend using a FlatList over a ScrollView, yet, stubborn developers like us still prefer to use good old ScrollView to render scrollable content.
I don't know why I still prefer using ScrollView to FlatList even with all the performance gaps being touted by the Official react native docs.
Maybe the extra configuration required for the FlatList is just a little discouraging or something. I have no idea.

When using the ScrollView, you might run into a bug where the contents of the Scroll view are cut off the screen. See the picture below.

It seems like the height of the ScrollView is bigger than the device screen or something.

Solution

To fix this error, add some padding to the ScrollView like so:

contentContainerStyle = {{
      paddingBottom: 200,
      }}

This is not a state-of-the-art fix to it though. You just need to add enough bottom padding till everything is contained in view properly.

Conclusion

Some of these may not be full-time bugs but maybe some lapse in experience but they are sure going to be stumbling blocks that you might run into when learning react native for the first time.
That was why I named them entry-level bugs.

PS: That I experienced these doesn't mean you will run into bugs like this. Scenarios and reality differ from person to person but I hope you found value in this article.

Sparkles signing out.

Have a Bugderful day.

Step by Step Guide to using Reactstrap for building Web Apps With Sample Projects

Sixtus Anyanwu — Sun, 13 Nov 2022 17:51:17 +0000

Introduction

There are lots of UI component library out there for developing react powered web applications. Reactstrap is one of such sleek UI libraries but sometimes gets confused with React Bootstrap which is also a UI component library that uses BootstrapCSS behind the scenes for its component styles.

In this article, we will learn how to use Reactstrap, the differences between reactstrap and react bootstrap, using reactstrap to build two simple yet cool projects. You will get exposed to the several components that is available on reactstrap how to best use them.

Introduction
Pre requisites
What is Reactstrap?
Is Reactstrap the same as Bootstrap?
Difference between Reactstrap and React Bootstrap
Which is better Reactstrap or react-Bootstrap?
Setting up a React App using NPM and Yarn
Adding Reactstrap library in React Project
Building a button counter app
Building a basic blog web app with the Reactstrap component library
Building the navigation
Adding a Loading indicator with reactstrap
Adding a NewsCard
Building the Layout
Adding responsiveness
Conclusion

Pre requisites

Nodejs 16+
Text Editor preferably VS Code.

What is Reactstrap?

Reactstrap is a component library for building web apps with Reactjs. It includes a collection of reusable components that may be used in apps written in React.
It ships out of the box with lots of components like Button, Modal, Alerts, Form and a host of other useful UI components to make development easy.
Reactstrap does not include support for innate Bootstrap Css Javascript files but provides the necessary props to handle dynamic functions.

Is Reactstrap the same as Bootstrap?

No, Reactstrap and Bootstrap CSS are two different UI libraries. Reactstrap is a component library made exclusively for ReactJs while Bootstrap is a popular CSS framework for building and designing websites.

It relies heavily on Javascript which manipulates the DOM to trigger component functionalities.

Although Reactstrap makes use of Bootstrap CSS classes behind the scenes for its components, it abstracts these classes and provides appropriate props that you can use to make components dynamic.

Difference between Reactstrap and React Bootstrap

Reactstrap	React Bootstrap
It is a component library for Reactjs	It is a library that provides a set of reusable React components based on Bootstrap CSS framework
Created 7 years ago	Created 9 years ago
Has less downloads	Has more downloads
Has over 10.4k stars on github	Has over 21.2k stars on Github

Which is better Reactstrap or react-Bootstrap?

Both Reactstrap and react-Bootstrap are great component libraries with lots of pre-built bootstrap-based components that you can start using rapidly in your react applications.

Choosing between the two will be kind of subjective to the developer. Reactstrap is easy to use and customize. It also gets frequent updates and a large community of maintainers.
Reactstrap is an excellent option if you’re looking for a quick way to add Bootstrap components to your React app.

React Bootstrap on the other hand has been in the business for quite longer than reactstrap so it's logical that it would garner more popularity than Reactstrap with over 21k stars and 400+ contributors. To learn more about React Bootstrap, you can watch this video by Adrain.

Setting up a React App using NPM and Yarn

Let's create react app by going to a directory on your computer and typing:

mkdir reactstrap-app

Then go into the directory

cd reactstrap-app

If you are using npm, run:

npx create-react-app .

The "." ensures that the react app is created inside the folder which you just created.

For Yarn use:

yarn create react-app .

For the sake of this tutorial, I will be making use of yarn because it's a bit faster than npm for me.

After creating a react app, you should have the below folder structure. You will also notice that react dom and react were installed automatically. You can view this on the package.json file.

Adding Reactstrap library in React Project

Next, let's install reactstrap and bootstrap.

yarn add reactstrap bootstrap

Then run:

npm start

Or yarn start to start your React app.
Next, go to App.js and import bootstrap.min.css to the top of the file

import 'bootstrap/dist/css/bootstrap.min.css';

Alternatively, you can add the bootstrap css framework using a CDN by going to the public folder and locating your index.html file.

Paste the following at the beginning of the file.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"/>

Great, now go back to App.js and create your first reactstrap component.

First, import the button component from reactstrap.

import { Button } from 'reactstrap';

Then add it to the App component.

export default function App() {
  return (
    <div>
      <Button> Hello World </Button>
    </div>
  );
}

So your App.js should look like so.

import React from 'react';
import './style.css';
import { Button } from 'reactstrap';

export default function App() {
  return (
    <div>
      <Button> Hello World </Button>
    </div>
  );
}

Building a button counter app

Let's dive into Reactstrap by building out a simple button counter app. The button counter app should look and function like the below after we are through with it.

We will be needing a couple of components that reactstrap comes with like Button, Container, Row and Col.

Go ahead and import them like so.

import { Button, Container, Row, Col } from 'reactstrap';

We also be needing to use hooks to set and update our counter variable, so go ahead and do this.

import React, { useState } from 'react';

We will set up a useState hook that sets a counter variable and updates it if a button is clicked. Notice that the initial value of counter is set to 0.

const [counter, setCounter] = useState(0);

Next, add the below code to your App component.

 return (
    <div>
      <Container className="bg-light py-4 mt-4">
        <Row className="text-center">
          <Col className="mb-1" xs="12">
            The current count is: {counter}
          </Col>
          <Col xs="12">
            <Button> Click me </Button>
          </Col>
        </Row>
      </Container>
    </div>
  );

Here, we are basically using the reactstrap Container component to hold our UI while adding a couple of bootstrap CSS utility classes like paddings and margins. We also centre-aligned the contents of the Row component so everything gets centered neatly.

A quick reminder that you can be able to apply bootstrap CSS class names directly on reactstrap components since reactstrap uses Bootstrap styles behind the scenes.
Here is a cheat sheet containing almost all bootstrap classes. You can use this as a reference file to quickly look up specific styles and class names to style your components however you deem fit.

Great, now lets create a function to handle when we click the button.

  const handleClick = () => {
    setCounter(() => counter + 1);
  };

Here, we are updating the setCounter method to an increment of counter variable.

Next, let's hook it up to the button.

<Button onClick={handleClick}> Click me </Button>

And we are done with it. Here is the full code below.

import React, { useState } from 'react';
import './style.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Container, Row, Col } from 'reactstrap';

export default function App() {
  const [counter, setCounter] = useState(0);

  const handleClick = () => {
    setCounter(() => counter + 1);
  };

  return (
    <div>
      <Container className="bg-light py-4 mt-4">
        <Row className="text-center">
          <Col className="mb-1" xs="12">
            The current count is: {counter}
          </Col>
          <Col xs="12">
            <Button onClick={handleClick}> Click me </Button>
          </Col>
        </Row>
      </Container>
    </div>
  );
}

Building a basic blog web app with the Reactstrap component library

From the above sample, we learnt how to use some basic components like Button, Col, Container and so on. Let's take it a little further and cover some other useful components by building a simple news or blog web application with reactstrap.

We will be using Rapid API to get all the news data that we will need and render them using react.

Rapid API is a web service that offers more than 10,000 APIs covering several niches and ecosystems such as Travel, Covid-19 stats, Sports, Movies, Entertainment and so on.

We will be using one of their news API to build this app. So go ahead and visit the website using this link. You can sign up using Google, GitHub or Facebook accounts if you are currently signed in to any of those.

Next, go to the search bar at the top and type "Crypto News Live". This will be the API service we will be using to build a news reactstrap app.

You will be needing to subscribe to the API service to get access. There is a freemium plan that you can use. The only limitation is that there is a cap on the amount of requests you can make to the API.

This usually differs from one API service provider to another. For the most part, the basic version will be enough for this little project.

Click on subscribe to get access to call the API.
Head back to the endpoints tab. Here you can see all endpoints that is available for use and the necessary API keys that are auto generated for you.
You can hit the test endpoints button to test the response gotten from making a request to the API.
On the far right are already-made code snippets for virtually the most popular languages like JavaScript, Java, Go, Python e.t.c

Building the navigation

Also, create a component folder on your root folder. This will be where we will store all the necessary components relevant to this app.
You can use the command line to quickly do this by using:

mkdir components
cd components

Let's add a reactstrap navigation bar to give our app a decent look and feel. Copy and paste the code below.

import React, { useState } from 'react';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
} from 'reactstrap';

const Navigation = (args) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    <div>
      <Navbar {...args}>
        <NavbarBrand href="/">Newsly</NavbarBrand>
        <NavbarToggler onClick={toggle} style={{ fontSize: 16 }} />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="me-auto" navbar>
            <NavItem>
              <NavLink href="/latest">Latest</NavLink>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
};

export default Navigation;

We are doing a couple of things here, and if you are conversant with the Bootstrap css framework some of these names may sound familiar to you. The Navbar brand component works like the Bootstrap CSS navbar-brand class. This is where you insert your company, project or application's name. In our own case, we will call it Newsly.

The NavbarToggler component is used to trigger the show and hide functionality of the navigation. We added a font-size of 16 to reduce the size of the button that comes out of the box with it.

Lastly, the Collapse component is used to show or hide the nav items depending on the current state isOpen.

Adding a Loading indicator with reactstrap

Like Bootstrap Css, reactstrap component library contains lots useful components like Spinners that can help indicate the state of the project.

Go to your components folder and create a new file named Loader.js and add the below code.

import React from 'react';
import { Spinner } from 'reactstrap';

const Loader = () => {
  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
      }}
    >
      <Spinner
        color="primary"
        style={{
          height: '3rem',
          width: '3rem',
        }}
      ></Spinner>
    </div>
  );
};

export default Loader;

We are simply importing the Spinner Component from reactstrap and adding some css to justify it to the centre of the screen.

Adding a NewsCard

Next, lets build a news card to show all the recent news from the API.

import React from 'react';
import { Card, CardBody, CardTitle, Button, CardText } from 'reactstrap';

const NewsCard = (props) => {
  return (
    <Card
      color="light"
      style={{
        width: '18rem',
      }}
    >
      <img
        alt="A random image"
        src= {props.image}
      />
      <CardBody>
        <CardTitle tag="h6">{props.title.substr(0, 55)}...</CardTitle>
        <CardText>
          This news was curated from <a href={props.source}>{props.source}</a>
        </CardText>
        <Button href={props.url}>Visit</Button>
      </CardBody>
    </Card>
  );
};

export default NewsCard;

Here we are importing the Card, CardBody, CardTitle, Button, CardText from reactstrap and adding a couple of styles to it to make it look decent.

{props.title.substr(0, 55)}

For the Card title, we are getting and displaying the first 55 characters so that the card will have a consistent title character number.

Building the Layout

We'll make use of the several layout components in reactstrap to build a responsive layout to render our card.

We will import all the necessary components that we will needing, both the Loader and NewsCard components that we created before.

import React, { useState, useEffect } from 'react';
import { Row, Col, Container } from 'reactstrap';
import NewsCard from './NewsCard';
import Loader from './Loader';

Then create the Layout component and render the news card for now. We also create a placeholder image gotten from pixabay to serve as the CardImage.

const Layout = () => {
  const [newsData, setNewsData] = useState();
    const img =
    'https://cdn.pixabay.com/photo/2022/09/24/15/39/rocks-7476616_960_720.jpg';
  return (
    <>
    <NewsCard />
    </>
  );
};
export default Layout;

Next, lets fetch the news API data from Rapid API. You can copy and paste the code snippet from the Endpoints tab.

  const fetchApi = () => {
    const options = {
      method: 'GET',
      headers: {
        'X-RapidAPI-Key': 'your key',
        'X-RapidAPI-Host': 'crypto-news-live3.p.rapidapi.com',
      },
    };

    fetch('https://crypto-news-live3.p.rapidapi.com/news', options)
      .then((response) => response.json())
      .then((data) => {
    console.log(data)
        setNewsData(data);
      })
      .catch((err) => console.error(err));
  };

We just made a basic GET request to the endpoint with fetch api, retrieved the data, console logged it, and add it to a state.

Next, lets add a useEffect to fetch data and after any updates.

 useEffect(() => {
    fetchApi();
  }, []);

Then add the content layout for the app main body.

  return (
    <>
      {newsData ? (
        <Container>
          <Row>
            {newsData?.slice(0, 12).map((news, index) => (
              <Col
                sm="12"
                lg="4"
                md="6"
                key={index}
              >
                <NewsCard
                  title={news.title}
                  source={news.source}
                  url={news.url}
                  image={undefined ?? img}
                />
              </Col>
            ))}
          </Row>
        </Container>
      ) : (
        <Loader />
      )}
    </>

We are simply mapping through the first 12 data elements from the API and passing each value of the news data object as a prop to the newscard. The Container component adds some paddings and margins to our overall layout.

The loader component will be shown if newData variable is not yet updated.

The complete code looks like this:

import React, { useState, useEffect } from 'react';
import { Row, Col, Container } from 'reactstrap';
import NewsCard from './NewsCard';
import Loader from './Loader';

const Layout = () => {
  const [newsData, setNewsData] = useState();
  const img =
    'https://cdn.pixabay.com/photo/2022/09/24/15/39/rocks-7476616_960_720.jpg';

  useEffect(() => {
    fetchApi();
  }, []);

  console.log(newsData?.[2]);
  const fetchApi = () => {
    const options = {
      method: 'GET',
      headers: {
        'X-RapidAPI-Key': 'your key',
        'X-RapidAPI-Host': 'crypto-news-live3.p.rapidapi.com',
      },
    };

    fetch('https://crypto-news-live3.p.rapidapi.com/news', options)
      .then((response) => response.json())
      .then((data) => {
        setNewsData(data);
      })
      .catch((err) => console.error(err));
  };
  // fetchApi()

  return (
    <>
      {newsData ? (
        <Container>
          <Row>
            {newsData?.slice(0, 12).map((news, index) => (
              <Col
                sm="12"
                lg="4"
                md="6"
                key={index}
              >
                <NewsCard
                  title={news.title}
                  source={news.source}
                  url={news.url}
                  image={undefined ?? img}
                />
              </Col>
            ))}
          </Row>
        </Container>
      ) : (
        <Loader />
      )}
    </>
  );
};
export default Layout;

PS: It is not recommended to leave API keys on your Layout.js file. It is pertinent that you use dotenv a javascript package to handle sensitive data such as API keys. You can read more on this here.

Don't also forget to add .env to your gitignore files when pushing to a remote repository like Github.

Now go to your src > App.js and import the Navigation and Layout components. You can comment out the counter app code that we built earlier.

import Layout from './components/Layout';
import Navigation from './components/Navigation';

Then render the components.

 return (
    <div>
      <Navigation />
      <Layout />
      {/* <Container className="bg-light py-4 mt-4">
        <Row className="text-center">
          <Col className="mb-1" xs="12">
            The current count is: {counter}
          </Col>
          <Col xs="12">
            <Button onClick={handleClick}> Click me </Button>
          </Col>
        </Row>
      </Container> */}
    </div>
  );

Adding responsiveness

Lets add some margin and responsiveness to the reactstrap app.

Go to the styles.css and add the below code.

h1,
p {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.container {
  margin-top: 40px;
}
div.col-lg-4 {
  margin-bottom: 10px;
}
@media only screen and (max-width: 768px) {
  div.col-md-6 {
    margin-bottom: 10px;
  }
  div.card {
    margin: auto;
  }
}

Don't forget to add your styles to scr > app.js

import './style.css';

Conclusion

Great, we were finally able to make use of the plethora of reactstrap components like Spinner, Button, Layout and a host of others. There are more to it as this is just a tip of the iceberg. I recommend you go through reactstrap official documentation to get a feel of the numerous other UIs that they provide.

How to Force/Bypass Screenshot Restrictions on Android With ScrCpy

Sixtus Anyanwu — Sat, 08 Oct 2022 22:05:24 +0000

The freedom to customize Android anyway you want is a big reason why so many people like it over other mobile operating systems. Android allows you to personalize your phone down to the smallest details, install any app, and change the way it looks and acts.

But still, there are some apps that disable screenshots due to one reason or the other. In this article, I am going to show you to bypass such restrictions using a tool known as scrcpy.

PreRequisites

Windows 10 (Any Windows version should work)
GitBash ( You can use Command Line, but I prefer gitbash)
Android 5.0 and Up
Enabled Andriod Debug Mode( You can find out more on how to do this here.

Table of Contents

Introduction
Prerequisite
Download Scrcpy
Set up your Android Phone
Casting your screen
Other Useful tips
Conclusion

Download Scrcpy

Scrcpy is an open-source software that enables users to display and control Android devices when they are linked to a computer either over USB or TCP/IP. It is not necessary to have root access in any way.
Windows: Head over to this link to download scrcpy executable file.
Linux/Termux: Run apt install scrcpy
MacOs: Run brew install scrcpy on your terminal.

Once you have downloaded the file. Go ahead and unzip it.
You should see the scrcpy executable file.

Inside the folder, right click on an empty space inside file explorer and click on "Git Bash Here"

Set up your Android Phone

Get a USB cable and connect your phone to your PC.

Remember that you need to have unlocked Developer mode and enabled USB Debugging mode on your phone. The steps to this varies according to phone models so use this official guide from Google to know how to enable it.

Casting your phone screen

On the terminal type: ./scrcpy.exe -m 1024

The -m flag means a max resolution of 1024p, this is actually the best for most cases. Anything else and Scrcpy might complain and spit a couple of errors.

Typing the above might display a one time prompt to allow access from your PC to your phone.
Click on "accept" and and a new window will pop up with a screen of your phone interface.

You can open all the apps that disabled screenshot on your phone and use a screenshot tool like snipping tool for windows to screenshot whatever information that you need.

Other Useful tips

Recording Videos

You can also record your phone screen from scrcpy by typing:
./scrcpy.exe -r nameOfVideo.mp4 -m 1024

Change "nameOfVideo" to your preferred file name for the recorded video.
To stop recording, just close the capture window and your video will be automatically saved on the root directory of the unzipped scrcpy.

Heads up: The video does not come with audio for some reasons.

Transferring Files

You can transfer files to your phone by simply dragging the file and dropping it on the window. Once the transfer is complete, you get notified on the terminal with the location of the file.

Conclusion

There are other ways to bypass this process like using Android ADB but that will require huge downloads from your end. Scrcpy does almost the same thing with a lighter file size.

Creating and Deploying a Pizza Vending Machine Smart Contract in Solidity

Sixtus Anyanwu — Thu, 07 Jul 2022 12:58:21 +0000

Introduction

Welcome to another Solidity tutorial where you are going to learn how to create a vending machine smart contract with Solidity.

In this article, you are going to learn how to use mappings, and events, receive ether through a function call, using function modifiers, and how to use the address of a smart contract.

Basically, we are creating a contract where a user can be able to purchase a pizza from the contract by sending in ether. An event log will be emitted for every purchase.
It will have a restock function to add more pizzas and some others that you will see as we build through this.

Requirements

For this tutorial, we will be using Solidity version 0.8.0 and Remix Ethereum as our online IDE.
So if you want to follow along, then these are the tools you will need.

Introduction
Requirements
Setting Up
Writing the smart contract
Let's create the contract state variables.
Creating the constructor
Retrieving the amount of pizza in the vending machine.
Purchasing Pizzas.
Adding modifiers
Restocking the pizza
Getting the total amount of ether made from selling pizzas
Checking the amount of pizza at an address.
Deploying the Contract
Another functionality to add (Todo)
Conclusion

Setting Up

To get started with development, you need to go to the Remix website.

You should see a page that looks like this.

Once here, create a new file and name it “VendingMachine.sol”.
On the left, locate the compiler icon and switch your Ethereum compiler to 0.8.0 if you haven’t so we can be able to compile it.

Writing the smart contract

Open up the file and add the following lines

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

Here we are telling the solidity compiler which type of license we are setting up our source code. There are a variety of these licenses but if you want to make your source code open-sourced, replace "MIT" with “UNLICENSED”. Here is a link to all the supported licenses

License identifiers are added to your contract bytecode during compilation.

Let's create the contract state variables.

contract VendingMachine{
    address public owner;
    mapping(address => uint) public pizzaBalances;
    uint public constant DECIMAL = 10 ** 18;
    event Purchase(address _sender, uint _amount, uint _value);

}

Here we are declaring and initializing some state variables to hold the owner of the contract, a mapping that tracks each address to the amount of pizza that they have, a constant integer, and an event that gets emitted once some address purchases a pizza.

Notice that the variables are set to public?
This means that these variables can be accessible to anyone outside of the contract. They can call these variables to retrieve their value.

Creating the constructor

Let's add a constructor to set the state variable address owner to the current deployer of the smart contract.

contract VendingMachine{
     …
    constructor(){
        owner = msg.sender;
        pizzaBalances[address(this)] = 100;
    }
}

We also initialized the total amount of pizzas for the contract address to be 100.

address(this) is the address of the smart contract. Every smart contract that is deployed comes with a contract address. This should not be confused with the deployer address which was set to owner.

Let's create our first function to retrieve the number of pizzas stored in the vending machine contract.

Retrieving the amount of pizza in the vending machine.

function getVendingMachineBalance() external view returns(uint){
        // Get the amount of pizza in the vending machine
        return pizzaBalances[address(this)];
    }

Remember that we mapped the contract's address to an integer value of 100?
This function basically gets it and returns it back to the caller.

Purchasing Pizzas.

Now, let's create a function to purchase some pizzas from the machine.

 function purchase(uint _amount) public payable{
        require(pizzaBalances[address(this)] >= _amount, "Not enough pizzas in stock");
        require(msg.value == _amount * (2 * DECIMAL), "Each pizza is worth 2 ethers, insufficient funds");
        pizzaBalances[address(this)] -= _amount;
        pizzaBalances[msg.sender] += _amount;
        emit Purchase(msg.sender, _amount, msg.value);
    }

Here, we are making the function payable so that the contract can be able to receive ether through the function. If you want your whole contract to be able to receive ether consider using the receive or fallback function.

Next, we do a couple of validations using the require function.
We want to ensure that there is enough pizza in stock and we also want to set a price of 2 ethers for one pizza.

So if you want to buy 4 pizzas, the amount you pay is 4 * 2 = 8 ether. Remember that this contract uses wei as the default unit.

Note: 1 ether = 1 * 10 ^ 18 wei

Once the validation goes through, we want to decrease the number of pizzas in the contract address and increase the amount of pizza in the address of the function caller.

Lastly, we emit an event showing the purchaser's address, the amount of pizza, and the value of the pizza.

Adding modifiers

Function modifiers, as the name suggests, modifies the flow of a function. Add the following code.

modifier validateAmount(uint _amount){
        require(_amount > 0, "Amount needs to be greater than 0");
        require((pizzaBalances[address(this)] + _amount) <= 100, "The total supply of pizzas is 100");
        _;
    }
    modifier onlyOwner(){
        require(msg.sender == owner, "Only the owner can call this function");
        _;
    }

Here we are creating two modifiers and the first modifier is used to achieve two things:

To ensure that the amount passed is greater than 0 (You can’t restock 0 goods to your store can you? ).
To ensure that the total number of pizzas in stock is not greater than 100. Our vending machine low-key can only contain 100 pizzas so anything over 100 will revert.

The second modifier(onlyOwner) ensures that only the owner can restock the vending machine.

Restocking the pizza

Add the following code to your smart contract.

function restock(uint _amount) public validateAmount(_amount) onlyOwner {
        // Restock pizzas.
        pizzaBalances[address(this)] += _amount;
}

Notice that we have validateAmount(_amount) onlyOwner on the function head?

These are called function modifiers. We basically use them to modify the flow of a function. It's common use case is for validation of a value before the function body is executed.
After the validations have passed, we increment the amount of the pizza to the amount passed in.

Getting the total amount of ether made from selling pizzas

Add the below code to your file.

 function getContractBalance() external view returns(uint){
        // Returns the amount of pizzas of an address
        return address(this).balance;
    }

Here we are getting the total amount of ether that we have made from selling our pizzas. Ethers sent into a contract are stored at the address(this).balance.

Checking the amount of pizza at an address.

Add the following lines of code.

function getAddressBalance(address _addr) external view returns(uint){
        // Returns the amount of pizzas of an address
        return pizzaBalances[_addr];
    }

Here we are passing in an address as a parameter and getting the uint value from the pizzaBalances mapping.

Deploying the Contract

To deploy your contract:

Head over to the deploy icon on the left and click on deploy.

Set the environment to “Javascript Vm” and choose a wallet from the provided list.
Remember to compile the contract first. Set the compiler to auto compile so that you won’t have to worry about compilation.

Use the text fields to test out your contract.

The whole code in your file should match this:

// SPDX-License-Identifier: MIT

pragma solidity ^0.8.0;

contract VendingMachine{
    address public owner;
    mapping(address => uint) public pizzaBalances;
    uint public constant DECIMAL = 10 ** 18;
    event Purchase(address _sender, uint _amount, uint _value);

    constructor(){
        owner = msg.sender;
        pizzaBalances[address(this)] = 100;
    }
    function getVendingMachineBalance() external view returns(uint){
        // Get amount of pizzas in vending machine
        return pizzaBalances[address(this)];
    }
    function getAddressBalance(address _addr) external view returns(uint){
        // Returns amount of pizzas of an address
        return pizzaBalances[_addr];
    }
     function getContractBalance() external view returns(uint){
        // Returns amount of pizzas of an address
        return address(this).balance;
    }
    function restock(uint _amount) public validateAmount(_amount) onlyOwner {
        // Restock pizzas.
        pizzaBalances[address(this)] += _amount;
    } 
    function purchase(uint _amount) public payable{
        require(pizzaBalances[address(this)] >= _amount, "Not enough pizzas in stock");
        require(msg.value == _amount * (2 * DECIMAL), "Each pizza is worth 2 ethers, insuffiicient funds");
        pizzaBalances[address(this)] -= _amount;
        pizzaBalances[msg.sender] += _amount;
        emit Purchase(msg.sender, _amount, msg.value);
    }
    modifier validateAmount(uint _amount){
        require(_amount > 0, "Amount needs to be greater than 0");
        require((pizzaBalances[address(this)] + _amount) <= 100, "The total supply of pizzas is 100");
        _;
    }
    modifier onlyOwner(){
        require(msg.sender == owner, "Only the owner can call this function");
        _;
    }
}

Another functionality to add (Todo)

Try adding a function that withdraws all the ether sent into the contract to the owner's address.

Tip: Use owner.transfer(address(this).balance) to transfer all the ethers on the wallet to the owner. Remember to modify the owner state variable with a payable keyword.

Conclusion

Congratulations, you were able to learn how to build a vending machine smart contract. You can add more functionalities to this to extend it or deploy to any of the Ethereum test net using Injected Web3.

If you want me to build a DApp around this with Reactjs, Ethers, Hardhat and deploy it to an Alchemy Ropsten testnet node, simply like and follow me so you will get notified once I create it.

If you got value from this, kindly follow me on Twitter, and GitHub.

Cover Image: Freepik

Solidity Tutorial: How to build and deploy a smart contract to send Ether from one account to another

Sixtus Anyanwu — Fri, 22 Apr 2022 13:53:00 +0000

Before we jump right in, I wrote an in-depth tutorial on how to deploy a smart contract to Rinkeby testnet, you can go read it up.

So let's goooo!!

Below are the table of contents.

Intro

What tools do we need?

Writing a smart contract.

Compiling and deploying to the JavaScript VM.

Testing the smart contract.

Intro

Oi, so here we going to be building a smart contract that can be able to send funds(ether) from one Ethereum account/address to another. Also, we will be adding a feature that allows only the owner(deployer) of the contract to be able to send these funds(ether).

What tools do we need?

The tools we will be needing for this tutorial is nothing other than the remix Ethereum web IDE for quick and rapid development and deployment of smart contracts written in Solidity.

You don't need to know anything about solidity or smart contracts in order to follow up with this tutorial as this is beginner friendly, and I try my best to explain every line of code as I write them.

Writing a smart contract

In order to get started, you have to jump over to this website known as Remix Ethereum. The below is a screenshot of the interface of a website you might get some annoying pop-ups so just hit the decline or accept button to get in.

Once we are here, head over to the left sidebar and locate the file icon. Click on it and it should pull up a makeshift file manager.
Locate the contract folder and click on it.

Just right above the contract folder you should see a file icon at the very top just beside the folder icon.

Click on it and it should generate a fresh file which you can name anything. But in this case, I'm going to name it sendEther.sol

Great, now let's get started with the good stuff.

Write the below on the first line of your solidity file.

// SPDX-License-Identifier: MIT

This tells the Solidity compiler that we are using the MIT license for this program.
SPDX means "Software Package Data Exchange" an open standard for software bill of materials.
SPDX allows the expression of components, licenses, copyrights, security references and other metadata relating to software.
You can read more about this here.

Next, let's define the version of Solidity we are going to use by writing the below.

pragma solidity ^0.8.11;

This tells the compiler that we are going to be using the 0.8.11 and above version of Solidity.
Ps: Solidity is a strongly typed compiled language so the semi colons are necessary.

Let's write a smart contract by using the Contract keyword like below.

contract SendEth{}

This is kind of the entry point where you can start writing out the functionalities, related state variables and logic of your contract. It's kind of conventional to capitalize the contract identifier. It can be any name you want, doesn't matter.

This smart contract is going to be needing two state variables named amount (for holding the amount to be sent) and the owner address.

Write the below inside your already defined contract body.

uint public amount;
address payable owner;

Solidity just like other languages have datatypes and uint is one of them. It actually means unsigned integer (no negatives say -20,nah we don't do that here)

Some other Solidity datatypes include bool, struct, mapping, string, address…

address payable owner;

Since we are sending ether from our Ethereum address we need to add the "payable" keyword right before our identifier.

Now, let's write the constructor just below our state variables.

constructor () {
     owner = payable(msg.sender); // set the deployer of contract as the owner
   }

The constructor allows us to define some logic to be set during the deployment of our smart contract. Let's say for example you want instantiate say a name variable during deployment, you do that in the constructor.

owner = payable(msg.sender);

Here, we are calling the owner address that we declared as a state variable and assigning it to msg.sender. Then we cast the msg.sender as a payable address.
msg.sender is kind of a global variable that you get access to in your contract and in this case, it holds the payable (can receive ether) address of the person who deployed the contract.

This might be confusing tho, I will clear the air once we get to the deployment stage so you can see it for yourself.

Your file right now should contain the below.

// SPDX-License-Identifier: MIT

pragma solidity ^0.8.11;

contract SendEth {
   uint public amount;
   address payable owner;
   constructor (){
     owner = payable(msg.sender); // set the deployer of contract as the owner
   }
}

Next, let's write a function to enable us send Ether to any address.

function sendEth(address payable receiver) payable public{
     }

Here we are declaring a function with name of sendEth **and a parameter of a **payable address. Any address sent in to this function should be able to receive funds (payable).
Also, since the function allows one to be able to send ether to another account we need to add the payable keyword to it.
The *public * keyword ensures that this function is able to seen and be called anywhere within the smart contract.

Now, add the below statement into the function body.

require(owner == msg.sender, "Only the owner can send funds");
amount = msg.value;
receiver.transfer(amount);

The first line ensures that only the owner of the contract who deployed it can be able to call this function. That means an outsider with a different Ethereum address can't send funds by calling this function.

amount = msg.value;

Here, we are setting the value the owner of the contract sent to the variable amount.

msg.value is another global variable that is available to you.

receiver.transfer(amount);

Then we send the ether to the address passed into the function as an argument using the transfer() function.

And that's it!! Your whole code should be like this below.


// SPDX-License-Identifier: MIT

pragma solidity ^0.8.11;

contract Sender {
   uint public amount;
   address payable owner;

   constructor (){
     owner = payable(msg.sender); // set the deployer of contract as the owner
   }
   function sendEth(address payable receiver) payable public{
     require(owner == msg.sender, "Only the owner can send funds");
     amount = msg.value;
     receiver.transfer(amount);
}
}

Now, it's time to deploy.
Go to the left of your sidebar and click on the solidity icon.
You should see the below.

If the compiler version is not on the version you wrote your contract in, you can change it here by switching to your preferred compiler.

Also, check the auto compile button so it auto compiles your code.
Click the "compile" button to compile it.

Deploying.

Cool, now we are going to deploy the contract on the JavaScript VM. This is a makeshift in-memory blockchain that remix avails us with.

Click the icon below the compile one and you should get the screen below.

Once here there are couple of things to do:

Leave the environment as JavaScript VM.
Select the eth account that you want to deploy the contract with. The first eth account is good enough.
Leave the gas fees and stuff as is.(Submit to the process)

Finally, click on the red deploy button.
If you see this green light in the console, then it was successful.

Phew!! You can beat your chest right now and change your Twitter bio to "Smart Contract/Blockchain developer"

Testing the smart contract

Scroll down below and you should see some text that says "Deployed contract"
Expand the accordion and you should see two buttons. The "sendEth" function and "amount" variable we created.

Now go up to the account dropdown and switch to a new account(Seecond eth address).
Copy the account address by clicking on the copy icon beside it.

Change back to the account which you deployed your contract with. In my case, it was the first account.

NOTE: It is pertinent that you use the same Eth account that you used to deploy or else it won't work. Remember the require() that we added to the top of the **sendEth **function? Yo, you do.

Copy the account address (second address) and paste into the sendEth textfield.
On the "Value" dropdown change the 0 to any number of your choice and change the "wei" to "ether".
Scroll down and smash the sendEth button.

Bam!! You just sent ether to another eth address.

Check the other account where you copied the address and it should increment by the amount of ether you sent in.

Now switch the account to a new one and try sending some eth to it. You will encounter an error that says "Only the owner of the contract can send funds" (Its our handwork o.)

And there you have it, you were able to write a smart contract that can send ether to a different account and learnt the basics of solidity while at it.

You might be asking "Is it because of this 7 lines of code that you wrote this term paper of an article?"

Well, I assumed you had no prior knowledge of Solidity so I tried to explain every line of code to avoid any confusion.

You can follow me on GitHub I want to see what projects you are working on.

Sayonara...

Writing and Deploying A Solidity Smart Contract to Rinkeby Test Network

Sixtus Anyanwu — Wed, 09 Mar 2022 00:57:34 +0000

Yooooo!! Here, I am going to show you how to write, compile and deploy a solidity smart contract on the Rinkeby Test Network. So lets go!!

Watch the video version on Vimeo >>> here
Table of contents

What is a smart contract?
What is solidity and its uses?
What is the best online solidity IDE?
Writing and Compiling a smart contract.
Deploying a smart contract.
Installing Metamask
How to get some Ethereum for the Rinkeby test network
Deploying to Rinkeby test network using Injected Web 3

What is a smart contract?

A smart contract is a computer program or transaction protocol that is designed to automate the execution, control, and documentation of legally significant events and activities in accordance with the conditions of a contract or agreement.

The decrease of the need for trusted intermediaries, arbitration and enforcement costs, fraud losses, and purposeful and inadvertent exceptions are all goals of smart contracts.

Smart contracts eliminate the requirement for a centralized system, legal system, or external enforcement mechanism to carry out trustworthy trades and agreements between distant, anonymous participants.

What is solidity and its uses?

Solidity is an object-oriented programming language designed exclusively for building and developing smart contracts on Blockchain systems by the Ethereum Network team.
It's used to establish smart contracts in the blockchain system that apply business logic and produce a sequence of transaction records.

Solidity is a programming language that allows you to write machine-level code and compile it on the Ethereum Virtual Machine (EVM).

It is comparable to C and C++ in many ways and is relatively easy to learn and understand. A "main" in C, for example, is identical to a "contract" in Solidity.

What is the best online solidity IDE?

The best online solidity IDE can be found here. A remix Ethereum IDE with lots of cool features.

It is an IDE offered by remix that allows you to write, and smart contracts on the solidity programming language. It has a couple of functionalities which includes basic file explorer, ability to create new file, folders, an inbuilt compiler and a functionality to deploy your smart contracts.

Writing and Compiling a smart contract

To create a solidity file, go to the file explorer and click on it. This should load a couple of predefined files. Click the contracts folder and hit the file icon on the top to create a solidity file.
Name it anything of your choice in my case I used "ContractTus.sol"

Inside of your newly created solidity file, copy and paste the below code.

//SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.7;

contract HelloWorld{
    string greeting;

    constructor(string memory _greeting) {
        greeting = _greeting;
    }
    function getGreeting() public view returns (string memory){
        return greeting;
    }
    function setGreet(string memory _greeting) public {
        // string memory greet = _greeting;
        greeting = _greeting;
    }
}

//SPDX-License-Identifier: UNLICENSED
Here we are adding a commented license, its is necessary you add this else solidity compiler will complain.

pragma solidity ^0.8.7;

Here we are telling the compiler "Yo man, I am going to be using version 0.8.7 or higher for writing this smart contract. So you better know whats up. I won't say this again. Ya' heard?"

contract HelloWorld{...}

Here, we are creating a basic smart contract, think of this as a class in any programming language say Java or Python.

constructor(string memory _greeting) {
        greeting = _greeting;
    }

In this line, we are creating a constructor that gets called on deployment of this smart contract. We are passing a _greeting argument that will passed in during deployment to initialize the state variable greeting.

function getGreeting() public view returns (string memory){
        return greeting;
    }
    function setGreet(string memory _greeting) public {
        // string memory greet = _greeting;
        greeting = _greeting;
    }

Here we are creating two functions, the first function has a returns added to it to show that it actually returns a value. In this case greeting.

The second function is just a fancy function that takes in a string argument and sets that argument to the state variable.

Compiling your smart contract

Thanks to the remix Ethereum IDE, we can be able to compile our solidity code in the browser.

Locate the compile icon on the side bar to your left and click on it.
Ensure that your version tallies with the you used on your smart contract.
Set language to "Solidity" (You can still use Liquidity language... Kidding yo)
EVM version - Compiler Default.
You can also leave it at auto compile.
Then hit the *compile * button.

Great! You just wrote and compiled your first solidity smart contract. (It's time you build your own Binance clone yo. You're good. Allow we mortals to continue playing around with good old "padding-left: 2px")

Its time to deploy!!

Oi! Oi!! Hold up tiger... We will be using injected web 3 so go get your Metamask account.

Installing Metamask

Meta mask extension can be installed using the google chrome store here.

Install it, create an account, get your seed phrase, and then toggle on the show other networks option.

Yoo... We are making progress here.

How to get some Ethereum for the Rinkeby test network

To get some eth, first switch your account from Ethereum Main Network to Rinkeby network.

Once you do that hit the button with the weird zeros to copy your Rinkeby contract address.

Stop by this website https://rinkebyfaucet.com/

Paste your wierd zeros in there and hit the Send Me Eth button, (Yoo, you got to beg them to send you some eth, so be humble)

It usually takes a couple of seconds to get your 0.1 Eth

(We rich yo. Time to start pricing land in your village.)

Deploying to Rinkeby test network using Injected Web 3

Next, go back to your Remix Ethereum IDE and hit the deploy icon by your left, just beneath the compile icon on the side bar. you should see the below screen.

Now switch that from Javascript VM to Injected Web 3.
Leave the gas limit and every other thing as is and then type in a greeting on the provided text field ( Remember the constructor thingy? Damn, I knew you forgot! I need an Uzi somebody.)
Enter some greeting and hit the deploy button.
PS: Enter the text in quotes, "Oi!" like so.

A screen is going to appear and ask you to connect Metamask. Do that real quick.

The next screen is going to be a gas fee charge, just hit on approve and boom!!! You successfully deployed your smart contract to Rinkeby. (Drinks on me!)

You can view the transaction on EtherScan or whatever you want to do with it.

My name is Sparkle and I am signing out yo. Follow me for more of these step by step articles.

Difference between Web 2.0 and Web 3.0

Sixtus Anyanwu — Wed, 02 Mar 2022 17:07:23 +0000

Web 2.0 pertains to websites that emphasize user-generated content, usability, and interoperability for end users all over the world.
The participative social web is another name for Web 2.0. It does not refer to a change in a technical definition, but rather to a change in the way Web pages are built and used. The transition is advantageous, although it does not appear to be the case when the changes occur.
Web 2.0 allows users to interact and collaborate with one another in a social media dialogue as creators of user-generated content in a virtual community.
AJAX and JavaScript frameworks are among the web browser technologies that are employed in Web 2.0 development.

Where as, Web 3.0 is a catch-all term that encompasses a variety of web usage and interaction evolutions. Data isn't owned in this case; instead, it's shared, with multiple views for the same web / data being displayed by different services.
It involves the embedding intelligence throughout the web and deploying robots to make decisions on the user's behalf. It is concerned with the establishing a uniform standard for websites to express content so that any computer program can comprehend the semantic meaning given by the web page.

Ref: Blockgames, ZuriTeam, Nestcoin