با استفاده از React ، Superagent و API اینستاگرام

در این آموزش با استفاده از SuperAgent یک اسلایدر تصویر با تصاویر گرفته شده از اینستاگرام ایجاد می کنید. کتابخانه های مختلف بسیاری وجود دارد که می تواند برای برقراری تماس Ajax مورد استفاده قرار گیرند. Fetch API ، Axios ، Request ، jQuery $ .ajax و SuperAgent برخی از محبوب ترین راه ها برای واکشی داده ها از API هستند.
به طور خاص ، با استفاده از چارچوب جاوااسکریپت [reactjs](reactjs.org/) ، یک اسلایدر تصویر ایجاد خواهید کرد. که تصاویر اینستاگرامی که با استفاده از کتابخانه درخواست SuperAgent Ajax گرفته شده اند را نمایش میدهد.
پیش نیازها
برای دنبال کردن این آموزش ، به nodej هایی که به صورت محلی بر روی رایانه نصب شده اند ، نیاز دارید. همچنین باید برنامه Creat React را نصب کنید.
پس از نصب این موارد ، با تنظیم فضای کاری پروژه خود شروع کنید.
راه اندازی پروژه
دستور create-react-app روشی مناسب برای راه‌اندازی پروژه ما است. این دستور به پیکربندی متعلقات کمک می کند و به شما امکان می دهد تا روی سمت React موارد متمرکز شوید.
با اجرای این دستور در ترمینال خود شروع کنید:
$ create-react-app image_slider

نتیجه یک پوشه پروژه به نام image_slider خواهد بود (برای استفاده از یک نام دیگر ، به سادگی image_slider را در ترمینال با نام دلخواه خود جایگزین کنید). پوشه پروژه حاوی فایل های مهمی از جمله pack.json ، node_modules و پوشه src ما است که در آن فایلهای برنامه ما قرار دارند.
در ترمینال خود ، برنامه را شروع کنید تا با اجرای دستور زیر مطمئن شوید که همه چیز به طور کامل کار می کند:
$ yarn start

این دستور باید URL http: // localhost: 3000 / را در مرورگر ما باز کند. هر تغییری که در فایل های React ایجاد کنید باعث می شود صفحه به طور خودکار در مرورگر مجدد لود انجام شود.
تنظیم React
تمام متعلقات react که نیاز داریم، در حال حاضر برای ما نصب شده اند. برای این آموزش فقط یک فایل در پروژه ویرایش می شود. در صورت تمایل می توانید اجزای مختلفی را که ایجاد می کنید به صورت جداگانه در فایل های مجزا جدا نمایید. در صورت انجام این کار ، اطمینان حاصل کنید که آن ها را به درستی export و import میکنید.
برای شروع ، App.js را ویرایش کنید و برچسب <p> </p> را حذف کنید چون لازم نیست، مگر اینکه بخواهید یک مقدمه کوچک برای برنامه خود بنویسید. توجه کنید که هنگام ایجاد تغییر در فایل ، مرورگر به طور خودکار مجدد لود می شود و آن را ذخیره می کند.
در این مرحله ، فایل App.js شما باید به این شکل باشد.
import React, { Component } from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;

class App extends Component {
render() {
return (
<div className=”App”>
<header className=”App-header”>
<h1 className=”App-title”>My Instagram</h1>
</header>
</div>
);
}
}

export default App;

