Kết hợp React.js với Parse tạo nên 1 ứng dụng tuyệt vời
Bài đăng này đã không được cập nhật trong 9 năm
Đây là lần đầu tiên tôi tiếp xúc với cả React.js và Parse. Parse thì tôi có nghe nói đến khá lâu rồi, cũng muốn có dịp trải nghiệm nhưng đến giờ mới có cơ hội, còn React.js thì như các bạn biết đấy, gần đây nó nổi như cồn vậy, cho nên mình cũng không thể trốn chạy khỏi nó được 
Parse là gì
Parse là một nền tảng đám mây (PaaS & IaaS) cung cấp các API và các dịch vụ đám mây dành cho các ứng dụng iOS, Android và Windows®. Parse SDK còn cung cấp thư viện cho JavaScript và các API REST.
Như vậy là thay vì phải tự tạo Database, tự code phần backend, tự code các API, rồi tìm host/server để deploy chúng thì giờ đây bạn đã có tất cả, chỉ việc sử dụng thôi(hạnh phúc quá).
React.js là gì
React.js là 1 thư viện JavaScript tạo ra bởi Facebook(nghe đến Facebook là biết hàng xịn rồi chứ). Nó tập trung vào phần View trong mô hình MVC, nó chỉ là 1 thư viện chứ không phải 1 framework hoàn chỉnh.
Song kiếm hợp bích
Thực ra ý tưởng kết hợp 2 thằng có trong đầu tôi trước khi tôi vào http://parse.com, nhưng tôi vẫn chưa biết sẽ làm thế nào, tình cờ thay khi vào trang chủ của Parse tôi rất bất ngờ là Parse nó đã làm sẵn công cụ cho mình rồi. Đây là hình ảnh ở trang chủ của nó:
Ngon, vậy là phần đau đầu nhất làm sao kết hợp thì đã được giải, giờ chỉ việc dùng thôi(hạnh phúc quá).
Parse + React.js
Parse + React.js là 1 lớp giao tiếp(interface layer) dựa trên Parse JS SDK cung cấp cách truy cập đơn giản tới Parse API từ React. Bạn có thể tham khảo trên github tại đây: https://github.com/ParsePlatform/ParseReact
Ứng dụng Todolist
Lý thuyết vậy đủ rồi nhỉ, giờ chúng ta cùng làm thử 1 ứng dụng Todolist đơn giản dùng Parse + React.js nhé.
- Đầu tiên là phần khai báo các thư viện cần dùng
<html>
<head>
<script src="http://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="https://www.parsecdn.com/js/parse-latest.js"></script>
<!-- Now include parse-react.js -->
<script src="https://www.parsecdn.com/js/parse-react.js"></script>
</head>
Ở đây trong phần head ta khai báo các thư viện:
- react.js - Tất nhiên rồi
- Jsxtransformer - Thư viện giúp ta sử dụng Jsx kết hợp với React.js(Jsx là gì thì Google nhé)
- parse.js - Parse JS SDK, bộ SDK của Parse thôi
- parse-react.js - Chính là lớp giao diện để giao lưu, kết hợp 2 thằng lại với nhau.
- Khởi tạo đối tượng Parse
...
<body>
<div id="content"></div>
<script type="text/jsx">
Parse.initialize("cJpFFzZ4ZyZm5AcsdWHQP3c7idveUGtBdYa6LvB7", "3TEXv3GtBZ7YHF2bjhY3YjNbaHVx1thFOz1lKXRm");
...
Ở đây ta cần khởi tạo cho Parse bằng cách gọi hàm Parse.initialize và truyền vào key của Parse, để có key này thì bạn vào: http://parse.com để đăng ký và lấy key nhé. Ngoài ra chú ý phần type="text/jsx" nhé, ta cần khai báo vậy để sử dụng JSX trong các phần tiếp theo.
- Tạo TodoBox component
var TodoBox = React.createClass({
render: function() {
return (
<div className="todo-box">
<TodoList />
<TodoForm />
</div>
);
}
});
Ở đây đơn giản ta render ra 1 cái div bên trong chứa 2 component con là TodoList và TodoForm thôi. TodoList thì sẽ là 1 list các "todo item" còn TodoForm thì là 1 ô textbox để nhập vào nội dung của "todo item"
- Tạo TodoList component
var TodoList = React.createClass({
mixins: [ParseReact.Mixin],
observe: function() {
return {
todolist: (new Parse.Query("Todo").descending("createdAt"))
}
},
render: function() {
return (<ul>
{
this.data.todolist.map(function(c) {
return <li key={c.id}>{c.text}</li>
})
}
</ul>);
}
});
Component này có sử dụng Parse+React Mixin dùng để "subscribe" tới Parse Query (cái này để tìm hiểu kỹ hơn bạn vào trang chủ của Parse nhé, nhưng thật ra đọc code ở trên chắc bạn cũng hiểu được phần nào rồi nhỉ).
Phương thức observe() khai báo các "subscriptions" tới các Query của Parse và trả về kết quả được lưu trong this.data. Như ở trên ta gọi đến Query "Todo" nơi ta sẽ lưu dữ liệu các item của Todolist và sắp xếp giảm dần theo ngày tạo createdAt. Cuối cùng là phần render ta sử dụng các thẻ <ul> và <li> để hiển thị list thôi.
- Tạo TodoForm component
var TodoForm = React.createClass({
handleKeyPress: function(e) {
if (e.which == 13) {
var item = React.findDOMNode(this.refs.todoitem);
ParseReact.Mutation.Create("Todo", {text:item.value}).dispatch();
item.value = '';
}
},
render: function() {
return (
<input ref="todoitem" onKeyPress={this.handleKeyPress} placeholder="Press enter to add" />
);
}
});
Ở đây trong function handleKeyPress ta viết phần xử lý khi gõ phím Enter (mã là 13) thì sẽ lấy nội dung của ô text rồi dùng đối tượng ParseReact của lớp giao tiếp để lưu giữ liệu lên Parse Cloud, việc lưu này cũng sẽ đồng thời làm hiển thị item mới được thêm trong TodoList ở trên.
- Render và kết quả
React.render(<TodoBox />, document.getElementById('content'));
Ở bước cuối cùng ta sẽ render TodoBox component. Và kết quả trên màn hình sẽ được:
Lúc đầu khi chưa thêm item nào thì chưa có abc và 123 kia đâu nhé. Bạn hãy thử gõ 1 đoạn vào ô text và ấn Enter xem, OH nó ngay lập tức hiện lên list todo ở trên. Giờ bạn F5 trình duyệt xem. OH nó vẫn hiện ra này, như vậy là dữ liệu đã được cập nhật thành công lên đám mây rồi, bạn có thể truy cập đến dữ liệu này ở khắp mọi nơi, khắp mọi ứng dụng kể cả di động.
Kết luận
Như vậy là chỉ với 1 file html bạn đã có thể làm được 1 trang web động hoàn toàn, dữ liệu được lưu trữ hoàn toàn dùng điện toán đám mây! Thật không thể tin nổi! Vâng chính tôi cũng không thể tin nổi!
All rights reserved
