<ul>
			</ul>



            <div class="podlove-web-player intrinsic-ignore podlove-web-player-loading" id="player-6ac989fba4e07"><root data-test="player--xl" style="max-width:950px;min-width:260px;">
  <div class="tablet:px-6 tablet:pt-6 mobile:px-4 mobile:pt-4 flex flex-col">
    <div class="flex-col items-center mobile:flex tablet:hidden">
      <show-title class="text-sm"></show-title>
      <episode-title class="text-base mb-2"></episode-title>
      <subscribe-button class="mb-4 mobile:flex tablet:hidden"></subscribe-button>
      <poster class="rounded-sm w-48 shadow overflow-hidden"></poster>
      <divider class="w-full my-6"></divider>
    </div>

    <div class="tablet:flex flex-grow">
      <div class="w-64 mobile:hidden tablet:block tablet:mr-6">
        <poster class="rounded-sm shadow overflow-hidden"></poster>
      </div>
      <div class="w-full">
        <div class="hidden tablet:block">
          <show-title class="text-base"></show-title>
          <episode-title class="text-xl desktop:text-2xl"></episode-title>
          <divider class="w-full my-4"></divider>
        </div>
        <div class="flex items-center justify-between">
          <div class="block">
            <play-state on="active">
              <speed-control class="flex items-center"></speed-control>
            </play-state>
          </div>

          <div class="flex">
            <play-state on="active">
              <chapter-previous class="mx-2 block"></chapter-previous>
            </play-state>
            <play-state on="active">
              <step-backward class="mx-2 block"></step-backward>
            </play-state>

            <play-button class="mx-2 block" :label="$t('PLAYER.PLAY_EPISODE')"></play-button>

            <play-state on="active">
              <step-forward class="mx-2 block"></step-forward>
            </play-state>
            <play-state on="active">
              <chapter-next class="mx-2 block"></chapter-next>
            </play-state>
          </div>

          <div class="block">
            <play-state on="active">
              <volume-control class="flex items-center"></volume-control>
            </play-state>
          </div>
        </div>
        <div class="flex w-full">
          <progress-bar></progress-bar>
        </div>
        <div class="flex w-full -mt-2">
          <div class="w-3/12 text-left">
            <timer-current class="text-sm"></timer-current>
          </div>
          <div class="w-6/12 text-center truncate">
            <play-state on="active">
              <current-chapter class="text-sm"></current-chapter>
            </play-state>
          </div>
          <div class="w-3/12 text-right">
            <timer-duration class="text-sm"></timer-duration>
          </div>
        </div>
      </div>
    </div>
    <divider class="w-full mt-6 mb-3"></divider>
    <div class="flex justify-between">
      <div class="flex mobile:w-full tablet:w-3/12 desktop:w-3/12 justify-between">
        <tab-trigger tab="chapters">
          <icon type="chapter"></icon>
        </tab-trigger>
        <tab-trigger tab="transcripts">
          <icon type="transcripts"></icon>
        </tab-trigger>
        <tab-trigger tab="files">
          <icon type="download"></icon>
        </tab-trigger>
        <tab-trigger tab="playlist">
          <icon type="playlist"></icon>
        </tab-trigger>
        <tab-trigger tab="share">
          <icon type="share"></icon>
        </tab-trigger>
      </div>
      <subscribe-button class="mt-1 mobile:hidden tablet:flex"></subscribe-button>
    </div>
  </div>
  <div class="w-full relative overflow-hidden">
    <tab name="chapters">
      <tab-chapters></tab-chapters>
    </tab>
    <tab name="transcripts">
      <tab-transcripts></tab-transcripts>
    </tab>
    <tab name="files">
      <tab-files></tab-files>
    </tab>
    <tab name="playlist">
      <tab-playlist></tab-playlist>
    </tab>
    <tab name="share">
      <tab-share></tab-share>
    </tab>
    <tab-overflow></tab-overflow>
  </div>
  <error></error>
