DEV Community: Zahir Din

Flutter CICD android with CodeMagic

Zahir Din — Tue, 09 Apr 2024 13:58:21 +0000

Here is pre-build script:

#!/bin/sh

curl --request GET -H "PRIVATE-TOKEN: $ACCESS_TOKEN" https://git.glsb.my/api/v4/projects/$PROJECT_ID/secure_files > secure_files.json

cat secure_files.json | jq '.[] | "\(.id),\(.name)"' | tr -d '"' > files.txt

while IFS=, read -a line;
do set -- "${line[@]}";
    curl --request GET -H "PRIVATE-TOKEN: $ACCESS_TOKEN" https://git.glsb.my/api/v4/projects/$PROJECT_ID/secure_files/$1/download > $2;
done < files.txt

mv logo.png assets/images/logo.png

flutter pub get
flutter pub run flutter_launcher_icons -f pubspec.yaml

Laravel Breeze & Vue.js pagination component

Zahir Din — Fri, 15 Sep 2023 08:33:18 +0000

Laravel have a pagination feature. It's help blade template to generate a pagination links. This feature is really useful for blade template.

But how do we display it in Javascript framework?

Here is example we can use in Vue.js framework. There is 2 method development for developer to use Vue.js framework.

Laravel Breeze (Inertia.js with Vue.js)
External Vue.js Framework

I will show example for both.

Laravel Breeze (Inertia.js with Vue.js)

First, create a backend that return the pagination.

<?php

namespace App\Http\Controllers;

use App\Models\Activity;
use Inertia\Inertia;

class ActivityController extends Controller
{
    public function index()
    {
        $activities = Activity::paginate(10)->withQueryString();

        return Inertia::render('/activities/index', [
            'activities' => $activities,
        ]);
    }
}

In page file, we can use the component like this:

<script setup>
import PaginationBar from '../components/PaginationBar.vue'

const props = defineProps({
    activities: Object,
});

</script>

<template>
    <PaginationBar :links="props.activities.links" />
</template>

We create a pagination component file (resources/js/components/PaginationBar.vue).

<script setup>
import { Link } from "@inertiajs/vue3";
import { onMounted, ref, watch } from "vue";

const props = defineProps({
    links: Array,
});

const buttons = ref([]);
const button_prev_url = ref(null);
const button_next_url = ref(null);

const init = (limit) => {
    let links = props.links;
    let selected_index = null;

    // remove prev & next
    links.shift();
    links.pop();

    // select index
    links.map((link, i) => {
        if (link.active) selected_index = i;
    });

    button_prev_url.value = links[selected_index - 1]?.url;
    button_next_url.value = links[selected_index + 1]?.url;

    buttons.value = links;
};

watch(
    () => props.links,
    () => init(),
);

onMounted(() => init());
</script>

<template>
    <div v-if="buttons.length > 1">
        <div class="flex flex-wrap justify-center">
            <Link
                class="px-4 py-2 ml-2 mr-4 text-sm rounded-lg"
                :class="
                    button_prev_url
                        ? 'text-slate-500 focus:text-main-500 hover:bg-main-50 font-bold'
                        : 'text-slate-300'
                "
                :href="button_prev_url"
            >
                Previous
            </Link>
            <template v-for="(btn, i) in buttons" v-bind:key="i">
                <Link
                    class="px-4 py-2 mx-0.5 text-sm font-bold rounded-lg hover:bg-main-50 focus:text-main-500"
                    :class="
                        btn.active ? 'bg-main-600 text-white' : 'text-slate-500'
                    "
                    :href="btn.url"
                >
                    {{ btn.label }}
                </Link>
            </template>
            <Link
                class="px-4 py-2 ml-4 mr-2 text-sm rounded-lg"
                :class="
                    button_next_url
                        ? 'text-slate-500 focus:text-main-500 hover:bg-main-50 font-bold'
                        : 'text-slate-300'
                "
                :href="button_next_url"
            >
                Next
            </Link>
        </div>
    </div>
</template>

External Vue.js Framework

For external, it's a bit challenging because Laravel pagination passing the backend url instead of frontend url.

Let's try create an API that return the pagination.

<?php

namespace App\Http\Controllers;

use App\Models\Activity;
use Illuminate\Http\Request;

class ActivityController extends Controller
{
    public function index(Request $request)
    {
        $activities = Activity::paginate(10)->withQueryString();

        return response()->json($activities);
    }
}

In page file, we can use the component like this:

<script setup>
import { ref, onUpdated, onMounted } from 'vue'
import PaginationBar from '../components/PaginationBar.vue'

const activities = ref(null);

const load = () => {
    // Fetch API here and set it response as activities value.
}

onUpdated(() => load())
onMounted(() => load())
</script>

<template>
    <PaginationBar route_name="activities" :links="activities.links" />
</template>

We create a pagination component file (src/components/PaginationBar.vue).

<script setup>
import { onMounted, ref, watch } from "vue";
import { RouterLink } from 'vue-router'

const props = defineProps({
    links: Array,
    route_name: String,
});

