- Erfahre mehr über Web-Apps und wie sie sich von mobilen Apps unterscheiden
- Lerne verschiedene Optionen für die Programmierung und Erstellung von Webanwendungen kennen
- Installiere die notwendige Software, um eine Web-App zu erstellen
Das sind die Aktivitäten für diese Lektion:
WEB APPS
Für dein Technovation-Projekt hast du die Möglichkeit, eine mobile App oder eine Web-App.
Für Teilnehmer/innen, die schon einmal an Technovation teilgenommen haben und eine neue Herausforderung suchen, oder für neue Teilnehmer/innen, die bereits Erfahrung im Programmieren haben, könntest du eine Web-App für dein Technovation-Projekt erstellen.
Viele Teilnehmer/innen werden sich dafür entscheiden, eine mobile App mit einem der von uns vorgeschlagenen App-Builder, App Inventor oder Thunkable, zu erstellen. Wenn du neu im Programmieren bist oder weißt, dass du deine App mit App Inventor oder Thunkable programmieren willst, kannst du diese Lektion überspringen!
Die Erstellung einer Web-App beinhaltet textbasierte Kodierung und ist fortgeschrittener als blockbasierte Kodierung mit App Inventor oder Thunkable.
Beginnen wir mit einem Überblick über den Unterschied zwischen mobilen Apps, Web-Apps und progressiven Web-Apps.
Mobile App
- ein Programm, das nativ auf dem Telefon läuft
- heruntergeladen und auf dem Gerät installiert
- auf die Funktionen des Telefons zugreifen können, wie GPS und Kamera
- plattformspezifisch (iOS oder Android)
- mit bestimmten Sprachen kodiert werden, um dem Betriebssystem zu entsprechen
Web App
- sieht einer mobilen App sehr ähnlich
- läuft in einem Internetbrowser
- nicht nativ für ein bestimmtes Gerät (iOS oder Android)
- wird in der Regel mit HTML, CSS, Javascript und Python programmiert
- kann nicht ausgeführt werden, wenn es offline ist
Progressive Web App
- spezielle Art von Web-App, die eine Mischung aus mobiler App und Web-App ist
- läuft in einem Browser
- kann auch auf dem mobilen Gerät wie eine normale mobile App installiert werden
- kann auch laufen, wenn der Nutzer offline ist
Beachte, dass sich eine Web-App von einer Website unterscheidet. Eine Website ist statisch und wird mit HTML und CSS programmiert. Web-Apps sind dynamisch und verändern sich aufgrund von Benutzereingaben und anderen externen Interaktionen. Für dein Technovation-Projekt ist eine Website nicht geeignet.
Wir werden einige Einsteigeroptionen für die Erstellung von Webanwendungen erkunden.
Ein großer Unterschied zu den App-Entwicklungsplattformen, die wir für mobile Apps behandeln, ist, dass du eine Web-App mit einer textbasierten Programmiersprache anstelle einer blockbasierten Sprache erstellst.
Es gibt zwei Hauptsprachen, die für die Erstellung von Webanwendungen verwendet werden.
JAVASCRIPT
Javascript, oder JSist eine Skriptsprache. Das bedeutet, dass der Code zur Laufzeit ausgeführt wird, anstatt kompiliert zu werden, wie bei einer mobilen App. Das ist so, als würde ein Schauspieler sein Skript während einer Aufführung jedes Mal durchgehen, wenn die Show läuft.
Javascript wird oft mit HTML und CSS kombiniert, um Websites zu erstellen. HTML und CSS werden verwendet, um statische Websites zu erstellen, die Informationen darstellen können, sich aber nicht verändern. Javascript sorgt für Interaktivität und die Möglichkeit, dass sich die Website aufgrund von externen Faktoren verändert und aktualisiert. Und eine dynamische, interaktive Website ist im Grunde eine Web-App.
PYTHON
Python ist eine sehr beliebte Allzweckprogrammiersprache. Python ist sowohl eine Programmiersprache und eine Skriptsprache, d.h. sie kann kompiliert werden, aber auch zur Laufzeit ausgeführt werden.
Sie gilt als unkomplizierte, vielseitige Sprache, die auch für neue Programmierer/innen zugänglich ist. Sie wird in vielen verschiedenen Bereichen der Softwareentwicklung eingesetzt. Ein Bereich ist die Webentwicklung. Ein anderer ist das maschinelle Lernen. Python ist also eine gute Option, um fortgeschrittene KI-Webanwendungen zu lernen und zu entwickeln.
In diesem Lehrplan konzentrieren wir uns auf die Erstellung von Webanwendungen mit Python. Um auf einfache Weise eine Web-App mit Python zu erstellen, werden wir ein Framework namens Streamlit. Streamlit ermöglicht es dir, mit wenig Code leistungsstarke, interaktive Webanwendungen zu erstellen. Es ist spezialisiert auf Apps, die mit Daten zu tun haben, und ermöglicht es dir, maschinelle Lernbibliotheken in Python zu nutzen, um KI in deine Apps einzubauen.
Hier sind einige Hauptmerkmale.
- Eine gute Option für Leute, die viel Erfahrung mit blockbasierter Programmierung haben und nach einer neuen Herausforderung suchen
- Gut für Leute, die schon etwas textbasierte Codierung gemacht haben
- Sehr vielseitige und weit verbreitete Sprache
- Du musst Software auf deinem Computer installieren
- Python und zugehörige Bibliotheken
- Ein Code-Editor
- Streamlit hat die Option, im Browser zu laufen, indem du Github benutzt
- Wir werden diese Option in diesem Lehrplan nicht behandeln
- Damit kannst du KI nutzen
- Beliebteste Sprache für den Aufbau und die Nutzung von Machine-Learning-Modellen
- In diesem Lehrplan werden wir Jupyter Notebooks für die Modellbildung verwenden
ERSTE SCHRITTE
Um Webanwendungen für dein Technovation-Projekt zu programmieren, brauchst du:
- einen Computer oder Laptop
- Internetzugang
Du solltest mit dem Terminal-Fenster auf einem Mac oder Linux einigermaßen vertraut sein und mit dem Terminal oder der Eingabeaufforderung unter Windows. Wenn du noch keine Erfahrung hast oder nicht einmal weißt, was das Terminal-Fenster ist, dann schau dir diese Einsteiger-Videos an, bevor du mit der Aktivität weitermachst.
Sieh dir das entsprechende Video für dein Betriebssystem an.
Wir werden uns mit zwei Optionen für die Entwicklung von Webanwendungen beschäftigen. Du kannst entweder auf deinem Computer oder Laptop programmieren, oder du kannst alles in der Cloud programmieren. Du kannst dich für eine der beiden Möglichkeiten entscheiden, aber es wird empfohlen, dass du dich für eine Option entscheidest und sie während deines Technovation-Projekts beibehältst. Wenn du die oben genannten Terminal-Befehle beherrschst, ist das bei beiden Optionen sehr hilfreich.
Hier sind einige Vor- und Nachteile für jede.
AUF DEINEM COMPUTER
PROS:
- Dateien werden auf deinem Computer gespeichert
- Lerne die Verwendung von Visual Studio Code, einer sehr beliebten IDE
- Du wirst viel über die Verwendung des Terminalfensters, die Installation von Paketen usw. lernen
- Vollständige Kontrolle und Auswahl der verwendeten Software
- Codieren können, ohne ständig Internetzugang zu brauchen
CONS:
- Es ist nicht einfach, Dateien und Code gemeinsam mit deinem Team zu nutzen
- Es kann sehr frustrierend sein, Pakete zu installieren, und die Einrichtung kann viel Zeit in Anspruch nehmen
- Möglicher Verlust von Dateien bei Computerabstürzen
IN DER WOLKE
PROS:
- Dateien werden in der Cloud gespeichert
- Du musst nichts auf deinem Computer installieren
- Automatischer Link zu Github für Portfoliozwecke
- Einfaches Teilen und Codieren im Team
CONS:
- Sie haben keine Erfahrung mit der Nutzung von Software vor Ort
- Abhängigkeit von der Internetverbindung
Wähle entweder Aktivität A oder Aktivität B, je nachdem, ob du lokal auf deinem Computer oder in der Cloud programmieren möchtest.
AKTIVITÄT A: EINSTIEG MIT PYTHON AUF DEINEM COMPUTER
SOFTWARE INSTALLIEREN & STARTER-APP PROGRAMMIEREN
- Schritt 1: Installiere Python. Hier findest du eine gute Anleitung für Windows, Mac oder Linux.
- Schritt 2: Installiere einen Code-Editor und Streamlit. Dieses Video zeigt dir, wie du Visual Studio Code installierst und dann Streamlit installierst, um es vom Code-Editor aus auszuführen.
- Schritt 3: Führe eine sehr einfache Streamlit-Web-App in der VS Code-Umgebung aus, indem du diesem Video folgst.
- Zur Feier des Tages machst du einen Screenshot von deiner ersten Web-App und schickst ihn zusammen mit einer Notiz an deinen Mentor!
AKTIVITÄT B: EINSTIEG MIT PYTHON IN DER CLOUD
KONTEN ERSTELLEN & EINE APP CODIEREN
ÜBERPRÜFUNG DER SCHLÜSSELBEGRIFFE
- Web-App - Anwendung, die wie eine mobile App aussieht, aber in einem Internetbrowser läuft und mit HTML, CSS und Javascript oder Python programmiert ist
REFLEXION
Herzlichen Glückwunsch zum Ausprobieren der textbasierten Codierung! Hier sind einige Fragen, die du mit deinem Team und deinem Mentor besprechen kannst.
ZUSÄTZLICHE RESSOURCEN
Wenn du Hilfe bei der Arbeit mit Python und Streamlit brauchst, musst du die Dokumentation und den Support konsultieren. Im Folgenden findest du einige gute Anlaufstellen.
- Der Python.org Beginner's Guide hat einige gute Links, um mehr Python zu lernen.
- Streamlit's App Galerie
- Nileg Production's vollständige Streamlit Kurs Playlist
