Getting Started With Share Now Sample

Note: Please be advised that this sample repository is currently in Public Preview, with a lot of active development work taking place. Please expect breaking changes as we continue to iterate.

We really appreciate your feedback! If you encounter any issue or error, please report issues to us following the Supporting Guide. Meanwhile you can make recording of your journey with our product, they really make the product better. Thank you!

This warning will be removed when the samples are ready for production.

Share Now promotes the exchange of information between colleagues by enabling users to share content within the Teams environment. Users engage the app to share items of interest and discover new shared content.

Prerequisite

• NodeJS, fully tested on NodeJS 12, 14
• An M365 account. If you do not have M365 account, apply one from M365 developer program
• Teams Toolkit Visual Studio Code Extension
• An Azure subscription

What you will learn in this sample

• How to build frontend hosting on Azure for your tab app.
• How to build backend hosting on Azure for your tab app.
• How to build message extension bot on Azure for your app.
• How to connect to Azure SQL DB and how to do CRUD operations in DB.

Try the Sample

Here are the instructions to run the sample in Visual Studio Code. You can also try to run the app using TeamsFx CLI tool, refer to Try the Sample with TeamsFx CLI

1. Clone the repo to your local workspace or directly download the source code.
2. Download Visual Studio Code and install 'Teams Toolkit' extension.
3. Open the project in Visual Studio Code.
4. Open the command palette and select: Teams: Provision in the cloud. You will be asked to input admin name and password of SQL. The toolkit will help you to provision Azure SQL.
5. Once provision is completed, open the command palette and select: Teams: Deploy to the cloud.
6. Open .fx/states/state.dev.json file, you could get the database name in databaseName setting. Set IP address of your computer into server-level IP firewall rule from the database overview page.
7. In Azure portal, find the database by databaseName and use query editor with below query to create a table:

   CREATE TABLE [TeamPostEntity](
       [PostID] [int] PRIMARY KEY IDENTITY,
       [ContentUrl] [nvarchar](400) NOT NULL,
       [CreatedByName] [nvarchar](50) NOT NULL,
       [CreatedDate] [datetime] NOT NULL,
       [Description] [nvarchar](500) NOT NULL,
       [IsRemoved] [bit] NOT NULL,
       [Tags] [nvarchar](100) NULL,
       [Title] [nvarchar](100) NOT NULL,
       [TotalVotes] [int] NOT NULL,
       [Type] [int] NOT NULL,
       [UpdatedDate] [datetime] NOT NULL,
       [UserID] [uniqueidentifier] NOT NULL,
   )
   GO
   CREATE TABLE [UserVoteEntity](
       [VoteID] [int] PRIMARY KEY IDENTITY,
       [PostID] [int] NOT NULL,
       [UserID] [uniqueidentifier] NOT NULL,
   )
   GO

8. Once deployment is completed, you can preview the app running in Azure. In Visual Studio Code, open Run and Debug and select Launch Remote (Edge) or Launch Remote (Chrome) in the dropdown list and Press F5 or green arrow button to open a browser.

(Optional) Debug

To debug the project, you will need to configure an Azure SQL Database to be used locally:

1. Create an Azure SQL Database
2. Add IP address of your computer into allowlist of firewall of Azure SQL Server
3. Use query editor with below query to create tables:

   CREATE TABLE [TeamPostEntity](
       [PostID] [int] PRIMARY KEY IDENTITY,
       [ContentUrl] [nvarchar](400) NOT NULL,
       [CreatedByName] [nvarchar](50) NOT NULL,
       [CreatedDate] [datetime] NOT NULL,
       [Description] [nvarchar](500) NOT NULL,
       [IsRemoved] [bit] NOT NULL,
       [Tags] [nvarchar](100) NULL,
       [Title] [nvarchar](100) NOT NULL,
       [TotalVotes] [int] NOT NULL,
       [Type] [int] NOT NULL,
       [UpdatedDate] [datetime] NOT NULL,
       [UserID] [uniqueidentifier] NOT NULL,
   )
   GO
   CREATE TABLE [UserVoteEntity](
       [VoteID] [int] PRIMARY KEY IDENTITY,
       [PostID] [int] NOT NULL,
       [UserID] [uniqueidentifier] NOT NULL,
   )
   GO

4. Create api/.env.teamsfx.local and bot/.env.teamsfx.local files, and set the values of below config with the Azure SQL Database you just created:

   SQL_ENDPOINT=
   SQL_DATABASE_NAME=
   SQL_USER_NAME=
   SQL_PASSWORD=
   

5. Open Debug View (Ctrl+Shift+D) and select "Debug (Edge)" or "Debug (Chrome)" in dropdown list.
6. Press "F5" to open a browser window and then select your package to view share now sample app.

Use the App in Teams

1. The app will look like this when it runs for the first time:

2. You can add new content by clicking "Suggest content" button.

3. You can update content created by you by clicking "..." and then choose "update" button.

4. You can delete content created by you by clicking "..." and then choose "delete" button.

5. You can add/delete your vote for the content by click the icon in the content.

6. You can search all/posted-by-me contents in compose box or command box by filtering based on title or tags of content and share with your colleagues.

Architecture

This sample app consists of a personal tab and a messaging extension used to manage, search and share posts.

• The frontend is a react tab app hosted on Azure Storage.
• The Backend server is hosted on Azure Function for managing posts in the tab app.
• The messaging extension is hosted on Azure Web App for searching and sharing posts.
• The Azure SQL DB used to persist data.

Code structure

• You can check app configuration and environment information in: .fx
• You will find frontend code in: tabs/src/components
• You will find backend code in: api/posts, api/vote
• You will find bot code in: bot
• You will find DB Connection code in: api/utils/common.ts

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct.

For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.