Tutorial Instant Games Facebook?

Hello các bạn, với series lần này Phít đã tìm hiểu cô nàng Facebook này rất lâu nhưng chưa có cơ hội để giới thiệu cho các bạn. Với sự trưởng thành "tuổi đôi mươi" Phít mới vực dậy và mạnh dạn đứng ra lột đồ nàng.

Khởi đầu của tình yêu

Chắc hẳn các bạn đã từng chơi những trò chơi trên Facebook qua Messenger hay tại danh mục Trò Chơi. Các bạn chắc cũng đặt ra câu hỏi liệu rằng trò chơi đó viết bằng ngôn ngữ gì? Hay làm gì để tạo ra nó chưa?

Ở bài này mình sẽ "lột đồ cô nàng Facebook" cho bạn thấy nó đơn giản như thế nào.

Thật ra, trò chơi tức thì cũng ... không có gì cao siêu ghê gớm lắm. Chỉ cần bạn biết một chút kiến thức Frontend. Cùng xem thử demo dưới đây nhé 😛

Ảnh 01	Ảnh 02	Ảnh 03

Bắt tay ngay vào code

Mái tóc dài và sự đáng yêu của cô ấy nên Phít đã gọi cô ấy là InstantGames

Do nàng thiếu đồ để tân trang lại nhan sắc, vì thế Phít quyết định sắm ngay cho nàng một con Visual Studio Code cho tiện, thay vì các bạn sử dụng con hàng khác như Sublime Text, Dreamweaver...bla...bla...

Đây là một công cụ với Phít khá là toẹt cú mèo, code tại chỗ, chạy tại trận. Nàng chỉ việc code, còn lại Live Server lo cả 😂

Để chuẩn bị cho việc cưới nàng Phít phải chuẩn bị đồ cần thiết:

File index.html
File fbapp-config.json

Đây là đồ cần thiết, vì thế bạn đừng quên nó mỗi khi chuẩn bị rước em về dinh nhé 🤭

Tham khảo tại: https://developers.facebook.com/docs/games/instant-games/getting-started

index.html

Bạn thêm đoạn script sau:

<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>

fbapp-config.json

Tham khảo config tại: https://developers.facebook.com/docs/games/instant-games/sdk/bundle-config


{
  "instant_games": {
    "custom_update_templates": {
      "first_place": {
        "example": "Player X just became the first place in game Y!"
      }
    },
    "surfaceable_stats": {
      "rank": {
        "priority": 1,
        "order": 1,
        "label": {
          "localizations": {
            "en_US": "Rank",
            "th_TH": "\\u{0E22}\\u{0E28}"
          },
          "fallback": "Rank"
        },
        "values": {
          "0": "Unranked",
          "1": "Bronze",
          "2": "Silver",
          "3": "Gold"
        }
      }
    },
    "orientation": "PORTRAIT",
    "override_web_orientation": "LANDSCAPE",
    "navigation_menu_version": "NAV_FLOATING",
    "match_player_config": {
      "min_context_size": 2,
      "max_context_size": 20
    }
  }
}

Properties	Type
orientation	Định hướng của trò chơi, ở đây hỗ trợ bởi 'PORTRAIT' và 'LANDSCAPE'
override_web_orientation	Ghi đè định hướng của trò chơi trên website, ở đây hỗ trợ bởi PORTRAIT và LANDSCAPE
navigation_menu_version	Cho biết các phiên bản trên nền tảng được sử dụng. Ở đây hỗ trợ các phiên bản điều hướng 'NAV_FLOATING' và 'NAV_BAR' 'NAV_BAR'. Cố định điều hướng đầu game 'NAV_FLOATING' nó có thể mở rộng mà người chơi có thể di chuyển xung quanh khung chứa game
custom_update_templates	Cấu hình mẫu để cập nhật tùy chỉnh mà các trò chơi có thể gửi bằng cách sử dụng API FBInstant.updateAsync. Giá trị của "custom_update_templates" nên được một đối tượng, trong đó quan trọng là ID của mỗi mẫu, và giá trị là một đối tượng mà cấu hình mẫu. Các đối tượng có giá trị nên có các thuộc tính sau: 'exemple' - một ví dụ chuỗi của một bản cập nhật tùy chỉnh của mẫu này.
surfaceable_stats	Định cấu hình số liệu thống kê cho người chơi có thể được hiển thị. Giá trị của "Surfacizable_stats" phải là một đối tượng, trong đó khóa là ID của mỗi stat và giá trị là một đối tượng cấu hình stat để hiển thị. Đối tượng giá trị phải có các thuộc tính sau: 'priority' - một số nguyên biểu thị mức độ quan trọng của chỉ số được hiển thị so với các đối tượng khác, trong đó 1 là mức ưu tiên cao nhất. Nhiều số liệu thống kê có thể có cùng mức độ ưu tiên. 'order' - chỉ định vị trí sẽ được hiển thị trong danh sách so với các thống kê khác, trong đó giá trị 1 có nghĩa là nó sẽ đi trước. Các giá trị thứ tự của các số liệu thống kê phải là các số nguyên liên tiếp bắt đầu từ 1 không có trùng lặp. 'label' - một đối tượng có hai thuộc tính: 'localizations': một đối tượng trong đó mỗi khóa là một miền địa phương Facebook và mỗi giá trị là chuỗi để hiển thị dưới dạng tên của stat nếu người xem ở trong miền đó. 'fallback': chuỗi để hiển thị nếu không tìm thấy ngôn ngữ của người xem trong đối tượng bản địa hóa. 'value' - được sử dụng để hiển thị các giá trị stat dưới dạng các chuỗi như "Silver" hoặc "Deckswabber" thay vì số nguyên. Thuộc tính này phải là một đối tượng trong đó mỗi khóa là một chuỗi đại diện cho một số (ví dụ: "1") và mỗi giá trị sẽ hiển thị nếu chỉ số bằng với số đó (chẳng hạn như "Gold").
match_player_config	Định cấu hình các cài đặt khác nhau cho API matchPlayerAsync. Hiện tại, các cài đặt có thể định cấu hình duy nhất là kích thước ngữ cảnh tối thiểu và tối đa, mô tả mức độ lớn của một chuỗi Messenger mà người chơi có thể được khớp với khi sử dụng API matchPlayerAsync. Cấu hình phải cung cấp cả 'min_context_size' và 'max_context_size', hoặc các giá trị mặc định sẽ được sử dụng cho cả hai. 'min_context_size' - Số lượng người chơi tối thiểu được khớp với nhau. Phạm vi phải nằm trong khoảng từ 2 đến 50. Mặc định là 2. 'max_context_size' - Số lượng người chơi tối đa được khớp với nhau. Phạm vi nên nằm trong khoảng từ 2 đến 50. Mặc định là 20.

Tiến hành đưa em về dinh

Vì cưới nàng nhưng chưa có nơi để "rung rinh" nên Phít quyết định truy cập vào https://developers.facebook.com/ và "búc" ngay cho mình một khách sạn 5 sao có tên là RaidFIT

Sau khi đặt khách sạn 5 sao thành công, bây giờ Phít cần một số thủ tục để rước nàng

Để cưới được nàng Phít cần phải hoàn thành 2 căn hộ chưa hoàn thiện. 2 căn hộ này được đặt cùng một nơi, nó gọi là huyện www.facebook.com (Nếu bạn có URL Website của bạn, hãy thay thế nó)