CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. GIỚI THIỆU NGÔN NGỮ LẬP TRÌNH Ứng dụng viết sử dụng các ngôn ngữ là: Java, HTML, CSS, Javascript. Giới thiệu về ngôn ngữ Java[1] - Là ngôn ngữ bậc cao. - Ngôn ngữ hoàn toàn hướng đối tượng.
- Là ngôn ngữ kết hợp thông dịch và biên dịch - Ngôn ngữ đa nền cho phép một chương trình có thể thực thi trên các hệ điều hành. Phương châm của Java là “Write Once, Run Anywhere”. - Ngôn ngữ đa luồng, cho phép trong một chương trình có thể có nhiều luồng điều khiển được thực thi song song nhau, rất hữu ích cho các xử lý song song. - Ngôn ngữ phân tán, cho phép các đối tượng của một ứng dụng được phân bố và thực thi trên các máy tính khác nhau.
- Là ngôn ngữ mạnh mẽ (thể hiện ở cơ chế tự động thu gom rác – Garbage Collection) và an toàn - tất cả các thao tác truy xuất vào các thiết bị vào ra đều thực hiện trên máy ảo nhờ đó hạn chế các thao tác nguy hiểm cho máy tính thật. - Ngôn ngữ động, cho phép mã lệnh của một chương trình được tải từ một máy tính về máy của người yêu cầu thực thi chương trình. Giới thiệu về HTML[2] - HTML (là viết tắt của HyperText Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẩu thông tin được trình bày trên World Wide Web. Cùng với CSS và JavaScript, HTML tạo ra bộ ba nền tảng kỹ thuật cho World Wide Web.
Giới thiệu về CSS[3] - CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet language. Nó dùng để tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng Xây dựng hệ thống giao đồ ăn nhanh 4 do an ngôn ngữ đánh dấu, như là HTML. Nó có thể điều khiển định dạng của nhiều trang web cùng lúc để tiết kiệm công sức cho người viết web. Giới thiệu về ngôn ngữ Javascript[4] - Là ngôn ngữ lập trình bậc cao (high-level) giống như: C/C++, Java, Python, … nó rất gần với ngôn ngữ tự nhiên của con người.
- Là ngôn ngữ lập trình động (dynamic programming language): như Python, Ruby, Perl, … Chúng được tối ưu hoá nhằm nâng cao hiệu suất cho lập trình viên. - Là ngôn ngữ lập trình kịch bản (scripting language): nghĩa là không cần biên dịch (compile) hay liên kết (linked) giống như ngôn ngữ lập trình biên dịch (C/C++, Java,…) mà nó sẽ được dịch tại thời điểm chạy. - Là ngôn ngữ dựa trên đối tượng (object-based): tức nó gần giống như ngôn ngữ lập trình hướng đối tượng, ngoại trừ JavaScript không hỗ trợ tính kế thừa và đa hình. - Là ngôn ngữ dựa trên nguyên mẫu (prototype-based): là một kiểu của lập trình hướng đối tượng, trong đó các hành vi của đối tượng được sử dụng lại.
GIỚI THIỆU VỀ CÔNG NGHỆ SỬ DỤNG 1. Tìm hiều về ReactJS[5] 1. Giới thiệu về React - 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 Application. Trong khi những framework khác cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác.
Nếu như AngularJS là một Framework cho phép nhúng code javasscript trong code html thông qua các attribute như ng-model, ng-repeat.thì với react là một library cho phép nhúng code html trong code javascript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS.Tích hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn. Xây dựng hệ thống giao đồ ăn nhanh 5 do an - 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. React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM.
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. 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 1. 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. Xây dựng hệ thống giao đồ ăn nhanh 6 do an - 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.
Tìm hiểu về Redux[6] 1. Khái niệm - Redux là 1 thư viện giúp chúng ta quản lý các state 1 cách tốt hơn. Thay vì phải truyền state qua từng Component thì Redux sẽ tạo ra 1 store duy nhất dùng để thay đổi dữ liệu. - Redux được xây dựng dựa trên nền 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à 1 thư viện không thể thiếu trong các dự án có sử dụng React. Cấu trúc Hình 1: Cấu trúc Redux - Store: Là 1 object lưu trữ state của toàn bộ ứng dụng, cho phép truy cập State qua getState(), update State qua dispatch(action). Xây dựng hệ thống giao đồ ăn nhanh 7 do an - Action Creators: Là nơi tạo ra các action dùng để mô tả event do người dùng tạo ra. - Reducer: Là 1 fuction nhận đầu vào là state và các mô tả về event và dựa trên đó để trả về state tiếp theo nhưng ko thay đổi state cũ - View: Hiển thị dữ liệu được cung cấp bởi Store.
Nguyên lý hoạt động - Bước 1: Khi có 1 sự kiện (event) như là GET, POST, UPDATE, DELETE. thì thằng action creators sẽ sinh ra 1 action mô tả những gì đang xảy ra. - Bước 2: Action sẽ thực hiện điều phối Reducer xử lý event thông qua hàm dispatch(action). Hình 2: Nguyên lí hoạt động của Redux - Bước 3: Reducer dựa vào những mô tả của Action để biết cần thực hiện thay đổi gì trên State và thực hiện update.
- Bước 4: Khi State được update thì các trigger đang theo dõi state đó sẽ nhận được thông tin update và tiến hành render lại phần view để hiển thị ra cho người dùng 1. Nguyên tắc trong redux Redux được xây dựng dựa trên 3 nguyên lý: - Store luôn là nguồn dữ liệu đúng và tin cậy duy nhất. Xây dựng hệ thống giao đồ ăn nhanh 8 do an - State chỉ được phép đọc, cách duy nhất để thay đổi State là phát sinh một Action, và để Reducer thay đổi State. - Các fuction Reducer phải là Pure function (với cùng 1 đầu vào chỉ cho ra 1 đầu ra duy nhất) 1.
CƠ SỞ DỮ LIỆU FIREBASE[7] 1. Giới thiệu về cơ sở dữ liệu Firebase Firebase là một nền tảng ứng dụng di động và web với các công cụ và hạ tầng được thiết kế để giúp các lập trình viên xây dựng các ứng dụng chất lượng cao. Là một cơ sở dữ liệu NoSQL được lưu và đồng bộ dữ liệu trên mây. Dữ liệu đượclưu trữ và đồng bộ hóa theo thời gian thực với mỗi client được kêt nối và vẫn khả dụng khi ứng dụng offline.
Khi bạn xây dựng ứng dụng đa nền tẩng với iOS, Android, và javascript SDK, tất cả các client của bạn chia sẽ một thể hiện Realtime Database và tự động tiếp nhận các thay đổi với dữ liệu mới nhất. Các tính năng cơ bản của Firebase 1. Realtime Database – Cơ sở dữ liệu thời gian thực Firebase lưu trữ dữ liệu database dưới dạng JSON và thực hiện đồng bộ database tới tất cả các client theo thời gian thực. Cụ thể hơn là có thể xây dựng được client đa nền tảng (cross-platform client) và tất cả các client này sẽ cùng sử dụng chung 1 database đến từ Firebase và có thể tự động cập nhật mỗi khi dữ liệu trong database được thêm mới hoặc sửa đổi.
Tự động tính toán quy mô ứng dụng Khi ứng dụng muốn phát triển không cần lo lắng về việc nâng cấp máy chủ.Firebase sẽ xử lý tự động. Các máy chủ của Firebase quản lý hàng triệu kết nối đồng thời và hàng tỉ lượt truy vấn mỗi tháng. Các tính năng bảo mật lớp đầu Tất cả dữ liệu được truyền qua một kết nối an toàn SSL với một chứng nhận 2048-bit. Cơ sở dữ liệu truy vấn và việc xác nhận được điều khiển tại một cấp độ chi tiết sử dụng theo một số các quy tắc mềm dẻo security rules language.
Tất cả Xây dựng hệ thống giao đồ ăn nhanh 9 do an các logic bảo mật dữ liệu của bạn được tập trung ở một chỗ để dễ dàng cho việc cập nhật và kiểm thử. Làm việc offline Ứng dụng Firebase của bạn sẽ duy trì tương tác bất chấp một số các vấn đề về internet xảy ra. Trước khi bất kỳ dữ liệu được ghi đến server thì tất cả dữ liệu lập tức sẽ được viết vào một cơ sở dữ liệu Firebase ở local. Ngay khi có thể kết nối lại, client đó sẽ nhận bất kỳ thay đổi mà nó thiếu và đồng bộ hoá nó với trạng thái hiện tại server.