Công nghệ

Nếu đã quen với môi trường lập trình Arduino IDE, có thể bạn cũng muốn dùng nó trên Raspberry Pi. Dưới đây là cách cài đặt và chạy Arduino IDE trên Raspberry Pi.

Với máy tính bo mạch đơn Raspberry Pi, bạn có thể chạy nhiều ứng dụng khác nhau, bao gồm cả Arduino IDE phổ biến (môi trường phát triển tích hợp). Điều này có nghĩa bạn có thể dùng nó để dễ dàng lập trình các bộ vi điều khiển với máy tính Raspberry Pi qua USB để tạo các dự án điện tử tương tác.

Giờ hãy cùng nhau tìm hiểu cách cài đặt và chạy Arduino IDE trên Raspberry Pi.

Yêu cầu:

Để chạy Arduino IDE trên Raspberry Pi, bạn cần những thành phần sau:

• Bảng mạch Raspberry Pi 3 hoặc 4 với nguồn điện phù hợp.
• Màn hình HDMI hay TV.
• Thẻ microSD (tối thiểu 8GB cho hệ điều hành Raspberry Pi chính thức).

Thiết lập Raspberry Pi

Raspberry Pi 4 nhờ sức mạnh xử lý nâng cao và RAM dồi dào nên được ưu tiên lựa chọn để cài đặt Arduino IDE. Tuy nhiên, Pi3 cũng có thể hoàn thành tốt nhiệm vụ này. Nếu chưa làm như vậy, hãy cài đặt hệ điều hành Raspberry Pi vào thẻ microSD bằng công cụ Raspberry Pi Imager.

Sau khi hoàn tất cài đặt, chèn thẻ microSD vào Raspberry Pi và kết nối nó với màn hình. Nếu chưa có màn hình, bạn vẫn có thể truy cập Raspberry Pi từ xa trên máy tính khác qua VNC.

Tải Arduino IDE

Arduino IDE 2.2.1 độc quyền dành cho các hệ thống x86-64, trong khi Raspberry Pi hoạt động trên kiến trúc ARM. Tuy nhiên, phiên bản IDE 1.8.19 cũ hơn có khả năng tương đương và cung cấp hỗ trợ cho kiến trúc ARM. Đầu tiên, khởi động thiết bị đầu cuối bằng cách nhấp vào biểu tượng của nó ở đầu môi trường desktop hoặc chỉ cần nhấn Ctrl + Alt + T. Sau đó, tiến hành tải xuống Arduino IDE bằng lệnh sau:

wget https://downloads.arduino.cc/arduino-1.8.19-linuxarm.tar.xz

Cài đặt Arduino IDE

Sau khi quá trình tải hoàn tất, hãy dùng lệnh bên dưới để truy xuất file cần thiết trong phiên terminal hiện tại:

tar -xf arduino-1.8.19-linuxarm.tar.xz

Sau đó, điều hướng vào thư mục arduino-1.8.19:

cd arduino-1.8.19

Để hoàn tất quá trình cài đặt, chỉ cần chạy lệnh install.sh:

sudo ./install.sh

Chạy IDE

Để tìm và mở Arduino IDE, click logo Raspberry ở góc trái phía trên của desktop Raspberry Pi, sau đó chọn Programming > Arduino IDE. Ứng dụng này sẽ mở và bạn có thể bắt đầu lập trình với nó. Như thường lệ, bạn cần kết nối bo mạch vi điều khiển qua USB để flash chương trình vào nó.

Khám phá, thử nghiệm và cải tiến

Bạn đã thành công thiết lập Arduino IDE trên Raspberry Pi. Giờ bạn cso thể upload các chương trình Arduino lên bộ vi điều khiển được kết nối, giống như khi bạn làm với máy tính thông thường.

Trong Arduino IDE, bạn sẽ tìm thấy vô số thư viện toàn diện và một loạt công cụ phong phú. IDE đơn giản hóa quá trình lập trình bộ vi điều khiển, khiến nó trở nên thú vị và dễ tiếp cận.

 

:nth-child() trong CSS đặc biệt hữu ích trong việc tạo kiểu bảng và danh sách phức tạp. Dưới đây là những điều bạn cần biết về :nth-child() trong CSS.

Giống như tất cả bộ chọn CSS, bạn có thể dùng :nth-child() để xác định các thành phần trong một trang web và áp dụng các kiểu khác nhau cho chúng. Thế nhưng bộ chọn này cho phép bạn thu hẹp một nhóm nhân tố dựa trên vị trí quan hệ của chúng.

