Báo cáo thực tập lập trình WEB FRONT END (2)

Các sản phẩmcủa công ty bao gồm SwimOutlet.com, trang web nổi tiếng về sản phẩmbơi lội, YogaOutlet.com một trong những trang web bán những gói dạyyoga online và Swim.cohỗ m nền tảng kĩ t

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

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

LẬP TRÌNH WEB FRONT-END

Công ty thực tập : Công Ty Spiraledge

Người phụ trách : Lê Tuấn Anh

Thực tập sinh : Bùi Gia Hòa

TP Hồ Chí Minh, tháng 7 năm 2020

LỜI MỞ ĐẦU

Việc lướt web để nắm bắt thông tin, phục vụ cho việc thư giãn, giải trí đã trởthành một phần không thể thiếu trong mỗi chúng ta Đặc biệt là thế hệ trẻ cần phảitruy cập internet để tự mở mang trau dồi kiến thức cho bản thân

Việt Nam với nền kinh tế đang trên đà phát triển thì không thể thiếu đượcmột phần đóng góp hết sức to lớn của ngành công nghệ thông tin nói chung vàngành làm web nói riêng Web giúp các doanh nghiệp quảng bá sản phẩm thươnghiệu họ cho khách hàng, cho đối tác hiệu quả hơn so với các cách làm truyền thốngnhư báo, ấn phẩm, đài tiếng nói truyền hình Web giúp ta dễ dàng tiếp cận, chămsóc khách hàng tốt hơn Web giúp cho việc kinh doanh của các doanh nghiệp lớnhay là nhỏ lẻ, hộ gia đình hoạt động 24/7 Web giảm tải gánh nặng chi phí vậnhành doanh nghiệp, giảm nhân công, tăng hiệu suất và nhiều lợi ích tuyệt vời khác

mà trang web mang lại cho cuộc sống con người hiện tại

Mặc dù Việt Nam còn khá non trẻ trong lĩnh vực công nghệ thông tin Tuynhiên, đất nước ta đang phát triển mạnh mẽ, sản sinh ra nguồn nhân lực chất lượngcao đóng góp cho nền kinh tế cho sự hòa nhập với những công ty IT hàng đầu trênthế giới Một trong số công ty có tên tuổi trong nước như Spiraledge đang gópphần rất lớn vào sự phát triển tích cực cho sự phát triển công nghệ của đất nước

Sau khoảng thời gian ra sức học tập và tham gia cuộc thi học thuật trêntrường, với mục đích mở rộng vốn kiến thức lập trình còn non nớt của bản thân

Em đã đi thực tập và nơi em chọn là công ty SpiralEdge – một môi trường năngđộng, chuyên nghiệp – là nơi sẽ giúp em thực hiện được kế hoạch của bản thân

Đặc biệt cảm ơn anh Lê Tuấn Anh đã hướng dẫn, giúp đỡ cho chúng em tậntình cả những khó khăn trong công việc, đến những khó khăn việc làm quen vớimôi trường mới; cảm ơn anh Lê Nguyễn Nhật Trung đã là người hướng dẫn emviết trang web Chỉ em cách sửa những lỗi thường gặp.

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

BÙI GIA HÒA

NHẬN XÉT CỦA KHOA

MỤC LỤC

LỜI MỞ ĐẦU 2

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

BÙI GIA HÒA

6

CHƯƠNG 1: GIỚI THIỆU CÔNG TY

THỰC TẬP

1 Giới thiệu công ty Spiraledge:

-Spiraledge là một trong những công ty hàng đầu chuyên về mảng sứckhỏe và mua sắm online có trụ sở đặt tại CampBell, California với cácvăn phòng ở Cincinati, Ohio và Hồ Chí Minh, Việt Nam Các sản phẩmcủa công ty bao gồm SwimOutlet.com, trang web nổi tiếng về sản phẩmbơi lội, YogaOutlet.com một trong những trang web bán những gói dạyyoga online và Swim.cohỗ m nền tảng kĩ thuật số dạy bơi và tập thể dục.-Kể từ khi thành lập vào năm 2001, công nghệ đã trở thành vấn đề cốtlõi của văn hóa công ty và là chìa khóa quyết định cho sự thành côngnhư ngày hôm nay của Spiraledge, cho phép chúng ta tập trung vào sứmệnh cốt lõi của công ty: hoàn thiện trải nghiệm mua sắm trực tuyến chokhách hàng của họ

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

-Spiraledge thiết kế các trang web mua sắm hàng trực tuyến, hỗ trợ nôngdân làm nông nghiệp buôn bán các sản phẩm thô trực tuyến chạy trên đanền tảng

Android, Iphone, laptop, mobile web

Nhờ là công ty có chuyên môn lâu năm trong lĩnh vực công nghệ thôngtin Spiraledge sỡ hữu những sản phẩm nổi tiếng do chính bản thân họlàm ra

8

BÙI GIA HÒA

1 0

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

Đợt thực tập với chủ đề “Lập trình front-end web” nhằm mục đích giúp sinhviên thực tập được đào tạo kĩ năng về lập trình web, đồng thời rèn luyện kĩ năngmềm như tư duy logic, thuyết trình, làm việc nhóm Tại công ty, sinh viên có cơhội được học tập,

Đợt thực tập với chủ đề “Lập trình web front-end server-render-side” nhằmmục đích giúp sinh viên ứng dụng được kiến thức của mình vào thực tiễn, đồngthời rèn luyện những kĩ năng mềm như kĩ năng tư duy, làm việc nhóm, thuyếttrình, giao tiếp Tại công ty, sinh viên có cơ hội được phép sai và sửa sai, được cácanh chị đi trước review code và khắc phục những lỗi sai cơ bản như đặt tên biến

mà không khởi tạo giá trị, khởi tạo hàm nhưng không đặt điều kiện khi nào chạyvào hàm đó Tư duy logic rõ ràng và chặn những lỗi phát sinh từ người dùng trongquá trình deploy sản phẩm đến người dùng

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 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 (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

Ngoài ra, thực tập sinh còn được giới thiệu về cách thức làm việctrong 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 Spiraledge, 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.Nghiên cứu kỹ thuật:

a)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, anh mentor đã 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ầnmềm trong số đó như Tortoise SVN - sử dụng trong làm việc nhóm,

công cụ giúp lập trình viên push pull code của dự án từ git về, bit-buckettheo dõi các commit và branch được tạo ra trong dự án jira – công cụgiúp quản lí quy trình nghiệp vụ tích hợp sử dụng Agile.

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

b)Tìm hiểu ngôn ngữ Javascript, HTML, CSS:

Thời gian : 4 ngày (1 tuần)

Nội dung : Được hướng dẫn về các kỹ thuật javascript, những kiến thức

quan trọng cho việc tối ưu chương trình chạy trên trình duyệt web chẳnghạn là chrome hay firefox

● Sử dụng closure: tìm hiểu closure là gì, các đặc tính của closuretrong javascript Closure là tập hợp bao gồm hàm và nơi hàm số đóđược khai báo Ở đây môi trường bao gồm những biến cục bộtrong phạm vi hàm số được khai báo và các mức độ truy cập củaclosure

● Cách khởi tạo biến và xác định mức độ truy cập của biến, hàm:

● Học vể html: cách sử dụng các thẻ để tạo nên một trang web Sựkhác biệt giữa thẻ div và span là như thế nào Ngoài ra, thực tậpsinh còn được biết thêm về html5, những thẻ mới và tính năng củanó

● Học về css: cách viết một css class, cách sử dụng các css atributekhiến trang web lung linh, giao diện thân thiện với người dùnghơn

● Học cách dùng jQuery, bootstrap: jQuery và bootstrap là hai thưviện hết sức phổ biến mà đa số các trang web hiện nay đều đang sửdụng Trong quá trình thực tập, thực tập sinh được các anh/ chị đitrước giới thiệu về khái niệm căn bản, những module thường được

sử dụng trong jQuery Ví dụ như module ajax (xử lí ajax, dùng đểgọi api nhận hay truyền dữ liệu cho bên back-end), module atribute(xử lí các thuộc tính của đối tượng html), module event (xử lí sựkiện của người dùng) Đối với bootstrap, lập trình viên có thể sửdụng nó để khiến giao diện trang web hiển thị tốt hơn trên các thiết

bị android, ios, laptop với nhiều kích cỡ khác nhau

● Tìm hiểu về JSON: thực tập sinh tìm hiểu về JSON và ứng dụngcủa nó trong việc trao đổi dữ liệu trên web JSON là viết tắt củajavascript object notation, là một kiểu định dạng dữ liệu tuân theo

BÙI GIA HÒA

1 2

một quy luật nhất định mà hầu hết các ngôn ngữ lập trình hiện nayđều có thể đọc được

Thực hiện :

● Tham gia đầy đủ các buổi training của công ty

● Ứng dụng các kiến thức của bản thân vào thực tế

Kết quả :

● Nâng cao kỹ năng lập trình với ngôn ngữ javascript, html, css

● Có được những kiến thức quan trọng cho việc lập trình web sau này

● Ngoài ra còn được biết thêm một số quy tắc trong việc viết code saocho đúng chuẩn, dễ đọc, dễ hiểu

c)Lập trình web với angularJS:

Nội dung: Các kiến thức cơ bản về angularJS để có thể làm ra một trang

web

● Khái niệm cơ bản về angularJS.

Năm được các khái niệm cơ bản về angularJS, là một framework cho

các ứng dụng web, được phát triển từ năm 2009 bởi Google và bảncập nhật mới nhất cho đến bây giờ là 2.0 Ngoài ra, trainer còn cungcấp cho thực tập sinh những khái niệm cơ bản như cách tạo mộtcomponent sử dụng angular CLI, cách gọi các function ở cáccontroller khác nhau

● Cách gọi các hàm ở controller khác nhau sử dụng $broadcast, $emit,

$on:

Đôi khi ứng dụng angularJS cần sự giao tiếp giữa các controller khácnhau Chẳng hạn như là gửi một thông báo để truyền dữ liệu giữa cáccontroller Một trong cách giao tiếp đó là sử dụng $broacast, $emit,

$on $broacast và $emit giúp lập trình viên gửi một sự kiện Sự khácbiệt giữa hai hàm này là: broadcast dùng để gửi một sự kiện từ chasang con, emit dùng để gửi một sự kiện từ con sang cha Còn $ondùng để nhận sự kiện và biến được truyền vào

● Jquery:

Học cách dùng jQuery, bootstrap: jQuery là thư viện hết sức phổ biến

mà đa số các trang web hiện nay đều đang sử dụng Trong quá trìnhthực tập, thực tập sinh được các anh/ chị đi trước giới thiệu về kháiniệm căn bản, những module thường được sử dụng trong jQuery Ví

dụ như module ajax (xử lí ajax, dùng để gọi api nhận hay truyền dữ

tượng html), module event (xử lí sự kiện của người dùng).

● Bootstrap:

Học cách dùng bootstrap: bootstrap là thư viện do Twitter tạo ra nhằmgiúp lập trình viên có thể thiết kế trang web dễ dàng hơn Trong quátrình thực tập, thực tập sinh được các anh/ chị đi trước giới thiệu vềkhái niệm căn bản, lập trình viên có thể sử dụng bootstrap để khiếngiao diện trang web hiển thị tốt hơn trên các thiết bị android, ios,laptop với nhiều kích cỡ khác nhau

● Google chart

Là biểu đồ hiển thị giúp cho người dùng có cách nhìn trực quan về sốliệu của tài khoản mình Google chart hỗ trợ rất nhiều loại biểu đồkhác nhau Tuy nhiên trong quá trình thực tập, thực tập sinh được giớithiệu chủ yếu là biểu đồ dạng cột Cách khởi tạo biếngoogleVisualisation, truyền dữ liệu vào như thế nào, cách dán nhãntừng cột ra sao Ngoài ra, thực tập còn được chỉ số lỗi thường gặp nhưtext overlap, trang html phải hiển thị trước khi chạy code javascriptnhằm vẽ biểu đồ không bị méo

● Thư viện lodash

Lodash là phiên bản mở rộng của underscore, với nhiều chức năngcho hiệu năng cao hơn Các chức năng của lodash được chia ra làmcác nhóm: nhóm xử lí array, nhóm xử lí object, nhóm xử lí date, nhóm

