Tag Archives: Power User Love

Koopa’s AI Challenge Unveiled: Experience the WOW Factor with Our Innovative Learning Odyssey!

Posted on by

Welcome to our groundbreaking blog post, where we embark on a journey through the dynamic landscape of innovation, efficiency, and seamless automation. In today’s digital era, businesses are constantly seeking robust solutions to elevate their operations, and in this exploration, we present a lineup of powerful products and components that redefine the realm of possibilities.

At the forefront of this technological evolution is the “Power Page,” a hub of capabilities designed to enhance user experiences and drive operational excellence. Join us as we delve into the intricacies of the Copilot Studio Chat Bot, seamlessly integrated with the prowess of Power Automate flows. This powerful duo promises to revolutionize communication channels and automate tasks, streamlining workflows with unparalleled ease. We have also integrated Power BI visualizations for showing player progress and overviews.

Behind the scenes, we delve into the backbone of our system – the Dataverse. This robust backend storage solution effortlessly manages progression course levels and active user data, providing a foundation for scalability and adaptability. Witness the synergy between technology and data management as we navigate through the capabilities of Dataverse.

But that’s not all. Enter the PCF Component, specifically Koopa’s AI Challenge, a cutting-edge addition that brings artificial intelligence to the forefront of your applications. Explore the possibilities as we unravel the potential of this innovative component in enhancing user interactions and engagement.

Last but certainly not least, our journey wouldn’t be complete without a glimpse into actionable insights provided by Power BI Reports. Transform your data into visual narratives, gain meaningful insights, and make informed decisions to drive your business forward.

Together, these products and components form a formidable alliance, promising a holistic and transformative approach to your digital endeavors. Join us as we navigate through the intricacies of each element, paving the way for a future where efficiency and innovation coexist harmoniously. Welcome to the era of empowered possibilities – welcome to the Power Page Chronicles.

ALM – Deployment

We have created tree environements for development, testing and production purposes. We have automated the deployment process with ALM – pipeline.

Imagine you’ve developed a robust solution in your Dev environment, and now it’s time to move it to UAT and eventually to Prod. However, you want to ensure that changes don’t go live without proper scrutiny. That’s where an approval process comes into play.

Power Automate

Power Automate allows you to create automated workflows that connect different services and applications. We’ll leverage Power Automate to trigger the approval process when a user requests a solution deployment.

Microsoft Teams

Microsoft Teams provides a collaborative workspace for your organization. We’ll use Teams to notify an admin group about pending solution deployments and allow them to approve or reject the changes.

Setting Up the Approval Workflow

Let’s break down the steps:

1. User Requests Deployment

  • A developer completes the solution in the Dev environment.
  • When ready for deployment, they initiate the process by requesting it through a designated channel.

2. Power Automate Workflow

  • Create a Power Automate flow triggered by the user’s deployment request. Sends an adaptive card to admin group in Microsoft Teams

3. Approval in Microsoft Teams

  • The adaptive card is sent to an admin group in Teams.
  • Admins receive a notification and can review the deployment details.
  • They can either click approve or reject after review is done.

Following the introduction of our foundational technologies and their impact on business operations, we now turn our attention to the heart of our digital innovation: the game component, ingeniously embedded within our Power Page. This game, dubbed “Koopa’s AI Challenge,” is not just a testament to our creative prowess but a strategic tool designed to engage, educate, and entertain users in a uniquely interactive environment.

The Genesis of Koopa’s AI Challenge

At its core, “Koopa’s AI Challenge” leverages the dynamic capabilities of Phaser 3 for game mechanics, married seamlessly with the sophistication of React and TypeScript (TSX) for development. This blend of technologies allows us to present a game that is not only visually appealing but deeply integrated with the educational and interactive objectives of our PCF comopnent.

Integration into Power Page

The integration of the game within the Power Page is a feat of technical ingenuity. By embedding the PCF (Power Apps Component Framework) control, we ensure that the game is not an isolated experience but a cohesive part of the user’s journey on our site. This approach allows for a seamless transition between learning modules and interactive gameplay, enhancing the overall user experience and engagement.

Leveraging Phaser 3 for Game Mechanics

Phaser 3 stands at the forefront of our game development, providing a robust framework for creating immersive 2D gaming experiences. Its extensive suite of tools and features enables us to craft complex game mechanics, such as character movement, obstacle navigation, and interactive challenges that users must navigate through. This results in a game that is not only fun to play but also challenges the user’s problem-solving skills and application of knowledge acquired through the platform.

React and TypeScript: A Powerful Duo

The use of React and TypeScript for developing the game’s interface and logic ensures a highly responsive and intuitive user experience. React’s component-based architecture allows for efficient updates and rendering, making the game fluid and engaging. TypeScript, with its strong typing, enhances code quality and reliability, ensuring that the game mechanics are robust and error-free.

The Educational Twist

