mHub
Nyitott platform · Addon Protocol v2 · Browser API

Bármilyen ötlet. Minden képernyőn.

Építs egy rádióappot egy délután alatt.

Az mHub nyitott platform, amely egyszerű fájlokból álló mappákból és hétköznapi weboldalakból appokat készít telefonra, tévére és számítógépre. Nem kell programozónak lenned: ha le tudod írni, mit szeretnél, egy AI megépíti, az mHub pedig helyet ad neki, ahol futhat.

Fut a Vypnben és minden mHub-böngészőben Nyílt forráskód, MIT Nincs buildelés, nincs fiók Fut telefonon, tévén és számítógépen
A Vuma egy tévén: kiemelt DW-műsor dokumentumfilmek és gazdasági videók sorai fölött, felül a bővítmény katalógusaival.
A Vuma, egy mHub-app, tévén. Ezen a képernyőn minden egyetlen bővítményből jön: a DW-ből.
A koncepció

Egy platform, három rész.

Az mHub nem egyetlen app. Három, egymáshoz illeszkedő részből áll, és mindegyik nyílt. Kettő közülük alap: egy tartalomformátum és egy böngésző-API. A harmadik maguk az appok, és mindegyik az egyik alapra vagy mindkettőre épül.

01

Az appok

Amit ténylegesen használsz. A Vuma a bővítményekből egyetlen böngészhető felületet készít, a többi app pedig egy-egy ötletet visz el a ház minden képernyőjére. Mindegyik webapp: nincs mit telepíteni. Nézd meg az appokat

02

A tartalom: bővítmények

A bővítmény egy tartalomforrás: filmek, rádióállomások, podcastok, kurzusok. A motorháztető alatt kis szövegfájlokból álló mappa bármilyen webes tárhelyen, az Addon Protocol v2 szerint leírva. Egy AI megírhatja neked. Nézd meg a protokollt

03

A képességek: window.mhub

Nyiss meg egy átlagos weboldalt egy mHub-appban, és olyasmire lesz képes, amit egy böngésző soha nem enged: bárhonnan olvashat adatot, túléli, ha megszűnik a domainje, és a tévéden él. Egy névtér, egy script tag: az mHub Browser API. Nézd meg az API-t

Első rész · Az appok

A kedvenceink. Mind élesben fut.

A Vuma mindkét alapra épül; a mellette lévő appok megmutatják, milyen messzire jut egyetlen alap is. Öt app, öt különböző ötlet, és mindegyikből elindulhatsz.

Vuma

Adj bővítményeket a Vumának, és egyetlen böngészhető felületet készít belőlük: minden katalógus, amit a bővítményeid kínálnak, keresés mindegyikben, könyvtár, és egy lejátszó, amely ott folytatja, ahol abbahagytad. Egyetlen webapp, amely telefonon, tévén és számítógépen egyaránt fut, és maga kezeli az érintést, a távirányítót és az egeret.

Mindkét alapra épül: a bővítmények hozzák a tartalmat, egy mHub-böngészőben pedig a Browser API hozzáadja azokat a képességeket, amelyek egy sima oldalnak sosem lehetnek. Akár a saját oldaladba is beépítheted, a saját bővítményeiddel és a saját neveddel: egyetlen HTML-fájl.

A Vuma telefonon: kiemelt DW-műsor részletekkel és a listához adás gombjával, alatta élő tévécsatornák sora.
A DW-bővítmény a Vumában, telefonon: kiemelt hírvideó és görgethető kliplista.

Waves

Rádióállomások, podcastok és ingyenes hangoskönyvek egyetlen appban. A Waves egyetlen HTML-fájl ugyanarra a Vuma-buildre építve: öt audiobővítmény, türkiz kiemelőszín és addonManager: "fixed", így a források rögzítettek, a felhasználó csak be- és kikapcsolja őket. Nézd meg a forrását: maga az oldal a teljes útmutató.

