Category Archives: Pzl Plumbers

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

Feature Bombing: Maximizing Utility in a Single Screen

Posted on by

Our project’s crowning glory is the integration of an array of user features within a single screen, a feat that not only meets but exceeds the criteria for the Feature Bombing badge. This dense yet intuitive design includes the Power Page, PCF component, Highscore component, Power BI for current progress, and a Chatbot. Each element is crafted to complement the others, providing a comprehensive, engaging user experience without overwhelming the interface. This strategic feature cramming showcases our team’s ability to balance complexity with coherence, ensuring every addition delivers value and enhances usability.

As we conclude this intense development phase, our array of badges reflects more than just our technical achievements; they’re a testament to our team’s innovative spirit, collaborative ethos, and unwavering commitment to excellence. These badges aren’t just accolades; they’re milestones on our journey of learning, growth, and contribution in the dynamic world of hackathons.

Final Stretch: Unlocking Advanced Badges on the Last Day of Development

Posted on by

As the ACDC Hackathon draws to its climax, our team’s dedication and innovative spirit have led us to target three advanced badges, each reflecting our commitment to solving complex problems with cutting-edge technology and best practices.

Crawler: Revolutionizing Assistance with Copilot Studio

In our quest for the “Crawler” badge, we’ve integrated Copilot Studio into our Power Page site, embedding a Copilot bot designed to aid users when they’re stuck on a course level. This ingenious feature utilizes a cloud flow triggered by the user’s input, leveraging the Dataverse action “Search Rows (Preview)” to find and return answers for the specified course level. This not only enhances user experience but also showcases our innovative use of search to solve a real-world business problem.

Client Side Salsa: Ensuring Smooth Performance with Modern Frameworks

Our pursuit of the “Client Side Salsa” badge highlights our application’s fluidity, achieved by running entirely within the client’s browser without becoming a cumbersome monolith. By crafting a PCF control for our interactive course game using TypeScript and React, we ensure our setup’s compatibility across a wide range of browsers. This approach underlines our strategic use of modern front-end frameworks to deliver a seamless and responsive user interface.

ACDC Craftsman: Demonstrating Development and Deployment Excellence

The “ACDC Craftsman” badge is a testament to our adherence to development and deployment best practices. We’ve established three environments (dev, UAT, & prod), focusing our component development within the dev environment. Our deployment strategy is streamlined through Power Platform ALM pipelines, incorporating a pre-deployment approval step via Teams. This allows for meticulous control over deployment timing and participants. Moreover, our use of Azure DevOps Repositories for the PCF control exemplifies our commitment to source control and project management excellence.

As we conclude this hackathon journey, these badges represent more than just our technical achievements; they signify our team’s holistic approach to innovation, user engagement, and operational efficiency. Our efforts to blend advanced technological solutions with practical application and meticulous project management illustrate the essence of true ACDC craftsmanship, setting a high bar for what can be accomplished in such a collaborative and competitive environment.

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.

Sharing is Caring: Fostering Collaboration in the Competitive Arena

Posted on by

Embodying the true spirit of the ACDC Hackathon, our team ventured beyond the pursuit of mere badges. By assisting another team in refining their analog clock component and sharing our repository for the high-score game component, we championed the essence of community and collaboration within the tech realm. Our efforts served not only to enhance another team’s project but also to disseminate valuable code, setting a standard for openness and collective support among competitors. This ethos of sharing knowledge and resources amplifies the potential for greater innovation and collective success.

The hackathon transcends the notion of mere competition; it represents a consortium of developers challenging the status quo, learning from one another, and crafting solutions that aim not solely at winning but at making a meaningful impact. Through our commitment to earning badges and our acts of sharing, we illuminate the core values of the hackathon—innovation, collaboration, and growth. Our experience demonstrates that when developers unite in their efforts, extraordinary outcomes are within reach, underscoring the power of teamwork in driving forward the boundaries of technology and community engagement.

As one can see, the Pzl Plumbers has also shaired their code, an open source HighScore PCF component, ready to be used in any game you would want to develop 🙂

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.

Triumph in the Trenches: Conquering the Head 2 Head “Hammer Bro” Challenge!

Posted on by

In the spirited arena of the ACDC Hackathon, Remi faced the exhilarating Head 2 Head challenge: “Hammer Bro”. Embracing the spirit of competition, he ventured into the creation of a 2D multiplayer game that not only tested his technical prowess but also his creativity and strategic thinking. The game, set within a labyrinthine platform maze, pitted players against each other in a thrilling duel of wits and agility, with missiles as their weapons of choice.

Crafting this game required Remi to delve into the intricacies of a Power Apps Component Framework (PCF) component, integrated seamlessly within a Canvas App. This technical feat allowed him to create a dynamic and interactive gaming experience, where players navigate the maze, strategizing and aiming to outmaneuver their opponents in real-time.

The development journey of his multiplayer maze game was a deep dive into the innovative integration of PCF components with React, TypeScript, and Phaser 3. Utilizing the PCF framework allowed him to embed his game directly within a Canvas App, providing a seamless and interactive user experience. By leveraging React and TypeScript, he crafted a responsive and intuitive game interface, ensuring smooth gameplay and real-time updates. The inclusion of Phaser 3, a powerful framework for building 2D games, was instrumental in bringing the intricate maze and its mechanics to life. This combination of technologies enabled him to create a rich, engaging game environment where strategy and quick reflexes are key to outmaneuvering opponents and securing victory. His approach to development was not just about utilizing these tools but mastering them to create an experience that was as thrilling to play as it was to build.

Download the game files here: https://we.tl/t-atBJGFumK3

Controls

Player 1

Move: WASD
Shoot: Space

Player 2

Move: Arrow keys
Shoot: Enter

To restart the game, press “R”

If you encounter any bugs, refresh 🙂

Seizing the Dawn: Our Quest for the Morning Glory

Posted on by

In the quiet hours before dawn, our team gathered with a shared resolve, embarking on our quest for the ACDC Hackathon’s “Morning Glory” badge. This early start wasn’t just about the tranquility that the morning offered, but it was a testament to our dedication to innovation and efficiency. As the sun rose, so did our ideas and productivity, setting a strong foundation for the day ahead. This practice not only accelerated our project’s development but also deepened our team dynamics, proving that the early bird does indeed catch the worm. Our commitment to seizing the dawn has been a pivotal strategy in our hackathon journey, embodying our ethos of discipline, collaboration, and the relentless pursuit of excellence.

The Midnight Oil Burns Bright

Posted on by

As the clock strikes 11:30 PM at the ACDC Hackathon, most would expect energy levels to dwindle and motivation to fade. Yet, within the confines of our workspace, the ambiance tells a different story—a tale of unwavering determination and remarkable team spirit that defies the late hour. This post is a testament to our journey, not just towards developing an innovative solution, but in pursuit of two distinct badges: “Remarkable Team Spirit” and “Thieving Bastards,” each emblematic of our ethos and strategy.

Remarkable Team Spirit

In the shadowy hours of the hackathon, when most are battling the weight of exhaustion, our team’s spirit only seems to amplify. It’s 11:30 PM, yet the air is electric with enthusiasm, a clear contender for the “Remarkable Team Spirit” badge. This extraordinary energy isn’t accidental but the result of our collective resolve to support, motivate, and inspire each other relentlessly.

How do we keep this spirit alive? It begins with recognizing each member’s contributions, celebrating small victories, and maintaining a culture of positivity and resilience. Music, laughter, and occasional breaks rejuvenate our minds, ensuring we stay motivated and focused. Our secret sauce? A shared vision that transcends individual goals, binding us in the pursuit of excellence.

Leveraging Legacy: Thieving Bastards

Transitioning from the vibrancy of our team dynamics, our journey also embraces the essence of the “Thieving Bastards” badge—our strategic decision to integrate third-party solutions into our project. Tasked with creating a game reminiscent of the iconic Super Mario, we initially grappled with the complexity of game logic and mechanics. The breakthrough came when we decided to not reinvent the wheel but to stand on the shoulders of giants.

Enter Phaser—a third-party library for React that became our game-changer. Phaser offered us a treasure trove of pre-defined game mechanics that we could employ out of the box, significantly accelerating our development process. This strategic move underscored the importance of leveraging existing tools and APIs, allowing us to focus on innovation and creativity rather than getting bogged down by the nitty-gritty of game development mechanics.

Koopa’s AI Challenge

Posted on by

Are you a noob in using AI for work, school or other everyday tasks?

During the hackathon, we will develop a gamified training app for AI newcomers, focusing on engaging users with retro-style graphics and playful animations. The app will feature interactive tutorials on AI tools like CoPilot and image generation, incorporating a competitive game element for users to score points, while ensuring learning effectiveness remains paramount. We’ll leverage a React front-end with Azure and Dataverse back-end to manage course progression and user data.

Core objective

Our core objectives are to create an immersive and enjoyable learning platform that demystifies AI for beginners through gamification. We aim to build a comprehensive educational experience that not only teaches the fundamental concepts of AI but also provides hands-on experience with practical applications in the Microsoft suite. Our goal is to foster a competitive yet educational environment where users are incentivized to deepen their understanding of AI tools, promoting both individual learning and collaborative competition. Ultimately, we strive to produce a product that is accessible, engaging, and continuously adaptable to the evolving landscape of AI technology.

The style of the game will be a retro super mario theme, where the user will be able to move between objects aka challenges and interact with them. Each challenge the user encounter, will give point if they manage to finish it. While moving in the platform world, the user will also be prompted with basic AI knowledge, to learn and understand how to interact with it. Challenges will both be in-game interactive experiences and out-of-game tasks like using copilot within the Microsoft environment.

Solution details

  • Power page for hosting the game
  • PCF component for the actual game
  • Dataverse tables for storage – Challenges, Users, Progression
  • Model driven app for administration of data
  • Power BI reports for easy data insight

Early delivery

Until 12:00 pm on thursday, Pzl Plumbers has gotten their environment up and running, implementing tables into dataverse that will store the information about users, their points and information regarding the challenges. Power platform pipelines are also configured to our three ALM enviroments (dev, uat, prod). Devops projects has been created for code repos and task management.

They have had some minor struggles with setting up the PCF component for the game, which will be implemented within their Power Page, but its coming along and the team spirit keeps shining as always!