<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TINKHOA CÔNG NGHỆ PHẦN MỀM</b>

<b>BÁO CÁO THỰC TẬP TỐT NGHIỆP</b>

<b>LẬP TRÌNH FRONT END WEBTRÊN NỀN TẢNG VUEJS</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>LỜI MỞ ĐẦU</b>

Trong cuộc cách mạng công nghiệp 4.0, công nghệ thơng tin nói chung và ngànhCơng nghệ phần mềm nói riêng ln là nhân tố đóng vai trị quan trọng trong q trìnhphát triển của xã hội.

Cơng nghệ Web, hay công nghệ sản xuất các trang web đã phục vụ hầu hết các nhucầu của con người từ bán hàng, cung cấp kiến thức đến thông tin liên lạc, ... Hiện nayđã có đến hơn 1.5 tỷ trang web, nhưng nhu cầu tạo ra những trang web mới vẫn chưacó dấu hiệu giảm.

Do đó, một trang web muốn được nhiều người sử dụng phải đáp ứng được yếu tố hìnhthức và nội dung. Làm thế nào để sản phẩm tạo ra đạt chất lượng cao ở hai yếu tố trênln làm bất kì một đội ngũ phát triển website nào cũng cần phải suy nghĩ đau đầu. Đểthử thách bản thân trong ngành công nghiệp web, em đã lựa chọn Full stack webdeveloper là định hướng cho việc học cũng như nghề nghiệp trong tương lai.

Sau những năm tháng trong môi trường đại học, với mong muốn áp dụng những kiếnthức đã học và có được trải nghiệm trong môi trường thực tế, em đã quyết định thamgia vào Evergloww – một môi trường lý tưởng và chuyên nghiệp để thực hiện dựđịnh.

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>LỜI CẢM ƠN</b>

Lời đầu tiên, em muốn chân thành bày tỏ lòng biết ơn đến toàn bộ đội ngũ Everglowwvà đặc biệt là Flipjungle team, nơi đã mở ra cho em cánh cửa của cơ hội thực tập vàtrải nghiệm thực tế trong một môi trường làm việc chuyên nghiệp và tận tâm.

Trong suốt 3 tháng thực tập, em đã có cơ hội vô cùng quý báu được học hỏi và pháttriển bản thân dưới sự hướng dẫn nhiệt tình của các anh chị mentor và trainer. Nhữngkiến thức quan trọng và cần thiết về phát triển ứng dụng di động, cũng như kiến thứcnền tảng để làm việc trong môi trường công ty, đã được em tiếp thu một cách chânthực và hiệu quả.

Em biết ơn sự đồng lòng của các anh chị, những người đã không ngần ngại dành thờigian và công sức để hướng dẫn, chỉ dạy, và giúp đỡ em. Sự chuyên nghiệp và tận tâmcủa mọi người không chỉ giúp em vượt qua những thách thức mà còn giúp em hồnthành q trình thực tập theo kế hoạch ban đầu.

Ngồi ra, em cũng muốn bày tỏ lịng biết ơn đặc biệt đến các anh chị trong teamdesign, backend và QA/QC đã hỗ trợ và hướng dẫn em trong suốt chặng đường thựctập.

Em xin gửi lời cảm ơn sâu sắc đến toàn bộ đội ngũ Lecle Vietnam, và đặc biệt là đếncác anh chị đã là nguồn động viên và nguồn tri thức quý báu cho sự phát triển của em.Cảm ơn vì tất cả những gì em đã được học và trải nghiệm tại đây, em tin rằng nhữngkinh nghiệm này sẽ là nền tảng vững chắc cho sự nghiệp sắp tới của em.

Cuối cùng, em không quên bày tỏ lịng biết ơn đến các thầy cơ trong khoa Công nghệPhần mềm, người đã tạo điều kiện và hỗ trợ em để có thể hồn thành báo cáo thực tậpnày.

TP. HCM, ngày 02 tháng 01 năm 2024Huỳnh Minh Chí

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

1.4. Lịch làm việc khi thực tập tại cơng ty...7

CHƯƠNG 2: NỘI DUNG THỰC TẬP...10

2.1. Tìm hiểu công ty và các kỹ năng cơ bản trong công ty...10

2.2. Nghiên cứu kỹ thuật... 10

2.2.1. Các công cụ làm việcThời gian: 2 ngày... 10

2.2.2. Làm quen với Vuejs...10

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

<b>CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP</b>

1.1. Giới thiệu

<i>Hình 1.1. Logo của dự án Flipjungle</i>

