CHÀO! Hôm nay tôi muốn giới thiệu với các bạn thành quả của nhiều tháng làm việc vào ban đêm và cuối tuần của tôi, được thiết kế để cải thiện trải nghiệm quản lý nội dung và mang lại các tính năng bổ sung cho thế giới phát triển ứng dụng Flutter - một loại CMS mới.

Chúng ta đang nói về Nanc - N ot A N normal C MS. Tại sao nó "không bình thường" và bạn có thể làm gì với nó, bạn sẽ tìm ra sau khi đọc bài viết này.

Bài viết sẽ không chỉ có lý thuyết mà còn có cả "thực hành" - bạn sẽ có thể chơi trong hộp cát Nanc. Để cho công chúng thấy khả năng của Nanc, hai ứng dụng demo đã được tạo ra: một ứng dụng khách bắt chước bất kỳ ứng dụng Flutter nào và một ứng dụng khác đưa ra ý tưởng về những gì ứng dụng Nanc dựa trên Flutter có thể làm - Nanc CMS dựng sẵn. Và ứng dụng Nanc CMS, là một CMS được cấu hình sẵn với một lớp logic bổ sung được triển khai để đồng bộ hóa ứng dụng khách với CMS.

Ở phần cuối của hầu hết các khối logic trong văn bản, bạn sẽ tìm thấy một video youtube có ví dụ về cách sử dụng/thể hiện một số khía cạnh của Nanc.

Mục lục

1. giới thiệu
2. Giới thiệu về CMS
   1. Các loại mô hình
      1. Bộ sưu tập
      2. Đấu
   2. biên tập viên
      1. Mô tả chung
      2. mã đầu tiên
      3. Giao diện đầu tiên
      4. chế độ kết hợp
   3. Lĩnh vực
      1. bool
      2. Màu sắc
      3. Ngày
      4. Năng động
      5. liệt kê
      6. tiêu đề
      7. Biểu tượng
      8. Nhận dạng
      9. đa bộ chọn
      10. Con số
      11. Bộ chọn
      12. Sợi dây
      13. Kết cấu
      14. Màn hình
3. Ứng dụng Flutter động
   1. tài liệu tương tác
   2. khả năng mở rộng
   3. Sự đơn giản
   4. Sức mạnh
   5. Sự tiện lợi
   6. Hiệu suất
4. Ứng dụng demo Nanc
   1. Tổng quan
   2. Khách hàng
   3. Quản trị viên
   4. Quản lý kết nối
5. Điều gì tiếp theo / Lời bạt

Giới thiệu về Nanc CMS

Vì thế. Nanc là một CMS không phụ thuộc vào phần phụ trợ, không sử dụng phần phụ trợ của chính nó. Làm thế nào nó hoạt động? Nanc đề nghị triển khai các giao diện dịch vụ mạng, hiện có 6 phương thức nhưng sẽ có khoảng 10 phương thức vào thời điểm phát hành. Đây là nhiều hay ít? Ví dụ: phải mất 170 dòng mã để triển khai API cho ứng dụng demo. Những phương pháp này chịu trách nhiệm cho tất cả công việc của Nanc với chương trình phụ trợ hiện tại của bạn. Việc triển khai phải được viết bằng Dart (ngôn ngữ phát triển cho Flutter). Trong tương lai, Nanc sẽ sẵn sàng triển khai các giao diện này cho một số tùy chọn phụ trợ nhất định - Firebase, Supabase, SQLite cục bộ/mạng và triển khai Chung của REST và GraphQL (có thể là cái gì khác?) và bạn sẽ không phải suy nghĩ về việc triển khai này tại tất cả hoặc sẽ phải, nhưng chỉ một chút thôi.

Các loại mô hình

Một mô hình trong Nanc là một mô tả cấu trúc của một thực thể mà bạn muốn kiểm soát bằng Nanc. Một mô hình chứa tên thực thể, các thông số trực quan khác nhau và mô tả về các trường.

Bộ sưu tập

Một bộ sưu tập là một thực thể có thể có nhiều thể hiện. Danh sách người dùng, sách và đánh giá là những ví dụ điển hình về mô hình kiểu Bộ sưu tập trong Nanc.

Nếu bạn đã quen thuộc với cơ sở dữ liệu quan hệ, một ví dụ về Bộ sưu tập trong Nanc sẽ là hầu hết mọi bảng trong cơ sở dữ liệu của bạn.

Đấu

