thực tập front end developer

Chân thành cảm ơn thầy và các anh trong công ty đã bỏ ra nhiều thờigian, công sức để hướng dẫn, hướng dẫn, giúp đỡ em tận tình trong khilàm quen môi trường mới cũng như trong việc tiếp c

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

TP Hồ Chí Minh, tháng 01 năm 2024

LỜI MỞ ĐẦU

Trong cuộc cách mạng công nghiệp 4.0, công nghệ thông tin nói chung vàngành Công nghệ phần mềm nói riêng luôn là nhân tố đóng vai trò quantrọng trong quá trình phá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ầuhết các nhu cầu của con người từ bán hàng, cung cấp kiến thức đến thôngtin liên lạc, Hiện nay đã có đến hơn 1.5 tỷ trang web, nhưng nhu cầutạo ra những trang web mới vẫn chưa có 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 đượcyếu tố hình thức và nội dung Làm thế nào để sản phẩm tạo ra đạt chấtlượng cao ở hai yếu tố trên luôn làm bất kì một đội ngũ phát triển websitenào cũng cần phải suy nghĩ đau đầu Để thử thách bản thân trong ngànhcông nghiệp web, em đã lựa chọn Front-end web developer là định hướngcho 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ụngnhững kiến thức đã học và có được trải nghiệm trong môi trường thực tế,em đã quyết định tham gia vào công ty TNHH Mạng Giáo Dục – một môitrường lý tưởng và chuyên nghiệp để thực hiện dự định.

2

LỜI CẢM ƠN

Em xin trân trọng gửi lời cảm ơn Dr Hồ Điệp đã tạo điều kiện cho em cơhội được thực tập tại công ty Dù trong thời gian ngắn nhưng nhờ sự chỉdẫn nhiệt tình của thầy, em đã tiếp thu những kiến thức quan trọng để cóthể tham gia một dự án thực tế

Chân thành cảm ơn thầy và các anh trong công ty đã bỏ ra nhiều thờigian, công sức để hướng dẫn, hướng dẫn, giúp đỡ em tận tình trong khilàm quen môi trường mới cũng như trong việc tiếp cận kiến thức côngnghệ, kỹ năng lập trình và tư duy sản phẩm để có thể thực hiện tốt dự áncá nhân và dự án thực tế trong thời gian qua

Em cũng xin cảm ơn thầy cô trong khoa Công nghệ phần mềm đã nhiệttình hỗ trợ, tạo điều kiện em làm báo cáo này

TP HCM, ngày 01 tháng 01năm 2024

Nguyễn Hoàng Phúc

LỜI CẢM ƠN 3

NHẬN XÉT CỦA KHOA 4

MỤC LỤC 5

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

1.1 Giới thiệu công ty TNHH Mạng Giáo Dục 6

1.2 Sản phẩm công ty 9

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

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

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

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

2.2.1 Tuần 1 11

2.2.2 Tuần 2 11

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

1.1 Giới thiệu công ty TNHH Mạng Giáo Dục

Hình 1.1 Logo công ty TNHH Mạng Giáo Dục

Công ty TNHH Mạng Giáo Dục (EDUNET) được thành lập vào năm 2014 bởimột nhóm chuyên gia từ nhiều lĩnh vực như công nghệ thông tin, kỹ thuậtđiện tử, viễn thông, IoT, Trí tuệ nhân tạo và Big Data, Với tầm nhìn trởthành công ty cung cấp dịch vụ tư vấn, hỗ trợ xây dựng giải pháp vàchuyển giao công nghệ số hàng đầu Việt Nam Cùng với đó là sứ mệnhđưa sản phẩm công nghệ mới đến Việt Nam và ra thế giới.

Lịch sử phát triển của EDUNET:

Hình 1.2 Lịch sử phát triển công ty TNHH Mạng Giáo Dục

Khách hàng và đối tác chiến lược:

Công ty TNHH Mạng Giáo Dục tập trung phân bổ sản phầm và tìm kiếmkhách hàng trong các khu công nghiệp, khu công nghệ cao, ngân hàng,trường học,….Và theo hướng phát triển của công nghệ thì các hệ thốngtrường học đã tìm tới công ty để sử dụng hệ thống nhận dạng vì sự tiệnnghi và tích hợp dễ dàng.

8

Hình 1.3 Đối tác & Khách hàng của công ty TNHH Mạng Giáo Dục

Quy mô công ty:

Công ty gồm 20 thành viên được phân chia vào các phòng chính:

1.2 Sản phẩm công ty

Sau nhiều năm làm việc tại Anh quốc, năm 2010, Dr Hồ Điệp quyết định về Việt Nam để khởi nghiệp Công ty mạng giáo dục Edunet là công ty mà Dr Hồ Điệp và các cộng sự đã dồn vào đó rất nhiều tâm huyết Lý giải về việc lựa chọn Việt Nam là nơi để khởi nghiệp, Dr Hồ Điệp cho biết đây là một thị trường giàu tiềm năng để phát triển kinh tế, đặc biệt rất thuậnlợi cho các công ty khởi nghiệp trong lĩnh vực sản xuất các sản phẩm phần mềm công nghệ.Ông cùng các cộng sự của mình đã nghiên cứu và phát triển những sản phẩm công nghệ trên thị trường chưa có Theo ông, những sản phẩm công nghệ càng khó làm, Edunet lại càng có hứng thú để nghiên cứu, tìm tòi ý tưởng mới.

Hiện tại Edunet đang phát triển và cung cấp các sản phẩm liên quan đến lĩnh vực về IoT, AI, từ cung cấp các giải pháp công nghệ đa dạng trên nhiều lĩnh vực như hệ thống quản lý tài liệuthông minh, hệ thống phòng cháy chữa cháy thông minh, quảng cáo chiếu sáng hiện đại, camera giám sát an ninh thông minh, năng lượng mặt trời tích hợp pin dự trữ thông minh thế

10

hệ mới đến rất nhiều sản phẩm công nghệ vi sinh vật đầy mới lạ, hay các thiết bị đo lường và cảnh báo độ mặn ở các tỉnh Đồng bằng sông Cửu Long,

Trong thời gian tới, Edunet tiếp tục đa dạng hóa danh mục các sản phẩm, giải pháp và dịch vụ mới như những giải pháp về “metaverse” ứng dụng công nghệ thực tế ảo (VR) và thực tế tăng cường (AR) trong lĩnh vực văn hóa, thể thao, du lịch, bất động sản, chăm sóc sức khỏe… xây dựng trên nền tảng web, hỗ trợ nhiều thiết bị truy cập đồng thời và tương tác trựctiếp với nhau như đang diễn ra trong thế giới thật Đặt biệt là ứng dụng công nghệ không gianvũ trụ ảo trực tuyến (metaverse) trong lĩnh vực du lịch – một trong những chương trình xúc tiến kích cầu du lịch mà UBND TP.HCM đã xây dựng - để kích thích phục hồi và phát triển kinh tế thành phố trong giai đoạn mới.

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

Em tham gia làm việc tại công ty bắt đầu từ ngày 04/09/2023 tới29/11/2023, các ngày làm việc trong tuần là từ thứ 2 đến thứ 6 Công việchằng ngày bắt đầu từ lúc 9 giờ đến 18 giờ Thời gian nghỉ trưa khoảng 1tiếng Sau mỗi tuần làm việc em sẽ báo cáo tiến độ công việc trong ngày,đặt câu hỏi và nhận chia sẻ, giải đáp từ người phụ trách, đặt mục tiêu chotuần làm việc tiếp theo Mỗi tuần sẽ họp tiến độ tuần 1 lần vào sáng thứ 2,mọi người sẽ cùng họp và bàn bạc về các vấn đề đã giải quyết, tồn đọng,bài học, giải pháp và mục tiêu cho tuần tiếp theo.

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

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

