برنامه نویس وب | عاشق کتاب، یادگیری تکنولوژی، فوتبال و موسیقی
نمایش اطلاعات حساب اینستاگرام با جاوااسکریپت
خیلی وقت بود میخواستم با API اینستاگرام کار کنم که ببینم چی داره چی نداره که توی این گشت و گذار با یه چیزی آشنا شدم که با استفاده از اون یه پروژه کوچیک زدم.
اگه به آخر آدرس اکانتتون /?__a=1 رو اضافه کنید میتونید اطلاعات ی راجع به صفحتون رو در قالب JSON ببینید، به این صورت:
instagram.com/USERNAME/?__a=1
این اطلاعات علاوه بر اون چیزایی که برا همه قابل مشاهده است یه سری چیز دیگه مثل پست ها ، پست های ذخیره شده و ... رو هم تو خودش جا داده.
خب توی این پروژه یه فرم داریم که کاربر یوزرنیم خودش رو وارده میکنه و ما با استفاده از جاوااسکریپت نام، عکس پروفایل، تعداد پست ها، فالوئر، فالوینگ و بیوگرافی رو نمایش میدیم.
اول از همه فرم رو طراحی میکنیم.
<div id="page">
<div id="input">
نام کاربری:
<input type="text" id="txtUser">
<button ="getData()">نمایش</button>
</div>
<div id="result">
<div>
<p id="fullname"></p>
</div>
<div id="dividpic"></div>
<div id="data"></div>
<div id="divBio">
<pre id="bio"></pre>
</div>
</div>
</div>
خب تا اینجا یه همچین چیزی داریم:
الان باید بریم و تو کار قشنگ کردن با CSS، خب تو کدهای پایین چند تا کلاس و آی دی رو میبینید که توی HTML ننوشتیم. اونارو توی جاوااسکریپت اضافه کردم، نپرسید چرا که نمیگم :دی
@import url('https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir.css');
* {
direction: rtl;
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 16px;
font-family: Vazir;
}
body {
display: flex;
justify-content: center;
padding: 10px;
}
#page {
background: #ecf0f1;
width: 33%;
border-radius: 20px;
height: auto;
padding: 10px 0;
box-shadow: 0 0 5px rgba(0, 0, 0, .1);
display: flex;
flex-direction: column;
align-items: center;
}
#input, #result {
width: 85%;
}
#input {
width: 70%;
display: flex;
justify-content: space-around;
align-items: baseline;
}
input {
width: 40%;
background: transparent;
outline: none;
padding: 2px 10px;
border-radius: 5px;
border: 1px solid #555;
color: #333;
direction: ltr;
}
input:focus {
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}
button {
width: 30%;
outline: none;
padding: 2px 5px;
border-radius: 5px;
cursor: pointer;
border: 1px solid #555;
background: #3598db;
color: #fff;
}
#page>div {
margin: 10px 0;
}
#result {
display: flex;
flex-direction: column;
align-items: center;
}
#fullname {
font-size: 18px;
text-transform: uppercase;
}
#pic {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
margin: 10px 0;
transition: .2s;
}
#pic:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}
#pic img {
width: 100%;
}
#data {
width: 100%;
display: flex;
justify-content: space-around;
text-align: center;
}
#divBio {
width: 100%;
}
#bio {
direction: ltr;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
white-space: pre-wrap;
}
خب تا الان فرم ما این شکلی شده:
در آخر هم اصل کار رو انجام میدیم یعنی گرفتن اطلاعات با AJAX توی جاوااسکریپت که دو روش داره مختصر بگم با XHR و FETCH که من با استفاده از فِچ (واکشی) انجام دادم.
function getData() {
var username = document.getElementById('txtUser').value;
const url = 'https://instagram.com/' + username + '/?__a=1';
fetch(url)
.then(data => {
return data.json()
})
.then(res => {
var rgu = res.graphql.user;
var fn = rgu.full_name;
var post = rgu.edge_owner_to_timeline_media.count;
var img = rgu.profile_pic_url_hd;
var flwing = rgu.edge_follow.count;
var flwer = rgu.edge_followed_by.count;
var bio = rgu.biography;
document.getElementById('dividpic') = "<div id='pic'><img src='' id='img'></div>"
document.getElementById('data') = '<div><p>پست</p><span id="post"></span></div><div><p>دنبال شونده</p><span id="flwing"></span></div><div><p>دنبال کننده</p><span id="flwer"></span></div>';
var bioStyle = document.getElementById('bio');
bioStyle.style.background = '#eee';
bioStyle.style.padding = '5px';
bioStyle.style.marginTop = '15px';
document.getElementById('fullname') = fn;
document.getElementById('bio') = bio;
document.getElementById('img').src = img;
document.getElementById('post') = post;
document.getElementById('flwing') = flwing;
document.getElementById('flwer') = flwer;
})
}
توی ایونت دکمهء نمایش، تابع بالا رو صدا میزنیم.
توضیحاتی هم نداره بنظرم واضحه :|
این پروژه رو میتونید از گیت هاب یا کدپن دریافت کنید (فورک و لایک یادتون نره) یا هر بلایی که دلتون خواست سرش بیارید.
برای اجرای پروژه کلیک کنید [+]
مطلبی دیگر از این انتشارات
عملکرد عالی در مصاحبه برنامهنویسی: چگونه دوبار از گوگل و فیسبوک پیشنهاد کاری دریافت کردم!
مطلبی دیگر از این انتشارات
آیا برنامه نویسی ارزش یادگیری را دارد؟
مطلبی دیگر از این انتشارات
برنامه نویسی: تحصیل یا بازار کار