Đơn đăng ký giữ điểm Petanque / Jeu-de-Boules: 7 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:31

Đây là một ứng dụng giữ điểm Petanque (đôi khi được gọi là Jeu de Boules) dành cho Android. Ứng dụng này có thể được sử dụng nguyên trạng và có đầy đủ chức năng. Hoặc nó có thể được sử dụng kết hợp với màn hình Ma trận Petanque [các bảng hướng dẫn riêng biệt]. Phần này của dự án rất dễ dàng vì không cần phần cứng, chỉ có phần mềm miễn phí.

Quân nhu

1. Điện thoại tương thích với Android (tốt nhất là)
2. Một thiết bị có quyền truy cập trình duyệt internet, tốt nhất là một máy tính có chuột để viết mã và thiết kế
3. Một tài khoản với MIT App Inventor (Miễn phí)
4. Một gói bản vẽ đơn giản, ví dụ: Pixlr hoặc Gimp (tất cả đều Miễn phí)
5. Một trang web tài nguyên biểu tượng, ví dụ: Các biểu tượng Material UI hoặc Material.io (tất cả đều Miễn phí)

Phần mềm và Mã nguồn:

Bạn có thể tìm thấy một liên kết đến ứng dụng Bi sắt Thực tế ở cuối trang này. Tại đây, bạn cũng có thể tìm thấy một liên kết đến mã nguồn đầy đủ (xin lỗi vì điều này, nhưng nội dung hướng dẫn không cho phép tôi tải lên tệp.aia…).

Bước 1: Giải phẫu và điều hướng của ứng dụng

Thiết kế và điều hướng của ứng dụng khá đơn giản. Tổng cộng có 4 màn hình:

1. Màn hình chính số 1 (nơi chúng tôi dành phần lớn thời gian để giữ điểm số)
2. Màn hình trận đấu số 2 (nơi chúng tôi tìm thấy danh sách tất cả các trận đấu đã chơi và điểm số)
3. Màn hình cài đặt # 3 (cài đặt cho ứng dụng, tác vụ quản trị, gỡ lỗi, v.v.)
4. Giới thiệu về màn hình # 0 (giới thiệu, biểu trưng và nơi nhận hướng dẫn xây dựng, tức là trang web NÀY)

Bố cục của màn hình và vị trí của các nút đã được tối ưu hóa cho việc sử dụng 1 tay và 1 ngón tay cái (ngón cái). Các nút trên menu điều hướng dưới cùng sẽ đưa bạn đến màn hình ở bên phải hoặc bên trái của màn hình hiện tại. Vì vậy, nút 0 đưa bạn đến màn hình Giới thiệu # 0. Và nút # 1 đưa bạn trở lại Màn hình chính # 1, v.v., usw.

Sạch? Than hãy tiếp tục…

Bước 2: Thiết kế Dữ liệu (cơ sở)

Bây giờ, trước khi tạo màn hình đầu tiên, chúng ta cần một số nơi để lưu trữ tất cả dữ liệu mà ứng dụng này sẽ sử dụng. Đối với điều này, chúng tôi sẽ sử dụng biểu mẫu đơn giản nhất mà Nhà phát minh ứng dụng MIT cung cấp: TinyDB. Điều này khá hạn chế vì nó chỉ có thể lưu trữ một cặp Khóa / Giá trị, nhưng với một chút trợ giúp và một số thủ thuật, chúng tôi có thể làm cho điều này thực hiện tất cả những điều chúng tôi muốn.

Có 2 loại giá trị mà chúng tôi sẽ lưu trữ:

• Chúng tôi sẽ lưu trữ 10 giá trị khóa / giá trị đơn giản trên toàn ứng dụng (như được hiển thị trong hàm 'CreateIgnoreList' ở trên).
• Và một khóa / giá trị phức tạp hơn lưu trữ tất cả dữ liệu trò chơi đã hoàn thành trong một chuỗi với khóa / giá trị 'CurrentMatch' hoạt động như Khóa chính * (như được hiển thị trong hàm 'SaveScore' ở trên). Các trường này trong một cặp khóa / giá trị này được phân tách bằng ký tự điều khiển không trực quan '\ t'. Ký tự điều khiển này sẽ cho phép chúng ta trong màn hình Matches # 2 để truy xuất tất cả các giá trị vào các thành phần riêng biệt của nó và hiển thị và sắp xếp chúng. Nhưng nhiều hơn về điều đó trong phần Màn hình 2 (các trận đấu).

* Thông tin thêm về cách tạo Khóa chính cho TinyDb trong AppInventor trên YouTube.

Bước 3: Màn hình 1 (Chính)

Đây là màn hình 'workhorse' của chúng tôi, nơi chúng tôi sẽ dành phần lớn thời gian với tư cách là người dùng ứng dụng. Đây cũng là điểm khởi đầu cho ứng dụng MIT App Inventor của chúng tôi.