Nội dung: Giới thiệu về công ty, cách tổ chức của công ty, được nghe

người phụ trách giới thiệu về công ty, quá trình thành lập và phát triển,quy trình làm việc từ cao xuống thấp, cách thức tổ chức của công ty, cácphòng ban về IT, HR, … Ngoài ra, thực tập sinh còn được giới thiệu về vănhóa làm việc trong công ty như thời gian đi làm, các quy định, cách sửdụng email trong công việc,…

Kết quả: Hiểu thêm về công ty TNHH Mạng Giáo Dục, quá trình thành lập

và phát triển Có thêm các kỹ năng về việc sử dụng email trong công việc,làm việc có kế hoạch, có kỷ luật, có trách nhiệm hơn.

2.2 Nghiên cứu kỹ thuật2.2.1 Tuần 1

Nội dung: Cấu hình môi trường làm việc, tìm hiểu Docker, Git workflow:

Cấu hình môi trường để có thể làm việc trên remote server của công ty,yêu cầu cài đặt các ứng dụng như ZeroTier và Bitvise SSH Client.

Tìm hiểu kiến trúc Docker, cách hoạt động của các container, image trênDocker, cách build một Docker image và chạy một Docker container.

Được training về workflow khi quản lý source code với Github.

Kết quả: Cấu hình được môi trường để có thể làm việc, quản lý source

trên remote server thông qua laptop cá nhân Hiểu về workflow làm việcvới Docker, có thể đóng gói code và build thành một Docker image,deploy code lên Docker container, hiểu được workflow khi làm việc vớiGithub.

2.2.2 Tuần 2

Nội dung: Tìm hiểu ứng dụng thiết kế giao diện Figma, framework

Angular 15, đọc tài liệu và hiểu được kiến trúc và luồng hoạt động củasource code ban đầu.

Kết quả: Sử dụng được Figma để thiết kế UI/UX, học được các tính năng

mới của Angular 15 và hiểu được cách chuyển từ framework Angular 14(source code ban đầu) lên Angular 15.

Vào năm 1991, HTML chỉ có 18 cặp thẻ và sau đó đã được thay thế bằng XHTML vào năm2000 Đến năm 2014, một phiên bản nâng cấp HTML5 được phát hành với mục đích gia tăng

14

số lượng các thẻ hiện có và giúp các lập trình viên của thể dễ dàng đọc hiểu các cặp thẻ có vaitrò gì trong mã nguồn của họ Cho tới nay số lượng thẻ HTML đã tăng lên tới hơn 150 thẻ.Với công việc của em tại công ty trong thời gian thực tập thì HTML khá quan trọng trongviệc cải thiện UI ( User Interface), giúp em hiểu rõ hơn về cơ chế hoạt động và nâng cao kỹnăng sử dụng một cách tối ưu và trình bày đẹp mắt.

Hình 2.2.CSS

CSS là chữ viết tắt của Cascading Style Sheets được dùng để miêu tả cách trình bày các tàiliệu viết bằng ngôn ngữ HTML và XHTML.

CSS có tác dụng khá lớn trong một trang web như:

+ Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy định kiểu dáng(chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến mã nguồn của trang Web đượcgọn gàng hơn, tách nội dung của trang Web và định dạng hiển thị, dễ dàng cho việc cập nhậtnội dung.

+ Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải lặp lại việc địnhdạng cho các trang Web giống nhau.

CSS cũng được sử dụng khá nhiều trong quá trình thực tập tại công ty của em, giúp “trangđiểm” cho web thêm đẹp và thân thiện với người dùng.

Tuy nhiện CSS vẫn có nhược điểm là khi mã nguồn được phát triển quá lớn thì số lượng dòngmã lệnh trong file CSS sẽ tăng lên sẽ gây ra khó khăn trong quá trình quản lý và nâng cấptính năng mới.

Để khắc phục tình trạng đó thì người ta tạo ra SASS/SCSS (Syntactically Awesome StyleSheets/ Sass Cascading Style Sheet ) Đó là một chương trình tiền xử lý CSS ( CSSpreprocessor), nó giúp mình viết CSS theo cách của một ngôn ngữ lập trình, có cấu trúc rõràng, rành mạch, đặc biệt là dễ phát triển và quản lý.

Hình 2.4.TypeScript

TypeScript là một dự án mã nguồn mở được phát triển bởi Microsoft, nó có thể được coi làmột phiên bản nâng cao của Javascript bởi việc bổ sung tùy chọn kiểu tĩnh và lớp hướng đốitượng mà điều này không có ở Javascript TypeScript có thể sử dụng để phát triển các ứngdụng chạy ở client-side (Angular2) và server-side (NodeJS).

TypeScript sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6) như classes,modules Không dừng lại ở đó nếu như ECMAScript 2017 ra đời thì mình tin chắc rằngTypeScript cũng sẽ nâng cấp phiên bản của mình lên để sử dụng mọi kỹ thuật mới nhất từECMAScript Thực ra TypeScript không phải ra đời đầu tiên mà trước đây cũng có một sốthư viện như CoffeScript và Dart được phát triển bởi Google, tuy nhiên điểm yếu là hai thưviện này sư dụng cú pháp mới hoàn toàn, điều này khác hoàn toàn với TypeScript, vì vậy tuyra đời sau nhưng TypeScript vẫn đang nhận được sự đón nhận từ các lập trình viên.

Tại sao nên sử dụng TypeScript ?

Dễ phát triển dự án lớn: Với việc sử dụng các kỹ thuật mới nhất và lập trình hướng

đối tượng nên TypeScript giúp chúng ta phát triển các dự án lớn một cách dễ dàng.

Nhiều Framework lựa chọn: Hiện nay các Javascript Framework đã dần khuyến

khích nên sử dụng TypeScript để phát triển, ví dụ như AngularJS 2.0 và Ionic 2.0.

Hô trợ các tính năng của Javascript phiên bản mới nhất: TypeScript luôn đảm bảo

việc sử dụng đầy đủ các kỹ thuật mới nhất của Javascript, ví dụ như version hiện tại làECMAScript 2015 (ES6).

Là mã nguồn mở: TypeScript là một mã nguồn mở nên bạn hoàn toàn có thể sử dụng

mà không mất phí, bên cạnh đó còn được cộng đồng hỗ trợ.

TypeScript là Javscript: Bản chất của TypeScript là biên dịch tạo ra các đoạn mã

Javascript nên ban có thê chạy bất kì ở đâu miễn ở đó có hỗ trợ biên dịch Javascript Ngoài rabạn có thể sử dụng trộn lẫn cú pháp của Javascript vào bên trong TypeScript, điều này giúpcác lập trình viên tiếp cận TypeScript dễ dàng hơn.

Hình 2.5 Framework Angular

Angular là một javascript framework do google phát triển để xây dựng các Single PageApplication (SPA) bằng JavaScript , HTML và TypeScript Angular cung cấp các tính năngtích hợp cho animation , http service và có các tính năng như auto-complete , navigation ,toolbar , menus ,… Code được viết bằng TypeScript , biên dịch thành JavaScript và hiển thịtương tự trong trình duyệt.

AngularJS được phát triển từ năm 2009 bởi Misko Hevery cùng 1 người bạn khác là AdamAbrons Nó được xem là một dự án riêng cho đến khi Misko Hevery tham gia vào dự ánGoogle Feedback dưới tư cách lập trình viên bán thời gian Khi đó, Misko Hevery và 2 lậptrình viên khác đã viết lên 17.000 các dòng mã khác dành cho dự án Google Feedback trongkhoảng 6 tháng

