Báo cáo thực tập lập trình ứng dụng di dộng với REACT NATIVE

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH 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 ỨNG DỤNG DI ĐỘNG VỚI REACT NATIVE Công ty thực tập : Công ty TNHH CoderSchool Người phụ trách : Nguyễn Thanh Tài Nhân Thực tập sinh : Nguyễn Phi Khang TP Hồ Chí Minh, 28 tháng 07 năm 2020 LỜI MỞ ĐẦU Sự phát triển CNTT ngày khủng khiếp Những công nghệ làm thay đổi giới cách nhanh chóng Từ lúc đời smartphone có bước tiến mạnh mẽ mà cơng nghệ kèm theo địi hỏi nhà phát triển phần mềm viết nhiều phần mềm để sử dụng smartphone khơng cịn đơn ứng dụng nhắn tin gọi điện thơng thường Kèm theo số lượng người dùng di động (smartphone) tăng lên chóng mặt Cụ thể theo báo cáo mà nhà khoa học thống kê thời gian dành cho smartphone trung bình qua khảo sát hàng tỉ người rơi vào khoảng tiếng ngày Đồng thời giá smartphone ngày rẻ qua năm, dịng smartphone giá rẻ đến từ quốc gia phát triển đông dân Ấn Độ, Trung Quốc Cùng với cơng nghệ sản xuất dần hoàn thiện kéo giá smartphone xuống tới tầng lớp phổ thơng xã hội Từ smartphone trở thành thiết bị sở hữu dễ dàng Nhiều công ty sản xuất phần mềm di động cơng ty lớn nhìn thấy mảnh đất màu mỡ tiềm phát triển lớn Đồng thời dựa theo số liệu thống kê bắt đầu người dùng chịu chi tiền cho smartphone nhiều hơn, số lượng người dùng chịu bỏ tiền mua ứng dụng để sử dụng smartphone tăng lên theo năm Do kéo theo nhu cầu công việc liên quan đến mảng smartphone nói chung lập trình mobile nói riêng tăng lên chóng mặt Đưa tiềm thử thách dành cho muốn phát triển theo hướng lập trình ứng dụng di động Nhu cầu dạy học lập trình ứng dụng di động dần trở thành xu hướng xã hội Với mong muốn giải vấn đề phân hoá tảng thiết bị di động với rút ngắn thời gian nguồn lực để làm ứng dụng phù hợp với nhu cầu sống, React Native đời vào năm 2015 với hỗ trợ từ Facebook Trong thời gian thực tập CoderSchool, em tiếp cận tham gia trực tiếp vào dự án thực tế, đóng góp vào tính dự án mà tham gia vể mặt kĩ thuật lẫn ý tưởng, trải nghiệm thú vị mẻ em LỜI CÁM ƠN Trân trọng gửi lời cảm ơn Công ty TNHH Coderschool tạo điều kiện cho em có hội thực tập công ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình nhóm trainer, nhóm thực tập chúng em tiếp thu kiến thức quan trọng để làm ứng dụng điện thoại Chân thành cảm ơn anh chị nhóm trainer bỏ nhiều thời gian,cơng sức để hướng dẫn chúng em hồn thành đợt thực tập Đặc biệt em xin gửi lời cảm ơn lòng biết ơn sâu sắc đến anh Nhân anh Tân, anh hướng dẫn, giúp đỡ cho em tận tình khó khăn cơng việc khó khăn việc làm quen với mơi trường nhóm Hỗ trợ em nhiều vấn đề cách làm việc trình làm ứng dụng điện thoại Anh dẫn em cách làm báo cáo, lên kế hoạch, kỹ thiếu, training cho em kiến thức quan trọng để làm sản phẩm suốt thời gian qua Và xin cảm ơn thầy (cô) 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 NHẬN XÉT CỦA GIẢNG VIÊN Mục Lục LỜI MỞ ĐẦU LỜI CÁM ƠN CHƯƠNG : GIỚI THIỆU CÔNG TY THỰC TẬP CHƯƠNG : NỘI DUNG THỰC TẬP 2.1 Tìm hiểu cơng ty chương trình thực tập 2.2 Nghiên cứu kĩ thuật .8 2.2.1 2.2.2 2.2.3 Git / Git workflow React Native Redux 11 2.3 Thực Project 13 2.4 Lịch làm việc 13 CHƯƠNG : CHI TIẾT ỨNG DỤNG 14 3.1 Giới thiệu ứng dụng công việc thực 14 3.2 Một số giao diện ứng dụng 14 TÀI LIỆU THAM KHẢO : 18 TỔNG KẾT : 18 CHƯƠNG : GIỚI THIỆU CÔNG TY THỰC TẬP Công ty TNHH Coderschool thành lập vào năm 2015 Mr Charles Lee CEO & Founder of CoderSchool, công ty đào tạo phát triển phần mềm Sau năm thành lập, đến Coderschool khẳng định vị lĩnh vực Hiện cơng ty có sở Thành phố Hồ Chí Minh, nhắm đến khóa trainning đào tạo Full stack web development, Machine Learning, Data Science… CHƯƠNG : NỘI DUNG THỰC TẬP Đợt thực tập với chủ đề “Lập trình ứng dụng đa tảng với React Native” chương trình Developer Circles từ Facebook hợp tác CoderSchool nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình ứng dụng React Native, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp Tại cơng ty, sinh viên có hội học tập, khám phá làm việc môi trường phát triển ứng dụng chun nghiệp 2.1 Tìm hiểu cơng ty chương trình thực tập Nội dung : Giới thiệu công ty, cách tổ chức công ty Được nghe người phụ trách giới thiệu công ty, trình thành lập 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ông ty chương trình Developer Circles Vietnam Innovation Challenge Ngồi ra, thực tập sinh giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng email công việc… Kết : Hiểu thêm công ty, q trình thành lập phát triển Có thêm kỹ việc sử dụng email công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm 2.2 Nghiên cứu kĩ thuật 2.2.1 Git / Git workflow Nội dung : - Được giới thiệu chi tiết Git - Repository: nơi để lưu trữ, thư mục chứa tất mã nguồn, phiên - Head: trỏ vô mã nguồn bạn làm việc - Add: giúp Git biết tập tin cần theo dõi - Commit: yêu cầu Git lưu lại trạng thái repo - Remote: nơi chứa repositories không không nằm máy mà nằm khác (như Github, Gitlab …) - Pull: giúp lấy mã nguồn từ remote - Push: tải mã nguồn lên remote - Merge: kết hợp phiên khác mã nguồn lại thành - Status: hiển thị thông tin tình trạng repo Ngồi mà người dùng Git biết, em cịn biết thêm q trình thực tập công ty lệnh khác như: - Git rebase: trình gắn nhánh vào nhánh gốc - Gitlog: ghi lại thao tác xảy vởi repo - Git branch: phân nhánh để làm việc với Git Và để phối hợp nhịp nhàng thành viên với nhau, công ty sử dụng git workflow Kết : - Nắm Git - Biết cách sử dụng áp dụng vào công việc 2.2.2 React Native Nội dung : React Native gì? React Native phát triển Facebook với mục đính ban đầu áp dụng vào mạng xã hội lớn hành tinh: Facebook Do đặc tính cơng nghệ mạng xã hội, Facebook cần phải tạo tảng phát triển ứng dụng di động đa tảng có hiệu không thua so với ứng dụng phát triển độc lập cho tảng React Native hỗ trợ phát triển ứng dụng di động hệ điều hành Android iOS, so với Ionic (Android, iOS, Windows Phone) React Native thức trở thành mã nguồn mở vào tháng năm 2015 Cho đến nay, React Native áp dụng nhiều ứng dụng ta nước ngồi React Native có hay? React Native framework công ty công nghệ tiếng Facebook phát triển nhằm mục đích giải toán hiệu Hybrid toán chi phí mà phải viết nhiều loại ngơn ngữ native cho tảng di động Chúng ta build ứng dụng Native, build ứng dụng cách đa tảng (multi-platform) “mobile web app”, “HTML5 app”, “hybrid app” hay không build iOS hay Android mà build chạy hai hệ sinh thái Một điểm hay ho mà có đề cập giảm chi phí recompile Native cách sử dụng Hot-Loading tức bạn không cần phải build lại ứng dụng từ đầu nên việc chỉnh sửa diễn nhanh chóng Giúp cho lập trình viên thấy chỉnh sửa họ cách nhanh chóng trực quan, khơng cịn phải bỏ nhiều thời gian việc build run ứng dụng React Native tạo ứng dụng native hybrid app ionic, Với 100% Native UI, React Native tạo nên “mượt mà” việc render UI xóa nhịa khoảng cách hiệu ứng dụng đa tảng so với ứng dụng độc lập tảng Với phương châm “Học lần sử dụng nơi”, React Native React JS đơi lý tưởng cho lập trình viên fullstack Đừng chần chờ nữa, Javascript mảnh đất màu mỡ chờ bạn khai phá với công nghệ thời thượng, thực tế đúng! Ưu điểm: • Hiệu mặt thời gian mà bạn muốn phát triển ứng dụng nhanh chóng • Hiệu tương đối ổn định • Cộng đồng phát triển mạnh • Tiết kiệm tiền • Team phát triển nhỏ • Ứng dụng tin cậy ổn định • Xây dựng cho nhiều hệ điều hành khác với native code • Trải nghiệm người dùng tốt hybrid app Nhược điểm: • Vẫn địi hỏi native code • Hiệu thấp với app native code • Bảo mật khơng cao dựa JS • Quản lý nhớ 10 • Khả tùy biến khơng thực tốt vài module Giới thiệu JSX: JSX dạng ngôn ngữ cho phép viết mã HTML Javascript Đặc điểm: Faster: Nhanh JSX thực tối ưu hóa biên dịch sang mã Javacsript Các mã cho thời gian thực nhanh nhiều so với mã tương đương viết trực tiếp Javascript Safer: an toàn Ngược với Javascript, JSX kiểu statically-typed, nghĩa biên dịch trước chạy, giống Java, C++ Vì lỗi phát trình biên dịch Ngồi ra, cung cấp tính gỡ lỗi biên dịch tốt Easier: Dễ dàng JSX kế thừa dựa Javascript, dễ dàng lập trình viên Javascripts sử dụng (tham khảo https://jsx.github.io/) Giới thiệu Components React xây dựng xung quanh component, không dùng template framework khác Trong React, xây dựng trang web sử dụng thành phần (component) nhỏ Chúng ta tái sử dụng component nhiều nơi, với trạng thái thuộc tính khác nhau, component lại chứa thành phần khác Mỗi component React có trạng thái riêng, thay đổi, React thực cập nhật component dựa thay đổi trạng thái Mọi thứ React component Chúng giúp bảo trì mã code làm việc với dự án lớn Một react component đơn giản cần method render Có nhiều methods khả dụng khác, render method chủ đạo Props State: Props: giúp component tương tác với nhau, component nhận input gọi props, trả thuộc tính mơ tả component render Prop bất biến State: thể trạng thái ứng dụng, state thay đồi component đồng thời render lại để cập nhật UI Kết :  Nâng cao kỹ lập trình với React-Native 11  Có kiến thức quan trọng cho việc lập trình app mobile sau  Ngồi cịn biết thêm số quy tắc việc viết code cho chuẩn, dễ đọc, dễ hiểu 2.2.3 Redux Nội dung : Redux js thư viện Javascript giúp tạo thành lớp quản lý trạng thái ứng dụng Redux xây dựng dựa tảng tư tưởng ngôn ngữ Elm kiến trúc Flux Facebook giới thiệu Do Redux thường đơi kết hợp hồn hảo với React Kiến trúc Redux ACTION: Là đối tượng thúy tạo để lưu trữ thông tin liên quan tới kiện người dùng (Nhấn chuột giao diện, ), bao gồm thông tin như: Kiểu hành động, xẩy lúc nào, đâu, tọa độ, mục đính để thay đổi state 12 STORE: Quản lý trạng thái ứng dụng, có hàm dispatch(action) MIDDLEWARE: (Phần mềm trung gian) Cung cấp cách để tương tác với đối tượng Action gửi đến STORE trước chúng gửi tiếp đến REDUCER Tại Middleware bạn thực nhiệm vụ ghi lại nhật ký, báo cáo lỗi, tạo "yêu cầu không đồng bộ" (asynchronous requests), phân phát (dispatch) action mới, REDUCER: (Bộ biến đổi) Là hàm thúy để trả trạng thái từ trạng thái ban đầu Chú ý: REDUCUER không thay đổi trạng thái ứng dụng, thay vào tạo chép trang thái ban đầu, sửa đổi để có trạng thái Kết : - Nắm áp dụng Redux vào project 2.3 Thực Project Sau tháng training thực hành, thực tập sinh nắm kiến thực nâng cao React native Mentor hướng dẫn thực tập sinh áp dụng kiến thức học để thực project ứng dụng đa tảng với React Native Chi tiết đồ án nói phần sau 2.4 Lịch làm việc Tuần Cơng việc • Người hướng dẫn Tìm hiểu công ty, cách tổ Anh Nhân chức công ty • Làm quen với công cụ làm việc cơng ty • Tìm hiểu Html & Javascript 13 Mức độ hoàn thành 100% Nhận xét người hướng dẫn 2→6  Tìm hiểu ReactNative  Tìm hiểu Redux Anh Tân 100% Anh Tân 95% Kết tìm hiểu: https://github.com/NguyenPhiKhang/Reac tNative_CoderSchool → 10 • Thực Final Project https://github.com/NguyenPhiKhang/Sen do_Recommender_CS CHƯƠNG : CHI TIẾT ỨNG DỤNG 3.1 Giới thiệu ứng dụng công việc thực  Giới thiệu Đây ứng dụng thương mại điện tử lấy ý tưởng từ ứng dụng SENDO với chức mà ứng dụng bán hàng cần có  Giao diện design Product Manager 14  Công việc thực o Xây dựng giao diện theo design Product Manager o Tạo components cho hình cách hợp lý, dễ cho việc tái sử dụng chỗ khác o Gọi api webservice để đổ liệu vào giao diện quản lý liệu lưu trữ app o Xử lý kiện o Quản lý điều hướng chuyển trang  Kết đạt - Hiểu ưu nhược điểm công nghệ 15 - Cách project thực tế implement 3.2 Một số giao diện ứng dụng 16 \ 17 18 TÀI LIỆU THAM KHẢO :  For React-Native: https://facebook.github.io/react-native/ https://snack.expo.io/ TỔNG KẾT : Như vậy, vòng hai tháng ngắn ngủi dù chưa hoàn thiện hết ứng dụng di dộng Ứng dụng có đầy đủ tính đề ban đầu Do thời gian có hạn nên tính úng dụng cịn đơn giản Nhưng ứng dụng phát triển theo framework có tính kế thừa nên sau có thời gian phát triển lên mức cao Xin chân thành cảm ơn đến anh chị nhóm dự án, anh chị đơn vị đào tạo thực nghiệm giúp đỡ, hỗ trợ để em hồn thành nhiệm vụ giao thời gian thực tập công ty 19 ... ứng dụng React Native tạo ứng dụng native hybrid app ionic, Với 100% Native UI, React Native tạo nên “mượt mà” việc render UI xóa nhịa khoảng cách hiệu ứng dụng đa tảng so với ứng dụng độc lập. .. NỘI DUNG THỰC TẬP Đợt thực tập với chủ đề ? ?Lập trình ứng dụng đa tảng với React Native? ?? chương trình Developer Circles từ Facebook hợp tác CoderSchool nhằm mục đích giúp sinh viên thực tập đào... triển theo hướng lập trình ứng dụng di động Nhu cầu dạy học lập trình ứng dụng di động dần trở thành xu hướng xã hội Với mong muốn giải vấn đề phân hoá tảng thiết bị di động với rút ngắn thời