TeamsTab01.log
Tags: learing, notestoself, teams
Published: 2020-05-31 19:28:36

For June, my husband and I are going to start a new learning experiment. Every sunday morning, we are going to prioritize personal learning. Since the quarantine life started, we designated our morning time for workout. As this habit became sticky to our life styles, we decided to change the priority. Learning -> workout. 

I did have some personal learning initiatives before. I did Sunday Learning project where I woke up every morning around 5:45am and did learning from 6-8am with one of my coworkers. We texted each other to make sure the other side was awake and ready to go. This worked pretty well. But as always, there is always some room for improvement. 

1) My learning was not very active. I took a udemy course. The course itself was great. But I wanted to have more active learning where I just jump onto a project and just figure out what I don't know along the way.
2) Time - I was just so obsessed with 6-8am. This strict schedule was not sustainable especially when you are going through a lot of life changes. I got married, I had to apply for a different visa, I was on my process to change a team etc. There were several nights during weekdays and Saturday that I couldn't have enough sleep. And having an early Sunday morning responsibility didn't help me to catch up my sleep. I felt like my focus level went down and more importantly, the engagement level went down. 

This time, the only rules I have to myself are 
1. The first thing I do on Sunday Morning is personal learning. 
2. I do personal learning for 3 hours. The last half an hour is for wrapping up time. 
3. Then I exercise (most likely running as we are following our running schedules)
4. And enjoy your rest of Sunday :D 

I will see how this new schedule can help me to build a learning habit that works for me. 

Well, the intro got longer than I expected. So today, I wanted to try out how to build a tab in Microsoft Teams. 

Whenever I just want to try out how things work in Microsoft Teams, I always go to [Microsoft Teams Developer Platform](https://docs.microsoft.com/en-us/microsoftteams/platform/) to see whether there are any contingent topics that I can check out. And ah-ha, I found the [tabs section](https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/what-are-tabs)

As I don't have any ideas how to build tabs, I just wanted to play around with some existing code. Quick Start is always a good section for this purpose. As I am more comfortable with C#, I chose a [quickstart guideline for C#/ASP.NET Core](https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/quickstarts/create-channel-group-tab-dotnet-core). For the first time users for .NET, I recommend using ASP .NET core as this is the framework that has more benefits for web development (ex: cross-platform support). 

While I was reading the quickstart, I wanted to check whether I have a M365 Developer Program subscription. As I am an employee there, I wanted to check whether I can receive a subscription. And it was true. You can find more information about your eligibility for the subscription here. [Microsoft 365 Developer Program FAQ](https://docs.microsoft.com/en-us/office/developer-program/microsoft-365-developer-program-faq). 

Afterward, I just followed the quickstart instruction step by step. But there were several gotta points that I want to note for future self. I also filed some issues as well. 
1. The example uses ASp.NET Core 2.2. I believe this project is locked to use this version. As you will see, this version is not in active support anymore. So I wanted to migrate to the latest one (at this point, 3.1). But I couldn't find out a way. To move on, I just installed ASP.Net Core 2.2 If you don't have it, you will see an error message when you run the application. 
2. The endpoint for the app is not 44355. It is 51175. You can find the URL in launchSettings.json.
3. Update your application - 
   - You can find the latest Microsoft Teams Javascript API here: [Link](https://www.npmjs.com/package/@microsoft/teams-js)
   - You can find the jQuery script for the latest Microsoft Ajax Content Delivery Network here: [Link](https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview)
4. Ngrok - It seems there are several ways you can expose your web sever to the internet. For instance,
  - ngrok http https://localhost:51175 -host-header="localhost:51175" 
  - ngrok http -host-header=localhost 51175 
  - ngrok http 51175

Interestingly, I got 400 when I tried the first two. When I set up the tunneling in a third way, I could make my content page loaded via the ngork HTTPS URL. 

5. Upload your tab to Teams with App Studio
   - The file path where you can find your tab.zip is {the folder path to ChannelGroupTab.sln}/bin/Debug/netcoreapp2.2/tab.zip. 

I think these were the only points that made me slightly confused to figure out. Other than these points, the doc was up to date :)

After I installed this sample app with the Tab capability in Microsoft Teams, 
I could see the following result in my testing teams like this: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u3l9gk6qnu382pfcwxxg.PNG)

Next time, I am going to try to create a Teams app with the Tab capability from the scratch. My ultimate goal is showing Feedly website in my Teams channel. :D