DBMS (1) - Tổng quan

1         Tổng quan về DBMS

1.1       Dữ liệu

1.1.1       Dữ liệu là gì?

Theo wiki, trong lĩnh vực máy tính, dữ liệu được hiểu là:

– Một chuỗi gồm một hoặc nhiều kí hiệu (sequence of one or more symbols)

– Được biểu diễn bằng hệ số nhị phân (0 và 1)

– Cần được thông dịch để trở thành thông tin

– Biểu diễn số lượng, tính chất hoặc chỉ dẫn hoạt động; được máy tính lưu trữ trên các ổ đĩa

– Được tổ chức trong nhiều loại cấu trúc dữ liệu khác nhau, như mảng, đồ thị và đối tượng.

Tháp xử lý thông tin: con người và máy tính giống nhau ở chỗ luôn xử lý dữ liệu (data) để có thông tin (information), tri thức (knowledge) và ra quyết định (wisdom).

Dữ liệu bên ngoài có thể ở dạng âm thanh, hình ảnh, số, văn bản, hình vẽ; tuy nhiên khi lưu trong bộ nhớ máy tính sẽ luôn ở dạng nhị phân. Xem hình minh họa,

[Nguồn: https://homepage.cs.uri.edu/faculty/wolfe/book/Readings/Reading02.htm]

1.1.2       Xem và đọc thêm

– Dùng các từ khóa sau để tìm kiếm trên mạng và đọc thêm: dữ liệu, data,

– Dữ liệu: https://vi.wikipedia.org/wiki/D%E1%BB%AF_li%E1%BB%87u

– Data: https://en.wikipedia.org/wiki/Data

1.1.3       Bài tập và thực hành

Bài tập 1. Bạn hãy chuyển các dữ liệu dạng văn bản ở bảng sau sang dạng nhị phân và thập phân.

Dữ liệu dạng văn bản	Dữ liệu dạng nhị phân	Giá trị hệ thập phân
‘A’
‘a’
‘B’
‘b’
‘0’
‘1’
Hi Teo!

[Có thể sử dụng công cụ sau: http://www.unit-conversion.info/texttools/convert-text-to-binary/]

1.1.4       Câu hỏi ôn tập

Câu 1. Dữ liệu dạng nhị phân của kí tự “B” là?

A. 00100010

B. 01000001

C. 01000010

D. 01000110

Câu 2. Theo “Tháp xử lý thông tin”, quá trình xử lý thông tin được thực hiện theo thứ tự nào?

A. Data > Knowledge > Information > Wisdom

B. Information > Data > Knowledge > Wisdom

C. Data > Information  > Wisdom > Knowledge

D. Data > Information > Knowledge > Wisdom

Đáp án: 1 (C), 2 (D)

1.2       Cơ sở dữ liệu

1.2.1       Cơ sở dữ liệu là gì?

Bạn cứ tưởng tượng, nếu cứ lưu một số lượng rất lớn các tập tin hình ảnh, âm thanh, một cách rời rạc trong đĩa cứng; hoặc lưu (không có tổ chức) danh sách hàng trăm ngàn các mặt hàng chưa bán, đã bán; giá cả từng mặt hàng, danh sách khách hàng trong các tập tin văn bản thì sẽ khó khăn tới mức nào khi bạn cần tìm kiếm, thêm, xóa, sửa từng đối tượng trong tập hợp hàng trăm, hàng ngàn đối tượng như vậy. Đó chính là lúc bạn cần nghĩ tới một giải pháp để tổ chức các đối tượng dữ liệu, giúp bạn có thể tổ chức và khai thác dữ liệu một cách tiện lợi; giải pháp đó có tên là Cơ sở dữ liệu.

Cơ sở dữ liệu là một tập hợp thông tin có tổ chức (organized). Các thông tin này được duy trì dưới dạng một tập hợp các tập tin trong hệ điều hành, hoặc được lưu trữ trong các hệ quản trị cơ sở dữ liệu. Cơ sở dữ liệu phản ánh một phần của thế giới thật.

Cơ sở dữ liệu gồm 2 thành phần quan trọng: dữ liệu và cách tổ chức của dữ liệu. Việc lưu trữ, tổ chức quản lý và truy cập là vai trò của các hệ quản trị cơ sở dữ liệu (các phần mềm quản lý cơ sở dữ liệu).

Ưu điểm của cơ sở dữ liệu:

– Giúp người dùng dễ dàng truy cập, quản lý, khai thác và cập nhật thông tin.

– Giảm sự trùng lặp thông tin xuống mức thấp nhất

– Có thể truy xuất thông tin theo nhiều cách

– Cho phép nhiều người cùng sử dụng một lúc

Có nhiều loại cơ sở dữ liệu, ví dụ:

 

Loại cơ sở dữ liệu	Đặc điểm
Cơ sở dữ liệu dạng tập tin	Dữ liệu được lưu trữ dưới dạng các tâp tin (text, ascii, .dbf)
Cơ sở dữ liệu quan hệ	Dữ liệu được lưu trữ trong các bảng dữ liệu gọi là các thực thể, giữa các thực thể này có mối liên hệ với nhau gọi là các quan hệ, mỗi quan hệ có các thuộc tính, trong đó có một thuộc tính là khóa chính. Các hệ quản trị hỗ trợ cơ sở dữ liệu quan hệ như: MS SQL server, Oracle, MySQL.
Cơ sở dữ liệu hướng đối tượng	Dữ liệu cũng được lưu trữ trong các bảng dữ liệu, nhưng các bảng có bổ sung thêm các tính năng hướng đối tượng như lưu trữ thêm các hành vi, nhằm thể hiện hành vi của đối tượng. Mỗi bảng xem như một lớp dữ liệu, mỗi dòng dữ liệu trong bảng là một đối tượng. Các hệ quản trị có hỗ trợ cơ sở dữ liệu hướng đối tượng như: MS SQL server, Oracle, PostgreSQL (viết tắt Postgres).
Cơ sở dữ liệu bán cấu trúc	Dữ liệu được lưu dưới dạng XML, với định dạng này, thông tin mô tả về đối tượng thể hiện trong các thẻ (tag). Ngoài ra, dữ liệu còn được lưu dưới dạng JSON, BSON.

Ví dụ dữ liệu trong cơ sở dữ liệu dạng tập tin

Danh sách câu hỏi, tập tin question.txt

id|question

01|Bạn cảm thấy dễ chịu nhất khi nào?

02|Bạn thường bước đi:

03|Khi nói chuyện với người khác, bạn:

04|Khi nghỉ ngơi, bạn ngồi như thế nào?

05|Khi ngạc nhiên thích thú, bạn phản ứng thế nào?

06|Khi đi dự tiệc, bạn:

07|Bạn đang làm việc và tập trung cao độ thì bị cắt ngang. Bạn sẽ:

08|Bạn thích màu nào nhất trong các màu dưới đây?

09|Khi đi ngủ, lúc sắp ngủ, bạn nằm trong tư thế nào?

10|Bạn thường mơ mình:

Ví dụ dữ liệu trong cơ sở dữ liệu quan hệ

loai_mon_an (Loại món ăn)

#	Name	Type	Collation	Attributes	Null	Default	Extra
1	ma_loai	int(11)			No	None	AUTO_INCREMENT
2	ten_loai	varchar(200)	utf8_unicode_ci		No	None
3	mo_ta	varchar(500)	utf8_unicode_ci		No	None
4	hinh	varchar(100)	utf8_unicode_ci		No	None

Ví dụ dữ liệu trong cơ sở dữ liệu hướng đối tượng (object oriented database)

Ví dụ dữ liệu trong cơ sở dữ liệu bán cấu trúc dạng XML

<!-- question: 335  -->

  <question type="truefalse">

    <name>

      <text>PRJ016</text>

    </name>

    <questiontext format="html">

      <text><![CDATA[You can use the JSTL forTokens tag to loop through items in a delimited string.<p><br></p>]]></text>

    </questiontext>

    <generalfeedback format="html">

      <text></text>

    </generalfeedback>

    <defaultgrade>1.0000000</defaultgrade>

    <penalty>1.0000000</penalty>

    <hidden>0</hidden>

    <idnumber></idnumber>

    <answer fraction="100" format="moodle_auto_format">

      <text>true</text>

      <feedback format="html">

        <text></text>

      </feedback>

    </answer>

    <answer fraction="0" format="moodle_auto_format">

      <text>false</text>

      <feedback format="html">

        <text></text>

      </feedback>

    </answer>

  </question>

Ví dụ, dữ liệu bán cấu trúc dạng JSON

{

     "ten": "Tèo",

    "tuoi": 20,

    "diem": 8,

    "monHoc": [ "Toan", "tiengAnh", "lapTrinh"],

    "totNghiep": null,

    "lienLac":

        {

            "email": "teo@gmail.com",

            "phone": "0999.987.123"

        }

}

1.1.1       Xem và đọc thêm

Object-oriented database (OOD): https://www.youtube.com/watch?v=-_L7f8OObG4&t=314s

1.2.2       Bài tập và thực hành

Mục đích: làm quen với việc tạo một số loại dữ liệu.

Bài tập 1: Thực hiện các công việc sau:

– Xem clip https://www.youtube.com/watch?v=NJknBJDwIf8&list=PLv6GftO355AsZFXlWLKob6tMsWZa4VCY1&index=32

– Thiết kế dữ liệu cho ứng dụng “Trắc nghiệm tính cách”, gồm 3 tập tin dữ liệu questions.txt để chứa câu hỏi; options.txt để chứa các tùy chọn trả lời cho mỗi câu hỏi; và result.txt để chứa kết quả trả về ứng với các lựa chọn.

– Qua việc thiết kế và tạo dữ liệu ở bước trên, bạn hãy chỉ ra: đâu là dữ liệu? đâu là cách thức tổ chức dữ liệu (mối liên hệ giữa các tập tin, giữa các thành phần trong dữ liệu)? đâu là công cụ được sử dụng để lưu trữ, quản lý và khai thác dữ liệu.

Bài tập 2: Đọc bài viết https://legiacong.blogspot.com/2020/10/json-1-lam-quen-voi-json.html

Tạo tập tin data.json, chứa thông tin của một sinh viên.

Bài tập 3. Xem clip https://www.youtube.com/watch?v=0EhtyNsLOVY

Tạo tập tin data.xml, chứa thông tin gửi về của các bộ cảm biến (sensor). Tham khảo Lab 10 (https://legiacong.blogspot.com/2021/03/web-services-3-xml.html)

1.2.3       Câu hỏi ôn tập

Câu 1. JSON là viết tắt của?

A. Java Object Notation

B. JavaScript Object Notation

C. Java Object Notion

D. Java Object Native

Câu 2. XML là viết tắt của?

A. Xtra Microsoft Language

B. eXtensible Makeup Language

C. eXtensible Markup Language

D. eXtension Markdown Language

Câu 3. Các loại cơ sở dữ liệu gồm:

A. Dạng tập tin, quan hệ, hướng đối tượng, bán cấu trúc

B. Dạng tập tin, liên kết, hướng đối tượng, bán cấu trúc

C. Hướng đối tượng, bán cấu trúc, văn bản, web

D. Dạng tập tin, quan hệ, văn bản, bán cấu trúc

Đáp án: 1 (B), 2 (C), 3, (A)

[Video]

-----

Cập nhật: [8/8/2022]

-----

Bài sau: DBMS (2): Làm quen với DBMS

Docker (1) - Docker, image và container

 

1         Tổng quan về Docker

Docker có nghĩa là nhân viên bốc xếp ở bến cảng, nhiệm vụ của anh ta là đưa các container chứa hàng hóa từ các phương tiện vận chuyển khác lên tàu và ngược lại.

Quan sát tình huống thực tế trên bến cảng (nếu không có container – thùng chứa hàng tiêu chuẩn):

– Với rất nhiều loại hàng hóa khác nhau, cần phải sắp xếp hàng hóa sao cho hợp lý? ví dụ các loại hạt nên đặt cạnh nhau, các loại máy móc nên đặt cạnh nhau, đồ dễ vỡ đặt ở đâu thì an toàn.

– Với rất nhiều phương tiện để vận chuyển, và nhiều cách thức lưu kho, làm thế nào để lựa chọn phương tiện/hình thức vận chuyển nhanh và hợp lý?

Với các yêu cầu trên, nhân viên bốc xếp sẽ có rất nhiều lựa chọn, như ma trận dưới đây:

Giải pháp của nhân viên bốc xếp là sử dụng các thùng chứa chuẩn, gọi là các container, bỏ hàng hóa cần vận chuyển vào container. Khi đó việc sắp xếp/vận chuyển hàng hóa sẽ nhanh và đơn giản hơn nhiều.

Quan sát trong môi trường lập trình, lập trình viên (developer) và người quản trị hệ thống (sysadmin) cũng gặp bài toán giống với nhân viên bốc xếp.

Hình sau thể hiện sự phức tạp của môi trường lập trình:

Trong môi trường lập trình, với rất nhiều chồng công nghệ, dịch vụ, thư viện; chúng có thể làm việc được với nhau không? với rất nhiều môi trường phần cứng, thiết bị, server; có thể dễ dàng di chuyển phần mềm đang chạy trên môi trường này tới môi trường khác được không?

Lập trình viên và người quản trị hệ thống lại có một ma trận các lựa chọn:

Giải pháp của lập trình viên là sử dụng các thùng chứa chuẩn, gọi là các container, bỏ các chồng công nghệ, dịch vụ, thư viện, cần sử dụng vào container. Khi đó việc thiết lập môi trường lập trình, di chuyển, chạy ứng dụng sẽ nhanh và đơn giản hơn nhiều.

Với giải pháp của sử dụng docker, lập trình viên sẽ không còn phải tốn nhiều thời gian cho việc lựa chọn, thiết lập môi trường và chạy các ứng dụng trên các môi trường khác nhau nữa, mà tập trung vào việc lập trình, giải quyết các bài toán chuyên môn.

1.1       Docker là gì?

Docker là một nền tảng cho lập trình viên (developers) và người quản trị hệ thống (sysadmin) để phát triển, triển khai và chạy ứng dụng với container. Nó cho phép tạo các môi trường độc lập và tách biệt để khởi chạy và phát triển ứng dụng và môi trường này được gọi là container. Khi cần triển khai (deploy) lên bất kỳ server nào chỉ cần chạy container của Docker thì ứng dụng của bạn sẽ được khởi chạy ngay lập tức.

Để dễ hình dung về hoạt động của docker, quan sát hình ở trên. Bạn sẽ thấy vai trò của docker khá giống với vai trò của hypervisor trong giải pháp máy ảo. Nghĩa là docker là hạ tầng nằm trên hệ điều hành, hạ tầng này cho phép bạn tạo ra một “phân hệ” hay một cái “máy tính mini” (gọi là container) chạy độc lập với hệ điều hành và với phần cứng. Như vậy, vai trò của container gần giống với vai trò của một máy ảo (virtual machine).

Từ hình trên, dễ thấy trong môi trường docker, để có được môi trường lập trình và chạy ứng dụng (App1, Bins/Libs) thì không cần phải có máy ảo/hệ điều hành máy ảo (Guest OS). Điều này giúp việc cài đặt hạ tầng, môi trường lập trình, chạy ứng dụng sẽ đơn giản, và nhanh hơn.

1.2       Cài Docker trên Windows 10:

1.2.1       Kích hoạt Hyper-V

– Sao lại phải kích hoạt Hyper-V? vì Docker có nhiều giải pháp để hoạt động, trong đó có giải pháp dùng luôn hạ tầng Hyper-V.

– Mở PowerShell với quyền Administrator, gõ lệnh sau:

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V –All

1.2.2       Cài đặt Docker

– Tải gói cài đặt Docker về máy (chọn bản Stable)

https://hub.docker.com/editions/community/docker-ce-desktop-windows/

– Sau khi tải gói cài đặt về máy, tiến hành cài đặt Docker

– Sau khi cài đặt xong, trong PowerShell gõ lệnh docker --version, nếu hiển thị phiên bản của Docker là việc cài đặt đã hoàn thành.

Ví dụ:

PS C:\Users\Maxsys> docker --version

Docker version 19.03.12, build 48a66213fe

1.3       Thao tác với image và container

1.3.1       Các thành phần của một hệ thống Docker

Một hệ thống Docker thường gồm bốn thành phần sau :

– Image

– Container

– Registry

– Engine

Image

Image là một gói thực thi, chứa bên trong là tất cả những gì cần thiết, liên quan để chạy ứng dụng như mã nguồn, các thư viện, thành phần thực thi lệnh (runtime), các biến môi trường và các tập tin cấu hình liên quan.

Dùng lệnh docker images để kiểm tra các image hiện đang có trên Docker, dưới đây là ý nghĩa của các cột khi hiển thị.

– REPOSITORY: tên của image

– TAG: phiên bản của image

– IMAGE ID: mã định danh của image

– CREATED: ngày tạo image

– SIZE: kích thước của image

Container

Container là một thể hiện (instance) đang chạy, được khởi tạo từ Image.

Registry

Các image có thể được lưu trong một kho, gọi là Registry, kho này có thể lưu trên mạng

Vào trang https://hub.docker.com/, bấm vào mục Explore để xem các image hiện đang có trong registry trên mạng.

Engine

Engine là phần mềm Docker, cho phép tạo, lưu và chạy các image/container

Lưu ý:

– Một lệnh trong Docker luôn bắt đầu là docker tiếp theo là các chỉ dẫn cụ thể.

– Dùng tham số --help sau mỗi lệnh, để xem các hướng dẫn về một lệnh bất kì.

1.3.2       Xem và tải image bằng PowerShell

Có thể tìm kiếm các image bằng lệnh trên PowerShell, dùng lệnh docker search <tên image>.

Ví dụ: docker search mongodb

Để tải một image về máy, sử dụng lệnh docker pull <tên image:phiên bản>.

Ví dụ: docker pull mongo sẽ tải image mongo về máy với phiên bản mặc định (thường có tên là latest, là bản mới nhất).

Để lấy phiên bản cụ thể (ví dụ 4.4.0) dùng lệnh sau: docker pull mongo:4.4.0

Muốn dừng việc tải image về máy bấm tổ hợp phím Ctrl + C.

1.3.3       Xóa một image trong docker

Như đã biết để xem các image đang có, dùng lệnh docker images

Để xóa một image, dùng lệnh docker image rm <tên image> (rm là viết tắt của remove).

1.3.4        Tạo và thao tác với container

Container chính là một thể hiện (instance) hay là một bản đang chạy của một image, khi đã có image, để tạo container, dùng lệnh docker run <tham số><tên image:phiên bản>.

Ví dụ: docker run –it ubuntu:latest

Xem thêm các tham số ở đây: https://docs.docker.com/engine/reference/run/

Ghi chú: ở ví dụ trên ubuntu:latest là TAG của một image, có thể thay thế TAG bằng IMAGE ID. Khi đó lệnh tạo container sẽ có dạng: docker run –it 4e2eef94cd6b. Khi gõ lệnh, không cần viết đầy đủ giá trị của IMAGE ID, mà chỉ cần nhập 1, 2, hoặc 3 kí tự đầu tiên, mục đích là để phân biệt được với các IMAGE ID đang có trong docker.

Khi container ubuntu được tạo ra, sẽ có dấu nhắc lệnh của ubuntu, ví dụ:

root@8d3f56721c1b:/#

Nhập vào lệnh để kiểm tra một số thông tin của ubuntu, ví dụ:

root@8d3f56721c1b:/#cat /etc/*release

Để xem các container đang chạy trên docker, dùng lệnh docker ps (ps là viết tắt của process status)

Để tắt một container, trong cửa sổ dòng lệnh của container đang chạy, gõ lệnh exit. Ví dụ: root@8d3f56721c1b:/# exit

Để xem tất cả các container (đang chạy hoặc không), dùng lệnh: docker ps -a

Để chạy lại một container, sử dụng lệnh docker start <tên container> hoặc docker start <một phần ID của container>

Để chuyển cửa sổ điều khiển (PowerShell) vào container đang chạy (ví dụ Ubuntu), sử dụng lệnh: docker attach <tên hoặc một phần ID của container>. Ví dụ: docker attach 8d

Muốn chuyển từ giao diện của Ubuntu về lại PowerShell (mà không tắt Ubuntu), sử dụng tổ hợp phím Ctrl + P + Q.

Khi đứng ở dòng lệnh PowerShell mà muốn tắt một container (không cần phải truy cập vào container đang chạy), thì dùng lệnh sau: docker stop <tên hoặc một phần id của container>.

Khi đứng ở dòng lệnh PowerShell, muốn chạy một lệnh của một container, (ví dụ lệnh ls của Ubuntu) thì dùng lệnh sau:

docker exec <tên container> <tên lệnh muốn container thực thi>

Xóa container

docker container rm <tên hoặc một phần ID>

Ví dụ:

docker container rm 8d

1.3.5       Chuyển container thành image

Sau khi có container, thực hiện các cài đặt và cấu hình cần thiết cho container. Để lưu container thành một image, sử dụng lệnh commit.

Muốn commit một container, thì container phải ở trạng thái dừng (exited).

Cú pháp của lệnh commit:

docker commit <tên của container muốn commit> <tên của image sẽ được tạo ra><:tên phiên bản>

Ví dụ:

docker commit 8d ubuntu:v1

1.3.6       Xuất image ra một tập tin

 Để chia sẻ một image cho người khác, có thể lưu image thành một tập tin, với cú pháp sau:

docker save --output <tên tập tin><tên hoặc ID của image>

Ví dụ:

docker save --output ubuntu.rar 70

Tập tin sẽ được tạo ra trong thư mục hiện tại (thư mục thể hiện trên đường dẫn dòng lệnh). Ví dụ: C:\\Users\TenUser.

1.3.7       Tạo image từ một tập tin

Để tạo image từ một tập tin (ví dụ ubuntu.rar), sử dụng lệnh sau:

docker load –i <tên của tập tin>

Ví dụ: docker load -i ubuntu.rar

Đặt tên và phiên bản cho image vừa tạo:

docker tag <ID của image> <tên mới:phiên bản>

Ví dụ: docker tag 70 newimages:v2

-----

Cập nhật: [8/10/2020]

-----

Xem thêm: Docker (2) - Chia sẻ dữ liệu giữa hệ điều hành chủ và container
Xem thêm: Danh sách bài học

MERN (7) - Chương trình React đầu tiên

Bài trước: MERN (6) - JSX và Babel
-----

2.6       NPX

Đọc thêm về npx ở đây: https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b

Nhắc lại, NPM là chương trình quản lý thư viện trong môi trường Nodejs. NPM gồm hai thành phần: một là kho chứa các thư viện, hay các gói (package) (https://www.npmjs.com/), hai là chương trình chạy ở chế độ dòng lệnh.

Các package trong kho chứa được quản lý bằng cơ sở dữ liệu trực tuyến có tên là npm registry.

Chương trình chạy ở chế độ dòng lệnh dùng để tương tác với kho chứa nhằm cài đặt các package, quản lý phiên bản, quản lý các dependency.

Trong Node, mỗi mô-đun chứa trong một tập tin. Ví dụ các mô-đun Circle, Rectangle và Square chứa trong các tập tin sau: Circle.js, Rectangle.js, Square.js.

Package là một thư viện (hay gói), chứa một hoặc nhiều mô-đun. Ví dụ package Shapes sẽ chứa ba mô-đun là Circle, Rectangle và Square.

Nhiều trường hợp thường dùng lẫn lộn giữa mô-đun và package.

Để tải, cài đặt và chạy một package bằng NPM thì cần phải thực hiện một số bước. Ví dụ:

(tham khảo thêm: https://www.youtube.com/watch?v=GNR5iY0N26U&list=PLJ5qtRQovuEOoKffoCBzTfvzMTTORnoyp&index=3)

– Để tải, cài đặt package có tên là create-react-app, gõ lệnh sau (tham số -g có nghĩa là global, giúp chạy được lệnh create-react-app ở mọi vị trí trong máy tính):

npm install -g create-react-app

– Sau khi cài đặt được package create-react-app, để tạo một dự án mới có tên my-react-app1, gõ lệnh sau:

create-react-app my-react-app1

Lệnh trên sẽ tải, cài đặt các package cần thiết khác (ví dụ: react, react-dom, react-scripts), các dependence, để tạo ra dự án react có tên là my-react-app1, mở thư mục my-react-app1 để xem các thư mục, tập tin đã được tạo ra.

[Kết quả - nội dung của thư mục my-react-app1]

my-react-app1/

– .git/

– node_modules/

– public/

– src/

– .gitignore

– package.json

– package-lock.json

– README.md

Vậy có cách nào đơn giản hơn để có chạy một package không? NPX đã được tạo ra để đáp ứng yêu cầu này.

NPX (Node Package Execute): cũng giống như NPM, NPX là công cụ dùng để cài đặt và quản lý các package trong môi trường Node.

NPX được đóng gói sẵn trong công cụ NPM từ phiên bản 5.2 trở đi. NPX sẽ chạy các package, dù là package đó đã được cài đặt trong nội bộ dự án, chưa được cài đặt hoặc đoạn mã đang đặt trên Github.

Như vậy NPX sẽ tìm các package đã có sẵn trong dự án, hoặc các package đã được khai báo trong biến môi trường $PATH để chạy. Trong trường hợp không tìm thấy package, NPX sẽ tải và cài đặt tạm thời package để chạy.

Vậy khi nào nên sử dụng NPM, khi nào thì nên sử dụng NPX?

https://stackoverflow.com/questions/50605219/difference-between-npx-and-npm#:~:text=npx%20is%20a%20npm%20package,it%20in%20a%20single%20step.

– Những package nào chỉ cần chạy một lần trong dự án thì nên sử dụng NPX

– Những package nào cần chạy nhiều lần trong dự án thì nên sử dụng NPM

Ví dụ,

Sử dụng package create-react-app để tạo ra một dự án react, thay vì dùng 2 lệnh (npm để cài đặt, và create-react-app để tạo dự án), thì bạn có thể sử dụng duy nhất một lệnh NPX theo cú pháp sau:

npx create-react-app my-react-app1

2.7       Chương trình react đầu tiên

Nhắc lại, React là một thư viện JavaScript được sử dụng để xây dựng phần giao diện người dùng cho một ứng dụng web.

Để xây dựng phần giao diện web bằng React, bạn cần nhúng thư viện React vào dự án. Vì thư viện React gồm nhiều thành phần, nếu nhúng thủ công sẽ phức tạp và mất thời gian.

Thay vì vậy, bạn sẽ sử dụng package có tên là create-react-app để nhúng React vào dự án.

Muốn sử dụng package create-react-app, bạn cần tải và cài đặt package này bằng công cụ NPM hoặc NPX.

Ví dụ,

– Tạo một thư mục mới (ví dụ: learnReact)

– Mở chương trình dòng lệnh (cmd), chuyển vào thư mục learnReact

– Gõ lệnh npx create-react-app my-react-app1 để tải, cài đặt package create-react-app, và tạo dự án có tên my-react-app1

– Chuyển vào thư mục my-react-app1, gõ lệnh npm start để chạy ứng dụng web đã nhúng React. Nếu chạy thành công, bạn sẽ thấy một trang web trên trình duyệt, với đường dẫn mặc định (ví dụ: http://localhost:3000/), nội dung trang web đơn giản chỉ có dòng chữ “Edit src/App.js and save to reload. Learn React”.

– Bạn có thể đổi cổng mặc định (từ 3000) thành một cổng khác (8000), bằng cách sửa nội dung trong tập tin package.json. Trong tập tin package.json, thay thế dòng ["start": "react-scripts start"] thành ["start": "set port=8000 && react-scripts start"]

– Vào cửa sổ dòng lệnh để dừng ứng dụng web đang chạy trước đó bằng lệnh Ctrl + C, sau đó chạy lại ứng dụng bằng lệnh npm start, xem đường dẫn trên trình duyệt để kiểm tra cổng đã được đổi.

Lab 1. Tạo một dự án web có sử dụng React, cấu hình để có thể truy cập bằng cổng 8888.

Các thành phần chính của một dự án có sử dụng React:

Xem thêm [view]

– .git, .gitignore, README.md: là các thành phần của phần mềm Git, dùng để quản lý phiên bản (không liên quan đến React)

– package.json: chứa các khai báo của dự án, như tên dự án, các thư viện, các dependencies, các package dự án đang sử dụng, các đoạn script thực thi

– node_modules: nơi chứa các package của dự án

– public: chứa tập tin index.html, là tập tin được chạy đầu tiên của ứng dụng (website); và các tài nguyên khác

– src: chứa các tập tin mã nguồn

Lưu ý: ở đây bạn mới học cách sử dụng React để xây dựng (develop) giao diện trang web, tuy nhiên để có giao diện sản phẩm, thì bạn phải thực hiện kết xuất ra trang web sản phầm (build).

Thứ tự thực thi các tập tin trong một ứng dụng React: bắt đầu từ index.html > src/index.js > App.js

Làm giao diện bằng React là tạo ra các component, rồi ghép các component này lại với nhau theo mục đích sử dụng.

Lab 2. Tạo trang “Chào bác Tèo”.

[Hướng dẫn]

– Tạo component ChaoBacTeo: trong thư mục src, tạo mới tập tin ChaoBacTeo.js

[ChaoBacTeo.js]

import React from 'react';

 

function ChaoBacTeo() {

    return (

        <div>

            <h1>Chào bác Tèo teo teo!</h1>

            <p>Đây là component đầu tiên</p>

        </div>

    );

}

 

export default ChaoBacTeo;

– Vào tập tin index.js để nhúng component ChaoBacTeo

Nhúng component ChaoBacTeo:

import ChaoBacTeo from './ChaoBacTeo';

Đổ component ChaoBacTeo vào vị trí id= “root”, tại trang index.html,

ReactDOM.render(

  <React.StrictMode>

    <ChaoBacTeo />

  </React.StrictMode>,

  document.getElementById('root')

)

[index.js]

import React from 'react';

import ReactDOM from 'react-dom';

import ChaoBacTeo from './ChaoBacTeo';

import * as serviceWorker from './serviceWorker';

 

ReactDOM.render(

  <React.StrictMode>

    <ChaoBacTeo />

  </React.StrictMode>,

  document.getElementById('root')

);

 

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();

 

– Mở chương trình cửa sổ dòng lệnh, chuyển vào thư mục dự án, gõ lệnh “npm start” để xem kết quả.

D:\Code_react\codes\react\myproject\my-react-app1>npm start

– Vì Create React App luôn lấy trình duyệt mặc định của hệ điều hành để chạy, nên muốn xem kết quả trên trình duyệt nào, thì chỉ cần cấu hình lại trình duyệt mặc định của hệ điều hành. Cách làm: bấm phím “cửa sổ” trên bàn phím > gõ Settings > trong cửa sổ Settings gõ default > chọn Choose a default web browser > bấm chuột trái vào mục Web browser, chọn trình duyệt mong muốn.

[Kết quả: http://localhost:8000/]

Chào bác Tèo teo teo!

Đây là component đầu tiên

-----

Cập nhật: [09/07/2020]

-----

Xem thêm: MERN (8) -
Xem thêm: Danh sách bài học