نمایش اطلاعات حساب اینستاگرام با جاوااسکریپت

خیلی وقت بود میخواستم با API اینستاگرام کار کنم که ببینم چی داره چی نداره که توی این گشت و گذار با یه چیزی آشنا شدم که با استفاده از اون یه پروژه کوچیک زدم.اگه به آخر آدرس اکانتتون /?__a=1 رو اضافه کنید میتونید اطلاعات ی راجع به صفحتون رو در قالب JSON ببینید، به این صورت:instagram.com/USERNAME/?__a=1این اطلاعات علاوه بر اون چیزایی که برا همه قابل مشاهده است یه سری چیز دیگه مثل پست ها ، پست های ذخیره شده و ... رو هم تو خودش جا داده.خب توی این پروژه یه فرم داریم که کاربر یوزرنیم خودش رو وارده میکنه و ما با استفاده از جاوااسکریپت نام، عکس پروفایل، تعداد پست ها، فالوئر، فالوینگ و بیوگرافی رو نمایش میدیم.اول از همه فرم رو طراحی میکنیم.<div id=&quotpage&quot> <div id=&quotinput&quot> نام کاربری: <input type=&quottext&quot id=&quottxtUser&quot> <button =&quotgetData()&quot>نمایش</button> </div> <div id=&quotresult&quot> <div> <p id=&quotfullname&quot></p> </div> <div id=&quotdividpic&quot></div> <div id=&quotdata&quot></div> <div id=&quotdivBio&quot> <pre id=&quotbio&quot></pre> </div> </div> </div>خب تا اینجا یه همچین چیزی داریم:طراحی فرم با HTMLالان باید بریم و تو کار قشنگ کردن با 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; }خب تا الان فرم ما این شکلی شده:طراحی فرم با HTML-CSSدر آخر هم اصل کار رو انجام میدیم یعنی گرفتن اطلاعات با 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') = &quot<div id='pic'><img src='' id='img'></div>&quot document.getElementById('data') = '<div><p>پست</p><span id=&quotpost&quot></span></div><div><p>دنبال شونده</p><span id=&quotflwing&quot></span></div><div><p>دنبال کننده</p><span id=&quotflwer&quot></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; }) }توی ایونت دکمهء نمایش، تابع بالا رو صدا میزنیم.توضیحاتی هم نداره بنظرم واضحه :|نمایش اطلاعات حساب اینستاگراماین پروژه رو میتونید از گیت هاب یا کدپن دریافت کنید (فورک و لایک یادتون نره) یا هر بلایی که دلتون خواست سرش بیارید.برای اجرای پروژه کلیک کنید [+]