Bộ chọn này hỗ trợ một số từ khóa cơ bản cho những trường hợp thường gặp. Ngoài ra, nó cũng cung cấp cú pháp kết hợp mẫu mạnh mẽ. Dùng nó, bạn có thể chọn các thành phần dựa trên mẫu thông thường, lặp lại hoặc định nghĩa phức tạp theo nhu cầu.

Cú pháp bộ chọn :nth-child()

Dù là một bộ chọn CSS pseudo-class, cú pháp :nth-child() khác những bộ chọn khác. Nó lấy một đối số làm mẫu để kết hợp các phần tử trong một nhóm thành phần con:

:nth-child(args) {
    /*...*/
}

Trọng tâm chính là các đối số trong ngoặc đơn. Các đối số này xác định tập hợp con của các phần tử cần chọn.

Dùng giá trị từ khóa cho các trường hợp phổ biến

Bộ chọn này có thể chứa hai giá trị từ khóa: odd và even. Chúng đặc biệt hữu ích cho việc tạo kiểu cho các hàng thay thế trong bảng.

Một danh sách theo thứ tự đơn giản là ví dụ hay khác về thời điểm bạn có thể dùng những giá trị từ khóa này:

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ol>

Dùng bộ chọn :nth-child(odd), bạn có thể thay đổi màu sắc của từng mục thay thế:

:nth-child(odd) {
    color: red;
}

Các mục bắt đầu ở index 1, vì thế, mục đầu tiên sẽ hiện màu đỏ, sau đó tới thứ 3… cứ liên tục như vậy:

Linh hoạt hơn bằng ký hiệu chức năng

Bạn có thể dùng một số nguyên duy nhất để chọn một thành phần đơn lẻ, như thế này:

li:nth-child(4) {
    color: red;
}

Trong trường hợp này, bộ chọn chỉ kết hợp mục thứ 4 trong danh sách:

Cú pháp này là một trường hợp đặc biệt của cú pháp chức năng tổng quát hơn nhằm chọn các mục khớp với một mẫu nhất định. Cú pháp này là:

:nth-child(An+B) {
    /*...*/
}

Trong ký hiệu này, A là kích thước bước. Điều này có nghĩa là số lần bộ chọn di chuyển để chọn mục tiếp theo. Nó cho phép bạn chọn mọi mục khác, mọi mục thứ ba, v.v. B là điểm bắt đầu lựa chọn.

Ví dụ, lấy đối số 3n+1:

li:nth-child(3n+1) {
color: red;
}

Điều này sẽ bắt đầu lựa chọn ở mục đầu tiên và tiếp tục với từng mục thứ ba sau đó:

So sánh nó với biểu thức 3n+2:

li:nth-child(3n+2) {
    color:red;
}

Hành động này vẫn chọn từng mục thứ ba, nhưng giờ nó bắt đầu từ mục thứ hai trong danh sách:

Ví dụ thú vị khác là :nth-child(n+3):

li:nth-child(n+3) {
    color: red;
}

Code này sẽ chọn từng mục (n), bắt đầu từ thứ ba (+3). Nó sẽ trông như thế này.

Bạn cũng có thể sử dụng phép trừ để đạt được kết quả nhất định:

li:nth-child(3n-1) {
    color: red;
}

Ví dụ này vẫn chọn từng mục thứ ba, nhưng nó bắt đầu từ “dấu trừ đầu tiên”. Trên thực tế, điều này có nghĩa là nó sẽ chọn mục thứ hai trong danh sách, sau đó là mục thứ năm, v.v.:

Cú pháp of <selector>

Bạn cũng có thể sử dụng từ khóa of được theo sau bởi một selector làm đối số trong bộ chọn :nth-child(). Cú pháp này cho phép bạn thu hẹp các mục có thể mà mẫu thông thường chọn từ đó.

Ví dụ, hãy tưởng tượng đánh dấu của bạn phức tạp hơn bản gốc:

<ol>
    <li class="old">Item 1</li>
    <li class="new">Item 2</li>
    <li class="new">Item 3</li>
    <li class="old">Item 4</li>
    <li class="new">Item 5</li>
    <li class="new">Item 6</li>
    <li class="new">Item 7</li>
</ol>
Now, use :nth-chil

Bây giờ, hãy sử dụng :nth-child để chọn các mục chẵn từ tập hợp các mục có class cụ thể:

.new {
    font-weight: bold;
}

li:nth-child(even of.new) {
    color: red;
}

