Yeni bir klasör içine client (react mobile) projemizi oluşturalım.

react-native init NewsApp

Server tarafında nodejs rest api projesi yazacağız. Server adında bir klasör ekleyerek içine app.js dosyası oluşturalım. Bu app.js dosyası içine nodejs kodlarımızı yazacağız. Server klasörü içinde package.json dosyası oluşturmak için aşağıdaki kodu çalıştıralım.

npm init

Yine server tarafında, nodejs projelerinde sıkça kullanılan express kütüphanesini kuralım.

npm install express –save

Nodejs uygulamasına başlamadan haberleri hangi servisten alacağımızı belirleyelim. Bu projemizde haber servisi olarak hurriyet api servislerini kullanacağız. Aşağıdaki adrese giderek yeni bir hesap oluşturalım.

https://developers.hurriyet.com.tr/?source=post_page—————————

Dashboard’a girerek “get api key” butonu yardımı ile yeni bir api key oluşturalım. (Oluşturduğumuz bu api key ile servise bağlanacağız.)

Şimdi server tarafındaki server/app.js dosyamızı kodlayabiliriz. Önce kullanacağımız kütüphaneleri import edelim.

var express = require(‘express’);
var http = require(“https”);
var app = express();
var server = require(‘http’).Server(app)

Hurriyet api servisine yapacağımız istek için bir options oluşturalım. Api key kısmına dashboard’dan oluşturduğumuz api keyi yazalım.

var options = {
“method”: “GET”,
“hostname”: “api.hurriyet.com.tr”,
“port”: null,
“path”: “/v1/articles”,
“headers”: {
“accept”: “application/json”,
“apikey”: “Api Key”
}
};

Şimdi oluşturduğumuz options ile request’imizi yapalım

app.get('/news', function(req, res) { http.request(options, function(response) {   response.pipe(res); }).on('error', function(e) {   res.sendStatus(500); }).end();});server.listen(3000)

Aşağıdaki komut ile uygulamamızı çalıştıralım. (Server klasörünün içindeyken.)

node app.js

Evet projemiz http://localhost:3000 adresi üzerinden ayağa kalkacaktır.
Postman yardımı ile http://localhost:3000/news adresine get requesti atarak deneyelim.

Evet server tarafındaki işlemlerimizi tamamladık. Şimdi client tarafına göz atalım.

Mobil tarafta native base UI component yapısını kullanacağımız için aşağıdaki kütüphaneyi kuruyorum.

https://nativebase.io/?source=post_page—————————

Kurulum için gereken komutlar:

npm install native-base –save
react-native link

Evet client tarafındaki kurulumları tamamladık şimdi react-native projemizin ana dizininde bulunan app.js dosyasını açalım ve aşağıdaki gibi güncelleyelim.

Önce native-base kütüphanemizi import ettik. Ardından constructor’da state’e datasource set ettik. App componentin componentDidMount() methodunda api’mize request gönderdik ve gelen cevabı state’de bulunan datasource objemize ekledik.

Sayfamızın render kısmında ise native-base kütüphanesinden List componentini kullanarak haberlerimizi listeledik.

Evet react-native projemizin ana dizininde uygulamamızı çalıştıralım.

react-native run-ios

Git Repo: https://github.com/akaramanapp/newsapp

Yararlı olması dileğiyle..

Hoşçakalın.