- Địa chỉ: Số 19 đường 46, phường Thảo Điền, thành phố Thủ Đức, thành phốHồ Chí Minh, Việt Nam.

- Website: Quy mô công ty: 11-50 nhân viên

- Công ty TNHH EverGloww là cơng ty chun về lĩnh vực CNTT có kinhnghiệm làm việc nhiều năm cho những khách hàng trong và ngồi nước để xâydựng các ứng dụng giáo dục có tích hợp trí tuệ nhân tạo dành cho trẻ em.

1.2. Lịch sử hình thành

- Cơng ty TNHH Evergloww được thành lập vào ngày 10/05/2019 theo giấyphép đăng ký kinh doanh số 0108732344 của Chi cục Thuế Quận Cầu Giấy.Trải qua quá trình hình thành và phát triển, cùng với sự cố gắng của mình,Evergloww hiện đang góp mặt tại những thị trường như: Korea, Singapore vàVietNam.

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

1.3. Sản phẩm công ty

- Công ty đang xây dựng một ứng dụng web mang tính giáo dục dành cho trẻem, nó hướng đến sự phát triển tồn diện của trẻ em từ ngôn ngữ cho tới kỹnăng như: xử lý tình huống, tranh biện, … Ứng dụng sẽ cho phép người dùngnhắn tin với những người bạn hoạt hình, với trình độ chun mơn cao, cơng tyđã tạo ra hàng loạt các nhân vật hoạt hình có thể trị chuyện để trẻ em có thểhọc hỏi và giải trí. Bên cạnh đó, nó cịn cho phép người dùng viết nhật ký hàngngày bằng cách trò chuyện trực tiếp với một nhân vật có thể tâm sự trực tiếpvới người dùng. Hơn nữa nó có thể theo dõi hành vi của đứa trẻ bằng cách xácđịnh xem câu trò chuyện của trẻ là tích cực hay tiêu cực để cảnh báo tới phụhuynh.

<i>Hình 1.2. Flipjungle</i>

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

1.4. Lịch làm việc khi thực tập tại công ty

Tuần Công việc Người hướngdẫn

Mức độhoàn thành

Nhận xét củangười hướng dẫn1 - Làm quen với các nhân

viên của cơng ty, cách tổchức, quy trình làm việc ởcông ty.

- Làm quen với các công cụlàm việc của công ty.- Học cách trao đổi, làmviệc qua email và các tàikhoản công ty cung cấp(quản lý source code, xinphép, ...).

Anh Lê Văn Vũ

Đức Long ^100% ^{Sinh viên hồ}đồng, tiếpthu quy trìnhnhanh.

2 - Tìm hiểu và học tập cáckiến thức của frameworkVueJS

- Thực hành kiến thức đãđược hướng dẫn và củng cố.- Làm bài test nhỏ về cáckiến thức đã được hướngdẫn.

Anh Lê Văn VũĐức Long

100% Nắm đủ kiến thứccơ bản.

Sinh viên đượcthực hành lại kiếnthức đã có, cũngnhư được góp ý đểcải thiện cách làmđược tốt hơn.3 - Training kiến thức về

storage VueX

- Thực hành các bài test nhỏđể củng cố kiến thức

Anh Lê Văn VũĐức Long

100% Nắm đủ kiến thứccơ bản.

Sinh viên đượcthực hành lại kiếnthức đã có, cũngnhư được góp ý đểcải thiện cách làmđược tốt hơn.4 - Chuẩn bị các kiến thức đã

được học để bước vào dự ánthực tế.

- Làm quen với kiến trúc củadự án.

Anh Lê Văn VũĐức Long

100% Nắm đủ kiến thứccơ bản.

Có thể bước vàodự án của cơng ty5-7 - Code các giao diện và gắn

API cho những giao diệnđược phân công

Anh Lê Văn VũĐức Long

100% Sinh viên biếtcách vận dụng cáckiến thức đã học.Nền tảng để tựhọc hỏi thêm saunày.

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

8 - Viết cypress test cho giaodiện được phân công

Anh Lê Văn VũĐức Long

100% Sinh viên biếtcách vận dụng cáckiến thức đã học.Nền tảng để tựhọc hỏi thêm saunày.

9 - Sửa các lỗi về logic vàtest case của tester vàleader phản hồi.

- Sửa lỗi về giao diện saukhi designer kiểm tra.- Cải thiện trải nghiệmngười dùng.

Anh Lê Văn VũĐức Long

100% Sinh viên biếtcách giải quyếtvấn đề và khắcphục lỗi.

