Sunday, March 27, 2016

3. Phụ chương - Tạo lập website để host game

Tạo application trên Openshift

Tôi gọi đây là phụ chương, vì phần này không liên quan nhiều đến việc phát triển game.

Nếu bạn từng đọc qua phần 1 của "Sài Gòn - Hành trình phát triển game", bạn sẽ biết được tôi đã từng làm việc cho một công ty chuyên về outsourcing. Bên đó chuyên làm về website bán lẻ là chính. Cũng nhờ đó mà tôi cũng có chút kinh nghiệm trong việc triển khai một site cá nhân. Tuy nhiên, khác với những công ty hay tập đoàn lớn, các site cá nhân thường có lưu lượng người xem khá ít. Nên lựa chọn việc mua một host hay dedicated server là một điều quá xa xỉ. Có rất nhiều dịch vụ hosting website miễn phí, nhất là các dịch vụ điện toán đám mây (cloud computing). Điển hình tôi đã thử qua Google App Engine, Heroku, Openshift. Nếu phân tích ưu nhược điểm của những dịch vụ này thì bạn có thể tìm hiểu thêm, tôi lười lắm! Sau khoảng thời gian sử dụng thì tôi đang trung thành với Openshift, đảm bảo miễn phí và hoạt động 24/24 cho một trang web cá nhân với lưu lượng thấp.

Trước tiên bạn hãy tạo một tài khoản trên Openshift như tôi. Sau đó vào đường dẫn:

https://openshift.redhat.com/app/console/applications

Click chọn "Add Application" để tạo 1 app mới, có rất nhiều loại ngôn ngữ/framework openshift hỗ trợ. Bạn có thể chọn loại mà bạn quen dùng hoặc yêu thích. Trong chương này, tôi quen với python/django nên sẽ hướng dẫn mọi người theo hướng này. Nếu như bạn muốn tôi viết một hướng dẫn cho ngôn ngữ hay framework khác thì hãy để lại comment bên dưới bài viết.

Tiếp tục với việc tạo lập app trên openshift, sau khi click chọn Django, tôi điền thông tin URL cho website của mình như sau
  

Sau đó chỉ cần click "Create Application" và đợi khoảng vài phút là tôi đã tạo xong app của mình trên Openshift. 

Lấy source code từ openshift về máy

Khi đó, tôi nhận được một trang hướng dẫn các bước tiếp theo ở máy tính của tôi. 

Sau đó bạn mở terminal(Mac hoặc Linux)/cmd(Windows), gõ thử chữ "git" rồi bấm enter xem git đã được cài đặt chưa, nếu chưa thì lên đây tải về rồi cài nhé https://git-scm.com/. Tiếp đến đơn giản chỉ cần làm theo hướng dẫn bằng cách chạy các command line thôi.

Quá trình này sẽ tải về máy bạn thư mục mã nguồn của website của bạn trên openshift. Nếu như bạn chưa có nhiều kiến thức về git, thì hãy bổ sung vào danh sách những công cụ bạn bắt buộc phải biết nhé!
Vì đây là website chạy bằng ngôn ngữ python nên bạn phải download và cài đặt python trên máy của mình(tôi sử dụng Mac có sẵn rồi nên đỡ phải cài) https://www.python.org/

Trong command line, tôi tiếp tục vào bên trong thư mục chứa tập tin setup.py, tôi chạy lệnh cài đặt các thư viện cần thiết để chạy website bằng máy của mình trước (chạy thử nghiệm)

sudo python setup.py install

hoặc cho Windows

python setup.py install

Sau khi cài đặt xong xuôi, tôi vào thư mục chứa tập tin manage.py rồi chạy lệnh sau để migrate database. Nếu bạn đã từng làm qua web thì các model thường được biểu diễn dưới dạng Model trên source code của mình, sau đó sẽ thông qua framework về database mapping với cơ sở dữ liệu bên dưới. Do đó tôi cần phải mapping/sync database và model trước khi start site.

python manage.py migrate

Và start site

python manage.py runserver



Bây giờ mở trình duyệt lên mà kiểm tra thử xem nào http://127.0.0.1:8000/

Ooops! Có lỗi rồi, sửa thôi. Sau khi kiểm tra file settings.py, tôi sửa
DEBUG = os.environ.get('DEBUG') == 'True'
thành
DEBUG = True

Kết quả là, start website local thành công la!

Sau đó trở lại thư mục gốc của project và chạy các lệnh sau để push site lên cloud (openshift)

git add .
git commit -am "init project"
git push


Truy cập thử website của mình http://gamegallery-gamestop.rhcloud.com/, mọi thứ có vẻ ổn.


Tạo lập index page (trang chủ)

Để tạo một page mới, tôi cần phải edit lại file urls.py
from django.conf.urls import include, url
from django.contrib import admin
from django.conf.urls.static import static

import views
import settings

urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^admin/', include(admin.site.urls)),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) \
              + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Và thêm 1 file views.py trong cùng thư mục với urls.py như sau
from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
def index(request):
    return render(request, 'index.html')

Edit lại TEMPLATE trong file settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(WSGI_DIR, 'static'),
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
và thêm 1 số dòng sau vào cuối file settings.py
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(WSGI_DIR, 'media')
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(WSGI_DIR, 'static')
Sau đó tạo file index.html trong thư mục static
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="/media/pickupthestars/web-desktop/index.html">Pick up the stars</a>
</body>
</html>

Tạo lập app page 

phần 2, tôi có làm 1 game gọi là Pick up the stars. Hiện giờ, tôi sẽ build và đẩy game đó lên website của mình.

Tạo thư mục media ngang hàng với thư mục static. Tạo tiếp thư mục pickupthestars trong thư mục media.


Mở Cocos creator lên, vô File --> Build. Và chọn thiết lập như sau để build web app:
Build Path: ...../pickupthestars/web-desktop


Tiếp đến, tôi copy thư mục web-desktop tới thư mục media/pickupthestars của website


Game của tôi đã deploy lên site chạy nội bộ trong máy thành công.


Cuối cùng,  tôi chạy lại các lệnh sau để push những thay đổi site lên cloud (openshift). Mở termial và di chuyển tới thư mục của website rồi chạy các lệnh:

git add .
git commit -am "add game pickup the stars"
git push

Sau khi chạy xong, tôi lên kiểm tra thử http://gamegallery-gamestop.rhcloud.com/ và thấy game của mình đã on fly!

Nếu bạn có kiến thức về HTML, CSS thì hãy trang hoàng cho website của bạn thêm lung linh lộng lẫy hơn nhé. Tôi thường hay tham khảo các template trên đây: http://startbootstrap.com/template-categories/all/

Nếu như bạn cảm thấy không muốn người khác để ý tới trang chủ của mình, bạn nên đơn thuần share link của app mình thôi nhé.
Ví dụ: http://gamegallery-gamestop.rhcloud.com/media/pickupthestars/web-desktop/index.html


Tôi đã làm xong một website đơn giản và đẩy game đầu tay của mình lên internet. Còn bạn thì sao?

1 comment:

  1. Bạn nào còn tài khoản openshift v2 bán hoặc share cho mình với nhé.
    FB: https://fb.me/huyannet

    ReplyDelete