Ismerje meg, hogyan programozhat natív mobilalkalmazást az Ionic-React keretrendszer használatával.
Ebben az oktatóanyagban egy egyszerű bejelentkezési hitelesítési alkalmazás elkészítésével segítek az Ionic-React keretrendszer használatának megkezdésében. Az alábbi videó azt az alkalmazást mutatja be, amelyet közösen fejlesztünk.
Tehát mi az „Ionic-React”, és miért kell használni? Az Ionic-React a „React Native” ionos változata „natív” mobilalkalmazások készítéséhez. A keretrendszer számos azonnali mobil felhasználói felület-összetevőt biztosít menő mobilalkalmazások készítéséhez. A keretrendszer egyik fő előnye a „React Native”-vel szemben, hogy lehetővé teszi a meglévő CSS-készségek kihasználását. Ez azt jelenti, hogy létrehozhatja a teljes mobil felhasználói felületet „mindennapi” css-elemekkel, például gombokkal, h1 címkékkel, p címkékkel stb. Milyen jó!
Feltételezem, hogy rendelkezik alapvető React know-how-val, és megérti az olyan fogalmakat, mint az alkatrészek és a horgok. Létrehoztam egy fantasztikus oktatóanyagot, amely segít az R«eact and Material UI használatának megkezdésében – igen, nézze meg! Ehhez az oktatóanyaghoz nincs szükség ionikus know-how-ra, de jó, ha rendelkezünk vele. Ezenkívül feltöltöttem a „Githubon található teljes projekt forráskódot”, hogy letölthesse és kipróbálhassa.
Az Ionic-React használatának megkezdéséhez telepítenünk kell az alábbi paranccsal:
npm install -g @ionic/cliMost, hogy telepítettük az Ionic-Reactot, ideje létrehozni az alkalmazásunkat az alábbi paranccsal:
ionic start Auth blank --type=react
A parancs létrehoz egy Auth nevű Ionic-React alkalmazást üres sablonnal. Az alábbi parancs futtatásával azonnal megtekinthetjük az alkalmazást a webböngészőben:
ionic serve
Amikor a webböngésző megnyílik, az alábbi ábrán látható képernyőkép jelenik meg.
Gratulálunk! Létrehozta első Ionic-React mobilalkalmazását. Nem volt ilyen egyszerű?☺️ Vegye figyelembe, hogy a megjelenített oldal vagy képernyő az alapértelmezett „Kezdőoldal”, amely az Ionic-React alaplappal együtt kerül szállításra. A '‹Project›/pages' könyvtár tartalmazza a kezdőlap forrásfájlját, azaz a 'Home.tsx.' fájlt. Mielőtt elkezdené saját oldalunk létrehozását az Ionic-React segítségével komponenseket, először beszéljük meg alkalmazásunk háttéroldalát.
Háttérrendszer
Alkalmazásunk egy ingyenes online RESTful API-t használ, amely lehetővé teszi számunkra, hogy elvonatkoztassunk egy ilyen API fejlesztésének bonyolultságától. A Regress által biztosított, ingyenesen elérhető API-t használja. A Regres számos API-végpontot biztosít, amelyeket nagyon hasznosnak találtam a prototípuskészítéshez. A felhasználók hitelesítéséhez az /api/login végpontot fogjuk használni. Ehhez a végponthoz két paraméterre van szükség – az e-mail-címre és a jelszóra, ahogy az az alábbi kódrészletben is látható:
//request
{
"email": "[email protected]",
"password": "cityslicka"
}
//success - Response 200
{
"token": "QpwL5tke4Pnpja7X4"
}
//failure - Response 400
{
"error": "Missing password"
}
Tehát az API-kérés elindítása után választ kapunk a szervertől. Ebben az esetben visszakapunk egy érvényes tokent (amely általában titkosított formában tárolja a felhasználói adatokat) a sikeres szerverválaszhoz. Ellenkező esetben hibaüzenetet kapunk.
Térjünk át az alkalmazás frontend oldalára, most, hogy jól ismeri a háttérfolyamatot.
Frontend
Az Ionic-React keretrendszer számos azonnali mobil felhasználói felület-összetevőt biztosít, például figyelmeztetéseket, eszköztárat, kártyákat stb. Ez lehetővé teszi a mobiloldal egyszerű beállítását anélkül, hogy egy sor css-kódot írna, mint például a Material UI és a Bootstrap. Az Ionic-React alkalmazások azonban átveszi az alátétplatform megjelenését és érzetét, amely lehet android vagy IOS.
A fenti ábra az oldalunk bejelentkezési oldalát mutatja, amely a legtöbb bejelentkező oldalra jellemző. Az oldal fel van osztva a fejlécre (az oldal címe, azaz a bejelentkezés) és az oldal tartalmára. Az oldalon minden elem valójában egy Ionic-React komponens.
Az Ionic-React UI komponensek használata egyszerű, és nem okozhat problémát az összetevők használata, különösen akkor, ha más UI keretrendszerrel, például bootstrap-pel dolgozott. Vessünk egy pillantást az oldal megjelenítéséhez használt összetevőkre.
<IonHeader>
<IonToolbar>
<IonTitle>Login</IonTitle>
</IonToolbar>
</IonHeader>
A fenti kódrészlet az oldal címének megjelenítésére szolgál. Először az oldal fejlécrészét adjuk meg (az IonHeader komponens használatával), majd az Iontoolbar komponens segítségével helyezzük el a címet az oldal tetejére (fejléc részre). Az eszköztár-összetevő arra is használható, hogy az IonFooterösszetevőt szülőként használja az oldal aljára.
<IonRow>
<IonCol>
<IonIcon
style={{ fontSize: "70px", color: "#0040ff" }}
icon={personCircle}
/>
</IonCol>
</IonRow>
A legtöbb css keretrendszerhez hasonlóan az Ionic-React lehetővé teszi, hogy a tartalmat Grid elrendezésben, azaz sorokban/oszlopokban helyezzük el. A fenti kódrészlet az oldal ikonját, azaz a személy ikont jeleníti meg az IonIcon komponens használatával. Figyeljük meg, hogy az ikonstílust megváltoztathatjuk a hagyományos css használatával, ami az Ionic-React egyik előnye a React-Native keretrendszerrel szemben.
<IonRow>
<IonCol>
<IonItem>
<IonLabel position="floating"> Email</IonLabel>
<IonInput
type="email"
value={email}
onIonChange={(e) => setEmail(e.detail.value!)}
>
</IonInput>
</IonItem>
</IonCol>
</IonRow>
A fenti kódrészlet az oldal e-mail területét jeleníti meg az IonLabel (a címke megjelenítéséhez) és az IonInput használatával a tényleges e-mail beviteli mező megjelenítéséhez. Figyeljük meg, hogy a hagyományos css-hez hasonlóan megadhatjuk a beviteli típust (szöveg, email, jelszó). Módosítjuk az „e-mail állapot” objektumot, amikor a felhasználó megad egy e-mail címet az onIonChange függvényen keresztül. Ez hasonló a hagyományos css onChange eseményhez a bemeneti elemek esetében.
<IonRow>
<IonCol>
<p style={{ fontSize: "small" }}>
By clicking LOGIN you agree to our <a href="#">Policy</a
</p>
<IonButton expand="block" onClick={handleLogin}>
Login
</IonButton>
<p style={{ fontSize: "medium" }}>
Don't have an account? <a href="#">Sign up!</a>
</p>
</IonCol>
</IonRow>
A fenti kódrészlet megjeleníti a segítő szövegeket és a bejelentkezési gombot. Figyeljük meg, hogy a jó öreg css elemeket használhatjuk szöveg megjelenítésére és ízlésünk szerinti stílusra. Az Ionic-React biztosítja számunkra az IonButton komponenst a gombok megjelenítéséhez. A „block” tulajdonságot használtuk, hogy a gomb a képernyő teljes szélességén áthaladjon. Figyelje meg, hogy a gombra kattintva a handleLogin függvény meghívódik. Nézzük meg ezt a függvényt a továbbiakban.
const handleLogin = () => {
//validate inputs code not shown
const loginData = {
email: email,
password: password,
};
const api = axios.create({
baseURL: `https://reqres.in/api`,
});
api.post("/login", loginData)
.then((res) => {
history.push("/dashboard/" + email);
})
.catch((error) => {
setMessage("Auth failure! Please create an account");
setIserror(true);
});
};
A handleLogin függvény kódrészlete fent látható. Először is ellenőrizzük a felhasználói bemeneteket (a kód az egyszerűség kedvéért itt nem látható, de elérhető a projekt forráskódjában). Ezután egy API kérést kezdeményezünk az axios csomag használatával. Ez a csomag alkalmas api-hívások kezdeményezésére, és az 'npm install axios segítségével telepíthető. Figyelje meg, hogy közzétételi kérelmet küldünk a háttér API-nak, és egy JSON objektumot adunk át, amely tartalmazza a felhasználói bejelentkezési adatokat, azaz az e-mail-címet és a jelszót. Ezután feldolgozzuk a szerver (API) válaszát, és eldöntjük a helyes műveletet. Ha hibakódot kaptunk (pl. 400, 401), az azt jelenti, hogy valami hiba történt, és a szerver nem tudta hitelesíteni a felhasználót. Ebben az esetben elkapjuk a hibát, és kedves üzenetet jelenítünk meg felhasználónknak. Másrészt, ha minden jól ment, egyszerűen átirányítjuk a felhasználót egy műszerfali képernyőre.
A fenti képernyőképek a fent tárgyalt esetek közül néhányat mutatnak be. Az Dashbord oldalon a RESTful API-ból lekért felhasználások listája látható. A beolvasott adatok az IonList összetevők használatával jelennek meg.
Összefoglaló
Megmutattam, hogyan kezdheti el gyorsan a mobilalkalmazások fejlesztését az Ion-React komponens használatával egy RESTful API-ból származó adatokkal egy egyszerű hitelesítési alkalmazás fejlesztésével. Ez az oktatóanyag olyan alapfogalmakat mutat be, amelyek más összetett mobilalkalmazások létrehozásához is alkalmazhatók.
Az Ion-React valóban egy nagyszerű keretrendszer rengeteg összetevővel a mobilalkalmazások gyors fejlesztéséhez. A tanulási görbe gyorsabb a React-Native-hoz képest, mivel a meglévő css know-how-t kihasználhatjuk, ahelyett, hogy új módszereket tanulnánk meg az összetevők stílusozásához, mint a React-Native esetében. Biztos vagyok benne, hogy élvezni fogja a tanulást és a menő alkalmazások készítését az Ionic-React segítségével.
Remélem, tanult valamit ebből az oktatóanyagból.
Nyugodtan "töltse le/klónozza a projekt forráskódját a Githubon".
Tekintse meg a többi oktatóanyagomat a „React/Material UI” és a „Hálózati játékok programozása Pythonban, ha még nem tette meg☺️” témakörben.
Jó szórakozást a programozáshoz!