Waves: kiemelt podcast SomaFM-rádióállomások sorai fölött, türkiz hullám logóval az oldalsávban.
Waves: SomaFM, Radio Browser, podcastok és hangoskönyvek, türkiz sötét alapon. Egyetlen HTML-fájl a Vumára építve.

Junior

Gyerektévé. Egy bővítmény, élénk színek, németül már az első képernyőtől (locale: "de"), és addonManager: "hidden": a kanapéról nincs mit elállítani. Ez is egyetlen HTML-fájl a Vuma-buildre építve.

Junior: kiemelt KiKA-rajzfilm gyerekműsorok sorai fölött, németül, sárga csillag logóval az oldalsávban.
Junior: a KiKA-bővítmény és semmi más, csillaggal az ajtón.

Mediathek

A bővítmény az adat; amit valaki ráépít, az az app. A Mediathek egyetlen HTML-fájl, közvetlenül az ard-mediathek bővítményre építve, Vuma nélkül: sorok, keresés, sorozatok az epizódjaikkal, feliratok, és egy lejátszó, amely megjegyzi, hol hagytad abba. A lekérést a bővítmény végzi, a megjelenést az oldal.

Mediathek: ARD-videók és -sorozatok sorai címmel, dátummal és játékidővel, valamint egy keresőmező.
Mediathek: egyetlen HTML-fájl egyetlen bővítményre építve, saját kiszolgálandó tartalom nélkül.

Glance

A másik alap önmagában: a Glance egyáltalán nem használ bővítményt. Egyetlen HTML-fájl a Browser API-ra építve, amely élő időjárást, hírcímeket, árfolyamokat és a saját szervereid állapotát hozza egyetlen nyugodt képernyőre. Sima böngészőben is rendesen működik, csak kevesebbet tud; egy mHub-appban minden csempe életre kel.

Glance: óra, időjárás, árfolyamok és hírcímek nyugodt csempékként egyetlen képernyőn.
Glance: egyetlen HTML-fájl, élő időjárással, hírcímekkel és árakkal.
Amit építhetsz

Egy ötlet, egy mappa, minden képernyő.

Bármiből, amiben van egy lista, lehet bővítmény, és bármiből, amit a böngésző megtagad, lehet egy oldal egy mHub-appban. Ezeket az ötleteket szívesen látnánk megvalósítva, és mindegyik csak egy promptnyira van: válassz egyet, és bekerül a lentebbi AI-promptba.

Bővítmény: JSON-fájlok mappája, bárhol tárolva vagy az mhub.mx-en Oldal: egyetlen weboldal a Browser API-ra építve App: Vuma a te bővítményeiddel és a te neveddel

Nézni

Bővítmény

A regionális tévéd

Minden adás, amit a csatorna felrak az internetre, műsoronként sorokba rendezve, elöl az esti hírekkel.

Bővítmény

Egy filmfesztivál

A program előzetesekkel és ismertetőkkel, napok, helyszínek és szekciók szerint böngészhetően.

Bővítmény

Némafilmek

Közkincs filmek az Internet Archive-ból, évtized és rendező szerint rendezve.

Bővítmény

A sportklubod

Meccsösszefoglalók, teljes mérkőzések és a szezon menetrendje élő katalógusként.

Bővítmény

Városi élő kamerák

Egy város nyilvános webkamerái, a kikötő, a főtér, a hegy, élő csatornákként.

Bővítmény

Önkormányzati ülések

A településed képviselő-testületi üléseinek felvételei és élő közvetítései, ülésenként és napirendi pontonként.

Hallgatni

Bővítmény

A rádióállomásaid

Az a tíz állomás, amit tényleg hallgatsz, logókkal, a te sorrendedben.

Bővítmény

Egy podcasthálózat

Egy hálózat összes műsora az RSS-csatornáiból, a legújabb epizóddal kezdve.

Bővítmény

Hangoskönyvek szerzők szerint

Egy szerző LibriVox-felvételei, a fejezetek epizódként, folytatható lejátszással.

Bővítmény

Esti mesék

Rövid hangos mesék gyerekeknek, mindegyik egy nyugodt borítóval, reklámok nélkül.

Bővítmény

