Digital multimedia management system Digital multimedia management system Digital multimedia management system
INTRODUCTION
Reason for Choosing the Project
In the digital transformation era, businesses must modernize operations and communication strategies Vietcombank's Head Office Transaction Center discovered inefficiencies in its advertising content management system, which depended on manual USB updates for smart TVs and web-based devices This outdated approach restricts operational flexibility, heightens administrative workload, and risks inconsistent content delivery To address these challenges, I initiated a project aimed at designing a solution that streamlines media management and improves communication effectiveness.
Motivation
This project is driven by the need to resolve operational bottlenecks at Vietcombank and modernize its advertising systems to meet contemporary technological standards.
• Automation of Processes: Reduce the need for manual intervention by automating content deployment and device management
• Enhanced Synchronization: Ensure consistent content playback across all devices, minimizing errors and enhancing customer experience
• Scalable Operations: Develop a system capable of handling the increasing complexity of future expansions
• Improved Monitoring: Provide real-time insights into device and content status, empowering better decision-making.
Objectives
Develop an independent, convenient, and user-friendly system that allows for synchronize devices and media content
Current Challenges
Currently, Vietcombank SGD relies on USB drives to update TVCs across devices This method is not only inefficient but also introduces the risk of outdated content being displayed
The lack of a centralized system results in discrepancies in playback across devices, leading to an inconsistent customer experience
There is no real-time monitoring of device or playback status, making it difficult to address issues promptly.
Scope of the Project
The scope of this project includes features that address the core challenges of media management at Vietcombank:
• Device Management: Add, update, and remove connected devices
• Media Management: Upload, organize, and schedule multimedia content for playback
• Content Synchronization: Ensure consistent and synchronized playback across all devices
• Real-Time Monitoring: Track the status of devices and playback in real time
Advanced analytics (e.g., AI-driven recommendations) are outside the current scope but may be considered for future iterations.
Problem Resolutions
To address the outlined challenges, the following solutions were implemented:
• Centralized Management: Utilizing Firebase Firestore to maintain a real- time database that synchronizes media and user data
• Automated Media Handling: Integrating Cloudinary for seamless media uploads, compression, and delivery, ensuring optimized performance
• User Authentication and Role Management: Employing Firebase Authentication to manage user roles, ensuring security and appropriate access control
• Real-time Monitoring and Updates: Implementing real-time synchronization features to allow instant updates to users and admins, ensuring consistent media playback
OVERVIEW OF TECHNOLOGY
Frontend Technologies
JavaScript is a versatile, high-level programming language essential for developing interactive and responsive web applications It accommodates various programming paradigms, including object-oriented and functional programming, providing developers with the flexibility to meet diverse development requirements.
1 Handles user interactions like clicks and data input through event handling
2 Enables asynchronous operations such as API requests using Promises and async/await
1 Compatible with all modern browsers, ensuring cross-platform usability
2 Vast ecosystem with numerous libraries and tools
1 Runtime error detection is limited due to dynamic typing
2 Requires stringent security measures to prevent vulnerabilities like XSS
TypeScript is a statically typed extension of JavaScript designed to improve code reliability and scalability It enhances error detection during development and supports features like interfaces and advanced tooling.[2]
1 Identifies type-related errors at compile time
2 Integrates seamlessly with modern development environments like Visual Studio Code
1 Facilitates collaboration and maintenance for large-scale projects
2 Offers a structured approach to scaling applications
1 Initial setup can be time-intensive, and a learning curve exists for beginners
2 Incremental adoption in legacy projects requires additional effort
Next.js is a React framework that enhances application performance and SEO by enabling server-side rendering (SSR), static site generation (SSG), and client-side rendering (CSR).
1 Simplifies routing through a file-based system
2 Supports API development directly within the project
1 Improves SEO and load times with optimized rendering options
2 Versatile for both static and dynamic content
1 Advanced features like SSR/SSG require a learning curve
2 Versatile for both static and dynamic content
React is a JavaScript library used to create reusable UI components Its Virtual DOM mechanism enhances performance by minimizing unnecessary DOM updates [4]
1 Component-based architecture ensures reusability and maintainability
2 A large community offers extensive resources and support
1 Steep learning curve for new developers
2 Managing application state in large projects can become complex
Tailwind CSS is a utility-first CSS framework that speeds up UI development by providing pre-defined classes, reducing the need for custom CSS [5]
1 Accelerates UI design and ensures consistent styling
2 Highly customizable through configuration files
1 Can lead to verbose and cluttered HTML
2 Developers accustomed to traditional CSS might face a learning curve
Zustand is a lightweight and efficient state management library designed for React applications, offering a minimalistic design and straightforward API It serves as an excellent alternative to more complex solutions like Redux, making it ideal for projects that prioritize speed and scalability.
1 Minimal Boilerplate Code: Zustand simplifies state management by providing a lightweight and intuitive API Developers can manage global states with minimal setup, reducing overhead compared to more complex libraries like Redux or MobX
2 High Performance: Zustand is optimized for fast state updates with minimal re-renders This performance advantage ensures that applications remain responsive, even when handling frequent or complex state changes
3 Flexibility and Scalability: Zustand supports advanced patterns, such as asynchronous state updates and middleware integration, without introducing unnecessary complexity This flexibility makes it suitable for a wide range of use cases
1 Limited Ecosystem: Compared to larger libraries like Redux, Zustand has a smaller community and fewer resources This limitation may hinder developers seeking extensive documentation or third-party integrations
2 Scalability for Large Applications: While Zustand excels in smaller projects, managing highly complex state relationships may require additional layers of abstraction, reducing its simplicity and ease of use
• State Management: Zustand manages global state (user, isAdmin, status) and provides an easy-to-use API for reading and updating the state
• Custom Logic: The logOut method integrates additional logic by interacting with Firebase Firestore before modifying the store's state
• Minimal boilerplate compared to other state management libraries
• Simple yet powerful API for managing and accessing the state (set, get)
• Lightweight and efficient, with no unnecessary re-renders caused by state updates
• Definition: SWR (Stale-While-Revalidate) is a React library for data fetching and caching that optimizes real-time data handling SWR is developed by Vercel
It follows a caching strategy that ensures the application fetches fresh data in the background while returning cached data for immediate responsiveness
SWR is ideal for applications that require real-time data updates and efficient caching strategies, offering simplicity and performance for modern web development [7]
1 Efficient Data Fetching with Caching: SWR implements a caching mechanism that stores fetched data locally, reducing the need for repeated API calls This feature ensures faster load times and reduces server load, improving overall application performance and user experience
2 Automatic Revalidation: SWR automatically updates stale data by fetching the latest version from the API, ensuring that users always see the most current information without needing to refresh the page This feature is particularly beneficial for applications with frequently changing data, like dashboards or news feeds
3 Simplifies Asynchronous Operations: By abstracting away common complexities of fetching, caching, and revalidating data, SWR allows developers to focus on application logic rather than data management, leading to cleaner and more maintainable codebases
1 Requires Robust Backend APIs: SWR relies on well-structured and performant APIs to deliver its benefits Poorly designed APIs or high- latency endpoints can negate the advantages of caching and revalidation, leading to degraded application performance
2 Limited Customization Options: While SWR simplifies many aspects of data fetching, it may not provide the flexibility required for complex data management scenarios, such as handling intricate dependencies or large- scale state management
Backend Technologies
Figure 2.8: Firebase compares to traditional technology [8]
Firebase, a cloud-based Backend-as-a-Service (BaaS) platform by Google, streamlines app development with features like real-time databases, authentication, and cloud storage Unlike traditional application architectures where data flows through multiple layers, Firebase connects client apps directly to its services, enhancing efficiency and simplicity A key feature is the Realtime Database, a NoSQL cloud database that synchronizes data in JSON format across all connected clients, making it ideal for applications needing instant updates, such as chat apps and collaborative tools Additionally, Firebase provides Firestore, a scalable database that supports complex querying and hierarchical data structures.
Firebase Cloud Storage allows developers to efficiently store and serve user-generated content like photos and videos, ensuring robust and secure file management that scales automatically with app growth Additionally, Firebase offers Cloud Functions, enabling developers to execute backend code in response to events triggered by Firebase features or HTTPS requests.
Firebase Analytics offers free, unlimited reporting on up to 500 distinct events, enabling developers to gain insights into user behavior and assess the impact of changes through real-time data When combined with Firebase’s Crashlytics, it allows developers to track and resolve stability issues, enhancing app performance and user satisfaction Additionally, backing up a project's database and media files is essential for data security and integrity.
Figure 3.9: Firebase storage Figure 2.9: Firebase storage [8]
Figure 2.9 illustrates the process of backing up a project’s database and media files using Firebase’s Firestore and Storage bucket, highlighting the importance of data integrity and recovery This visual representation emphasizes the necessity of securing data to prevent loss or damage The image includes the Firebase logo, Firestore and Storage icons, and an illustration of file transfer, effectively summarizing the steps involved in securing data within cloud services.
1 Firestore: A NoSQL database supporting real-time synchronization
2 Cloud Storage: Efficiently manages multimedia files
2 Provides real-time updates and supports cross-platform applications
1 Free tier imposes querying limitations
2 Potential for vendor lock-in due to reliance on proprietary tools
Cloudinary specializes in managing and optimizing multimedia content through advanced storage, transformation, and delivery features [9]
The Programmable Media solution offers many features and benefits for managing your media files in the cloud Some of the main benefits to developers are:
1 Minimize media-related efforts from your design and creative departments to reduce costs and decrease time-to-market
2 Use one-liners from your choice of a variety of frontend, backend or mobile SDK libraries for easy integration within your development framework
3 Enjoy cutting-edge, AI-based image, video, and audio transformation features
4 Cloud-based Media Library and REST APIs for upload, delivery and administration
5 Improved user experience with enhanced visual appearance that loads quickly on every device
1 Automatically optimizes images and videos for better performance
2 Integrates with Content Delivery Networks (CDNs) for faster global access
1 Enhances performance with dynamic transformations and reduces storage needs
2 Easily integrates with web applications
1 Premium features are only available in paid plans
2 Advanced configurations may require expertise
GitHub is a platform for version control and collaboration built on Git It enables teams to manage source code and track changes efficiently [10]
1 Supports branching and pull requests for collaborative workflow
2 Integrates with continuous integration (CI) and deployment (CD) pipelines
1 Repository: Developers create a repository to host their codebase
2 Branching: Team members create branches for new features or bugs fixes without affecting the main codebase
3 Collaboration: Changes are proposed via pull requests and reviewed by team members
4 Merging: Approved changes are merged back into the main branch
5 Deployment: Continuous integration tools automate testing and deployment processes
1 Facilitates teamwork with comprehensive version control tools
2 Enhances security through automated vulnerability detection
1 Beginners may find Git workflows challenging
2 Public repositories could risk exposing sensitive information if misconfigured
Vercel is a cloud platform tailored for deploying modern front-end applications
It supports frameworks like Next.js and provides serverless backend capabilities
1 Automates deployment processes through CI/CD pipelines
2 Enhances delivery speed with edge caching for low-latency content
1 Simplifies deployment and scales automatically for high traffic
2 Offers real-time previews for better team collaboration
1 Backend capabilities are limited to serverless functions
2 Costs can escalate with increased usage
APPLICATION DEVELOPMENT AND DEPLOYMENT
System workflow
• Users must log in to access their accounts and system features
• After logging in, users can view their account-specific data and use system features tailored to them
• Users can securely log out to end their session and protect their account
• Users can browse the list of available media curated by the admin
• This allows users to explore media content within the system as per their access rights
• Admins can add new users, setting up their accounts and assigning roles or permissions
• Admins can edit user details, such as updating account information or modifying access levels
• Admins can delete user accounts that are no longer needed in the system
• Admins can activate or deactivate user accounts, enabling temporary restrictions on access without removing the user permanently
• Admins can add new media files, uploading and configuring them for system-wide use
• Admins can edit media details, such as metadata, file information, or associated settings
• Admins can delete media files that are obsolete or no longer needed
• Admins can attach media files to specific users, linking personalized content or access to individual accounts
3 Action (System Control and Oversight)
• Admins have full control over user accounts and media files, ensuring the system runs securely and smoothly
• They can manage and update system configurations to enhance functionality or meet operational needs
• Manage data about total users, total number of uploaded media files and real-time online user
• Admin Logs In: The admin logs in to the application
• Admin Manages Users: The admin manages users, including creating, updating, and deleting user accounts
• Admin Manages Media: The admin manages media, including uploading, updating, and deleting media files
• Admin Assigns Media to Users: The admin assigns media to users
• Admin Updates User Status: The admin updates the status of users
• Admin Deletes Users: The admin deletes user accounts
• Admin Deletes Media: The admin deletes media files
• Admin: The admin who logs in to the application
• Application: The application that provides functionality to the admin
• Firebase: The Firebase service provider
• Cloudinary: The Cloudinary service provider
• The admin logs in to the application to manage users and media
• The application uses Firebase and Cloudinary services to provide functionality to the admin
• The admin can manage users, media, and assign media to users
Admin User Management Usecase Diagram
Figure 3.2: Admin user management usecase diagram
This diagram shows the interactions between the Admin and the Application for User Management The admin can perform the following actions:
• Login: The admin logs in to the Application
• Create User: The admin creates a new user account
• Edit User: The admin updates information of an existing user account
• Delete User: The admin deletes a user account
The Application uses Firebase services to manage user accounts
Admin Media Management Usecase Diagram
Figure 3.3: Admin media management usecase diagram
This diagram shows the interactions between the Admin and the Application for Media Management The Admin can perform the following actions:
Login: The admin logs in to the Application
Upload Media: The admin uploads media files to the Application (images, videos from local device or YouTube URL link file)
Update Media: The admin updates information of an existing media files Delete Media: The admin deletes media files
The Application uses Cloudinary services to manage media files
Figure 3.4: Admin actions usecase diagram
This diagram shows the interactions between the Admin and the Application for Actions The admin can perform the following actions:
Login: The admin logs in to the Application
Assign Media to Users: The Admin assigns media files to specific users or to all users
Update User Status: The admin updates the status of a user account
Delete Users: The admin deletes user accounts
The Application uses Firebase services to manage user accounts and media files
• User Logs In: The user logs in to the application
• User Views Assigned Media: The user views the media assigned to them
• User Logs Out: The user logs out of the application
• User: The user who logs in to the application
• Application: The application that provides functionality to the user
• Firebase: The Firebase service provider
• The user logs in to the application to view assigned media
• The application uses Firebase services to provide functionality to the user
• The user can view assigned media and log out of the application.
Architectural design
The system is structured into three core components:
The Client Layer utilizes a web-based interface to enhance user engagement by managing content display and directing user requests to the backend for processing.
The Server Layer is essential for processing requests from the Client Layer, executing application logic, and interacting with the Database Layer It validates user inputs, manages business logic like media assignment and user account management, and retrieves or updates data in the database After processing, the Server Layer formats the results for the Client Layer's rendering Technologies like Firebase Cloud Functions are utilized to implement server-side logic and create API endpoints, ensuring smooth communication between the Client and Database layers.
Database Layer: Serves as the primary repository, containing crucial data such user accounts, media files, and assignment records
The client-server architecture enables seamless communication between layers, allowing the server to process client requests and, when necessary, relay them to the database After executing the required operations, the server returns the results to the client for rendering, facilitating efficient data exchange and interaction.
32 for each layer to be built and maintained separately, enabling future system expansion
Figure 3.6: Media Management System Architecture design
This approach ensures modularity, scalability, and efficient separation of concerns, simplifying maintenance and further development
The system workflow consists of multiple interconnected components:
1 Frontend Workflow: The Frontend Workflow represents the user's interaction with the system Built with React.js and Next.js, the client layer collects inputs, sends requests to the backend via HTTP or API, and displays the results returned by the backend For example, when a user uploads a media file, the frontend sends this file along with metadata to the backend for further processing
2 Backend Workflow: The Backend Workflow defines how the server layer handles requests from the frontend It includes:
• Controller: Receives user requests and delegates them to the appropriate services
• Service: Processes business logic, such as validating user inputs or assigning media files to devices
• Repository: Interacts with the database to fetch or store data as required by the service logic
3 Database Design: The Database Workflow involves storing and retrieving data from two main sources:
• Firestore: Manages metadata such as media details, user information, and device statuses It supports real-time data synchronization with the frontend
• Cloudinary: Stores media files (images and videos) and optimizes their delivery through a global CDN This workflow ensures secure and efficient data handling, supporting both structured and unstructured data needs
The database is modeled using collections:
1 Users Collection: ID, location, mediaPlaying, password, status, username
Why Use Both Firebase and Cloudinary?
The restrictions of Firebase's free tier and the particular needs of this project led to the choice to employ both Firebase and Cloudinary:
1 Firebase Free Tier Limitation: Firebase's free tier has limited storage capacity, especially for media items like photos and videos, despite offering a comprehensive suite of tools for backend development Because of this, it is not appropriate for projects that need a lot of media storage
2 Cloudinary for Media Management: With features like worldwide content delivery, on-the-fly changes, and optimization, Cloudinary is excellent at managing media assets Without depending on Firebase's storage, the project
34 guarantees great performance and scalability by shifting media delivery and storage to Cloudinary
3 Separation of Concerns: Cloudinary manages media file delivery and storage, while Firebase handles authentication, real-time database operations, and metadata storage This division makes the most of both platforms' advantages
The application's backend, Firebase, handles media metadata storage, real-time data synchronization, and authentication Its main constituents are:
1 Firestore Database: A NoSQL database with scalability that is used to store media URLs and user profiles
2 Storage: Used to hold user-generated files, while the majority of the application's heavy media storage is managed by Cloudinary
To integrate Firebase, the following environment variables are used:
NEXT_PUBLIC_FIREBASE_API_KEY
NEXT_PUBLIC_FIREBASE_PROJECT_ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
NEXT_PUBLIC_FIREBASE_APP_ID
Each variable serves a specific purpose:
• API Key: Secures communication between the application and Firebase services
• Project ID: Identifies the Firebase project
• Storage Bucket: Specifies the location for file storage
• Messaging Sender ID: Facilitates Firebase Cloud Messaging setup
• App ID: Uniquely identifies the Firebase app
Cloudinary is used to optimize and manage media assets Important features include of:
1 Upload Management: Secure endpoints are used to upload media assets straight to Cloudinary
2 Content Delivery Network (CDN): Guarantees quick media content delivery worldwide
3 Dynamic Transformations: Offers real-time cropping, scaling, and format conversion to maximize the display of content
Cloudinary is configured using the following environment variables:
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
NEXT_PUBLIC_CLOUDINARY_API_KEY
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET
Each variable has a specific role:
• Cloud Name: Identifies the Cloudinary account
• API Key and Secret: Authenticate API requests securely
• Upload Preset: Configures default upload settings like allowed formats and folder paths
3.2.4 Description of the web development
3.2.4.1 Project Setup and Development Workflow
Step 1: Set up the Node.js environment
• Install Node.js from the official website nodejs.org
• Verify the installation using the commands: node -v npm -v
Step 2: Create a Next.js project
• Use create-next-app to create a new project: npx create-next-app@latest mms
• Navigate into the project directory: cd mms
• Create folders for routes in the /app directory:
• Create page.tsx files for the following routes: o Login: /app/login/page.tsx
36 o Admin:/app/admin/page.tsx,/app/admin/media/page.tsx, /app/admin/user/page.tsx, /app/admin/action/page.tsx o User: /app/play/page.tsx
Step 4: Create Types and Schemas (Models)
• Define Types and Schemas to support code suggestions and form validation in the project
Step 5: Configure Firebase and Cloudinary
• Create the lib/firebase.ts file to configure Firebase
• Create a env.local file to store necessary environment variables for Firebase and Cloudinary
Step 6: Download reusable components from Shadcn/UI
• Visit Shadcn/UI and download the required components for the project
Step 7: Initialize services for each model
• Create hooks for adding, editing, deleting, and viewing each model: o hooks/useFirebaseMedia o hooks/useFirebaseUser
Step 8: Create a Store for user information
• Initialize a Store to track user login states
• Integrate the Store in files /admin/layout.tsx and /play/page.tsx
Step 9: Build the User Management screen
• Fetch User data using the useFirebaseUser service
• Assign the delete service to the delete Icon in the Table
• Create Add and Edit modals
• Assign Add and Edit services to the modals
Step 10: Build the Media Management screen
• Fetch Media data using the useFirebaseMedia service
• Display data in a Table/List
• Assign the delete service to the delete Icon in the Table/List
• Create Add and Edit modals
• Assign Add and Edit services to the modals
• Integrate the Upload Widget from the next-cloudinary library
• Assign the add service to the Widget
Step 11: Build the Media Assignment screen for users
• Fetch User data using the useFirebaseUser service
• Create an Assign Modal for each card
• Fetch Media data using the useFirebaseMedia service
• Display Media data in the Assign Modal for selection
• Assign the user update service to the Modal
Step 12: Build the Dashboard screen
• Fetch User and Media data from Firebase
• Display the count of Users and Media using the retrieved data
3.2.4.2 Deployment project by using Vercel
The project had been deployed in Vercel:
Figure 3.8: Add new project name in Vercel
Figure 3.10: Set the name for new project
Figure 3.11: Add all configuration key of Firebase and Cloudinary in set up
Figure 3.12: Then click on deploy button
Figure 3.14: Vercel notify deployment successfully
System interface design
Deploy with Vercel at url https://mms-nine.vercel.app/
The login home page serves as the initial interface for visitors to the media management website, allowing users to access their existing accounts or register for a new account to utilize the system.
The Admin Dashboard serves as the central hub for administrators to monitor and manage key aspects of the Media Management System Admin Dashboard contains:
The central portion of the interface is a table displaying all registered users The table includes the following columns:
Figure 3.18: Create new user function
In order to create new user account, the system required:
• Username must be at least 3 characters
• Password must have least 8 characters
Location can be provided, if not the result will defined null (not displayed)
Figure 3.19: Create new user successful
If input satisfies all system requirement, the system displays a message
Figure 3.20: Create new user failed
If the input does not satisfy all system requirements, the system displays a message:
To delete a user account, click the trash icon next to the desired account A notification will appear, presenting the admin with two options: "Delete User" to proceed with the deletion or "Cancel" to abort the action.
After clicking the delete button, the system will delete all data of the user that needs to be deleted and the system will display a message: “delete successful”
To edit a user, the admin should click on the "edit" icon next to the desired user's name, which will open the user customization panel for further modifications.
After editing and updating user information, the system displays the message: “Update user successful”
The central part of the interface displays a list of media files, organized with the following columns:
• Add images in local device
Figure 3.26: Choose image to add
After click on Upload Image button, system display window for admin to drag and drop an asset or chooser browser to pick images in selected local file
Figure 3.27: Upload new image successful
After upload image successful, the images just been added display at the end of the list
• Add new video file on local device
Figure 3.28: Add new video file function
Figure 3.29: Choose local media file
The same as add new image file in local device, there are 2 options : drag and drop file and browser
Figure 3.30: System uploading media file
Figure 3.30: System processing media file
Figure 3.31: Add new video file successful
After a while uploading and processing, new video file just updated display at the end of the list
Figure 3.32: Add new media file failed
The inability to upload files exceeding 100 MB is a limitation set by the cloud storage service, Cloudinary, which enforces a default file size cap of 100 MB for free-tier accounts This restriction ensures that larger files cannot be uploaded to the platform.
• Add new YouTube video file
Figure 3.33: Add new YouTube media file function
To add a new media file, click the + Add button, which opens a window for the admin to enter the full name and a valid YouTube URL The preview section will then show the video's thumbnail.
Figure 3.33: URL link not vailid
If the url link not valid, preview section displays “Video unavailable”
Figure 3.34: Add new YouTube file successful
After add new YouTube file successful, it displays at the end of the list
Figure 3.35: Delete media file confirmation
To delete a media file, the admin simply clicks the delete button associated with the file This action prompts the system to show a notification window offering two options: to confirm the deletion or to cancel the operation.
When the system deletes successfully, it will notify: “Media delete successfully”
Figure 3.37: Edit media file function
Figure 3.38: Change media file name to “vcb digital”
Figure 3.39: Edit media file successful
After editing the media file information, the system will update the information of that media file in the list
Figure 3.40: Media management card list interface
Figure 3.41: Media management detail list interface
The system can also allow admin to flexibly change the list show interface
The Actions Interface is designed for administrators to manage the assignment and activation of media files for specific users Below is a detailed breakdown of its functionalities:
The main interface is organized into cards, each representing a user Each card includes the following details and actions:
• Assign Media to All Users
The status of usertest is “offline” at the moment
When admin activate account by click on the active button, account status has been updated to “online” and the system notify: “User status successfully”
3.3.7.2 Assign media for all user
When admin want to assign media file for all users, admin clicked on the Assign for all user button
Figure 3.45: Assign media for all user function
The system displayed window for admin to choose media file for all user
Figure 3.46: Assigned for all users successful
After choose file, the system will synchronize the media file for all users
3.3.7.3 Assign media file for specific user
In order to assign media file for user test, admin clicked on the assign button on user account admin want to add
Figure 3.47: Assign YouTube media file for usertest
Figure 3.48: Assign YouTube media for usertest successful
After update, user “usertest” preview the media file admin choose then the system pop- up notification
Figure 3.49: Assign media files for usertest
Figure 3.50: Assign media for usertest successful and playing first pick file
Figure 3.51: After first video end system automatic change to second pick media file
The system also has capability choose various files for user to assign (except YouTube url file)
CONCLUSION
Key Achievements
1 Scalability and Flexibility: The system can handle a large number of users and media files, making it adaptable for organizations of various sizes and industries
2 Streamlined Workflow: Automated processes for uploading, organizing, and deploying content reduce the administrative burden and potential for errors
3 Real-Time Insights: Administrators benefit from tools to monitor device status and media playback in real time, ensuring prompt issue resolution
4 Secure and Reliable Architecture: By leveraging Firebase for authentication and database management, and Cloudinary for media optimization, the system achieves both security and performance.
Advantages of the System
• Ease of Use: The intuitive interface minimizes the learning curve for administrators and users
• Cost Efficiency: The adoption of cloud-based services reduces infrastructure costs while maintaining high reliability
• Future-Proof Design: The modular structure and scalability of the system allow for future enhancements, including advanced analytics, AI-driven media categorization, and expanded file format support.
Challenges and Limitations
1 Dependency on Third-Party Services: The system relies heavily on Firebase and Cloudinary, which could pose challenges in case of service disruptions or changes in pricing models
2 Limited Analytics: While the system meets current operational needs, it lacks built-in analytics for detailed content performance tracking
3 No Dedicated Mobile Application: Accessibility is restricted to web platforms, limiting convenience for on-the-go users.
Future Directions
1 Integration of Advanced Features: Incorporate analytics tools for tracking media usage and user engagement
2 Mobile App Development: Build a mobile application to enhance accessibility and user convenience
3 AI Capabilities: Implement AI-driven features, such as automatic media categorization and personalized recommendations
4 Enhanced Security: Introduce advanced authentication mechanisms and data protection measures to address evolving security concerns
In summary, this project effectively tackles current media management challenges while establishing a robust foundation for future expansion By integrating innovative technologies with a user-focused design, the system showcases considerable potential to evolve into a versatile platform for managing multimedia content across diverse sectors.