const buttons = ref([]);
const button_prev_label = ref(null);
const button_next_label = ref(null);

const init = () => {
    let links = props.links;
    let selected_index = null;

    // remove prev & next
    links.shift();
    links.pop();

    // select index
    links.map((link, i) => {
        if (link.active) selected_index = i;
    });

    button_prev_label.value = links[selected_index - 1]?.label;
    button_next_label.value = links[selected_index + 1]?.label;

    buttons.value = links;
}

watch(
    () => props.links,
    () => init(),
);

onMounted(() => init());
</script>

<template>
    <div v-if="buttons.length > 1" class="flex justify-center my-5">
        <div class="flex flex-wrap justify-center py-2 min-w-2/5 rounded-lg shadow">
            <RouterLink
                class="px-4 py-2 ml-2 mr-4 text-sm rounded-lg"
                :class="button_prev_label ? 'text-slate-300 focus:text-white-300 hover:bg-slate-800 font-bold' : 'text-slate-500'"
                :to="{ name: props.route_name, query: { page: button_prev_label } }"
            >
                Previous
            </RouterLink>
            <template v-for="(btn, i) in buttons" v-bind:key="i">
                <div
                    v-if="btn.label == '...'"
                    class="px-4 py-2 mx-0.5 text-sm font-bold rounded-lg text-slate-500"
                >
                    {{ btn.label }}
                </div>
                <RouterLink
                    v-else
                    class="px-4 py-2 mx-0.5 text-sm font-bold rounded-lg hover:bg-slate-800 focus:text-main-500"
                    :class="btn.active ? 'bg-slate-800 text-white' : 'text-slate-500'"
                    :to="{ name: props.route_name, query: { page: btn.label } }"
                >
                    {{ btn.label }}
                </RouterLink>
            </template>
            <RouterLink
                class="px-4 py-2 ml-4 mr-2 text-sm rounded-lg"
                :class="button_next_label ? 'text-slate-300 focus:text-white-300 hover:bg-slate-800 font-bold' : 'text-slate-500'"
                :to="{ name: props.route_name, query: { page: button_next_label } }"
            >
                Next
            </RouterLink>
        </div>
    </div>
</template>

As you can see, I use props routename so that I can pass a route name from Vue.js router and not from Laravel router.

This is example I have. Anyone can use and maybe enhance for a better use case.

Thank you.

Generate QR image using Laravel Job imagick

Zahir Din — Wed, 06 Sep 2023 01:59:59 +0000

First let's start with install intervention/image && simplesoftwareio/simple-qrcode package.

composer require intervention/image
composer require simplesoftwareio/simple-qrcode

Then we can generate a QR file using jobs. Here is my app/Jobs/GenerateQrImageJob.php file example:

<?php

namespace App\Jobs;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Facades\Storage;
use Intervention\Image\ImageManagerStatic as Image;
use SimpleSoftwareIO\QrCode\Facades\QrCode;

class GenerateQrImageJob implements ShouldQueue
{
    use Dispatchable;
    use InteractsWithQueue;
    use Queueable;
    use SerializesModels;

    protected $text;

    /**
     * Create a new job instance.
     *
     * @return void
     */
    public function __construct($text)
    {
        $this->text = $text;
    }

    /**
     * Execute the job.
     *
     * @return void
     */
    public function handle()
    {
        Image::configure(['driver' => 'imagick']);
        $storage = Storage::disk('public');
        $file_path = $storage->path($this->text);

        // Create SVG file
        $svg_image = QrCode::size(150)->generate($this->text);
        $storage->put($this->text . '.svg', $svg_image);

        // Change SVG file to BMP file
        $img = Image::make($file_path . '.svg');
        $img->save($file_path . '.bmp');
        $storage->delete($this->text . '.svg');
    }
}

Based on this job, I create a SVG file. Then save it in storage.

I want the file is in BMP format. Then I need to change the SVG file to BMP format.

Thank You.

Docker Error: /lib64/ld-linux-x86-64.so.2: No such file or directory

Zahir Din — Thu, 06 Jul 2023 10:44:08 +0000

When working with docker, sometimes we encounter an error we didn't expect. Sometimes it work on other machine but not yours. Docker help developer to run an application or system with same environment. It help reduce the "it work on my machine" stuff.

Unfortunately, it also depends on host machine we use. For example Windows OS using WSL to run docker, or MacBook M1 chip to run docker.

Some people might have encountered an error like this before:

qemu-x86_64: Could not open '/lib64/ld-linux-x86-64.so.2': No such file or directory

The error message encountered indicates that the /lib64/ld-linux-x86-64.so.2 file is missing inside the Docker container. This file is required for running x86_64 binaries on an x86_64 system.

To resolve this issue, you can try adding the libc6 package to the Docker image.

# Use the latest Ubuntu image as the base
FROM ubuntu:latest

# Install necessary dependencies
RUN apt-get update && apt-get install -y libc6

# Do something here...

If you don't want to install any package inside a container, other approach is to run it as other platform. We can use it like this:

