Trò chơi đố vui mang lại trải nghiệm hấp dẫn và mang tính giáo dục, nơi bạn có thể tìm hiểu các sự kiện mới và mở rộng kiến thức của mình về nhiều chủ đề khác nhau. Ngày nay, các ứng dụng web và di động đố vui Trivia là những lĩnh vực phổ biến nhất cho hoạt động như vậy. Chơi một trò chơi đố vui trên WhatsApp thì sao?
Trong hướng dẫn hướng dẫn này, bạn sẽ tìm hiểu cách tạo một ứng dụng đố vui bằng Twilio cho WhatsApp, ASP.NET Core và
Để tìm nạp những câu hỏi này, bạn sẽ sử dụng API Trivia, một API REST, giúp các nhà phát triển dễ dàng xây dựng ứng dụng bài kiểm tra bằng cách cung cấp các câu hỏi đố trắc nghiệm. Để tìm hiểu thêm về API Trivia, vui lòng truy cập__ Tài liệu API Trivia __.
Để hoàn thành hướng dẫn này, bạn sẽ cần:
Để bắt đầu, hãy sử dụng thiết bị đầu cuối shell của bạn trong thư mục làm việc ưa thích, hãy chạy các lệnh sau để tạo dự án API web mới:
dotnet new webapi -n TwilioWhatsAppTriviaApp --no-openapi
Lệnh thứ hai trong đoạn mã trên sẽ tạo một dự án API web mới với tên được chỉ định và không hỗ trợ OpenAPI (Swagger). Nếu bạn muốn sử dụng Swagger trong dự án, chỉ cần bỏ qua --no-openapi
trong lệnh trên.
Thay đổi thư mục dự án bằng cách chạy lệnh này:
cd TwilioWhatsAppTriviaApp
Cài đặt
dotnet add package Twilio.AspNet.Core
Thư viện này đơn giản hóa hoạt động với các webhook và API Twilio trong ứng dụng ASP.NET Core.
Mở dự án bằng IDE ưa thích của bạn. Trong thư mục Bộ điều khiển , hãy xóa tệp bộ điều khiển mẫu soạn sẵn, WeatherForecastController.cs , đồng thời xóa WeatherForcast.cs trong thư mục dự án.
Xây dựng và chạy dự án của bạn để đảm bảo mọi thứ bạn đã làm cho đến nay hoạt động tốt bằng cách sử dụng các lệnh sau:
dotnet build dotnet run
Sau khi chạy dự án thành công, hãy ghi lại bất kỳ URL localhost nào xuất hiện trong bảng điều khiển gỡ lỗi. Bạn có thể sử dụng bất kỳ URL nào trong số này để thiết lập máy chủ web cục bộ có thể truy cập công khai bằng ngrok.
Phiên là một trong nhiều cách lưu trữ dữ liệu của người dùng trong ứng dụng ASP.NET Core. Điều này rất cần thiết khi bạn muốn giữ lại dữ liệu người dùng giữa các yêu cầu vì theo mặc định, giao thức HTTP không có trạng thái - điều đó có nghĩa là dữ liệu không được bảo toàn.
Thêm nhà cung cấp phiên trong bộ nhớ bằng cách sửa đổi Program.cs , như minh họa trong đoạn mã sau:
var builder = WebApplication.CreateBuilder(args); builder.Services.AddControllers(); builder.Services.AddDistributedMemoryCache(); builder.Services.AddSession(options => { options.IdleTimeout = TimeSpan.FromSeconds(40); options.Cookie.IsEssential = true; }); var app = builder.Build(); app.UseSession(); app.MapControllers(); app.Run();
AddDistributedMemoryCache()
đăng ký dịch vụ bộ nhớ đệm được phân phối. Dịch vụ này cung cấp bộ đệm trong bộ nhớ có thể được sử dụng để lưu trữ và truy xuất dữ liệu qua nhiều yêu cầu hoặc phiên.
AddSession()
đăng ký dịch vụ phiên, cho phép ứng dụng duy trì trạng thái phiên. Tham số options
cho phép bạn định cấu hình các tùy chọn khác nhau liên quan đến phiên. IdleTimeout
được sử dụng để đặt khoảng thời gian không hoạt động, sau đó phiên sẽ được coi là không hoạt động. Trong trường hợp này, nó được đặt thành 40 giây. Cookie.IsEssential
đảm bảo rằng trạng thái của phiên vẫn hoạt động và ngay cả trong các trường hợp bật tính năng từ chối cookie.
Hỗ trợ phiên được kích hoạt bằng cách thêm phần mềm trung gian UseSession
vào đường dẫn ứng dụng, nghĩa là ứng dụng của bạn có quyền truy cập vào một đối tượng phiên có thể được sử dụng để lưu trữ và truy xuất dữ liệu.
Tạo một thư mục mới, Models trong thư mục dự án của bạn. Thêm hai tệp lớp mô hình, TriviaApiResponse.cs và Câu hỏi.cs với các thuộc tính như trong các mẫu mã sau:
using Newtonsoft.Json; namespace TwilioWhatsAppTriviaApp.Models; public class TriviaApiResponse { [JsonProperty("category")] public string Category { get; set; } [JsonProperty("correctAnswer")] public string CorrectAnswer { get; set; } [JsonProperty("incorrectAnswers")] public List<string> IncorrectAnswers { get; set; } [JsonProperty("question")] public string Question { get; set; } [JsonProperty("type")] public string? Type { get; set; } [JsonProperty("difficulty")] public string Difficulty { get; set; } }
namespace TwilioWhatsAppTriviaApp.Models; public class Question { public string QuestionText { get; set; } public List<(string option, bool isCorrect)> Options { get; set; } }
Mô hình TriviaApiResponse
bao gồm các thuộc tính đại diện cho các trường của phản hồi API Trivia. Thuộc tính JsonProperty
đảm bảo rằng mỗi thuộc tính được điền chính xác với dữ liệu JSON tương ứng.
Để có cách xử lý các câu hỏi đố một cách hợp lý, lớp Question
sẽ giải cứu bạn. Lớp này gói gọn các thông tin cần thiết cho một câu hỏi đố, bao gồm nội dung câu hỏi và danh sách các tùy chọn. Mỗi tùy chọn được biểu thị bằng một bộ chứa văn bản tùy chọn và giá trị boolean cho biết liệu đó có phải là tùy chọn chính xác hay không.
Tạo thư mục Dịch vụ trong thư mục dự án của bạn và thêm tệp lớp mới có tên TriviaService.cs . Sửa đổi nội dung của nó, như được hiển thị trong đoạn mã sau:
using Newtonsoft.Json; using TwilioWhatsAppTriviaApp.Models; namespace TwilioWhatsAppTriviaApp.Services; public class TriviaService { private const string TheTriviaApiUrl = @"https://the-trivia-api.com/api/questions?limit=3"; private HttpClient httpClient; public TriviaService(HttpClient httpClient) { this.httpClient = httpClient; } public async Task<IEnumerable<TriviaApiResponse>> GetTrivia() { var response = await httpClient.GetAsync(TheTriviaApiUrl); var triviaJson = await response.Content.ReadAsStringAsync(); var trivia = JsonConvert.DeserializeObject<IEnumerable<TriviaApiResponse>>(triviaJson); return trivia; } public List<Question> ConvertTriviaToQuestions(IEnumerable<TriviaApiResponse> questions) { List<Question> newQuestions = new(); foreach (var question in questions) { var options = new List<(string option, bool isCorrect)>() { (question.CorrectAnswer, true), (question.IncorrectAnswers[0], false), (question.IncorrectAnswers[1], false), (question.IncorrectAnswers[2], false) }; // Shuffle the options randomly Random random = new(); options = options.OrderBy(_ => random.Next()).ToList(); newQuestions.Add(new Question { QuestionText = question.Question, Options = options }); } return newQuestions; } }
Lớp TriviaService
chứa hai phương thức: GetTrivia
và ConvertTriviaToQuestions
. Phương thức GetTrivia
gửi yêu cầu HTTP GET tới API Trivia với tham số truy vấn, limit=3
, chỉ định rằng chỉ nên trả về 3 câu hỏi. Nếu không có tham số giới hạn, API sẽ trả về 10 câu hỏi theo mặc định.
Phương thức ConvertTriviaToQuestions
chuyển đổi phản hồi từ API thành một cách có tổ chức. Phương pháp này cũng xáo trộn ngẫu nhiên tất cả các tùy chọn câu hỏi, do đó một tùy chọn duy nhất sẽ không phải là câu trả lời cho tất cả các câu hỏi.
Để đăng ký TriviaService
và ứng dụng khách HTTP trong vùng chứa Dependency Insert (DI) của ứng dụng của bạn, hãy sửa đổi Program.cs như trong mã sau:
using TwilioWhatsAppTriviaApp.Services; var builder = WebApplication.CreateBuilder(args); builder.Services.AddControllers(); builder.Services.AddDistributedMemoryCache(); builder.Services.AddSession(options => { options.IdleTimeout = TimeSpan.FromSeconds(40); options.Cookie.IsEssential = true; }); builder.Services.AddHttpClient(); builder.Services.AddScoped<TriviaService>(); var app = builder.Build(); app.UseSession(); app.MapControllers(); app.Run();
Thêm một lớp trình điều khiển API trống trong tệp có tên TriviaController.cs vào thư mục Bộ điều khiển và sửa đổi nội dung của nó như trong mã sau:
using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using Twilio.AspNet.Core; using Twilio.TwiML; using Twilio.TwiML.Messaging; using TwilioWhatsAppTriviaApp.Models; using TwilioWhatsAppTriviaApp.Services; namespace WhatsappTrivia.Controllers; [Route("[controller]")] [ApiController] public class TriviaController : TwilioController { private const string SessionKeyIsGameOn = "IsGameOn"; private const string SessionKeyScore = "Score"; private const string SessionKeyCurrentQuestionIndex = "CurrentQuestionIndex"; private const string SessionKeyTotalQuestions = "TotalQuestions"; private const string SessionKeyQuestions = "Questions"; private static readonly string[] StartCommands = { "START", "S" }; private static readonly string[] OptionValues = { "A", "B", "C", "D" }; private readonly TriviaService triviaService; public TriviaController(TriviaService triviaService) { this.triviaService = triviaService; } [HttpPost] public async Task<IActionResult> Index() { var response = new MessagingResponse(); var form = await Request.ReadFormAsync(); var body = form["Body"].ToString().ToUpper().Trim(); await HttpContext.Session.LoadAsync(); var isGameOn = Convert.ToBoolean(HttpContext.Session.GetString(SessionKeyIsGameOn)); int currentQuestionIndex = HttpContext.Session.GetInt32(SessionKeyCurrentQuestionIndex) ?? 0; int totalQuestions = HttpContext.Session.GetInt32(SessionKeyTotalQuestions) ?? 0; if (StartCommands.Contains(body) && !isGameOn) { await StartGame(); HttpContext.Session.SetString(SessionKeyIsGameOn, "true"); response.Message(PresentQuestionWithOptions(currentQuestionIndex)); return TwiML(response); } if (OptionValues.Contains(body) && isGameOn) { var result = ProcessUserAnswer(body, currentQuestionIndex); response.Message(result); currentQuestionIndex++; if (currentQuestionIndex <= totalQuestions - 1) { HttpContext.Session.SetInt32(SessionKeyCurrentQuestionIndex, currentQuestionIndex); response.Append(new Message(PresentQuestionWithOptions(currentQuestionIndex))); } else { response.Append(new Message(EndTrivia())); } return TwiML(response); } response.Message(!isGameOn ? "*Hello! Send 'Start' or 'S' to play game*" : "*Invalid Input! Send a correct option 'A', 'B', 'C' or 'D'*"); return TwiML(response); } private async Task StartGame() { if (HttpContext.Session.GetString(SessionKeyQuestions) != null) { HttpContext.Session.Remove(SessionKeyQuestions); } var trivia = await this.triviaService.GetTrivia(); var questions = this.triviaService.ConvertTriviaToQuestions(trivia); AddNewQuestionsToSession(questions); HttpContext.Session.SetInt32(SessionKeyTotalQuestions, questions.Count); } private string ProcessUserAnswer(string userAnswer, int questionIndex) { bool optionIsCorrect = false; int score = HttpContext.Session.GetInt32(SessionKeyScore) ?? 0; var question = RetrieveQuestionFromSession(questionIndex); switch (userAnswer) { case "A": optionIsCorrect = question.Options[0].isCorrect; break; case "B": optionIsCorrect = question.Options[1].isCorrect; break; case "C": optionIsCorrect = question.Options[2].isCorrect; break; case "D": optionIsCorrect = question.Options[3].isCorrect; break; } if (optionIsCorrect) { score++; HttpContext.Session.SetInt32(SessionKeyScore, score); } return optionIsCorrect ? "_Correct ✅_" : $"_Incorrect ❌ Correct answer is {question.Options.Find(o => o.isCorrect).option.TrimEnd()}_"; } private string PresentQuestionWithOptions(int questionIndex) { var question = RetrieveQuestionFromSession(questionIndex); return $""" {questionIndex + 1}. {question.QuestionText} {OptionValues[0]}. {question.Options[0].option} {OptionValues[1]}. {question.Options[1].option} {OptionValues[2]}. {question.Options[2].option} {OptionValues[3]}. {question.Options[3].option} """; } private void AddNewQuestionsToSession(List<Question> questions) => HttpContext.Session.SetString(SessionKeyQuestions, JsonConvert.SerializeObject(questions)); private Question RetrieveQuestionFromSession(int questionIndex) { var questionsFromSession = HttpContext.Session.GetString(SessionKeyQuestions); return JsonConvert.DeserializeObject<List<Question>>(questionsFromSession)[questionIndex]; } private string EndTrivia() { var score = HttpContext.Session.GetInt32(SessionKeyScore) ?? 0; var totalQuestions = HttpContext.Session.GetInt32(SessionKeyTotalQuestions) ?? 0; var userResult = $""" Thanks for playing! 😊 You answered {score} out of {totalQuestions} questions correctly. To play again, send 'Start' or 'S' """; HttpContext.Session.Clear(); return userResult; } }
Lớp trình điều khiển này chịu trách nhiệm xử lý các tin nhắn đến, quản lý trạng thái phiên và tạo phản hồi. Nó kế thừa từ lớp TwilioController
do thư viện Twilio.AspNet.Core cung cấp, cho phép bạn truy cập vào phương thức TwiML
. Bạn có thể sử dụng phương pháp này để trả lời vớiTriviaController
sử dụng các phương thức HttpContext.Session
để tương tác với phiên.
Đầu vào hợp lệ là các phần tử trong mảng chỉ đọc StartCommands
và OptionValues
. Nội dung của tin nhắn đến được so sánh với các thành phần này để đảm bảo rằng người dùng đã gửi thông tin đầu vào phù hợp, nếu không, một thông báo sẽ được gửi đến người dùng để nhắc họ thực hiện thông tin đầu vào phù hợp dựa trên trạng thái hiện tại của trò chơi. Các trường khác có tiền tố “SessionKey” được sử dụng để xác định các chuỗi hằng số riêng tư cho các khóa phiên trong chương trình.
Phương thức Index
là phương thức hành động chính xử lý các yêu cầu HTTP POST đến từ WhatsApp thông qua tuyến /Trivia . Nó tải dữ liệu phiên bằng cách sử dụng HttpContext.Session.LoadAsync()
và truy xuất dữ liệu liên quan đến trạng thái trò chơi từ phiên bằng cách sử dụng các phương thức HttpContext.Session.GetString()
và HttpContext.Session.GetInt32()
.
Việc sử dụng dấu gạch dưới (_) và dấu hoa thị (*) ở đầu và cuối của một số chuỗi nhất định là để đạt được định dạng văn bản in nghiêng và in đậm tương ứng trong tin nhắn WhatsApp được hiển thị.
Mỗi phương thức trợ giúp trong TriviaController
thực hiện một nhiệm vụ cụ thể hỗ trợ chức năng chính của lớp.
StartGame
khởi tạo trò chơi bằng cách truy xuất các câu hỏi đố, chuyển đổi chúng thành định dạng phù hợp với trò chơi và lưu trữ chúng trong phiên.ProcessUserAnswer
xử lý câu trả lời của người dùng cho một câu hỏi và xác định xem nó có đúng hay không.PresentQuestionWithOptions
chịu trách nhiệm định dạng và trình bày câu hỏi cùng với các tùy chọn của nó.AddNewQuestionsToSession
lưu trữ danh sách các câu hỏi trong phiên. Nó chuyển đổi các câu hỏi sang định dạng JSON và lưu chuỗi JSON trong phiên.RetrieveQuestionFromSession
truy xuất câu hỏi từ phiên bằng cách sử dụng chỉ mục câu hỏi.EndTrivia
tạo ra một thông báo để kết thúc trò chơi đố vui. Phương pháp này cũng loại bỏ dữ liệu phiên liên quan đến trò chơi. Dựa trên cấu hình của dịch vụ phiên trong Program.cs , điều này tự động xảy ra khi phiên không hoạt động trong 40 giây.
Để kiểm tra ứng dụng, bạn cần thiết lập Twilio Sandbox cho WhatsApp, làm cho điểm cuối ứng dụng của bạn có thể truy cập công khai và thêm URL điểm cuối trong cấu hình Sandbox dưới dạng webhook.
đi đến
Làm theo hướng dẫn trên trang để kết nối với hộp cát bằng cách gửi tin nhắn WhatsApp từ thiết bị của bạn đến số Twilio được cung cấp để tạo kết nối thành công với hộp cát WhatsApp. Tương tự, những cá nhân khác muốn thử nghiệm ứng dụng của bạn bằng số tương ứng của họ sẽ cần phải làm theo quy trình tương tự.
Bây giờ, hãy mở shell terminal và chạy lệnh sau để khởi động ngrok và hiển thị ứng dụng ASP.NET Core cục bộ của bạn bằng cách thay thế <localhost-url>
bằng URL đầy đủ của localhost mà bạn đã sao chép ban đầu:
ngrok http <localhost-url>
ngrok sẽ tạo một URL công khai chuyển tiếp yêu cầu tới ứng dụng ASP.NET cục bộ của bạn. Tìm URL chuyển tiếp có nhãn Chuyển tiếp trong cửa sổ terminal ngrok và sao chép nó.
Quay lại trang Twilio Dùng thử WhatsApp, nhấp vào Cài đặt hộp cát và thay đổi url Khi tin nhắn đến ở điểm cuối với URL chuyển tiếp được tạo bởi ngrok cộng với tuyến /Trivia và đảm bảo phương thức được đặt thành POST. Sau đó nhấn Save để lưu cấu hình sandbox mới.
Chạy dự án ASP.NET Core của bạn bằng lệnh sau:
dotnet run
Bây giờ, hãy kiểm tra ứng dụng của bạn bằng cách gửi tin nhắn trong cuộc trò chuyện đầu tiên bằng số Twilio Sandbox.
Bằng cách tận dụng sức mạnh của nền tảng Twilio và WhatsApp, bạn đã tạo ra trải nghiệm trò chơi đố vui hấp dẫn để người dùng thưởng thức. Bạn cũng đã học cách lưu và truy xuất dữ liệu từ các phiên.
Có một số cách mà dự án này có thể được cải thiện. Bạn có thể cải thiện hơn nữa dự án này bằng cách thêm bộ đếm thời gian, xử lý các ngoại lệ, cho phép người dùng chọn độ khó và áp dụng độ khó đã chọn làm tham số truy vấn thông qua URL API Trivia (ví dụ: