Báo cáo thực tập lập trình WEB

GIỚI THIỆU CÔNG TY THỰC TẬP

Giới thiệu về công ty TNHH ITC Group

Hình 1.1 Logo của công ty ITC Group

ITC Group, một công ty phát triển phần mềm, cam kết mang lại những nỗ lực tốt nhất để thúc đẩy thành công cho khách hàng Trước những thay đổi không ngừng trong ngành công nghiệp phần mềm, ITC Group cung cấp các giải pháp sáng tạo, công nghệ tiên tiến và tư vấn quy trình trưởng thành, giúp doanh nghiệp khách hàng đạt được sự tăng trưởng bền vững và thành công liên tục.

Giá trị cốt lõi của chúng tôi là xây dựng một môi trường làm việc và văn hóa tập trung vào Đổi mới và Tăng trưởng công nghệ, nhằm nâng cao hiệu quả và sự hài lòng của khách hàng.

Sứ mệnh của ITC Group là mang lại thành công và sự hài lòng cho khách hàng trong mọi dự án, bất kể quy mô doanh nghiệp khởi nghiệp của bạn Chúng tôi cam kết học hỏi, giao tiếp và hợp tác chặt chẽ trong quá trình làm việc để đạt được mục tiêu chung.

Lê Nguyễn Hoàng Vũ Thực tập tốt nghiệp 2

Hình 1.2 Hình ảnh về các services của công ty

Hình 1.3 Hình ảnh về các industries của công ty

Khách hàng và đối tác

Công ty ITC Group chuyên cung cấp dịch vụ phát triển phần mềm, phát triển trang web, phát triển di động, phân tích, tư vấn, bảo trì và hỗ trợ kiểm thử cho các đối tác cả trong và ngoài nước.

- Một số đối tác và dự án của ITC Group:

● Updiagram: Công cụ quản lý dự án để trực quan hóa và đơn giản hóa quy trình quản lý dự án

● GiveTour: Hỗ trợ cộng đồng quản lý giải đấu thể thao

● Geronimo: Nền tảng hỗ trợ các tổ chức phi lợi nhuận gây quỹ

● Loyaty: Phần mềm quản lý và giao dịch cho một ngân hàng

Hình 1.3 Hình ảnh về các dự án của công ty đã thực hiện

Địa chỉ doanh nghiệp và thông tin liên hệ

 55/21 Phan Đình Phùng, Tân Thành, Tân Phú, Thành phố Hồ Chí Minh,

 4323 Infinity Ln, Lorain, Oh 44053, United States

 Unit 3/84-86 Albert Road, Strathfield, Sydney, NSW 2135, Australia

 28 Rue des Longues Raies, 57070 Metz, France

 218 Cresthaven Road Brampton Ontario L7A 1G5, Canada

 Mail: sales@itcgroup.xyz hoặc career@itcgroup.xyz

 Facebook: https://www.facebook.com/itcgroupio

 Linkedin: https://www.linkedin.com/company/itcgroupio

 Twitter: https://twitter.com/itcgroupio

NỘI DUNG THỰC TẬP

Lịch làm việc tại công ty

- Thời gian thực tập: từ ngày 17/02/2020 đến ngày 30/6/2020, làm việc thứ 2, thứ 4, thứ 5, thứ 7, mỗi ngày làm việc 7 giờ theo lịch làm việc của công ty

 Chiều: 13h – 17h30 Riêng thứ 7 làm việc 5 tiếng, buổi chiều kết thúc lúc 16h

Mỗi ngày, tôi sẽ gửi báo cáo Daily Report cho anh Trương Quốc Cương, trong đó nêu rõ các công việc đã hoàn thành, những khó khăn đã gặp phải và phương án khắc phục.

Mỗi tuần vào thứ 6 hoặc thứ 7, chúng tôi sẽ gửi một Báo cáo Tuần đến anh Trương Quốc Cương, đồng thời sao chép cho phòng nhân sự và Ban giám đốc Báo cáo này sẽ tóm tắt kết quả công việc trong tuần, những khó khăn gặp phải và các phương án giải quyết.

- Thông thường vào trưa lúc 11h mỗi thứ 7 sẽ có những buổi chia sẻ kiến thức về nhiều lĩnh vực do chính nhân viên công ty thực hiện

- Dự án thực tế tham gia: LifestyleWeb

Nhiệm vụ được giao và hướng dẫn

- Về lý thuyết: Nhận tài liệu tự ôn tập và tìm hiểu về các kiến thức cơ bản HTML, CSS, JAVASCRIPT, ES6, SASS, SCSS, TYPESCRIPT, ANGULAR, NODEJS

 Làm bài tập vận dụng các kiến thức đã tìm hiểu: Quản lý sân bóng (Angular – Nodejs - Postgresql)

 Vào dự án thực tế của công ty: Xây dựng và phát triển LifestyleWeb cho một ngân hàng.

Nội dung khóa thực tập

Thời gian Chủ đề Nội dung Kết quả

Giới thiệu công ty và làm quen với mọi người

- Tìm hiểu về công ty, cách thức làm việc và làm quen với mọi người xung quanh

- Nhận tài liệu tự ôn tập và tìm hiểu về html, css javascript

- Tạo mối quan hệ vui vẻ với mọi người

- Nắm rỏ các thẻ html, các thuộc tính css cơ bản, những syntax của javascript

- Tìm hiểu về Angular và Angular Material

- Nắm kiến thức về Angular và khởi tạo trang web cơ bản bằng Angular

- Dùng Sass triển khai Css

Cài đặt môi trường và tìm hiểu Nodejs, Postgresql

- Dùng postgresql để quản lý cơ sở dữ liệu

Làm bài tập vận dụng các kiến thức đã tìm hiểu

- Xây dựng trang web để qaun lý sân bóng

- Nắm được cách sữ dụng Angular, Nodejs, Postgresql để xây dựng một trang web cơ bản

Review và nhận phê bình

- Review source code bài tập quản lý sân bóng

- Được review nhận phê bình cải thiện source code sao cho code chạy hiệu quả nhất

- Tìm hiểu cấu trúc dự án

- Fix những con bugs đơn giản

- Học được cấu trúc của một dự án web thực tế

Thực hiện một số trang web

- Nhận tasks được giao và làm các trang web

- Làm quen với xây dựng

Tìm hiểu về Redux, Redux Saga

- Nhận tài liệu và tìm hiểu Redux và Redux Saga

- Nắm được cách dùng Redux và Redux Saga để quản lý State trong ReactJS

Fix bug bị lỗi do integration

- Fix bug bị lỗi do integration không chính xác

- Củng cố kiến thức về Redux và Redux Saga để quản lý State sau khi integration

Integration lấy data từ API để hiển thị lên UI

- Integration để hiển thị data cho UI

- Vận dụng các kiến thức đã tìm hiểu về Redux và

Integration và quản lý State trong ReacJS

Làm những task mới về fix bug UI, change UI theo yêu cầu khách hàng và integration

- Cũng cố kiến thức về ReacJS, Redux và Redux Saga

Bảng 2.1 Nội dung thực tập

Cơ sở lý thuyết và công nghệ

4.1 Tìm hiểu về HTML, CSS và JavaScript:

Hình ảnh 2.1 Logo HTML, CSS, JS

- HTML là viết tắt của Hypertext Markup Language

- HTML không phải là ngôn ngữ lập trình, đồng nghĩa với việc nó không thể tạo ra các chức năng “động” được

- Khi làm việc với HTML, chúng ta sẽ sử dụng cấu trúc code đơn giản (tags và attributes) để đánh dấu lên trang web

 Các tag thông dụng nhất của HTML:

HTML tags có 2 loại chính: block-level và inline tags

Block-level elements occupy the full width of a webpage and always begin on a new line Key examples of block tags include headings and paragraphs.

 Tag là element cao nhất dùng để đóng gói mỗi trang HTML

 Tag chứa các thông tin meta như là tiêu đề trang và charset

 Tag dùng để đóng gói tất cả nội dung sẽ hiện trên trang

 Tag đến , h1 là cấp heading cao nhất và h6 là thấp nhất Văn bản được đặt trong tag

 Tag thể hiện những khu vực lớn, chứa nhiều paragraph, images, blockquotes, và các yếu tố khác

 Tag