Một solo (mô hình) là một thực thể tồn tại trong một trường hợp duy nhất. Ví dụ - Chuyển đổi tính năng hoặc cấu hình của thứ gì đó hoặc... "Màn hình chính của ứng dụng di động". Nói chung, các mô hình Solo được thiết kế để tăng khả năng sử dụng, chỉ là một phép chiếu cơ sở dữ liệu của bạn. Và một mô hình Solo có thể dễ dàng trở thành bất kỳ bảng nào trong cơ sở dữ liệu của bạn chỉ với một bản ghi. Nhưng hiện tại, việc triển khai lớp mô hình này yêu cầu bản ghi của mô hình này (hàng trong cơ sở dữ liệu) có id bằng với id của chính mô hình đó.

 final Model landingPage = Model( name: 'Landing page', /// ? id in format [toSnakeCase(name)] will be set automatically, if omitted // id: 'landing_page', isCollection: false, icon: IconPackNames.flu_document_page_break_regular, fields: [ ...

biên tập viên

Mô tả chung

Có thể cấu hình Nanc theo nhiều cách: bằng mã, thông qua chính giao diện Nanc và kết hợp các tùy chọn này.

Cấu hình mã đầu tiên

Khi tôi nói "cấu hình", trước hết, ý tôi là mô tả cấu trúc của các mô hình của bạn. Hãy lấy một ví dụ đơn giản, mô hình Tính năng, là một thực thể mô tả các tính năng của sản phẩm. Thực thể này chứa các trường sau:

• nhận dạng
• tiêu đề
• hình ảnh
• Sự miêu tả

Và việc triển khai dưới dạng cấu hình mã đầu tiên sẽ như sau:

 import 'package:fields/fields.dart'; import 'package:icons/icons.dart'; import 'package:model/model.dart'; final Model feature = Model( name: 'Feature', icon: IconPackNames.flu_ribbon_star_filled, fields: [ [ IdField(width: 200), StringField(name: 'Title', maxLines: 1, isRequired: true, width: 400), ], [ IconField(name: 'Image', isRequired: true), ], [ StringField(name: 'Description', isRequired: true, showInList: true), ], ], );

Bằng cách mô tả một mô hình như vậy và sử dụng nó trong Nanc CMS, tất cả các hoạt động CRUD của mô hình đó sẽ có sẵn cho bạn.

Cấu hình giao diện đầu tiên

Chúng ta có thể tạo chính xác mô hình Tính năng (hãy gọi nó là Biến thể tính năng) thông qua giao diện Nanc. Và (xét rằng tất cả các công việc chuẩn bị để sử dụng Nanc đã được thực hiện) - khi bạn tạo một mô hình trong Nanc, bạn sẽ ngay lập tức tạo một bảng trong cơ sở dữ liệu và toàn bộ CRUD cũng sẽ có sẵn cho bạn ngay lập tức.

Ngoài ra, bạn có thể chọn cách an toàn hơn là không tạo bất kỳ thứ gì trong cơ sở dữ liệu khi tạo mô hình thông qua giao diện Nanc. Và tạo một bảng trong cơ sở dữ liệu của bạn một cách độc lập, sau đó, bên dưới nó, tạo một mô hình trong Nanc. Nhân tiện, đây là những gì bạn phải làm nếu bạn mô tả cấu hình bằng mã - các bảng mới sẽ không xuất hiện trong cơ sở dữ liệu của bạn từ nó.

cấu hình lai

Tùy chọn này sẽ khả dụng với bạn khi bạn có cấu hình Code-first và quyết định thay đổi nó thông qua giao diện Nanc. Trong trường hợp này, tất cả các thay đổi tiếp theo đối với mô hình này sẽ chỉ có thể thực hiện được thông qua giao diện và các thay đổi được thực hiện đối với mô hình mã ban đầu sẽ bị bỏ qua. Cách duy nhất để quay lại Code-first là "đặt lại" mô hình, trong trường hợp đó, tất cả các thay đổi đối với cấu trúc mô hình được thực hiện thông qua giao diện sẽ bị xóa và cấu hình Code-first sẽ được sử dụng lại. Không có dữ liệu nào bị ảnh hưởng bởi thiết lập lại này. Nó chỉ ảnh hưởng đến cấu trúc mô hình.

Lĩnh vực

Bây giờ, hãy xem những loại trường mà Nanc hiện đang hỗ trợ.

Boolean

BoolField cho phép bạn kiểm soát kiểu dữ liệu bool và tùy chỉnh giá trị mặc định.

Màu sắc

ColorField cung cấp cho bạn một công cụ chọn màu tiện dụng cho phép bạn chọn một màu ngay lập tức trong Nanc. Nó cũng cung cấp cho bạn khả năng thực hiện các thay đổi theo cách thủ công bằng cách chỉnh sửa mã AHEX. AHEX là Màu HEX cổ điển (ví dụ: #10A0CF ), nhưng với giá trị độ trong suốt bổ sung được chỉ định trước. Trong trường hợp này, màu này sẽ giống với màu #FF10A0CF ( FF là độ mờ 100% - màu hoàn toàn mờ). Và đây là màu tương tự sẽ trông như thế nào với độ mờ 50%: #7F10A0CF .

Ngày

DateField chịu trách nhiệm kiểm soát ngày và giờ (cả hai giá trị cùng một lúc, các giá trị riêng biệt cho ngày và giờ sẽ được triển khai sau). DateField chứa hai tham số boolean cho phép bạn sửa đổi hành vi của trường này bằng cách biến nó thành dấu thời gian tạo thực thể và dấu thời gian thay đổi.

Năng động

DynamicField, một mặt, là một trường rất đơn giản, nhưng mặt khác, nó bao gồm toàn bộ sự phức tạp của các trường khác. Ban đầu, bạn chỉ có thể định cấu hình giao diện của trường này (nó sẽ trông như thế nào trong giao diện Nanc - màu sắc và biểu tượng đi kèm). Sau đó, trường này có thể chứa bất kỳ giá trị nào có sẵn trong Nanc, kể cả chính nó. Điều đó có nghĩa là gì? Về cơ bản, DynamicField là một JSON đã nhập với khả năng định vị các trường theo thứ tự bên trong chính nó.

liệt kê

EnumField là một trường để chọn một giá trị từ nhiều giá trị. Quy tắc cần tuân theo khi chọn một EnumField là nếu bạn có một danh sách giá trị cuối cùng để chọn mà không được lưu trữ trong một bảng cơ sở dữ liệu riêng biệt, hãy chọn Enum. Nếu không, hãy chọn SelectorField, sẽ được thảo luận chi tiết hơn bên dưới. TODO: Hiện tại, trường này chỉ có thể được định cấu hình qua CodeConfig, cấu hình qua giao diện chưa được thực hiện.

tiêu đề

HeaderField không thực sự là một trường, mà là một công cụ nâng cao hình ảnh cho mô hình của bạn trong Nanc. Bạn có thể sử dụng trường không phải này để đặt tiêu đề chung cho một nhóm các trường có liên quan hoặc để phân biệt các trường mô hình với nhau bằng cách sử dụng HeaderField làm dấu phân cách.

Biểu tượng

IconField cung cấp cho bạn khả năng chọn một biểu tượng (lớp IconData ) từ một bộ biểu tượng được xác định trước. Hiện tại có khoảng 25.000 trong số chúng và bộ này bao gồm các biểu tượng sau:

Nếu cần, các biểu tượng khác có thể được thêm vào bộ phân phối cơ bản và trong tương lai không xa sẽ có tùy chọn sử dụng các biểu tượng của riêng bạn.

Người ta có thể thắc mắc, "Có biểu tượng, màu sắc có, nhưng phông chữ?" Nếu có, bạn có thể tìm thấy câu trả lời trong tài liệu dành cho tiện ích Văn bản . Câu trả lời ngắn gọn là tất cả các phông chữ từ đều có sẵn cho bạn.

Nhận dạng

IdField là một trường đơn giản nhưng rất quan trọng. Mọi mô hình do Nanc quản lý phải có ít nhất một trường loại Id. Hiện tại, chỉ loại ID chuỗi được hỗ trợ (có thể là bất kỳ chuỗi duy nhất nào trong một thực thể). Có kế hoạch thêm hỗ trợ cho loại số, tuy nhiên, có thể được triển khai ngay cả bây giờ chỉ bằng cách truyền dữ liệu trường sang loại số trong triển khai API.

đa bộ chọn

MultiSelectorField là một trường khá phức tạp chịu trách nhiệm triển khai mối quan hệ nhiều-nhiều hoặc nhiều-một. Có ba chế độ sử dụng trường này. Hãy đi qua từng người trong số họ một cách chi tiết hơn. TODO: Hiện tại, trường này chỉ có thể được định cấu hình thông qua CodeConfig, cấu hình thông qua giao diện chưa được thực hiện.

Mảng id

Chế độ này cung cấp cho bạn khả năng lưu trữ trực tiếp id của các thực thể có liên quan trong thực thể mẹ. Ví dụ: chúng tôi có hai mô hình - Reader và Book. Trong chế độ này, sách do người đọc lấy sẽ được tính là id được lưu trữ trong trường Mô hình người đọc. Ví dụ như thế này:

 /// user table { id: 'UUID', name: 'String', books: [ 'UUID', 'UUID' // ... ] }

Trên đây là cấu trúc bảng ví dụ được biểu thị bằng cú pháp JSON5.

Nhược điểm của chế độ này là tính toàn vẹn dữ liệu bị hạn chế. Nếu bạn không triển khai tự động xóa ID sách lỗi thời (đã xóa) khỏi trường Trình đọc books , bạn sẽ gặp lỗi.

bàn thứ ba

Chế độ cổ điển cung cấp các mối quan hệ từ thế giới SQL. Khi sử dụng chế độ này, bạn lưu trữ các mối quan hệ của thực thể trong một bảng riêng biệt và đảm bảo tính toàn vẹn của dữ liệu 100%. Cấu trúc sau đây là một ví dụ về chế độ này:

 [ /// user table { id: 'UUID', name: 'String' }, /// book table { id: 'UUID', title: 'String' }, /// user_books_relations table { user_id: 'UUID', book_id: 'UUID' } ]

Vào giây thứ 7, bạn có thể thấy một sự giật nhẹ và nếu nhìn kỹ, bạn có thể nhận thấy rằng url của trang đã thay đổi - đây là cách tôi đã cố gắng che giấu lỗi: ở chế độ bảng thứ ba, dữ liệu chỉ được lưu trong trang mẹ nếu nó đã được lưu 🤷🏼

Mảng đối tượng

Nói chung tương tự như Mảng id, ngoại trừ bản ghi mẹ không lưu trữ số nhận dạng mà lưu trữ toàn bộ đối tượng (dưới dạng cấu trúc phẳng, không có thực thể liên kết có thể có của bản ghi lồng nhau). Nó có nhược điểm giống như Mảng id, nhưng có thêm một nhược điểm - tăng khả năng sử dụng bộ nhớ. Tuy nhiên, có (ít nhất là vào lúc này) một lĩnh vực ứng dụng của chế độ này và nó rất quan trọng. Nhưng chúng ta sẽ nói về điều này một chút sau.

Tôi đang đi trước trong video, hiển thị ScreenField, chúng ta sẽ quay lại vấn đề này

Nói chung, có một ý tưởng để biến các chế độ "không chính tắc" thành ảo - để bằng cách nào đó chúng hoạt động thông qua Bảng thứ ba và dữ liệu cần thiết được tải khi chỉnh sửa trang (nếu cần).

Con số

NumberField lưu trữ số - đơn giản như vậy.

Bộ chọn

SelectorField tương tự như MultiSelectorField (như bạn có thể đoán từ tên của chúng), nhưng đơn giản hơn một chút - mối quan hệ ở đây là một-một hoặc một-nhiều và có hai chế độ. TODO: Hiện tại, trường này chỉ có thể được định cấu hình qua CodeConfig, cấu hình qua giao diện chưa được thực hiện.

Nhận dạng

Một dạng cung cấp liên kết SQL phổ biến, trong đó trường bản ghi gốc lưu trữ ID của bản ghi được liên kết. Hãy lấy Reader làm ví dụ. Đó là ai? Trước hết đó là một con người, và một con người có gì? Đúng rồi! Thành phố nơi sinh (mà Thư viện của chúng tôi, vì một số lý do, cũng muốn biết).

 /// user table { id: 'UUID', name: 'String', birth_place_id: 'UUID' }

Sự vật

Rất giống với Mảng đối tượng từ MultiSelectorField, nhưng chúng tôi sẽ lưu trữ một giá trị được liên kết duy nhất trong trường của bản ghi cha. Nhược điểm là như nhau, ưu điểm cũng sẽ được mô tả một chút bên dưới.

Sợi dây

StringField lưu trữ chuỗi. Trường này có một cài đặt cá nhân chịu trách nhiệm về sự tiện lợi khi chỉnh sửa trong Nanc - tham số giới hạn chiều cao tối đa của trường có thể chỉnh sửa. Nếu văn bản của bạn lớn - hoàn toàn không nên chỉ định nó, thì trường sẽ điều chỉnh theo chiều cao của văn bản. Nếu giới hạn ở mức lớn - bạn có thể chỉ định chiều cao trường rõ ràng (theo dòng) và sau đó nó sẽ luôn như vậy. Và cuối cùng, đối với các chuỗi ngắn, bạn có thể đặt nó thành một dòng, và sau đó trường sẽ không mở rộng cho dù sau đó bạn viết bao nhiêu vào nó.

Kết cấu

StructureField cho phép bạn lưu trữ một mảng các cấu trúc đã nhập trong các bản ghi mô hình. Bạn chỉ định loại dữ liệu sẽ được lưu trữ và có thể quản lý nó một cách dễ dàng và đơn giản. Các loại có sẵn cho các trường cấu trúc hoàn toàn là mọi thứ. Vì vậy, bạn có thể dễ dàng tạo "Lặp lại trường cấu trúc động". VIỆC CẦN LÀM: Chỉ có thể thêm các trường "phẳng" vào StructureField trong bản trình diễn.

Màn hình

ScreenField là một trường cho phép bạn viết toàn bộ ứng dụng trong Flutter, ngay trong Nanc! Với ScreenField, bạn có thể mô tả giao diện của một...màn hình duy nhất, cập nhật nó theo bất kỳ cách nào bạn muốn và thực hiện bất kỳ lúc nào trong vài phút - mà không phải chờ đợi đánh giá từ Apple và Google một cách tẻ nhạt và căng thẳng.

Hãy chia nhỏ loại trường này (và thực tế là một nhánh chức năng hoàn toàn riêng biệt của Nanc) chi tiết hơn một chút.

Ứng dụng Flutter động

Với ScreenField, bạn thực sự có thể tạo một giao diện có độ phức tạp gần như bất kỳ ngay trong trình duyệt của mình (và IDE của bạn), sau đó - mà không cần tạo một ấn phẩm chứng khoán - cập nhật màn hình tương ứng trong ứng dụng của bạn. Nếu bạn cần kiểm tra các giả thuyết một cách nhanh chóng thì đây là một tính năng tuyệt vời. Chức năng này rất tốt cho các trang tương đối đơn giản (về mặt logic) trong ứng dụng của bạn, tuy nhiên, cần phải thay đổi khá thường xuyên. Trong tương lai, chức năng này sẽ được mở rộng đến mức bạn thực sự có thể tạo bất cứ thứ gì mình muốn mà không có bất kỳ hạn chế nào. Bây giờ, hãy xem qua tất cả các khía cạnh của việc tạo màn hình động với Nanc.

tài liệu tương tác

Có rất nhiều widget trong Flutter. Rất nhiều trong số họ. Widget là gì? Đó là một khối chức năng mà từ đó bạn lắp ráp ứng dụng của mình. Nó có thể chỉ ở dạng trực quan hoặc có thể ở dạng logic - với một số hành vi bên trong. Nanc cung cấp một danh sách đầy đủ các tiện ích được triển khai mà bạn có thể sử dụng để xây dựng giao diện người dùng của mình. Nhưng càng nhiều khả năng - càng khó tìm hiểu về chúng... Vì vậy, trình chỉnh sửa màn hình trong Nanc cho phép bạn truy cập vào tài liệu tương tác nơi bạn có thể tìm hiểu những tiện ích con nào hiện đang được triển khai, chúng có những tham số và thuộc tính có thể định cấu hình nào, và, ngay trong tài liệu hướng dẫn, hãy xem chúng ảnh hưởng như thế nào đến diện mạo của giao diện bạn tạo.

Sự đơn giản

Nanc cho phép bạn tạo giao diện trong thời gian thực, nhưng quan trọng nhất - nó cho phép bạn thực hiện điều đó rất dễ dàng và nhanh chóng (mất hơn 2 giờ để tạo giao diện cho một ứng dụng demo). Nhưng câu hỏi đặt ra - làm thế nào để tự tạo giao diện người dùng? Không có cú pháp kỳ lạ nào để mô tả giao diện người dùng trong Nanc, cũng như các giải pháp "quá" đơn giản, như JSON dài, sẽ khiến bạn ghét việc tạo giao diện trong Nanc.

Kết quả của việc tìm ra giải pháp tốt nhất là cú pháp XML đơn giản và dễ hiểu. Tất cả các tiện ích Flutter tiêu chuẩn đều có tên giống hệt nhau, nhưng ở dạng XML. Ví dụ: tiện ích SizedBox trong Nanc sẽ là <sizedBox>...</sizedBox> và quy tắc này áp dụng cho tất cả các tiện ích mà không có ngoại lệ. Nếu tiện ích con có một số thuộc tính phức tạp, nó sẽ có cùng tên (hoặc đơn giản hơn) với tên XML, với tiền tố prop . Ví dụ: widget Container có thuộc tính phức tạp boxDecoration , thuộc tính này có thuộc tính bên trong của riêng nó. Vì vậy, thuộc tính này ở Nanc sẽ có giao diện như sau: <prop:decoration>...</prop:decoration> . Quy tắc này áp dụng cho tất cả các tài sản phức tạp. Và khía cạnh cuối cùng là các đối số tương đối đơn giản là các tham số thẻ XML. Hãy lấy SizedBox tương tự làm ví dụ:

 <sizedBox width="50" height="50"> ... </sizedBox>

Đối với một số tiện ích, các đối số bổ sung được triển khai để đơn giản hóa việc viết mã và đối với SizedBox , đối số ize sẽ đặt cả width và height .

Mọi thứ được viết ở đây đều nằm trong tài liệu trực tuyến, vì vậy nếu bạn quên điều gì đó hoặc muốn biết điều gì đó, hãy tham khảo nó và tìm câu trả lời cho tất cả các câu hỏi của bạn ở đó.

khả năng mở rộng

Triển khai hỗ trợ cho tiện ích con mới - chỉ mất từ 10 phút đến vài giờ. Tại thời điểm này, gần như tất cả các tiện ích cơ bản đã được triển khai, trong đó bạn có thể tạo một giao diện logic phức tạp. Theo thời gian, tất cả các tiện ích có sẵn trong Flutter sẽ được triển khai trong Nanc và bạn thực sự có thể làm mọi thứ. Nhưng đó không phải là tất cả. Bạn có thể dễ dàng và đơn giản triển khai các tiện ích của riêng mình và sử dụng chúng trong Nanc với một hoặc hai dòng mã XML. Ví dụ: không có tiện ích nào trong thư viện Flutter tiêu chuẩn cho phép bạn dễ dàng hiển thị Thanh trượt băng chuyền bằng hình ảnh. Bạn sẽ phải tự mình viết một triển khai hoặc sử dụng một số giải pháp mã nguồn mở như . Và, sau khi triển khai những gì bạn cần - bạn có thể rất dễ dàng tích hợp tiện ích con của mình vào Nanc và sử dụng nó.

Sức mạnh

Nanc không chỉ cung cấp khả năng chuyển đổi mã XML thành giao diện trong Flutter. Nanc cung cấp khả năng viết khuôn mẫu và logic. Kết xuất phần tử có điều kiện, vẽ vòng lặp, xử lý chạm - điều này đã có trong phiên bản 0.0.1 hiện tại của Nanc.

Cho đến nay, phần logic khá đơn giản - nó hỗ trợ tương tác thông qua các lần nhấn và xử lý sự kiện trong mã `.dart' được viết trước của bạn - nhưng dần dần phần này của Nanc sẽ mở rộng đáng kể, cho phép bạn viết logic trong Dart ngay trong trình duyệt và để nó hoạt động trong ứng dụng của bạn.

Cách tiếp cận để xử lý lần nhấp của người dùng như sau - bạn có thể xác định danh sách "hành động" mà người dùng có thể thực hiện trong ứng dụng của mình. Ví dụ: mở màn hình ứng dụng nội bộ, nhấp vào liên kết bên ngoài, hiển thị SnackBar, cửa sổ phương thức bật lên và nhiều thứ khác, đồng thời tạo trước trình xử lý cho các hành động đó. Và sau đó sử dụng hành động đó theo bất kỳ cách nào bạn muốn trong Nanc. Để biết thêm thông tin về xử lý sự kiện, hãy xem tài liệu dành cho tiện ích InkWell ở Nanc.

Sự tiện lợi

Nanc có một trình soạn thảo XML tích hợp, nhưng nó không tiện dụng lắm. Nó không thể tìm kiếm được (chưa), nó không nhanh lắm với nhiều mã và nó không có tính năng tự động hoàn thành. Làm thế nào để sống với nó? Ví dụ: cho phép người dùng sử dụng IDE yêu thích của mình và xem các thay đổi trong Nanc theo thời gian thực. Hãy để tôi chỉ cho bạn cách làm. Và đây là Web (là thứ bạn phải chơi với):

Trong tương lai, hỗ trợ tự động điền sẽ được thêm vào, có lẽ trong tương lai xa...Tôi đã cố gắng tìm hiểu sâu về Lược đồ XML, đã dành vài ngày, nhưng cho đến nay vẫn chưa thể 🤷🏼

Hiệu suất

Riêng tôi muốn đề cập đến hiệu năng (vẽ giao diện từ XML trên thiết bị di động). Nói tóm lại, nó giống với hiệu suất của chính Flutter, không có bất kỳ chi phí nào. Hiện tại, "màn hình" là một danh sách các widget (SliverList) được hiển thị một cách lười biếng, được tạo không đồng bộ. Sau đó, việc triển khai này sẽ được tinh chỉnh để bắt đầu hiển thị các tiện ích con một cách không đồng bộ, nhưng đổi lại, thời gian cần thiết để hiển thị nội dung sẽ bằng với thời gian cần thiết để hiển thị tiện ích con đầu tiên được mô tả trong XML.

Ứng dụng demo Nanc

Tổng quan

Để chứng minh các khả năng, một bộ ứng dụng demo công khai đã được tạo để cho thấy những gì có thể đạt được với Nanc ngay bây giờ. Đây là một ứng dụng khách trên Android và Web (cái sau tạm thời đóng vai trò của một ứng dụng iOS). Cũng như ứng dụng Nanc CMS. Đọc thêm về họ dưới đây.

liên kết

Khách hàng

Máy khách là một ứng dụng demo máy khách sử dụng một thư viện duy nhất từ hệ sinh thái nanc. Thư viện này cho phép bạn chuyển đổi XML thành giao diện ứng dụng trong Flutter. Ứng dụng này chỉ có một màn hình, được tạo hoàn toàn bằng Nanc và nó có thể được cập nhật theo ý muốn bất kỳ lúc nào mà không cần kho chứa. Ở dưới cùng bên phải có một nút có biểu tượng kết nối - nó chịu trách nhiệm kết nối với . Thông tin thêm về "kết nối" này sẽ ở bên dưới.

Quản trị viên

Admin là một ứng dụng demo của Nanc-CMS, với một lớp logic được triển khai bổ sung, cung cấp khả năng đồng bộ hóa với các máy khách (thông tin thêm về kết nối bên dưới). Trong ứng dụng demo Nanc-CMS, chính trình duyệt của người dùng và localStorage của nó đóng vai trò là "phụ trợ". Mọi thứ bạn thêm hoặc thay đổi chỉ được lưu trữ trong trình duyệt của bạn. Trong Nanc-CMS, bạn có thể sửa đổi/tạo/xóa dữ liệu liên quan đến các mô hình hiện có (bạn sẽ thấy chúng) và - bạn có thể tạo các mô hình của riêng mình thông qua giao diện và thực hiện tương tự với chúng.

Là một đại diện SQL của các mô hình dữ liệu được sử dụng trong quá trình tạo bản trình diễn này, bạn có thể được hướng dẫn bằng ảnh chụp màn hình sau:

Trình quản lý kết nối / "Kết nối"

Phần này chỉ liên quan đến logic của "bản trình diễn" trong ứng dụng khách và ứng dụng CMS. Và nó đã được triển khai để mô phỏng trải nghiệm tương tác với Nanc và quá trình cập nhật ứng dụng khách. Nhưng điều đầu tiên trước tiên.

Trong một dự án sản xuất thực, bạn có thể sử dụng Nanc theo cách sau: triển khai ứng dụng Nanc CMS tĩnh ở đâu đó, với các dịch vụ API được triển khai. Nó sẽ giao tiếp với chương trình phụ trợ của bạn và bạn sẽ sử dụng Nanc theo ý thích của mình. Ứng dụng của bạn chứa một thư viện từ hệ sinh thái nanc cho phép bạn hiển thị giao diện. Bạn đã cập nhật - ứng dụng đã tải mã mới từ chương trình phụ trợ của bạn, đã cập nhật - mọi người đều vui vẻ và hài lòng.

Để hiển thị mô hình này đang hoạt động, điều tương tự cũng được thực hiện, nhưng theo cách đơn giản hóa: Nanc CMS tồn tại dưới dạng tĩnh, nằm trên các trang github và bạn có thể sử dụng nó giống như "trong cuộc sống thực", nhưng trình duyệt của bạn đóng vai trò là phụ trợ. Nghĩa là, các API đã được triển khai theo cách mà chúng "đi vào mạng" - trong localStorage của trình duyệt. Với phần này, chúng tôi đã hoàn thành, nhưng vẫn còn một ứng dụng dành cho thiết bị di động, ứng dụng này phải bằng cách nào đó cho bạn thấy quá trình "cập nhật".

Chà, đó là nơi "kết nối" xuất hiện. Nói tóm lại - bạn có thể thiết lập kết nối trực tiếp giữa bất kỳ ứng dụng demo máy khách Nanc nào và bất kỳ ứng dụng demo Nanc CMS nào. Để thực hiện việc này, bạn cần nhấp vào nút dưới cùng bên phải có biểu tượng mã QR trong CMS. Trong cửa sổ phương thức xuất hiện, bạn sẽ thấy mã QR. Tiếp theo, bạn có hai chiếc ghế - bạn có thể quét mã này bằng ứng dụng khách trên thiết bị di động (hoặc trình duyệt) bằng cách nhấn nút tương tự ở dưới cùng bên phải, sau đó kết nối sẽ được thiết lập tự động. Hoặc bạn có thể nhấp vào mã QR và dữ liệu cần thiết cho kết nối sẽ được sao chép vào khay nhớ tạm. Sau đó, bạn sẽ phải dán dữ liệu này vào trường nhập liệu của ứng dụng di động và kết nối bằng cách nhấn nút. Khi kết nối được thiết lập - bạn sẽ hiểu chính mình. Sau đó, bạn có thể làm bất cứ điều gì mình muốn với Trang đích hiện có và xem các thay đổi trong thời gian thực (sau khi lưu) - trong ứng dụng dành cho thiết bị di động.

Nhưng bạn không bị giới hạn ở Landing Page . Bạn có thể tạo bất kỳ mô hình mới nào trực tiếp trong trình duyệt, điền nội dung vào chúng và nếu mô hình của bạn có trường mô tả giao diện (nhập Màn hình) - thì khi bạn lưu các thực thể đó, bạn cũng sẽ thấy kết quả trong ứng dụng - màn hình từ kiểu máy mới sẽ thay thế màn hình ứng dụng hiện có. Điểm duy nhất là vì ứng dụng khách không biết bản ghi mới tạo của bạn thuộc loại trường nào, nên nó có thể có các mã định danh được quy định, dự kiến là các Trường màn hình.

Vì vậy, nếu bạn muốn tạo một màn hình hoàn toàn từ đầu và hiển thị nó trong ứng dụng, hãy sử dụng một cái gì đó từ danh sách sau làm giá trị IdField:

• màn hình
• giao diện người dùng
• trang
• giao diện
• đánh dấu
• xem

Nếu bạn làm hỏng thứ gì đó - chỉ cần đặt lại dữ liệu (Chrome: F12 -> Ứng dụng -> Ứng dụng -> Lưu trữ -> Xóa dữ liệu trang web), khi bạn mở lại ứng dụng khách, nó sẽ luôn tải mã màn hình thực tế được tạo cho bản trình diễn này. (Mã từ trình duyệt của bạn sẽ chỉ được tải nếu bạn kết nối)

Và cuối cùng, một ví dụ nhỏ về việc tạo một trang mới của một mô hình mới chứa ScreenField và hiển thị nó trong ứng dụng:

Cái gì tiếp theo?

Bản demo công khai đã sẵn sàng. Bài giới thiệu được viết. Các kế hoạch trong tương lai cho Nanc - để hoàn thiện tính toàn vẹn chức năng của cách tiếp cận giao diện đối với việc tạo mô hình, giúp có thể định cấu hình tất cả các trường - Enum, Selector và MultiSelector. Sửa các lỗi đã biết, chẳng hạn như thay đổi vị trí của các phần tử trong StructureField. Sau đó là "blah blah blah", và sau đó là "so-and-so". Công việc tồn đọng sẽ đủ cho ít nhất nửa năm tới, nhưng mô hình mở rộng chức năng tiếp theo sẽ dựa trên nhu cầu của khách hàng, vì vậy nếu bạn có ý tưởng/phê bình/tìm thấy lỗi (và có rất nhiều lỗi) /bất cứ điều gì khác - vui lòng điền vào biểu mẫu, liên kết đến có sẵn trong ứng dụng demo của khách hàng.

Nếu bạn quan tâm đến các tính năng của Nanc và bạn muốn hợp tác - hãy điền vào biểu mẫu và chúng tôi chắc chắn sẽ nói chuyện.