What sets “Koopa’s AI Challenge” apart is its educational underpinning. Each level of the game corresponds to a course or module within the platform, challenging users to apply what they’ve learned in a practical, engaging context. This gamification of learning not only reinforces knowledge retention but also adds an element of fun to the educational journey.

Integrating seamlessly within our Power Page, we leverage Power BI to vividly display user progress through dynamic, interactive reports. This integration ensures that users can visually track their achievements and milestones, enhancing motivation and engagement. Simultaneously, our solution taps into the Dataverse API to fetch course content, ensuring that each user’s journey through the courses is smooth, personalized, and up-to-date. Complementing these features, our site hosts a Copilot Chatbot, a virtual assistant ready to offer users guidance, answer queries, and provide support for course-related challenges. This trio of features—Power BI progress visualization, Dataverse content integration, and Copilot Chatbot assistance—synergistically elevates the user experience, making our solution not just a tool, but a comprehensive learning companion.

Conclusion

“Koopa’s AI Challenge” is more than just a game; it’s a bridge between education and entertainment, powered by cutting-edge technology and integrated seamlessly into our Power Page. As users navigate through the levels, they’re not just playing; they’re learning, engaging, and interacting with content in a way that’s both innovative and impactful. This game is a cornerstone of our digital offering, exemplifying our commitment to creating solutions that are not only technologically advanced but also meaningful and user-centric.

As we conclude our exploration of the Power Page Chronicles, “Koopa’s AI Challenge” stands as a beacon of our innovative spirit, showcasing the potential of combining technology, education, and gaming in creating transformative user experiences. Join us on this journey of discovery and empowerment, where each interaction is an opportunity to learn, grow, and be entertained.

Link to demo video:

https://pzlcloud-my.sharepoint.com/:v:/g/personal/remi_blom-ohlsen_puzzlepart_com/EXKTMb_lOI5BhJ5ejfPWQr8BRnqEVOMJbGfo6yzfjEaT5g?e=yRUAl6

Powering the office

Posted on by

By using Teams and Power BI, we can allow our office workers to handle new orders quickly, and easily. They will receive alerts through an channel of new orders, and to make sure they are handled quickly, a user will be tagged if not handled within 1 hour by using Power Automate

Awesome statistics to show how much Toad helps!

Posted on by

We have created a C# function app in Azure that is triggered in the power app, via a power automate flow. From the power app we send in the name of the user and write to Dataverse how many times the user has clicked the button to get help. The thought behind is that we can get KPI’s on how often the user has “cheated” or if the user is a very knowledgeable person.

When the user pushes the picture of Toad to get help in the quiz, we send with the name of the user to power automate that triggers a Azure function app in C# that takes in the variable of the person playing:

The power automate flow then updates dataverse with one new attempt, to be used in the Power BI Dashbord and gives a notification back to the user that the cheating is noted.

Round 2 of Power User Love

Posted on by

The Banana Portal™  includes a banana pickup route planner for the Norwegian Road Authority. Every detected banana is registered in Dataverse, added as a waypoint, and voila! An optimised route is calculated. Combining power pages (low code) and a PCF written in typescript:

Power Use Love

Posted on by

Canvas apps are probably the greatest example of how Low Code and Pro Code can come together. In many cases you never really need to to any code, but when creating a game, you definitely need to tap into the developer logic.

If anyone disagrees on code vs NoCode, both Donkey Kong and Nick will smash something 🙂

Pro code <3 Low-code

Posted on by

We have used both low-code platform and with pro code in in our solution.

The Pro code:

We are using Raspberry Pi to run our Mario Detection software. There was some programing needed to get it to work!!!
The Mario Detection camera posts the image, encoded in base64, to a Power Automate flow. The flow then uploads the image to a sharepoint folder, and another flow then sends a push notification to the Koopa Kompanion app.

The Low-code:

By using Power Apps—a low-code tool, helpful prebuilt templates and drag-and-drop tools, we could easily put together a nice front end for Koopas in the field.

Nighttime Progress: A Snapshot of Dedication

Posted on by

As the night deepens at the hackathon, our team’s resolve only strengthens. With the outside world cloaked in darkness, the glow of our monitors lights up our determined faces. Remi delves into the heart of game development, fine-tuning mechanics to ensure our game is as engaging as it is seamless. His dedication to crafting an immersive experience is a beacon of our team’s passion for excellence.

In parallel, Sindre channels his creativity into Power Page styling and design, focusing on creating a visually appealing and intuitive user interface. His efforts to blend form with function are pivotal, ensuring that our project not only captivates but is also accessible and enjoyable for users. Together, their work epitomizes our team’s dynamic capabilities and unified goal: to deliver a project that stands out for its innovation and user-centered design, proving that even as the night wears on, our spirit and productivity soar.

Piping our way through the Azure Cloud

Posted on by

To make our amazing service Tubi work, a lot of cloud is needed. We aim to make the plumber’s job easier by recommending the best layout for where the pipes should go, and for that, we need AI. We have trained a model in Custom Vision to recognize all components in a bathroom that need water. So, when the plumber uploads a floor plan to our Static Web App, the image is sent to our Azure Function App backend in C# Asp.net through our own API. But both the image and the equipment list must be stored somewhere. Therefore, we have also connected to Azure Blob Storage. Then last but not at all least. The people working in the back office have instant interactive reports available to help them with filing and billing through Power BI and alerting the using an automated flow (Badges: Feature Bombing)

Sometimes it works, and that’s plenty

Databases are good, but sometimes it’s easier to just dump everything in one place until you need it again. Yes, it might not be very scalable or very normalized. SQL became too heavy, and we already needed a Blob storage to store the images, so we also dump the order data in the same blob storage as JSON files. It’s old fashioned way of serverstorage, and a bit dirty, but it works! (Badges: Nasty hacker, Retro badge)

Power the backoffice

As the final list of components are decided, they still have to be approved from the accounting team in the office. To make sure they have all the information they require, we have developed a Power BI dashboard to crawl through our registered data and make sure the orders are handled properly (Badges: Crawler, Dash it Out, Dataminer). And to make sure the orders are handled easy and fast, the dashboard is embedded into teams and an alert is automated by using a logic app to make sure the workers can receive and cooperate in realtime (Badges: Embedding Numbnuts, Go with the flow, Pug N’ Play, Power user love, Right Now, Stairway to heaven).

A Day of Triumph: Unlocking Multiple Badges in a Single Sprint !?

Posted on by

Streamlining Efficiency: The “Go with the Flow” Badge Achievement

In the pursuit of optimizing business productivity within our solution, the implementation of an ALM pipeline has been a game-changer. This automated transfer of solutions between environments not only saves significant time and effort but also ensures that both unmanaged and managed versioning packages of the solution are seamlessly transitioned. Furthermore, the integration of a Power Automate flow for the approval of deployments has elevated our operational efficiency, marking a significant milestone in our journey to “Go with the Flow.” This achievement underscores our commitment to leveraging workflow automation for enhanced productivity.

Uniting Power and Simplicity: The “Power User Love” Badge

Our solution showcases an exemplary blend of low-code platforms with pro-code customization, embodying the #ProCodeNoCodeUnite philosophy. By implementing a Power Pages site for user interface and login, coupled with a PCF component coded in React and TypeScript for a gamified course, we demonstrate the power of integrating professional coding standards with low-code solutions. This approach not only streamlines development but also opens up a realm of possibilities for creating robust, user-friendly applications.

Gamification at Its Best: Achieving the “Mario Badge”

Elevating user interaction through gamification, the implemented PCF component with interactive controllers to navigate through course levels. Each course represents a level, challenging users to advance and showcase their proficiency. This gamification aspect not only makes learning more engaging but also encourages users to level up their skills in a fun and interactive environment.

Visual Insights: The “Dash It Out” Badge

Our solution now features a Power BI report embedded within the Power Pages site, along with additional reports for user access to high scores and admins for an overview of active players and their progress. These reports, showcasing at least four graphs, gauges, or KPIs, highlight the business value of our dashboard. The integration of these visual insights ensures that both users and administrators have a comprehensive understanding of performance metrics at their fingertips.

Adaptive Excellence: Securing the “Chameleon” Badge

The responsiveness of the Power Page, adapting automatically to all devices and screen sizes, exemplifies our solution’s versatility. This inherent adaptability ensures that our application delivers a consistent and user-friendly experience across various platforms, earning us the “Chameleon” badge. It’s a testament to our dedication to creating solutions that are not only powerful but also universally accessible.

Analog Odometer Visualisation through PCF – Make it rain!

Posted on by

While this is a great visualisation, we must announce that the CSS and JS was not created by us, but by the great Developer VictorNP, which proposed a vanilla JS solution which we transformed into React functional components. As stated by the designer, It is mainly designed to be a read-only component used to display information – Therefore we’ve limited to bounded context fields.

This is an great example of how the limited possibilities of Dashboards in Dynamics directly, can easily be mitigated, as well making the visualisation reusable for different contexts through PCFs, making custom, code-first visuals in our Low-code solution. By harnessing the power of client-side processing, we ensure that our solutions are not burdened by heavy monolith front-ends, guaranteeing a seamless and responsive user experience every time. Of course, memorisation is applied to improve the transitions and performance of the visualisation.

The PCF component on a CRM form

Moreover, the PCFs functions as plugins for Power Apps, which further enriches the user experience through customisation. Our use cases will be mostly related to displaying important business and plumbing related KPI’s to keep track on the current state of our business. Lastly we wanted others to be able to reuse this visual and provide improvements to it, so we Open sourced it and made available on Github! Contributions are very welcome!