Các phần tử inline chỉ chiếm một không gian nhỏ trên trang web và không bắt đầu một dòng mới Chúng thường được sử dụng để định dạng nội dung bên trong các phần tử block level Các liên kết và các thẻ nhấn mạnh là những thẻ inline phổ biến.

 Tag định dạng chữ in đậm

 Tag thể hiện Hyperlinks với thuộc tính href để xách định link cụ thể

 Tag dùng để thêm hình ảnh

 Sự phát triển của HTML5:

- HTML được phát hành năm 2014 với nhiều tính năng quan trọng mới

- Nổi trội là tính năng hỗ trợ audio và video bằng tag hay

Video hỗ trợ các tính năng mặc định như scalable vector graphics (SVG) và MathML, cho phép hiển thị công thức toán học và phương trình khoa học một cách hiệu quả.

Các thẻ mới trong HTML5 giúp trình duyệt nhận diện rõ ràng mục đích của nội dung trên website, mang lại lợi ích cho cả người dùng và công cụ tìm kiếm.

- Các semantic tags đó là , ,

, và

CSS, hay còn gọi là Cascading Style Sheet, là ngôn ngữ dùng để tạo phong cách cho trang web Nó cho phép định kiểu và tạo phong cách cho các yếu tố được viết bằng ngôn ngữ đánh dấu như HTML.

- CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996 vì HTML không được thiết kế để gắn tag để giúp định dạng trang web

HTML và CSS có mối liên hệ chặt chẽ, trong đó HTML là ngôn ngữ cơ bản của trang web, còn CSS chịu trách nhiệm tạo ra giao diện cho website Chúng không thể tách rời nhau trong quá trình phát triển web.

CSS cho phép định dạng tất cả các yếu tố trong một tệp riêng, giúp tạo phong cách trước và sau đó tích hợp tệp CSS vào đầu tệp HTML Điều này làm cho mã HTML trở nên rõ ràng và dễ quản lý hơn rất nhiều.

- CSS giúp có nhiều styles trên một trang web

 CSS hoạt động như thế nào?

- CSS sử dụng cấu trúc tiếng Anh đơn giản để tạo ra một bộ các quy tắc có thể tận dụng

Cú pháp của CSS rất dễ hiểu, bao gồm hai phần chính: phần chọn và phần khai báo Bạn chỉ cần chọn một yếu tố cụ thể và thực hiện các khai báo để xác định cách thức hoạt động của nó.

- Selector sẽ trỏ về yếu tố HTML cần được tạo phong cách Block khai báo sẽ bao gồm một hay nhiều khai báo cách nhau bởi dấu chấm phẩy

Mỗi khai báo CSS bao gồm một tên và giá trị, được phân cách bởi dấu hai chấm Khai báo CSS luôn kết thúc bằng dấu chấm phẩy, và các khai báo được đặt trong dấu ngoặc nhọn.

Hình ảnh 2.2 Ví dụ về cú pháp CSS

 Internal, External và Inline CSS Style :

- Style CSS Internal là style được tải lên mỗi khi trang web được refresh lại Vì vậy nó tăng thời gian tải trang

Style External là phương pháp thuận tiện nhất cho việc quản lý phong cách trang web, vì tất cả các quy tắc được lưu trữ trong file css riêng biệt Điều này cho phép áp dụng các phong cách từ file khác vào trang mong muốn, giúp cải thiện hiệu suất tải trang một cách đáng kể.

Style CSS Inline áp dụng cho các yếu tố cụ thể thông qua thẻ Mỗi thành phần có thể được định dạng riêng, tuy nhiên, đây không phải là phương pháp tối ưu và dễ dàng nhất để quản lý CSS, nhưng lại rất tiện lợi khi chỉ cần thay đổi một yếu tố duy nhất.

JavaScript là ngôn ngữ lập trình mang lại sự sinh động cho trang web, khác biệt với HTML, chuyên cho nội dung, và CSS, chuyên cho phong cách Nó cũng khác hẳn PHP, vì PHP chạy trên server trong khi JavaScript hoạt động trực tiếp trên máy client.

JavaScript được phát triển trong vòng mười ngày bởi Brandan Eich, một nhân viên của Netscape, vào tháng 9 năm 1995 Ban đầu, ngôn ngữ này được gọi là Mocha, sau đó đổi tên thành Mona và LiveScript trước khi chính thức mang tên JavaScript.

