Xây dựng blog của bạn với Parse.js

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Final product image — What You'll Be Creating

Bạn đã bao giờ cảm thấy phấn khích bởi ý tưởng về một dự án web, nhưng thấy khó khăn để làm cho nó hoạt động trên một máy chủ không? Với Parse.js, tất cả những ai có những hiểu biết cơ bản về HTML, CSS, và JavaScript đều có thể tạo ra các trang web động và các ứng dụng web hoạt động một cách dễ dàng.

Trong bài này, tôi sẽ hướng dẫn bạn đi qua toàn bộ quá trình tạo ra một hệ thống blog với Parse.js từ đầu. Bạn sẽ sử dụng tất cả các công cụ khởi động, và thực hành ý tưởng tạo nguyên mẫu nhanh chóng, tái cấu trúc, và framework MVC. Cuối của loạt bài này, bạn sẽ có thể tự mình tạo ra bất kỳ trang web CMS nào.

Mặc dù tôi sẽ cố gắng hướng dẫn càng chi tiết càng tốt, nhưng bạn cũng cần phải có các kiến thức cơ bản về HTML, CSS, Javascript/jQuery, và GitHub để làm theo hướng dẫn này. Nếu bạn không rành về các công cụ nói trên, thì có rất nhiều hướng dẫn tuyệt vời ở đây trên Tuts+ mà bạn có thể tìm hiểu.

Thiết lập môi trường phát triển

Hãy bắt đầu bằng cách thiết lập môi trường phát triển của chúng ta. Bạn sẽ cần một máy chủ cục bộ để chạy thử, một máy chủ web, máy chủ dữ liệu và phần mềm quản lý phiên bản. Như đã đề cập, hướng dẫn này không đòi hỏi kiến thức back-end. Tôi sẽ hướng dẫn bạn từng bước. Bạn có thể bỏ qua phần này nếu bạn đã nắm rõ về nó.

Bước 1: Cài đặt XAMPP

Sau khi thử một số giải pháp khác nhau, thì XAMPP vẫn là cách dễ nhất để thiết lập một máy chủ chạy thử tại cục bộ mà tôi tìm thấy. Vì vậy, tôi sẽ sử dụng XAMPP như là máy chủ chạy thử cục bộ trong hướng dẫn này.

Nếu bạn vẫn chưa có, hãy bắt đầu bằng cách tải XAMPP ở đây. Chọn một cái trong đó phù hợp với hệ thống của bạn và cài đặt nó.

Ở đây tôi sử dụng máy Mac nên tôi sẽ sử dụng nó như ví dụ từ lúc này trở đi. Nếu bạn sử dụng hệ điều hành khác, quá trình này sẽ khá giống.

Sau khi bạn cài đặt nó, chạy XAMPP, và khởi động "Apache Web Server".

XAMPP - Manage Servers - Start Apache Web Server

Bây giờ nếu bạn truy cập http://localhost/ trong trình duyệt của bạn, bạn sẽ thấy trang XAMPP mặc định. Điều đó có nghĩa là nó đã chạy!

Bước 2: Tạo một GitHub Page mới

Tiếp theo, hãy tạo một repo git mới tại GitHub. Tôi gọi nó là blog để nó gọn và rõ ràng đối với tôi. Để cho nó hoạt động như một máy chủ web, chúng ta cần phải thiết lập nó như là một GitHub Page.

Đầu tiên, thêm một branch mới, gh-pages.

Sau đó vào cài đặt, thiết lập gh-pages như branch mặc định.

Tuyệt. Bây giờ hãy vào giao diện dòng lệnh, và clone branch đó trên GitHub vào thư mục htdocs của XAMPP.

1	$ cd /Applications/XAMPP/xamppfiles/htdocs
2	$ git clone https://your-git-HTTPS-clone-URL-here

Điều hướng đến thư mục repo Git mà bạn vừa mới clone, tạo ra một tập tin index.html đơn giản, và chỉ cần viết Hello World trong đó.

1	$ cd blog
2	$ echo 'hello world' > index.html

Kiểm tra localhost của bạn và đảm bảo rằng nó hoạt động.

Tuyệt lắm. Sau đó, chúng ta hãy đẩy nó lên GitHub.

1	$ git add index.html
2	$ git commit -am "Add index.html"
3	$ git push

Truy cập vào http://[tên người dùng].github.io/[tên repo], đợi nó một vài phút, và bạn sẽ thấy index.html của bạn hiện đã trực tuyến:)

Bước 3: Đăng ký tài khoản của bạn trên Parse.com

Rất dễ để lưu trữ nội dung tĩnh trên GitHub Page, nhưng khi nói đến back-end, mọi thứ có thể khó khăn hơn so với GitHub Page. May mắn thay, bây giờ chúng ta có Parse.js. Chúng ta có thể sử dụng Parse.com như là máy chủ dữ liệu của chúng ta và liên lạc với nó thông qua JavaScript. Bằng cách đó, chúng ta chỉ cần lưu trữ HTML, CSS, và các tập tin JavaScript trên GitHub.

Hãy tìm đến và đăng ký tại Parse.com nếu bạn vẫn chưa có một tài khoản.

Bây giờ, bạn đã có máy chủ dữ liệu của bạn ở trên mây.

Khởi tạo Template HTML tĩnh

Bây giờ hãy chuẩn bị một phiên bản tĩnh của hệ thống blog mà chúng ta sẽ làm. Để cho bạn thấy bạn có thể khởi tạo nhanh như thế nào thông qua điều này, tôi sẽ chỉ sử dụng template blog ví dụ từ Bootstrap. Một lần nữa, nếu bạn đã khá quen với Bootstrap hoặc bạn có một trang web tĩnh được thiết kế sẵn, đừng ngại làm điều đó theo cách của bạn. Nếu bạn là người mới làm quen với Bootstrap, hãy theo dõi tiếp.