</root>
</div>
            <script>
              document.addEventListener("DOMContentLoaded", function() {
                var player = document.getElementById("player-6ac989fba4e07");
                podlovePlayerCache.add([{"url":"https:\/\/tonuniversum.de\/wp-json\/podlove-web-player\/shortcode\/publisher\/1130","data":{"version":5,"show":{"title":"Tonuniversum","subtitle":"Ein kleiner Schritt ans Mikro \u2013 ein gro\u00dfer f\u00fcr unseren Podcast","summary":"Podcasten ohne Plan, aber mit Mikro: In Tonuniversum nehmen Sch\u00fcler:innen zusammen mit ihrem IT-Lehrer Holger Sebasti\u00e3o die ersten Schritte ins Podcast-Universum. Zwischen Technikchaos, Reaper-Recherche und Rode-Rodeo entsteht ein Projekt voller T\u00f6ne, Lacher und Learning by Doing.","poster":"https:\/\/tonuniversum.de\/wp-content\/cache\/podlove\/b6\/3213761539c7ba0624ed6083d1188f\/tonuniversum_500x.jpg","link":"https:\/\/tonuniversum.de\/podcast\/"},"title":"TU009-Tischtennis Code-Meisterei","subtitle":"Hinter den Kulissen unserer Schulliga-App: Vom Frontend bis zum Datenbank-Check","summary":"In dieser Folge von \u201eTischtennis Code-Meisterei\u201c erz\u00e4hlen wir euch die ganze Geschichte hinter unserer neuen App f\u00fcr die Schulliga der LGS-HU. Wir haben uns im Unterricht zusammengetan, um eine Plattform zu schaffen, auf der jeder Sch\u00fcler ganz einfach seine Matches eintragen und sehen kann, wer gerade der beste Spieler der Schule ist. Wir nehmen euch mit von der ersten Idee bis hin zum fertigen Programm.\n\nDer erste Teil: Alles f\u00fcr das Auge (Das Frontend)\nZuerst erkl\u00e4rt euch unser Frontend-Team \u2013 also Onur, Allan und Ibrahim \u2013 wie die App \u00fcberhaupt aussieht und wie man sie bedient. Wir wollten keine h\u00e4ssliche, alte Tabelle, sondern ein modernes Design. Deshalb haben wir Bootstrap benutzt. Das sorgt daf\u00fcr, dass die Seite auf dem Handy genauso gut aussieht wie auf dem Computer. Wir zeigen euch, wie die Registrierung funktioniert (daf\u00fcr braucht ihr zwingend eure Schul-E-Mail, sonst kommt ihr nicht rein!) und wie wir das Admin-Panel gebaut haben. Dort k\u00f6nnen die Admins alles verwalten, Spieler l\u00f6schen oder Ergebnisse pr\u00fcfen. Au\u00dferdem erfahrt ihr, wie wir die Rangliste so programmiert haben, dass sie sich automatisch sortiert, wenn ein neues Ergebnis reinkommt.\n\nDer zweite Teil: Der Maschinenraum (Das Backend)\nDanach \u00fcbernehmen Mert und Ilyas und erkl\u00e4ren, was \u201ehinter\u201c der Webseite passiert. Eine Webseite allein reicht n\u00e4mlich nicht \u2013 man braucht einen Ort, wo die Namen und Punkte gespeichert werden. Das ist das Backend. Wir haben uns eine eigene Virtuelle Maschine (VM) gemietet und darauf eine Datenbank (MariaDB) installiert. Wir erkl\u00e4ren euch ganz einfach, wie wir ein Modell gebaut haben, damit der Computer wei\u00df: \u201eDieser Punkt geh\u00f6rt zu diesem Spieler\u201c. Ein gro\u00dfes Thema war auch die API. Das k\u00f6nnt ihr euch wie einen Kellner im Restaurant vorstellen: Die Webseite bestellt die Daten, und die API bringt sie aus der Datenbank direkt auf den Bildschirm. Damit das alles klappt, haben wir eine Art Bedienungsanleitung namens Swagger benutzt.\n\nDas Fazit: Teamwork und Stress\nZum Schluss sprechen wir noch dar\u00fcber, wie wir als Gruppe funktioniert haben. Es war nicht immer einfach \u2013 wir mussten \u00fcber 100 Schulklassen einzeln in das System einpflegen, was uns fast wahnsinnig gemacht hat. Aber durch unsere Kommunikation \u00fcber Discord haben wir es geschafft, Frontend und Backend perfekt zu verbinden. Egal ob ihr Profis seid oder gar keine Ahnung von IT habt: In dieser Folge lernt ihr, wie aus ein bisschen Code ein echtes Projekt f\u00fcr unsere Schule wurde.","publicationDate":"2026-05-11T12:28:42+02:00","duration":"00:23:31.787","poster":"https:\/\/tonuniversum.de\/wp-content\/cache\/podlove\/a8\/14a93a5191027ee637d47e62f6dde7\/tu009-tischtennis-code-meisterei_500x.png","link":"https:\/\/tonuniversum.de\/tischtennis-code-meisterei\/","chapters":[{"start":"00:00:00.000","title":"Begr\u00fc\u00dfung & Projektvorstellung","href":"","image":""},{"start":"00:00:23.000","title":"App-Funktionen & Registrierung","href":"","image":""},{"start":"00:00:40.000","title":"Design","href":"","image":""},{"start":"00:00:49.000","title":"Vorstellung der 12-FI Gruppe","href":"","image":""},{"start":"00:01:46.000","title":"Admin-Panel & Sicherheit","href":"","image":""},{"start":"00:03:33.000","title":"Validierung & Klassenliste","href":"","image":""},{"start":"00:07:05.000","title":"Ranklist & Matchverwaltung","href":"","image":""},{"start":"00:08:46.000","title":"Technische Details","href":"","image":""},{"start":"00:11:31.000","title":"Die Virtuelle Maschine","href":"","image":""},{"start":"00:11:57.000","title":"Start Backend-Teil","href":"","image":""},{"start":"00:17:12.000","title":"API-Schnittstellen","href":"","image":""},{"start":"00:20:43.000","title":"Tag der offenen T\u00fcr & Pr\u00e4sentation","href":"","image":""},{"start":"00:21:58.000","title":"Fazit & Verabschiedung","href":"","image":""}],"audio":[{"url":"https:\/\/tonuniversum.de\/podlove\/file\/61\/s\/webplayer\/c\/website\/..\/2026\/04\/Podcast-Tischtennis-Projekt.mp3","size":"22607919","title":"MP3 Audio (mp3)","mimeType":"audio\/mpeg"}],"files":[{"url":"https:\/\/tonuniversum.de\/podlove\/file\/61\/s\/webplayer\/..\/2026\/04\/Podcast-Tischtennis-Projekt.mp3","size":"22607919","title":"MP3 Audio","mimeType":"audio\/mpeg"},{"url":"https:\/\/tonuniversum.de\/podlove\/file\/62\/s\/webplayer\/..\/2026\/04\/Podcast-Tischtennis-Projekt.mp3","size":"22607919","title":"MP3 Audio","mimeType":"audio\/mpeg"}],"contributors":[],"transcripts":"https:\/\/tonuniversum.de\/tischtennis-code-meisterei\/?podlove_transcript=json"}}, {"url":"https:\/\/tonuniversum.de\/wp-json\/podlove-web-player\/shortcode\/config\/default\/theme\/default","data":{"activeTab":"chapters","subscribe-button":{"feed":"https:\/\/podcasts.apple.com\/us\/podcast\/wir-starten-podcasting-mp3-feed\/id1815932212","clients":[{"id":"antenna-pod","service":null},{"id":"overcast","service":null},{"id":"rss","service":"https:\/\/podcasts.apple.com\/us\/podcast\/wir-starten-podcasting-mp3-feed\/id1815932212"},{"id":"apple-podcasts","service":"id1815932212"}]},"share":{"channels":[],"outlet":"https:\/\/tonuniversum.de\/wp-content\/plugins\/podlove-web-player\/web-player\/share.html","sharePlaytime":false},"related-episodes":{"source":"podcast","value":null},"version":5,"playlist":"https:\/\/tonuniversum.de\/wp-json\/podlove-web-player\/shortcode\/podcast","theme":{"tokens":{"brand":"#6B6260","brandDark":"#235973","brandDarkest":"#1A3A4A","brandLightest":"#E9F1F5","shadeDark":"#807E7C","shadeBase":"#807E7C","contrast":"#000","alt":"#fff"},"fonts":{"ci":{"name":"ci","family":["-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica","Arial","sans-serif","Apple Color Emoji","Segoe UI Emoji\", \"Segoe UI Symbol"],"src":[],"weight":800},"regular":{"name":"regular","family":["-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica","Arial","sans-serif","Apple Color Emoji","Segoe UI Emoji\", \"Segoe UI Symbol"],"src":[],"weight":300},"bold":{"name":"bold","family":["-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica","Arial","sans-serif","Apple Color Emoji","Segoe UI Emoji\", \"Segoe UI Symbol"],"src":[],"weight":700}}},"base":"https:\/\/tonuniversum.de\/wp-content\/plugins\/podlove-web-player\/web-player\/"}}]);
                podlovePlayer(player, "https://tonuniversum.de/wp-json/podlove-web-player/shortcode/publisher/1130", "https://tonuniversum.de/wp-json/podlove-web-player/shortcode/config/default/theme/default").then(function() {
                  player && player.classList.remove("podlove-web-player-loading");
                });
              });
            </script>
            
        


<p class="wp-block-paragraph"></p>

TU009-Tischtennis Code-Meisterei

TU008-Wir wollen Waffeln verkaufen

Kickerleague - Tischkickertunier

Waffel Verkauf Frontend

TU006-Projekt Kicker: Von der reinen Front-End-Idee zum eigenen Backend

TU008-Tischtennis Code-Meisterei

Share Tonuniversum (MP3 Feed)

Sign up to save your podcasts

Tonuniversum (MP3 Feed)

Tonuniversum (MP3 Feed) episodes

About Tonuniversum (MP3 Feed)