Đề tài tạo webview với reactjs và mobx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.42 MB, 33 trang )
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM
THỰC TẬP TỐT NGHIỆP
ĐỀ TÀI: Tạo Webview với ReactJs và MobX
Công ty thực tập: Vitalify Asia Co., Ltd.
Lớp: SE501.N11
Sinh viên thực hiện: Nguyễn Yến Nhi – 19520205
TP. Hồ Chí Minh, ngày 20 tháng 12 năm 2022
Nguyễn Yến Nhi
Thực tập tốt nghiệp
NHẬN XÉT
(Của giảng viên)
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
........................................................................................................................
1
Nguyễn Yến Nhi
Thực tập tốt nghiệp
MỤC LỤC
CHƯƠNG 1: GIỚI THIỆU CƠNG TY THỰC TẬP
I. Giới thiệu chung về cơng ty
II. Cơ cấu tổ chức
III. Tổng quan việc kinh doanh
CHƯƠNG 2: NỘI DUNG THỰC TẬP
I. Công nghệ, giải pháp và quy trình áp dụng
1. Giới thiệu về Git
2. Giới thiệu về VSCode
3. Giới thiệu về mơ hình làm việc Agile – Scrum
4. Tìm hiểu về RESTful API
5. Tìm hiểu về ReactJS
6. Vịng đời ReactJS
7. Tìm hiểu về SCSS, BEM naming convention
8. Tìm hiểu về Atomic Design
9. Tìm hiểu về quản lý state với MobX
10. Tìm hiểu về thư viện Axios
6
6
7
7
11
11
11
14
16
20
21
22
24
25
26
26
11. Tìm hiểu về Framework 7
26
II. Dự án Webview kết nối ứng dụng với công cụ vật lý thực tế để theo dõi chỉ số cơ
thể
27
1. Bối cảnh ra đời của dự án
27
2. Nhiệm vụ của sinh viên được giao
27
CHƯƠNG 3: NHẬT KÝ THỰC TẬP
28
CHƯƠNG 4: KẾT QUẢ ĐẠT ĐƯỢC QUA ĐỢT THỰC TẬP
I. Kết quả thu được
II. Các điểm yếu của bản thân
30
30
31
III. Gợi ý cho chương trình học
31
IV. Cảm nhận về công ty
31
DANH MỤC TÀI LIỆU THAM KHẢO
32
2
Nguyễn Yến Nhi
Thực tập tốt nghiệp
LỜI NÓI ĐẦU
Ngày nay, ngành công nghiệp phát triển ứng dụng web là một bộ phận không thể
thiếu của ngành công nghiệp phần mềm. Với tốc độ phát triển vô cùng mạnh mẽ, ngành
phát triển ứng dụng web đã và đang là nhân tố kích thích sự phát triển của cơng nghệ
thơng tin thế giới, cả về phần cứng và phần mềm.
Cùng với xu thế phát triển của thế giới, Việt Nam cũng không phải ngoại lệ.
Ngành công nghiệp phát triển web non trẻ Việt Nam đã và đang phát triển mạnh mẽ, để
hòa nhập với những công ty hàng đầu về xây dựng nền tảng web trên thế giới. Bên cạnh
sự phát triển của web thì những ngành nghề được tiếp cận người dùng một cách nhanh
chóng như những gì ta có thể thấy là mạng xã hội hay những website bán hàng trực tuyến
cũng đang rất thịnh hành trên cả thế giới lẫn Việt Nam.
Sau ba năm học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế,
cũng như muốn được tìm hiểu, bổ sung kiến thức trong một mơi trường chuyên nghiệp,
em có dự định là sẽ thực tập trong học kì. Vì vậy, em quyết định chọn Cơng Ty TNHH
Vitalify Asia - một môi trường lý tưởng, hiện đại, chuyên nghiệp - là nơi sẽ giúp em thực
hiện được dự định này.
3
Nguyễn Yến Nhi
Thực tập tốt nghiệp
LỜI CẢM ƠN
Em xin chân thành cảm ơn ban giám hiệu và quý thầy cô trường Đại học Công
nghệ Thông tin đã cung cấp và bồi dưỡng cho em những kiến thức cơ bản trong suốt 4
năm ngồi trên giảng đường đại học, để từ đó em có nền tảng áp dụng vào đợt thực tập
một cách hiệu quả nhất có thể.
Em xin gửi lời cảm ơn quý Công Ty TNHH Vitalify Asia đã tạo điều kiện cho em
thực tập tại công ty cũng như cung cấp, bổ sung cho em những kiến thức mà em cịn thiếu
sót. Q cơng ty đã hỗ trợ em rất nhiều trong suốt thời gian thực tập vừa qua, dạy em
những kỹ năng cần thiết, truyền đạt cho em những kinh nghiệm mà các anh chị đã trải
qua trong quá trình làm việc, trao đổi với khách hàng, tác phong và tinh thần trách nhiệm
trước công việc được giao, những suy nghĩ tích cực. Các anh chị cũng đã tạo cho em
nhiều điều kiện để ứng dụng những kiến thức đã học vào thực tế để xây dựng những dự
án thực tiễn đi từ lúc ban đầu, nâng cao trình độ, cũng như tốc độ lập trình và trí thức
thêm một bậc. Em xin chân thành cảm ơn.
Vì kiến thức bản thân còn hạn chế cũng như là lần đầu tiên được va chạm và tiếp
xúc với thực tế, áp dụng lý thuyết vào công việc nên bản thân cịn bỡ ngỡ và lúng túng,
khơng tránh khỏi những thiếu sót, mong q Thầy (Cơ) có thể đóng góp ý kiến để em có
thể hồn thiện hơn.
Em xin chân thành cảm ơn!
Nguyễn Yến Nhi
TP. Hồ Chí Minh, ngày 20 tháng 12 năm 2022
4
Nguyễn Yến Nhi
Thực tập tốt nghiệp
DANH MỤC CÁC CỤM TỪ VIẾT TẮT
TNHH
:
Trách nhiệm Hữu hạn
5
Nguyễn Yến Nhi
Thực tập tốt nghiệp
CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP
I.
-
Giới thiệu chung về công ty
Tên đơn vị: CÔNG TY TNHH VITALIFY Á CHÂU (VITALIFY ASIA CO.,
LTD)
Lĩnh vực hoạt động: Xuất bản phần mềm
Địa chỉ: 224A-224B Điện Biên Phủ, Phường Võ Thị Sáu, Quận 3, Thành phố Hồ
Chí Minh, Việt Nam
Trang web: a/
Email:
Điện thoại: +84 (028) 3932 6293
Thời gian làm việc: Thứ 2 đến thứ 6: 08h30 - 17h35
Vision: “Delivering Happiness Through the Internet”
Value: Providing Value to User
Hình 1.1: Logo Cơng ty TNHH Vitalify Asia
-
-
Vitalify Asia là một công ty phát triển ứng dụng web và di động. Công ty cung cấp
dịch vụ phát triển và cải tiến sản phẩm nhanh chóng trên cơ sở DevOps với nhóm
cam kết cung cấp giá trị cho người dùng; sẽ giải quyết mọi thứ, từ lập kế hoạch
đến triển khai dịch vụ nhanh chóng, cải tiến và tăng trưởng cho các doanh nghiệp
doanh nghiệp.
Kể từ khi thành lập vào năm 2008, Vitalify Asia đã tham gia phát triển phần mềm
tập trung vào thiết bị di động để đạt được tầm nhìn "Mang lại hạnh phúc thơng qua
Internet”. Với mục tiêu trở thành một nhóm chuyên nghiệp thực sự có thể cạnh
tranh trên phạm vi toàn cầu, mỗi kỹ sư/thành viên/PM đều mở rộng vai trò và
phạm vi trách nhiệm của cá nhân và cam kết cung cấp giá trị cho người dùng với
cấu trúc chia nhóm nhỏ ưu tú. Bây giờ, hơn 10 năm sau khi thành lập, Vitalify
Asia sắp thử thách một giai đoạn mới để nâng cao hơn nữa giá trị năng lực kỹ
thuật của họ tại Việt Nam. Công ty sẽ tạo ra nhiều sản phẩm "Made In Vietnam"
6
Nguyễn Yến Nhi
Thực tập tốt nghiệp
và bán chúng trên khắp thế giới. Để đạt được mục tiêu này, Vitalify Asia sẽ tiếp
tục nỗ lực cải tiến hàng ngày.
II.
Cơ cấu tổ chức
Vitalify Asia phát triển các ứng dụng web và di động để phù hợp với nhu cầu kinh
doanh của bạn. Nhóm đa quốc gia của cơng ty tại Thành phố Hồ Chí Minh, Việt Nam,
sẽ tham gia nhóm của khách hàng từ xa và cam kết mang lại giá trị cho người dùng
cuối cũng như phát triển dịch vụ của khách hàng để đảm bảo triển khai dịch vụ nhanh
chóng và những cải tiến tiếp theo.
Với kinh nghiệm phát triển hệ thống cho nhiều ngành công nghiệp sử dụng các
công nghệ mới nổi, Vitalify Asia chuyên về các hệ thống có khả năng di động và thời
gian thực. Cơng ty cũng có thể linh hoạt hỗ trợ trong giai đoạn lập kế hoạch, bàn giao
hoạt động và phát triển dịch vụ.
Vitalify Asia được chia ra thành nhiều lab, mỗi lab bao gồm nhiều nhóm dự án và
mỗi nhóm dự án sẽ được tổ chức theo mơ hình Agile Scrum.
Về một số nguyên tắc trong công việc:
-
Mỗi sprint sẽ kéo dài từ 1-2 tuần tuỳ vào dự án.
Ngày bắt đầu của sprint sẽ là thứ 2.
Mỗi ngày developer sẽ gửi lại bản báo cáo công việc cho các BPM quản lý
trước 16h45
Sprint retrospective sẽ được tổ chức linh hoạt sau khi hồn thành xong mỗi
phase
Internal weekly meeting sẽ gồm có
- Code review
- Sprint review
- Sprint retrospective
- Estimate cho spr
III. Tổng quan việc kinh doanh
Một số đặc điểm của Vitalify Asia:
- Sự phát triển của công ty tập trung vào sự phát triển của sản phẩm và cung
cấp giá trị cho người dùng của khách hàng. Với suy nghĩ này, đảm bảo chất
lượng và cải thiện hiệu suất luôn được ưu tiên - từ phân tích kinh doanh đến
ra mắt sản phẩm thơng qua xác định và triển khai u cầu. Ngồi ra, để tiếp
7
Nguyễn Yến Nhi
Thực tập tốt nghiệp
tục tăng trưởng sản phẩm sau khi phát hành, công ty sẽ giới thiệu một loạt
các biện pháp để tăng hiệu quả đồng thời đáp ứng nhanh chóng và linh hoạt
nhu cầu thị trường và phản hồi của người dùng.
Vitalify Asia chuyên về hiệu suất di động, thời gian thực và phát triển hệ thống di
động cho một số ngành:
- Chăm sóc sức khỏe (Telemedicine)
- Fintech
- VR/AR/MR, Metaverse
- Startup (from MVP)
- Mobile / Hyper-casual Games
Trong 13 năm qua, cơng ty có hơn 400 sản phẩm thành công. Mặc dù nhiều thành
tựu trong số này bị hạn chế bởi các thỏa thuận bảo mật, đây là một sản phẩm được
sự cho phép nhắc đến của khách hàng của cơng ty:
1. Hankyou Baizou Kun 反響倍増くん
Visit site: />
Hình 1.2. Hankyou Baizou Kun 反響倍増くん
8
Nguyễn Yến Nhi
Thực tập tốt nghiệp
2. Silly Walkers
Visit site: />Và một số game In house khác:
/>
Hình 1.3. Silly Walkers
3. MAL Smart HRM
Hình 1.4. MAL Smart HRM - Ứng dụng check in chấm công
9
Nguyễn Yến Nhi
Thực tập tốt nghiệp
4. MAL Face Emotion
Visit site: a/en/index.html
Hình 1.5. MAL Face Emotion
10
Nguyễn Yến Nhi
Thực tập tốt nghiệp
CHƯƠNG 2: NỘI DUNG THỰC TẬP
I.
Cơng nghệ, giải pháp và quy trình áp dụng
1. Giới thiệu về Git
Hình 2.1: Mơ hình cơng cụ Git.
Git là tên gọi của một Hệ thống quản lý phiên bản phân tán (Distributed Version
Control System – DVCS) là một trong những hệ thống quản lý phiên bản phân tán phổ
biến nhất hiện nay. DVCS nghĩa là hệ thống giúp mỗi máy tính có thể lưu trữ nhiều phiên
bản khác nhau của một mã nguồn được nhân bản (clone) từ một kho chứa mã nguồn
(repository), mỗi thay đổi vào mã nguồn trên máy tính sẽ có thể ủy thác (commit) rồi
đưa lên máy chủ nơi đặt kho chứa chính. Và một máy tính khác (nếu họ có quyền truy
cập) cũng có thể clone lại mã nguồn từ kho chứa hoặc clone lại một tập hợp các thay đổi
mới nhất trên máy tính kia. Trong Git, thư mục làm việc trên máy tính gọi là Working
Tree.
11
Nguyễn Yến Nhi
Thực tập tốt nghiệp
Hình 2.2: Sơ đồ liên hệ giữa các máy tính.
Ngồi ra, có một cách hiểu khác về Git đơn giản hơn đó là nó sẽ giúp bạn lưu lại
các phiên bản của những lần thay đổi vào mã nguồn và có thể dễ dàng khơi phục lại dễ
dàng mà không cần copy lại mã nguồn rồi cất vào đâu đó. Và một người khác có thể xem
12
Nguyễn Yến Nhi
Thực tập tốt nghiệp
các thay đổi của bạn ở từng phiên bản, họ cũng có thể đối chiếu các thay đổi của bạn rồi
gộp phiên bản của bạn vào phiên bản của họ. Cuối cùng là tất cả có thể đưa các thay đổi
vào mã nguồn của mình lên một kho chứa mã nguồn.
Cơ chế lưu trữ phiên bản của Git là nó sẽ tạo ra một “ảnh chụp” (snapshot) trên
mỗi tập tin và thư mục sau khi commit, từ đó nó có thể cho phép bạn tái sử dụng lại một
ảnh chụp nào đó mà bạn có thể hiểu đó là một phiên bản. Đây cũng chính là lợi thế của
Git so với các DVCS khác khi nó khơng “lưu cứng” dữ liệu mà sẽ lưu với dạng snapshot.
Hình 2.3: Sơ đồ cơ cấu của Git.
-
Master: là nhánh chính, run trên production.
-
Dev: là nhánh replica cho nhánh master cộng với các nhánh feature đang được
phát triển.
-
Feature: được tách từ nhánh dev, chức năng sau khi được phát triển sẽ được merge
vào dev trước khi merge vào master.
13
Nguyễn Yến Nhi
Thực tập tốt nghiệp
Hình 2.4: Git branching.
2. Giới thiệu về VSCode
Hình 2.5: Chương trình VSCode
Visual Studio Code là sản phẩm của Microsoft, ra mắt vào tháng 4 năm 2015 ở hội nghị
Build. Đặc điểm nổi bật là đơn giản, gọn nhẹ, dễ dàng cài đặt.
14
Nguyễn Yến Nhi
Thực tập tốt nghiệp
Visual Studio Code có thể cài đặt được trên cả Windows, Linux và Mac OS và hỗ trợ
nhiều ngơn ngữ khác nhau.
Hình ảnh giao diện ban đầu của VSCode như sau:
Hình 2.6: Giao diện ban đầu của VSCode.
Nhìn sang thanh sidebar ta thấy 4 biểu tượng, đầu tiên là hai tờ giấy xếp chồng lên
nhau, đây là cây thư mục chứ những file mà chúng ta đang làm việc. Hình chiếc kính lúp
hỗ trợ chức năng tìm kiếm. Một điểm đặc biệt là Visual Studio Code được tính hợp ln
git, rất tiện cho việc quản lý code của chúng ta.
Biểu tượng thứ 4 là diệt con bọ, chính là chức năng hỗ trợ chúng ta fix bug. Hình
vng cuối cùng là nơi cho phép chúng ta cài thêm các phần extensions mà Microsoft và
cộng đồng viết thêm cho chúng ta, hỗ trợ quá trình code.
15
Nguyễn Yến Nhi
Thực tập tốt nghiệp
3. Giới thiệu về mô hình làm việc Agile – Scrum
● Tại sao cần Agile?
Sự khác nhau giữa phương pháp làm việc truyền thống-Waterfall và Agile có thể
tổng kết trong 2 từ: cứng nhắc và linh hoạt. Trong khi Waterfall là 1 process khá cứng
nhắc và nguyên tắc, thì Agile lại rất linh hoạt và không ngừng thay đổi sao cho phù hợp
với thời đại và ý kiến của khách hàng . Chi tiết hơn về sự khác nhau như sau:
-
-
Waterfall là quy trình có cấu trúc, bạn không thể bắt đầu công đoạn mới cho
đến khi cơng đoạn trước đấy được hồn thành. Agile là quy trình linh hoạt, cho
phép bạn chạy dự án theo cách mà bạn muốn. Waterfall là tuần tự, và Agile thì
khơng ép buộc vào 1 quy trình tuần tự nào.
Các dự án theo quy trình Waterfall thường cần define cụ thể yêu cầu của dự án,
trong khi các yêu cầu trong các dự án Agile có thể thay đổi và phát triển.
Trong các dự án Waterfall, bạn không thể thay đổi những thứ bạn đã làm trong
những công đoạn trước, tuy nhiên Agile rất phù hợp và có thể đáp ứng được các
thay đổi.
Hình 2.7: Mơ hình Agile và Waterfall.
Một cách tổng quát, khi một sản phẩm được xây dựng theo mơ hình Waterfall, thì các
cơng việc trong dự án được xác định theo nguyên tắc lúc ban đầu, và không tiếp thu được
16
Nguyễn Yến Nhi
Thực tập tốt nghiệp
ý kiến của người sử dụng trong quá trình hình thành sản phẩm. Việc giành quá nhiều thời
gian cho một sản phẩm mà không biết được rằng mức độ khả thi cũng như những điều
mà người sử dụng quan tâm sẽ gây ảnh hưởng rất nhiều đến chất lượng sản phẩm.
Trong khi đó, Agile giúp các nhà phát triển có thể nhận dạng, điều chỉnh các vấn đề và
khiếm khuyết một cách nhanh chóng. Các điểm mạnh của Agile là:
-
-
-
-
-
Thực hiện thay đổi dễ dàng: Bởi vì dự án được chia thành các phần nhỏ,
riêng biệt, không phụ thuộc lẫn nhau, nên những thay đổi được thực hiện rất
dễ dàng, ở bất kỳ giai đoạn nào của dự án.
Không cần phải nắm mọi thông tin ngay từ đầu: Phù hợp với những dự án
chưa xác định được mục tiêu cuối cùng rõ ràng, vì việc này không quá cần
thiết trong giai đoạn đầu.
Bàn giao nhanh hơn: Việc chia nhỏ dự án cho phép đội ngũ có thể tiến hành
kiểm tra theo từng phần, xác định và sửa chữa vấn đề nhanh hơn, nhờ đó việc
bàn giao công việc sẽ nhất quán và thành công hơn.
Chú ý đến phản hồi của khách hàng và người dùng: Cả khách hàng và người
dùng cuối đều có cơ hội để đóng góp các ý kiến và phản hồi, từ đó họ sẽ có
ảnh hưởng một cách mạnh mẽ và tích cực tới sản phẩm cuối cùng.
Cải tiến liên tục: Agile khuyến khích thành viên trong đội ngũ làm việc và
khách hàng cung cấp phản hồi của mình, khi đó các giai đoạn khác nhau của
sản phẩm cuối có thể được kiểm tra và cải thiện lại nhiều lần nếu cần.
Trong ngành công nghiệp phần mềm, phương thức sản xuất phần mềm có một vai trị
vơ cùng quan trọng, nó quyết định cấu trúc tổ chức, qui trình phát triển, khả năng thành
công của các dự án. Trong những năm gần đây Agile- Scrum nổi lên và thay thế mô hình
thác nước (Waterfall) truyền thống như một phương thức tổ chức sản xuất ưu việt được
nhiều công ty phần mềm áp dụng và thành công. Quản lý dự án theo nguyên tắc Agile nổi
lên như một sự thay thế tối ưu cho bất kì dự án nào.
17
Nguyễn Yến Nhi
Thực tập tốt nghiệp
Hình 2.8: Quy trình Agile.
● Định nghĩa mơ hình Agile.
Khái niệm Agile (viết tắt của Agile Software Development) có nghĩa là phương thức
phát triển phần mềm linh hoạt, được ứng dụng trong quy trình phát triển phần mềm với
mục tiêu là đưa sản phẩm đến tay người dùng càng nhanh càng tốt. Nguyên tắc phát
triển mơ hình là phân đoạn lặp (iterative) và tăng trưởng (incremental), theo đó nhu
cầu và giải pháp tiến hóa thơng qua sự hợp tác giữa các nhóm tự quản và liên chức năng.
Rất nhiều nơi định nghĩa Agile như một phương pháp. Thực chất, Agile giống như
một phương pháp luận, một triết lý dựa trên hơn nguyên tắc phân đoạn vịng lặp
(iterative) và tăng trưởng (incremental).
Ngày nay, triết lí Agile đã vượt xa khỏi khu vực truyền thống của mình là phát triển
phần mềm để đóng góp sự thay đổi trong cách thức làm việc, quản lí, sản xuất ở các
ngành khác như sản xuất, dịch vụ, sales, marketing, giáo dục... và trở thành một phương
thức quản lý dự án phổ biến nhất hiện nay với nhiều đại diện được gọi là các phương
pháp “họ Agile”.
● 4 tôn chỉ trong Agile
18
Nguyễn Yến Nhi
-
-
-
Thực tập tốt nghiệp
Cá nhân và sự tương hỗ quan trọng hơn quy trình và cơng cụ: Trọng tâm đặt lên
con người, xây dựng tương tác và hỗ trợ giữa các thành viên trong nhóm.
Những thành viên có năng lực, chịu tương trợ nhau trong công việc sẽ mang
đến thành công cho dự án.
Sản phẩm dùng được tốt hơn tài liệu đầy đủ: Tập trung thời gian để làm ra phần
mềm hoàn chỉnh đáp ứng hoàn hảo yêu cầu khách hàng.
Cộng tác với khách hàng quan trọng hơn đàm phán hợp đồng: Hiểu được khách
hàng cần gì để tư vấn và điều chỉnh sản phẩm thay vì chỉ dựa vào các điều
khoản trong hợp đồng.
Phản hồi thay đổi hơn là bám sát kế hoạch: Agile khuyến khích thích nghi với
sự thay đổi, đó có thể là thay đổi về cơng nghệ, nhân sự, deadline,...
12 Ngun tắc
●
-
Đáp ứng tồn diện nhu cầu khách hàng thông qua việc giao hàng sớm và sản
phẩm có giá trị.
Thay đổi yêu cầu được chào đón, thậm chí là rất muộn trong q trình phát
triển.
Giao phần mềm chạy được cho khách hàng một cách thường xuyên.
Nhà kinh doanh và các kỹ sư phần mềm cần làm việc cùng nhau trong suốt dự
án.
Xây dựng dự án xung quanh các cá nhân có động lực. Cung cấp sự hỗ trợ cần
thiết, môi trường làm việc và niềm tin để hồn thành cơng việc.
Trao đổi trực tiếp là cách truyền đạt thơng tin hiệu quả nhất.
Thước đo chính của tiến độ là phần mềm chạy tốt.
Phát triển liên tục và bền vững.
Cải tiến sự linh hoạt bằng cách quan tâm đến kỹ thuật và thiết kế.
Nghệ thuật tối đa hóa lượng cơng việc chưa xong - Sự đơn giản là cần thiết.
Nhóm tự tổ chức
Thích ứng thường xun với những thay đổi.
● Các bước làm việc theo Agile - Scrum
Scrum định nghĩa quy tắc cho bốn sự kiện chủ chốt nhằm tạo môi trường và quy cách
hoạt động và cộng tác cho các thành viên trong dự án. Các sự kiện này diễn ra trước khi
Sprint bắt đầu (là sự kiện lập kế hoạch – Sprint Planning), trong khi Sprint diễn ra (sự
kiện Daily Scrum) và sau khi Sprint kết thúc (sự kiện Sprint Review và Sprint
Retrospective).
19
Nguyễn Yến Nhi
-
-
-
-
Thực tập tốt nghiệp
Sprint Planning (Họp Kế hoạch Sprint- Iteration): Nhóm phát triển gặp gỡ với
Product Owner để lên kế hoạch làm việc cho một Sprint (xem thêm phần Sprint
bên dưới). Công việc lập kế hoạch bao gồm việc chọn lựa các yêu cầu cần phải
phát triển, phân tích và nhận biết các cơng việc phải làm kèm theo các ước
lượng thời gian cần thiết để hoàn tất các tác vụ. Chia nhỏ công việc thành các
backlog (task) để có thể theo dõi tiến độ dự án dễ dàng hơn. Scrum sử dụng
cách thức lập kế hoạch từng phần và tăng dần theo thời gian, theo đó, việc lập
kế hoạch không diễn ra duy nhất một lần trong vòng đời của dự án mà được lặp
đi lặp lại, có sự thích nghi với các tình hình thực tiễn trong tiến trình đi đến sản
phẩm.
Daily Scrum (Họp Scrum hằng ngày): Scrum Master tổ chức cho Đội sản xuất
họp hằng ngày trong khoảng 15 phút để Nhóm Phát triển chia sẻ tiến độ cơng
việc cũng như chia sẻ các khó khăn gặp phải trong quá trình phát triển phần
mềm suốt một Sprint.
Sprint Review (Họp Sơ kết Sprint): Cuối Sprint, nhóm phát triển cùng với
Product Owner sẽ rà soát lại các cơng việc đã hồn tất (DONE) trong Sprint vừa
qua và đề xuất các chỉnh sửa hoặc thay đổi cần thiết cho sản phẩm.
Sprint Retrospective (Họp Cải tiến Sprint): Dưới sự trợ giúp của Scrum
Master, nhóm phát triển sẽ rà sốt lại tồn diện Sprint vừa kết thúc và tìm cách
cải tiến quy trình làm việc cũng như bản thân sản phẩm.
4. Tìm hiểu về RESTful API
API (Application Programming Interface) là một tập các quy tắc và cơ chế mà theo
đó, một ứng dụng hay một thành phần sẽ tương tác với một ứng dụng hay thành phần
khác. API có thể trả về dữ liệu mà bạn cần cho ứng dụng của mình ở những kiểu dữ liệu
phổ biến như JSON hay XML.
REST (REpresentational State Transfer) là một dạng chuyển đổi cấu trúc dữ liệu,
một kiểu kiến trúc để viết API. Nó sử dụng phương thức HTTP đơn giản để tạo cho giao
tiếp giữa các máy. Vì vậy, thay vì sử dụng một URL cho việc xử lý một số thông tin
người dùng, REST gửi một yêu cầu HTTP như GET, POST, DELETE, vv đến một URL
để xử lý dữ liệu.
RESTful API là một tiêu chuẩn dùng trong việc thiết kế các API cho các ứng dụng
web để quản lý các resource. RESTful là một trong những kiểu thiết kế API được sử
dụng phổ biến ngày nay để cho các ứng dụng (web, mobile…) khác nhau giao tiếp với
nhau.
20
Nguyễn Yến Nhi
Thực tập tốt nghiệp
REST hoạt động chủ yếu dựa vào giao thức HTTP. Các hoạt động cơ bản nêu trên sẽ sử
dụng những phương thức HTTP riêng.
●
●
●
●
GET (SELECT): Trả về một Resource hoặc một danh sách Resource.
POST (CREATE): Tạo mới một Resource.
PUT (UPDATE): Cập nhật thông tin cho Resource.
DELETE (DELETE): Xoá một Resource.
Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng với
Create, Read, Update, Delete – Tạo, Đọc, Sửa, Xóa.
5. Tìm hiểu về ReactJS
Hình 2.11: Logo ReactJS
React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với xu
hướng Single Page Application. Trong khi những framework khác cố gắng hướng đến
một mơ hình MVC hồn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với
những thư viện Javascript khác. Nếu như AngularJS là một Framework cho phép nhúng
code javascript trong code html thông qua các attribute như ng-model, ng-repeat...thì với
React là một library cho phép nhúng code html trong code javascript nhờ vào JSX, bạn
có thể dễ dàng lồng các đoạn HTML vào trong JS.Tích hợp giữa javascript và HTML vào
trong JSX làm cho các component dễ hiểu hơn.
/>
21
Nguyễn Yến Nhi
Thực tập tốt nghiệp
6. Vịng đời ReactJS
Hình 2.12: Vịng đời ReactJS
Một vịng đời sẽ có trạng thái như sau:
● Initialization
-
Tương tự hàm khởi tạo (constructor) được gọi đến khi một thể hiện của
component được tạo ra.
● Mounting
Là các hàm gắn kết, kết nối các component với nhau.
-
componentWillMount()
▪
Được gọi đến trước khi hiển thị component ra ngồi trình duyệt. Q trình
này diễn ra hết sức nhanh chóng, vì vậy không nên làm quá nhiều điều tại
đây và hàm này được thực hiện một lần duy nhất (từ phiên bản 16.3 thì hàm
này khơng được khuyến khích dùng và sẽ bị loại bỏ ở bản 17).
-
Render()
▪
Được gọi khi hiển thị component ra ngồi trình duyệt.
▪
Sẽ return về nội dung mà bạn đã viết, có thể là một component hoặc null
hoặc là false (trong trường hợp khơng muốn render gì cả).
22
Nguyễn Yến Nhi
-
Thực tập tốt nghiệp
componentDidMount()
▪
Được gọi sau khi đã hiển thị component ra ngồi trình duyệt, và hàm này
được thực hiện một lần duy nhất.
▪
Hàm này được gọi để thơng báo component đã tồn tại trên DOM, từ đó các
thao tác trên DOM có thể thực hiện bình thường với component này.
Đầu tiên khi component được gọi thì hàm hàm constructor() được gọi, sau đó đến
componentWillMount(), tiếp theo là reder() ra ngoài và cuối cùng hàm
componentDidMount được gọi khi đã render() xong.
● Updation
Là các vấn đề khi mình update component về props, về state.
-
componentWillReceiveProps(nextProps)
▪
Hàm này được chạy khi mà props của component đã được sinh ra có sự
thay đổi.
▪
-
Phải gọi setState() nếu muốn render lại.
shouldComponentUpdate(nextProps, nextState)
▪
Được thực hiện ngay sau khi state và props thay đổi.
▪
sẽ trả về kết quả true or false. Phương thức này sẽ xác định 1 component có
được update hay khơng. Mặc định giá trị này là true. Nếu bạn không muốn
component render lại sau khi update state hay props thì return giá trị thành
false.
-
componentWillUpdate(nextProps, nextState)
▪
Được gọi khi chúng ta update state của component trước khi nó render lại.
▪
Bạn khơng thể gọi this.setState trong componentWillUpdate
23
Nguyễn Yến Nhi
Thực tập tốt nghiệp
▪
Hàm render sẽ được gọi ngay sau hàm này.
▪
(từ phiên bản 16.3 thì hàm này khơng được khuyến khích dùng và sẽ bị loại
bỏ ở bản 17)
-
componentDidUpdate(prevProps, prevState)
▪
Được gọi khi một component instance update, componentDidUpdate sẽ
được gọi sau khi render HTML được loading xong.
● Unmounting
- componentWillUnmount()
▪
Được gọi trước khi một component bị remove khỏi một DOM.
7. Tìm hiểu về SCSS, BEM naming convention
BEM là viết tắt của Block-Element-Modifier, là một tiêu chuẩn quy ước đặt tên
cho các tên lớp CSS. BEM giúp cho việc code Frontend dễ đọc và dễ hiểu hơn, dễ
làm việc và dễ mở rộng cũng như bảo trì khi làm việc với CSS.
Quy ước đặt tên của BEM:
.block {}
/* Block */
.block__element {}
.block--modifier {}
/* Element */
/* Modifier */
Block: Là một thành phần của trang web hay ứng dụng đó, các thành phần của
DOM cũng có thể là các block. Block ở đây thường là các thành phần header, body,
content, footer.
Element: Là một thành phần của một block và sẽ không tồn tại độc lập mà khơng
có block vì được đặt bên trong nó, và chúng phụ thuộc vào parent block của nó. Trong
BEM, các phần tử được biểu thị bằng dấu gạch dưới kép __
Modifier: Được dùng để thao tác thay đổi cách hiển thị trên block hoặc phần tử.
Ví dụ mình muốn tạo thêm một block .block__elem khác nữa và muốn làm nổi bật nó thì
sẽ thêm một class .block__elem--hightlight để tạo sự khác biệt đó.
24