Egy gyülekezet

A templomod, mecseted vagy közösséged szertartásai és előadásai, élőben és felvételről.

App

Egy rádió saját appja

Waves, egyetlen állomás streamjeivel, podcastjaival és saját színeivel. Egyetlen HTML-fájl.

Tanulni

Bővítmény

Egy egyetem előadásai

A nyilvános előadásfelvételek karonként és félévenként, laptop helyett a tévén.

Bővítmény

Nyelvtanfolyam

Leckék epizódként, sorrendben, a videók mellett a hanggyakorlatokkal.

Bővítmény

Múzeumi túrák

Egy múzeum videós és hangos tárlatvezetései, teremről teremre.

Bővítmény

Főzőiskola

Receptvideók fogás és konyha szerint, a leírásban a hozzávalókkal.

Oldal

Archívumböngésző

Barátságos felület az Archive.org-hoz vagy a Project Gutenberghez: böngészés, keresés és olvasás, mint egy appban.

Bővítmény

Egy konferencia előadásai

Egy konferenciasorozat összes felvett előadása, év és szekció szerint.

Otthon és család

Oldal

Családi kijelző

Időjárás, hírcímek és azoknak a dolgoknak az ára, amelyek érdekelnek, egyetlen nyugodt képernyőn. Ezt mi építettük meg: ez a Glance.

Oldal

Otthoni vezérlőpult

Lámpák, NAS, nyomtató, router. A böngészők elutasítják az ilyen helyi kéréseket; az mHub-app elvégzi őket helyetted.

Oldal

Kamerafal

A saját kameráid a helyi hálózatról, rácsba rendezve a tévén.

Bővítmény

Családi képkeret

Fotók a saját szerveredről képkatalógusként: a tévé lesz a képkeret.

App

Gyerektévé

Egy bővítmény, élénk színek, a kanapéról nincs mit elállítani. Ez a Junior.

Bővítmény

Rajzfilmek egy csatornáról

Egy gyerekcsatorna ingyenes epizódjai műsoronként, nyugodtan a gyerek kezébe adhatók.

Eszközök

Oldal

Hírolvasó

Bármilyen hírcsatornát közvetlenül a forrásából olvashatsz. A normál böngészők ezt blokkolják; egy mHub-appban egyszerűen működik, és a kanapéról is jól olvasható.

Oldal

Árfigyelő

Árak és készlet ellenőrzése webáruházakban, figyelőlista, és a válasz bármelyik képernyőn.

Oldal

Szerverállapot-tábla

A saját gépeid, a lemezeik és a szolgáltatásaik csempékként, amelyek előbb váltanak pirosra, mint hogy bárki telefonálna.

Bővítmény

Egy YouTube-csatorna, feloldva

Feloldó bővítmény: illessz be egy csatornát, és lejátszható katalógusként kapod meg a videóit.

Bővítmény

Feliratok egy nyelven

Feliratbővítmény egy nyelvhez, amely imdb-azonosítókra válaszol, egy nyílt feliratforrásból.

Bővítmény

Hol streamelhető egy cím

Írj be egy filmet, és megtudod, hol nézheted az országodban. Item típusú bővítmény egy nyílt adatbázisra építve.

Készítettél ilyet? Tedd közzé az mhub.mx-en: átnézzük, a neved alatt tároljuk, és bekerül a közösségi tárolóba.

Első rész · Legyen a tiéd a Vuma

A saját appod egyetlen HTML-fájl.

A Waves és a Junior pontosan ez: betöltöd a Vuma-buildet, adsz neki egy elemet, és meghívod a mount függvényt. Ez a fájl bármilyen statikus tárhelyen kész app a te bővítményeiddel, a te neveddel és a te színeiddel, és magától követi a Vuma kiadásait. Nincs buildelés, nincs szerveroldali kód, nincs fiók.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
  content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no">
