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

ĐẠ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 về CNTT ngày càng khủng khiếp Những công nghệ mới đã và đang làm thay đổi thế giới một cách nhanh chóng Từ lúc mới ra đời cho đến nay smartphone có những bước tiến mạnh mẽ vì vậy mà những công nghệ kèm theo cũng đòi hỏi những nhà phát triển phần mềm viết ra nhiều phần mềm hơn để có thể sử dụng được trên smartphone chứ không còn đơn thuần là những ứng dụng nhắn tin gọi điện thông thường

Kèm theo đó là số lượng người dùng di động (smartphone) tăng lên chóng mặt

Cụ thể theo những báo cáo mới đây mà các nhà khoa học đã thống kê thì thời gian dành cho smartphone trung bình qua khảo sát hàng tỉ người thì rơi vào khoảng 3 tiếng một ngày

Đồng thời giá smartphone đang ngày càng rẻ qua từng năm, vì các dòng smartphone giá rẻ đến từ các quốc gia phát triển và đông dân như Ấn Độ, Trung Quốc Cùng với đó công nghệ sản xuất càng dần hoàn thiện hơn kéo giá smartphone xuống tới các tầng lớp phổ thông của xã hội Từ đó smartphone trở thành một thiết bị có thể được sở hữu dễ dàng

Nhiều công ty sản xuất phần mềm trên di động hoặc những công ty lớn nhìn thấy đây là mảnh đất màu mỡ và tiềm năng phát triển của nó rất lớn Đồng thời dựa theo số liệu thống kê như trên thì 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 ra mua ứng dụng để sử dụng trên smartphone cũng tăng lên theo từng năm Do đó kéo theo nhu cầu về công việc liên quan đến mảng smartphone nói chung và lập trình mobile nói riêng tăng lên chóng mặt Đưa ra những tiềm năng và thử thách dành cho những ai muốn phát triển theo hướng lập trình ứng dụng di động Nhu cầu dạy và học lập trình ứng dụng di động đang dần trở thành xu hướng của xã hội hiện nay

Với mong muốn giải quyết được vấn đề phân hoá nền tảng trên thiết bị di động cũng với đó là rút ngắn thời gian cũng như nguồn lực để làm ra ứng dụng phù hợp với nhu cầu của cuộc sống, React Native đã được ra đời vào năm 2015 với sự hỗ trợ từ Facebook

Trong thời gian thực tập tại CoderSchool, em đã được tiếp cận và tham gia trực tiếp vào các dự án thực tế, được đóng góp vào những tính năng của dự án mà mình tham gia vể cả mặt kĩ thuật lẫn ý tưởng, đó là những trải nghiệm hết sức thú vị và mới

mẻ đối với 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ó

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 ứng dụng điện thoại 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 em xin gửi lời cảm ơn và lòng biết ơn sâu sắc đến anh Nhân và anh Tân,

các anh đã hướng dẫn, giúp đỡ cho em tận tình cả những khó khăn trong công việc và những khó khăn về việc làm quen với môi trường nhóm Hỗ trợ em rất nhiều về các vấn đề cách làm việc trong quá trình làm ứng dụng điện thoại Anh cũng chỉ dẫn 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, training cho em những kiến thức quan trọng để có thể làm ra một sản phẩm trong suốt thời gian qua

Và 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

NHẬN XÉT CỦA GIẢNG VIÊN

Mục Lục

LỜI MỞ ĐẦU 2

LỜI CÁM ƠN 4

CHƯƠNG 1 : GIỚI THIỆU CÔNG TY THỰC TẬP 7

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

2.1 Tìm hiểu công ty và chương trình thực tập 8

2.2 Nghiên cứu kĩ thuật 8

2.2.1 Git / Git workflow 8

2.2.2 React Native 9

2.2.3 Redux 11

2.3 Thực hiện Project 13

2.4 Lịch làm việc 13

CHƯƠNG 3 : CHI TIẾT ỨNG DỤNG 14

3.1 Giới thiệu về ứng dụng và công việc thực hiện 14

3.2 Một số giao diện của ứng dụng 14

TÀI LIỆU THAM KHẢO : 18

TỔNG KẾT : 18

CHƯƠNG 1 : GIỚI THIỆU CÔNG TY THỰC TẬP

Công ty TNHH Coderschool được thành lập vào năm 2015 bởi Mr Charles Lee -CEO & Founder of CoderSchool, là công ty đào tạo và phát triển phần mềm Sau 5 năm thành lập, đến nay Coderschool đã khẳng định được vị thế trong lĩnh vực này

Hiện tại công ty có một cơ sở tại Thành phố Hồ Chí Minh, nhắm đến những khóa trainning đào tạo Full stack web development, Machine Learning, Data Science…

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