docker build --platform=linux/amd64 -t my_name/my_image .

There is also other solution and that was to add --platform=linux/amd64 to the FROM line of the docker file.

FROM --platform=linux/amd64 ubuntu:latest

Thanks to the resource I've found here.

Docker command for beginners

Zahir Din — Tue, 14 Mar 2023 03:32:21 +0000

Create container

docker create <container_image>

Remove image

docker rmi <container_image>

Start container (start container without output)

docker start <container_id>

Start container (start container with output)

docker start -a <container_id>

Run container (install, create and start container)

docker run <container_image> <command_when_start>

# -p is port mapping <local_browsing_port>:<container_running_port>
docker run -p 8000:8080 <container_image>

# -d is to executed in background
docker run -d <container_image>

# -p <host>:<container>
# -v <not_included> -v <host_path>:<container_path>
docker run -it -p 8080:80 -v /app/node_modules -v $(pwd):/app <container_id>

List running container

docker ps

List all container

docker ps -a

Removing stopped container

docker system prune

Get log for certain container

docker logs <container_id>

Stop container (it will wait maybe 10 sec before it kill it)

docker stop <container_id>

Kill container (kill container immediately)

docker kill <container_id>

Execute an additional command in container

# -i allow to enter in text (input) to containers terminal
# -t show a nice formatted input (eg: root@ip_address ~%  )
# -it is combined flag between -i and -t
docker exec -it <container_id> <command_to_execute>

Getting full access or command prompt terminal in container

# name_of_programs (eg: bash, powershell, zsh, sh)
docker exec -it <container_id> <name_of_program>

Run docker file / Create docker image

# go to Dockerfile/project directory
docker build <Dockerfile directory>

# create docker image with name
docker build -t <my_docker_id>/<project>:<version> <Dockerfile directory>

# -f is for custom filename other than Dockerfile
docker build -f <filename> <Dockerfile directory>

Create docker image from container

# -c is to set default command (in array) when image is running
docker commit -c "CMD ['ls', '-lah', '/var/www/html']" <container_id>

Run docker compose

docker-compose up

# —build is to build/rebuild containers
docker-compose up —build

# -d is to executed in background
docker-compose up -d

Stop docker compose

docker-compose down

List container in project with docker-compose

docker-compose ps

SQL Count using Where Clause or Case Statement

Zahir Din — Wed, 25 Jan 2023 10:40:32 +0000

As a developer, we want our application to run smooth and have a great performance. One of the performance we want to improve is query performance.

We do count rows in SQL command many times using COUNT.

But is it really the best way to do it with 1 million rows of data?

Well, it depends on situation.

For example, this is table we want to count.

CREATE TABLE users (
  id int, 
  first_name varchar(255), 
  last_name varchar(255), 
  age varchar(255), 
  gender varchar(255),
  address varchar(255)
);

CREATE INDEX person_name ON users (first_name, last_name);

There is 2 ways to do count statement if developer didn't have permission to altered the table.

Using WHERE Clause
Using CASE Statement

Most of use simply use WHERE condition with COUNT function. For example like below:

SELECT COUNT(*) AS count 
FROM users 
WHERE age < 20;

But in some cases, it is better to use CASE statement when:

The conditions being evaluated are complex and cannot be easily indexed.
- If the conditions in the WHERE clause are too complex to be indexed, the database may have to evaluate each row individually, which can be slow.
- In contrast, a CASE statement can evaluate complex conditions within the COUNT function, potentially reducing the number of rows that need to be processed.
When the conditions are based on multiple columns.
- If the conditions in the WHERE clause span multiple columns and those columns are not indexed together, the database might not be able to use an index effectively.
- In such cases, a CASE statement can be used to evaluate conditions on multiple columns within the COUNT function, reducing the number of rows that need to be processed.
When the data is not well indexed.
- If the table is not well indexed or the data is not well distributed, a WHERE clause might not be able to take advantage of indexes and have to scan the entire table.
- In such scenarios, a CASE statement might be faster.
When the data is highly selective.
- If the data is highly selective, where only a small percentage of the data needs to be counted, then using a CASE statement might be faster than using a WHERE clause because it eliminates the need for the database to scan the entire table.

Example using CASE statement:

SELECT 
  COUNT(CASE
     WHEN age < 20
     THEN 1
     ELSE NULL
  END) AS count
FROM 
  users;

It's worth noting that, in both cases, if the table is large and 'age' column is not indexed, both queries will have to scan the entire table to find the rows that match the condition, which can be slow.

However, if the table is small, or the percentage of rows that match the condition is very low, the performance difference between the two queries might not be significant. So it's always recommended to test both options and check the performance for your specific use case and dataset.

This is the same situation when using GROUP BY statement.

It's worth noting that the performance difference between using a GROUP BY clause with a WHERE or CASE statement will depend on the complexity of the condition, the size of the table, and the distribution of the data.

This is based on the situation when the developer didn't have the access to database to altered the table schema.

If the developer have an access, it's recommended to consider other options like indexing the column or partitioning the table which will improve the performance of the query.