Backend and Frameworks

Table of Content

Web API

Web APIs (Application Programming Interfaces) provide built-in functionalities that allow JavaScript to interact with the browser and external services. This section covers key browser APIs, including LocalStorage, SessionStorage, Fetch API, and Geolocation API.

This Privacy Policy describes how Alevio ("we,"

"our," or "us"), founded and led by Felix Danyluk (CEO and Founder), collects, uses, and discloses your information when you use our application, website, and services (collectively, the "Service").

Wichtig: Alevio ist als privacy-first Anwendung konzipiert. Alle deine persönlichen Daten werden lokal auf deinem Gerät gespeichert und nicht an unsere Server übertragen, es sei denn, du aktivierst explizit Cloud-Funktionen.

1. Information We Collect

Alevio operates primarily as a local application.

The information stored includes:

• Personal information: name and preferences (stored locally only).

• Usage data: daily responses and insights (stored locally only).

• Device information: app preferences and settings (stored locally only).

• Al Chat data: when using Al features, messages are sent to OpenAl for processing.

2. How We Use Your Information

We use the information we collect to:

• Provide, maintain, and improve our Service.

• Personalize your experience.

• Communicate with you about our Service.

• Monitor and analyze trends, usage, and activities.

3. Sharing Your Information

We may share your information with:

• Service providers who perform services on our behalf.

• Business partners with whom we jointly offer products or services.

• Law enforcement or other third parties when required by law.

4. Data Security

We implement appropriate technical and organizational measures to protect the security of your personal information. However, please note that no method of transmission over the note that no method of transmission over the Internet or method of electronic storage is 100% secure.

5. Your Choices

You can access, update, or delete your account information at any time by logging into your account settings. You may also contact us directly to request access to, correction of, or deletion of any personal information that you have provided to us.

6. Children's Privacy

Our Service is not intended for children under the age of 13. We do not knowingly collect personal information from children under 13. If you are a parent or guardian and you are aware that your child has provided us with personal information, please contact us.

7. Changes to This Privacy Policy

We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.

8. Company Information

Alevio is founded and led by Felix Danyluk, CEO and Founder. Our commitment to privacy and data protection is a core value of our leadership team.

9. Contact Us

If you have any questions about this Privacy Policy, please contact us at privacy.alevio@gmail.com

Local Storage and Session Storage

The Web Storage API allows storing key-value pairs in the browser.

Local Storage (Persistent Storage)

Data stored using localStorage persists even after the browser is closed.

Setting and Getting Data

// Store data
localStorage.setItem("username", "Alice");
  
// Retrieve data
let user = localStorage.getItem("username");
console.log(user); // Outputs: Alice

Removing Data

localStorage.removeItem("username"); // Removes a specific item
localStorage.clear(); // Clears all stored data

Session Storage (Temporary Storage)

Session storage works like local storage but clears data when the session (tab) is closed.

sessionStorage.setItem("sessionUser", "Bob");
console.log(sessionStorage.getItem("sessionUser"));
sessionStorage.removeItem("sessionUser");

Fetch API (Making HTTP Requests)

The Fetch API allows JavaScript to make network requests asynchronously, commonly used for retrieving data from APIs.

Fetching Data from an API

fetch("https://jsonplaceholder.typicode.com/users/1")
  .then(response => response.json()) // Convert response to JSON
  .then(data => console.log(data)) // Handle retrieved data
.catch(error => console.error("Error:", error)); // Handle errors

Using `async/await` for Fetch Requests

async function getUserData() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/users/1");
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("Error fetching data:", error);
  }
}
  
getUserData();

Sending Data Using POST Request

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ title: "New Post", body: "Post content", userId: 1 })
})
  .then(response => response.json())
  .then(data => console.log("Post created:", data))
  .catch(error => console.log("Error:", error));

Geolocation API (Getting User Location)

The Geolocation API retrieves the user's current location.

Checking if Geolocation is Supported

if ("geolocation" in navigator) {
  console.log("Geolocation is supported!");
} else {
  console.log("Geolocation is not supported.");
}

Getting User's Current Location

navigator.geolocation.getCurrentPosition(
  position => {
    console.log("Latitude:", position.coords.latitude);
    console.log("Longitude:", position.coords.longitude);
  },
  error => console.log("Error getting location:", error.message)
);

Tracking User Location in Real-Time

navigator.geolocation.watchPosition(
  position => {
    console.log("Updated Location:", position.coords.latitude, position.coords.longitude);
  }
);

Clipboard API (Copying and Pasting Data)

The Clipboard API allows copying and pasting text programmatically.

Copying Text to Clipboard

navigator.clipboard.writeText("Copied text!").then(() => {
  console.log("Text copied to clipboard!");
});

Reading Text from Clipboard

navigator.clipboard.readText().then(text => {
  console.log("Clipboard content:", text);
});

Notification API (Displaying Browser Notifications)

The Notification API allows web applications to send notifications to users.

Requesting Notification Permission

if (Notification.permission !== "granted") {
  Notification.requestPermission().then(permission => {
    console.log("Notification permission:", permission);
  });
}

Sending a Notification

new Notification("Hello!", {
  body: "This is a notification from JavaScript.",
  icon: "icon.png"
});

Intersection Observer API (Detecting Element Visibility)

The Intersection Observer API detects when an element enters or leaves the viewport, useful for lazy loading images or triggering animations.

let observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log("Element is in view:", entry.target);
    }
  });
});
  
let targetElement = document.getElementById("observe-me");
observer.observe(targetElement);

Conclusion

Web APIs extend JavaScript's capabilities by enabling data storage, making HTTP requests, accessing user location, handling clipboard interactions, and displaying notifications. The next section will explore browser compatibility and performance optimization techniques to ensure smooth execution across different devices and environments.