Ưu điểm:

Angular mang đến nhiều ưu điểm nổi bật cho nhiều lập trình viên, cụ thể như:

Angular được các chuyên gia đánh giá cao, mã nguồn này giúp các Single Page Applicationlàm việc dễ dàng, nhanh chóng.

Nhờ khả năng Binding data lên trên các nền tảng HTML nên code front-end thường rất thânthiện với người dùng.

Bạn có thể thuận tiện Unit Test.

18

Component có thể tái sử dụng dễ dàng hơn.

Angular có khả năng hỗ trợ cho các lập trình viên có thể viết code được ít hơn cùng với nhiềuchức năng hơn Từ đó giúp tiết kiệm thời gian lập trình và tăng hiệu suất công việc.

Khả năng an toàn: Website có thể trở nên không an toàn nếu bạn sử dụng một số trình duyệtsở hữu tính năng Disable JavaScript.

Tại sao phải sử dụng Angular:

- Angular giúp nâng cao năng suất của các lập trình viên.- Cấu trúc phát triển rõ ràng.

- Hỗ trợ Extensive Binding.

- Hỗ trợ đầy đủ tính năng điều hướng (routing).

- Angular giúp giảm tối đa kích thước và tăng tối đa hiệu suất của ứng dụng.- Document và cộng đồng (community) đông đảo.

Hình 2.6.Figma

Figma là một ứng dụng gồm nhiều công cụ thiết kế đồ họa mạnh mẽ chạy trên nền tảngwebsite, dùng để thiết kế UI và dựng prototypes Ứng dụng này cũng có thể dùng để tạo cácbài đăng trên mạng xã hội cùng với nhiều dự án thiết kế khác Figma cung cấp tài nguyên chocác khâu của quá trình thiết kế.

Điểm đặc biệt ở Figma là các công cụ được cung cấp miễn phí hoàn toàn và được lưu trữthông qua hệ thống lưu trữ đám mây Figma được xem là phiên bản Google Docs dành chodân thiết kế, cho phép nhiều người cộng tác trực tuyến trong một file Các lập trình viên cóthể cùng chỉnh sửa, thảo luận, theo dõi bản thiết kế ở cùng một thời gian, ở các phía máy chủkhác nhau.

Nhờ công dụng mang tính linh hoạt này mà Figma là một công cụ thiết kế được nhiềuDesigner website ưa chuộng cho các dự án nhóm hay làm việc từ xa.

Ngoài tính năng cung cấp bộ công cụ miễn phí, Figma còn có những ưu điểm nổi bậtsau:

- Theo dõi hoạt động trong thời gian thực

Mỗi người dùng có thể truy cập vào dự án chung trong cùng một thời gian, được thể hiệnbằng ảnh avatar trên thanh công cụ Mọi người có thể biết được các thành viên đang làm gì,đang ở vị trí nào trên trang bằng cách click vào ảnh avatar Với tính năng này, Figma sẽ giúpcác nhóm làm việc từ xa trở nên dễ dàng hơn Các thành viên có thể theo dõi thao tác củangười hướng dẫn, giúp kiểm tra tiến độ công việc và thực hiện điều chỉnh kịp thời nếu có saisót xảy ra theo thời gian thực.

Figma còn có tiện ích là sẽ gửi thông báo khi file có thay đổi để tất cả các thành viên có thểcập nhật được thông tin mới nhất.

- Khả năng tương thích cao

Là phần mềm dựa trên nền tảng website nên Figma có khả năng tương thích với nhiều hệđiều hành như Windows, Linux, macOS,… Vì thế, đây là một trong những công cụ thiết kếgiúp designer có thể truy cập và thao tác dễ dàng.

Figma còn có thêm phiên bản ứng dụng dùng trên điện thoại để người dùng có thể dễ dàngthao tác bất cứ nơi đâu.

- Có nhiều công cụ plugin mạnh mẽ

20