Tag: firebase

Opublikowane w

Szara Piechota – Odtwarzacz z Synchronizowanym Tekstem

Szara Piechota – Interaktywny Odtwarzacz Patriotycznej Pieśni

Cześć wszystkim! Chciałbym podzielić się z Wami moim najnowszym projektem – interaktywnym odtwarzaczem pieśni “Szara Piechota” z synchronizowanym tekstem.

🎵 O czym to jest?

Stworzyłem aplikację webową, która odtwarza patriotyczną pieśń “Szara Piechota” z tekstem pojawiającym się dokładnie w momencie, gdy jest śpiewany. To połączenie tradycji z nowoczesną technologią webową.

�� Live Demo

Możecie przetestować aplikację tutaj: https://szara-piechota-song.web.app/

✨ Funkcje

  • Synchronizacja tekstu – każda linia pojawia się w odpowiednim momencie muzyki
  • Patriotyczny design – kolory narodowe Polski (czerwony i biały)
  • Responsywność – działa na wszystkich urządzeniach
  • Intuicyjne sterowanie – play/pause, regulacja głośności, przewijanie

🛠️ Technologie

Projekt został zbudowany przy użyciu:

  • HTML5 – struktura strony
  • CSS3 – patriotyczny design z gradientami
  • JavaScript (ES6+) – synchronizacja tekstu z muzyką
  • Web Audio API – odtwarzanie audio
  • Firebase Hosting – wdrożenie aplikacji

🎯 Cel projektu

Chciałem stworzyć coś, co łączy polską tradycję wojskową z nowoczesną technologią. “Szara Piechota” to jedna z najważniejszych pieśni patriotycznych, a dzięki synchronizacji tekstu można lepiej zrozumieć i przeżyć jej treść.

📱 Jak używać

  1. Wejdź na stronę
  2. Kliknij przycisk “ODTWÓRZ”
  3. Ciesz się synchronizowanym tekstem!

🔗 Kod źródłowy

Projekt jest open-source i dostępny na GitHub. Możecie go znaleźć w moim repozytorium:

https://github.com/traininguniverse/szara-piechota

Opublikowane w

Hosting Google Firebase: deploy App

      Pokażę jak mniej więcej można skorzystać z darmowego hostingu oferowanego przez Google. Oto kolejne kroki:

  1. Najpierw powinniśmy zainstalować Node.js:
    https://nodejs.org/en

2. Sprawdzenie instalacji w cmd lub terminalu.

3. Instalacja jakiegoś edytora, np. Visual Studio Code.

 

4. Uruchomienie strony Google Firebase.

5. Stworzenie projektu i nadanie mu jakiejś nazwy.

6. Kolejno instalacja firebase w konsoli, narzędzi firebase i zalogowanie się do serwisu.

 

7. I teraz możemy zainicjalizować szablon aplikacji i deployować aplikację na hosting.

Możemy wcześniej w katalogu public zedytować plik index.html. Na przykład tak jak poniżej.

Gotową aplikację możemy podejrzeć pod udostępnionym adresem URL.

Google Firebase to nie tylko hosting. Mamy tu też dostęp m.in. do bazy danych, autentykacji i wielu innych.

Opublikowane w

Zbudowanie aplikacji bazującej na React i Firebase: CRUD

Kolejne kroki:

  • Instalacja środowiska programistycznego np. ‘Visual Studio Code‘.
  • Instalacja Node.js.
  • Weryfikacja instalacji:

node -v

npm -v

  • Tworzenie projektu React JS:

npx create-react-app todoapp

cd todoapp

code .

npm start

  • Tworzenie projektu Firebase.
  • Tworzenie bazy danych dla aplikacji:
    a)klikamy ‘Firestore database‘
    b)następnie: ‘Start in test mode‘
    c) nadanie nazwy dla kolekcji
    d) dodanie jakichś przykładowych danych
  • Integracja Firebase z projektem React

npm install firebase

  • Stworzenie pliku konfiguracyjnego ‘firebase.js‘ w katalogu źródłowym. Tutaj dodajemy konfigurację z Firebase do połączenia:
    a) klikamy w ikonkę Web ”
    b) nadanie nazwy dla naszej aplikacji
    c) rejestracja aplikacji
    d) skopiowanie ‘firabaseConfig‘
//zawartość pliku 'firebase.js'
import { initializeApp } from "firebase/app"

const firebaseConfig = { //tutaj trzeba uzupełnić własną konfiguracją

  apiKey: "",

  authDomain: "",

  projectId: "",

  storageBucket: "",

  messagingSenderId: "",

  appId: ""

};

export const app = initializeApp(firebaseConfig);
//App.js
import './App.css';
import { Component } from 'react';
import { collection, deleteDoc, getDocs, getFirestore, addDoc, doc, setDoc } from 'firebase/firestore/lite';
import { app } from './firebase';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      notes: []
    }
  }

  async refreshNotes() {
    var notesList = [];
    const db = getFirestore(app);
    const notesCol = collection(db, 'notes');
    const notesSnapshot = await getDocs(notesCol);

    notesSnapshot.forEach(doc => {
      let note = doc.data();
      note.id = doc.id;
      notesList.push(note);
    });
    this.setState({ notes: notesList });
  }

  componentDidMount() {
    this.refreshNotes();
  }

  async addClick() {
    var newNotes = document.getElementById("newNotes").value;
    var newNotesObject = { description: newNotes };
    const db = getFirestore(app);
    const notesCol = collection(db, 'notes');
    await addDoc(notesCol, newNotesObject);
    this.refreshNotes();
  }

  async deleteClick(id) {
    const db = getFirestore(app);
    const notesRef = doc(db, 'notes/' + id);

    await deleteDoc(notesRef);
    this.refreshNotes();
  }

  async updateClick(id) {
    const updatedDescription = prompt("Enter the updated description:");
    if (!updatedDescription) return; // If user cancels the prompt

    const db = getFirestore(app);
    const notesRef = doc(db, 'notes', id);

    await setDoc(notesRef, { description: updatedDescription }, { merge: true });
    this.refreshNotes();
  }

  render() {
    const { notes } = this.state;
    return (
      <div className="App">
        <h2>Todoapp</h2>
        <input id="newNotes" /> 
        <button onClick={() => this.addClick()}>Add Notes</button>
        {notes.map(note =>
          <p>
            <b>* {note.description}</b>  
            <button onClick={() => this.deleteClick(note.id)}>Delete Notes</button>
            <button onClick={() => this.updateClick(note.id)}>Update Notes</button>
          </p>
        )}
      </div>
    );
  }
}

export default App;

Opcjonalnie/dodatkowo możemy:

  1. Zainstalować wtyczkę Visual Studio Extension: ‘Prettier-Code formatter‘ do sformatowania kodu żeby bardziej przejrzyście wyglądał
    skrót: ‘Ctrl + Shift + I’ do użycia po włączeniu wtyczki
  2. Instalacja rozszerzenia ‘Print‘, jeżeli chcemy wydrukować kod źródłowy.