Build apps for PyneHub

# Basic apps (GTK4 + libadwaita):
sudo pacman -S python python-gobject gtk4 libadwaita

# Web apps also need WebKitGTK:
sudo pacman -S webkitgtk-6.0

my-app/
├─ main.py          # your app code (the entry_point)
├─ manifest.json    # metadata the hub reads
└─ icon.png         # 512 x 512 app icon

{
  "name": "My App",
  "version": "1.0.0",
  "description": "A short, clear description of what your app does. This is shown on your app's page in the hub. Keep the first line under ~120 characters.",
  "author": "Your Name",
  "category": "Utilities",
  "entry_point": "main.py",
  "dependencies": ["gtk4", "libadwaita"]
}

#!/usr/bin/env python3
"""My PyneHub App — starter template for the PinePhone.

A minimal, touch-friendly GTK4 + libadwaita app sized for the PinePhone
(360 x 720 portrait). Replace the UI in build_content() with your own.

Run locally to test:  python3 main.py
"""

import gi
gi.require_version("Gtk", "4.0")
gi.require_version("Adw", "1")
from gi.repository import Gtk, Adw


class MainWindow(Adw.ApplicationWindow):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.set_title("My App")
        # PinePhone portrait resolution. Keep this so you design and test at
        # the real device size — everything should fit within 360 px wide.
        self.set_default_size(360, 720)

        # ToolbarView gives you a proper mobile header bar.
        toolbar = Adw.ToolbarView()
        header = Adw.HeaderBar()
        toolbar.add_top_bar(header)

        toolbar.set_content(self.build_content())
        self.set_content(toolbar)

    # ------------------------------------------------------------------
    # Build your screen here.
    # ------------------------------------------------------------------
    def build_content(self):
        box = Gtk.Box(orientation=Gtk.Orientation.VERTICAL, spacing=16)
        box.set_valign(Gtk.Align.CENTER)
        box.set_halign(Gtk.Align.CENTER)
        box.set_vexpand(True)
        box.set_margin_start(24)
        box.set_margin_end(24)

        title = Gtk.Label(label="Hello, PinePhone!")
        title.add_css_class("title-1")
        box.append(title)

        subtitle = Gtk.Label(label="Edit build_content() in main.py to make it yours.")
        subtitle.add_css_class("dim-label")
        subtitle.set_wrap(True)
        subtitle.set_justify(Gtk.Justification.CENTER)
        box.append(subtitle)

        # A big, finger-friendly button (>= 48 px tall is the touch target rule).
        button = Gtk.Button(label="Tap me")
        button.add_css_class("suggested-action")
        button.add_css_class("pill")
        button.set_halign(Gtk.Align.CENTER)
        button.set_size_request(160, 48)
        button.connect("clicked", self.on_button_clicked)
        box.append(button)

        self.status = Gtk.Label(label="")
        self.status.add_css_class("dim-label")
        box.append(self.status)

        return box

    def on_button_clicked(self, _button):
        self.status.set_label("You tapped the button! \U0001F389")


class MyApp(Adw.Application):
    def __init__(self):
        # Use your own reverse-DNS id, e.g. com.yourname.yourapp
        super().__init__(application_id="com.example.myapp")

    def do_activate(self):
        win = MainWindow(application=self)
        win.present()


def main():
    app = MyApp()
    return app.run(None)


if __name__ == "__main__":
    main()

python3 main.py

#!/usr/bin/env python3
"""Web App wrapper for PyneHub — turn any website into a PinePhone app.

Change the two lines in the CONFIG block below and you have a native-feeling
app that shows your website full-screen. Built with GTK4 + WebKitGTK 6.0.

Run locally to test:  python3 main.py
"""

import gi
gi.require_version("Gtk", "4.0")
gi.require_version("Adw", "1")
gi.require_version("WebKit", "6.0")
from gi.repository import Gtk, Adw, WebKit

# ============================================================
#  CONFIG — edit these two lines. That is all you need to change.
# ============================================================
APP_NAME = "My Web App"
WEBSITE_URL = "https://example.com"
# Show the address/title bar at the top? Set False for a full-screen,
# app-like feel with no visible browser chrome.
SHOW_HEADER = True
# ============================================================


class WebAppWindow(Adw.ApplicationWindow):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.set_title(APP_NAME)
        self.set_default_size(360, 720)  # PinePhone portrait

        toolbar = Adw.ToolbarView()

        if SHOW_HEADER:
            header = Adw.HeaderBar()
            title = Gtk.Label(label=APP_NAME)
            title.add_css_class("title")
            header.set_title_widget(title)
            # A reload button is handy for web apps.
            reload_btn = Gtk.Button(icon_name="view-refresh-symbolic")
            reload_btn.set_tooltip_text("Reload")
            reload_btn.connect("clicked", lambda _b: self.webview.reload())
            header.pack_start(reload_btn)
            toolbar.add_top_bar(header)

        # Thin loading progress bar under the header.
        self.progress = Gtk.ProgressBar()
        self.progress.set_visible(False)

        # The web view fills the rest of the screen.
        self.webview = WebKit.WebView()
        settings = self.webview.get_settings()
        settings.set_enable_javascript(True)
        # A modern mobile user agent so sites serve their phone layout,
        # which fits the narrow PinePhone screen best.
        settings.set_user_agent(
            "Mozilla/5.0 (Linux; Android 13; Mobile) "
            "AppleWebKit/537.36 (KHTML, like Gecko) "
            "Chrome/120.0 Mobile Safari/537.36"
        )
        self.webview.set_vexpand(True)
        self.webview.connect("notify::estimated-load-progress", self._on_progress)
        self.webview.connect("load-changed", self._on_load_changed)

        content = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)
        content.append(self.progress)
        content.append(self.webview)

        toolbar.set_content(content)
        self.set_content(toolbar)

        self.webview.load_uri(WEBSITE_URL)

    def _on_progress(self, webview, _param):
        self.progress.set_fraction(webview.get_estimated_load_progress())

    def _on_load_changed(self, webview, event):
        if event == WebKit.LoadEvent.STARTED:
            self.progress.set_visible(True)
        elif event == WebKit.LoadEvent.FINISHED:
            self.progress.set_visible(False)
            self.progress.set_fraction(0.0)


class WebApp(Adw.Application):
    def __init__(self):
        # Use your own reverse-DNS id, e.g. com.yourname.yourwebapp
        super().__init__(application_id="com.example.webapp")

    def do_activate(self):
        win = WebAppWindow(application=self)
        win.present()


def main():
    app = WebApp()
    return app.run(None)


if __name__ == "__main__":
    main()

{
  "name": "My Web App",
  "version": "1.0.0",
  "description": "A web app that opens my website on the PinePhone. Replace this with a description of your site/app.",
  "author": "Your Name",
  "category": "Internet",
  "entry_point": "main.py",
  "dependencies": ["gtk4", "libadwaita", "webkitgtk-6.0"]
}

# From inside your app folder:
tar czf my-app-1.0.0.tar.gz main.py manifest.json icon.png