Agora RTM test on Angular 11

We needed a new video chat application that will replace the existing XMPP server and found Agora.io as suitable substitute. While migrating from nodejs to Angular, I encountered some conversion issues for token generation.

Github Resourse: Tools/DynamicKey/AgoraDynamicKey/nodejs at master · AgoraIO/Tools · GitHub

Nodejs crypto:  crypto.createHmac is not a function

var encodeHMac = function (key, message) {

    return crypto.createHmac('sha256', key).update(message).digest();

};

solution:

var encodeHMac = function (key, message) {

    return crypto.HmacSHA256(message, key)

};

Error:  "TypeError: The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object. Received type object"

var AccessTokenContent = function (options) {

    options.pack = function () {

        var out = new ByteBuf();

        return out.putString(options.signature)

            .putUint32(options.crc_channel)

            .putUint32(options.crc_uid)

            .putString(options.m).pack();

    }

    return options;

}

solution:  

var AccessTokenContent = function (options) {

    options.pack = function () {

        var out = new ByteBuf();

        return out.putString(options.signature.words)

            .putUint32(options.crc_channel)

            .putUint32(options.crc_uid)

            .putString(options.m).pack();

    }

    return options;

}

 

Angular Basic HTTP Post & Get Tutorial

Data is everything in a web app. Now I'll show you how to do a basic http requests on Angular 11.

For this exercise, we'll use typicode's json placeholder for our data.

To make our lives easier, we will create a reusable service called "dataHTTPService" service wrapper class.

First, we need the HttpClientModule module imported and referenced in the app.module.ts.

import { HttpClientModule } from "@angular/common/http";

It will have these two functions get and post request.

public sendGetRequest(url: string) {

    return this.httpClient.get(url);

  }

  

  public sendPostRequest(url: string, body: any) {

    const _headers = new HttpHeaders().set("Content-Type", "");

    return this.httpClient.post(this.REST_API_SERVER + url, body);

  }

Let's use the photos get request URL so we can display a list of thumbnails for our example.

jsonplaceholder.typicode.com/photos

We can now fetch data in our app module's OnInit function:

ngOnInit(): void {

    this.ds

      .sendGetRequest("http://jsonplaceholder.typicode.com/photos")

      .subscribe((data: any) => {

        console.log(data[0]);

      });

  }

Now you'll see our list of thumbnails:

Play with the StackBlits code.

Buy me a cup of coffee :)

Angular 11 Custom Vertical Pagination on Scroll Tutorial

Working with Angular<ng> is fun but when displaying hundreds of feed items ala facebook the older mobile devices  can't handle it. Good thing there is a virtual scroller from the material CDK but it does not fit my needs. The experimental version is still buggy and jumpy at times.

Now I'll show you how to do virtual scrolling without using any third party library in Angular. It's a very simple solution and only involves a bit of coding.

Keep in mind the page items you want to display. For this exercise we need to display 20 feeds per page.

This line will determine if we loaded enough feeds so we can limit the number of feeds per next load and increment the <beginFeeds> variable accordingly.

if(this.pageLoad > this.beginFeeds + 40){

    this.beginFeeds += 20;

}

If the <pageLoad> is more than 40 items than the <beginFeeds>, it should increment 20 items for the <beginFeeds> variable.

We set the scroll event listener so when our button element's top is above the viewport it will call the feed loader.

ngOnInit(){

    window.addEventListener('scroll', eScroll, false);

}

This line will set the feeds hidden variable to true so we can check it on an *ngIf compare and hide our div

for(i=0; i < this.feeds.length; i++){

        

    this.feeds[i].hidden = true;

    if(i < this.beginFeeds){

        this.feeds[i].hidden = false;

    }

}

This line increments the <pageLoad> variable for the next data fetch.

this.pageLoad += 20;

If we keep loading data it will only show non-hidden items and free some precious resources.

What if the user scrolls to the beginning? Don't worry my friend. We got it handled.

loadLess = () => {

    

    if(this.beginFeeds - 20 < 0 ) return;

    let start = this.beginFeeds - 20;

    let end = this.beginFeeds + 40; 

    for(var i=0; i < this.feeds.length; i++){

        this.feeds[i].hidden = true; //hide all feeds

    }

    for(i=start; i < end; i++){

        

        this.feeds[i].hidden = false; //unhide feeds in range

    }

}

This line will check if our <beginFeeds> variable is greater than zero and get out if it is.

if(this.beginFeeds - 20 < 0 ) return;

Set our beginfeeds to decrement 20 items.

 let start = this.beginFeeds - 20;

Set the range to <beginFeeds> plus 40 items.

let end = this.beginFeeds + 40; 

Loop through the feeds and set feed items inside the range its hidden variable to false so it will show on the page. Then we'll employ Angular's last item check after its done the *ngFor loop and call our special function to seamlessly scroll back to the feed we are in.

    

for(var i=0; i < this.feeds.length; i++){

     this.feeds[i].hidden = true; //hide all feeds

}

for(i=start; i < end; i++){

        

    this.feeds[i].hidden = false; //unhide feeds in range

}

That's it! that will get you a fairly decent vertical scroll pagination on scroll. 

Here's the StackBlitz

Buy me a cup of coffee :)