Lưu ý rằng chỉ những mục in đậm có số chẵn mới có màu đỏ:

Ngoài ra, hãy xem xét điểm khác biệt với li.new:nth-child(even) nhắm mục tiêu các phần tử .new, nhưng chỉ khi chúng là số chẵn. Đây sẽ là mục 2 và 6 trong ví dụ trên.

Trên đây là những điều bạn cần biết về cách dùng bộ chọn :nth-child() trong CSS . Hi vọng bài viết hữu ích với các bạn.

 

Bạn đang muốn xây dựng biểu mẫu Next.JS đẹp mắt. Vậy thì hãy thử làm điều đó với React Hook Form và Material UI.

Material UI (MUI) là một thư viện thành phần phổ biến, triển khai hệ thống Material Design của Google. Nó cung cấp một loạt thành phần UI được tạo trước mà bạn có thể dùng để thiết kế những giao diện đẹp mắt, đa năng và trực quan.

Mặc dù được thiết kế dành cho React, bạn có thể mở rộng chức năng của nó cho những framework khác trong hệ sinh thái của React, chẳng hạn như Next.js.

Hướng dẫn sử dụng React Hook Form và Material UI

React Hook Form là một thư viện phổ biến, mang tới cách khai báo đơn giản để tạo, quản lý và xác thực biểu mẫu.

Bằng cách tích hợp các thành phần và kiểu UI của Material UI, bạn có thể tạo những biểu mẫu đẹp mắt, dễ dùng và áp dụng thiết kế nhất quán cho ứng dụng Next.js.

Để bắt đầu, hãy tạo một dự án Next.js cục bộ. Ở ví dụ này, hãy cài đặt Next.js phiên bản mới nhất:

npx create-next-app@latest next-project --app

Tiếp theo, cài đặt những gói này trong dự án:

npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled

Kết quả như sau:

Tạo và định kiểu biểu mẫu

React Hook Form cung cấp một loạt các hàm tiện ích, bao gồm hook useForm.

Hook này sắp xếp gọn gàng quá trình xử lý trạng thái, xác thực đầu vào và gửi dữ liệu, đơn giản hóa các khía cạnh cơ bản trong quản lý biểu mẫu.

Để tạo biểu mẫu dùng hook này, thêm code sau vào file mới: src/components/form.js.

Đầu tiên, thêm các import cần thiết cho các gói MUI và Reack Hook Form:

"use client"
import React, {useState} from 'react';
import { useForm } from 'react-hook-form';
import { TextField, Button as MuiButton, Alert } from '@mui/material';
import { styled } from '@mui/system';

MUI cung cấp một bộ sưu tập các thành phần UI sẵn sàng sử dụng mà bạn có thể tùy biến sâu hơn bằng cách chuyển các thuộc tính tạo kiểu.

Tuy nhiên, nếu bạn muốn linh hoạt hơn và kiểm soát thiết kế giao diện người dùng, bạn có thể chọn sử dụng phương pháp được tạo kiểu để thiết kế từng thành phần UI bằng các thuộc tính CSS. Trong trường hợp này, bạn có thể tạo kiểu cho các thành phần chính của biểu mẫu: vùng chứa chính, chính biểu mẫu và các trường văn bản đầu vào.

Ngay bên dưới các import, thêm code sau:

const FormContainer = styled('div')({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100vh',
});

const StyledForm = styled('form')({
  width: '80%',
  maxWidth: '400px',
  padding: '20px',
  borderRadius: '10px',
  border: '2px solid #1E3A8A',
  boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.2)',
  backgroundColor: '#ffffff',
  textAlign: 'center',
});

const StyledTextField = styled(TextField)({
  marginBottom: '16px',
  width: '100%',
});

Duy trì codebase mô đun quan trọng trong lập trình. Vì lí do này, thay vì gộp tất cả mã vào một tệp duy nhất, bạn nên xác định và tạo kiểu các thành phần tùy chỉnh trong từng tệp riêng biệt.

Bằng cách này, bạn dễ dàng nhập và dùng những thành phần đó trên các phần khác nhau của ứng dụng, việc này khiến việc sắp xếp và bảo trì code dễ dàng hơn.

Giờ, xác định thành phần chức năng:

export default function Form() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  
  return (
    <>
      <FormContainer>
        <StyledForm>
          <StyledTextField
            label="Username"
            type="text"
          />
          <StyledTextField
            label="Password"
            type="password"
          />
          <MuiButton 
            type="submit" 
            variant="contained" 
            color="primary" 
            margin="5px" 
          > Submit </MuiButton>
        </StyledForm>
      </FormContainer>
    </>
  );
}