- Trong năm 1996, JavaScript được chính thức đặt tên là ECMAScript Phiên bản ECMAScript 2 được phát hành năm 1998 và ECMAScript 3 ra mắt năm

- JavaScript liên tục phát triển, có lúc đạt đến 92% website đang sử dụng JavaScript vào năm 2016

 Cách hoạt động của JavaScript trên trang web:

JavaScript là ngôn ngữ lập trình thường được nhúng trực tiếp vào trang web hoặc tham chiếu qua file js riêng biệt Là ngôn ngữ phía client, JavaScript cho phép script được tải về máy của khách truy cập và được xử lý tại đó, thay vì phải xử lý trên server trước khi gửi kết quả đến người dùng.

- Có thể được sử dùng để thực thi mã độc trên máy tính của người dùng

- Nhiều khi không được hỗ trợ trên mọi trình duyệt

- Có thể bị triển khai khác nhau tuỳ từng thiét bị dẫn đến việc không đồng nhất

SASS/SCSS là một tiền xử lý CSS, cho phép người dùng viết CSS giống như một ngôn ngữ lập trình, mang lại cấu trúc rõ ràng và dễ hiểu, giúp phát triển và bảo trì mã dễ dàng hơn.

Hình ảnh 2.6 Hình ảnh minh họa về SASS

 Với đoạn mã HTML như sau:

Hình ảnh 2.7 Hình ảnh HTML demo SASS

 SASS sẽ được viết theo quy tắc xếp chồng như sau:

Hình ảnh 2.8 Quy tắc xếp chồng trong SASS

 Biến chứa các giá trị mà bạn có thể sử dụng nhiều lần, ví dụ mã màu, font hay kiểu chữ…

Hình ảnh 2.9 Biến trong SASS.

CHI TIẾT CÁC CÔNG VIỆC THỰC HIỆN

Mini Sportyhub Project

 Giới thiệu về Mini Sportyhub project:

Mini Project yêu cầu xây dựng một trang web đơn giản để quản lý sân bóng, bao gồm các chức năng như hiển thị danh sách sân bóng, thêm, xóa, sửa và xem chi tiết sân bóng Trang web cần phải hỗ trợ responsive cho nhiều thiết bị, với frontend được phát triển bằng Angular, backend sử dụng Node.js và cơ sở dữ liệu được quản lý bằng PostgreSQL.

 Giao diện danh sách sân bóng:

Hình ảnh 3.1 Hiển thị danh sách sân bóng

 Giao diện chi tiết sân bóng:

Hình ảnh 3.2 Hiển thị chi tiết sân bóng

 Giao diện thêm sân bóng:

Hình ảnh 3.3 Thêm sân bóng mới.

 Giao diện xóa, sửa sân bóng:

Hình ảnh 3.4 Xóa và Sửa thông tin sân bóng

Hình ảnh 3.5 Giao diện web responsive.

Dự án này là một cơ hội để củng cố và áp dụng những kiến thức đã học, đồng thời giúp công ty đánh giá tổng quan về năng lực của thực tập sinh.

The frontend is developed using Angular, while the backend is built with Express server PostgreSQL is utilized for database management, and Bookshelf is employed to connect the backend with the database.

- Thời gian hoàn thành : 5 ngày

- Đánh giá của mentor : hoàn thành tốt

Dự án lifestyleweb cho 1 ngân hàng

Dự án web lifestyle được thiết kế dành cho khách hàng, cho phép họ sử dụng tài khoản để khám phá các ưu đãi và quà tặng Khách hàng có thể đổi điểm và tận hưởng những phần quà cũng như các chương trình khuyến mãi đặc biệt từ ngân hàng.

 Giới thiệu về React Native:

ReactJS là thư viện JavaScript nổi bật do Facebook phát triển, ra mắt vào năm 2013, nhằm đơn giản hóa việc xây dựng giao diện người dùng (UI) dễ dàng và có thể tái sử dụng Các thành phần giao diện được tổ chức thành các Component, cho phép người dùng tái sử dụng chúng Bên cạnh đó, Props và State là hai khái niệm cơ bản trong React, giúp truyền dữ liệu và quản lý biến trong các Component.

Nó cho tốc độ phản hồi tuyệt vời khi user nhập liệu bằng cách sử dụng phương pháp mới để render trang web

