Eventingo

“Eventingo” to aplikacja webowa, której głównym celem jest wyświetlanie użytkownikowi wydarzeń odbywających się w jego okolicy. Użytkownik może podać swoją lokalizację, a aplikacja wyszuka i zaprezentuje listę wydarzeń z Ticketmaster API na najbliższe 7 dni.

Działanie Aplikacji

  1. Strona Główna: Po uruchomieniu aplikacji, użytkownik widzi stronę główną, na której znajduje się formularz do wprowadzenia lokalizacji.
  2. Wprowadzenie Lokalizacji: Użytkownik wpisuje nazwę miasta w polu formularza.
  3. Wyszukiwanie Wydarzeń: Po zatwierdzeniu formularza, aplikacja wysyła zapytanie do serwera. Serwer następnie komunikuje się z API Ticketmaster, przekazując lokalizację oraz zakres dat (od aktualnej daty do 7 dni w przód), aby pobrać listę wydarzeń.
  4. Wyświetlanie Wyników: Aplikacja dynamicznie renderuje stronę, prezentując znalezione wydarzenia. Każde wydarzenie na liście zawiera nazwę, datę, miejsce oraz link do strony wydarzenia na Ticketmaster.
  5. Obsługa Błędów: W przypadku, gdy nie zostaną znalezione żadne wydarzenia dla podanej lokalizacji lub wystąpi błąd podczas komunikacji z API, użytkownikowi zostanie wyświetlony odpowiedni komunikat.

Aspekty Techniczne i Struktura

Aplikacja została zbudowana w oparciu o Node.js oraz framework Express.js do obsługi logiki serwera i routingu.

  • Frontend:
    • Struktura HTML jest generowana dynamicznie za pomocą szablonów EJS (Embedded JavaScript).
    • Style wizualne zdefiniowane są w pliku CSS (public/styles/main.css).
    • Interaktywność po stronie klienta, jak np. obsługa formularza i wyświetlanie komunikatów o sukcesie/błędzie, jest zarządzana przez JavaScript (jQuery) znajdujący się w pliku public/styles/script.js.
  • Backend:
    • Główna logika aplikacji znajduje się w pliku index.js.
    • Wykorzystuje bibliotekę axios do wykonywania zapytań HTTP do zewnętrznego API (Ticketmaster API).
    • Biblioteka body-parser służy do parsowania danych przesyłanych w ciele żądania HTTP (np. z formularza).
    • Zależności projektu oraz skrypty startowe są zdefiniowane w pliku package.json.

Kluczowe Fragmenty Kodu

Poniżej znajdują się kluczowe fragmenty kodu ilustrujące działanie aplikacji:

  • Konfiguracja serwera Express i obsługa żądania POST (index.js): Ten fragment pokazuje, jak serwer Express jest inicjowany, jak obsługuje żądania POST wysyłane z formularza (/submit) oraz jak komunikuje się z API Ticketmaster w celu pobrania danych o wydarzeniach.
JavaScript
import express from "express";
import bodyParser from "body-parser";
import axios from "axios";

// ... (inne importy)

const app = express();
const port = 3000;

app.use(express.static("public"));
app.use(bodyParser.urlencoded({ extended: true }));

const API_URL = "https://app.ticketmaster.com/discovery/v2/events";
const API_KEY = "klucz API"; // Pamiętaj o zabezpieczeniu klucza API w produkcyjnym środowisku!

app.get("/", (req, res) => {
  res.render("index.ejs", { events: [], error: null });
});

app.post("/submit", async (req, res) => {
  const location = req.body.location;

  const getFormattedDate = (date) => {
    const pad = (number) => String(number).padStart(2, '0');
  
    const year = date.getUTCFullYear();
    const month = pad(date.getUTCMonth() + 1);
    const day = pad(date.getUTCDate());
  
    const hours = pad(date.getUTCHours());
    const minutes = pad(date.getUTCMinutes());
    const seconds = "00Z";
  
    return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
  };


  const startDate = new Date();
  const endDate = new Date();
  endDate.setDate(startDate.getDate() + 7);
  
  const formattedStartDate = getFormattedDate(startDate);
  const formattedEndDate = getFormattedDate(endDate);

  try {
    const response = await axios.get(API_URL, {
      params: {
        apikey: API_KEY,
        startDateTime: formattedStartDate,
        endDateTime: formattedEndDate,
        city: location,
      },
    });
    const eventsArray = response.data._embedded?.events || [];

    const events = eventsArray.map((event) => ({
      eventName: event.name,
      eventDate: event.dates.start.localDate,
      eventLocation: event._embedded.venues[0].name,
      eventUrl: event.url
    }));

    res.render("index.ejs", { events: events, error: null});
  } catch (error) {
    console.error("Failed to make request: ", error.message);
    res.render("index.ejs", {
      events: [],
      error: "No events found for this criteria."
    });
  }
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});
  • Formatowanie daty:(index.js):
    Funkcja getFormattedDate jest odpowiedzialna za przygotowanie daty w formacie wymaganym przez API Ticketmaster (ISO 8601 UTC).
JavaScript
const getFormattedDate = (date) => {
    const pad = (number) => String(number).padStart(2, '0');
  
    const year = date.getUTCFullYear();
    const month = pad(date.getUTCMonth() + 1);
    const day = pad(date.getUTCDate());
  
    const hours = pad(date.getUTCHours());
    const minutes = pad(date.getUTCMinutes());
    const seconds = "00Z"; // API wymaga sekund i oznaczenia UTC 'Z'
  
    return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
  };
  • Mapowanie danych wydarzeń:(index.js):
    Ten fragment kodu pokazuje, jak dane otrzymane z API są transformowane do struktury, która jest następnie przekazywana do szablonu EJS w celu wyświetlenia.
JavaScript
const events = eventsArray.map((event) => ({
      eventName: event.name,
      eventDate: event.dates.start.localDate,
      eventLocation: event._embedded.venues[0].name, // Zakłada, że każde wydarzenie ma co najmniej jedną lokalizację
      eventUrl: event.url
    }));

“eventingo” to zgrabna aplikacja webowa, która efektywnie demonstruje integrację backendu opartego na Node.js i Express.js z frontendem wykorzystującym EJS, CSS i jQuery. Główną funkcjonalnością jest wyszukiwanie i prezentowanie wydarzeń z określonej lokalizacji, pobieranych w czasie rzeczywistym z API Ticketmaster. Projekt ten stanowi dobry przykład budowy aplikacji opartej o zewnętrzne API, obsługi żądań użytkownika oraz dynamicznego renderowania treści. Kod jest przejrzysty i dobrze zorganizowany, co ułatwia zrozumienie jego działania i ewentualną dalszą rozbudowę.

GITHUB

https://github.com/szymonMCS/eventingo.git

Udostępnij jeśli spodobał Ci się mój projekt