Music App React js & Deezer API الجزء الأول


فهاد ل projet الجديد لي سبق ودرناه فالقناة وسميناه Music App React js & Deezer API غادي نشوفوا كيفاش نقادو app ب react js & deezer api فالشرح هنا غادي يكون مبسط ومختصر وفي حالة مفهمتيش شي حاجة ممكن ترجع ل الدروس بالفيديو من هنا.

فكيف قلنا ل app غادي تعرض ألبومات غنائية بإستعمال Deezer Api لي كتمكن من عرض مقاطع غنائية.

ل app كتمكن أيضا من البحث عن مغنيين وعرض الألبومات الخاصة بهم مع مقاطع عن كل ألبوم.

نظرة سريعة بالفيديو

1- إضافة routes الخاصين بال app

أول حاجة زيد app جديدة سميها لي بغيتي من بعد غادي ت installer les packages لي غادي نحتاجو :

- axios
- react-router-dom
- react-sound
- sweetalert

منبعد ف src زيد fichier سميه routes.js فيه غادي نزيد les routes ديالي لي فيهم des components لي غادي نزيدوهم من بعد.

الكود ديال routes.js هو :

                                //routes.js

import React,{Component} from 'react';
import {Switch,Route} from 'react-router-dom';
import DetailsAlbum from './components/DetailsAlbum';
import FavoritesAlbums from './components/FavoritesAlbums';
import Home from './components/Home';

class Routes extends Component{
   render(){
       return(
            <Switch>
               <Route path="/" exact component={Home}/> 
               <Route path="/details/:id" exact component={DetailsAlbum}/> 
               <Route path="/favorites" exact component={FavoritesAlbums}/> 
            </Switch>
       )
   }
}


export default Routes;
                            

2- تعديل الملف الرئيسي

منبعد ف index.js غادي ندير تعديل على الملف غادي نسترجع les routes لي زدنا ف routes.js منبعد غادي نعرضهم.

الكود ديال index.js بعد التعديل هو :

                                //index.js
import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter} from 'react-router-dom';
import Routes from './routes';

const App = () =>{
    return(
        <BrowserRouter>
            <Routes/>
        </BrowserRouter>
    )
}

ReactDOM.render(<App/>,document.getElementById("root"));
                            

3- إضافة الملف actions/index.js

ف src زيد dossier جديد سميه actions فيه زيد ملف جديد سميه index.js فيه غادي يكونوا عندي les fonctions لي غادي يمكنوا من إسترجاع الألبومات كاملين لي كنسترجعهم ب getAlbums لي كتاخذ variable search لي فيها كنحدد القيمة لي كنبحث عليها هنا حددناها تلقائيا ف eminem حيت مازل مزدنا حقل البحث.

عندي أيضا getFavoritesAlbums لي كتمكن من إسترجاع الألبومات لي زدتها فالقائمة المفضلة.

عندي أيضا getAlbum لي كتمكن من إسترجاع ألبوم بل id ديالو.

كاين أيضا مفتاح ل API لي ممكن تشوف الفيديو باش تعرف كيفاش تاخذ واحذ خاص بك أو خدم بهذا ديالي.

الكود ديال الملف هو :

                                //actions/index.js

import axios from 'axios';

const API_KEY = '05fa9ceff0mshcd26d5c061d6eebp13ef76jsn578cd28223c0';

const request = axios.create({
    baseURL: 'https://deezerdevs-deezer.p.rapidapi.com/',
    timeout: 30000,
    headers: {'X-RapidAPI-Key': API_KEY}
});

export function getAlbums(search = 'eminem'){
    const albums = request.get(`search?q=${search}`)
                    .then(response => response.data.data)
                    .catch(error => console.log(error));
    return albums;
}

export function getFavoritesAlbums(){
    const albums = localStorage.getItem('favorites');
    return albums;
}

export function getAlbum(id){
    const album = request.get(`album/${id}`)
                    .then(response => response.data)
                    .catch(error => console.log(error));
    return album;
}
                            

4- إضافة الملف Home.js

ف src زيد dossier جديد سميه components فيه زيد ملف جديد سميه Home.js لي غادي يكون هو الصفحة الرئيسية.

فيه غادي يكون الكود لي كنسترجع به les albums بل fonction getAlbums لي زدنا ف actions/index.js.

عندي أيضا searchAlbums لي كتاخذ قيمة البحث لي غادي ندخلو فحقل البحث لي غادي نزيدوه من بعد ثم كنسترجع les albums بل fonction getAlbums لي زدنا ف actions/index.js.

عندي أيضا addToFavorites لي كتمكن من إضافة ألبوم للقائمة المفضلة و checkAlbum لي كتحقق من أن الألبوم مسبقش زدتو للقائمة المفضلة.

ثم كاين renderAlbums لي كتعرض الألبومات مع روابط المشاهدة والإضافة للقائمة المفضلة.

بالنسبة لل components Header,Footer,Search غادي نزيدوهم من بعد.

الكود ديال الملف هو :

                                    //Home.js

import React,{Component} from 'react'
import './Home.css';
import Search from './widgets/searchField/Search';
import * as actions from '../actions/index';
import {Link} from 'react-router-dom';
import Header from '../components/widgets/header/Header';
import Footer from '../components/widgets/footer/Footer';
import swal from 'sweetalert';

class Home extends Component{
    state = {
        albums : [],
        term : '',
        show : false,
    }
    componentDidMount(){
        actions.getAlbums().then(item => this.setState({albums:item}));
    }
    searchAlbums = (term) => {
        actions.getAlbums(term).then(item => this.setState({albums:item}));
    }
    addToFavorites = (album) => {
        //console.log(album.album.id);
        let oldFavorites = JSON.parse(localStorage.getItem('favorites')) || [];
        if(this.checkAlbum(oldFavorites,album)){
            swal({
                title: "Album Existe!",
                text: "Album déja ajouté à vos favoris!",
                icon: "warning",
            });
            return false;
        }
        oldFavorites.push(album);
        let favorites = oldFavorites;
        localStorage.setItem('favorites',JSON.stringify(favorites));
        swal({
            title: "Album Ajouté!",
            text: "Album ajouté à vos favoris!",
            icon: "success",
        });
    }
    checkAlbum = (albums,album) => {
        var found = albums.some(function (item) {
            return item.album.id === album.album.id;
        });
        return found;
    }
    renderAlbums = () => {
        // console.log(this.state);
        const {albums} = this.state;
        return albums && albums.length ? 
            albums.map((item,index) => (
            <div  key={index} className="col-md-4 mb-2">
                <div className="card border-danger">
                    <img src={item.album.cover_big} className="card-img-top" alt=""/>
                    <div className="card-body">
                        <span className="text-primary">{item.artist.name} </span>
                        <div className="card-title">
                            {item.title} 
                        </div>
                    </div>
                    <div className="card-footer">
                        <div className="links">
                            <Link to={`/details/${item.album.id}`} className="link"><i className="fas fa-info text-danger"></i></Link>
                            <a onClick={() => this.addToFavorites(item)} className="link"><i className="fas fa-star text-danger"></i></a>
                        </div>
                    </div>
                </div> 
            </div>  
        ))
        : null;    
    }
    render(){
        return(
            <div className="container">
                <div className="row mt-4">
                    <div className="col-md-10 mx-auto">
                        <Header/>
                        <Search searchAlbums = {this.searchAlbums}/>
                        <div className="row"> 
                            {this.renderAlbums()}
                        </div>
                        <Footer/>
                    </div>
                </div>
            </div>
        )
    }
}

export default Home;
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد