Ionic ve React ile hibrit uygulama geliştirmek

2019-10-18

Bu yılın başlarında Ionic camiası artık React'ı da destekleyeceklerini açıklamış ve beta versiyonlarını kullanıma sunmuşlardı. O zamandan beri aklımın bir köşesinde duruyordu Ionic fakat fırsat bulup da açıp kurcalayamamıştım. Birkaç gün önce Ionic camiası artık resmen React'ı desteklediğini duyurunca sosyal medyada çok paylaşım yapıldı. Epeydir açıp da bir satır kod yazmaktan kendimi uzak tuttuğum şu sıralarda, şöyle küçük bir uygulama yapayım üstüne bir de blog yazısı yazayım dedim.

Ionic kendisini web, mobil ve desktop platformlara bir seferde uygulama geliştirmenize yardımcı olan açık kaynak ve ücretsiz bir komponent kütüphanesi olarak tanımlıyor. Eğer bilgisayarınızda Node.js yüklü ve React'a da birazcık aşinaysanız gelin birlikte küçk bir uygulama geliştirirken Ionic'i daha yakından tanıyalım.

Lafı fazla uzatmadan kolları sıvayalım. İlk önce yapmanız gereken şey komut panelinizi açmak ve hemen aşağıdaki komut yardımıyla Ionic'in son sürümünü bilgisayarınıza yüklemek.

npm i -g ionic@latest

Yükleme işlemi tamamlandıktan sonra eğer işlem başarılı olmuşsa, bilgisayarınızda herhangi bir yerde aşağıdaki komut yardımıyla projenizi oluşturabilirsiniz.

ionic start randomDogApp blank --type=react

Proje oluşturma işlemi tamamlandıktan sonra komut panelinin yardımıyla projenin oluşturulduğu dizine girip aşağıdaki komutu çalıştırmanız gerekiyor.

ionic serve

Bu işlem de başarılı olmuşsa biraz sonra web tarayıcınızın açıldığını ve bir başlangıç ekranının sizi karşıladığını göreceksiniz.

Ionic camiası Angular'dan da gelen bir alışkanlıkla TypeScript kullanmayı çok seviyor. Favori kod editörünüzü açıp baktığınızda projenin TypeScript uzantılı dosyalar ile oluşturulduğunu göreceksiniz fakat bu bir engel değil. Dosya uzantılarını ".tsx" değil de ".jsx" ya da ".js" olarak değiştirdiğinizde yine alışkın olduğunuz eski dostunuz JavaScript'i kullanabiliyor olacaksınız. Ayrıca "tsconfig.json" ve "tslint.json" dosyalarını da silebilirsiniz. Bu arada ben "pages" adlı klasörün de adını değiştirip "screens" şeklinde kullanıyor olacağım.

Birincisi "About" ekranı diğeri de "Home" ekranı olmak üzere uygulamada iki ekranın bulunmasını istiyorum. Bu yüzden "App.jsx" dosyasını açıp aşağıdaki değişikleri yapmalısınız. Bu uygulamaya özel bir stil kullanmayacağımız için CSS dosyalarına hiç dokunmayın.

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import {
IonApp,
IonRouterOutlet,
IonTabs,
IonTabBar,
IonTabButton,
IonLabel
} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';
/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';
/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';
/* Theme variables */
import './theme/variables.css';
import Home from './screens/Home';
import About from './screens/About';
const App = () => (
<IonApp>
<IonReactRouter>
<IonTabs>
<IonRouterOutlet>
<Route path="/home" component={Home} exact={true} />
<Route path="/about" component={About} exact={true} />
<Route exact path="/" render={() => <Redirect to="/home" />} />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="home" href="/home">
<IonLabel>Home</IonLabel>
</IonTabButton>
<IonTabButton tab="about" href="/about">
<IonLabel>About</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonReactRouter>
</IonApp>
);
export default App;
view raw App.jsx hosted with ❤ by GitHub

Yukarıda React ile uygulama yazanların aşina olduğu bir yapı var. Proje kurulumuyla gelen default CSS dosyalarının dahil edildiği satırlarda bir değişiklik yapmadım. "Home" ve "About" adlı ekranları dosyaya dahil ettim ve kullandım. Ayrıca istediğimiz ekrana bir yerden ulaşabilmek için uygulamanın en altına iki adet buton yerleştirdim.

Şimdi de sıra "Home" ve "About" adlı ekranları geliştirmeye geldi. İlk önce "About" ekranı ile başlayalım çünkü orda herhangi bir olay dönmeyecek sadece temsili olarak bulunan basit bir sayfa olacak.

import React from 'react';
import {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar
} from '@ionic/react';
const About = () => (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>About</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</IonContent>
</IonPage>
);
export default About;
view raw About.jsx hosted with ❤ by GitHub

Dikkat ettiyseniz komponentleri geliştirmek için ayrıca zaman kaybetmiyoruz. Ionic'in bize sunduğu en büyük güzelliklerden birisi de bu aslında. Önceden hazırlanmış birçok komponenti bize hazır olarak sunuyor tek yapmamız gereken dokümantasyonu açıp ihtiyacımız olduğunu düşündüğümüz komponentin nasıl kullanıldığını öğrenmek.

React Native ile uygulama geliştirdiyseniz bazı temel komponentler haricinde hemen hemen her şeyi kendiniz geliştirmek zorunda kalıyorsunuz bu yüzden React Native ile uygulama geliştirmek daha zaman alıcı olabiliyor.

Şon olarak sıra geldi asıl ekranı geliştirmeye. Bu ekranda bir görsel bir de buton olacak. Butona her basıldığında bize rastgele bir köpek resmi gösterecek. Bunun için public bir rest api kullanıyor olacağız.

import React, { useState, useEffect } from 'react';
import {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar,
IonButton,
IonImg
} from '@ionic/react';
const Home = () => {
const [randomDog, setRandomDog] = useState(null);
const getRandomDog = async () => {
const res = await fetch('https://dog.ceo/api/breeds/image/random');
const data = await res.json();
setRandomDog(data.message);
};
useEffect(() => {
getRandomDog();
}, []);
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Home</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
<IonImg src={randomDog} />
<IonButton expand="block" onClick={getRandomDog}>
Get Another Dog
</IonButton>
</IonContent>
</IonPage>
);
};
export default Home;
view raw Home.jsx hosted with ❤ by GitHub

Yukarıdaki işlemleri de daha önce React ile uygulama geliştirmiş birisinin kolayca anlayacağını düşündüğüm için satır satır açıklamayacağım. Kabaca anlatmak gerekirse bir butona basılmasıyla tetiklenen bir fonksiyon yardımıyla public bir rest api'a istek gönderiliyor ve gelen sonucu bizlere gösteriyoruz bu ekranda.

Ionic ile uygulama geliştirmek gördüğünüz üzere oldukça kolay. Ionic'i, React Native ile karşılaştırdığımızda avantajları olduğu gibi dezavantajları da mevcut fakat gelecekte kendisine nasıl bir yer edineceğini hep beraber görüyor olacağız. Doğrusunu söylemek gerekirse ben bu platform üzerinde ilk defa geliştirme yapan biri olarak bu makaleyi hazırlarken çok keyif aldım. Projenin kodlarını şuradan inceleyebilir ve herhangi bir konuda tartışmak için bana şuradan ulaşabilirsiniz.