ỨNG DỤNG CUSTOM STICKERS

Self-expression là cốt lõi của văn hóa Teams. Mẫu ứng dụng này là một tiện ích nhắn tin cho phép người dùng của bạn chia sẻ hình dán và GIF tùy chỉnh trong trải nghiệm trò chuyện Teams. Mẫu này cung cấp trải nghiệm cấu hình dựa trên web dễ dàng, nơi người dùng được ủy quyền có thể tải lên và quản lý GIF / hình dán / hình ảnh do ứng dụng trả về.

Hướng dẫn triển khai

Điều kiện tiên quyết

Để bắt đầu, bạn sẽ cần:

  • Tên cho ứng dụng Teams của bạn. Ví dụ: “Contoso Stickers”
  • Hình ảnh Sticker, phải là:

+ Định dạng PNG, JPEG hoặc GIF

+ Tổng kích thước nhỏ hơn 1MB

+ Chiều rộng hoặc chiều cao không quá 1000px. Để có kết quả tốt nhất, chúng tôi đề xuất kích thước tối đa là 300×300.

  • Gói Azure nơi bạn có thể tạo các loại tài nguyên sau:

+ Azure Function

+ App service

+ App service plan

+ Bot channels registration

+ Storage account

+ Application Insights

Bước 1: Đăng ký ứng dụng Azure AD

Đăng ký hai ứng dụng Azure AD trong thư mục của tenant của bạn: một cho tiện ích nhắn tin và một cho ứng dụng cấu hình.

  1. Đăng nhập vào Azure Portal để đăng ký của bạn và chuyển đến phần “App registrations” tại https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps.
  2. Nhấp vào “New registration” và tạo ứng dụng Azure AD.
  3. Name : Tên ứng dụng Teams của bạn. Ví dụ: “Contoso Stickers”.
  4. Supported account types: Chọn “Account in this organizational directory only”
  5. Để trống trường “Redirect URI”.
  • Nhấp vào nút “Register”.
  • Khi ứng dụng được đăng ký, bạn sẽ được đưa đến trang “Overview” của ứng dụng. Sao chép các ID sau; chúng ta sẽ cần chúng sau này.
  • Application (client) ID
  • Directory (tenant) ID
  • Quay lại “App registrations”, sau đó lặp lại các bước 2-4 để tạo một ứng dụng Azure AD khác cho ứng dụng cấu hình. Chúng tôi khuyên bạn nên thêm “Configuration” vào tên của ứng dụng này; ví dụ: “Contoso Stickers Configuration”.

Tại thời điểm này, bạn có 3 GUID duy nhất:

  • Hai ứng dụng (client) IDs : một cho tiện ích nhắn tin và một cho ứng dụng cấu hình
  • Tenant ID, giống nhau đối với hai ứng dụng mà bạn đã đăng ký