<title>My App</title>
<link rel="stylesheet" href="https://vuma.mx/latest/style.css">
</head>
<body>
<div id="app"></div>
<script type="module">
  import { mount } from "https://vuma.mx/latest/app.js";
  mount({
    addons: [
      "https://www.mhub.mx/radio-and-podcasts",
      "https://www.mhub.mx/public-domain",
    ],
    brand: { name: "My App", colors: { accent: "#00AAFF" } },
  });
</script>
</body>
</html>

Egy bővítményt a manifestjének URL-je azonosít. Az itt tárolt bővítmények a bővítménylistán szerepelnek, és egy AI újat is építhet neked.

Minden mount-beállítás, és hogy honnan jönnek a fájlok, magában az appban van leírva: Így készíts saját appot. A builddel együtt érkezik, így azt a verziót írja le, amelyet éppen betöltesz, nem azt, amelyhez ez az oldal készült.

Második rész · Az Addon Protocol v2

A bővítmény JSON-fájlok mappája.

A bővítmény egy tartalomforrás: filmek, rádióállomások, podcastok, receptek, kurzusok. Tedd a mappát bárhová a weben, add hozzá a címét egy appban, és minden, ami benne van, megjelenik ott, böngészhetően. A protokoll 2-es verziójához nem kell szerver: minden végpont lehet statikus fájl bármilyen CDN-en. Minden meglévő v1-es bővítmény továbbra is működik; az appok fordítanak a kettő között, és a v1 támogatott marad.

Elsősorban statikus

Minden végpont GET, mind gyorsítótárazható, és mind tárolható sima fájlként. A feladatrendszerhez van egy opcionális POST.

/mhub-addon.json
/catalog/{type}/{catalogId}.json
/item/{type}/{id}.json
/source/{type}/{id}.json

Kombinálható

A katalógusok, az elemek részletei, a források, a feloldók és a feliratok külön erőforrások. Egy bővítmény mindet biztosíthatja, vagy csak egyet.

"resources": ["catalog",
  "item", "source",
  "resolve", "subtitle"]

Kliensoldali lekérés

Egy végpont adat helyett feladattal is válaszolhat. Az app a felhasználó saját IP-címéről kéri le az adatot, így egy statikus bővítmény földrajzilag korlátozott API-kkal is működik.

// a bővítmény statikus marad,
// az utat a kliens teszi meg

mhub-addon.json

Egy minimális bővítmény egy manifest és egy katalógusfájl. Töltsd fel mindkettőt bármilyen statikus tárhelyre, és működik. A specifikáció OpenAPI 3.1, generált TypeScript-típusokkal és függőségek nélküli kliens-könyvtárral, MIT-licenccel, a GitHubon.

{ "id": "my-movies", "name": "My Movies", "specVersion": 2,
  "resources": ["catalog"], "types": ["video"],
  "catalogs": [{ "id": "all", "name": "All", "type": "video" }] }
Második rész · Építs AI-jal

Írd le. Egy AI megépíti.

A teljes bővítményformátum belefér egyetlen promptba, és soha nem kell elolvasnod. Másold ki a promptot, add hozzá az ötleted, és az AI egy fájlokból álló mappával válaszol. Töltsd fel őket bárhová, és a bővítményed élesben van.

01

Másold ki a promptot

A prompt a specifikációhoz irányítja az AI-t. Bármilyen asszisztenssel működik, amely tud linkeket olvasni, például a ChatGPT-vel vagy a Claude-dal.

02

Add hozzá az ötleted

„A kedvenc rádióállomásaim.” „Egy rendező összes filmje.” „Az egyetemem nyilvános előadásai.” Bármi, amiben van egy lista.

03

Töltsd fel a fájlokat

Bármilyen statikus tárhely jó, a GitHub Pages ingyenes. Add hozzá a címet egy mHub-appban, és böngészd a saját bővítményedet.

Olvasd el az mHub Addon Protocol v2 specifikációját itt:
https://raw.githubusercontent.com/mediahubmx/protocol/main/openapi.yaml
és építs nekem egy bővítményt (addont). A bővítmény statikus JSON-fájlok mappája,
amely bármilyen webes tárhelyre feltölthető. Válaszolj minden fájllal: először a teljes
elérési útja, utána a teljes tartalma.

A bővítményem: [írd le ide az ötleted]

Ha az asszisztensed nem tud linkeket megnyitni, illeszd be helyette a specifikációs fájlt a chatbe. A specifikáció és teljes példabővítmények a GitHubon találhatók.

Harmadik rész · Az mHub Browser API

Mire képes az oldalad egy mHub-appban

Minden egyetlen névtér alatt él: window.mhub, és minden gazdaalkalmazás a teljes magot kínálja. Egyszer ellenőrizd, hogy létezik-e a névtér, aztán egyszerűen hívd. Nincs SDK, nincs buildelés, nincs fiók: egy script tag a teljes beállítás, és nyugodtan tárolhatod magad is.

<script src="https://mhub.mx/mhub.js"></script>
Böngésző ellenőrzése…
Gazda
…
Eszköz
…
Képességek
…

Az API már működik az appokban, és a kiadásaikkal együtt terjed. Írj rá már ma, és az oldalad mindenképp működni fog: ahol nincs gazdaalkalmazás, ott a window.mhub egyszerűen nem létezik, és az oldalad hétköznapi weboldal marad. Szerezz egy böngészőt, amelyben megvan.

mhub.fetch

Bármit lekérhetsz. Nincs CORS, és olyan kérésfejléceket is küldhetsz, amelyeket a böngésző általában magának tart fenn.

// cross-origin, olvasható
const r = await mhub.fetch(url);

mhub.openStream

Egyes médiák lejátszásához saját kérésfejlécek kellenek. Egy hívás, és a gazdaalkalmazás minden platformon a megfelelő utat választja.

const s = await mhub.openStream(
  { url, headers });
video.src = s.url;

mhub.storage

Kulcs-érték tároló, amely az oldaladat követi, nem azt a domaint, amelyen éppen fut. Nincs engedélykérés, nincs beállítás.

await mhub.storage.set(k, v);

mhub-site.json

Leáll egy domain, az oldalad mégis betölt. Tegyél ki egy kis fájlt minden domainre; a böngésző megtalálja, ellenőrzi a tükreidet, és magától átvált. Kód nélkül.

{ "id": "mysite",
  "endpoints": [
    "https://a.example",
    "https://b.example" ] }

mhub.setLinks

Csempe a böngésző kezdőképernyőjén. Az út vissza az oldaladra, amely megmarad a látogatások között.

mhub.setLinks([
  { id, name, icon, url }]);

mhub.setSearch

A címsor az oldalad keresője lesz. A keresések és a javaslatok egyenesen az oldaladhoz kerülnek.

mhub.setSearch({ placeholder,
  onQuery, onSuggest });

mhub.device + capabilities

Tudd, hol futsz, és mire képes a gazdaalkalmazás, telefontól a tévéig, még az első kirajzolás előtt.

if (mhub.device.isTV) tvUi();

…és az app-deklarációk

Egy appként futó oldal megmondja a gazdaalkalmazásnak, mit kezel maga: a saját visszanavigációját (setBackHandler), a teljes képernyős lejátszót (setImmersive) és a kijáratot (exit); egy meta tag a HTML-ben jelzi, hogy távirányítóra készült app. Minden elem, az engedélymodellel és a tükörrendszerrel együtt, megtalálható az API-referenciában.

mhub.setBackHandler(depth);
mhub.setImmersive(true);
<meta name="mhub" content="app dpad">
Közösség

Olyanok teszik közzé, mint te.

Eddig 56 közösségi bővítmény 31 készítőtől. Jelentkezz be az e-mail-címeddel, tölts fel egy mappát zipként, vagy linkeld be a saját tárhelyeden lévőt, és miután átment az ellenőrzésen, az mhub.mx/@you/addon címen érhető el, a közösségi listában és a közösségi tárolóban is.

Építs valamit. Nagyot vagy kicsit.

Az API-referencia minden elemet, az engedélymodellt és a tükörrendszert is lefedi. A protokoll specifikációjához teljes, lemásolható példabővítmények tartoznak.