Báo cáo thực tập lập trình FRONT END DATA INSIDER

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

LẬP TRÌNH FRONT-END DATA INSIDER

Cơng ty thực tập

: KIKI TECHNOLOGY

Người phụ trách

: Vĩ Trí Thiện

Thực tập sinh

: Trần Đình Thiện

TP. Hồ Chí Minh, 29 tháng 1 năm 2021

Trần Đình Thiện


LỜI MỞ ĐẦU

Trong thời đại 4.0, khi gần như mọi thông tin đều được đưa lên các trang web, mảng phát
triển và thiết kế web đóng vai trị là một trong những ngành quan trọng công nghệ thông
tin. Do nhu cầu người dùng ngày càng cao nên việc phát triển web có tốc độ phát triển vơ
cùng mạnh mẽ, liên tục thúc đẩy ngành công nghệ thông tin.
Việt Nam không phải ngoại lệ. Các công ty web ở nước ta khơng ngừng phát triển để theo

kịp, hịa nhập và cạnh tranh với các thị trường quốc tế.
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ư
tham gia vào môi trường làm việc chuyên nghiệp nên em đã quyết định đi thực tập kì này.
Vì vậy, em quyết định chọn KiKi Technology- mặc dù chỉ là một startup nhưng đây là 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.

Trần Đình Thiện


LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty Kiki technology đã tạo điều kiện cho em có cơ hội
được thực tập tại công ty.
Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của nhóm trainer, nhóm
thực tập chúng em đã tiếp thu được những kiến thức quan trọng để có thể làm được một
website. Chân thành cảm ơn các anh chị trong nhóm trainer đã bỏ ra nhiều thời gian,công sức để
hướng dẫn chúng em hoàn thành đợt thực tập này.
Đặc biệt cảm ơn anh Vĩ Trí Thiện đã training Vuejs , hướng dẫn, giúp đỡ cho em tận tình
cả những khó khăn trong cơng việc, đến những khó khăn việc làm quen với môi trường mới;
cảm ơn anh Đặng Khắc Thiện, đã training em về những kiến liên quan tới back-end, hỗ trợ
chúng em rất nhiều về các vấn đề kỹ thuật REST-ful api, cảm ơn anh Sáng, anh đã chỉ dẫn
chúng em về cách làm báo cáo, lên kế hoạch, những kỹ năng không thể thiếu; cảm ơn các anh
đã training cho chúng em những kiến thức quan trọng về Javascript, OOP, để có thể tham gia
vào q trình tạo ra sản phẩm cùng các anh.
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ài báo cáo này.
Trần Đình Thịện
TpHCM, ngày 29 tháng 1 năm 2021

Trần Đình Thiện

NHẬN XÉT CỦA KHOA

.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................

Trần Đình Thiện


MỤC LỤC
Chương 1: Giới thiêu công ty thực tập....................................................................................................6
1.

Giới thiệu công ty Kiki technology...............................................................................................6

2.

Sản phẩm của công ty....................................................................................................................6

Chương 2: Nội dung thực tập......................................................................................................................7
1.

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

2.

Nghiên cứu kỹ thuật.......................................................................................................................7
2.1.

Các công cụ làm việc...............................................................................................................7

2.2.

Tìm hiểu ngơn ngữ Javascript, Typescript, framework VueJs..............................................7

2.3.

Lập trình website trên framework Vuejs.................................................................................8

3.

Thực hiện project...........................................................................................................................8

4.

Lịch làm việc...................................................................................................................................9

Chương 3: Chi tiết về project.................................................................................................................10
1.

2.

Giới thiệu về project Data Insider..............................................................................................10
1.1.

Login form..............................................................................................................................10

1.2.

Sharing link............................................................................................................................10

Kế hoạch........................................................................................................................................11

TÀI LIỆU THAM KHẢO.........................................................................................................................12

Trần Đình Thiện


Chương 1: Giới thiêu công ty thực tập
1. Giới thiệu công ty Kiki technology