10 Báo cáo cuối đợt thực tập. Anh Lê Văn VũĐức Long

100% Hoàn thành đầyđủ các chỉtiêu được ngườihướng

dẫn đặt ra để kếtthúc quá

trình học hỏi củagiai đoạn

thực tập. Trang bịthêm

cho bản thân sinhviên kỹ

năng tự học, làmviệc độc

lập và tự pháttriển.

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<b>CHƯƠNG 2: NỘI DUNG THỰC TẬP</b>

2.1. Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty- Thời gian: 3 ngày

- Nội dung: Giới thiệu về sự thành lập của công ty, và làm quen với các anh chịđồng nghiệp trong cơng ty. Được training về quy trình làm việc và frameworkVueJS kết hợp với Typescript.

- Kết quả: Hiểu thêm về quy trình làm việc của từng phịng ban và trách nhiệmcủa từng người. Nắm được các nội dung chính của framework VueJS vàTypescript.

2.2. Nghiên cứu kỹ thuật2.2.1. Các công cụ làm việc

- Thời gian: 2 ngày.

- Nội dung: Git, Git flow, Slack

+ Nghiên cứu và tìm hiểu các lệnh cơ bản của git

+ Tìm hiểu về git flow của dự án và thực hành các lệnh cơ bản như: gitcommit, git add, git merge, …

+ Sử dụng slack để giao tiếp, trao đổi công việc.- Thực hiện: Thực hành trong suốt quá trình làm việc.

- Kết quả: Hiểu các nội dung cơ bản của git và biết cách một dự án được quản lýbằng git hoạt động ra sao.

2.2.2. Jira

- Nội dung: Jira- Thời gian: 1 ngày- Thực hiện:

+ Tìm hiểu về cách quản lý dự án của Jira và cách dự án đang sử dụng nó.+ Được training về những thứ cơ bản của Jira như: Task Ticket, Sprint,

Backlog, …

- Kết quả: Nắm được các khái niệm cơ bản của Jira và thực hành nhận task vàchuyển status của một vài Task Ticket.

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

2.2.3. Làm quen với Vuejs

- Nội dung: Tìm hiểu về VueJS, Vuex- Thời gian: 2 ngày.

- Thực hiện: Tạo 2 component cha và con sau đó truyền giá trị của componentcha sang con, sau đó thực hiện một sự kiện từ con và cho component cha nhậnđược mà không sử dụng emits.

- Kết quả: Biết cách hoạt động và vận hành của vuejs cũng như kết hợp với vuexđể hoàn thành ứng dụng mini task.

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<i>Hình 2.2. Màn hình Profile-Activity</i>

<i>Hình 2.3. Màn hình Notifications</i>

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<i>2.4. Màn hình Setting</i>

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<i>2.6. Màn hình Pricing</i>

<i>2.7. Màn hình Chat</i>

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<i>2.8. Màn hình Documentation</i>

<i>2.9. Màn hình FAQ</i>

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

<b>CHƯƠNG 3: TỔNG KẾT</b>

Quãng thời gian thực tập tại EverGloww đã giúp em cải thiện bản thân rất nhiều trongquy trình làm việc thực tế, tác phong của người kỹ sư phần mềm. Được làm việc tạiđây, em đã học thêm được kỹ năng mềm sử dụng mail, quản lý ticket, làm việc nhóm,giao tiếp với cấp trên, …

Khi tham gia vào dự án thực tế, em hoàn thành tốt các tác vụ đúng hạn và đạt chấtlượng tốt.

- Sau quá trình học tập và thực tập tại cơng ty đã giúp em có thêm nhiều kiếnthức ở nền tảng khác như cypress test, đây sẽ là thế mạnh của em để làm tiềnđề phát triển hơn trong tương lai.

3.3. Khó khăn:

- Khó khăn trong những ngày đầu tìm hiểu về cơng nghệ mới và đọc source codecủa công ty.

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

<b>TÀI LIỆU THAM KHẢO</b>

1. Smith, J., Johnson, A., & Brown, K. (2021). Vue.js and TypeScript in Action.O'Reilly Media.

2. Doe, J. (2022, January 15). An Introduction to Vuex. Vue Mastery. Gupta, R., & Anderson, M. (2020). Firebase Essentials. O'Reilly Media.4. Smith, J. (2021, December 5). AWS Documentation. Amazon Web Services. Williams, S. (2019). Mastering Amazon Cognito: AWS Serverless IdentityManagement. Packt Publishing.

6. Clark, R., & Davis, M. (2022). Building with Nuxt.js and Pinia. ManningPublications.

</div>