NotesAppBot

QuickNotes: The Magic App

Microsoft FRT Project

Project Demo Video URL:

• https://youtu.be/Kppl_Rw00Cw
• https://www.loom.com/share/a9c80c8d4d93439196d28a7807aa8b13
• https://drive.google.com/file/d/1d9N1RRyItfxYKK8rryBWotCxt9yt3Prx/view?usp=sharing

Deployement on AZURE static web app: https://delightful-water-0584dd510.3.azurestaticapps.net

This is a simple web-based notes application built with HTML, CSS, and JavaScript. This Magic Notes App aims to provide users with a user-friendly digital notes app for quick and easy note-taking, organisation, and retrieval. Additionally, it includes a chat interface with a Magic Assistant. In the digital age, individuals often find themselves in need of a seamless and efficient way to capture and organize their thoughts, ideas, and important information. Traditional methods of note-taking may lack the flexibility and accessibility required in today's dynamic lifestyle. Users seek a user-friendly and feature-rich digital solution that allows them to create, store, and manage their notes effortlessly, enhancing productivity and ensuring that valuable information is readily available when needed.

Technologies Used

• HTML

Document Structure: The HTML file establishes the basic structure of the web page using standard HTML tags. It includes a head section with meta tags for character set and viewport configuration.

External Libraries: Utilizes Bootstrap (v5.3.2) via CDN for styling and responsiveness. Imports jQuery and Popper.js for Bootstrap functionality.

Navigation Bar: Implements a responsive navigation bar using Bootstrap's navbar component. Includes a Home link and a search form in the navigation bar.

Main Content: Contains a welcome message and two main sections: left and right. The left section is dedicated to adding and displaying notes. The right section features an embedded chat interface.

• CSS (Bootstrap for styling)

It defines the styling for the entire application. It customises the appearance of the navigation bar, buttons, cards, and other elements. Utilizes Bootstrap classes and adds custom styles for a cohesive and visually appealing design. It also ensures a responsive layout with CSS rules.

• JavaScript

Adding and Displaying Notes: Enables users to add notes with a title and text, storing them in the browser's local storage. Retrieves notes from local storage and dynamically displays them on the page.

Deleting Notes: Implements a function to delete notes with a confirmation prompt to prevent accidental deletions. Updates the local storage and refreshes the displayed notes.

Search Functionality: Implements a search feature that dynamically filters displayed notes based on user input. Updates the visibility of note cards based on the content matching the search query.

Interaction with External APIs: Embeds an iframe to integrate a chat interface with a Magic Assistant using the Bot Framework Web Chat API.

• Azure AI Bot Service

The chat interface embedded in the right section of application is powered by an Azure Bot. This bot is created using the Azure Bot Framework, providing conversational abilities to interact with users.

Steps involved in building a Azure AI Bot Service which provides a framework for developing, publishing, and managing bots on Azure:

• Automatic bot creation functionality, enables us to create a bot for our deployed knowledge base and publish it as an Azure AI Bot Service application.
• Testing the bot in an interactive test interface.
• Connecting channels

• Azure Static Web App Service

Azure Static Web Apps can simplify the deployment and hosting of static web applications. Instead of deploying app on traditional web hosting, we can use Azure Static Web Apps for a serverless hosting solution. It integrates with GitHub, providing a seamless deployment process whenever we push changes to our repository.

• Azure AI Language Service

The Language service is a part of the Azure Cognitive Services offerings that can perform advanced natural language processing over raw text. It includes a custom question answering feature that enables us to create a knowledge base of question and answer pairs that can be queried using natural language input.

• Azure Cognitive Search Service

Azure Cognitive Search provides the infrastructure and tools to create search solutions that extract data from various structured, semi-structured, and unstructured documents.

Question Answering Knowledge Base

Steps involved in building a Question Answering knowledge base:

• Provision a Language resource
• Define questions and answers
• Test the knowledge base
• Deploy the knowledge base

Getting Started

1. Clone the repository.
2. Open the index.html file in a web browser.

User Interface

How to Use

• Add a Note: Fill in the title and text fields, then click the "Save" button.

• Delete a Note: Click the "Delete" button on the note you want to remove. A confirmation prompt ensures you don't accidentally delete important notes.

• Search Notes: Enter keywords in the search bar to filter notes.

• Bot Service: Engage in a chat with the Magic Assistant to get assistance or information.

Features

1. User-Friendly Interface: This makes it easy for users to interact with the application.

2. Effortless Note-Taking: Users can quickly jot down notes using a simple form.

3. Organised Storage: All notes are stored in the user's browser localStorage, ensuring easy and secure access to previously saved notes without the need for account creation.

4. Search Functionality: Users can search for specific notes by entering keywords.

5. Delete Confirmation: To prevent accidental data loss, the app incorporates a delete confirmation prompt feature.

6. Responsive Design: A consistent and enjoyable user experience across various devices.

7. Integrated Bot: The Magic Assistant chatbot provides users with an interactive and intuitive way to seek assistance or engage in conversations, adding an extra layer of functionality and convenience to the note-taking experience.

Git Commands used to deploy this app on Github

git init

git add .

git commit -m "1st commit"

git remote add origin https://github.com/varunlaul24/NotesAppBot.git

git push -u origin master

Acknowledgments

• Bootstrap for styling.

Future Enhancements

1. Mark a note as important.
2. Separate notes by user.