xử lí Date,…

Thực hiện :

● Tham gia đầy đủ các buổi trainning

● Làm các bài tập thực hành như bắt sự kiện người dùng trên trang html,ng-click, ng-mouseenter, ng-mousehover

● Tìm kiếm tài liệu trên mạng để tìm hiểu thêm

Kết quả :

● Hiểu được những khái niệm cơ bản trong lập trình sử dụng frameworkangularJS

d)Cách build và deploy dự án lên server:

Nội dung : Các kỹ thuật tạo ra một trang web cơ bản.

● Định nghĩa về web reponsive:

Là một phong cách thiết kế website sao cho phù hợp với tất cả cácthiết bị, mọi độ phân giải màn hình

● Giới thiệu về jenkins:

BÙI GIA HÒA

1 4

Jenkins là một opensource dùng để thực hiện chức năng tích hợp liêntục và xây dựng các tác vụ tự động hóa Nhóm dự án sử dụng jenkins

để build code lên server và lưu lại log nhằm fix lỗi

● Tạo một chức năng và build lên trang web demo cho tester review:Sau khi viết xong một tính năng, dev sẽ build code lên server để QCtest chức năng sau đó mới deploy lên server chính thức

Thực hiện :

● Tham gia đầy đủ các buổi training

● Thêm những chức năng cho các trang đã có sẵn, deploy lên server vàfix bug

đã học để thực hiện một số chức năng fix lỗi ở một dự án thực tế Nhữngtháng tiếp theo, thực tập sinh có cơ hội được làm trong một dự án thực tế.Học cách làm theo sprint trong agile, fix bug của những chức năng hiện tại.Chi tiết đồ án sẽ được nói ở phần sau

4.Lịch làm việc:

Mức độ hoàn thành

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

1

-Tìm hiểu về công ty, cách

tổ chức của công ty

-Làm quen với các công cụ

làm việc trong công ty

1 6

CHƯƠNG 3: CHI TIẾT VỀ PROJECT

1.Giới thiệu về trang web tend:

-Tend là phần mềm quản lí nông trại giúp cho nông dân có thể dễ dàng quản lí câytrồng của họ theo mùa vụ

2.Các tính năng chính trong trang web:

-Quản lí cây trồng: Tend tích hợp việc trồng cây với quản lí tác vụ để giảm thiểucác bản số liệu và giúp dễ dàng hơn để phân tác vụ theo tuần, nhờ thế người nôngdân có thể vận hành trang trại họ trơn tru

-Quản lí tác vụ: giúp cho người nông dân có thể hệ thống hóa tất cả công việc mà

bản thân họ cần làm

BÙI GIA HÒA

1 8

-Mua sắm trực tuyến: nông dân có thể bán sản phẩm của họ trực tiếp cho khách hàng:

-Pick & Pack: giúp người nông dân kết nối hoạt đông mua bán với mùa vụ của họ.

BÙI GIA HÒA

2 0

-Reports: cung cấp biểu đồ trực quan nhằm giúp nông dân đưa ra các quyết định tốthơn

BÙI GIA HÒA

2 2

TÀI LIỆU KHAM KHẢO

-Tài liệu ngôn ngữ javascript, html, css:

https://www.youtube.com/watch?v=XO2m53_H06I&list=PLw5h0DiJ-9PC Tài liệu về thư viện bootstrap, jquery

TỔNG KẾT

Sau đợt thực tập tại công ty Spiraledge, em đã kịp hoàn thành một số chứcnăng của trang web https://app.tend.com/ chạy trên nền tảng pc, android và ios.Trang web được cải thiện nhiều tính năng mới như online store (giúp khách hàng

có thể mua trực tuyến các sản phẩm thô của nông dân), pricing (cập nhật lại các gói

sử dụng dịch vụ với nhiều mức giá ưu đãi hơn), cải thiện giao diện của trang web

Chân thành cảm ơn sự giúp đỡ của các anh chị trong nhóm Tend, để hoànthành những chức năng được cập nhật trong quá trình em thực tập

BÙI GIA HÒA