Đợt thực tập với chủ đề “Lập trình ứng dụng đa nền tảng với React Native” chương trình do Developer Circles từ Facebook hợp tác cùng CoderSchool 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 ứng dụng trên React Native, đồ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 phát triển ứng dụng chuyên nghiệp

2.1 Tìm hiểu công ty và chương trình thực tập

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 và chương trình Developer Circles Vietnam Innovation Challenge

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, 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.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 về Git

- Repository: nơi để lưu trữ, là thư mục chứa tất cả mã nguồn, phiên bản

- Head: một con trỏ chỉ vô mã nguồn mới nhất bạn đang làm việc

- Add: giúp Git biết được tập tin này cần được theo dõi

- Commit: yêu cầu Git lưu lại trạng thái của repo hiện tại

- Remote: nơi chứa repositories nhưng không không nằm trên máy của mình mà nằm ở đâu đó khác (như Github, Gitlab …)

- Pull: giúp lấy mã nguồn từ remote về

- Push: tải mã nguồn lên remote

- Merge: kết hợp 2 phiên bản khác nhau của mã nguồn lại thành một.

- Status: hiển thị thông tin về tình trạng hiện tại của repo

Ngoài những cơ bản mà người dùng Git nào cũng biết, em còn được biết thêm trong quá trình thực tập ở công ty các lệnh khác như:

- Git rebase: quá trình gắn một nhánh vào nhánh gốc

- Gitlog: ghi lại những thao tác xảy ra 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 giữa các thành viên với nhau, công ty sử dụng git workflow

Kết quả :

- Nắm được cơ bản về Git

- Biết được cách sử dụng và áp dụng vào công việc

2.2.2 React Native

Nội dung :

React Native là gì?

React Native được phát triển bởi Facebook với mục đính ban đầu là áp dụng vào mạng xã hội lớn nhất hành tinh: Facebook Do đặc tính công nghệ của mạng xã hội, Facebook cần phải tạo ra nền tảng phát triển ứng dụng di động đa nền tảng có hiệu năng không thua kém so với ứng dụng được phát triển độc lập cho từng nền tảng React Native hiện tại chỉ hỗ trợ phát triển ứng dụng di động hệ điều hành Android và iOS, ít hơn so với Ionic (Android, iOS, Windows Phone) React Native chính thức trở thành mã nguồn mở vào tháng 3 năm 2015 Cho đến nay, React Native được áp dụng trong nhiều ứng dụng của ta và cả nước ngoài

React Native có gì hay?

React Native là một framework do công ty công nghệ nổi tiếng Facebook phát triển nhằm mục đích giải quyết bài toán hiệu năng của Hybrid và bài toán chi phí khi mà phải viết nhiều loại ngôn ngữ native cho từng nền tảng di động Chúng ta

sẽ build được ứng dụng Native, và chúng ta cũng có thể build ứng dụng đó một cách

đa nền tảng (multi-platform) chứ không phải là một “mobile web app”, không phải

là “HTML5 app”, và cũng không phải là một “hybrid app” hay cũng không chỉ build trên iOS hay Android mà chúng ta build và chạy được cả hai hệ sinh thái Một điểm hay ho nữa mà mình có đề cập là giảm chi phí recompile của Native bằng cách sử dụng Hot-Loading tức là 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 ra rất nhanh chóng Giúp cho lập trình viên có thể thấy được những chỉnh sửa của họ một cách nhanh chóng trực quan, không còn phải bỏ quá nhiều thời gian trong việc build và run ứng dụng nữa

React Native tạo ra ứng dụng native chứ không phải hybrid app như ionic, Với 100% Native UI, React Native tạo nên sự “mượt mà” trong việc render UI và xóa nhòa khoảng cách về hiệu năng giữa ứng dụng đa nền tảng so với ứng dụng độc lập nền tảng

Với phương châm “Học một lần sử dụng mọi nơi”, React Native và React JS

sẽ là bộ đôi lý tưởng cho lập trình viên fullstack Đừng chần chờ gì nữa, Javascript

sẽ là mảnh đất màu mỡ chờ bạn khai phá với những công nghệ thời thượng, đó là một thực tế đã và đang đúng!

Ưu điểm:

• Hiệu quả về mặt thời gian khi mà bạn muốn phát triển một ứng dụng nhanh chóng

• Hiệu năng 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 và ổn định

• Xây dựng cho nhiều hệ điều hành khác nhau với ít native code nhất

• Trải nghiệm người dùng tốt hơn là hybrid app

Nhược điểm:

• Vẫn đòi hỏi native code

• Hiệu năng sẽ thấp hơn với app thuần native code

• Bảo mật không cao do dựa trên JS

• Quản lý bộ nhớ

• Khả năng tùy biến cũng không thực sự tốt đối với một vài module

Giới thiệu về JSX:

JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript Đặc điểm: Faster: Nhanh hơn JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript Safer: an toàn hơn Ngược với

Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++ Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt Easier: Dễ dàng hơn JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng (tham khảo tại https://jsx.github.io/)

Giới thiệu về Components

React được xây dựng xung quanh các component, chứ không dùng template như các framework khác Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái Mọi thứ React đều là component Chúng giúp bảo trì mã code khi làm việc với các dự án lớn Một react component đơn giản chỉ cần một method render

Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo

Props và State:

Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render Prop là bất biến

State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI

Kết quả :

sau này

cho đúng chuẩn, dễ đọc, dễ hiểu

2.2.3 Redux

Nội dung :

Redux js là một thư viện Javascript giúp tạo ra thành một lớp quản lý trạng thái của ứng dụng

Redux được xây dựng dựa trên nền tảng tư tưởng của ngôn ngữ Elm và kiến trúc Flux do Facebook giới thiệu Do vậy Redux thường là bộ đôi kết hợp hoàn hảo

với React Kiến trúc của Redux

ACTION: Là một đối tượng thuần thúy được tạo ra để lưu trữ thông tin liên

quan tới sự kiện của người dùng (Nhấn chuột trên giao diện, ), nó bao gồm các thông tin như: Kiểu hành động, xẩy ra lúc nào, ở đâu, tọa độ, mục đính để thay đổi state nào

STORE: Quản lý trạng thái của ứng dụng, và có hàm dispatch(action)

MIDDLEWARE: (Phần mềm trung gian) Cung cấp một cách để tương tác với

các đối tượng Action được gửi đến STORE trước khi chúng được gửi tiếp đến REDUCER Tại Middleware bạn có thể thực hiện các nhiệm vụ như ghi lại nhật ký, báo cáo lỗi, tạo các "yêu cầu không đồng bộ" (asynchronous requests), hoặc phân phát (dispatch) các action mới,

REDUCER: (Bộ biến đổi) Là một hàm thuần thúy để trả về một trạng thái mới

từ trạng thái ban đầu Chú ý: REDUCUER không thay đổi trạng thái của ứng dụng, thay vào đó nó sẽ tạo ra một bản sao chép của trang thái ban đầu, và sửa đổi nó để có một trạng thái mới

Kết quả :

- Nắm được và áp dụng Redux vào project

2.3 Thực hiện Project

Sau hơn một 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à nâng cao về React native Mentor đã hướng dẫn thực tập sinh áp dụng những kiến thức đã học để thực hiện một project ứng dụng đa nền tảng với React Native

Chi tiết đồ án sẽ được nói ở phần sau

2.4 Lịch làm việc

hướng dẫn

Mức độ hoàn thành

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

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

• Tìm hiểu về Html & Javascript

Kết quả tìm hiểu:

https://github.com/NguyenPhiKhang/Reac

tNative_CoderSchool

https://github.com/NguyenPhiKhang/

Sendo_Recommender_CS

CHƯƠNG 3 : CHI TIẾT ỨNG DỤNG

3.1 Giới thiệu về ứng dụng và công việc thực hiện

 Giới thiệu

Đây là một ứng dụng thương mại điện tử lấy ý tưởng từ ứng dụng SENDO với các chức năng cơ bản mà một ứng dụng bán hàng cần có

 Giao diện design của Product Manager

 Công việc thực hiện

o Xây dựng giao diện theo design của Product Manager

o Tạo ra các components cho màn hình một cách hợp lý, dễ cho việc tái sử dụng ở những chỗ khác

o Gọi api webservice để đổ dữ liệu vào giao diện và quản lý dữ liệu lưu trữ trên app

o Xử lý sự kiện cơ bản

o Quản lý điều hướng chuyển trang

 Kết quả đạt được

- Hiểu được ưu nhược điểm của các công nghệ

- Cách project thực tế được implement

3.2 Một số giao diện của ứng dụng

\

TÀI LIỆU THAM KHẢO :

https://facebook.github.io/react-native/

https://snack.expo.io/

TỔNG KẾT :

Như vậy, chỉ trong vòng hơn hai tháng ngắn ngủi dù chưa hoàn thiện được hết ứng dụng di dộng Ứng dụng đã có khá đầy đủ các tính năng đã đề ra ban đầu Do thời gian có hạn nên tính năng úng dụng còn đơn giản Nhưng do ứng dụng phát triển theo framework

có tính kế thừa nên sau này khi có thời gian sẽ có thể phát triển lên mức cao hơn

Xin chân thành cảm ơn đến các anh chị trong nhóm dự án, cũng như các anh chị trong đơn vị đào tạo thực nghiệm đã giúp đỡ, hỗ trợ để em có thể hoàn thành các nhiệm vụ được giao trong thời gian thực tập ở công ty