Như bạn có thể thấy từ (hình # 1) ở trên, mặc dù màn hình trong thiết lập đơn giản nhưng có khá nhiều tương tác ẩn, xử lý lỗi, cuộn, chia đôi màn hình, menu nổi, cử chỉ vuốt, đề phòng lỗi, đầu vào sai và thậm chí khôi phục khỏi sự cố. Đối với tất cả các tính năng này, vui lòng xem mã nguồn chi tiết cho từng màn hình. Vì vậy, những gì bạn có thể làm ở đây:

• Nhấn 'Đội 1' và bạn sẽ nhận được Thông báo cho phép bạn thay đổi tên của 'Đội 1'. Sau khi thay đổi, điều này sẽ thay đổi 'Đội 1' này thành tên bạn đã chọn. Đây cũng là tên sẽ được sử dụng để phản ánh điểm số 'trận đấu' và 'trận đấu' của bạn (trong các màn hình tiếp theo).
• 'Điểm của Đội 1' và 'Điểm của Đội 2' thay đổi dựa trên các nút '+' và '-' được nhấn ở cuối mỗi đội tương ứng. Nếu điểm số là 0 và '-' được nhấn, một tín hiệu âm thanh và hình ảnh được cung cấp nhưng điểm số vẫn là 0 (tất nhiên).
• Nếu 'điểm số' đạt đến 13, một số điều sẽ xảy ra: tín hiệu hình ảnh được cung cấp, cửa sổ thông báo hiển thị kết quả (hình # 2) và cung cấp cho bạn tùy chọn bắt đầu một trò chơi mới hoặc một trận đấu mới (và tất nhiên trò chơi). Tuy nhiên, nếu bạn không chọn cách ghi bàn Bi sắt cổ điển mà chọn cách ghi 2 điểm (có thể được chọn trong màn hình cài đặt số 3) thì tùy thuộc vào hiệu số giữa hai đội, một người sẽ được tuyên bố là đội chiến thắng (như trong hình số 3).
• "Điểm số" trong "trận đấu" hiện tại được hiển thị ở giữa màn hình giữa điểm số của "Đội 1" và "Đội 2". Và điều này sẽ tiếp tục được lập bảng cho đến khi một 'trận đấu' mới được bắt đầu.
• Để điều hướng đến các màn hình khác, bạn cũng có thể 'vuốt sang trái' để hiển thị màn hình Giới thiệu # 0 hoặc 'vuốt sang phải' để hiển thị màn hình Phù hợp # 2.

Cuối cùng ở dưới cùng là thanh menu điều hướng. Điều này luôn được đặt ở vị trí tuyệt đối dưới cùng của màn hình, bất kể kích thước của màn hình là bao nhiêu. Ngay cả khi chức năng 'Chia đôi màn hình' của Android được sử dụng. Menu điều hướng dưới cùng có 3 nút:

1. Dưới cùng bên trái: dấu '?' sẽ chuyển sang trái và hiển thị lại màn hình Giới thiệu khởi động ban đầu (# 0).
2. Trung tâm dưới cùng: nút đặt lại (trông giống như dấu '@' với mũi tên) sẽ cho phép bạn bắt đầu một trò chơi mới hoặc một trận đấu mới bất kỳ lúc nào trong trò chơi chỉ cần nhấn vào nút "Đặt lại" ở giữa dưới cùng. Điều này cũng sẽ xuất hiện cửa sổ thông báo yêu cầu bạn bắt đầu một trò chơi mới hoặc một trận đấu mới.
3. Dưới cùng bên phải: Nút '->' sẽ ở bên phải và hiển thị tổng quan của tất cả màn hình Trận đấu (# 2).

Bước 4: Màn hình 2 (Trận đấu)

Mặc dù rất đơn giản trong trang điểm trực quan, màn hình này có mã bên trong nó thú vị hơn các màn hình khác. Nhưng trước khi chúng ta đi sâu vào điều đó, hãy xem những gì anh ấy sàng lọc làm:

Bên dưới nhãn 'Đội 1' và 'Đội 2' là danh sách tất cả các Trận đấu và tổng điểm tương ứng của chúng. Đây là danh sách được sắp xếp với 'trận đấu đã chơi gần đây nhất' ở trên cùng và 'trận đấu đã chơi lâu đời nhất' ở dưới cùng.

Ở giữa, giữa 'Đội 1' và 'Đội 2', là một nút có thể được sử dụng để sắp xếp danh sách Trận đấu theo thứ tự Tăng dần hoặc Giảm dần. Biểu tượng sẽ thay đổi tùy thuộc vào hướng sắp xếp được chọn.

Để điều hướng đến các màn hình khác, bạn cũng có thể 'vuốt sang trái' để hiển thị Màn hình chính # 1 hoặc 'vuốt sang phải' để hiển thị màn hình Cài đặt # 3.

Cuối cùng ở dưới cùng là thanh menu điều hướng. Điều này luôn được đặt ở vị trí tuyệt đối dưới cùng của màn hình, bất kể kích thước của màn hình là bao nhiêu. Ngay cả khi chức năng 'Chia đôi màn hình' của Android được sử dụng (như trong Hình # 2). Menu điều hướng dưới cùng có 3 nút:

1. Dưới cùng bên trái: dấu '?' sẽ chuyển sang trái và hiển thị lại màn hình Giới thiệu khởi động ban đầu (# 0).
2. Trung tâm dưới cùng: nút đặt lại (trông giống như dấu '@' với mũi tên) sẽ cho phép bạn bắt đầu một trò chơi mới hoặc một trận đấu mới bất kỳ lúc nào trong trò chơi chỉ cần nhấn vào nút "Đặt lại" ở giữa dưới cùng. Điều này cũng sẽ xuất hiện cửa sổ thông báo yêu cầu bạn bắt đầu một trò chơi mới hoặc một trận đấu mới.
3. Dưới cùng bên phải: Nút '->' sẽ ở bên phải và hiển thị tổng quan của tất cả màn hình Trận đấu (# 2).

Căn giữa danh sách các Trận đấu trên màn hình:

Tôi muốn hiển thị danh sách các Trận đấu được căn giữa trên màn hình với dấu phân cách '-' làm trung tâm. Bây giờ, vì số trò chơi mà một đội đã thắng có thể là 1 hoặc nhiều chữ số và tên thực của mỗi đội có thể có kích thước khác nhau, chúng tôi không thể chỉ đưa nó vào 1 danh sách. Tất cả sẽ trông giống như thế này:

Đội 1 0 - 1 Đội 2

Foo 1 - 42 FooBar

Vì vậy, nhãn cho dấu phân cách '-' cần phải được căn giữa. Với 'Tên đội 1' và 'Điểm đội 1' được căn phải ở bên trái của dải phân cách '-'. Và 'điểm Đội 2' và 'Tên Đội 2' căn trái ở bên phải của dải phân cách '-'. Vì vậy, chúng tôi kết thúc như thế này:

"Đội 1 0" "-" "1 Đội 2" "Foo 1" "-" "42 FooBar"

Và vì tôi không biết danh sách các Trận đấu của chúng ta sẽ kéo dài bao lâu, nên tôi đặt tất cả 'Tên Đội 1' và 'Điểm của Đội 1' vào cùng một Nhãn HTMLFormat và sau mỗi Trận đấu, tôi chèn một và đặt tên tiếp theo trên NewLine.

Chuẩn bị sẵn sàng mọi thứ để phân loại:

Như đã đề cập trong bước Thiết kế Dữ liệu (cơ sở), tôi chỉ có thể lưu trữ một giá trị duy nhất. Vì vậy, tôi đã lưu trữ các giá trị của 'Tên đội 1', 'Điểm đội 1', 'Điểm đội 2' và 'Tên đội 2' được phân tách bằng ký tự điều khiển không trực quan '\ t'. Bây giờ, trước tiên tôi cần đưa chúng ra khỏi cơ sở dữ liệu (như trong Hình # 3).

Đoạn mã cho thấy rằng trước tiên chúng ta kiểm tra xem cờ Gỡ lỗi đã được đặt chưa (điều này được thực hiện trong mọi màn hình của ứng dụng này. Tiếp theo, nó tạo danh sách các cặp Khóa (s / Giá trị) mà chúng ta cần bỏ qua khi xem qua cơ sở dữ liệu). Chúng tôi chỉ quan tâm đến dữ liệu 'Khớp', không có gì khác. Sau đó, chúng tôi lặp qua cơ sở dữ liệu, bỏ qua tất cả các Khóa trong danh sách Bỏ qua và tạo một danh sách mới với 2 giá trị:

1. PrimaryKey (hãy nhớ đây là một Số cho biết số Khớp, bắt đầu bằng Khớp số 1)
2. Một chuỗi chứa các giá trị cho 'Tên đội 1', 'điểm đội 1', 'điểm đội 2' và 'tên đội 2'

Sau đó, chúng tôi chuyển qua Danh sách và tạo Danh sách Danh sách mới trong đó các trường riêng lẻ được chia thành các mục riêng lẻ (như thể hiện trong Hình # 4):

DataToSort -> Danh sách chỉ mục 1 -> Danh sách chỉ mục 1 (số PK)

-> Liệt kê chỉ số 2 (Tên tổ 1) -> Liệt kê chỉ số 3 (Chỉ tiêu tổ 1) -> Liệt kê chỉ mục 4 (Chỉ tiêu tổ 2) -> Liệt kê chỉ mục 5 (Tên tổ 2) -> Liệt kê chỉ mục 2 -> Liệt kê chỉ mục 1 (Số PK) -> Liệt kê chỉ số 2 (Tên đội 1) ->… ->…

Sau đó, chúng tôi hiển thị một số thông tin gỡ lỗi nếu cờ Gỡ lỗi là Đúng. Và bây giờ cuối cùng chúng ta cũng có thể sắp xếp Danh sách (of Lists) của mình.

BubbleSort * một danh sách các danh sách:

Hình # 5 hiển thị danh sách đầy đủ cho BubbleSort * Danh sách Danh sách của chúng tôi. Thuật toán này tất nhiên có thể được sử dụng cho bất kỳ kích thước Danh sách Danh sách nào bất kể có bao nhiêu Chỉ mục.

* Thêm thông tin về cách thuật toán BubbleSort trên YouTube đơn giản như thế nào.

Bước 5: Màn hình 3 (Cài đặt)

Màn hình này trông rất bận rộn và có rất nhiều yếu tố thiết kế trực quan. Nhưng cuối cùng chỉ có 5 công tắc Chuyển đổi:

1. 'Tính điểm Fred': Nếu được chuyển sang 'Bật', nó sẽ thay đổi hành vi ghi điểm và quyết định người chiến thắng dựa trên cách biệt 2 điểm ở 13 chứ không chỉ là người đầu tiên đạt 13.
2. 'Ghép nối Bluetooth': (khi được bật) nếu được chuyển sang 'Bật' sẽ cho phép ghép nối với ứng dụng này với Màn hình Petanque bên ngoài.
3. 'Đặt lại các trận đấu': Nếu được chuyển sang 'Bật', nó sẽ Đặt lại / xóa tất cả các trận đấu và bắt đầu với Trận đấu 1.
4. 'Đặt lại DB': Nếu được chuyển sang 'Bật', nó sẽ Xóa / Đặt lại tất cả các Trận đấu và tất cả các cài đặt ứng dụng khác trở lại cài đặt ban đầu bao gồm tỷ số hiện tại, các trận đấu, tên đội, cài đặt gỡ lỗi, thứ tự sắp xếp, cài đặt luetooth (khi được bật), v.v..
5. 'Gỡ lỗi': Nếu được chuyển sang 'Bật', nó sẽ hiển thị thông tin Gỡ lỗi trong toàn bộ ứng dụng giữa dấu ngoặc vuông ''. Những thứ như 'Tổng số bản ghi, Tổng số biến, Số trận đấu hiện tại, Số PK của trò chơi, v.v.

Cuối cùng ở dưới cùng là thanh menu điều hướng. Điều này luôn được đặt ở vị trí tuyệt đối dưới cùng của màn hình, bất kể kích thước của màn hình là bao nhiêu. Ngay cả khi chức năng 'Chia đôi màn hình' của Android được sử dụng hoặc màn hình chỉ cao hơn màn hình có thể hiển thị do số lượng mục trên màn hình. Trong trường hợp này, bạn luôn có thể cuộn bằng cách vuốt Lên và Xuống. Menu điều hướng dưới cùng này chỉ có 1 nút:

Dưới cùng bên trái: nút '<-' sẽ ở bên trái và hiển thị ban đầu hiển thị tổng quan của tất cả các màn hình Trận đấu (# 2)

Bước 6: Màn hình 0 (Giới thiệu)

Màn hình cuối cùng. Chỉ cần thông tin, không có gì thêm.

Màn hình này được hiển thị ngay lần đầu tiên ứng dụng này được khởi động. Sau đó, nó sẽ không bao giờ được hiển thị nữa, trừ khi bạn chọn làm như vậy bằng cách nhấn vào '?' trên Màn hình chính # 1.

Thanh menu điều hướng phía dưới chỉ có 1 nút và thao tác này sẽ đưa bạn trở lại Màn hình chính # 1.

Bước 7: Phần mềm và / hoặc mã nguồn

Cuối cùng.

Bạn có thể tải xuống Ứng dụng từ vị trí Google Drive này.

Bạn có thể tải xuống mã từ mục nhập Thư viện nhà phát minh ứng dụng MIT cho Pentaque (hình # 1). Điều này sẽ cho phép bạn lưu dự án vào tài khoản MIT App Inventor của riêng bạn (bạn có thể đổi tên nó thành bất kỳ thứ gì bạn muốn). Từ đó, bạn có thể xem tất cả mã trong trình chỉnh sửa Khối, màn hình trong trình chỉnh sửa Designer và tất cả các phương tiện và tài nguyên được sử dụng cho dự án này.

Bạn cũng có thể tải xuống mã nguồn (tệp.aia, thực chất là tệp.zip) từ vị trí Google Drive này.