Đang tải... (xem toàn văn)
BỘ GIÁO DỤC VÀ ĐÀO TẠO BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO THỰC TẬP TỐT NGHIỆP XÂY DỰNG WEBSITE BÁN ĐỒ ĐIỆN TỬ SỬ DỤNG CÔNG NGHỆ REACTJS Giảng viên.
BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO THỰC TẬP TỐT NGHIỆP XÂY DỰNG WEBSITE BÁN ĐỒ ĐIỆN TỬ SỬ DỤNG CÔNG NGHỆ REACTJS Giảng viên hướng dẫn: VƯƠNG XUÂN CHÍ Sinh viên thực hiện: NGUYỄN HỮU DUY HÀO MSSV: 1811545027 Chuyên ngành: Kỹ Thuật Phần Mềm Đơn vị thực tập: Cơng ty cổ phần R2S Khóa: 2018 TP.HCM, ngày 05 tháng 08 năm 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO THỰC TẬP TỐT NGHIỆP XÂY DỰNG WEBSITE BÁN ĐỒ ĐIỆN TỬ SỬ DỤNG CÔNG NGHỆ REACTJS Giảng viên hướng dẫn: VƯƠNG XUÂN CHÍ Sinh viên thực hiện: NGUYỄN HỮU DUY HÀO MSSV: 1811545027 Chuyên ngành: Kỹ Thuật Phần Mềm Đơn vị thực tập: Công ty cổ phần R2S Khóa: 2018 TP.HCM, ngày 05 tháng 08 năm 2022 LỜI CẢM ƠN Để hoàn thành chuyên đề báo cáo thực tập trước hết em xin gửi đến quý thầy,cô giáo khoa Công Nghệ Thông Tin trường Đại học Nguyễn Tất Thành lời cảm ơn chân thành Em xin chân thành cảm ơn Ban Lãnh Đạo, phịng ban Cơng ty cổ phần R2S tạo điều kiện thuận lợi cho em trải nghiệm thực tế suốt trình thực tập công ty Cuối em xin cảm ơn anh chị phịng CNTT Cơng ty cổ phần R2S giúp đỡ, tạo môi trường thân thiện để em hoàn thành tốt chuyên đề thực tập tốt nghiệp Đồng thời cho em có hội thưc tập nơi mà em yêu thích, cho em bước đời sống thực tế để áp dụng kiến thức mà thầy cô giáo giảng dạy Qua công việc thực tập em nhận nhiều điều mẻ bổ ích để giúp ích cho cơng việc sau thân Vì kiến thức thân cịn hạn chế, q trình thực tập, hồn thiện chun đề em khơng tránh khỏi sai sót, kính mong nhận ý kiến đóng góp từ thầy q cơng ty TP Hồ Chí Minh , Tháng 11, Năm 2021 Sinh viên thực LỜI MỞ ĐẦU React.js thư viện javascript lên năm gần với xu hướng Single Page Application Trong framework khác cố gắng hướng đến mơ hình MVC hồn thiện React bật với đơn giản dễ dàng phối hợp với Javascript khác Nếu AngularJS Framwork cho phép nhúng code javascript code html thông qua attribute ng-model, ng-repeat… với react cho phép nhúng code html code javascript nhờ vào JSX bạn dễ dàng lồng đoạn html vào JS Tích hợp javascript html vào jsx làm cho component dễ hiểu React thư viện UI Facebook phát triển để hỗ trợ việc xây dụng thành phần (Components) UI có tính tương tác cao, có trạng thái tái sử dụng lại React sử dụng Facebook production, www.instagram.com viết hồn tồn React Có thể nói ReactJS cơng cự tuyệt vời giúp doanh nghiệp vượt qua đối thủ cạnh tranh mảng thiết kế ứng dụng web - Ứng dụng tạo ReactJS với cấu trúc UI tốt giúp nâng cao tối ưu hóa UX Các doanh nghiệp dễ dàng tăng tương tác người dùng, tỷ lệ click tỉ lệ chuyển đổi (conversion) trang web Hiệu suất kinh doanh có dùng ứng dụng ReactJS tốt so với dùng framework khác Nó hạn chế cập nhật DOM, từ tăng tốc độ truy cập ứng dụng cải tiến UX tốt ReactJS thiết kế đế giúp cải thiện số trang render tổng từ phía server Đồng thời giúp tối ưu nút để render phía client-side Khả tùy chỉnh cơng cụ tốt, chí làm giảm ngân sách bảo trì hệ thống, giúp ReactJS hiệu cao Sau năm học tập trường, mong muốn trải nghiệm thực tế để học hỏi thêm kiến thức tìm hiểu nơi làm việc mơi trường chuyên nghiệp nên em thực tập công ty cổ phần R2S nơi mà giúp em có hành trang tốt em tốt nghiệp NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN TPHCM, Ngày …… tháng …… năm 2022 Giáo viên hướng dẫn (Ký tên, đóng dấu) Vương Xn Chí NHẬN XÉT CỦA CƠ QUAN THỰC TẬP TPHCM, Ngày …… tháng …… năm 2022 Xác nhận đơn vị thực tập (Ký tên, đóng dấu) MỤC LỤC LỜI CẢM ƠN LỜI MỞ ĐẦU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN NHẬN XÉT CỦA CƠ QUAN THỰC TẬP .6 PHIẾU NHẬN XÉT SINH VIÊN THỰC TẬP DANH MỤC CÁC BẢNG BIỂU 11 DANH MỤC CHỮ VIẾT TẮT 12 NHẬT KÝ THỰC TẬP TỐT NGHIỆP 13 CHƯƠNG I: TỔ CHỨC HÀNH CHÍNH, NHÂN SỰ NƠI THỰC TẬP 15 1.1 Giới thiệu tổ chức công ty 15 1.2 Mô hình tổ chức cơng ty 15 Sơ đồ mơ hình tổ chức 15 Chức năng, nhiệm vụ giám đốc .16 Chức nhiệm vụ phòng ban .16 CHƯƠNG II: CÁC CÔNG NGHỆ, CÔNG CỤ SỬ DỤNG 18 2.1 React .18 Giới thiệu ReactJS 18 Cách thức hoạt động .19 Đánh giá chung ReactJS .19 Một số ứng dụng mẫu 21 2.2 Redux saga 24 Giới thiệu Redux 24 Cách thức hoạt đông .24 2.3 Figma 27 Giới thiệu Figma .27 Những ưu điểm bật Figma 28 CHƯƠNG III: CÁC HOẠT ĐỘNG CHUYÊN NGÀNH VÀ MÔI TRƯỜNG LÀM VIỆC CƠ QUAN NƠI THỰC TẬP 31 2.1 Các hỗ trợ .31 2.2 Cơ sở hạ tầng 31 2.3 Khách hàng .31 CHƯƠNG IV: THỰC NGHIỆM 32 3.1 Nhiệm vụ giao .32 3.2 Phương pháp thực 32 3.3 Kết đạt qua đợt thực tập .32 Những nội dung kiến thức lý thuyết củng cố 33 Những kỹ thực hành học hỏi 33 Những kinh nghiệm thực tiễn tích luỹ 33 Chi tiết kết cơng việc mà đóng góp cho quan nơi thực tập 39 DANH MỤC CÁC BẢNG BIỂU return dispatch => { dispatch(getDataStarted()); getDataFromAPI() then(data => { dispatch(getUserSuccess(data)); }).fail(err => { dispatch(getDataError(err.message)); }) }; }; Ở ta có action creator getDataFromAPI() bắt đầu async progress sau: Đầu tiên bắn action cho phép store biết chuẩn bị API request ( dispatch(getDataStarted()) Tiếp theo thực API request trả Promise Cuối bắn success action request thành cơng error action có lỗi redux-saga import { call, put, takeEvery } from 'redux-saga/effects'; import { API_BUTTON_CLICK, API_BUTTON_CLICK_SUCCESS, API_BUTTON_CLICK_ERROR, } from './actions/consts'; import { getDataFromAPI } from './api'; export function* apiSideEffect(action) { try { const data = yield call(getDataFromAPI); yield put({ type: API_BUTTON_CLICK_SUCCESS, payload: data }); } catch (e) { yield put({ type: API_BUTTON_CLICK_ERROR, payload: e.message }); } } // the 'watcher' - on every 'API_BUTTON_CLICK' action, run our side effect export function* apiSaga() { yield takeEvery(API_BUTTON_CLICK, apiSideEffect); } Cùng process, cách implement khác hoàn toàn put thay cho dispatch 25 function cuối (apiSaga()) giúp theo dõi tổng thể toàn action (ở có API_BUTTON_CLICK) Với cách gọi redux-saga, get data từ async function (promise, ) Nhận xét Cả cách implement dễ đọc, nhiên redux-thunk , bạn phải đối đầu với tá promise, callback có, thời gian cho người maintain đọc tìm code Với redux-saga , đơn giản bạn cần track theo try/catch block để theo dõi dịng code, bên cạnh cịn có hàm giúp bạn track action cách dễ dàng 2.3 Figma Giới thiệu Figma Logo Figma Figma công cụ mắt vào năm 2016, với giao diện thân thiện tính dễ sử dụng, Figma nhanh chóng lên trở thành công cụ thiết kế giao diện người dùng phổ biến cộng đồng công nghệ toàn cầu Một số thương hiệu lớn sử dụng Figma thời điểm kể đến Microsoft, Twitter, GitHub, Dropbox… Figma công cụ chỉnh sửa giao diện Website/App hoàn toàn thực trình duyệt mà khơng cần thao tác tải Bên cạnh đó, Figma cịn lưu trữ liệu thông qua hệ thống đám mây vô đơn giản Đây ứng dụng vô phù hợp với bạn bắt đầu trở thành Thiết kế UX/UI mà không cần sử dụng phần mềm cồng kềnh khác 26 Minh họa giao diện trang chủ Figma Những ưu điểm bật Figma Công cụ lựa chọn ưu tiên hàng đầu Designer hẳn có điểm bật khiến Figma trở nên phổ biến thông dụng, kể đến: Tính tương thích Figma hoạt động tương thích tất hệ điều hành có trình duyệt web, từ Windows, Linux, Macs Chromebooks dùng cơng cụ Tính tới thời điểm này, cơng cụ thiết kế làm điều Tất người dùng chia sẻ, mở hay chỉnh sửa file Figma dễ dàng dù dùng hệ điều hành Trong nhiều trường hợp designer sử dụng Macs để thiết kế developer lại dùng Windows Khi đó, Figma giúp hai bên hợp tác dễ dàng Figma giúp giảm thiểu việc chuyển file hình ảnh team design, account khách hàng Với Figma tất thứ trở nên dễ dàng với đường link Giao diện tối giản, thân thiện với người dung Hỗ trợ làm việc nhóm hiệu Là công cụ browser-based, nên người team dễ dàng làm việc với tương tự làm việc Google Docs Mỗi thành viên nhóm xem chỉnh sửa file, Figma hiển thị đại diện avatar tròn công cụ với tên riêng 27 Cho phép chế độ Feedbacks, Comments Project từ giúp cho bạn thiết kế UI dễ dàng nhận góp ý đến từ Project Manager, User,… giúp cho công việc tiết kiệm nhiều thời gian nhanh chóng hồn thành Chức file versioning tích hợp sẵn Figma Chức cho phép người dùng lưu trữ lại trạng thái file design lúc Bạn thành viên khác team design sửa đổi mà khơng lo lắng việc tracking version Hiện chức bị hạn chế cho người dùng miễn phí Người dùng xem lại lịch sử sửa file 30 ngày gần Lưu trữ online, chia sẻ dễ dàng Hỗ trợ lưu trữ liệu đám mây tiện lợi, không cần tốn nhiều tài nguyên máy Những tính độc đáo chuyên biệt cho thiết kế với phím tắt đơn giản, nhanh chóng giúp Designer tiết kiệm nhiều thời gian cho Project Chia sẻ file Figma việc gửi link, người nhận link có khả truy cập vào file Nếu bạn lựa chọn Link to selected frame người nhận nhìn thấy frame bạn chọn lúc chia sẻ Đây tính nhiều designer sử dụng Một số tiện ích thiết kế Figma Thay đổi kích thước frame mà không bị ảnh hưởng constraint Sử dụng app Figma Mirror để preview design thiết bị di động cách nhanh chóng Điều chỉnh nudge mặc định để tăng tính đồng cho thiết kế Paste ảnh trực tiếp từ clip vào shape cách dễ dàng Giữ phím alt/option di chuột lên đối tượng khác để đo khoảng cách hai đối tượng Chọn đối tượng có thuộc tính để thay đổi Rất nhiều phím tắt tiện lợi Có thể đổi tên hàng loạt layer 28 Giao diện Figma Minh họa giao diện thiết kế website Figma 29 CHƯƠNG III: CÁC HOẠT ĐỘNG CHUYÊN NGÀNH VÀ MÔI TRƯỜNG LÀM VIỆC CƠ QUAN NƠI THỰC TẬP Phát triển thiết bị quản lý (hệ thống chấm công ,các tool kế toán…) Thiết kế giao diện web theo yêu cầu khách hàng 2.1 Các hỗ trợ Đảm bảo việc làm cho học viên tốt nghiệp khoá dài hạn Giới thiệu việc làm cho thực tập viên Thực tập có lương cho học viên 2.2 Cơ sở hạ tầng Thiết bị đầy đủ đại Bảo đảm học viên tiếp cận với cơng nghệ Phịng máy rộng rãi, thống mát Mơi trường làm việc tích cực động 2.3 Khách hàng Mọi đối tượng có nhu cầu quản lý, gia công phần mềm, thiết kế website giải pháp trực tuyến 30 CHƯƠNG IV:THỰC NGHIỆM 3.1 Nhiệm vụ giao Tìm hiểu Figma, Reacjs, Boostrap-react Triển khai giao diện Kiểm tra sửa lỗi giao diện dựa thiết kế figma Hỗ trợ xây dựng đưa ý kiến để hoàn thiện website 3.2 Phương pháp thực Các cơng việc sau giao học viên chủ động tìm hiểu lý thuyết, nắm kiến thức căng ví dụ thao tác, tool phẩn mềm để sử dụng Và đươc anh Trần Ngọc Hiếu training trình tìm hiểu Sau tìm hiểu nắm kiến thức chủ động cài đặt phầm mềm máy cá nhân sử dụng theo hướng dẫn nguồn nghiên cứu, bắt nguồn từ đâu hay cách xử lý chủ động liên hệ với anh Hiếu để hướng dẫn xử lý nhanh Đầu buổi có họp để triển khai cơng việc trình thực tập báo cáo lại kết làm ngày hỏi kiến thức để bắt đầu công việc cơng ty Trong q trình triển khai phát triển phần mềm: Các thành viên nhóm sau nhận yêu cầu triển khai giao diện giao Sau hoàn tất giao diện nghiệp vụ đưa cho sếp kiểm tra duyệt, back-end để build trang web Cuối kiểm tra sử dụng thử nhiều thiết bị để phản hồi lại có lỗi 3.3 Kết đạt qua đợt thực tập Qua tuần thực tập CÔNG TY CỔ PHẦN R2S, em học tập thêm nhiều kiến thức mới, trải nghiệm tiếp xúc với dự án thực tế Cùng với nhiệt tình anh chị doanh nghiệp hỗ trợ giúp em hồn thành tốt việc thực hành Qua đề tài mà công ty giao cho em em đút kết học tập nhiều kiến thức bổ ích như: 31 Những nội dung kiến thức lý thuyết củng cố Sử dụng React Hook, React Boostrap, figma Source Tree Thành thạo xây dựng website sử dụng công nghệ reactjs Kiến thức UX/UI sử dụng ứng dụng Figma củng cố Những kỹ thực hành học hỏi Kỹ giao tiếp: làm việc môi trường chung với phòng ban nên kỹ giao tiếp trau chuốt hơn, tự tin Làm việc nhóm: Khối lượng cơng việc nhiều nên phải chia sẻ, hỗ trợ người công việc để hồn thành kì hạn Kiến thức bố cục, màu sắc, độ tương phản, trải nghiệm người dùng xây dựng trang web Kỹ research tự học, tìm hiểu sử dụng kiến thức chuyên đề giao Những kinh nghiệm thực tiễn tích luỹ Kinh nghiệm tham gia làm việc nhóm lắng nghe ln điều ưu tiên, phải biết trình bày bảo vệ quan điểm trước nhóm nhận thấy ý tưởng hay nhất, tốt Tranh luận cãi mà đưa phương án tối ưu Kinh nghiệm để tối đa hóa code code đọc dễ hiểu rút ngắn code tốn thời gian Kinh nghiệm xử lý tình gặp lỗi trình làm việc, sử dụng kiến thức có để xử lý, khơng tìm kiếm mạng tài liệu khác, Kinh nghiệm ứng xử với khách hàng đạt tiếng nói chung trước làm việc Luôn tuân thủ quy tắc làm việc, nghe lời khuyên leader, thành viên có kinh nghiệm 32 Ảnh demo trang chủ import PageContainer from './page-container'; import Header from './header'; import Footer from './footer'; export default function Page({ title, description, children }) { return ( {children} {` content { display: flex; align-items: center; flex-direction: column; width: 80%; max-width: 1700px; } `} ); 33 } Code mẫu trang chủ Trang Categories dự án giới thiệu sản phẩm Laptop import Link from 'next/link'; import { MdDesktopWindows, MdDesktopMac, MdLaptop, MdKeyboard, MdMemory, MdSpeaker, MdSmartphone, MdTv, MdVideogameAsset, MdWatch, MdKeyboardArrowRight, } from 'react-icons/md'; const iconSlugs = { MdDesktopWindows, MdDesktopMac, MdLaptop, 34 MdKeyboard, MdMemory, MdSpeaker, MdSmartphone, MdTv, MdVideogameAsset, MdWatch, }; export default function CategoriesItem({ category }) { const Icon = iconSlugs[category.md_icon]; return ({category.label}
{` li a { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 18px; text-decoration: none; font-weight: 500; font-size: 13px; color: #808080; border-bottom: 2px solid #f5f5f5; transition: 0.4s; } li a:hover { background: #f2f2f2; 35 } li a content { display: flex; flex-direction: row; align-items: center; } li a content icon { padding-right: 18px; } li a arrow-button { align-self: flex-end; } `}