báo cáo thực tập frontend developer

Tại đây, tôi đã được tiếp xúc với nhiều dự án thực tế,học hỏi từ những người đồng nghiệp tài năng, và phát triển nhữnggiải pháp công nghệ sáng tạo.Báo cáo này sẽ phản ánh quá trình học t

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO THỰC TẬP

FRONTEND DEVELOPER

Công ty thực tập:SparkMinds J.S.CNgười phụ trách:Nguyễn Tiến Đạt

TP Hồ Chí Minh, tháng 12 năm 2023

LỜI MỞ ĐẦU

Bắt đầu hành trình thực tập tại công ty SparkMinds, tôi không chỉmang theo hành trang là kiến thức từ giảng đường mà còn đầy ắp sựhứng thú và mong muốn học hỏi Trải qua gần ba tháng làm việctrong vai trò frontend developer, mỗi ngày tại công ty không chỉ làmột thử thách mới mà còn là cơ hội để tôi mở rộng kiến thức và kỹnăng của mình Tại đây, tôi đã được tiếp xúc với nhiều dự án thực tế,học hỏi từ những người đồng nghiệp tài năng, và phát triển nhữnggiải pháp công nghệ sáng tạo.

Báo cáo này sẽ phản ánh quá trình học tập và làm việc của tôi tạiSparkMinds, nơi đã giúp tôi hiểu rõ hơn về vai trò của một frontenddeveloper trong một môi trường làm việc chuyên nghiệp Từ việcphân tích nhu cầu của dự án, đến việc thiết kế và triển khai các giảipháp phần mềm, mỗi bước đi trong công việc đều mang lại cho tôinhững kinh nghiệm quý giá Qua đó, tôi cũng muốn chia sẻ về nhữngthách thức đã gặp phải và cách thức tôi vượt qua chúng, nhằm cungcấp một cái nhìn thực tế về công việc và sự nghiệp trong lĩnh vựccông nghệ thông tin.

2

LỜI CẢM ƠN

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

Chân thành cảm ơn anh Đạt và các anh chị trong team Xáo đã bỏ ranhiều thời gian, công sức để hướng dẫn, hướng dẫn, giúp đỡ em tậntình trong khi làm quen môi trường mới cũng như trong việc tiếp cậnkiến thức công nghệ, kỹ năng lập trình và tư duy sản phẩm để có thểthực hiện tốt dự án cá 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ệt tình hỗ trợ, tạo điều kiện em làm báo cáo này

TP HCM, ngày 28 tháng 12 năm2023

Trương Xuân Vương

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 SparkMinds 6

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

1.2.1 Mobile App – Cryptocurrency Exchange Platform 7

1.2.2 Payment Application Development – Spay 8

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

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

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

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

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

1.1 Giới thiệu công ty SparkMinds

Hình 1.1 Logo công ty SparkMinds

SparkMinds là một công ty chuyên về Outsourcing Phát triển Phầnmềm, được thành lập vào năm 2021 Bắt đầu sự nghiệp của mìnhbằng việc triển khai các dự án Blockchain, công ty đã gặt hái đượcthành công từ nhiều dự án Crypto Exchange Đang trên đà pháttriển, SparkMinds đã mở rộng lực lượng lao động và cung cấp nhiềudịch vụ công nghệ trong nhiều lĩnh vực, như hệ thống ngân hang,tích hợp tài khoản, ứng dụng di động fintech, phần mềm tài chínhdoanh nghiệp, ứng dụng ví điện tử, … khắp nơi trên thế giới

Lịch sử phát triển của công ty:

Hình 1.2 Lịch sử phát triển của công ty SparkMinds

1.2 Sản phẩm công ty

1.2.1 Mobile App – Cryptocurrency Exchange Platform

 Tổng quan về sản phẩm: Dự án này liên quan đến việc xây dựng một Ứng dụngdi động cho nền tảng Giao dịch Tiền điện tử, dự trên nền tảng API đã có sẵn Ứng dụng di động này cần phải có tất cả các tính năng cần thiết của một sàn giao dịch tiền điện tử, bao gồm biểu đồ nến tích hợp, nhận dạng khuôn mặt người dung, và xác thực cho KYC (Know Your Customer), cũng như các chức năng giao dịch, nạp và rút tiền Ngoài ra, ứng dụng phải đảm bảo một kiến trúc hoạt động hiệu suất cao và đáp ứng yêu cầu bảo mật của khách hàng.

 Các tính năng chính của sản phẩm:o Trading (Buy/Sell)

