Menampilkan data Api dan membuat portal berita

Hallo sahabat React js kali ini kita akan belajar  menampilkan data API Menggunakan React js dari sumber API yaitu https://newsapi.org/, ok  sahabat sebelum ke pembuatan project kita akan berkenelan dulu,

Apa itu REST API?

REST (REpresentational State Transfer) merupakan standar arsitektur komunikasi berbasis web yang sering diterapkan dalam pengembangan layanan berbasis web. Umumnya menggunakan HTTP (Hypertext Transfer Protocol) sebagai protocol untuk komunikasi data.

Gaya arsitektur REST membantu meningkatkan penggunaan bandwidth yang lebih sedikit untuk membuat aplikasi lebih cocok untuk internet. Ini sering dianggap sebagai ” bahasa internet ” dan sepenuhnya didasarkan pada sumber daya.

Prinsip REST API

Nah, ada enam prinsip dasar yang ditetapkan oleh Dr. Fielding yang menjadi penentu desain REST API pada tahun 2000. Berikut adalah enam prinsip panduan REST:

Tanpa server induk

Permintaan yang dikirim dari klien ke server akan berisi semua informasi yang diperlukan untuk membuat server memahami permintaan yang dikirim dari klien. Ini bisa berupa bagian dari URL,  parameter string-string, isi, atau bahkan tajuk. URL digunakan untuk mengidentifikasi sumber daya secara unik dan badan memiliki status sumber daya yang diminta. Setelah server memproses permintaan, respons dikirim ke klien melalui tubuh, status, atau tajuk

Server klien

Arsitektur client-server memungkinkan antarmuka yang seragam dan memisahkan klien dari server. Ini meningkatkan portabilitas di berbagai platform serta skalabilitas komponen server.

 

User Interpace

Untuk mendapatkan keseragaman di seluruh aplikasi, REST memiliki empat batasan antarmuka berikut :

  • Identifikasi sumber daya
  • Manipulasi Sumber Daya menggunakan representasi
  • Pesan deskriptif diri
  • Hypermedia sebagai mesin status aplikasi

 

Cacheable

Untuk memberikan kinerja yang lebih baik, aplikasi sering dibuat dapat disimpan dalam cache. Ini dilakukan dengan  memberi label respons dari server sebagai cacheable atau non-cacheable baik secara implisit atau eksplisit. Jika respons didefinisikan sebagai cacheable, maka cache klien dapat menggunakan kembali data respons untuk respons yang setara di masa mendatang.

Sistem berlapis

Arsitektur sistem berlapis memungkinkan aplikasi menjadi lebih stabil dengan membatasi perilaku komponen. Jenis arsitektur ini membantu meningkatkan keamanan aplikasi karena komponen di setiap lapisan tidak dapat berinteraksi di luar lapisan langsung berikutnya. Selain itu, ini memungkinkan penyeimbangan muatan dan menyediakan cache bersama untuk meningkatkan skalabilitas.

 

kursus website terbaik

 

Kode sesuai permintaan

Ini adalah batasan opsional dan paling sedikit digunakan. Ini memungkinkan kode klien atau applet untuk diunduh dan digunakan dalam aplikasi. Intinya, ini menyederhanakan klien dengan membuat aplikasi pintar yang tidak bergantung pada struktur kodenya sendiri.

Sekarang, setelah Anda mengetahui prinsip-prinsip di balik REST API, selanjutnya mari Kita membuat Project menampilkan data api dari https://newsapi.org/

Bagi sahabat yang belum mengikuti seri tutorial sebelumnya sebaiknya sobat liat dahulu pembahasan sebelumya Belajar Boostrap membuat website company profile dengan React JS ,

ok jika sudah langkah pertama kita akan mengambil data API nya silahkan klik Link berkut https://newsapi.org/, maka akan muncul tampilan seperti gambar di bawah ini:

cara menampilkan data api

Jika sudah selanjutnya Klik Login bagi sobat yang sudah punya akun tapi bagi yang belum silahkan daftar terlebih dahulu, ok jika sudah login , kemudian klik menu documentation -> endpoints -> Top HeadLins

data api react js

untuk url get warna hijau itu yang akan kita pake untuk membuat Project Api,

jika sudah buka text editor sobat, dan buat file News.jsx di dalam folder component

untuk lebih jelasnya lihat gambar di bawah ini:

CARA MENAMPILKAN API

 

OK! jika sudah kita harus menginstal axios di folder project teman-teman untuk Link nya https://www.npmjs.com/package/axios

