DEV Community: Ayar Hlaine

Raspberry PI with temperature and humidity sensor

Ayar Hlaine — Sun, 01 Aug 2021 08:47:25 +0000

ယခုပြောပြသွားမှာကတော့ Raspberry PI ကနေ DHT-11 (temperature and humidity sensor) ကို ဘယ်လိုအသုံးပြု့ရမလဲဆိုတာပြောပြပေးသွားမှာ ဖြစ်ပါတယ်။

DHT-11 sensor ကိုအသုံးပြု့ဖို့ဆိုရင် Raspberry PI အတွက်လုပ်ထားတဲ့
python libraries တွေ node js packages တွေအများကြီးရှိပါတယ်။

ယခု turorial မှာတော့ DHT11 Python ကိုအသုံးပြု့တဲ့နည်း ပြောပြသွားမှာဖြစ်ပါတယ်။

အသုံးပြု့ပုံ အဆင့်ဆင့်

Run the standard updates
Install DHT11 Python
Connect DHT11 sensor with Raspberry Pi board
Write python code to read data

1. Run the standard updates

ဒါကတော့ ထုံးစံအတိုင်း linux based OS တွေဖြစ်တဲ့အတွက် libraries တွေကို update/upgrade လုပ်ပေးရမယ်။ Raspberry PI OS က Debian-based ဖြစ်နေတာကြောင့်ပါ။

Raspberry PI ကို Terminal ကနေ
sudo apt-get update
sudo apt-get upgrade
တို့ကို run ပေးပါ။

2. Install DHT11 Python

ဒုတိယ အဆင့်အနေနဲ့ DHT11 Python library ကို install လုပ်ပေးပါမယ်။

python3 -m pip install dht11 ကို အသုံးပြု့ပြီး အလွယ်တကူ install လုပ်နိုင်ပါတယ်။

3. Connect DHT11 sensor with Raspberry Pi board

တတိယ အဆင့်အနေနဲ့ကတော့ DHT11 sensor ကို Raspberry Pi board ရဲ့
pins တွေနဲ့ ဘယ်လိုချိတ်ဆက်ရမလဲသိ့ဖို့လိုပါတယ်။

အရင်ဆုံး DHT11 sensor မှာ pin ဘယ်နှချောင်းပါလဲ အရင်ကြည့်ရအောင်ပါ။

Symbol	Description
G	Ground Pin ကို ဆိုလိုပါတယ်
V	Voltage Pin ကိုဆိုလိုပါတယ်
S	Signal/Data ကိုဆိုလိုပါတယ်

နောက်ထပ်သိ့ရမှာက မိ့မိ PI ရဲ့ Pins တွေကို နားလည်ဖို့လိုပါမယ်။
ဒါကတော့ Raspberry PI ရဲ့ GPIO Pin dragram ပါ။

ဒါကိုပဲ မိ့မိ့ PI ရဲ့ gpio pins တွေအသေးစိတ်သိ့ချင်တယ်ဆိုရင်
Terminal ကနေပဲ
pinout လို့ရိုက်ပြီး ကြည့်ရှုနိုင်ပါသေးတယ်။

ကျနော့်ရဲ့ Raspberry PI 4 Model B မှာတော့

3 Voltage (2 pins)
5 Voltage (2 pins)
Ground Pin (8 pins)
GPIO Pin (28 pins) ပါပါတယ်.

အသေးစိတ်ထပ်ဖတ်ချင်တယ်ဆိုရင်တော့ GPIO Pin docs မှာဖတ်လို့ရပါတယ်။

အဲတော့ sensor ရဲ့
G pin ကို Ground pin
V pin ကို 3 V/ 5 V pin
S pin ကို any GPIO pin
တွေမှာချိတ်ဆက်ပေးရပါမယ်။

အထက်ပါအတိုင်းချိတ်ဆက်လိုက်တဲ့ အတွက်
G pin က pin 6
V pin က pin 2
S pin က pin 10 (GPIO 15)
မှာ ရှိနေမှာပါ။

4. Write python code to read data

ဒါကတော့ အထက်အဆင်မှာ installed လုပ်ခဲ့တဲ့ dht11 library ကို အသုံးပြု့ထားတဲ့ code ဖြစ်ပါတယ်။

import RPi.GPIO as GPIO
import dht11

# initialize GPIO
GPIO.setwarnings(False)
GPIO.setmode(GPIO.BCM)
GPIO.cleanup()

# read data using pin 15
instance = dht11.DHT11(pin = 15)
result = instance.read()

if result.is_valid():
    print("Temperature: %-3.1f C" % result.temperature)
    print("Humidity: %-3.1f %%" % result.humidity)
else:
    print("Error: %d" % result.error_code)

Desktop ပေါမှာ dht11_example.py ဆိုတဲ့ဖိုင်လေးဆောက်ပါ။
ပြီးတော့ အထက်က code ကို ကူးထည့်လိုက်ပါ။

ပြီးရင်တော့ Terminal ကနေ

pi@raspberrypi:~/Desktop phthon3 dht11_example.py

လို့ run ပေးရပါမယ်။
သတိ့ထားရမှာ က code ထဲမှာ gpio pin no ကို မှန်မှန်ကန်ကန်ထည့်ပေးရပါမယ်။
ချိတ်ဆက်တုန်းက S pin က pin 10 (GPIO 15) gpio 15 pin ကို အသုံးပြု့ထားတာဖြစ်ထဲ့အတွက် 15 လို့ထည့်ထားတာပါ။

အားလုံးပဲအဆင်ပြေကြပါစေ။

အားလုံးကိုကျေးဇူးတင်ပါတယ်။
ဆက်လက်ကြိုးစားပါအုံးမည်။

Ayar Hlaine

Raspberry Pi Headless Setup

Ayar Hlaine — Sat, 31 Jul 2021 07:50:48 +0000

Headless Setup ဆိုတာဘာလဲ

Monitor or Keyboard တို့မပါပဲ Raspberry Pi Setup လုပ်ခြင်းကိုဆိုလိုပါတယ်။ ဒါပေမဲ့ တစ်ခြား wireless network တို့ ssh သုံးဖို့ တစ်ခြား accessories တွေတော့လိုအပ်အုံးမှာဖြစ်ပါတယ်။

Overview

Raspberry Pi Setup လုပ်ဖို့ဆိုရင်

SD Card (minimum 8 GB, recommended 32 GB)
Raspberry Pi board (any Pi Model)
SD card reader
Wireless Network စသည်တို့လိုအပ်ပါတယ်။

Setup ပြုလုပ်ပုံ အဆင့်များ

Raspberry Pi OS (Raspbian) ကို SD card ထဲကို burn ဖို့လိုပါမယ်။
Monitor or Keyboard တို့မပါပဲ Raspberry Pi Setup လုပ်ဖို့ Wireless Network Configure လုပ်ပါမယ်။
SSH enable လုပ်ရပါမယ်။
Find Raspberry PI Ip Address
VNC Viewer setup
Accessing Raspberry PI Screen from PC/Phone

1. Raspberry Pi OS (Raspbian) ကို SD card ထဲကို burn ဖို့လိုပါမယ်။

ပထမဆုံး အဆင့်အနေနဲ့ SD Card ကို ဖတ်ဖို့ computer နဲ့ ချိတ်ဆက်ရပါမယ်။ SD card က အသုံးပြုပီးသားဆိုရင်တော့ format အရင်ချပေးပါ။ အသုံးမပြုရသေးတဲ့ SD card ဆိုရင်တော့ format ချဖို့မလိုပါဘူး။ ချိတ်ဆက်ထားတဲ့ SD card ကို စစ်ဆေးချင်တယ် ဆိုရင်တော့ Mac မှာဆိုရင် Disk Utility မှာ သွားပီးစစ်ဆေးလို့ရပါတယ်။

သင့်အနေနဲ့ format ချချင်တယ်ဆိုရင်တော့ Right Click > Erase ကိုနှိပ်ပီး ဆောင်ရွက်နိုင်ပါတယ်။

ပြီးတော့ Raspberry Pi OS (Raspbian) ကို SD card ထဲကို ထည့်ရပါမယ်။ ဒီအဆင့်မှာတော့ open source image writer tools တွေအများကြီးရှိပါတယ်။ ကိုယ်ကြိုက်နှစ်သက်ရာကို အသုံးပြု့နိုင်ပါတယ်။

Image Writer Tools:

Etcher
Raspberry Pi Imager
...

ယခုပြောပြသွားမှာကတော့ Raspberry Pi Imager ကို အသုံးပြု့သည့်နည်းဖြစ်ပါတယ်။ ဒီနေရာမှာ Raspberry Pi setup လုပ်ဖို့ ကိုယ်က ကိုယ်ပိုင် Laptop တစ်လုံး မရှိဘူးဆိုရင်လည်း ဖုန်တစ်လုံးနဲ့လည်းအဆင်ပြေနိုင်ပါတယ်။ ဖုန်းနဲ့ဆိုရင်တော့
Pi SD Card Imager တို့သုံးလို့ရပါတယ်။ Play Store မှာ အလွယ်တကူ download လုပ်နိုင်ပါတယ်။

ကဲ ဆက်လိုက်ကြဉီးစို့။

ကိုယ်အသုံးပြု့မည့် OS ပေါ်မူတည်ပြီး Download လုပ်ပေးရပါမယ်။

For Window (https://downloads.raspberrypi.org/imager/imager_1.4.exe)
For Mac (https://downloads.raspberrypi.org/imager/imager_1.4.dmg)
For Ubuntu (https://downloads.raspberrypi.org/imager/imager_1.4_amd64.deb)

Install လုပ်ပီးသွားတာနဲ့ အောက်ပါအတိုင်းမြင်တွေ့ရမှာ ဖြစ်ပါတယ်။

Choose OS ကို ရွေးပီး Pi board နဲ့ သင့်တော့မည့် OS type ကို ရွေးချယ်ပါ။

ပြီးရင်တော့ မိ့မိ burn လို့သည့် SD card ရွေးဖို့ Choose Storage ကို နှိပ်ပါ။

ပြီးရင် Write ကို နှိပ်ပါ။

2. Monitor or Keyboard တို့မပါပဲ Raspberry Pi Setup လုပ်ဖို့ Wireless Network Configure လုပ်ပါမယ်။

Headless Setup ရဲ့ အနှစ်သာရ ကအခုမှ စတာပါ။ ပုံမှန်အတိုင်ဆိုရင် Pi OS ကို SD card ထဲထည့်ပီးပီ ဆိုရင် Pi board မှာ keyboard, mouse, hdmi cable တွေတပ်ပြီး monitor တစ်ခုခုနဲ့ချိတ်ရပါမယ်။ Headless Setup ဆိုတာအဲတာတွေတပ်စရာမလို့ပဲ အသုံးပြု့တဲ့နည်းဖြစ်ပါတယ်။

တစ်နည်းအားဖြင့်ပြောရရင် boot files တွေထဲမှာ customize ဝင်ပြင်ပီးတော့ ssh နဲ့ VNC Viewer on ပြီး access လုပ်တဲ့နည်းဖြစ်ပါတယ်။

အရင်ဆုံးအနေနဲ့ Raspberry PI OS တက်လာတဲ့ အခါ မိ့မိ့ personal connect လုပ်ဖို့ network configuration file ထည့်ပေးရပါမယ်။ Raspberry Pi ဟာဆိုရင် network configuration file လေးကို wpa_supplicant.conf လို့ခေါ်တဲ့ နာမည်နဲ့ သိမ်းထားလေ့ရှိ့ပါတယ်။

wpa_supplicant.conf ရဲ့ format ကတော့ အောက်ပါအတိုင်းဖြစ်ပါတယ်။

country=MM
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev 
update_config=1
network={
       ssid="SSID Name"
       psk="Password"
       key_mgmt=WPA-PSK
    }

SSID Name နေရာမှာ Wifi Name ထည့်ပါ။
Password နေရာမှာ Wifi Password ထည့်ပါ။

ဒီနေရာမှာ ကိုယ့်မှာ wifi စက်တပ်ထားမှ မဟုတ်ပါဘူး။ ဖုန်းရဲ့ hostpot နဲ့လည်းလုပ်လို့ရပါတယ်။

wpa_supplicant.conf လို့ခေါ်တဲ့ ဖိုင်လေးကို SD card root ထဲမှာ ထည့်ပေးရပါမယ်။

အဲဒီလိုထည့်လိုက်တဲ့ အတွက်ကြောင့် PI OS တက်လာတဲ့ အခါ မိ့မိရဲ့ network ကို auto connect လုပ်ပါလိမ့်မယ်။

3. SSH enable လုပ်ရပါမယ်။

နောက်တစ်ဆင့်ကတော့ wifi auto ချိတ်ပီးတဲ့ အခါ Raspberry PI ကို remote acccess လုပ်ဖို့ ssh enable လုပ်ရပါမယ်။

ဒီအဆင့်ကတော့ အရမ်းကို ရိုးရှင်းပါတယ်။
ssh file လေးကို SD card root ထဲမှာ ထည့်လိုက်ရုံပါပဲ။

Terminal မှာ touch ssh လို့ရိုက်လိုက်ရင် ssh ဆိုတဲ့ empty file လေးထွက်လာပါလိမ့်မယ်။
အဲဒီ ssh ဆိုတဲ့ file လေးကို SD card root ထဲမှာ ထည့်ပေးလိုက်ပါ။

Note: ssh file မှာ ဘာ file extension မှ မပါပါဘူး။

ပြီးရင်တော့ မိ့မိ့ SD card ကို ဖြုတ်ပြီး Raspberry Pi board မှာ တပ်နိုင်ပါပြီ။

Raspberry PI ကို power on လိုက်ပါ။

Raspberry PI မှာ မီးအစိမ်းလေး လင်းလာတဲ့ အထိ့ ခဏစောင့်ပါ။

4. Find Raspberry PI Ip Address

စတုတ္ထ အဆင့်အနေနဲ့ Raspberry PI boot တက်လာပြီ ဆိုရင် ssh ကနေဝင်နိုင်ဖို့ Raspberry PI ရဲ့ Ip Address သိ့ဖို့လိုပါတယ်။

ဒီအတွက် IP Scanner ကိုသုံးပါမယ်။
For Window, Advance IP Scanner သုံးနိုင်ပါတယ်။
For Mac, IP Scanner ကိုသုံးနိုင်ပါတယ်။

IP Scanner ဖွင့်လိုက်တာနဲ့ အောက်ပါအတိုင်းမြင်တွေ့ရမှာ ဖြစ်ပါတယ်။

192.168.100.26 ဆိုတာ Raspberry PI ရဲ့ IP address ဖြစ်ပါတယ်။
အဲဒါကိုအသုံးပြု့ပြီး ssh ကနေ login ဝင်နိုင်ပါပြီ။

SSH က Mac, Ubuntu တိုမှာ ပါပြီးသားဖြစ်ပြီး Window မှာဆိုရင်တော့ Putty စသော ssh client software တွေသုံးနိုင်ပါတယ်။

Terminal မှာ ssh pi@<ip-address> လို့ ရိုက်ပြီးဝင်ရပါမယ်။

ဘာလို့ ssh pi@<ip-address> သုံးတာလဲဆိုတော့ Raspberry Pi ရဲ့

Default User Name = pi
Default Password = raspberry

ဖြစ်လို့ပါပဲ။

5. VNC Viewer setup

Raspberry PI Screen ကို remove access မြင်နိုင်ဖို့ Raspberry PI မှာ default အနေနဲ့ VNC Viewer Software ပါလာပြီးသားပါ။ Default အနေနဲ့တော့ သူက disabled လုပ်ထားတာပါ။ ဒါကို ဖွင့်ပေးဖို့လိုအပ်ပါတယ်။

SSH နဲ့ Raspberry PI ထဲ ဝင်ပြီးတာနဲ့ ဒါကို အလွယ်တကူ enable လုပ်လိုရပါပြီ။

sudo raspi-config ဆိုပြီး ရိုက်ရပါမယ်။

ရိုက်ပြီး Enter ခေါက်လိုက်တာနဲ အောက်ပါအတိုင်းမြင်တွေ့ရမှာ ဖြစ်ပါတယ်။

Arrow Key ကို အသုံးပြု့ပြီး Interface Option ကိုရွေးပါ။

Enter ခေါက်လိုက်တာနဲ့ အောက်ပါအတိုင်းထပ်မံမြင်တွေ့ရမှာ ဖြစ်ပါတယ်။

VNC Enable/Disable ကို arrow key နဲ့သွားပါ။ Enter ခေါက်ပါ။

ပြီး ရင် Yes ကို ရွေးပါ။
VNC Viewer Enable လုပ်လို့ပြီးပါပြီ။

6. Accessing Raspberry PI Screen from PC/Phone

နောက်ဆုံးအဆင့်အနေနဲ့ Raspberry PI Screen ကို မိ့မိ laptop/phone ကနေကြည့်နိုင်ပါပြီ။

VNC Viewer ကို ဒီမှာ ဒေါင်းပါ။

Window, Mac, Ubuntu, Android အကုန် support ပေးပါတယ်။

VNC Viewer ဖွင့်ပါ။
Raspberry PI Ip address ရိုက်ထည့်ပါ။

User Name နဲ့ Password ထည့်ပါ။

ပြီးတာနဲ့ အောက်ပါအတိုင်း Raspberry PI Screen ကို မိ့မိ laptop/phone ကနေ ထိန်းချုပ်နိုင်ပါပြီ။

Troubleshoot Guides

Cannot Currently Show the Desktop' Error

Note: ရေးသားသူသည့် Raspberry PI Professional တစ်ယောက်မဟုတ်ပါ။ မိ့မိ့ကိုယ်တိုင် setup လုပ်စဉ်က အတွေ့အကြုံကိုသာမျှဝေခြင်းဖြစ်ပါသည်။

အားလုံးကိုကျေးဇူးတင်ပါတယ်။
ဆက်လက်ကြိုးစားပါအုံးမည်။

Ayar Hlaine

Basic Hook (useState) in React

Ayar Hlaine — Fri, 08 Jan 2021 19:09:36 +0000

Introduction

React ရဲ hook feature ဟာဆိုရင် React 16.8 နောက်ပိုင်းမှာမှ စပြီးပါလာတဲ့ feature ဖြစ်ပါတယ်။ အဓိကရည်ရွယ်ချက်ကတော့ Class component တွေမရေးတော့ပဲ function component တွေမှာ state တွေကို ထိန်းကြောင်းနိုင်ဖို့ပဲဖြစ်ပါတယ်။

What is useState in React?

useState hook ဟာဆိုရင် React မှာ အသုံးပြု့တဲ့ hooks တွေထဲကမှ အခြေခံကျဆုံးတစ်ခုလို့ဆိုနိုင်ပါတယ်။
useState hook ဆိုတာဘာလဲလို့ လွယ်ကူအောင်ပြောရလျှင် javascript function လို့မှတ်ထားပြီး functional components တွေမှာ component ရဲ့ state ကိုထိန်းချုပ်ဖို့သုံးတယ်လို့ဆိုရမှာပဲဖြစ်ပါတယ်။

How to use?

useState hook ကိုသုံးမယ်ဆိုရင်တော့ ပထမဆုံးအနေနဲ့ useState ကို react library ကနေ import လုပ်ရပါမယ်။

import { useState } from 'react';

ပြီးတော့မှ ကိုယ်အသုံးချချင်တဲ့ Function component ထဲမှာ အောက်ပါ syntax အတိုင်းအသုံးပြု့ရမှာပဲ ဖြစ်ပါတယ်။

const [state, setState] = useState(initialState);

အဓိကကတော့ useState hook ဟာဆိုရင် value နှစ်ခုကို return ပြန်ပေးပါတယ်။

ပထမတစ်ခုက state ရဲ့ value ပါ (ပထမဆုံးအကြိမ်မှာတို့ကိုယ်သတ်မှတ်လိုက်တဲ့ initialState ထဲကတန်ဖိုးရှိနေမှာပါ)
ဒုတိယတစ်ခု့ကတော့ state ကို update လုပ်ပေးနိုင်တဲ့ function ပါ။ အဲဒီတော့ ကျနော်တို့က state ရဲ့ value ကိုလိုချင်ရင် ပထမ param(state) ကိုသုံးပြီးတော့၊ state ကို update လုပ်ချင်ရင်တော့ ဒုတိ့ယ param(setState) ကို function call လုပ်ပြီး update လုပ်လေ့ရှိပါတယ်။

Tips and Rules

state နဲ့ setState variable ကို ကိုယ်ကြိုက်တဲ့ နာမည်ပေးလို့ရတယ်ဆိုပေမဲ့ အများသုံးတဲ့ rule အတိုင်းလိုက်နာတာက ပိုပြီးတော့ standard ကျပါတယ်။ ဥပမာ။ ။ counter component အတွက် useState ကိုသုံးတဲနေရာမှာ

const [counterValue, updateCounter] = useState(၀);

အဲလိုမျိုးပေးမဲ့ အစား

const [count, setCount] = useState(၀);

ဆိုပြီးပေးသင့်ပါတယ်။ ဒါမှသာ နောက်တစ်ချိန် တစ်နေနေရာကနေ count value ကို ခေါ်သုံးတာနဲ့ update လုပ်လို့ရတဲ့ function name က setCount ဆိုပြီးတန်းသိ့မှာဖြစ်ပါတယ်။

useState hook ကိုသုံးတဲ့နေရာမှာ၊ state ရဲ့ data type ဟာ ကိုယ်လိုချင်တဲ့ javascript data type သတ်မှတ်လို့ရပါတယ်။ ဥပမာ

const [count, setCount] = useState(၀); // number
const [items, setItems] = useState([]); // array
const [itemName, setItemName] = useState(""); // string

useState hook ဟာဆိုရင် local component အသေးစားတွေအတွက် အတော်အသုံးဝင်ပါတယ်။ ဒါပေမဲ့ ကိုယ်အနေနဲ့ larger logic components တွေအတွက်ဆိုရင်တော့ တစ်ခြား state management liraries တွေကိုအသုံးပြု့ရမှာဖြစ်ပါတယ်။ ဥပမာ Redux, Flux စတာတွေကို အသုံးပြု့နိုင်ပါတယ်။

Basic structure with example (Counter App)

import React, { useState } from 'react';

function Counter() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Counter App Example ကို demo အနေနဲ့ကြည့်ချင်တယ်ဆိုရင်တော့ ဒီလင့် မှာသွားကြည့်လို့ရပါတယ်။

React Hooks တွေအကြာင်းဖတ်ချင်တယ်ဆိုရင်တော့ ဒီလင့် မှာသွားဖတ်လို့ရပါတယ်။

အားလုံးကိုကျေးဇူးတင်ပါတယ်။
ဆက်လက်ကြိုးစားပါအုံးမည်။

A.Y.H

Laravel N + 1 query ပြသာနာ

Ayar Hlaine — Sun, 03 Jan 2021 06:32:14 +0000

N + 1 query ပြသာနာကတော့ လက်ရှိ developer တွေတော်တောများများဖြစ်လေ့ဖြစ်ထရှိတဲ့ပြသာနာပါ။

ဘယ်အချိန်မှာဖြစ်တက်တာလဲ?

ပုံမှန်အားဖြင့်တော့ data list တွေကို ပြန်ပြတဲ့နေရာမျိုးတွေမှာဖြစ်လေ့ဖြစ်ထာရှိပါတယ်။

ဘယ်လိုမျိုးဖြစ်တာလဲ?

ဥပမာ ကိုယ့်ရဲ့ database ထဲမှာ record 100 ရှိတယ်။ ကိုယ်ကသာမာန် data လေးထုတ်ပြပေမဲ့ database ကို query သွားဆွဲတာက 101 (100 records + 1 times) ကြိမ်ဖြစ်နေတာမျိုးပါ။

အသေးစိတ်ရှင်းလင်းချက်

Laravel မှာကျနော်တို့က ORM ကိုသုံးပြီးတော့ relationship တွေကိုလိုအပ်သလို့စီမံအသုံးပြု့ကြပါတယ်။ ဒီနေရာမှာ Eloquent ORM Relationship တွေဟာ lazy loading တွေဖြစ်တယ်ဆိုတာကိုသတိ့ပြု့ကြရမှာပါ။
ဥပမာ ......

Book Model

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Book extends Model
{
    /**
     * Get the author that wrote the book.
     */
    public function author()
    {
        return $this->belongsTo(Author::class);
    }
}

Author Model

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Author extends Model
{

}

ဒီနေရာမှာ စာအုပ်စာရင်းရယ်၊ ရေးတဲ့သူတွေကို တွဲပြချင်တဲ့ အခါမှာ အောက်ပါအတိုင်းရေးလေ့ရှိ့ပါတယ်။

use App\Models\Book;

$books = Book::all();

foreach ($books as $book) {
    echo $book->author->name;
}

အဲလိုရေးတဲ့အခါ ....
Book::all() လုပ်တဲ့အချိန်မှာ query တစ်ကြိမ်အလုပ်လုပ်ရပါတယ်။
loop ပတ်ရင်း $book->author ဆိုတဲ့အချိန်မှာ query တစ်ကြိမ်စီလုပ်ရပါတယ်။
အဲတော့ ကျနော်တို့ database ထဲမှာ စာအုပ်ပေါင်း 100 ရှိတယ်ဆိုရင် စုစုပေါင်း 101 ကြိမ် query ဆွဲရသလိုဖြစ်နေတာပါ။ ဒါကိုပဲ N + 1 Query Problem လိုခေါ်ကြတာပါ။

ဘယ်လိုရှောင်ရှားမလဲ?

ဒါကို ရှောင်ရှားဖို့ဆိုရင်တော့ Laravel မှာဆိုရင်တော့တော်တော်လေးလွယ်ပါတယ်။
Laravel မှာတော့ ဒါကို ရှောင်ရှားဖို့အတွက် Eager Loading ကိုအသုံးပြု့ပါတယ်။
အထက်ပါဥပမာကို Eager Loading နဲ့ပြန်ရေးကြည့်မယ်ဆိုရင် ...

use App\Models\Book;

$books = Book::with('author')->get();

foreach ($books as $book) {
    echo $book->author->name;
}

ဒီနေရာမှာ with('author') ဆိုတဲ့အပိုင်းလေးက Eager Loading ကိုအသုံးပြု့ထားတဲအပိုင်းပါ။ ဆိုလိုတာကတော့ စာအုပ် information တွဲဆွဲယူရင်း author information တွေပါ တစ်ပါတည်းယူခဲတဲ့သဘောပါ။ အဲဒီလို Eager Loading နဲရေးလိုက်တဲအတွက်ကြောင့် Query 2 ကြိမ်ပဲအလုပ်လုပ်ပါတော့တယ်။

ပထမတစ်ခု့က စာအုပ်စာရင်းဆွဲထုတ်ဖို့

select * from books

ဒုတိယတစ်ခု့က သက်ဆိုင်ရာ စာရေးသူအားလုံးကို ထုတ်ဖို့

select * from authors where id in (1, 2, 3, 4, 5, ...)

အထက်ပါနည်းနဲ့ Eager Loading ကိုသုံးပြီး N + 1 ပြသာနာကိုရှောင်ရှားကြပါတယ်။
ဒီပြသာနာက Laravel မှာတင်မဟုတ်ပဲ တစ်ခြား frameworks, languages, library မှာလည်းရှိနေမှာပါပဲ။ အထူးဂရုပြု့ရှောင်းရှားကြရမှာဖြစ်ပါတယ်။

References

Laravel မှာ Eager Loading နဲ့ N + 1 ပြသာနာ အကြောင်အသေးစိတ် ဖတ်ချင်ရင်တော့ ဒီမှာ ရပါတယ်။

အားလုံးကိုကျေးဇူးတင်ပါတယ်။
ဆက်လက်ကြိုးစားပါအုံးမည်။

A.Y.H

Components and Props တို့ရဲ့ အခြေခံသဘောတရားများ

Ayar Hlaine — Sat, 02 Jan 2021 19:32:10 +0000

What is component in react?

Component တွေဆိုတာက basically ပြောရမယ်ဆိုရင်တော့ JavaScript ရဲ့ pure functions တွေဖြစ်ပြီးတော့ inputs (function ရဲ့ parameter အနေနဲ့) တွေလက်ခံပြီး ကျွန်တော်တို့ အခု UI မှာ မြင်နေကြရတဲ့ React Elements တိုကို return အနေနဲ့ပြန်ပေးပါတယ်။

Component Naming

React components တွေကို နာမည်ပေးတဲ့နေရာမှာ အထူးသတိ့ပြု့ရမည့်အချက်တစ်ချက်ရှိပါတယ်။ အဲဒါကတော့ Component name တွေဟာ အမြဲတမ်း capital letter ဖြစ်ရပါမယ်။

⚠️ Always start component names with a capital letter.

ဘာဖြစ်လို့လဲဆိုတော့ React က lower case components တွေကို DOM tags တွေအဖြစ်ယူဆပြီး၊ upper case components တွေကို သာ Custom components တွေအဖြစ်သက်မှတ်ပေးလို့ပါ။
အသေးစိတ်ဖတ်ချင်ရင်တော့ ဒီလင့် မှာသွားဖတ်လို့ရပါတယ်။

Basic understanding of component

React ဟာဆိုရင် component တွေကိုပေါင်းစပ်ပီး application, websites စတာတွေကို ဖန်တီးယူလို့ရတဲ့နည်းပညာဖြစ်ပါတယ်။ ဘာဖြစ်လို့ component တွေခွဲနေရတာလဲ? ဒီတိုင်းလဲရေးရင်ရတာပဲလေ ဆိုပြီးမေးကြပါလိမ့်မယ်။ သူ့မှာ ခိုင်လုံတဲ့အကြောင်းပြချက်တွေရှိပါတယ်။

Reusable Pieces
Isolation
Split UI into independent

ဒါတွေကိုနားလည်ဖို့ ဥပမာတစ်ခုနဲ့ ရှင်းပြမှ ရပါလိမ့်မယ်။

import React, { Component } from 'react';
export default class App extends Component {
  render() {
    return (
      <div className="app">
        <div className="student__list">
          <div className="student__item">
            <h1>Name: Student A</h1>
            <p>Score: 100</p>
          </div>
          <div className="student__item">
            <h1>Name: Student B</h1>
            <p>Score: 90</p>
          </div>
        </div>
      </div>
    )
  }
}

အထက်ပါ ဥပမာဟာဆိုရင် component ကို မသုံးပဲ အကုန်လုံးကို တစ်နေရာထဲမှာ စုရေးထားတဲ့ပုံစံဖြစ်ပါတယ်။ ဒီနေရာမှာ တစ်ခုသတိ့ထားမိ့ကြမှာပါ။

အနီပြထားတဲ အပိုင်းနေရာတွေဟာ code တွေမလိုအပ်ပဲနဲ့ ထပ်နေတယ်ဆိုတာကိုပါ။ အခုပြထားတဲ ဥပမာဟာ data နည်းနေလို့မသိ့သာပေမဲ့ Student အယောက်တစ်ရာလောက်ရှိတဲ့အချိန်မှာ မလိုအပ်ပဲ code တွေရှုပ်ထွေးနေပါလိမ့်မယ်။ အဲတော့ ပြန်ပြီးအသုံးပြု့လို့ရမယ် အပိုင်းတွေကို component အနေနဲ့ ခွဲထုတ်ဖို့လိုပါတယ်။

Student Component

class Student extends Component {
  render() {
    return (
      <div className="student__item">
          <h1>Name: {this.props.name}</h1>
          <p>Score: {this.props.score}</p>
      </div>
    )
  }
}

StudentList Component

class StudentList extends Component {
  render() {
    const studentList = this.props.students
    .map(({ name, score }) =>
      <Student name={name} score={score}/>
    )
    return (
      <div className="student__list">
        {studentList}
      </div>
    )
  }
}

App.js

import React, { Component } from 'react';
export default class App extends Component {
  render() {
    const students = [
      { name: 'Student A', score: 100 },
      { name: 'Student B', score: 90 }
    ]
    return (
      <div className="app">
        <StudentList students={students}/>
      </div>
    )
  }
}

အခုလိုမျိုး ခွဲထုတ်လိုက်တဲ့အတွက်

ရေးထားတဲ့ code ကို နောက်လူဖတ်ရတာပိုလွယ်သွားတယ် (Readability)
Code Base က သူနေရာနဲ့သူရှိနေတော့ (Maintainability)
One Component => One Responsibility ဖြစ်တဲ့အတွက် (Solid Principle ထဲက တစ်ခုကိုလိုက်နာပြီးသားလည်းဖြစ်ပါတယ်)
Unit Testing လုပ်ဖို့အတွက်လဲပိုပြီး အဆင်ပြေစေပါတယ်။

Two types of React Components

React components တွေကို basically အရ အောက်ပါနှစ်မျိုးနဲ့ ခွဲခြားနိုင်ပါတယ်။

Function Component
Class Component

Function Component

ပထမရေးထုံး

function Student(props) {
  return (
     <div className="student__item">
       <h1>Name: {props.name}</h1>
       <p>Score: {props.score}</p>
     </div>
  );
}

ဒုတိယရေးထုံး

const Student = (props) => {
  return (
    <div className="student__item">
      <h1>Name: {props.name}</h1>
      <p>Score: {props.score}</p>
    </div>
  );
}

Function component တွေက တော့ရိုးရှင်းပါတယ်။ Pure Javascript function တွေဖြစ်ကြပြီး၊ သူ့မှာ single porps object တစ်ခုပါပါတယ်။ ကိုယ် UI မှာမြင်ချင်တဲ့ element တွေကို return အနေနဲ့ ပြန်ပေးရမှာပဲဖြစ်ပါတယ်။
ဒီနေရာမှာ props ဟာဆိုရင် { name: 'Student A', score: 100 } ဆိုတဲ့ javascript object တစ်ခုဖြစ်တဲ့အတွက် student's name ကိုလိုချင်ရင် props.name လို့သုံးပြီးတော့၊ student's score ကိုလိုချင်တဲ့အခါ props.score လို့သုံးသွားတာဖြစ်ပါတယ်။

Class Component

Class component တွေကတော့ ES6 class တွေကို အသုံးပြု့ပြီးရေးသားတာပဲဖြစ်ပါတယ်။
ရေးထုံးကတော့

class Student extends React.Component {
  render() {
    return (
      <div className="student__item">
          <h1>Name: {this.props.name}</h1>
          <p>Score: {this.props.score}</p>
      </div>
    )
  }
}

ES6 class တွေသုံးပြီး react component တွေကို ဖန်တီးတဲ့နေရာမှာ props ဟာဆိုရင်တော့ class ရဲ့ properties အနေနဲ့ရှိနေတာဖြစ်တဲ့အတွက် this.props.name, this.props.score ဆိုပီးသုံးသွားတာဖြစ်ပါတယ်။

References

React component ကို basically နားလည်းချင်ရင်တော့ ဒီမှာ သွားဖတ်လို့ရပါတယ်။
ES6 class features တွေကိုနားလည်းချင်ရင်တော့ ဒီမှာ သွားဖတ်လို့ရပါတယ်။
React component ရဲ့ life circle methods တွေဖတ်ချင်တယ်ဆိုရင်တော့ ဒီမှာ သွားဖတ်လို့ရပါတယ်။

အားလုံးကိုကျေးဇူးတင်ပါတယ်။
ဆက်လက်ကြိုးစားပါအုံးမည်။

React App တစ်ခုကို ၅ မိနစ်အတွင်း ဘယ်လိုဖန်တီးမလဲ?

Ayar Hlaine — Sun, 27 Dec 2020 06:14:46 +0000

Introduction to React

React ဆိုတာ web-development အတွက်အထူးကောင်းမွန်တဲ့ front end, open-sourced javascript library တစ်ခုဖြစ်ပါတယ်။ 2013 May လမှာ Public Release လုပ်ခဲ့ပီးတော့ လက်ရှိအချိန်မှာတော့ Facebook Community ကနေ maintain လုပ်ထားပါတယ်။ အစပိုင်းမှာ သိပ်အသုံးမပြု့ခဲ့ကြပေမဲ့ ယခုနောက်ပိုင်းမှာတော့ တစ်ဖြည်းဖြည်း ရေးပန်းစားလာခဲ့ပြီး အခုအချိန်မှာတော့ UI အတွက် အကောင်းဆုံးနဲ့ Performance အကောင်းဆုံး library တစ်ခုလို့ကိုဆိုနိုင်ပါတယ်။
အခုအချိန်မှာ Company အကြီးတွေနဲ့ Big industries တွေမှာပါ React ကိုအသုံးပြုနေကြတဲ့အပြင် အလုပ်အကိုင်အခွင့်အလမ်းလည်း အထူးကောင်းမွန်နေတယ်။
React ရဲ့ကောင်းတဲ့အချက်တွေ လိုက်ပြေနေမယ် ဆိုရင်တော့ ပြောလိုကိုကုန်မှာမဟုတ်တော့ပါဘူး။

ဒီနေတော့ React Application တစ်ခုကို ၅မိနစ်အတွင်းဘယ်လိုတည်ဆောက်ကြမလဲဆိုတာပြောပြသွားမှာ ဖြစ်ပါတယ်။

Requirements

React Application တစ်ခုစပြီးတည်ဆောက်တော့မယ်ဆို သူနဲ့ဆက်ဆက်တဲ့ requirements တွေနဲ့ tech အတွေအရင်ပြောရမှာပါ။

NodeJS ကို install လုပ်ထားဖို့လိုပါမယ်။ NodeJS ဆိုတာက java script runtime environment တစ်ခုပါ။ ဆိုလိုတာက java script ကို web-browser အပြင်တစ်ခြားနေရာ (ဥပမာ backend service) တွေမှာအသုံးပြု့လို့ရအောင် ဖန်းတီးထားတဲ့နည်းပညာဖြစ်ပါတယ်။ ဒီလင့် မှာ install သွားလုပ်လို့ရပါတယ်။
NPM ဆိုတာ Node Package Manager ဖြစ်ပြီး application တွေ development လုပ်တဲ့အချိန်မှာ လိုအပ်တဲ့ library တွေ၊ Package တွေကို စုစည်းထားပေးတဲ့ source ကြီးပဲဖြစ်ပါတယ်။ Node installation ပြီးတဲ့အခါ npm command ကို စတင်သုံးနိုင်ပါပြီ။ သပ်သပ်ထပ်ပြီး install လုပ်ပေးဖို့ မလိုပါဘူး။

Check Node & NPM versions

အရင်ဆုံး မိမိ့စက်ထဲမှာ NodeJS နဲ့ NPM versions တွေအရင်စစ်ကြည့်လို့ရပါတယ်။ စစ်ကြည့်ဖို့ဆိုရင်တော့ Window User အနေနဲ့ဆိုရင်တော့ Command Prompt, Linux, Mac သမားတွေကတော့ Terminal ကိုဖွင့်ပြီး အောက်ပါအတိုင်းစစ်ဆေးနိုင်ပါတယ်။

How to check Node version?

node -v

How to check NPM version?

npm -v

Get Started React App

WebPack ကိုအသုံးပြု့ပြီး React Application တစ်ခုတည်ဆောက်ခြင်း။
<script tag အတွင်းထည့်သွင်းရေးသားခြင်း။
Create React App ကိုအသုံးပြုပြီး React Application တစ်ခုတည်ဆောက်ခြင်း။ Note တစ်ခြားနည်းလမ်းတွေလည်းရှိ့ပါသေးတယ်။ အသေးစိတ်ဖတ်ခြင်ရင်တော့ ဒီလင့် မှာသွားရောက်ဖတ်ရှု့နိုင်ကြပါတယ်။

အထက်ပါသုံးခု့ထဲကမှ Create React App ကိုအသုံးပြုပြီး React Application တစ်ခုတည်ဆောက်ခြင်း အကြောင်းပြောပြသွားမှာဖြစ်ပါတယ်။

Intro to Create React App

Create React App ဆိုတာက react ကိုစတင်လေ့လာသူတွေနဲ့ single-page-application(SPA) လုပ်ချင်သူတွေအတွက်အသင့်တော်ဆုံးလို့ပြောလို့ရပါတယ်။ ဘာဖြစ်လို့လဲဆိုတော့ သူမှာလိုအပ်တဲ့ configuration, development server, testing setup အစရှိတာတွေအကုန်လုံးပါပီးသား အသင့်သုံးရုံပါပဲ။

Creating React App with Create React App

Older Node JS & NPM versions (Node < 8.10 and npm < 5.6)

create-react-app package ကို globally install အရင်လုပ်ပါ။

npm install -g create-react-app

ပြီးမှ create-react-app ကိုသုံးပြီး react application တည်ဆောက်ပါ။

create-react-app your-application-name
cd your-application-name
npm start

Newer Node JS & NPM versions (Node >= 8.10 and npm >= 5.6)

Node version ကမြင့်တယ်ဆိုရင်တော့ တစ်ကြောင်းတည်းနဲ့ အကုန်ပြီးအောက်တည်ဆောက်လို့ရပါတယ်။

npx create-react-app your-application-name
cd your-application-name
npm start

npm start ဆိုပြီး development server စပြီပြီးဆိုတာနဲ့ Browser မှာ http://localhost:3000 မှာ အောက်ပါအတိုင်း Create React App ရဲ့ Welcome Page ကိုမြင်ရမှာပဲဖြစ်ပါတယ်။

အားလုံးကိုကျေးဇူးတင်ပါတယ်။
ဆက်လက်ကြိုးစားပါအုံးမည်။