Cơ cấu tổ chức của gumi Việt Nam Gumi Việt Nam là sự kết hợp giữa sức trẻ, tri thức và đội ngũ các nhà quản lý đầy kinh nghiệm, gumi gồm nhiều kỹ sư tin học được đào tạo bài bản từ các t
Trang 1KHOA CÔNG NGHỆ PHẦN MỀM
BÁO CÁO THỰC TẬP
FRONT-END WEB DEVELOPER
Thực tập sinh : Võ Thái Hoà
TP Hồ Chí Minh, tháng 1 năm 2021
Trang 2LỜ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ò quan trọ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ầu hế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ông tin liên lạc, Hiện nay đã có đến hơn 1.5 tỷ trang web, nhưng nhu cầu tạ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 được yếu tố hình thức và nội dung Làm thế nào để sản phẩm tạo ra đạt chất lượng cao ở hai yếu tố trên luôn làm bất kì một đội ngũ phát triển website nào cũng cần phải suy nghĩ đau đầu Để thử thách bản thân trong ngành công nghiệp web, em đã lựa chọn Front-end web developer là định hướng cho 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ụng nhữ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 gumi VietNam – một môi trường lý tưởng và chuyên nghiệp để thực hiện dự định
Trang 3LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty gumiVietnam đã 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 mentor, 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 những giao diện web tuyệt vời Chân thành cảm ơn các anh chị trong nhóm mentor đã 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 Nguyễn Anh Tuấn, đã training front-end, hướng dẫn, giúp đỡ cho
chúng 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 Nguyễn Nhất Nguyên tạo điều khiện training và đã giúp đỡ em trong suốt quá trình thực tậ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
Võ Thái Hoà TpHCM, ngày 10 tháng 1 năm 2021
Trang 4NHẬN XÉT CỦA KHOA
Trang 5
MỤC LỤC
MỤC LỤC 7
Chương 1: Giới thiệu công ty thực tập 8
Giới thiệu về công ty Gumi Viet Nam 8
Sản phẩm của công ty 8
Chương 2: Nội dung thực tập 11
Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 11
Nghiên cứu kỹ thuật 11
Thực hiện project 13
Lịch làm việc 13
Chương 3: Chi tiết về project 15
Giới thiệu về Project 15
Kế hoạch 17
TÀI LIỆU THAM KHẢO 18
TỔNG KẾT 19
Chương 1: Giới thiêu công ty thực tập
1 Giới thiệu công ty gumiViet
Công ty cổ phần gumi Việt Nam là công ty CNTT có vốn đầu tư 100% đến từ Nhật Bản chuyên về phát triển website và các ứng dụng dành cho smart phone Được thành lập từ năm 2012 tại Việt Nam
- Định hướng phát triển sản phẩm – dịch vụ
Đầu tư phát huy công nghệ mới, vận dụng kiến thức chuyên sâu vào hoạt động Nghiên cứu vào lĩnh vực chuyên môn Cung cấp hệ thống website/Mobile App phù hợp
Trang 6với mong muốn của khách hàng Các sản phẩm, dịch vụ được tạo ra trên nền tảng VR/AR
- Giá trị cốt lõi
Hướng tới khách hàng
Hợp tác chia sẻ
Năng động sáng tạo
Phát triển mạnh mẽ
- Chiến lược phát triển
Tầm nhìn : Gumi Việt Nam mong muốn trở thành người bạn đồng hành hàng đầu
của các tổ chức và doanh nghiệp trong việc cung cấp các giải pháp, sản phẩm công nghệ có giá trị sáng tạo, có tính ứng dụng cao, nhằm thú đẩy hoạt động kinh
doanh phát triển hiệu quả
Sứ mệnh: Trong suốt quá trình hoạt động, gumi Việt Nam luôn nỗ lực với mục
tiêu cao nhất là mang lại sự hài lòng cho khách hàng với phon cách làm việc chuyên nghiệp, luôn đảm bảo tính chính xác, kịp thời của dự án Ngoài ra gumi Việt Nam tiên phon trong các xu hướng công nghệ mới góp phần vào sự nghiệp công nghiệp hóa, hiện đại hóa đất nước trong bối cảnh hội nhập kinh tế Thế giới
- Số năm kinh nghiệm trong lĩnh vực bán hàng dịch vụ: 8 năm
- Chính sách chất lượng
Luôn cung cấp những sản phẩm dịch vụ tốt nhất, đảm bảo thi công đúng tiến độ, chất lượng, hiệu quả, an toàn như đã thỏa thuận với khách hàng
Không ngừng cải tiến về mọi mặt để đạt được sự hoàn hảo về sản phẩm và dịch
vụ cung cấp, về mối quan hệ với khách hàng và khả năng cạnh tranh
Liên tục đào tạo nhằm phát triển nguồn nhân lực; tăng cường đầu tư trang thiết bị
kỹ thuật và công nghệ thi công hiện đại; nghiên cứu và ứng dụng các phương thức quản lý hiệu quả, chuyên nghiệp, tiên tiến nhất nhằm đáp ứng tối đa yêu cầu của Khách hàng, Đối tác
2 Tổ chức và các lĩnh vực hoạt động của gumi Việt Nam
- Sản xuất phần mềm, gia công phần mềm
- Cung cấp hệ thống website/Mobile App
Trang 7- Cung Cấp các sản phẩm, dịch vụ được tạo ra trên nền tảng VR/AR
3 Cơ cấu tổ chức của gumi Việt Nam
Gumi Việt Nam là sự kết hợp giữa sức trẻ, tri thức và đội ngũ các nhà quản lý đầy kinh nghiệm, gumi gồm nhiều kỹ sư tin học được đào tạo bài bản từ các trường Đại học danh tiếng về Công nghệ thông tin hiện nay, có kinh nghiệm lâu năm trong lĩnh vực xây dựng phần mềm
- Ban giám đốc:
CEO : Harada Shogo
General Manager : Phạm Quí Toàn
CTO : Nguyễn Sỹ Đăng
- Các bộ phận:
Phòng Marketing
Phòng Hỗ trợ khách hàng
Phòng Phát triển Website/Mobile App
Trang 8CHƯƠNG 2: NỘI DUNG THỰC TẬP
Được thực tập với chủ đề “Front-end developer” nhằm mục đích giúp sinh viên thực tập được đào tạo toàn diện về lập trình giao diện web, đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, thuyết trình, giao tiếp Tại công ty, sinh viên có cơ hội được học tập, khám phá và làm việc trong một môi trường công nghệ chuyên nghiệp
Là thành viên của team front-end trong Công ty cổ phần gumiVietnam sẽ có cơ hội được học tập trau dồi các kiến thức về lĩnh vực lập trình giao diện web, được tiếp cận với các nền tảng công nghệ mới khác nhau, được tăng khả năng tìm kiếm và đọc hiểu tài liệu tiếng Anh…
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ệ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 gumiViet, 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
2.1 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, 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ần mềm trong số đó như WebStorm– IDE chính để lập trình giao diện, Terminal để sử dụng git, SourceTree để
sử dụng git với GUI
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
2.2 Tìm hiểu ngôn ngữ Html,css, scss
Vì em mới vào công ty và chưa biết gì về front-end nên được công ty đào tạo lại từ đầu.
Thời gian : 30 ngày (1 tháng )
Nội dung : Được training về các kỹ thuật html, css, scss cơ bản và nâng cao, những
kiến thức quan trọng cho việc tạo các layout responsive cho trang web
Trang 9- Html : cấu trúc và các thành phần trong trang web và ứng dụng, phân chia các đoạn văn, heading, links,…
- Css : Tạo phong cách và kiểu cho trang web nhu tạo bố cục các layout, color, khoảng cách, reponsive,…
- Scss : Là tiền xử lý css, giúp viết css theo cách một ngôn ngữ lập trình, có cấu trúc
rõ ràng , rành mạch, dễ phát triển và bảo trì code hơn
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ắm được kiến thức html/css/scss cơ bản
- Nắm được BEM name
- Có thể dàn được layout trang web, style theo design và responsive
2.3 Tìm hiểu về js dom/Jquery.
Thời gian : 30 ngày (1 tháng )
Nội dung: Tìm hiểu về js/Jquery cơ bản , Ui/Ux, Bootstrap.
- Tìm hiểu về Js/Jquery:
- Tìm hiểu js dom
- Tìm hiểu về object, function, class, Async
- Tìm hiểu jquery
- Tìm hiểu Js web Apis
- Kiến thức cơ bản về UI/UX: Tìm hiểu khái niệm ui/ux.
- Bootstrap: Tìm hiểu bootstrap, bootstrap gird,…
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ư làm lại các màn hình có sẵn, thêm những logic phức tạp, …
- Tìm kiếm tài liệu trên mạng để tìm hiểu thêm
Kết quả :
- Nắm được nắm được kiến thức js/jquery cơ bản để làm animation cho web
- Sử dụng được thư viện front-end như slick slider
- Áp dụng kiến thức Js để responsive cho web
- Áp dụng js/jquery vào các evens, click, tăng tính tương tác người dùng đối với trang web
- Aps dụng kiến thức bố cục, cách người dùng tương tác vào trang web của mình
- Áp dụng cơ bản gọi api về trang web
3. Thực hiện project
Sau 2 tháng được training và thực hành, thực tập sinh đã nắm được những kiến thực cơ bản về Html, css, scss, js/jquery Sau tháng thứ 2, thực tập sinh được phân công thực hiện project dựng giao diện
Chi tiết đồ án sẽ được nói ở phần sau
4 Lịch làm việc
độ Nhận xét của người hướng dẫn
Trang 10hoàn thành
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
- Học cách trao đổi,
làm việc qua email
Chị Nguyễn Yến Nhi
2 - Tìm hiểu html,css
- Thực hành html,css
Anh Nguyễn Anh Tuấn
3 - Tìm hiểu về Scss- Thực hành một số
ứng dụng cơ bản
Anh Nguyễn Anh Tuấn
4
- Tìm hiểu về
responsive
- Thực hành một số
màn hình giao diện phức tạp
Anh Nguyễn Anh Tuấn
4 => 8
- Tìm hiểu js/jquery
- Tạo animation bằng
js
- Responsive bằng js
Anh Nguyễn Anh Tuấn
8 => 10 - Dựng giao diện web Anh Nguyễn Anh Tuấn
18 =>
Hiện tại
Fix bug giao diện
Hoàn thành sau những
góp ý của mentor
Anh Nguyễn Anh Tuấn
Trang 11Chương 3: Chi tiết về project
1 Giới thiệu về project
Sau khi đã nắm được kiến thức cơ bản về front-end, em được phân công dựng giao diện website qua các file giao diện mẫu psd trong vòng 3 tuần
Trang web giao diện về blog về travel, đặt vé, khách sạn
1.1 Công nghệ
Giao diện web sử dụng html,css,scss,js/jquery để xậy dựng giao diện và các thao tác giữa người dùng với trang web
1.2 Tính năng chính
Giao diện về tìm chuyến bay, khách sạn, các bài viết về du lịch
Trang 12Hình 3.1: Giao diện trang chủ đặt vé.
Trang 13Hình 3.2: Màn hình đặt khách sạn.
Hình 3.3: Màn hình blog
Trang 14Hình 3.4: Màn hình các gói tour
Hình 3.5: Màn hình about
Trang 152 Kế hoạch
Giai đoạn 1:
- Lấy file ảnh , font từ file psd
- Dựng cấu trúc, thành phần , layout trong một project
- Tạo project trên github và quản lý bằng sourcetree
Giai đoạn 2:
- Cắt giao diện các màn hình như home, about,
- Làm animation, cvacs thao tác xử lý như slick, chuyển page,… bằng js/jquery Giai đoạn 3: Đưa mentor review và sau đó fix bug và hoàn chỉnh project
Kết quả : Website đã hoàn chình và đáp ứng những yêu cầu đã đề ra
3. Tham gia dự án thực tế
Sau khi nhận được phản hồi tốt về dự án từ anh Nguyễn Anh Tuấn Em được anh Nguyễn Anh Tuấn phân công tham gia vào một dự án thực tế với vai trò là developer front-end (html,css,js) trong một team bao gồm 5 thành viên khác
Trang 16TÀI LIỆU THAM KHẢO
Html
https://www.w3schools.com/html/default.asp
Css
https://www.w3schools.com/css/default.asp
Scss
https://www.w3schools.com/sass/default.php
JavaScript
https://www.w3schools.com/js/default.aspi
Jquery
https://www.w3schools.com/jquery/default.asp
Git
https://www.tutorialspoint.com/git/index.htm
UI/UX
https://edex.adobe.com/resource/v3b9bc716
Trang 17TỔNG KẾT
Qua quá trình thực tập thực tế tại Công ty cổ phần gumiVietnam em đã tích lũy cho bản thân nhiều kinh nghiệm, kỹ năng và cũng cố được kiến thức đã học, nhận thấy đây là cơ hội, là bước đệm cho con đường phía trước
Em được trực tiếp làm việc với đội ngũ các anh chị trong công ty nhiệt tình, chịu khó trong công việc Được đào tạo với đúng chuyên ngành, được thực hiện các công việc dưới sự chỉ dẫn của anh hướng dẫn; được trực tiếp tham gia, tích lũy kiến thức, kinh nghiệm cho bản thân