Kiki technology là công ty start-up, sản phẩm đầu tiên của công ty là phần mềm
giúp học anh văn tên là KiKi trên nền tảng mobile.

Năm 2020 công ty quyết định thực hiện một dự án nữa mang tên Data Insider với
mục tiêu là giúp doanh nghiệp và người dùng có thể kiểm sốt các loại dữ liệu.
2. Sản phẩm của công ty
- App kiki trên nền tảng mobile được phát hành năm 2019. App giúp cho các

-

bạn mới bắt đầu học tiếng anh có thể nhớ từ vụng được lâu và nhanh chóng.
Ngồi ra app có thể luyện nghe, đọc báo.
Là sản phẩm được rất nhiều các bạn trẻ sử dụng, và có được đánh giá cao.
Năm 2020 công ty bắt đầu thực hiện một dự án khác về big data. Cũng là
project em được may mắn tham gia vào thực hiện.

Trần Đình Thiện


Chương 2: Nội dung thực tập
Khi tham gia thực tập cùng với công ty, em được tham gia vào dự án DataInsder với vai
trò là front-end của dự án. Đây là một sản phẩm về mảng bigdata
1. Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty

Thời gian : 2 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, q trình thành lập và phát triên
(như đã nhắc đến ở trê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 .
Ngồi ra, thực tập sinh cịn được giới thiệu về cách thức làm việc trong công ty
như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong công
việc…
Kết quả : Hiểu thêm về cơng ty KiKi, q 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. Nghiên cứu kỹ thuật
2.1.

2.2.

Các cơng cụ làm việc
Thời gian : 4 ngày
Nội dung : Tìm hiểu về các công cụ sẽ được sử dụng trong quá trình làm việc.
Trong thời gian này, supervisor đã hướng dẫn thực tập sinh tìm hiểu về các cơng
cụ sẽ giúp ích cho trong công việc sau này. Một số phần mềm trong số đó như GIT sử dụng trong làm việc nhóm, Isominia– một phần mềm test api, IntelliJ – giống như
VScode thì IntelliJ cũng là một editors.
Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.
Kết quả : Lập trình sử dụng các cơng cụ miễn phí, giúp dễ dàng kết hợp các cơng cụ
với nhau, so với việc dung các IDE.
Tìm hiểu ngơn ngữ Javascript, Typescript, framework VueJs
Thời gian : 7 ngày (1 tuần)
Nội dung : Được training về các kỹ thuật Javascript nâng cao, những kiến thức quan
trọng cho việc tối ưu trên browser
- Lập trình hướng đối tượng
Các kiến thức cơ bản về lập trình hướng đối tượng như khái niêm, các đặc tính
như tính kế thừa, tính đóng gói, tính ảo hóa, tính đa hình..
- Quản lý bộ nhớ
Thực tập sinh sẽ được hướng dẫn về cách cấp phát, quản lý bộ nhớ sao cho tối ưu,
tránh rị rỉ bộ nhớ.

Trần Đình Thiện

-

Hiệu suất
Thực tập sinh được hướng dẫn cách code tối ưu để cải thiện suất chương trình
Thực hiện :
- Tham gia đầy đủ các buổi training của công ty.
- Làm các bài thực hành, kiểm tra về kiến thức đã học.
Kết quả :
-

Nâng cao kỹ năng lập trình với ngơn ngữ Javascript
Có được những kiến thức quan trọng cho việc lập trình front-end sau này.
Ngồi ra cịn được biết thêm một số quy tắc trong việc viết code sao cho đúng
chuẩn, dễ đọc, dễ hiểu.

Lập trình website trên framework Vuejs

2.3.

Nội dung : Lập trình với framework.
-

Định nghĩa về Vuejs:
Vuejs gọi tắt là Vue là một framework linh động dùng để thiết kế giao diện người
dung. Khác vơi giao diện nguyên khối, Vue được thiết kế từ đầu theo hướng cho
phép và khuyến khích việc phát triển ứng dụng theo các bước. Khi phát triển lớp
giao diện người dùng chỉ cần dùng thư viện lõi của Vue. Vốn rất dễ học và tích
hợp với các thư viện hoặc dự án có sẵn.

-

Tạo website:
Được hướng dẫn tạo một website tĩnh bằng Vuejs, các kỹ thuật lập trình cùng với
cách quản lý data, chia thư mục.

3. Thực hiện project
Sau 2 tuần, thực tập sinh được training các kỹ năng lập trình để thực hiện project cùng
với các anh chị trong công ty. Tháng thứ 2, thực tập sinh được chia sẻ công việc cùng với
anh chị trong công ty để cùng làm.
Chi tiết đồ án sẽ được nói ở phần sau.
4. Lịch làm việc

Trần Đình Thiện


Tuần
-

1

-

2

-

3
4
5

6

-

7
8

-

Mức
độ
Cơng việc
Người hướng dẫn
hồn
thành
Tìm hiểu về cơng ty, Anh Vĩ Trí Thiện
Hồn
cách tổ chức của
thành
cơng ty.
Làm quen với các
cơng cụ làm việc
trong cơng ty.
Học cách trao đổi,
làm việc qua email.
Tìm hiểu ngơn ngữ Anh Vĩ Trí Thiện
Hồn
lập trình nâng cao
thành
Thực hành Js và

Vuejs
Thiết kế login form Anh Vĩ Trí Thiện
Hồn
thành
Thiết kế register Anh Vĩ Trí Thiện
Hồn
form
thành
Tích hợp api
Anh Vĩ Trí Thiện
Hồn
thành
Thực hiện chức Anh Vĩ Trí Thiện
Hồn
năng share link
thành
Anh
Vĩ
Trí
Thiện
- Thực hiện
Hồn
chức năng
thành
search by
date
Tích hợp api
Anh Vĩ Trí Thiện
Hồn
thành

Nhận xét của người
hướng dẫn

Trần Đình Thiện


Chương 3: Chi tiết về project
1. Giới thiệu về project Data Insider

-

Project này là một phần nhỏ trong hệ thống CRM, là một dự án bigdata.

-

Link />
1.1.

-

1.2.

-

Login form
Trang login là phần để user thực hiện đăng nhập

Filter by date
Mô tả: Dùng để lọc dữ liệu theo ngày, có thể lọc theo 7 ngày, 30 ngày, hôm nay,

hoặc tuỳ chỉnh theo người dùng.

Trần Đình Thiện


1.3.

-

Sharing link
Mô tả: chia sẻ link để redirect tới phần được chia sẻ, gồm có 3 phân quyền là
viewer, fullscreen và edit.

2. Kế hoạch

Trần Đình Thiện


Giai đoạn 1:
-

Tạo page login theo template của công ty.

-

Thực hiện responsive.

-

Quản lý session sau khi login.

Kết quả :
-

Mục tiêu hồn thành.

Giai đoạn 2:
-

Tìm hiểu về package vue calendars áp dụng vào project công ty.
Customize calendar.
Quản lý dữ liệu từ server trả về.

Kết quả :
-

Mục tiêu hoàn thành.

Giai đoạn 3:
-

Hiện thực chức năng share link.

-

Phân quyền chức năng khi share link.

-

Quản lý state “Mode view”

Kết quả:
-

Mục tiêu hồn thành.

Trần Đình Thiện


TÀI LIỆU THAM KHẢO
For framework
/>For languages
/>For package
/> />
Trần Đình Thiện


TỔNG KẾT

Như vậy, chỉ trong vòng 10 tuần ngắn ngủi, em được tham gia vào dự án cùng với các
anh chị trong công ty để thực hiện vài chức năng của dự án. Những yêu cầu mà anh chị đưa ra
trong thời gian thực tập em đều hoàn thành.
Chân thành cảm ơn sự giúp đỡ của các anh chị trong cơng ty đã giúp em để có thể hồn
thành cơng việc trong lúc thực tập này.

Trần Đình Thiện