o FIAT Deposit/Withdrawalo Crypto Deposit/Withdrawalo eKYC via Mobile App

o Candlestick Chart integrationo Customer helpdesk for mobile

 Giải pháp: Công ty đã phát triển dự án với một đội ngũ các lập trình viên có kinh nghiệp trong lĩnh vực blockchain, áp dụng phương pháp phát triển Hybrid app, lựa chọn các ngôn ngữ lập trình phù hợp, tích hợp Google Analytics & Sentry, và cũng áp dụng các quy tắc bảo mật cụ thể cho ứng dụng di động.

1.2.2 Payment Application Development – Spay

 Tổng quan về sản phẩm: Spay là một ứng dụng thanh toán mà đội ngũ SparkMinds phát triển nhằm giúp người dùng thực hiện các giao dịch thanh toán hoặc chuyển tiền nhanh chóng chỉ với kết nối internet Spay đáp ứng mọi nhu cầu thanh toán của bạn một cách nhanh chóng, tiện lợi, an toàn và với độ bảo mật thông tin cao Hơn nữa, ứng dụng còn có một số chức năng đặc biệt như tạo liên kết thanh toán, quét mã QR, và tăng cường bảo mật với các tiêu chuẩn PCI DSS…

o Convenient Payment Link Generationo Enhanced Security with PCI DSS Standardo OTP Authentication for Added Security

 Giải pháp: Để tiết kiệm chi phí phát triển, công ty đã tận dụng sức mạnh của AItrong quá trình phát triển ứng dụng Ngoài ra, để giải quyết vấn đề thiếu hụt nhân lực, công ty quyết định sử dụng hybrid programming languages cho việc phát triển ứng dụng Cuối cùng, nhằm rút ngắn quá trình phát triển ứng dụng, công ty đã sử dụng các API và dịch vụ của bên thứ ba cho việc xử lý thanh toán, xác thực, và tăng cường bảo mật.

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

Em tham gia thực tập tại công ty bắt đầu từ ngày 17 tháng 7 năm2023 tới ngày 06 tháng 10 năm 2023, làm việc từ thứ 2 đến thứ 6hàng tuần, có thể xin phép làm việc từ xa 2 ngày mỗi tuần nhằmphục vụ việc học Công việc hằng ngày bắt đầu từ lúc 8 giờ 30 phútsáng cho đến 6h00 chiều Thời gian nghỉ trưa khoảng 1 tiếng 30phút từ 12h00 trưa cho đến 1h30 chiều Cuối mỗi ngày thực tập emđều báo cáo tiến độ công việc trong ngày bao gồm đã làm đượcnhững gì và các khó khăn gặp phải (nếu có), các thắc mắc sẽ đượccác anh hướng dẫn giải đáp, bên cạnh đó còn báo cáo về các côngviệc dự định sẽ làm vào ngày tiếp theo Phụ thuộc vào lộ trình thựctập mà có thể báo cáo tiến độ hàng tuần hoặc sẽ báo cáo cách tuầnsau khi đã xong thời hạn làm bài tập, thông thường báo cáo tiến độsẽ vào cuối ngày thứ 6 hàng tuần, anh hướng dẫn sẽ review qua bàitập, kiến thức đã tìm hiểu và dựa vào đó sẽ đánh giá, cho điểm ở cácgiai đoạn thực tập Mỗi ba tháng sếp sẽ tổ thức một buổi nói chuyện10

giữa các thành viên trong công ty, các chủ để có thể mở rộng, từviệc bàn luận về các công nghệ mới cho tới chia sẽ các vấn đề gặpphải trong cuộc sống.

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 ty

Thời gian: 1 ngày

Nội dung: giới thiệu về công ty, cách tổ chức và các team của côngty, được training về văn hóa công ty, văn hóa team, các quy địnhbảo mật của công ty, … Sau khi đã được training xong thì thực tậpsinh phải vượt qua bài kiểm tra bảo mật với số điểm tối thiểu là 80,bên cạnh đó thực tập sinh sẽ được anh An (CEO của công ty) vấnđáp về văn hóa công ty để đánh giá xem mức độ hiểu biết về vănhóa công ty của mỗi thực tập sinh Ngoài ra mỗi thực tập sinh cònđược cung cấp các công cụ, cũng như các tài khoản công ty để cóthể tham gia công việc.

Kết quả: hiểu biết thêm về công ty SparkMinds, được làm quen vớinhững anh chị trong công ty Có thêm các kỹ năng sử dụng email,các công cụ hỗ trợ khi làm việc Nắm rõ được các nguyên tắc bảomật của công ty.

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

Nội dung: Được giao tìm hiểu các công nghệ lập trình frontend webnhư là HTML, CSS, Javascript, ReactJS, Web Responsive, Bootstrap,… Thời hạn tìm hiểu mỗi công nghệ là khác nhau tùy thuộc vào độkhó của chúng, chẳng hạn như HTML, CSS chỉ có thời hạn là mộttuần để tìm hiểu và dựng giao diện theo mẫu có sẵn, còn đối vớiJavascript hoặc ReactJS thì có thời hạn 2 tuần để tìm hiểu kiến thứcvà cách triển khai của chúng Cuối thời hạn tìm hiểu của mỗi côngnghệ đều sẽ được review, đánh giá kiến thức đã tìm hiểu hoặc cácbài tập được giao bởi anh Đạt (mentor, leader của team Xáo).

Kết quả: Nắm được kiến thức cơ bản về các công nghệ lập trìnhfrontend web, dựng được các giao diện theo yêu cầu, các giao diệnresponsive trên các thiết bị khác nhau Hoàn thành các bài tập cơbản dùng Javascript thuần cũng, cũng như các bài tập ở mức cơ bảnlàm quen với ReactJS Trả lời được các câu hỏi review kiến thức củamentor.

12

2.2.2 Tuần 7 - 11

Nội dung: Thực hiện các bài tập mang tính nâng cao hơn của phầnkiến thức ReactJS, cùng với tìm hiểu thêm về Typescrip và áp dụngnó vào ReactJS Có hai bài tập lớn được xem là dự án cá nhân củaphần này đó là xây dựng giao diện có tích hợp API được cung cấpcho admin, và người dùng của một trang web thương mại điện tử.Kết quả: Hoàn thành được hai phần bài tập được giao, hiểu rõ đượccách hoạt động của ReactJS, có áp dụng Typescript vào việc lậptrình.

2.3 Thực hiện dự án cá nhân2.3.1 Công nghệ

 ViteJS: hỗ trợ trong việc dựng cấu trúc thư mục cũng như các setup cần thiết cho source code, bên cạnh đó ViteJS còn có tốc độ build nhanh hơn các công cụ khác.

 ReactJS: xây dựng giao diện dựa trên các cú pháp JSX là mở rộng của HTML giúp linh hoạt hơn trong quá trình lập trình.

 Typescript: hỗ trợ trong việc làm chặt chẽ hơn các ràng buộc cho biến, giúp phát hiện lỗi trong quá trình lập trình.

 SCSS: được sử dụng thay thế cho CSS với các cú pháp viết có thể tái sử dụng được.

 Bên cạnh đó còn có sử dụng một vài thư viện hỗ trợ khác như là: Axios, React Hook Form, React Router Dom, Redux/Redux Toolkit.

2.3.2 Mô tả dự án

Xây dựng giao diện cho một trang thương mại điện tử dựa trên API được cung cấp, thời hạn hoàn thành bài tập trong vòng khoảng 5 tuần, trong đó bao gồm cả việc tìm hiểu Typescript Giai đoạn đầu của dự án được yêu cầu dựng giao diện cho trang admin với ReactJS không áp dụng Typescript có thời hạn là 2 tuần, có yêu cầu giao diện phải giống với mẫu thiết kế được giao và tương tác được với backend Giai đoạn tiếp theo của dự án sẽ là phần tìm hiểu về Typescript và áp dụng nó vào lập trình ReactJS, thời hạn là 3 tuần, có yêu giống với giao đoạn đầu nhưng có thêm light/dark mode và đa ngôn ngữ.

2.3.3 Kết quả

Hoàn thành được tính năng cơ bản của một trang thương mại điện tử như là đặt hàng, thanh toán, quản lý các sản phẩm, danh mục, … Bên cạnh đó, còn thực hiện được các tính năng đa ngôn ngữ, light dark mode, áp dụng access token và refresh token để tăngtính bảo mật của trang web.

2.4 Tham gia dự án thực tế

Vì tính bảo mật thông tin của dự án, cũng như khách hàng nên em không thể trình bàychi tiết về dự án, nên em xin phép được trình bày khái quát về vai trò của em trong dựán cũng như những thuận lợi, khó khăn trong quá trình phát triển dự án.

Sau khi đã hoàn thành 11 tuần thực tập về ReactJS, em đã được duyệt vào dự án thựctế này với vị trí frontend developer thử việc Công việc của em được phân công trongdự án là hỗ trợ cho anh Tùng (Junior Developer) lập trình giao diện cho trang web.Ban đầu, em được phân công cho dựng các màn hình đơn giản như đăng nhập, đăngký, sau đó là đến các màn hình phức tạp hơn như trang chủ, thanh toán Bên cạnh đóem cũng được phân công cho việc gắn api cho trang web Sau khi dự án đã triển khaiđược khoảng một tháng thì anh Tùng được rút khỏi dự án để tham gia đảm nhiệm cácdự án khác, em được chính thức tham gia đảm nhiệm phần giao diện cho dự án này.Về các khó khăn gặp phải: Ban đầu khi phải tiếp cận dự án với các souce code đãđược dựng từ trước thì khá khó khăn cho việc hiểu được flow của code, cách triểnkhai các tính năng như thế nào cho phù hợp, các cách tương tác với api dựa trên cấutrúc có sẵn của source, chưa có kinh nghiệm trong dự án thực tế nên việc triển khaicác hàm, các hook còn lộn xộn, thiếu tính tổ chức, khả năng giao tiếp trao đổi cònkém.

Về thuận lợi: Được anh Tùng hướng dẫn lại flow của source cũng như sẽ review cácPull Request tính năng, từ đó cải thiện được cách tổ chức code, tối ưu hoá được việcđặt hàm Các anh chị trong team cũng hỗ trợ và giúp đỡ cải thiện hơn khả năng giaotiếp.

14

CHƯƠNG 3: TỔNG KẾT

Quãng thời gian thực tập tại công ty SparkMinds đã giúp em cảithiện bản thân rất nhiều trong quy trình làm việc thực tế, tác phongcủ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, giaotiếp với cấp trên, các kiến thức về lập trình web, cách làm việc hiệuquả với git, …

Với khoảng thời gian không quá dài, em đã có thể hoàn thành đượccác bài tập training cũng như dự án cá nhân, đạt được các yêu cầuđề ra.

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

3.1 Điểm mạnh

 Tinh thần sẵn sàng học hỏi các kiến thức mới, tốc độ học hỏi các công nghệ mới khá nhanh.

 Đảm bảo được thời hạn của các bài tập, công việc được giao.

 Chăm chỉ trong công việc, thời gian training dự kiến là khoảng 3 tháng nhưng đã có thể hoàn thành trong vòng 11 tuần.

Goal Mục tiêu môn học

G1 Nắm bắt được xu hướng, nhu cầu xã hội và tính đặc thù của doanh nghiệpG2 Hiểu và giải thích được các khái niệm cơ bản, thuật ngữ và sơ đồ hệ thống

G5 Phát triển kỹ năng tư duy, kỹ năng làm việc nhóm và kỹ năng trình bàyG6 Đọc, hiểu các tài liệu và giao tiếp bằng tiếng Anh

16