Az előző részben statikus weboldalt építettünk. Most emeljük a tétet, és egy élő Bitcoin árfolyamfigyelő alkalmazást készítünk. De nem elméletben, hanem úgy, hogy a végeredmény ott legyen a telefonodon ikonként, mintha egy igazi app lenne.
A probléma a legtöbb hasonló próbálkozással az, hogy vagy fizetős adatforrást kérnek, vagy a telefonod böngészője blokkolja őket biztonsági okokból. Mi most egy golyóálló megoldást használunk. A világ legnagyobb tőzsdéjének, a Binance-nek a publikus adatfolyamát és egy trükköt alkalmazunk, amivel 10 másodperc alatt internetes linkké alakítjuk a kódodat.
Előkészületek
Csak a Google AI Studio felületére lesz szükséged a böngésződben.
1. lépés: A stabil adatforrás prompt
A CoinGecko helyett a Binance Websocketjét fogjuk használni. Ez nem kérdezget 10 másodpercenként, amiért általában letiltanak, hanem folyamatos és élő adatkapcsolatot tart fent. Ez a megoldás sokkal profibb és stabilabb.
Másold be az alábbi promptot a Google AI Studio felületére.
„Készíts egy egyfájlos (single file) HTML alkalmazást, ami egy Bitcoin Árfolyamfigyelő.
Technikai Működés Használd a Binance nyilvános WebSocket Streamjét (wss://stream.binance.com:9443/ws/btcusdt@trade) az élő árfolyam megjelenítésére. Ez a legstabilabb ingyenes megoldás.
Dizájn Sötét háttér (#121212) és modern betűtípus (sans-serif) legyen. Középen nagy számokkal jelenjen meg az árfolyam (USD). Az ár színe villanjon fel zölden, ha nőtt, és pirosan, ha csökkent az előző kötéshez képest. Legyen egy Bitcoin logó vagy ikon a fejlécben.
Mobil optimalizálás Legyen reszponzív, töltse ki a mobilképernyőt. A fejlécbe (head) tedd bele a szükséges meta tageket, hogy iPhone-on és Androidon web appként viselkedjen (apple-mobile-web-app-capable).”
Nyomd meg a Run gombot.
2. lépés: A kód mentése
A generálás után, ahogy az előző részben is, az előnézeti gomb megnyomásával ellenőrizheted hogy valóban hogy néz ki a felhasználói felület. Ha minden ok, tetszik a felület, másold ki a teljes kódot.
- Nyisd meg a Jegyzettömböt a gépeden.
- Illeszd be a kódot.
- Mentsd el index.html néven az Asztalodra, egy mappába. Nagyon fontos, hogy a fájl neve index legyen, a kiterjesztése pedig html és egy mappában legyen.
3. lépés: Élesítés 10 másodperc alatt regisztráció nélkül
Ahhoz, hogy az iPhone vagy Android megnyissa és működjön, a fájlnak az interneten kell lennie, nem a fájlok között a gépeden. Erre a Netlify Drop a legjobb ingyenes eszköz.
- Nyisd meg a böngészőben a
app.netlify.com/dropoldalt. - Nyisd meg a mappát a gépeden, ahol az
index.htmlfájlod van. - Egyszerűen húzd be a mappát az oldalra a „Drag and drop your site folder here” mezőbe.
- Pár másodperc múlva kapsz egy linket, ami így néz ki
random-nevecske.netlify.app.
Kész is vagyunk. Ez a link a te élő alkalmazásod.
4. lépés: Telepítés a mobilra
Most jön a varázslat, amitől applikáció lesz a weboldalból.
Küldd át magadnak a Netlify linket, és nyisd meg a mobilodon. Látni fogod, ahogy az árfolyam másodpercenként villog és frissül. Stabilan és hiba nélkül.
iPhone esetén Kattints a Megosztás ikonra középen lent, majd görgess le és válaszd a Főképernyőhöz adás lehetőséget.
Android esetén Kattints a három pöttyre jobbra fent, majd válaszd a Hozzáadás a kezdőképernyőhöz lehetőséget.
Most van egy ikon az asztalodon. Ha rákattintasz, teljes képernyőn és böngészősáv nélkül nyílik meg, pont mint egy letöltött app. Mivel a Binance élő rendszerét használja, sosem fogja elérni a limitet, és mindig a valós árat látod.
Mi jön a következő részben?
Ezzel a lépéssel a zsebedben van egy árfolyamfigyelő alkalmazás. De egy alkalmazás tartalom nélkül félkarú óriás. A következő részben megmutatjuk a tartalomgyártás jövőjét. Készítünk egy saját podcast adást a Google NotebookLM segítségével és építünk hozzá egy lejátszót, amit beilleszthetsz az első részben készített weboldaladra. Mindezt stúdió és mikrofon nélkül. Ne maradj le a következő epizódról sem, iratkozz fel a hírlevelünkre még ma!
