Being volunTOLD

Early October, I saw an announcement on twitter regarding #M365Bootcamp, a global virtual event, consisting of 2 different labs to build solutions with Microsoft Graph, Teams, SharePoint, held in 3 different timezones across 2 days.

My dear friend Dona Sarkar assigns homework to nearly everyone and I got volunTOLD to build more. Encouraged by Waldek Mastykarz to join and trust that the labs will be doable and that there is also support available, I registered for both Bootcamps, and this was literally me jumping into the rabbit hole.

a fantastic experience

After registration, I got a confirmation email and another email as well with a new account, as these Bootcamps are held in a special tenant from Microsoft for those community events. You become a member in that Microsoft Teams team, which gives you more permission as if you were joining as a guest. I attended both Bootcamps in EMEA timezone and they were both incredibly well organized and executed. Bob German (Lab No. 1: “Build an Emergency Response solution with Teams and SharePoint”) and Ayca Bas (Lab No. 2: “Build “One Productivity Hub” using Microsoft Teams and Microsoft Graph Toolkit”) did amazing jobs as they:

• designed real-world scenarios, completely doable for all developers regardless of their previous experience or level of expertise
• provided excellent material on GitHub: detailed, bias-free, accessible and inclusive for every developer
• explained the overall architecture of the solution we wanted to build
• contextualized the solutions to developers new to the Microsoft 365 ecosystem without overwhelming them
• gave enough room for an awesome group of proctors who helped answering questions and keeping motivation high
• made this whole bootcamp a very interactive hands-on experience

As everything was prepared, documented and structured in a way, that we learnt and built bite-sized, it felt as easy as building something with LEGO bricks- while it was still tricky enough to do it right, but fun enough to stay motivated. It was the kind of work you LOVE to do: You are neither underwhelmed nor overwhelmed, you immerse yourself into a challenge and totally don’t realize how time flies, while you are surrounded by like-minded #LearnItAlls.

Bobs’ and Aycas’ investment to prepare everything really paid off, because it meant that they (and of course Microsoft Graph) already did the heavy lifting for us. They also provided an atmosphere that all questions are welcome and valid feedback.

Build an Emergency Response solution with Teams and SharePoint with Bob German

After housekeeping, some gamification and presentation of the solution to build we actually started:

Lab setup – Day 1

• a developer tenant (YAY! it’s free and you should have one as well!)
• enabling of Teams App upload ( just a toggle!)
• a SharePoint app catalog
• a Microsoft Teams team (I promise, from now on I will just say “Team” )

and this was already the first exercise. Bob checked frequently, if everyone reached the next exercise and proctors offered help, support and nerdy jokes to keep up the good moral.

SharePoint News

First steps, to build our solution:

• connect with SharePoint News in Teams
• add some news to the SharePoint site
• add News tab to Teams

SharePoint List Tab

Next steps were

• create a SharePoint list
• change column formatting with JSON code snippets that were provided (copy paste FTW!)
• add the list as a tab to Teams
• use APP STUDIO (this will become your favorite app for Teams, I promise) to create a “real” Teams app.
• fill out a form which is called manifest editor
• upload two images which are provided for you
• change a URL
• install the app
• optional: install and pin the app using App policies

Until now, this whole thing was taking place in nice UIs, nothing too scary, and my success on doing this relied on my ability to carefully read exercise instructions and my experience in SharePoint, Teams and App Studio as I already built a lot of (low-code-) applications and bots. Now off to new adventures with

SharePoint Framework Tabs

Before we could start we needed to make to have

• Node.js version 10.x to run the dev toolchain and
• yeoman

so we could proceed with the download of the source code and building the project (HOW EXCITING!). I could have used SharePoint public CDN to make it work regardless which computer I want to use for it, but as I love my Surface Laptop 3, I decided to work on a local web server.

After that, it was time to

• upload the bundle to the SharePoint App Catalog
• approve permissions
• install the app in the Team

One more thing to do: For bing maps you will need a bing maps key, for which you need to register, sign in, find this key, copy-paste it. Detailed instructions on this were available in the exercise, but Bob just provided temporary keys in the Teams chat- Thanks, that’s what I call service! Next step was already last exercise in this lab:

Calling the Microsoft Graph

After cloning the repository we

• write a `sendToChannel` function (we need that later on)
• import a reference to Teams JavaScript SDK
• get the context of the Team from this SDK
• send a message to the current channel with Graph

All code snippets were available to copy-paste, I took my time to read them 3 times to understand what was happening there. Next steps were updating the `getMapPoints` function and adding an item for the correct permission (`channelMessage.Send`) in the package-solution.json file.

After each step, Bob linked to how the could should look like, for self-assessment and of course, if you failed doing on step, you could still proceed.

Final steps:

• Re-Deployment of the SharePoint solution package & approvement of permissions (repeating previous steps!)
• test – and celebrate – YAY IT WORKS!

Build “One Productivity Hub” using Microsoft Teams and Microsoft Graph Toolkit” with Ayca Bas

After Bootcamp seems to be before next Bootcamp and on the very next day, I aimed to build a ‘One Productivity Hub’. Very confident because of my experience that I made in Bob’s, I joined Ayca’s session – and to put the spoiler first: I was not disappointed! We started with housekeeping and sweet Kahoot! gamification and got an awesome introduction into Microsoft Graph Toolkit. To be very honest: I didn’t need to hear that, because I already worked with it and blogged a whole series about it, but it was still good to hear everything by Ayca. She encouraged everyone, that it will be totally doable to build an app in a short amount of time , yet again, Microsoft Graph Toolkit reduces complexity as it provides us with web components, easy to use but still adjustable with custom attributes, properties and CSS.

Lab setup -Day 2

To be able to complete this Bootcamp, we need to

• have a developer tenant
• have enabled upload of custom Teams apps
• have Visual Studio Code installed

which I already had so that I only needed to

• have Microsoft Teams Toolkit installed
• have Node.js installed
• have setup Ngrok

I installed the software, signed up for Ngrok, got my auth token and ran the 4 commands to set it up.

Custom Teams Tab

After signing in (dev tenant), I created a new Teams app with capability TAB and ran `npm install` and `npm start` in Terminal. Couple of minutes later () I created a tunnel by running `Ngrok http 3000` and replaced a placeholder base URL with my NGrok URL so that I would able to test my app later on.

Initialize MGT and auth page

• Register my app in Azure Active Directory

I registered my app in AAD (for everyone who never did that: this is literally 5 clicks plus copy-paste of the Ngrok URL for redirect URI) and copied my client ID which I would need in the next step.

• Add MGT and build an auth pop-up page

To add the MGT I needed to add references to the Teams JS client SDK and the Teams provider (no worries, just copy paste two lines of code). After that, I initialized the provider and replaced a placeholder ID with the AAD app client ID.

• For the pop-up page I created a new `auth.html` file and copy-paste the code provided to call the `TeamsProvider.handleAuth()` method.

Design my tab

Now it was time to already add the components (remember, LEGO bricks!) to my `index.html`

After creating three columns, I added provided CSS code to my `index.css` file. In those 3 columns I added the components for agenda, tasks (from planner) and mails (with the placeholder component `get`- code provided in MGT Playground – with which I played a couple of weeks ago already).

I like pink, which is why I changed some box-shadows in the `index.css`

Test my app in Teams Studio

• Before I wanted to upload my app, I wanted to test the `manifest.json` file using the `validation` tab in App Studio – it returned with 0 errors- YAY!
• To build and run my app, I ran `npm start` and imported my app in App Studio and installed it.

Time to try it out!

• Click in the Left rail on `OneProductivityHub` app (this is the one I made – how cool it that?!)
• Click the SIGN IN button in the pop-up page and sign in with m username/password and consent on behalf of my organization. BOOM! I see my agenda, planner tasks assigned to me and my mails!

Conclusion of attending 2 Bootcamps

Yes, I built 2 apps, but more than that happened:

• community spirit

This Bootcamp was absolutely outstanding, as it was not “yet another online-conference”. I really felt connected and in the middle of co-workers, who all wanted to achieve something cool together. I can totally recommend this experience. This was truly amazing, not only because of the good and well-prepared content, the very responsive teams of Bob & Ayca and their proctors, but also because of the community-spirit.

• learning

Not only did I learn a ton (speaking of it; I learned a lot about myself, my problem solving skills, my ability to focus and unstuck if I am stuck) and gained experience in building real-world scenarios (both Bob and Ayca put all those learning nuggets together into solutions that really makes sense!) but I also connected with other M365 Developers who shared their struggles, learning, journey so that we were already peers when it was time to celebrate success! THAT feeling when Bob and Ayca asked in the chat, if anyone already completed the last exercise and I saw more and more confirming messages coming in until I finally could say: YES! I made it as well.

• 4 Fun Facts:

  

  • I attended the (first) BootCamp working on my 13″ Laptop while sitting at my hairdresser
  • I finished the 2nd BootCamp way ahead of time
  • I am not a developer, but I can obviously develop apps
  • 2 days after Bootcamp, one of my customers asked me to help deploy some Teams applications – feeling confident enough to do that!

• Why is this important to you?

If you are Maker/Citizen Developer wondering, where is the limit for you, I can tell you out of experience, that the limit is not Power Platform. You can build apps for Teams & SharePoint, if you feel comfortable with low-code development. You can expand your expertise with Microsoft Graph Toolkit or with Teams app templates. These solutions use the same approach as Power Apps – they reduce complexity because you stand on the shoulders of giants who give you ready-to-use bricks which you only need to put together. There is a lot of fuzz about how we distinguish between no-code, low-code and pro-code. I think it doesn’t really matter where we draw lines and if we really need to do that or if we evolve into a thinking to empower every developer regardless of their technical background or experience. Those Bootcamps are very beginner-friendly, but will still get makers out of their comfort zone to extend their comfort zones. I think this is a good thing, because at the end of comfort zone is where the magic happens. Probably I would not have needed these Bootcamps to get started with building real-world scenarios. All inputs needed were already available on docs.microsoft.com but this guided experience was a good start for me. Get more info on M365Bootcamps on twitter and M365 Bootcamps. Recording of Bob’s workshop is also available here.