Migrated meeting sidepanel c# sample to react to use live-share sdk (O…

…fficeDev#393)

* migrated meeting sidepanel c# sample to react to use live-share sdk
* removed appsettings value

samples/meetings-sidepanel/csharp/README.md

@@ -1,6 +1,6 @@
----
+---
 page_type: sample
-description: Microsoft Teams meeting extensibility sample for iteracting with Side Panel in-meeting
+description: Sample app which demonstrates how to use live share SDK inside meeting side panel.
 products:
 - office-teams
 - office
@@ -14,7 +14,7 @@ createdDate: "07-07-2021 13:38:27"
 
 # Meetings SidePanel
 
-This sample illustrates how to implement [Side Panel](https://docs.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/create-apps-for-teams-meetings?view=msteams-client-js-latest&tabs=dotnet#notificationsignal-api) In-Meeting Experience.
+This sample illustrates how to implement [Side Panel](https://docs.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/create-apps-for-teams-meetings?view=msteams-client-js-latest&tabs=dotnet#notificationsignal-api) In-Meeting Experience and uses [Live Share SDK](https://aka.ms/livesharedocs) to share data in realtime.
 
 ### User interactions(Meeting Organizer)
 - **Add New Agenda Item** - Gives provision to add new Agenda point.
@@ -31,12 +31,12 @@ This sample illustrates how to implement [Side Panel](https://docs.microsoft.com
   dotnet --version
   ```
 
-- [Ngrok](https://ngrok.com/download) (Only for devbox testing) Latest (any other tunneling software can also be used)
+  - [Ngrok](https://ngrok.com/download) (For local environment testing) Latest (any other tunneling software can also be used)
   ```bash
   # run ngrok locally
-  ngrok http -host-header=localhost 3978
+  ngrok http -host-header=localhost 3001
   ```
-- [SignalR](https://docs.microsoft.com/en-us/aspnet/signalr/overview/getting-started/tutorial-getting-started-with-signalr-and-mvc) To update agenda in Real-Time
+
 - [Teams](https://teams.microsoft.com) Microsoft Teams is installed and you have an account
 
 - Register a bot with Azure Bot Service, following the instructions [here](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-quickstart-registration?view=azure-bot-service-3.0).
@@ -53,13 +53,21 @@ This sample illustrates how to implement [Side Panel](https://docs.microsoft.com
 - File -> Open -> Project/Solution
 - Navigate to ```samples\meetings-sidepanel\csharp``` folder
 - Select ```SidePanel.sln``` file
-3. Run ngrok - point to port 3978
+3. Run ngrok - point to port 3001
    ```ngrok http -host-header=rewrite 3978```
 4. Create a new Bot by following steps mentioned in [Build a bot](https://docs.microsoft.com/en-us/microsoftteams/platform/bots/what-are-bots?view=msteams-client-js-latest#build--a-bot-for-teams-with-the-microsoft-bot-framework) documentation.
 5. Go to appsettings.json and add ```MicrosoftAppId```, ```MicrosoftAppPassword``` and ```BaseUrl``` information.
 6. Update the manifest.json file with ```Microsoft-App-ID``` and ```BaseUrl``` value.
 7. Run your app, either from Visual Studio with ```F5``` or using ```dotnet run``` in the appropriate folder.
-8. [Install the App in Teams Meeting](https://docs.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/teams-apps-in-meetings?view=msteams-client-js-latest#meeting-lifecycle-scenarios)
+8. Navigate to ```samples\meetings-sidepanel\csharp\ClientApp``` folder and execute the below command.
+
+    ```bash
+    # npx @fluidframework/azure-local-service@latest
+    ```
+9. Upload the manifest.zip to Teams (in the Apps view click "Upload a custom app")
+   - Go to Microsoft Teams. From the lower left corner, select Apps
+   - From the lower left corner, choose Upload a custom App
+   - Go to your project directory, the ./AppPackage folder, select the zip folder, and choose Open.
 
 ## Interacting with the app in Teams Meeting
 Interact with SidePanel by clicking on the App icon present on the top menu beside the "more actions" during a meeting.
@@ -68,5 +76,4 @@ Interact with SidePanel by clicking on the App icon present on the top menu besi
 2. On click of "Add" button, agenda point will be added to the agenda list.
 ![](https://user-images.githubusercontent.com/50989436/111726569-3bce2a80-888f-11eb-8ba6-1c662b2939da.png)
 3. On click of "Publish Agenda", the agenda list will be sent to the meeting chat.
-![](https://user-images.githubusercontent.com/50989436/111726656-5accbc80-888f-11eb-94e3-af1bc18bd500.png)
-
+![](https://user-images.githubusercontent.com/50989436/111726656-5accbc80-888f-11eb-94e3-af1bc18bd500.png)