- Hỗ trợ JSX (Javascript XML) một dạng cú pháp mở rộng giúp code nhanh và dễ sử dụng hơn

- Hỗ trợ Component giúp chia nhỏ các cấu trúc UI/UX phức tạp thành từng component đơn giản hơn và dễ tái sử dụng

DOM ảo (Virtual DOM) cải thiện hiệu suất của ứng dụng bằng cách tối ưu hóa cấu trúc giao diện người dùng, giúp phản ứng nhanh chóng với các thay đổi và nâng cao trải nghiệm người dùng.

React giúp xây dựng giao diện người dùng thân thiện với SEO, cho phép các trang web dễ dàng được truy cập và lập chỉ mục bởi các công cụ tìm kiếm Tính năng này mang lại lợi thế lớn cho việc tối ưu hóa công cụ tìm kiếm.

- Các giải pháp hoàn chỉnh yêu cầu thư viện của bên thứ ba

- Tính khả dụng của các tùy chọn có thể gây nhầm lẫn

- Reactjs chỉ phục vụ cho tầng View

- Tích hợp ReactJS vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại

 Kiến thức cơ bản về ReactJS:

Component là thuật ngữ khó định nghĩa một cách chính xác Tuy nhiên, có thể hiểu rằng mỗi đoạn mã sẽ được chia thành các Component độc lập, giúp tái sử dụng khi cần thiết.

Props, viết tắt của properties, là cơ chế cho phép truyền dữ liệu từ component cha sang component con, giúp chúng giao tiếp hiệu quả Nếu không có props được truyền từ component cha, các component có thể sử dụng props mặc định Trong suốt vòng đời của component, giá trị của props là bất biến.

Props không thể thay đổi giá trị, trong khi state có thể thay đổi giá trị trong suốt vòng đời của component Do đó, chúng ta sử dụng state để theo dõi sự thay đổi thông tin của component Khi giá trị của state thay đổi, ReactJS sẽ thực hiện re-render toàn bộ component.

2.2 Tìm hiểu về Redux Saga:

 Giới thiệu về Redux Saga:

Redux-Saga là một thư viện middleware cho Redux, giúp đơn giản hóa việc quản lý các side effect trong ứng dụng Bằng cách tận dụng tính năng Generators (function*) của ES6, Redux-Saga cho phép viết mã bất đồng bộ (async) trông giống như mã đồng bộ (synchronous).

 Cách thức hoạt động của Redux Saga:

Hình ảnh 3.6 Cách thức hoạt động của Redux Saga

Redux Saga offers helper effect functions that return an effect object containing special information for the Redux middleware to execute further actions These helper effect functions are executed within generator functions.

2.3 Quy trình thực hiện công việc:

 Quy trình nhận công việc, thực hiện và hoàn thành:

Mỗi đầu tuần, nhóm sẽ tổ chức buổi họp Sprint planning, trong đó quản lý dự án sẽ đánh giá và phân công nhiệm vụ cho từng thành viên Các nhiệm vụ này được theo dõi và quản lý thông qua phần mềm Updiagram.

Hình ảnh 3.7 Công cụ quản lý dự án

Sau khi nhận công việc, các thành viên trong nhóm cần tự xem xét và làm rõ những điểm chưa rõ ràng bằng cách hỏi quản lý dự án Trong quá trình thực hiện nhiệm vụ, họ có thể trao đổi thông tin qua phần mềm Rocket Chat.

Hình ảnh 3.8 Công cụ chat

Sau khi hoàn thành nhiệm vụ và deploy code, lập trình viên cần cập nhật trạng thái ticket thành "Testing" trên Updiagram để QA tiến hành kiểm tra Cuối tuần, mỗi thành viên phải gửi báo cáo ngắn về những công việc đã thực hiện trong tuần cho quản lý dự án và mentor qua Zoho mail.

Hình ảnh 3.9 Công cụ email dùng để liên lạc

 Quy trình thực hiện chi tiết một công việc:

- Bước 1: Lên trang quản lý dự án chuyển trạng thái ticket tử “New” sang “Doing”

Hình ảnh 3.10 Danh sách các tasks và trạng thái của task

- Bước 2: Bắt đầu code Thực hiện đúng các requirement đã đề ra và đúng deadline

Sau khi hoàn thành việc lập trình và kiểm tra chức năng hoạt động đúng, bạn cần đưa mã nguồn lên GitLab và tạo merge request để anh lead team xem xét Đồng thời, hãy chuyển trạng thái trên Updiagram từ “Doing” sang “Reviewing”.

Hình ảnh 3.11 Hình ảnh về MR của gitlab

Sau khi nhận phản hồi từ mentor, tiến hành chỉnh sửa mã nguồn cho đến khi được hợp nhất Kiểm tra xem mã đã được biên dịch thành công hay chưa; nếu thành công, chuyển trạng thái từ "Reviewing" sang "Testing" trên Updiagram Dưới đây là giao diện mẫu sau khi hoàn thành.

2.4 Chi tiết công việc thực hiện trong dự án thực tế:

- Các feature đã thực hiện:

Màn hình "ưu đãi cho bạn" hiển thị danh sách các ưu đãi dành cho tài khoản đã đăng nhập Khách hàng có thể dễ dàng xem các ưu đãi theo dạng danh sách hoặc bản đồ, đồng thời tìm kiếm các ưu đãi theo sản phẩm, dịch vụ và tỉnh thành.

Hình ảnh 3.11 Danh sách các “ưu đãi cho bạn” chế độ danh sách

Hình ảnh 3.12 Danh sách các “ưu đãi cho bạn” chế độ bản đồ

KẾT QUẢ ĐẠT ĐƯỢC SAU ĐỢT THỰC TẬP

Kết quả thu được

- Sử dụng thành thạo các công cụ Visual Studio Code, PgAdmin, Git

- Học được các ngôn ngữ, framework mới: Angular, ReactJS, NestJS, ExpressJs, Swagger, RxJS, Akita State

- Nâng cao kĩ năng giao tiếp, làm việc nhóm, khả năng xử lí vấn đề, cách search từ khóa Có trách nhiệm hơn trong trong công việc được giao

- Hoàn thành các nhiệm vụ được giao

 Trải nghiệm quy trình làm việc từ đầu đến cuối của một dự án thực tế theo mô hình làm việc Agile

 Trau dồi nhiều hơn về kiến thức Front-end, Back-End, cũng như các kỹ năng mềm

 Thao tác lập trình, tư duy, ý tưởng xử lý luồng dữ liệu ở tầng dưới tăng hiệu quả hơn

 Hiểu được nguyên tắc xây dựng phần mềm từ ý tưởng đi đến việc phân tích rồi đưa ý tưởng thành hiện thực

Nâng cao kỹ năng làm việc nhóm không chỉ đơn thuần là hoàn thành nhiệm vụ cá nhân, mà còn bao gồm việc chú ý đến đồng đội, hiểu rõ quan điểm và mục tiêu chung Điều này giúp các thành viên trong nhóm phối hợp hiệu quả hơn, từ đó tối ưu hóa quá trình hoàn thành dự án.

 Kỹ năng giao tiếp, tư duy phản biện, giải quyết vấn đề được nâng cao

Các điểm yếu của bản thân

- Nhiều lúc chưa hoàn thành đúng thời hạn công việc được giao

- Suy nghĩ còn hạn chế, chưa có kinh nghiệm

- Vẫn còn rụt rè khi giao tiếp

Cảm nhận về công ty

- Môi trường làm việc chuyên nghiệp, năng động

- Cơ sở vật chất tốt, phòng rộng rãi, thoáng mát, thoải mái, sạch sẽ

- Mọi người trong công ty rất hòa đồng và nhiệt tình chỉ dạy

- Đội ngũ phụ trách hướng dẫn cho sinh viên thực tập vô cùng tận tâm và nhiệt tình, trình độ chuyên môn cao, hòa đồng, vui vẻ.

Tiêu đề	Báo cáo thực tập lập trình web
Tác giả	Lê Nguyễn Hoàng Vũ
Người hướng dẫn	Trương Quốc Cương
Trường học	Đại học Quốc gia Thành phố Hồ Chí Minh
Chuyên ngành	Công nghệ phần mềm
Thể loại	báo cáo thực tập tốt nghiệp
Năm xuất bản	2021
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	46
Dung lượng	2,88 MB