Bước 1: Tải về Bootstrap

Đầu tiên, tải về Bootstrap (hiện tại chúng tôi đang sử dụng phiên bản 3.2.0), giải nén nó, và đặt nội dung của nó vào trong thư mục XAMPP/xamppfiles/htdocs/blog của bạn.

Bước 2: Bắt đầu với Template cơ bản của Bootstrap

Sau đó, chỉnh sửa index.html để có được template cơ bản của Bootstrap. Nó cung cấp một cấu trúc HTML cơ bản với các liên kết đến bootstrap.min.css, bootstrap.min.js, và jquery.min.js. Bắt đầu với một template như thế này sẽ giúp bạn tiết kiệm rất nhiều thời gian.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Làm mới và chắc chắn rằng nó hoạt động.

Bước 3: Sao chép Template Blog

Bây giờ, chuyển đến một ví dụ blog từ Bootstrap: http://getbootstrap.com/examples/blog/

Trên trang web, nhấp chuột phải và chọn "View Source". Chúng ta cần sao chép tất cả nội dung trong thẻ <body> vào index.html của chúng ta và thay thế <h1>Hello, world!</h1> trong template cơ bản.

Đừng sao chép các thẻ <script> vì chúng ta đã có tất cả các tập tin JavaScript mà chúng ta cần.

Bây giờ bạn sẽ có trang này:

Bước 4: Sao chép Phong cách Blog Ví dụ và Thêm nó vào trong index.html

Chú ý những phong cách chưa đúng. Đó là bởi vì chúng ta cần blog.css, stylesheet cụ thể cho blog được xây dựng dựa trên các phong cách cơ bản của bootstrap.

Bạn có thể tìm thấy nó từ mã nguồn: http://getbootstrap.com/examples/blog/blog.css

Sao chép tập tin đó, và đặt trong thư mục blog/css của bạn.

Liên kết đến nó ở trong index.html bên dưới bootstrap.min.css:

1	<!-- Bootstrap -->
2	<link href="css/bootstrap.min.css" rel="stylesheet">
3	<link href="css/blog.css" rel="stylesheet">

Và bây giờ các phong cách sẽ đúng, và template tĩnh của chúng ta đã sẵn sàng.

Cài đặt và Kết nối với cơ sở dữ liệu Parse

Để làm cho blog tĩnh của chúng ta trở nên động, chúng ta trước tiên cần phải thiết lập cơ sở dữ liệu riêng của nó trên Parse.com.

Bước 1: Tạo một ứng dụng mới

Đi đến bảng điều khiển của Parse.com, và nhấp vào "Create New App".

Bây giờ, hãy gọi nó là Blog.

Một khi nó được tạo ra, hãy đi đến "Quickstart Guide - Data - Web - Existing project"

Bước 2: Thêm Parse.js vào trong index.html

Làm theo phần Quickstart Guide, trước tiên hãy thêm Parse.js vào index.html của bạn. Nhưng thay vì đặt nó trong phần <head>, bạn có thể đặt nó ngay bên dưới jQuery:

1	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
3	<!-- Parse.js -->
4	<script src="//www.parsecdn.com/js/parse-1.2.19.min.js"></script>

Bước 3: Kiểm tra Parse SDK

Tiếp theo, tạo ra một blog.js ở dưới thư mục blog/js của bạn với ID ứng dụng và khoá JavaScript, và một số mã kiểm tra thử. Tất cả chúng có thể được tìm thấy trong phần Quickstart Guide:

$(function() {

    Parse.$ = jQuery;

  // Replace this line with the one on your Quickstart Guide Page
	Parse.initialize("W8vTW6MTre3g0ScTeyPzqc6Uzj2KZoQ6GBv0j6ZC", "VVayP3EdZ6QH0QMttzpWgeJ2if4f2m8QjA10SaFQ");

	var TestObject = Parse.Object.extend("TestObject");
	var testObject = new TestObject();
	testObject.save({foo: "bar"}).then(function(object) {
	  alert("yay! it worked");
	});

});

Lưu nó, và liên kết tập tin JavaScript này trong index.html của bạn, ở dưới bootstrap.min.js.

1	<!-- Include all compiled plugins (below), or include individual files as needed -->
2	<script src="js/bootstrap.min.js"></script>
3	<script src="js/blog.js"></script>

Bây giờ, làm mới index.html trên localhost của bạn một lần nữa, và bạn sẽ có thể thấy thông báo này:

Điều đó nghĩa là bây giờ bạn đang kết nối với cơ sở dữ liệu Blog của bạn ở trên mây :)

Bây giờ nếu bạn kiểm tra "Data Browser" của bạn trên Parse.com, bạn sẽ thấy TestObject mà bạn vừa tạo ra.

Tổng kết

Hôm nay, chúng ta đã thiết lập tất cả các máy chủ mà chúng ta cần: XAMPP như là máy chủ chạy thử cục bộ, GitHub Page như máy chủ web, và Parse.com như máy chủ dữ liệu của chúng ta. Chúng ta cũng có một template blog cơ bản, và bây giờ nó đã được kết nối với cơ sở dữ liệu.

Trong phần tiếp theo, tôi sẽ hướng dẫn bạn cách làm thế nào để thêm bài viết cho blog từ Data Browser của Parse, truy vấn nó với JavaScript, và kết xuất nó trên front-end.

Hãy kiểm tra các tập tin mã nguồn nếu bạn bí. Và xin hãy để lại ý kiến nếu bạn gặp bất kỳ khó khăn nào.