Tartalomjegyzék[Elrejt][Előadás]
- Mi az a Bubble.io?
- Mi az a vizuális programozás?
- Milyen típusú alkalmazásokat tudsz fejleszteni?
Alkalmazás készítése Bubble segítségével (oktatóanyag)+-
- 1. Az első lépések
- 2. Adatbázis konfigurálása
- 3. Munkafolyamatok felépítése
- 4. Hír készítése
- 5. Dinamikus tartalom megjelenítése a hírfolyamban
- 6. Adatküldés az oldalak között
- 7. Dinamikus tartalom megjelenítése a történetoldalon
- 8. A kiadó cikkének megjelenítése
- 9. Kiadók követése
- 10. További funkciók, amelyeket hozzáadhat
- 11. Az eredmény
- Érvek
- Hátrányok
- Árazás
- Következtetés
Nemrég érdekeltek a HTML-en, CSS-en és JavaScripten kívüli webfejlesztési megközelítések.
A növekvő kód nélküli környezetben nem volt meglepő, hogy felfedeztük, hogy a webalkalmazások fejlesztésének szokásosabb megközelítései mellett számos alternatíva létezik.
Biztosan ismernie kell néhány ismertebb CMS-platformot, például a WordPress-t, amelyek nagyjából kódmentesek. De ha webalkalmazásokat szeretne készíteni, az ilyen platformok korlátozónak tűnhetnek.
Itt bemutatom a Bubble.io-t, amely egy erős kód nélküli eszköz amely lehetővé teszi a webalkalmazások létrehozását, mint még soha.
Vizsgáljuk meg alaposan!
Mi Bubble.io?
A Bubble egy nem technikai platform, amely egyesíti a vizuális programozási nyelvet és a webfejlesztési keretrendszer.
A felhasználók ezekkel a programozási eszközökkel egyedi online alkalmazásokat hozhatnak létre, adatbázisokat és folyamatokat módosíthatnak, oldalelemeket (képek, szöveg, beviteli űrlapok, térképek) adhatnak hozzá, és megtervezhetik felületeiket.
Ez egy olyan piactér, ahol ideális sablonokat, beépülő modulokat és szolgáltatásokat találhat, amelyek segítenek erős termékek felépítésében.
Anélkül, hogy be kellene állítania egy tipikus programozási keretrendszert, bármit létrehozhat a piacterektől a közösségi hálózatokon át a CRM-ig (Customer Relationship Management) a Bubble segítségével.
Lehetővé teszi az ügyfeleknek, hogy létrehozzák és személyre szabják alkalmazásaikat egy felhasználóbarát felület és egy point-and-click szerkesztő segítségével.
Használhatja olyan szolgáltatásokkal együtt, amelyek REST API-t biztosítanak, például Facebook, SQL, elemzési és fizetési alkalmazásokkal. Lehetővé teszi a felhasználók számára, hogy időt fordítsanak alkalmazásaik funkcionalitásának és megjelenésének fejlesztésére, hogy azok jól nézzenek ki táblagépeken és mobileszközökön.
Alkalmas minden vállalkozásmérethez, a kicsitől a közepesen át a nagyig; és elérhető Windows, Mac és az interneten.
Mi az a vizuális programozás?
A vizuális programozás lényegében az, aminek hangzik. Ahelyett, hogy manuálisan programozna kódot, grafikusan, kattintással és az összetevők oldalra húzásával végezheti el.
Ne tévesszen meg ez a rövid leírás.
Ez nem olyan, mint bármely más cookie-vágó alkalmazás vagy webhely-építő eszköz, amellyel az interneten találkozott. A legtöbb alkalmazáskészítő megköveteli, hogy alapsablonokra támaszkodjon, és rendkívül korlátozott funkcionalitással rendelkezik; csak bizonyos típusú alkalmazások fejlesztését teszik lehetővé, és korlátozzák a személyre szabást.
Bár a „vizuális programozás” és a „húzás és ejtés” fogalma könnyűnek tűnik a Bubble-ban, rendkívül erős.
Vizuális programozási környezete nemcsak az objektumok, például szöveg, grafika, bemeneti adatok és egyebek oldalra húzását teszi lehetővé, hanem lehetővé teszi ezen elemek funkciójának konfigurálását is.
Mit csinál Bubble?
A Bubble elsődleges célja, hogy bárki számára lehetővé tegye webalkalmazások létrehozását anélkül, hogy kódot kellene írnia.
Bár ez egy könnyen megjegyezhető célkimutatást biztosít, egy jelentős részt kihagy a történetből. Az ötlettől a piacig vezető út bonyolultabb, mint csupán kódsorok létrehozása.
A hagyományos fejlesztés során magasan képzett szakemberekből álló csapatra van szükség, akik az alkalmazás létrehozásának, növekedésének és karbantartásának bizonyos részein dolgoznak. Ezt fontold meg.
Mire van szükség minden alkalmazáshoz?
- Biztonság annak biztosítására, hogy senki ne férhessen hozzá illetéktelenül az adatokhoz.
- Adatbázis információk, például elemek, cikkek és közösségimédia-frissítések tárolására és lekérésére.
- Skálázhatóság a felhasználói bázis és az adatmennyiség akadálytalan fejlesztéséhez.
- Kellemes felhasználói felület, amely vonzóvá és könnyen használhatóvá teszi az alkalmazást.
- Integráció különféle szolgáltatásokkal és rendszerekkel.
A buborék sokkal többet helyettesít, mint egy kódoló. Mindezeket a szolgáltatásokat látványosan és nagymértékben automatizált módon biztosítja, így elképzelhető, ha nem is egyszerű, de mindent egyetlen ember kezelhet.
Míg a korábbi kód nélküli platformok különféle módokon próbálták helyettesíteni a kódolást. Koncepciója az, hogy a lehető legtöbb akadályt eltávolítsa egy alkalmazás piacra jutása elől, és mindent kezel a reszponzív tervezéstől és az animációktól a tárhelyszolgáltatásig, a verziótelepítésig, a biztonságig és az adatbázis-műveletekig.
Az API-csatlakozó használata a Bubble más szolgáltatásokkal való összekapcsolásához
Az API Connector valószínűleg a legfontosabb bővítmény a piacon. Ahogy a neve is sugallja, ez lehetővé teszi, hogy más alkalmazásokhoz és szolgáltatásokhoz csatlakozzon műveletek és adatok megosztásához.
Ahelyett, hogy ennek a működésének technikai sajátosságaiba merülne, vegye figyelembe az alábbi példákat arra vonatkozóan, hogy az API-k mire képesek:
- Hozzáférés megszerzése gépi tanulás olyan módszerek, mint a képfelismerés és a fordítás.
- Szerezze meg a legfrissebb időjárási információkat a Föld bármely pontjáról.
- Amikor egy esemény aktiválódik a Bubble-ban, a rendszer információkat cserél a rendszerek között, például egy lead létrehozása a CRM-ben vagy egy találkozó a Google Naptárban.
- Foglaljon repülőjegyet vagy szállást a világ bármely pontján.
- Szerezze meg bármely cég telefonszámát, helyét, fényképeit, logóját és véleményét a Google Térképen.
Beépülő modulok használata a natív funkciók javítására
Technikailag a JavaScript kódmodulokat, a CSS-t és a HTML-t egy funkcionális csomópontba keveri. A JS.JSON nyelven írt alkalmazás saját nyelvének alapjául szolgál.
Bár nem kell teljesen megértenie ezeket a terminológiákat az alkalmazások létrehozásához, egy kulcsfontosságú tényre utalnak: betartja az ismert és elismert webes szabványokat, lehetővé téve a fejlesztők számára, hogy jelentősen javítsák a natív funkcionalitást.
Ez már látható a beépülő oldalon, ahol több száz ingyenes és fizetős bővítmény érhető el az alapfunkciókhoz. Ez azt is jelenti, hogy ha eléri azt a pontot, amikor az alapvető képességei nem elegendőek, sok JavaScript-szakértő hajlandó testreszabott megoldást kidolgozni az Ön számára.
Milyen típusú alkalmazásokat tudsz fejleszteni?
Alkalmazások széles skáláját hozhatja létre, amelyek közül néhányat az alábbiakban mutatunk be.
- Alkalmazások speciális piacokra, közösséggel.
- Alkalmazások álláshirdetésekhez különféle ágazatokban.
- Szoftver a kórházi személyzet számára.
- Értékesítési pont szoftver fizikai üzletekhez.
- Fogászati irodai szoftver fehér címkével.
- Személyes üzleti leltár és ügyfélszolgálati szoftver.
- Bróker és ügyfélközpontú ingatlan-összesítő alkalmazások.
- Alkalmazások a piacon lévő eseményekhez és tanfolyamokhoz (és még hajókhoz is).
- A szakmai bizonyítványokhoz belső tesztelési alkalmazások szükségesek.
- Pályázatok elsősegélynyújtóknak.
- Munkavállalói menedzsment szoftver belső használatra.
Őszintén szólva a platformot nem úgy tervezték, hogy mindent megtegyen. Lehet, hogy nem az ideális választás, ha összetett látványt és mozgást tartalmazó játékalkalmazást tervez. Emellett, ha natív alkalmazást hoz létre (egyet az alkalmazásboltok számára), integrálnia kell egy másik, harmadik féltől származó szolgáltatással.
Főbb jellemzők
A Bubble tele van funkciókkal. Itt nem fogjuk tudni az összeset kitérni, de megpróbáljuk a leglényegesebbeket.
1. Dugó
Lehetővé teszi, hogy számos internetes eszköz funkcionalitását beépítse a sajátjába webalkalmazás. Ha például azt szeretné, hogy a felhasználók Facebook-fiókjukkal jelentkezzenek be, használhatja a Facebook bővítményt.
2. Fejleszteni
Lehetővé teszi dinamikus, többfelhasználós alkalmazások létrehozását asztali és mobil webböngészőkhöz, valamint az Instagramhoz vagy az Airbnb-hez hasonló webhelyek létrehozásához szükséges összes eszközt.
3. tervezés
Létrehozhat mobilbarát elrendezéseket és dinamikus tartalmat, hogy a végső simításokat adhassa egy terméknek, amelyet örömmel mutat meg másoknak.
4. Tárhely
Soha nem kell újra és újra aggódnia a szerver karbantartása, az infrastruktúra vagy a műveletek miatt.
Biztonságos módon gondoskodik a telepítésről és a tárhelyszolgáltatásról. A felhasználók száma, a forgalom és az adattárolás korlátlan.
Alkalmazás készítése Bubble segítségével (oktatóanyag)
Lássuk most a cselekvést, és fedezzük fel, hogyan építhetsz híralkalmazást a Bubble-on.
1. Az első lépések
A kezdéshez előbb meg kell regisztráljon egy ingyenes fiókot a Bubble-on.
Kezdjük azzal, hogy a Bubble látványtervező eszközét használjuk a platformunk kialakításához felhasználói felület. Az alábbiakban felsorolunk néhány kulcsfontosságú oldalt:
- Feltöltési oldal – Olyan webhely, ahol a kiadók cikkeket fejlesztenek és terjesztenek.
- Kezdőlap – Megjelenik a nemrég közzétett történetek listája.
- Narratív oldal – Egy oldal, ahol minden egyedi történet megtalálható.
- Kiadói oldal – egy oldal, amely egy bizonyos kiadó meséinek listáját jeleníti meg.
2. Adatbázis konfigurálása
Miután elkészítette a termék kijelzőjét, összpontosíthat az alkalmazást támogató adatmezők létrehozására. Ezeket a mezőket a terméke mögött meghúzódó munkafolyamatok összekapcsolására fogjuk használni.
Ebben a példában minden hírhez két különálló adattípust hozunk létre. Az egyik adattípus a történet alapvető tényeit tartalmazza (például a címet, a kiemelt képet és a kiadót), míg a másik adattípus nagyobb tartalomfájlokat, például magát a teljes elbeszélést.
Ha diszkrét adattípusként határozzuk meg őket, csak akkor tudjuk betölteni a szükséges információkat, amikor szükség van rá, ezzel korlátozva a Bubble szerkesztőnek előállítani kívánt anyag mennyiségét.
A következő adattípusok és mezők jönnek létre:
Adattípus: használó
Fields:
- Név
- A következő kiadók a kiadók listája. Fontos megjegyzés: Ha egy mezőt listaként hoz létre egy külön adattípus alapján, akkor az összes lényeges adatmezőt könnyedén beépítheti anélkül, hogy további mezőket kellene létrehoznia.
Adattípus: Történet
Fields:
- Cím
- Kiemelt kép
- Író
- Kategória
- kiadó
- A történet tartalma
Adattípus: A történet tartalma
Fields:
- A történet tartalma
Adattípus: kiadó
Fields:
- Név
- logo
- Követő
3. Munkafolyamatok felépítése
Most, hogy megszervezte az alkalmazás tervezését és adatbázisát, ideje elkezdeni mindent összerakni és működőképessé tenni.
A munkafolyamatok az elsődleges módszer ennek megvalósítására a Bubble-ban.
Minden munkafolyamat akkor következik be, amikor egy esemény megtörténik (pl. a felhasználó rákattint egy gombra), majd válaszul végrehajt egy sor „műveletet” (pl. „regisztrálja a felhasználót”, „módosítást hajtson végre az adatbázisban” és így tovább). .
4. Hír készítése
Az első szolgáltatás, amelyet kínálunk, egy olyan eszköz, amely lehetővé teszi a kiadók számára, hogy híreket írjanak és közzétegyenek a webhelyen.
A feltöltési oldalon kezdjük azzal, hogy beépítünk sok olyan beviteli elemet, amelyek az adatok adatbázisunkba történő bevitelére vonatkoznak. A szövegbevitel, a képfeltöltő és a legördülő menü példaként szolgál ezekre a mezőkre.
A dinamikus opciók listájának megjelenítéséhez a megjelenítő legördülő menüjét is testre kell szabnunk. Mivel minden új cikk felkerül a kiadó összes cikkének listájára, ki kell választanunk egy meglévő kiadót adatbázisunkból.
Ennek a legördülő menünek a beállításakor kiválasztjuk, hogy milyen típusú lehetőségeket kívánunk megjelentetni.
Ezt követően adatforrásunk átvizsgálja adatbázisunkat, és visszaküldi az összes aktuális publikáció listáját. Végül módosítjuk a forrás feliratát, hogy az tartalmazza a kiadó nevét.
Miután az író beírta a szükséges információkat minden egyes oldalon található bejegyzésbe, a közzététel gombra kattintva új mesét generál.
Ezután az adatbázison belül létrehoz egy új dolgot narratív adattípussal.
Ezután el kell kezdenünk az adatbázisunk feltöltését a szükséges mezőkkel. Csatlakoztassa az egyes oldali bemeneti összetevőket a megfelelő adatbázis-oszlopokhoz.
Először létrehozzuk a történet tartalomtípusát, amely végül magához a meséhez kapcsolódik.
Ezután egy újabb szakaszt adunk ehhez az eljáráshoz, valami mást generálva – ezúttal magát a mesét.
Ezeket az adatokat könnyedén integrálhatja a platformon, ha integrálja az első narratív anyagot, amelyet ehhez a meséhez fejlesztettünk.
Minden alkalommal, amikor ezt az eljárást aktiválja, új mese készül.
5. Dinamikus tartalom megjelenítése a hírfolyamban
Miután a kiadók elkezdenek anyagokat feltölteni az Ön mobilalkalmazásába, el kell kezdenünk létrehozni a kezdőlapon azt a logikát, amely az egyes cikkeket dinamikus listaként jeleníti meg. Ezt ismétlődő csoportelemünk alkalmazásával érhetjük el.
Az ismétlődő csoportok az adatbázissal együttműködve mutatják be és frissítik a dinamikus anyagok listáját.
Ismétlődő csoport alkalmazásakor először össze kell kapcsolnia az elemet egy adattípussal az adatbázisban.
Ebben az esetben az anyagot a mesék kategóriába sorolja. Ezenkívül meg kell adnia az adatforrást az adatbázisban lévő összes tábla listájaként.
Ezt az ismétlődő csoportot az egyes történetek kezdési dátuma szerint is elrendezzük, fordított időrendben jelenítve meg a listát. Most megkezdheti az egyes rácsokon belül megjelenő dinamikus anyagok rendszerezését.
Egyszerűen töltse ki a felső sort a megfelelő anyaggal, amelyet megjeleníteni szeretne, és ez a hatékony elem feltölti a fennmaradó oszlopokat az aktuális adatbázis adataival.
6. Adatküldés az oldalak között
Lehetőség van események létrehozására is az ismétlődő csoport minden sorában. Amikor navigációs funkciókat fejleszt a platformjához, ez a funkció jól jön.
Híralkalmazásunk kezdőlapja csupán az egyes történetek előnézetét jeleníti meg, beleértve a kiadót, a kiemelt képet és a történet címét.
Mindaddig azonban nem jeleníti meg a cikk teljes tartalmát, amíg a felhasználó át nem kattint a történetoldalra. Munkafolyamat-szerkesztőnket használjuk az adatok továbbítására az oldalak között az anyag megjelenítéséhez.
Kezdésként hozzon létre egy folyamatot, amely elküldi a felhasználót a történet oldalára, amikor a történet képére kattintanak.
Használjon navigációs eseményt a felhasználó másik oldalra való átviteléhez a folyamat fejlesztése közben.
Válassza ki a céloldal típusát a narratív oldalnak a legördülő menüből. Ezután további információkat kell megadnia ennek az oldalnak, hogy a Bubble szerkesztő megértse, melyik egyedi mesét kell megjeleníteni.
Az információ, amelyet meg kell adnia, az aktuális cellák történetéből származik.
7. Dinamikus tartalom megjelenítése a történetoldalon
Könnyedén lekérheti ezeket az eseményadatokat, és megjelenítheti a narratívából a releváns anyagot, amikor egy felhasználót egy bizonyos történetoldalra küldenek.
A függvény létrehozásához először ellenőriznie kell, hogy a céloldal típusa megegyezik-e a munkafolyamatban megjelenített adattulajdonsággal. Ebben a helyzetben a történetoldalt egy történettulajdonsággal kell társítania.
Egyszerűen képes megfelelő adatokat lekérni és továbbítani a meglévő forrásokból azáltal, hogy kategorizálja az oldalon található tartalom típusát.
Most megkezdheti a dinamikus anyagok beszúrását olyan mezőkbe, amelyek egyetlen táblázatból jelenítenek meg információkat.
8. A kiadó cikkének megjelenítése
A hír elolvasása után a felhasználó dönthet úgy, hogy megvizsgálja a kiadó teljes cikkkatalógusát. Ha kidolgozott egy kiadói adattípust, akkor a kiadók számára külön oldal létrehozása olyan egyszerű, mint az eredeti kezdőlapunk létrehozása.
Ezen az oldalon először az oldal típusának kiadóra állításával kell kezdenünk.
Ezután másolja ki az ismétlődő csoportot a kezdőlapról, és módosítsa a beállításokat.
Ebben az esetben ismétlődő csoportunk adatforrása megkeresi az összes létező cikket, amelynek kiadója az aktuális oldal kiadója.
9. Kiadók követése
A harmadik alapvető funkció, amelyet MVP-nkre építünk, az a lehetőség, hogy követjük a kiadót a platformon. A kiadó oldalán egy követési gombot adunk. Amikor erre az ikonra kattintunk, egy új folyamatot indítunk el, amely módosít egy dolgot.
Ha az oldal aktuális kiadóját hozzáadja a következő kiadványok listájához, akkor az aktuális felhasználó megváltozik.
Ezt követően frissítenünk kell az aktuális oldal kiadójának követőinek listáját az aktuális felhasználó hozzáadásával.
10. További funkciók, amelyeket hozzáadhat
Most, hogy elégedett az egyéni adatmezők felépítésével és a dinamikus információk bemutatásával, kreatívvá teheti a termékével kapcsolatos élményeket. A következőket is tartalmazhatja:
- Hozzon létre egy funkciót, amely lehetővé teszi a felhasználók számára, hogy elmentsék a tartalmat későbbi olvasásra.
- Minden egyes darab alján adja meg a javasolt cikkek ismétlődő gyűjteményét.
- Hozzon létre egy keresőeszközt, amellyel az emberek friss tartalmat találhatnak a webhelyen.
11. Az eredmény
A végső alkalmazás valahogy így fog kinézni.
Érvek
- Számos API-hoz és bővítményhez való csatlakozás lehetősége.
- Könnyen használható, kód nélküli alkalmazás.
- A programozási tapasztalattal nem rendelkezők profitálnak ebből.
- Sokoldalú és hatékony eszközök tervezése.
- Gyors lekérdezés feldolgozás.
Hátrányok
- Megnövekedett megbízhatóság.
- Az adatfeldolgozási sebesség lassú.
- A teljesítmény korlátozott.
Árazás
Az ingyenes csomag lehetővé teszi a platform megismerését és az alkalmazás fejlesztését.
A fizetett előfizetések olyan extrákat tartalmaznak, mint a fehér címkézés, az egyéni tartomány, a Bubble API-hoz való hozzáférés és a lefoglalt szerverkapacitás, amelyeket alább sorolunk fel.
- Személyes – 25 USD/hó (évente fizetendő) vagy 29 USD/hó (havonta fizetendő).
- Professzionális – 115 USD/hó (évente fizetendő) vagy 129 USD/hó (havi fizetés).
- Gyártás – 475 USD/hó (évente fizetendő) vagy 529 USD/hó (havonta fizetendő).
Kezdje el a Bubble szolgáltatást ingyen
Következtetés
A Bubble kiváló alternatíva olyan webalkalmazások készítéséhez, amelyek csak információkat tudnak megjeleníteni, vagy minimális felhasználói felülettel rendelkeznek.
Használata meglehetősen egyszerű, és a Bubble által biztosított oktatóanyagok rendkívül hasznosak. Online vizuális szerkesztője, amely lehetővé teszi webalkalmazások tervezését az Ön preferenciái alapján.
És a legjobb az egészben az, hogy nincs szüksége programozási tapasztalatra vagy szakértelemre. A Bubble mindenki számára megfelelő, függetlenül attól, hogy tudja-e a kódolást vagy sem.
A frontend nyelvek előzetes ismerete azonban előnyt jelenthet, mivel lehetővé teszi, hogy gyorsan kitalálja, mit csinál az eseménykezeléssel kapcsolatban.
Szóval, mit gondolsz a Bubble képességeiről?
Tudassa velünk a magyarázat!
Arbehi
Létrehozható-e üzlet a bubble.io eszközzel termékek értékesítésére?