Jika sudah di instal selanjutnya buka file News.jsx nya dan tambahkan sintak seperti berikut:

import React from 'react';
import axios from 'axios';



class News extends React.Component {
  state = {
    datas: [],
    isLoading: true,
    errors: null
  };

  Databerita() {
    axios
      .get(
        'https://newsapi.org/v2/top-headlines?country=id&apiKey=41c65c464645e6440791b929f0d26153ac'
      )
      .then(response =>
        response.data.articles.map(
          newsdata => ({
            name: `${newsdata.source.name}`,
            title: `${newsdata.title}`,
            description: `${newsdata.description}`,
            content: `${newsdata.content}`,
            image: `${newsdata.urlToImage}`,
            create: `${newsdata.publishedAt}`
          })
         
        )
      )

      .then(datas => {
        this.setState(
          {
            datas,
            isLoading: false
          },
          console.log(datas)
        );
      })
      .catch(error => this.setState({ error, isLoading: false }));
  }



  componentDidMount() {
    this.Databerita();
  }

  render() {
    const { isLoading, datas } = this.state;
    return (
      <React.Fragment>
        
          <div className="container judulber">
            <div className="row">
                <div className="col-md-12">
                    <div className="alert alert-primary" role="alert">
                       <h2 className="text-center">Dunia Dalam Beria</h2> 
                    </div>
                </div>
                
            </div>
          </div>

          
            {!isLoading ? (
              datas.map(data => {
                const {
                  name,
                  title,
                  description,
                  image,
                  content,
                  create
                } = data;

                return (
                  <div key={data.title} className='container testi'>
                  
                        <div className="col-md-4 kiri">
                            <img className='img-fluid' src={image} alt='images' />
                            <div className='content-detail'>
                            <span>{create}</span>
                            <h4 className='title'>{title}</h4>
                            <p className='desc'>{description}</p>
                            <h4 className='content-name'>{name}</h4>
                            
                            <p className='content'>{content}</p>
                           
                               
                              <button className='btn btn-info'>Read More</button>
                            
                            </div>
                        </div>
                   
                  </div>
                );
              })
            ) : (
            
            <div className="container">
                 <p className="text-center">Loading...</p>
            </div>
             
            )}
         
        
      </React.Fragment>
    );
  }
}

export default News;

 

Kursus React Js

Jika sudah buka kembali file App.js nya bagi sahabat yang masih bingung silahkan liat seri tutorial sebelumnya di Belajar Boostrap membuat website company profile dengan React JS , 

Ok kita buka kembali file App.js nya

menampilkan data api

Untuk kodenya yang di App.js

import React,{Component} from 'react';
import Grid from './Grid';
import Home from './Home/Home';
import '../style/styles.css';
import { BrowserRouter as Router,Route,Link } from "react-router-dom";
import $ from 'jquery';
import News from './News';
window.jQuery = $;
window.$ = $;
global.jQuery = $;

class App extends Component {
    render(){
      return(
        <Router>
        <div className="header">
         <div className="container">
            <nav className="navbar navbar-expand-lg navbar-light warna">
                <Link className="navbar-brand" to=""> <img className="logo" src={require('../logo/logo.png')}  alt="logo"/></Link>
                <button className="navbar-toggler toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>

                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav ml-auto">
                      <li class="nav-item dropdown">
                        <Link class="nav-link dropdown-toggle text-white" to="" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          PROMO
                        </Link>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                          <Link class="dropdown-item " to="/">PROMO</Link>
                          <Link class="dropdown-item " to="/grid">Partnership</Link>
                        </div>
                      </li>
                      <li className="nav-item dropdown">
                          <Link className="nav-link dropdown-toggle text-white" to="" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          PAKET & ADD-ON
                          </Link>
                          <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                          <Link className="dropdown-item" to="">Action</Link>
                          <Link className="dropdown-item" to="/news">Another action</Link>
                          <div className="dropdown-divider"></div>
                         
                          </div>
                      </li>
                      <li className="nav-item">
                          <Link className="nav-link text-white" to="/news">News</Link>
                      </li>
                    </ul>
                </div>
            </nav>             
         </div>
         <div className="">
        

            <Route path="/" exact component={Home}/>
            <Route path="/grid"  component={Grid}/>
            <Route path="/news" component={News}/>
         </div>

        </div>
        </Router>
      )
    }
}

export default App;

jika sudah jalankan pada terminal npm start, maka hasilnya seperti gambar di bawah ini:

 

menampilkan data dari api

 

Belajar React js dari dasar sampai Bisa

 

 

 

Tinggalkan Balasan