تنظیم SuperAgent
همانطور که در مستندات آن مشخص شده است ، SuperAgent یک API ajax پیشرونده کم حجم است که برای انعطاف پذیری ، خوانایی و انحنای یادگیری کم ساخته شده است.
یک درخواست انجام شده باید از روش یا عملی برخوردار باشد که شما می خواهید انجام دهید و به دنبال آن یک تابع .then () یا .end () برای انجام عملیات بر روی / با پاسخ باشد. برای کنترل خطا می توانید یک روش .catch داشته باشید اما اختیاری است.
از این رو درخواست GET چنین به نظر می رسد:
request
.get(‘/getsomedata’)
.then((res) => {
console.log(res)
}
.catch((err) => {
console.log(err)
}

با نصب superAgent شروع کنید.yarn add supertest را روی ترمینال اجرا کنید. در مرحله بعد ، آن را در فایل App.js خود وارد کرده و آن را ویرایش کنید تا مانند زیر باشد:
import React, { Component } from ‘react’;
import request from ‘superagent’;
import logo from ‘./logo.svg’;
import ‘./App.css’;

class App extends Component {
constructor(props) {
super(props);
this.state = {
photos: []
}
}

componentWillMount() {
this.fetchPhotos();
}

fetchPhotos() {
request
.get(‘https://api.instagram.com/v1/users/self/media/recent/?access_token=ACCESS-TOKEN’)
.then((res) => {
this.setState({
photos: res.body.data
})
})
}

render() {
return (
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo” />
<h1 className=”App-title”>Welcome to My Instagram</h1>
</header>
<div>
{console.log(this.state.photos)}
</div>
</div>
);
}
}

export default App;

عملکردی به نام fetchPhotos مسئول واکشی داده ها از اینستاگرام است. هنگامی که داده ها را دریافت می کند ، در آرایه ای به نام photos ذخیره می کند. تابع fetchPhotos درست قبل از سوار شدن کامپوننت با استفاده از computerWillMount فراخوانی می شود. فعلاً ، ما آرایه را وارد می کنیم تا ببینیم داده ها را گرفته ایم یا نه. هنوز هیچ تأیید هویتی انجام نداده ایم بنابراین نباید قادر به دیدن هر چیزی باشیم ، در عوض باید یک پیام خطا به ما بدهد.
API اینستاگرام
API اینستاگرام عکسهایی را که ایجاد می کنیم برای نمایش با اسلایدر ارائه می دهد. از آنجا که ما فقط در سمت کلاینت کار می کنیم و روی نحوه استفاده از API اینستاگرام تمرکز نداریم ، لازم نیست که مراحل تأیید اعتبار را طی کنیم تا نشانه دسترسی خود را دریافت کنیم. با این حال ، اگر می خواهید در مورد نحوه استفاده از API اینستاگرام اطلاعات بیشتری کسب کنید ، می توانید مستندات آنها را مشاهده کنید.
می توانید با استفاده از http://instagram.pixelunion.net نشانه تولید کنید. برای جلوگیری از اشتراک گذاری ، حتماً این فایل را در یک فایل .env نگه دارید.
ایجاد اسلایدر تصویر
نمایش تصاویر
عکس هایی که گرفته ایم در یک مجموعه قرار دارند اما باید هرکدام از آنها را به عنوان یک عکس واحد نمایش دهیم. بنابراین ، نیاز به نوشتن یک تابع map برای حلقه زدن در آرایه و برگرداندن عکس های خود داریم که همگی در صفحه ما نمایش داده می شوند.
قبل از افزودن عکس ها به صفحه خود، می توانیم با اضافه کردن این خط در داخل تابع نقشه {console.log(photo)} عکس را روی کنسول مرورگر وارد کنیم. این به ما آبجکتی می دهد که شامل چندین ویژگی است ، چند عکس ، کپشن ، تاریخ ایجاد شده ، لایک ها ، نظرات ، افرادی که بر روی عکس تگ شده اند و غیره.
تابع جدید ما در div جدیدی تحت هدر قرار خواهد گرفت و باید به صورت زیر باشد:
<div>
{this.state.photos.map((photo, key) => {
return (
<div key={photo.id}>
<img src={photo.images.standard_resolution.url} alt={photo.caption}/>
</div>
)
})}
</div>

همچنین این اسلایدر باید کپشن تصاویر را در پایین عکس ها نشان دهد. برای انجام این کار ، div دیگری زیر برچسب تصویر اضافه کنید. سرانجام برای جلوگیری از بروز هرگونه خطایی در صورت عدم وجود کپشن عکس در اینستاگرام ، شرطی را اضافه کنید که یک رشته خالی را برگرداند:
<div style={{width:’600px’, margin: ’24px auto’, fontStyle: ‘italic’}}>
{photo.caption !== null ? photo.caption.text : ”}
</div>

اضافه کردن فلش های اسلایدر
تاکنون تمامی عکس های دریافت شده از API اینستاگرام با هم در همان صفحه نمایش داده می شوند. مرحله بعدی نمایش هر عکس به طور جداگانه و افزودن پیمایش از یک عکس به عکس دیگر است.
فلش ها یک روش مفید برای حرکت در اسلایدر هستند. برای این قابلیت ، دو فلش را به عنوان اجزای جداگانه مانند این در نظر بگیرید:
const BackArrow = () => (
<div style={{fontSize: ‘2em’, marginRight: ’12px’}}>
<i className=”fa fa-angle-left fa-2x” aria-hidden=”true”></i>
</div>
)

const NextArrow = () => (
<div style={{fontSize: ‘2em’, marginLeft: ’12px’}}>
<i className=”fa fa-angle-right fa-2x” aria-hidden=”true”></i>
</div>
)

Create-react-app فاقد اسکریپتی است که برای استفاده از آیکنهای بسیار جذاب نیاز داریم ، بنابراین باید yarn add font-awesome را اجرا کنید تا آن را به پروژه اضافه کنید و سپس ‘font-awesome / css / font-awesome.css’ را وارد پروژه کنید تا آیکون های ما را شامل شود.
اضافه کردن شمارش اسلایدها به وضعیت
اکنون همه مؤلفه های مورد نیاز خود را داریم اما فلش ها کاربردی نیستند و تمام عکس های ما هنوز در صفحه قابل مشاهده اند.
برای پیگیری اینکه روی کدام عکس قرار داریم ، slideCount را به حالت اضافه کنید. slideCount به سادگی یک عدد صحیح خواهد بود که در ابتدا با 0 تنظیم می شود و هر بار که روی پیکان بعدی کلیک می کنیم افزایش می یابد و وقتی روی پیکان قبلی کلیک می کنیم کاهش می یابد.
constructor(props) {
super(props);
this.state = {
photos: [],
slideCount: 0
}
}

برای نمایش یک عکس واحد در هر زمان ، فهرست عکس را بررسی کنید و عکسی را که با تعداد اسلایدها مطابقت دارد نمایش دهید. این باید در عملکرد نقشه ما اینگونه باشد:
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo” />
<h1 className=”App-title”>Welcome to My Instagram</h1>
</header>
<div style={{display: ‘flex’, alignItems: ‘center’, justifyContent: ‘center’,marginTop: ’30px’}}>
{this.state.slideCount !== 0 ? <BackArrow previousImage={this.previousImage}/> : ”}
{this.state.photos.map((photo, key) => {
if (this.state.photos.indexOf(photo) === this.state.slideCount) {
return (
<div key={photo.id} style={{margin: ‘0 auto’}}>
<img src={photo.images.standard_resolution.url} alt=”/>
<div style={{width:’600px’, margin: ’24px auto’, fontStyle: ‘italic’}}>
{photo.caption !== null ? photo.caption.text : ”}
</div>
</div>
)
}
return ”
})}
{this.state.slideCount !== (this.state.photos.length – 1) ? <NextArrow nextImage={this.nextImage}/> : ”} </div>

وقتی مؤلفه BackArrow خود را فراخوانی می کنیم ، یک عبارت if وارد می کنیم زیرا نمی خواهیم وقتی در اولین عکس هستیم ، آن را ببینیم. به همین ترتیب ، وقتی آخرین عکس را می بینیم ، نمی خواهیم NextArrow نمایش داده شود.
در این مرحله از آنجا که حالت ما 0 است ، مرورگر باید یک تصویر (آخرین تصویر در حساب اینستاگرام) و فلش next را نمایش دهد.
کاربردی کردن فلش ها
برای کاربردی کردن فلش ها ، دو تابع ایجاد کنید که عکس فعلی که در حال مشاهده است را تغییر دهد. این توابع عدد وضعیت را افزایش یا کاهش میدهند تا عکس در حال نمایش را تغییر دهند:
nextImage() {
this.setState({ slideCount: this.state.slideCount + 1 })
}

previousImage() {
this.setState({ slideCount: this.state.slideCount – 1 })
}

همچنین لازم است یک کنترل کننده رویداد را اضافه کنیم که هر زمان که روی فلش ها کلیک شد ، این توابع را فراخوانی کند. رویداد onClick را به 2 مؤلفه فلشی که ایجاد کردیم اضافه کنید.
const BackArrow = (props) => (
<div onClick={props.previousImage} style={{fontSize: ‘2em’, marginRight: ’12px’}}>
<i className=”fa fa-angle-left fa-2x” aria-hidden=”true”></i>
</div>
)

const NextArrow = (props) => (
<div onClick={props.nextImage} style={{fontSize: ‘2em’, marginLeft: ’12px’}}>
<i className=”fa fa-angle-right fa-2x” aria-hidden=”true”></i>
</div>
)

به یاد داشته باشید که 2 عملکرد را به عنوان props از مؤلفه parent عبور دهید.
<BackArrow previousImage={this.previousImage}/>
<NextArrow nextImage={this.nextImage}/>

برای دسترسی به توابع ، لازم است که توابع را به نمونه مولفه (this) متصل کنیم .
this.nextImage = this.nextImage.bind(this);
this.previousImage = this.previousImage.bind(this);

در این مرحله ، باید یک اسلایدر تصویر کاملاً کاربردی داشته باشید.
نتیجه
در این آموزش یاد گرفتید که چگونه از SuperAgent به عنوان یک کتابخانه درخواست در ترکیب با React برای ساخت اسلایدر تصویر تعاملی استفاده کنید. با استفاده از این مجموعه ابزارها ، می توانید اسلایدر را نیز گسترش دهید تا قابلیت های دیگری مانند ایجاد URL های مختلف سفارشی و استفاده از روش های post ، delete و put برای اضافه کردن ، حذف و ویرایش تصاویر یا کپشن ها را شامل شود.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade