Push notif v2

HackRPIEventApp2023/Box/Calander.js

@@ -49,6 +49,7 @@ const Calander = () => {
               Location={event.WorkShop_Location}
               Description={event.WorkShop_Description}
               isRed={Active}
+              dateAndTime={event.WorkShop_Date + " " + event.WorkShop_StartTime}
             />
           );
         })}

HackRPIEventApp2023/Box/CalanderObject.js

@@ -2,22 +2,168 @@ import React, { useState } from "react";
 import { View, StyleSheet } from "react-native";
 import { Feather } from "@expo/vector-icons";
 import EventObject from "./EventObject"; // Import the EventObject component
+import { useEffect, useRef} from 'react';
+import { Platform } from 'react-native';
+import * as Device from 'expo-device';
+import * as Notifications from 'expo-notifications';
+import Constants from 'expo-constants';
+
+Notifications.setNotificationHandler({
+  handleNotification: async () => ({
+    shouldShowAlert: true,
+    shouldPlaySound: true,
+    shouldSetBadge: true,
+  }),
+});
+
+async function sendPushNotification(expoPushToken) {
+  const message = {
+    to: expoPushToken,
+    sound: 'default',
+    title: 'Original Title',
+    body: 'And here is the body!',
+    data: { someData: 'goes here' },
+  };
+
+  await fetch('https://exp.host/--/api/v2/push/send', {
+    method: 'POST',
+    headers: {
+      Accept: 'application/json',
+      'Accept-encoding': 'gzip, deflate',
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(message),
+  });
+}
+
+async function registerForPushNotificationsAsync() {
+  let token;
+
+  if (Platform.OS === 'android') {
+    Notifications.setNotificationChannelAsync('default', {
+      name: 'default',
+      importance: Notifications.AndroidImportance.MAX,
+      vibrationPattern: [0, 250, 250, 250],
+      lightColor: '#FF231F7C',
+    });
+  }
+
+  if (Device.isDevice) {
+    const { status: existingStatus } = await Notifications.getPermissionsAsync();
+    let finalStatus = existingStatus;
+    if (existingStatus !== 'granted') {
+      const { status } = await Notifications.requestPermissionsAsync();
+      finalStatus = status;
+    }
+    if (finalStatus !== 'granted') {
+      alert('Failed to get push token for push notification!');
+      return;
+    }
+    token = await Notifications.getExpoPushTokenAsync({
+      projectId: Constants.expoConfig.extra.eas.projectId,
+    });
+    console.log(token);
+  } else {
+    alert('Must use physical device for Push Notifications');
+  }
+
+  return token.data;
+}
+
 
-//reusable component that ties an event object to it's notification bell
 const CalanderObject = ({
   workshop_Title,
   Time,
   Location,
   Presenter,
   Description,
   isRed,
+  dateAndTime,
 }) => {
   const [isActive, setIsActive] = useState(false); // Define isActive state
+  const [expoPushToken, setExpoPushToken] = useState('');
+  const notificationListener = useRef();
+  const responseListener = useRef();
+
+  const [notificationId, setNotificationId] = useState(null); // record the scheduled notification id
 
-  const handleClick = () => {
+  // Function to toggle the isActive state
+  const handleClick =async() => {
     setIsActive(!isActive);
+
   };
 
+  useEffect(() => {
+    registerForPushNotificationsAsync().then(token => setExpoPushToken(token));
+
+    notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
+      console.log(notification);
+    });
+
+    responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
+      console.log(response);
+    });
+
+    // parsing the dateAndTime String
+    const notiTime = dateAndTime;
+    const [dateString, timeString] = notiTime.split(' ');
+    const [year, month, day] = dateString.split('-');
+    const [hours, minutes] = timeString.split(':');
+
+    const eventTime = new Date(year, month - 1, day, hours, minutes); // create a Date object for event
+    const triggerTime = new Date(eventTime.getTime() - 5 * 60 * 1000); // subtract 5 minutes from event time
+
+    const currentTime = new Date(); // get current time
+
+
+    const notiPush = !isActive; // notiPush represents the status of notification need to push or not.
+    if (notiPush) {
+      const scheduleNotification = async () => {
+        try {
+          console.log('Current Time: ', currentTime, 'Trigger Time: ', triggerTime);
+          const delay = triggerTime.getTime() - currentTime.getTime(); // calculate delay in milliseconds
+          console.log('Workshop Title: ', workshop_Title, 'Date and Time: ', dateAndTime, 'Delay: ', delay);
+
+
+          if (delay > 0) {  // when the workshop is in the future
+            const notificationId = await Notifications.scheduleNotificationAsync({
+              content: {
+                title: 'Workshop Reminder', // notification title can be changed here!
+                body: 'Your workshop' + workshop_Title + 'is starting in 5 minutes', // notification body can be changed here!
+              },
+              trigger: {
+                seconds: Math.floor(delay / 1000),  // The difference between the event time and the current time in seconds
+              },
+            });
+            setNotificationId(notificationId);
+            console.log(`Notification scheduled with ID: ${notificationId}`);
+          } else {
+            console.log(isActive);  // console log the error when not in the future, because the passed workshop will not display in the page.
+            console.log('The workshop has passed. Notification not scheduled.');
+          }
+        } catch (error){  // one possibility to cause this error would be the push notification environment is not properly set up.
+          console.error('Failed to schedule notification:', error);
+          // Handle the error, e.g., show an error message to the user
+          alert('Failed to schedule notification. Please try again.');
+        }
+      };
+
+      scheduleNotification();
+    }else{  // if the "bell-off" icon is active, cancel the scheduled notification
+      if (notificationId) {
+        console.log('Cancelling notification with ID: ', notificationId);
+        Notifications.cancelScheduledNotificationAsync(notificationId);
+        setNotificationId(null);
+        console.log('Notification cancelled');
+      }
+    }
+
+    return () => {
+      Notifications.removeNotificationSubscription(notificationListener.current);
+      Notifications.removeNotificationSubscription(responseListener.current);
+    };
+  }, [isActive, dateAndTime, workshop_Title]);
+
   return (
     <View style={styles.container}>
       <EventObject

HackRPIEventApp2023/Box/WorkShops.json

@@ -2,8 +2,8 @@
   {
     "WorkShop_Title": "Participant Check-In",
     "WorkShop_Presenter": "TBD",
-    "WorkShop_Date": "2024-11-28",
-    "WorkShop_StartTime": "10:00",
+    "WorkShop_Date": "2024-4-17",
+    "WorkShop_StartTime": "00:39",
     "WorkShop_EndTime": "18:00",
     "WorkShop_Location": "DCC Lobby",
     "WorkShop_Description": "TBD"

HackRPIEventApp2023/Components/Notification/Notifications_Overview.md

@@ -0,0 +1,139 @@
+# Notifications Overview
+
+Notifications are an essential aspect of mobile and web applications, offering a way to convey important information to users, whether the app is running on the device or not. For instance, sports apps can notify users of their favorite team's scores. Notifications can also prompt apps to download data and update their interfaces, displaying alerts, playing sounds, or marking the app's icon.
+
+## Display
+
+Notifications appear on iOS devices' lock and home screens. They can be generated locally within an app or remotely from a managed server. Local notifications are set based on specific conditions like time or location. Remote notifications are generated by a server and sent through the Apple Push Notification Service (APNs), which handles their delivery.
+
+## Framework Capabilities
+
+The framework for managing notifications allows applications to:
+
+- Define supported notification types.
+- Schedule local notifications.
+- Handle and respond to incoming notifications.
+- Define custom actions associated with notification types.
+
+Although the system strives to deliver notifications promptly, immediate delivery cannot be guaranteed. The PushKit framework provides a more timely delivery mechanism for specific notification types, such as VoIP or watchOS features.
+
+For web applications, especially on Safari version 16.0 and higher, remote notifications can be generated using Push API code, working across Safari and other browsers, managed by a server.
+
+## Integration with Siri
+
+Siri can use the information from your app's notifications to make suggestions to users in Search, News, Safari, and other apps. Users can manage this feature through Siri and search settings.
+
+## Design Guidelines
+
+For notification design, it's recommended to follow the Human Interface Guidelines to ensure they are user-friendly and effective.
+
+## Topics
+
+### Notification Management
+
+- Central objects and delegates like `UNUserNotificationCenter` manage notification-related activities and responses.
+
+### Remote Notifications
+
+- Setting up a remote notification server and registering your app with APNs to send notifications.
+
+### Notification Requests
+
+- Creating delivery requests for local notifications and accessing delivered notification content.
+
+### Safari Push Notifications
+
+- Sending web push notifications for web apps and browsers, including Safari.
+
+### Notification Content
+
+- Modifying and inspecting notification payloads.
+
+### Triggers
+
+- Setting conditions for notification delivery, including time, location, and remote triggers.
+
+### Notification Categories and User Actions
+
+- Defining custom actions and categories for notifications to enhance user interactions.
+
+This summary covers the extensive capabilities and considerations for implementing notifications in applications, addressing both local and remote notifications, user interactions, and integration with system services like Siri and APNs.
+
+## Importance of Timing and Relevance
+
+- **User Preferences and Customization:** Allowing users to customize notification preferences, including types and frequency, enhances user experience and satisfaction.
+- **Smart Timing:** Leveraging user behavior data to schedule notifications for optimal engagement times can significantly increase interaction rates.
+
+## Advanced Notification Features
+
+### Interactive Notifications
+
+Interactive notifications go beyond basic alerts by enabling users to take action directly from the notification interface. This could include replying to a message, marking a task as complete, or even controlling playback for media apps.
+
+### Rich Media Notifications
+
+Integrating images, GIFs, video, and audio content within notifications can make them more engaging and informative. Rich media notifications are especially useful for news apps, e-commerce, and social platforms where visual content can convey a message more effectively than text alone.
+
+### Analytics and Optimization
+
+Implementing analytics to track how users interact with notifications is crucial for understanding their effectiveness. Metrics such as open rates, interaction times, and conversion rates can inform strategies for optimizing notification content, frequency, and timing.
+
+## Challenges and Considerations
+
+While notifications are powerful tools for engagement, developers must navigate challenges related to user privacy, device limitations, and platform-specific regulations. Obtaining user consent and providing clear options for managing notification preferences are essential for maintaining trust and compliance with privacy laws.
+
+### Battery Life and Performance Impacts
+
+Frequent notifications can impact device performance and battery life, especially if they trigger background activities. Balancing the need for timely updates with device resource constraints is crucial for ensuring a positive user experience.
+
+### Platform-Specific Features and Limitations
+
+Developers must consider the unique capabilities and limitations of each platform (iOS, Android, Web) when designing notification strategies. This includes platform-specific design guidelines, notification formats, and delivery mechanisms.
+
+## Security and Privacy Enhancements
+
+With growing concerns over data privacy and security, notifications must be designed with privacy in mind.
+
+- **End-to-End Encryption:** For sensitive information, notifications should employ end-to-end encryption to ensure that content is only accessible to the intended recipient.
+- **Minimal Data Use:** Design notifications to convey essential information without over-reliance on personal data, adhering to the principle of data minimization.
+
+## Cross-Platform Notification Strategies
+
+- **Unified Experience Across Devices:** Ensuring a seamless notification experience across mobile, web, and wearable devices is key to maintaining user engagement in a multi-device world.
+- **Platform-Specific Optimization:** While aiming for consistency, tailor notification strategies to exploit the unique features and adhere to the guidelines of each platform.
+
+Data-Driven Notification Design
+
+Analyzing User Engagement
+Behavioral Analytics:
+Tools and techniques for monitoring how users interact with notifications to fine-tune timing and content.
+A/B Testing: Implementing controlled experiments to compare different notification strategies and identify the most effective ones.
+User Segmentation
+Demographic Segmentation:
+Tailoring notifications based on user demographics to increase relevance and engagement.
+Behavioral Segmentation: Delivering personalized notifications based on past user actions and preferences.
+Enhancing User Experience
+
+Notification Priority and Management
+Priority Settings:
+Allowing users to set notification priorities to manage the urgency and visibility of alerts.
+Silent Notifications: Notifications that deliver information silently, without alerting the user immediately.
+Customizable Interfaces
+
+User-Controlled Settings:
+Providing extensive options for users to customize the look and feel of notifications.
+Theme Integration:
+Ensuring that notifications adhere to the app's theme and user-selected modes, such as dark mode.
+Technical Aspects
+
+Backend Infrastructure
+
+Scalability Challenges:
+Building a backend capable of handling a large number of notifications simultaneously.
+Reliability Measures: Techniques to ensure that notifications are delivered reliably, even in high-load scenarios.
+API Integration and Development
+
+Standard APIs and Protocols:
+Utilizing standard APIs for notification delivery, such as Google's Firebase Cloud Messaging (FCM) and Apple's APNs.
+Custom API Development: Developing bespoke APIs for specific application needs and complex notification logic.
+Compliance and Legal Considerations