Bước 2: Triển khai đăng ký Azure của bạn

  1. Nhấp vào nút “Deploy to Azure” bên dưới.
  • Khi được nhắc, hãy đăng nhập vào đăng ký Azure của bạn.
  • Azure sẽ tạo một “Custom deployment” dựa trên mẫu ARM và yêu cầu bạn điền vào các thông số của mẫu.
  • Chọn đăng ký và nhóm tài nguyên.
  • Chúng tôi khuyên bạn nên tạo một nhóm tài nguyên mới.
  • Vị trí nhóm tài nguyên PHẢI nằm trong trung tâm dữ liệu hỗ trợ Application Insights. Để có danh sách cập nhật, hãy tham khảo https://azure.microsoft.com/en-us/global-infrastructure/services/?products=monitor, trong “Application Insights”.
  • Nhập “Base Resource Name”, mẫu sử dụng để tạo tên cho các tài nguyên khác.
  • Tên dịch vụ ứng dụng [Base Resource Name] và [Base Resource Name] -config phải có sẵn. Ví dụ: nếu bạn chọn contosostickers làm tên cơ sở, tên contosostickers và contosostickers-config phải miễn phí; nếu không, việc triển khai sẽ không thành công với lỗi Conflict
  • Nhớ tên base resource mà bạn đã chọn. Chúng tôi sẽ cần nó sau.
  • Điền vào các ID khác nhau trong mẫu:
  • Messaging Extension App Id: ứng dụng (client) ID của ứng dụng tiện ích nhắn tin
  • Config App Client Id: ứng dụng (client) ID của ứng dụng cấu hình
  • Tenant Id: The tenant ID
  • Điền vào ” Config Admin UPN List”, là danh sách người dùng được phân tách bằng dấu chấm phẩy sẽ được phép truy cập ứng dụng cấu hình.
  • Ví dụ: để cho phép Megan Bowen ([email protected]) và Adele Vance ([email protected]) truy cập ứng dụng cấu hình, hãy đặt thông số này thành [email protected];[email protected]
  • Bạn có thể thay đổi danh sách này sau bằng cách chuyển đến phần ” Configuration” của dịch vụ ứng dụng cấu hình.
  • Đồng ý với các điều khoản và điều kiện của Azure bằng cách nhấp vào hộp kiểm “I agree to the terms and conditions stated above” nằm ở cuối trang.
  • Nhấp vào “Purchase” để bắt đầu triển khai.
  • Chờ cho quá trình triển khai kết thúc. Bạn có thể kiểm tra tiến trình triển khai từ ngăn ” Notifications” của Cổng Azure.

Bước 3: Hoàn tất thiết lập ứng dụng cấu hình

  1. Lưu ý vị trí của ứng dụng cấu hình mà bạn đã triển khai, đó là https: // [BaseResourceName] -config.azurewebsites.net. Ví dụ: nếu bạn chọn “contosostickers” làm tên cơ sở, thì ứng dụng cấu hình sẽ có tại https://contosostickers-config.azurewebsites.net.
  2. Quay lại trang ” App registrations” tại https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps.

Chọn ứng dụng cấu hình mà bạn đã tạo ở Bước 1.5

  • Trong “Manage”, nhấp vào “Authentication” để hiển thị cài đặt xác thực.
  • Thêm một mục mới vào “Redirect URIs”:
  • Type: Web
  • Redirect URI: Vị trí (URL) của ứng dụng cấu hình của bạn. Đây là URL từ Bước 3.1.
  • Trong “Implicit grant”, hãy chọn “ID tokens”.
  • Nhấp vào “Save” để cam kết các thay đổi của bạn.

Bước 4: Thêm nhãn dán tùy chỉnh

Tải lên hình dán tùy chỉnh của bạn. Để giúp bạn bắt đầu, chúng tôi có một bộ nhãn dán mẫu trong thư mục deployment\stickers

  1. Truy cập ứng dụng cấu hình tại https: // [BaseResourceName] -config.azurewebsites.net. Ví dụ: nếu bạn chọn “contosostickers” làm tên cơ sở, thì ứng dụng cấu hình sẽ có tại https://contosostickers-config.azurewebsites.net.
  2. Khi được nhắc, hãy đăng nhập với tư cách là một trong những người dùng mà bạn đã chỉ định trong “Config Admin UPN List”.
  3. Đối với mỗi hình dán:
  4. Nhấp vào “Add new”.
  1. Nhấp vào “Choose file” và chọn hình ảnh.
  2. Cập nhật tên và từ khóa. Các từ khóa phải được phân tách bằng dấu phẩy.
  3. Nhấp vào “Create” để lưu hình ảnh.
  • Khi bạn thêm hình dán xong, hãy nhấp vào “Update messaging extension” để các thay đổi của bạn được phản ánh trong tiện ích nhắn tin.

Bước 5: Tạo gói ứng dụng Teams

  1. Mở tệp manifest\manifest.json trong trình soạn thảo văn bản.
  2. Thay đổi “botId” thành ID ứng dụng của tiện ích nhắn tin của bạn. Đây là GUID giống như bạn đã nhập vào mẫu trong “Messaging Extension App Id”.
  3. Thay đổi các trường trong tệp kê khai thành các giá trị phù hợp với tổ chức của bạn.
  4. developer.name
  5. developer.websiteUrl
  6. developer.privacyUrl
  7. developer.termsOfUseUrl
  8. name.short
  9. description.short
  10. description.full
  11. Tạo một gói ZIP với manifest.json, color.png và outline.png. Hai tệp hình ảnh là biểu tượng cho ứng dụng của bạn trong Teams. Bạn có thể tùy chỉnh ứng dụng của mình nhiều hơn nữa bằng cách thay thế chúng bằng các hình ảnh khác, miễn là chúng đáp ứng các nguyên tắc về biểu tượng ứng dụng.

Đảm bảo rằng 3 tệp là cấp cao nhất của gói ZIP, không có thư mục lồng nhau.

Bước 6: Chạy ứng dụng trong Microsoft Teams

  1. Nếu tenant của bạn đã bật ứng dụng tải xuống, bạn có thể cài đặt ứng dụng của mình cho cá nhân hoặc cho một nhóm bằng cách làm theo hướng dẫn bên dưới.
  2. Tải gói hàng lên nhóm hoặc cá nhân bằng cách sử dụng Store  https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/apps/apps-upload#upload-your-package-into-a-team-or-conversation-using-the-store
  3. Tải gói lên một nhóm bằng tab Apps  https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/apps/apps-upload#upload-your-package-into-a-team-using-the-apps-tab
  4. Bạn cũng có thể tải nó lên danh mục ứng dụng của tenant để mọi người trong đối tượng thuê của bạn có thể cài đặt: https://docs.microsoft.com/en-us/microsoftteams/tenant-apps-catalog-teams

Tổng quan về giải pháp

Ứng dụng Custom Stickers tùy chỉnh có hai thành phần chính:

  • Tiện ích nhắn tin: Một chức năng Azure trả về hình ảnh
  • Ứng dụng cấu hình: Một ứng dụng web cho phép quản trị viên ứng dụng quản lý các hình dán do tiện ích nhắn tin trả về

Phần mở rộng về tin nhắn

Tiện ích mở rộng nhắn tin là một Hàm Azure thực hiện một lệnh tìm kiếm duy nhất cho các nhãn dán tùy chỉnh. Để duy trì trải nghiệm người dùng đáp ứng, Chức năng Azure được định cấu hình để chạy trong gói dịch vụ ứng dụng và được đặt thành Always On.

Bộ nhãn dán do tiện ích nhắn tin trả về được xác định trong tệp cấu hình được lưu trữ trong Azure Blob Storage. Bản thân các nhãn dán cũng có trong cửa hàng blob.

LƯU Ý: Hình ảnh nhãn dán có thể truy cập công khai và bất kỳ ai biết URL cụ thể của hình ảnh đều có thể xem được. Điều này là bắt buộc đối với hình ảnh được trả về bởi tiện ích nhắn tin.

Ứng dụng web cấu hình

Ứng dụng cấu hình là ứng dụng web ASP.NET MVC 5 tiêu chuẩn. Chúng tôi nghĩ rằng ứng dụng cấu hình sẽ không được sử dụng thường xuyên, vì vậy mẫu ARM đi kèm sẽ đặt nó trong cùng App Service Plan với tiện ích nhắn tin.

Ứng dụng cấu hình cung cấp các thao tác Create/Read/Update/Delete (CRUD) trên bộ nhãn dán. Khi quản trị viên hài lòng với bộ hình dán cần trả lại, cô ấy sẽ cập nhật tệp cấu hình hình dán được tiện ích nhắn tin sử dụng bằng cách nhấn một nút trong ứng dụng web.

LƯU Ý: Khi hình dán bị xóa khỏi ứng dụng cấu hình, hình ảnh nhãn dán vẫn còn trong kho lưu trữ blob, để các tin nhắn hiện có được gửi cùng với hình ảnh đó tiếp tục hoạt động.

Bài viết thuộc về: www.office365vietnam.info

Ý kiến của bạn:

This site uses Akismet to reduce spam. Learn how your comment data is processed.