M365 Developer Bootcamp
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.
Waldek Mastykarz@waldekm
Sign up for the Global #Microsoft365 Developer Bootcamp and use the unique opportunity to get hands on with #MicrosoftTeams and #MicrosoftGraph. We have a great line up of instructors and proctors who will help you through the labs. Register for free at wldk.nl/3iG9ZXz10:20 AM - 09 Oct 2020
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. This was literally me jumping into the rabbit hole.
A fantastic experience
After registration, I got a confirmation email and another email and a new account, as these Bootcamps are held in a special tenant from Microsoft for those community events. You become a member of that Microsoft Teams team, which gives you more permission as if you were joining as a guest. I attended both Bootcamps in the 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 to answer 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 learned 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 a 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 say "Team")
And this was already the first exercise. Bob frequently checked if everyone reached the next exercise, and proctors offered help, support, and nerdy jokes to keep up the good morale.
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 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 in 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 of which computer I want to use for it, but as I love my Surface Laptop 3, I decided to work on a local webserver.
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! The next step was already the last exercise in this lab:
Calling the Microsoft Graph
After cloning the repository we
write a
sendToChannelfunction (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. The 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 to do one 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. 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. A 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.htmlfile and copy-pasted the code provided to call theTeamsProvider.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 the 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 in the index.css
Test my app in Teams Studio
Before I wanted to upload my app, I wanted to test the
manifest.jsonfile using thevalidationtab in App Studio - it returned with 0 errors- YAY!To build and run my app, I ran
npm startand imported my app in App Studio, and installed it.
Time to try it out!
Click in the Left rail on
OneProductivityHubapp (this is the one I made - how cool it that?!)Click the SIGN IN button on the pop-up page and sign in with my username/password and consent on behalf of my organization. BOOM! I see my agenda, planner tasks assigned to me and my mails!.
Conclusion Bootcamp 2
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, I saw more and more confirming messages coming in until I finally could say: YES! I made it as well.
- 3 Fun Facts:
Attending #M365dev Bootcamp at my hairdresser 💁🏻♀️
#NeverStopLearning #MicrosoftTeams 💜 #MicrosoftGraph 💙 #SharePoint
#womenintech13:08 PM - 13 Oct 2020
I attended the (first) BootCamp working on my 13" Laptop while sitting at my hairdresser for a 3-hour session
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 that 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 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 the 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 https://developer.microsoft.com/en-us/microsoft-365/bootcamps.
Originally published on https://m365princess.com
Top comments (0)