Cuối cùng, nhập thành phần này vào file app/page.js. Xóa toàn bộ code Next.js soạn sẵn và update nó như sau:

import Form from 'src/components/Form'

export default function Home() {
  return (
    <main >
      <Form />
    </main>
  )
}

Khởi động server lập trình, bạn sẽ thấy một biểu mẫu cơ bản với hai trường đầu vào và nút gửi trong trình duyệt.

Xử lý xác thực biểu mẫu

Biểu mẫu trông đẹp nhưng nó vẫn chưa làm được gì cả. Để nó có thể chạy, bạn cần thêm một số code xác thực. Các hàm tiện ích hook useForm sẽ hữu ích khi quản lý và xác thực các input của người dùng.

Đầu tiên, xác định biến trạng thái để quản lý trạng thái biểu mẫu hiện tại, phụ thuộc vào việc người dùng có cung cấp thông tin xác thực chính xác hay không. Thêm code này vào bên trong thành phần chức năng:

const [formStatus, setFormStatus] = useState({ success: false, error: '' });

Tiếp theo, tạo hàm xử lý để xác thực thông tin đăng nhập. Hàm này sẽ mô phỏng truy vấn HTTP API thường xảy ra khi các app client tương tác với API xác thực backend.

const onSubmit = (data) => {
    if (data.username === 'testuser' && data.password === 'password123') {
        setFormStatus({ success: true, error: '' });
    } else {
        setFormStatus({ success: false, error: 'Invalid username or password' });
    }
};

Thêm hàm xử lý sự kiện onClick vào thành phần nút bấm – chuyển nó dưới dạng thuộc tính – để kích hoạt hàm onSubmit khi người dùng click vào nút bấm gửi.

onClick={handleSubmit(onSubmit)}

Giá trị của biến trạng thái formStatus quan trọng bởi vì nó sẽ quyết định cách bạn cung cấp phản hồi tới người dùng. Nếu người dùng nhập thông tin xác thực chính xác, bạn có thể hiện thông báo thành công. Nếu có các trang khác trong ứng dụng Next.js, bạn có thể điều hướng chúng tới một trang khác.

Bạn cũng nên cung cấp phản hồi phù hợp nếu thông tin xác thực sai. Material UI cung cấp thành phần phản hồi tuyệt vời mà bạn có thể dùng cùng với kỹ thuật render theo điều kiện của React để thông báo cho người dùng, dựa trên giá trị của formStatus.

Để làm việc này, thêm code sau ngay bên dưới tag mở StyleForm.

{formStatus.success ? (
    <Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
    <Alert severity="error">{formStatus.error}</Alert>
) : null}

Giờ, để nắm bắt và xác thực thông tin đầu vào của người dùng, bạn có thể sử dụng hàm register để đăng ký trường đầu vào của biểu mẫu, theo dõi các giá trị của nó và chỉ định quy tắc xác thực.

Hàm này nhận một số đối số, bao gồm tên của trường nhập và đối tượng các tham số xác thực. Đối tượng này chỉ định các quy tắc xác thực cho trường đầu vào như kiểu và độ dài tối thiểu.

Tiếp tục và bao gồm code sau như một thuộc tính trong tên người dùng, thành phần StyledTextField.

{...register('username', {
    required: 'Username required',
    pattern: {
        value: /^[a-zA-Z0-9_.-]*$/,
        message: 'Invalid characters used'
    },
    minLength: {
        value: 6,
        message: 'Username must be at least 6 characters'
    },
})}

Giờ, thêm đối tượng sau làm thuộc tính trong thành phần password StyledTextField.

{...register('password', {
    required: 'Password required',
    minLength: {
        value: 8,
        message: 'Password must be at least 8 characters'
    },
})}

Thêm code sau vào bên dưới trường đầu vào username để cung cấp phản hồi trực quan theo yêu cầu đầu vào.

Code này sẽ kích hoạt cảnh báo kèm theo thông báo lỗi để thông báo cho người dùng về các yêu cầu, nhằm đảm bảo họ sửa mọi lỗi trước khi gửi biểu mẫu.

{errors.username && <Alert severity="error">{errors.username.message}</Alert>}

Cuối cùng, bao gồm code tương tự ngay bên dưới trường nhập mật khẩu:

{errors.password && <Alert severity="error">{errors.password.message}</Alert>}

Thế là xong! Chúc các bạn thành công!