CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Công nghệ sử dụng Ngôn ngữ lập trình: JavaScript Front-end: React Native, React Backend: NodeJS Công cụ lập trình và kiểm thử: Visual Studio Code, MySQL, Postman Kiến trúc: MVC 1.1 Khái niệm React Native là một Framework được xây dựng trên JavaScript và React, chuyên lập trình ứng dụng di động, chạy được đồng thời trên hệ điều hành Android và IOS, thậm chí là web (phiên bản dành cho Expo). Nó được xây dựng để giải quyết bài toán về hiệu năng của Hybrid.2 Ưu điểm - Có thể sử dụng bất kỳ công cụ lập trình nào thay vì viết trên từng công cụ ứng với từng hệ điều hành (XCode cho iOS và Android Studio cho Android). - Load project bằng phím tắt R. - Hiển thị lỗi ngay trên màn hình điện thoại.
- Tiết kiệm tài nguyên, dễ bảo trì, nâng cấp.3 Hạn chế - Chưa phát triển hoàn thiện, một số tính năng vẫn chưa được hỗ trợ - Không dùng để viết game có tính đồ họa và cách chơi phức tạp - Khả năng quản lý bộ nhớ chưa tốt. KHÓA LUẬN TỐT NGHIỆP 2 1.4 Hoạt động React Native gọi Objective-C API để hiển thị trên iOS hoặc Java API để hiển thị trên Android. Nhằm khai thác tối đa React Native, ta cần hiểu một số khái niệm cơ bản như là JSX, components, state và props. JSX là cú pháp mở rộng của JavaScript kết hợp với XML.
Nó chuyển đổi cú pháp dạng gần như XML về thành JavaScript, giúp ta code bằng cú pháp của XML thay vì phải dùng JavaScript. Component chia giao diện người dùng thành các thành phần độc lập để thuận tiện cho việc quản lý và tái sử dụng. Props, viết tắt của Properties là những thuộc tính hay đối số của một Component. State là những giá trị thay đổi được, biểu diễn trạng thái của Component.
Bảng dưới đây là ví dụ về React Native Component tương ứng với các đối tượng trong các hệ điều hành: React Native Android iOS Web <View> <ViewGroup> <UIView> <div> <Text> <TextView> <UIText> <p> <TextInput> <EditText> <UITextField> <input type=’text’> KHÓA LUẬN TỐT NGHIỆP 3 <Image> <ImageView> <UIImageView> <img> 1.5 Component React Native cung cấp sẵn 6 loại Component là Component cơ bản, User Interface, ListView, Component chuyên dụng cho Android, Component chuyên dụng cho iOS và các Component khác. Hầu hết các ứng dụng React Native đều sử dụng các component như View, Text, TextInput, Image, ScrollView, StyleSheet,. chúng được gọi là các Component cơ bản. Trong đó, StyleSheet là dạng thay thế CSS.
Các component tương tác với người dùng như Button, Switch,. thuộc loại User Interface. Các component hiển thị danh sách dữ liệu thuộc loại ListView như FlatList và SessionList. Giữa Android và iOS đều có những component riêng biệt, chỉ áp dụng cho ở một hệ điều hành.
Đó là BackHandler, DrawerLayoutAndroid, PermissionsAndroid, ToastAndroid chuyên dụng cho Android và ActionSheetiOS chuyên dụng cho iOS. Các component hữu ích khác như ActivityIndicator, Alert, Animated, Dimensions, KeyboardAvoidingView, Linking, Modal, PixelRatio, RefreshControl, StatusBar,. thì không thuộc các loại trên được nhóm về cùng một loại.1 Khái niệm Node JS là một mã nguồn mở và là môi trường runtime đa nền tảng của JavaScript. Node JS được xem là một công cụ phổ biến cho hầu hết các loại dự án.
Node JS được chạy trên V8 JavaScript Engine của Chorme (JavaScript Engine được hiểu là một chương trình hoặc trình Interpreter thực thi JavaScript, một JavaScript Engine có thể interpreter như thường hoặc compiler just-in-time từ JavaScript thành bytecode). Một ứng dụng của Node JS chạy trong một tiến trình độc lập mà không phải tạo những luồng mới (thread) cho mỗi lần request. Node JS sẽ cung cấp một tập hợp các asynchronous I/O primitives trong thư viện chuẩn để ngăn chặn mã JavaScript bị blocking, đối với các thư KHÓA LUẬN TỐT NGHIỆP 4 viện của Node JS sẽ được viết bằng cách sử dụng các mô hình non-blocking (còn được gọi là bất đồng bộ), làm cho hành vi blocking trở thành ngoại lệ thay vì thông thường. Blocking I/O là gì, như chúng ta hiểu một vài control và cách chờ I/O đến khi hoàn tất sẽ được điều chỉnh như thế nào để có sẵn cho lập trình viên của các ứng dụng người dùng.
I/O request được cho là blocking khi control không trả về cho ứng dụng cho đến khi I/O hoàn thành. Việc gọi những block thường được gọi là sysnchronous programming. Trong nhiều trường hợp, đợi request trả lời là một vấn đề vì chương trình của mình sẽ không làm gì cho đến khi I/O hoàn thành. Tuy nhiên, nếu có nhiều clients hoặc users sử dụng, ví dụ user2 sẽ không bắt đầu cho đến khi user1 hoàn thành.
Vì vậy non-blocking ra đời. KHÓA LUẬN TỐT NGHIỆP 5 Non-blocking I/O, là một asynchronous gọi sẽ trả về ngay lập tức mà không phải đợi I/O khác hoàn thành. Chúng ta có thể lấy dữ liệu của user2 mà không cần phải đợi user1 thực hiện xong, nói cách khác hai tiến trình này chạy song song với nhau. KHÓA LUẬN TỐT NGHIỆP 6 Event Loop giúp JavaScript thực hiện nhiều thao tác cùng một lúc.
Vậy Event Loop là gì? Sở dĩ có tên gọi như vậy vởi có một vòng lặp tuần hoàn trong JavaScript Runtime dùng để lắng nghe các Event. Nhiệm vụ của Event Loop rất đơn giản đó là đọc Stack và Event Queue. Nếu Stack rỗng, event loop sẽ nhặt event đầu tiên trong event queue và handler (callback hoặc listener) gắn với event đó và đẩy vào stack. Hàm chỉ dừng lại khi return kết quả hoặc throw exception.
Như trên hình JS Runtime còn thao tác với một callback queue hay event ngoài stack ra. Stack queue theo kiểu LIFO (Last In First Out) còn Event queue này theo kiểu FIFO (First In First Out). JavaScript hoạt động: * Engine Đây là một phần trong Java Runtime, một trong những Engine hiện nay của JavaScript là Google’s V8 engine. Cấu trúc của một engine bao gồm: Memory Head (Liên quan đến phân vùng bộ nhớ đệm) và Call Stack.
* The runtime JavaScript là một ngôn ngữ chạy đơn luồng, chúng ta cũng có thể hiểu là nó chỉ có một Call stack và trong một lúc chỉ làm một công việc mà thôi. KHÓA LUẬN TỐT NGHIỆP 7 Ngoài JS Runtime engine, quá trình này bao gồm cả Web APIs. Web APIs giúp xử lý bất đồng bộ. JS runtime sẽ đưa những function như setTimeOut(), setInterval() vào trong Macrotask, các function bất đồng bộ (Promise) vào trong Microtask.
JS sẽ ưu tiên xử lý trong Microtask trước Macrotask.2 Node JS với Express và MySQL Express là một web frameworks phổ biến nhất cho Node JS trong việc hỗ trợ routing, middleware, view system. * REST API là gì Cấu trúc của một REST là gì, REST được viết tắt từ cụm từ REpresentational State Transfer. REST là một website tiêu chuẩn dựa vào cấu trúc và sử dụng HTTP Protocol. Nó xoay quanh tài nguyên trong đó mọi component đều là resourse và là resourse được truy cập bằng một giao diện chung sử dụng các phương thức HTTP.
Một server REST được cung cấp truy cập đến resourses và REST client accesses và modifiles những resourses sử dụng HTTP protocol. KHÓA LUẬN TỐT NGHIỆP 8 Các giá trị của REST biểu diễn dưới dạng text, JSON, XML, trong đó JSON là dạng phổ biến nhất. * Các phương thức HTTP Có 4 phương thức HTTP phổ biến: - GET: được sử dụng để cung cấp quyền Read only đến resource. - PUT: được sử dụng để update hoặc replace một resourse.
- POST: được sử dụng để tạo mới một resourse. - Delete: được sử dụng để xóa một resourse. * Các status code của API Các loại status code: - 1xx: Informational – giao tiếp chuyển đổi thông tin các protocol-level. - 2xx: Success – thông báo thành công.
- 3xx: Redirection – Thông bào client cần thực hiện bổ sung một số hành động nào đó để hoàn thành request. - 4xx: Client Error – Đây là loại status code về lỗi bên phía của client. - 5xx: Server Error – Server chịu trách nhiệm về trạng thái lỗi này. * Một số loại status code phổ biến của REST - 200 (OK) 200 Status code thông báo request thành công.
Và không giống như 204 status code, một 200 response nên được thêm vào một response body. Những thông tin trả về với response sẽ được dựa vào phương thức request, ví dụ: + GET: trả về một entity hoặc một object tương ứng với request được gửi trong response. KHÓA LUẬN TỐT NGHIỆP 9 + HEAD: trả về một entity-header fields tương ứng với request được gửi trong response mà không có message-body. + POST: trả về một entity mô tả hoặc chứa kết quả của request.
+ TRACE: trả về một entity chứa request message.3 React JS React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với xu hướng Single Page Web Application. React là một library cho phép nhúng code html trong code javascript nhờ vào JSX, làm cho các component dễ hiểu hơn. React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được. Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau.
KHÓA LUẬN TỐT NGHIỆP 10 React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều. Dữ liệu được truyền từ parent đến child thông qua props. Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi.Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian. Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi về giao diện, khi đó React sẽ rất hữu ích để sử dụng.
React JS sử dụng Virtual DOM (DOM ảo) để tăng hiệu năng cho ứng dụng. Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật.4 Firebase Hiểu một các đơn giản, Firebase là nền tảng của Google được xây dựng để phát triển các ứng dụng mobile và web. Firebase cung cấp các API vô cùng đơn giản, chúng ta không cần tới Backend. Firebase là một dịch vụ cơ sở dữ liệu hoạt động trên nền tảng là đám mây.
Việc sử dụng Firebase giúp người lập trình rút ngắn thời gian triển khai và mở rộng ứng dụng. Firebase hỗ trợ trên cả hai nền tảng Android và IOS. Nó cung cấp các dịch vụ: Realtime Database Crashlytics Cloud Firestore Authentication Cloud Functions Cloud Storage Hosting Test Lab for Android Performance Monitoring Chúng ta sẽ tìm hiểu một số phần về Authentication, Cloud Firestore và Cloud Messaging. KHÓA LUẬN TỐT NGHIỆP 11 1.