Building a native Android and iOS app with Flutter

It's been years since I touched app development again for the reason of me focusing mainly on web development of the entirety of  my career. I am a little bit rusty but things seems promising. My current job is at a company that maintains its own Application on web, iOS and Android and I see the gory details every single day. 

Flutter has been popping up on my newsfeed  and it seems an interesting platform since it can do web, iOS and Android app in one go natively. Yes natively. The web part is at beta stage as of writing though but it's not a big deal. 

So I've been thinking of a way to learn flutter and this is by building my own app which is a simple app that I think will be helpful for ordinary folks in their everyday lives.

What you need:

1. A decent computer that has enough ram for debugging.
2. Flutter installer for your OS
3. Android Studio for the SDK
4. An IDE of your choice.
5. Android/iOs Emulator or an actual device

First install Flutter then followed by Android Studio then your IDE. If all goes well you can now follow flutter's getting started tutorial which is explained in great detail.

I will try to write most of my journey on flutter development. Happy Coding!

Solving Bluetooth Device Problem on Ubuntu 17.04

I have an Asus SonicMaster laptop that runs the new Ubuntu 17.04 Zesty Zapus and everything is running great except that bluetooth. I want to enjoy wireless music you know. The bluetooth icon shows in the panel bar but does nothing.

Running "lshw" on the terminal got me started. I looked up the lines and found an unclaimed hardware device which is my bluetooth RALINK RT3290. Started searching from the forums and one pointed to install rtbth-dkms driver from launchpad.

So i obeyed and added blaze repo (https://launchpad.net/~blaze/+archive/ubuntu/rtbth-dkms)

//this two lines will add the blaze rtbth-dkms repository 

//on the system and update it along the way

sudo add-apt-repository ppa:blaze/rtbth-dkms
sudo apt-get update

Next step is to install it:

//install bluetooth driver

sudo apt-get install rtbth-dkms

Next step is to reboot your laptop and start the bluetooth once you got in. The instructions are listed here.

# Init
sudo modprobe rtbth
sudo rfkill unblock bluetooth
hcitool dev # check

# Switch off
sudo rfkill block bluetooth

# Switch on
sudo rfkill unblock bluetooth

# Shutdown
sudo pkill -2 rtbt
sudo rmmod rtbth

Once done your bluetooth device will be recognized and claimed by the driver.
Then I paired up my little bluetooth speaker and happily enjoying wireless music! Thanks to blaze for the bluetooth repo.

Motherboard Repair - Acer Borg Iibtdl-borg 13057-1m W/ Intel(R) Celeron(R) CPU 1007U

So my aunt got this little ACER Mini-ITX pc that was not booting up. I looked at the capacitors and found some bulging 16V 220f electrolytic and I imidiately thought this will be an easy fix since all I have to do is replace those and it will be back to business. I had experience with this before with my AMD K6-2 mobo back in the day.

10 days later and I'm still stuck at figuring out what the heck is going on. Since I already replaced the suspected bad capacitors it still refuses to boot.

To the oven it is! I baked that sucker on a regular kitchen oven at 180 *C for 10 minutes. Cooled it down and hooked the ATX power plug and the powcer button connector. IT BOOTED UP!! So much for the excitement though because after shutting it down to insert the HDD and memory it was back to being dead.

Oven equals heat so I thought it boots when something is hot. My wife's trusty hair dryer came into play. Heated up the board entirely and when it was hot to the touch i plugged the mini board back with the ATX and power button connectors. You're right it came to life. Those beeps where beeps of joy. I diagnosed the problem and the next thing to do is to isolate the search for the failing component.

This time I wasn't sure yet what component needs to be hot so i took my soldering iron waited it to heat up just around 100 *C and started heating up the solid capacitors near the CPU by briefly touching it with the soldering tip. Those solid caps looks perfect from the outside and I don't have the proper equipment to test it inline the board.

Every time i heated a capacitor I then push the switch. Bingo! I found waldo. A solid, good looking filter capacitor was the criminal. You wouldn't even think it was bad. Next time i'm investing on proper tools but for now i got to use unorthodox methods for this job.

I had a 6.3v 1000uf low esr cap that i salvaged from a dead video card lying around so a quick work with the soldering iron is all needed. I decided that i'll skip removing the bad capacitor and instead rig the replacement cap with a wire that will run to the side because i'm afraid i'll damage those little components near the CPU. Ugly but works.

Variation Issue - WooCommerce Update 3.1.0

After the new 3.1.0 update, my custom variation stopped working due to a code update that checks my custom value against the pre-defined attribute values. With a little searching through the code using the error message it produced, i found that they have added the checking in "class-wc-form-handler.php" at around line 828.

 // Allow if valid or show error.
if ( $valid_value === $value ) {
    $variations[ $taxonomy ] = $value;
// If valid values are empty, this is an 'any' variation so get all possible values.
} elseif ( '' === $valid_value && in_array( $value, $attribute->get_slugs() ) ) {
    $variations[ $taxonomy ] = $value;
} else {
        throw new Exception( sprintf( __( 'Invalid value posted for %s', 'woocommerce' ), wc_attribute_label( $attribute['name'] ) ) );
}

I commented that section and added "$variations[ $taxonomy ] = $value;" before that code block and my site is back to normal.