In den letzten Jahren ist Python zu einer der am häufigsten verwendeten Programmiersprachen geworden. Python hat jedoch bisher keine große Rolle bei der Webentwicklung gespielt. Pyscript ist hier, um das zu ändern. Es ist ein neues Framework, mit dem Sie Python -Code direkt in Ihrem Webbrowser mit nur HTML- und Python -Code ausführen können. Unabhängig von Ihrer Erfahrungsstufe ist es wirklich einfach, Pyscript zu verwenden, um interaktive Internet -Apps zu entwickeln, ohne JavaScript zu kennen. In diesem Tutorial erfahren Sie, wie es ist, wie es funktioniert und wie Sie Ihre erste in Browser-basierte Python-App erstellen.
Was ist pyskript
Pyscript ist ein Open-Supply-Framework, das die Lücke zwischen den Python und das Internet. Damit können Sie den Python -Code direkt in Ihrem Webbrowser ausführen. Ermöglichen, interaktive Python -Anwendungen zu schreiben, die vollständig auf der Consumer -Seite ausgeführt werden, ohne einen Backend -Server zu benötigen. Pyscript ist wie das Schreiben einer Internet -App mit Python anstelle von JavaScript. Sie können einfache interaktive Internet -Instruments, Dashboards und mehr mit Python erstellen.
Schlüsselmerkmale von Pyscript
- Python im Browser: Sie können Python -Code darin schreiben
<py-script>Tags in Ihrer HTML -Datei - Kein Umgebungsaufbau: Es ist nicht erforderlich, zusätzliche Bibliotheken oder Instruments zu installieren. Es läuft im Browser.
- Interaktivität mit HTML: Integriert Python einfach in HTML, CSS und JavaScript.
- Durch WebAssembly betrieben: Verwendung Pyodid(Python, kompiliert für WebAssembly), um Python im Browser auszuführen.
Wie benutze ich Pyscript für Ihre WebApp?
Schritt 1: Besuchen Sie die offizielle Web site
Besuchen Sie die offizielle Web site. Hier können Sie Demos, Dokumentation und selbst ausprobieren.
Schritt 2: Richten Sie eine grundlegende HTML-Datei ein
Um Pyscript auszuführen, benötigen Sie eine einfache HTML -Datei mit dem erforderlichen Framework.
Beispielcode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First PyScript App</title>
<hyperlink rel="stylesheet" href="https://pyscript.web/newest/pyscript.css" />
<script defer src="https://pyscript.web/newest/pyscript.js"></script>
</head>
<physique>
<h1>Good day from PyScript!</h1>
<py-script>
identify = "PyScript"
print(f"Good day, {identify}! You might be operating Python within the browser.")
</py-script>
</physique>
</html>Schritt 3: Öffnen Sie die HTML -Datei in einem Browser.
Standardmäßig gibt es 3 Dateien:
fundamental.py: Your Python code.Index.html: The principle net web page that features PyScript.
pyscript.toml: A configuration file itemizing any additional Python packages you
wish to use.
Aktualisieren Sie die Codedateien mit den entsprechenden Codes und beginnen Sie mit dem Experimentieren:
Sie können den Pyscript -Spielplatz unter ausprobieren Pyskript -Beispiele Um Code -Snippets direkt in Ihrem Browser zu testen.
Praktisch mit Pyscript
Nachdem Sie mit der Funktionsweise der Pyscript-Schnittstelle vertraut sind, lassen Sie uns einige praktische Informationen damit ausführen.
Wir werden ein Zwei-Spieler-Tic-Tac-Toe-Spiel bauen.
Schritt 1: Replace fundamental.py
Fügen Sie die hinzu fundamental.py Datei mit der TicTacToe Klasse, die die Spiellogik, die Benutzerinteraktionen und die UI -Updates enthält. Es wird PyWeb verwenden, um Python mit HTML zu verbinden, wodurch das Spiel im Browser vollständig interaktiv ist.
Code:
from pyweb import pydom
class TicTacToe:
def __init__(self):
self.board = pydom("desk#board")
self.standing = pydom("h2#standing")
self.console = pydom("script#console")(0)
self.init_cells()
self.init_winning_combos()
self.new_game(...)
def set_status(self, textual content):
self.standing.html = textual content
def init_cells(self):
self.cells = ()
for i in (0, 1, 2):
row = ()
for j in (0, 1, 2):
cell = pydom(f"div#cell{i}{j}")(0)
assert cell
row.append(cell)
self.cells.append(row)
def init_winning_combos(self):
self.winning_combos = ()
# profitable columns
for i in (0, 1, 2):
combo = ()
for j in (0, 1, 2):
combo.append((i, j))
self.winning_combos.append(combo)
# profitable rows
for j in (0, 1, 2):
combo = ()
for i in (0, 1, 2):
combo.append((i, j))
self.winning_combos.append(combo)
# profitable diagonals
self.winning_combos.append(((0, 0), (1, 1), (2, 2)))
self.winning_combos.append(((0, 2), (1, 1), (2, 0)))
def new_game(self, occasion):
self.clear_terminal()
print('=================')
print('NEW GAME STARTING')
print()
for i in (0, 1, 2):
for j in (0, 1, 2):
self.set_cell(i, j, "")
self.current_player = "x"
experimenting self.set_status(f'{self.current_player} enjoying...')
def next_turn(self):
winner = self.check_winner()
if winner == "tie":
self.set_status("It is a tie!")
self.current_player = "" # i.e., recreation ended
return
elif winner is just not None:
self.set_status(f'{winner} wins')
self.current_player = "" # i.e., recreation ended
return
if self.current_player == "x":
self.current_player = "o"
else:
self.current_player = "x"
self.set_status(f'{self.current_player} enjoying...')
def check_winner(self):
"""
Verify whether or not the sport as any winner.
Return "x", "o", "tie" or None. None implies that the sport continues to be enjoying.
"""
# verify whether or not we've a winner
for combo in self.winning_combos:
winner = self.get_winner(combo)
if winner:
# spotlight the profitable cells
for i, j in combo:
self.cells(i)(j).add_class("win")
return winner
# verify whether or not it is a tie
for i in (0, 1, 2):
for j in (0, 1, 2):
if self.get_cell(i, j) == "":
# there's at the very least an empty cell, it is not a tie
return None # recreation nonetheless enjoying
return "tie"
def get_winner(self, combo):
"""
If all of the cells on the given factors have the identical worth, return it.
Else return "".
Every level is a tuple of (i, j) coordinates.
Instance:
self.get_winner(((0, 0), (1, 1), (2, 2)))
"""
assert len(combo) == 3
values = (self.get_cell(i, j) for i, j in combo)
if values(0) == values(1) == values(2) and values(0) != "":
return values(0)
return ""
def set_cell(self, i, j, worth):
assert worth in ("", "x", "o")
cell = self.cells(i)(j)
cell.html = worth
if "x" in cell.lessons:
cell.remove_class("x")
if "o" in cell.lessons:
cell.remove_class("o")
if "win" in cell.lessons:
cell.remove_class("win")
if worth != "":
cell.add_class(worth)
def get_cell(self, i, j):
cell = self.cells(i)(j)
worth = cell.html
assert worth in ("", "x", "o")
return worth
def click on(self, occasion):
i = int(occasion.goal.getAttribute('data-x'))
j = int(occasion.goal.getAttribute('data-y'))
print(f'Cell {i}, {j} clicked: ', finish='')
if self.current_player == "":
print('recreation ended, nothing to do')
return
#
worth = self.get_cell(i, j)
if worth == "":
print('cell empty, setting it')
self.set_cell(i, j, self.current_player)
self.next_turn()
else:
print(f'cell already full, can't set it')
def clear_terminal(self):
self.console._js.terminal.clear()
def toggle_terminal(self, occasion):
hidden = self.console.mum or dad._js.getAttribute("hidden")
if hidden:
self.console.mum or dad._js.removeAttribute("hidden")
else:
self.console.mum or dad._js.setAttribute("hidden", "hidden")
GAME = TicTacToe()Schritt 2: Erstellen Sie eine CSS -Datei
Erstellen a model.css Datei innerhalb der neu erstellten Vermögenswerte Ordner zum Definieren des Layouts und des Stils für das Tic-Tac-Toe-Spiel. Dies wird mit dem Styling der Platine, den Zellen und allen Statusnachrichten zu tun.
Code:
h1, h2 {
font-family: 'Indie Flower', 'Comedian Sans', cursive;
text-align: middle;
}
#board {
font-family: 'Indie Flower', 'Comedian Sans', cursive;
place: relative;
font-size: 120px;
margin: 1% auto;
border-collapse: collapse;
}
#board td {
border: 4px stable rgb(60, 60, 60);
width: 90px;
top: 90px;
vertical-align: center;
text-align: middle;
cursor: pointer;
}
#board td div {
width: 90px;
top: 90px;
line-height: 90px;
show: block;
overflow: hidden;
cursor: pointer;
}
.x {
colour: darksalmon;
place: relative;
font-size: 1.2em;
cursor: default;
}
.o {
colour: aquamarine;
place: relative;
font-size: 1.0em;
cursor: default;
}
.win {
background-color: beige;
}Schritt 3: Replace index.html
Ändern der index.html Datei, um auf das Pyscript -Setup zu verweisen, laden Sie fundamental.pyDefinieren Sie die Spielbrettstruktur und verweisen Sie auf die model.css (aus Ihrem Vermögensordner) für das Styling.
Code:
<!doctype html>
<html>
<head>
<!-- Advisable meta tags -->
<meta charset="UTF-8">
<meta identify="viewport" content material="width=device-width,initial-scale=1.0">
<!-- PyScript CSS -->
<hyperlink rel="stylesheet" href="https://pyscript.web/releases/2024.1.1/core.css">
<!-- CSS for examples -->
<hyperlink rel="stylesheet" href="./belongings/css/examples.css" />
<!-- This script tag bootstraps PyScript -->
<script sort="module" src="https://pyscript.web/releases/2024.1.1/core.js"></script>
<!-- Customized CSS -->
<hyperlink href="https://fonts.googleapis.com/css?household=Indie+Flower" rel="stylesheet">
<hyperlink rel="stylesheet" href="./belongings/css/tictactoe.css" />
<!-- for splashscreen -->
<model>
#loading { define: none; border: none; background: clear }
</model>
<script sort="module">
const loading = doc.getElementById('loading');
addEventListener('py:prepared', () => loading.shut());
loading.showModal();
</script>
<title>Tic Tac Toe</title>
<hyperlink rel="icon" sort="picture/png" href="./belongings/favicon.png" />
</head>
<physique>
<dialog id="loading">
<h1>Loading...</h1>
</dialog>
<nav class="navbar" model="background-color: #000000">
<div class="app-header">
<a href="/">
<img src="./belongings/emblem.png" class="emblem" />
</a>
<a category="title" href="" model="colour: #f0ab3c">Tic Tac Toe</a>
</div>
</nav>
<part class="pyscript">
<h1>Tic-Tac-Toe</h1>
<script sort="py" src="./fundamental.py" config="./pyscript.toml"></script>
<desk id="board">
<tr>
<td><div id="cell00" data-x="0" data-y="0" class="cell" py-click="GAME.click on"></div></td>
<td><div id="cell01" data-x="0" data-y="1" class="cell" py-click="GAME.click on"></div></td>
<td><div id="cell02" data-x="0" data-y="2" class="cell" py-click="GAME.click on"></div></td>
<tr>
<td><div id="cell10" data-x="1" data-y="0" class="cell" py-click="GAME.click on"></div></td>
<td><div id="cell11" data-x="1" data-y="1" class="cell" py-click="GAME.click on"></div></td>
<td><div id="cell12" data-x="1" data-y="2" class="cell" py-click="GAME.click on"></div></td>
</tr>
<tr>
<td><div id="cell20" data-x="2" data-y="0" class="cell" py-click="GAME.click on"></div></td>
<td><div id="cell21" data-x="2" data-y="1" class="cell" py-click="GAME.click on"></div></td>
<td><div id="cell22" data-x="2" data-y="2" class="cell" py-click="GAME.click on"></div></td>
</tr>
</desk>
<h2 id="standing"></h2>
<button id="btn-new-game" py-click="GAME.new_game">New recreation</button>
<button id="btn-toggle-terminal" py-click="GAME.toggle_terminal">Disguise/present terminal</button>
<div id="terminal" hidden="hidden">
<script id="console" sort="py" terminal></script>
</div>
</part>
</physique>
</html>Schritt 4: Replace pyscript.toml
Aktualisieren der pyscript.toml Datei mit der erforderlichen Konfiguration, die von der App benötigt wird, einschließlich Abhängigkeiten, Dateipfade usw. Dies stellt sicher, dass Pyscript weiß, wie man den Python -Code ordnungsgemäß laden und ausführt. Hier sind der Inhalt der pyscript.toml Datei für unsere Tic-Tac-Toe-Anwendung:
Konfiguration:
identify = "Tic Tac Toe"
description = "A Tic-Tac-Toe recreation written in PyScript that permits individuals to take turns."Ausgabe:
Hier gehen Sie mit Ihrem ersten Projekt auf Pyscript.
Abschluss
Python wird in verwendet DatenwissenschaftAnwesend AiAutomatisierung und in Bildung wie nie zuvor. Bisher gab es im Web jedoch noch kein Heimathaus für Python. Pyscript ist angekommen und vereint die Einfachheit von Python mit der Zugänglichkeit des Webs. Es reift immer noch, aber es hat bereits viele Möglichkeiten für Entwickler, Pädagogen und Lernende geschaffen.
Datenwissenschaftler | AWS Licensed Options Architect | KI & ML Innovator
Als Datenwissenschaftler bei Analytics Vidhya spezialisiere ich mich auf maschinelles Lernen, Deep Studying und KI-gesteuerte Lösungen, die NLP-, Laptop-Imaginative and prescient- und Cloud-Technologien nutzen, um skalierbare Anwendungen zu erstellen.
Mit einem B.Tech in Informatik (Information Science) aus VIT- und Zertifizierungen wie AWS Licensed Options Architect und TensorFlow umfasst meine Arbeit generative KI, Anomalie -Erkennung, falsche Nachrichtenerkennung und Emotionserkennung. Ich bemühe mich, intelligente Systeme zu entwickeln, die die Zukunft der KI prägen.
Melden Sie sich an, um weiter zu lesen und Experten-Kuratinhalte zu genießen.