- Що потрібно для створення подібного програми
- Крок 1. Зберігання конфігурації в середовищі виконання
- Крок 2. Копіювання проекту з DevOps Services
- Крок 3. Налаштування аутентифікації і завдання граничної пропускної здатності
- Крок 4. Підключення до Mongo
- Крок 5. Візуалізація результатів за допомогою D3
- Висновок
- Ресурси для скачування
Наша взаимовыгодная связь https://banwar.org/
Інструмент для створення хмари слів на хмарної платформі IBM Bluemix
Працюючи дизайнером користувальницького інтерфейсу, я повинен знати, чим керуються люди, які використовують додатки, в створенні яких я беру участь. Добре продуманий інтерфейс підвищує конкурентоспроможність продукту.
Я подумав, що відомості про особливості тієї чи іншої призначеної для користувача бази можна отримати з соціальні мереж. Потрібно взяти твіти та біографії з профілів користувачів продукту в Twitter і подивитися, як його послідовники описують себе. Можливо, це допоможе зрозуміти їх мотивацію і використовувати результат при створенні наступного продукту.
Вивчивши кілька профілів, я був вражений подробицями біографій, які вибрав. Однак вирішуючи це завдання вручну, я зміг би обробити лише малу дещицю користувачів, щоб скласти загальну картину їхнього менталітету. Я відчував, що це багатообіцяюча ідея, - біографії відкриті і дозволяють зробити цікавий, глибокий аналіз аудиторії або порівняльний аналіз. Проте, інструментів, що допомагають зазирнути в дзеркало соціальних мереж - щоб зрозуміти, якими нас бачать інші, виявилося небагато.
Хотілося б отримати хмару слів на основі біографій тисяч послідовників, яке демонструвало б, які слова в них зустрічаються найчастіше, але я не зміг знайти безкоштовний і доступний інструмент, що дозволяє створювати хмару слів з біографій.
Я знайшов комерційний інструмент, що становить список з першої п'ятірки слів з біографій моїх послідовників, але за це потрібно було платити, а мені цього не хотілося. До того ж я підозрював, що і в не самих часто вживаних словах є своя цінність і що для отримання загальної картини потрібен більш широкий спектр даних.
В результаті я розробив додаток на хмарної платформі IBM Bluemix, що допомагає проілюструвати ці дані. Нижче наведено приклад вихідних даних цього додатка. Ця хмара слів, найбільш часто зустрічаються в біографіях з профілів моїх послідовників. Ту ж ідею можна використовувати і для аналізу біографій з профілів користувачів програмного продукту і твітів з його облікового запису в Twitter.
Хмара слів можна використовувати як інструмент:
- перевірки і відточування свого власного образу;
- порівняння послідовників конкуруючих продуктів або персон;
- оцінки нових послідовників або людей, яких ви хотіли б бачити в числі своїх послідовників.
У прекрасній статті, згаданої вище, Скотт Річ показує, як створити в Bluemix відповідну платформу на основі Node, express і Twitter. Платформа мого програми подібна цій, за винятком того, що я доповнив базове Node.js-додаток Twitter засобами аутентифікації в Twitter, інтеграцією з базою даних Mongo і перетворенням результатів в більш складну інфографіку.
Я включив звичайні кроки по інтеграції Mongo з Node і додав зв'язку з простими проектами, присвяченими забезпечення такої інтеграції, але пов'язав все це зі своїм додатком для зображення хмари слів, яке є прикладом практичної реалізації інтеграції Mongo і Node.
запустити програму отримати код
Що потрібно для створення подібного програми
Це складний додаток. Інструкції цього керівництва допоможуть розробнику середнього рівня дізнатися, як побудувати додаток з аутентифікацією в Twitter на базі Node і розгорнути його в PaaS без великої кількості необхідних компонентів і кроків.
Мій підхід полягає в тому, щоб створити локальну середу із застосуванням Mongo і Node, а потім використовувати функцію автоматичного розгортання в DevOps Services для розгортання програми в Bluemix після внесення змін до git.
Для локальної розробки я встановив серверні модулі Node.js і клієнтські бібліотеки JavaScript.
- Серверні модулі Node.js:
- Mongodb : Для підключення до бази даних mongo ;
- express : Допомагає організовувати та аналізувати HTTP-запити з конкретних URL-шляхів;
- twit Дуже зручна бібліотека для виклику Twitter API ;
- OAuth : Для перевірки автентичності в Twitter.
- Клієнтські бібліотеки JavaScript:
- Bootstrap : Для програмування деяких надійних компонентів для користувача інтерфейсу HTML;
- D3 : Документи, керовані даними, які використовуються при візуалізації хмари слів.
При натисканні наведеної вище кнопки Отримати код завантажується файл package.json.
{ "Name": "ProfileWords", "version": "v0.0.1", "description": "A tool for analyzing Twitter accounts, using follower's bios", "dependencies": { "mongodb": "*", " express ":" * "," twit ":" ~ 1.1.11 "," cookie-parser ":" * "," express-session ":" ~ 1.0.3 "," errorhandler ":" * "," morgan ":" * "," request ":" * "," multiparty ":" * "," oauth ":" * "}," engines ": {" node ":"> = 0.10.0 "}, "repository": {}}Цей файл також містить кілька пакетів, необхідних для роботи Mongo і OAauth.
Весь цей код розроблений за допомогою технологій простого стека MEAN і призначений для роботи в Bluemix. Я привожу опис настройки служби MongoLabs в Bluemix.
Щоб побудувати своє візуальне mashup-додаток для Twitter, я поступив таким чином.
- Виконав інструкції з статті Скотта [Річа] .
- Локально встановив Mongo.
- Створив додаток для Twitter, описане на сайті для розробників Twitter .
- Сконфігурував для перевірки автентичності в Twitter.
- Створив просте Mongo-додаток.
- Додав базову аутентифікацію в Twitter, завершивши тим самим створення платформи.
- Почав писати код для виклику API Twitter і записи в базу даних.
- Додав бібліотеку візуалізації (D3).
Крок 1. Зберігання конфігурації в середовищі виконання
Одне з 12 умов розробки сучасного програмного забезпечення - зберігання конфігурації в середовищі виконання. Цей метод допомагає надійно зберігати ключі API (і інші дані).
Так як в цьому проекті використовується API Twitter , Потрібно створити новий додаток для Twitter, в якому буде працювати код. Для цього надаються деякі ключі Twitter, які повинні бути відомі з додатком app.js; в іншому випадку Twitter буде відхиляти виклики API, які виходять від програми. Детальніше див. У файлі README.MD мого програми.
У моєму файлі app.js є такі рядки коду, які створюють об'єкт споживчого ключа аутентифікації.
var consumer = new oauth.OAuth ( "https://twitter.com/oauth/request_token", "https://twitter.com/oauth/access_token", process.env.TWITTER_CONSUMER_KEY, process.env.TWITTER_CONSUMER_SECRET, "1.0 A ", _callBackPage," HMAC-SHA1 "); app.use (errorHandler ({dumpExceptions: true, showStack: true})); app.use (logger ()); app.use (cookieParser ()); app.use (session ({secret: "very secret"}));У цьому лістингу є строкові значення process.env.TWITTER_CONSUMER_KEY і process.env.TWITTER_CONSUMER_SECRET, надані Twitter для мого програми. Створіть новий додаток для Twitter і перейдіть на вкладку API keys свого застосування, як показано на наступному малюнку. Визначте ключі для свого середовища. Моє додаток називається ProfileWords. У вашого буде своє ім'я.
Користувачам Mac: щоб визначити ключі для свого середовища, виконайте наступні дії.
- Відкрийте вікно терміналу.
- Виконайте наступну команду: sudo vi /etc/launchd.conf
- Відредагуйте файл launchd.conf і додайте наступні рядки: setenv TWITTER_CONSUMER_KEY YOUR-STRING setenv TWITTER_CONSUMER_SECRET YOUR-STRING setenv TWITTER_ENDPOINT YOUR-ENDPOINT
Клацніть на вкладці Settings свого застосування. Вкажіть ім'я, опис, URL веб-сайту і URL зворотного виклику. Встановіть прапорець Allow this application to be used to Sign in with Twitter .
Перезавантажте систему. Тепер при запуску Node-додатки воно отримає доступ до ваших строковим змінним.
Для користувачів Windows: виконайте наступну команду з оболонки:
SET TWITTER_CONSUMER_KEY = YOUR-STRINGКрок 2. Копіювання проекту з DevOps Services
- Увійдіть в Bluemix і додайте екземпляр служби MongoLab. Залишивши екземпляр неприв'язаним, задайте ім'я (наприклад, MongoLab_profilesExample) і запишіть його.
- Клацніть на профілі проекту, натисніть кнопку Edit code, потім натисніть кнопку Fork, щоб дати скопійованого проекту ім'я. DevOps Services скопіює структуру проекту.
- Змініть файл manifest.yml, зв'язавши його з базою даних і вказавши унікальне ім'я свого застосування, як показано в наступному лістингу. applications: - services: - MongoLab-profilesExample disk_quota: 1024M host: myprofilesapp name: myprofilesapp command: node app.js path:. domain: mybluemix.net instances: 1 memory: 512M
- Перш ніж розгорнути додаток в Bluemix і запустити його, необхідно встановити деякі змінні середовища.
- Перейдіть в розділ Runtime свого нового додатка. В цьому розділі Bluemix надає зручний призначений для користувача інтерфейс для налаштування змінних середовища і метод захисту конфіденційності ключів, а також дозволяє безпечно виконувати код, не розкриваючи своїх ключів.
Перейдіть в розділ Environment variables і додайте ключі у вкладці User-Defined, як показано на наступному малюнку.
- Перезапустіть програму з Bluemix. Воно повинно бути готове до роботи.
Крок 3. Налаштування аутентифікації і завдання граничної пропускної здатності
У Twitter передбачена гранична пропускна здатність API. Ця межа обмежує кількість запитів, які користувач може подавати протягом певного періоду часу для запобігання необмеженої навантаження на сервери. Twitter радить користувачам передбачати в своїх програмах власне розподіл ресурсів, замість того, щоб запускати додаток з однієї облікової (наприклад, розробника).
Коли користувач мого програми ProfileWords вводить ім'я послідовника, воно звертається до списку послідовників. Цей запит може повертати до 1000 облікових записів. Обмеження Twitter по пропускній здатності дозволяє робити 15 таких запитів протягом 15 хвилин. (Коли займаєшся вивченням профілів, це обмеження здається тісним, але c'est la vie.)
Перший крок полягає в тому, щоб аутентифицировать користувача, тому можна викликати API і працювати в рамках персонального межі пропускної здатності цього користувача.
Вивчення способу перевірки автентичності в Twitter за допомогою Node зайняло у мене кілька годин. Хоча це звичайне завдання (відкриту аутентифікацію використовують багато служб), технологія Node змінюється так швидко, що ті приклади, які я знайшов, з останньою версією модуля OAuth не працювали.
Тому я розробив окремий проект, щоб показати, як використовувати OAuth для підключення до Twitter . Файл README в цьому проекті містить інструкції по клонуванню цього додатка з вашою власною інформацією розробника Twitter.
Загальний процес показаний в наступному прикладі коду:
- коли користувач вводить URL-адресу додатка, йому пропонується увійти через Twitter;
- коли користувач натискає кнопку Login, він перенаправляється на сторінку аутентифікації Twitter;
- після того як користувач виконує вхід в Twitter, він повертається на задану сторінку зворотного виклику (в даному випадку це сторінка хмари слів). URL зворотного виклику запрограмований в файлі server.js підпроекту.
файл README проекту містить інструкції по використанню цієї структури коду для аутентифікації в Twitter. Шлях / sessions / connect призводить користувача до діалогового вікна входу на його безпечному веб-сайті, а потім повертає на шлях / sessions / callback. Важливо увійти під своїми власними обліковими даними Twitter, як показано.
У проекті ProfileWords я використовував той же підхід до аутентифікації і реалізував його у файлі app.js.
Після аутентифікації користувача в Twitter можна отримати більше інформації про людину. Доступна найрізноманітніша інформація, включаючи ім'я користувача, його місце розташування, а також набір квітів в дизайні сторінки користувача в Twitter.
Особливо важлива інформація - секретний ключ користувача, який знадобиться йому на випадок повторних запитів до Twitter. Цей ключ фігурує в наступному лістингу. Я зберігаю ці дані в базі даних Mongo для подальшого застосування від імені користувача.
app.get ( '/ profilewords.html', function (req, res) {var twitterVerification = "https://api.twitter.com/1.1/account/verify_credentials.json"; var token = req.session.oauthAccessToken; var secret = req.session.oauthAccessTokenSecret; consumer.get (twitterVerification, token, secret, function (error, data, response) {if (error) {console.log ( 'Twitter verification error \ n'); console.log ( error); res.redirect ( '/ sessions / connect');} else {var parsedData = JSON.parse (data); var person = ({ 'name': parsedData.screen_name, 'oauth_access_token': req.session.oauthAccessToken , 'oauth_access_token_secret': req.session.oauthAccessTokenSecret}); var collection = followersDatabase.collection ( 'tokens'); collection.remove ({ 'name': parsedData.screen_name}, errorHandler); collection.insert (person, {safe : true}, errorHandler); res.sendfile ( 'profilewords.html');}});});Крок 4. Підключення до Mongo
При відправці запитів до API Twitter код для сервера Node повинен мати доступ до секретного ключа користувача Twitter. У запиті до Twitter вказуються як відкритий, так і секретний ключі.
Я використовую відкритий ключ в якості дескриптора бази даних для пошуку секретного ключа. Потрібно, щоб додаток ProfileWords могло підтримувати декілька користувачів одночасно, воно повинно приймати і складати запити від імені кількох користувачів, у кожного з яких свої облікові дані Twitter.
При аутентифікації користувача Twitter видає йому секретний ключ. Цей ключ зберігається в базі даних. Потім, коли користувач відправляє запит, додаток розшукує збережений секретний ключ з відкритого ключу, який зберігається в веб-браузері і відправляється разом із запитом.
Ось послідовність дій.
Mongo працює з пулом з'єднань. При запуску програма Node створює з'єднання:
mongo = { "hostname": "127.0.0.1", "port": 27017, "username": "", "password": "", "name": "", "db": "db", "url ":" mongodb: //127.0.0.1: 27017 / db "}; path = mongo.url; MongoClient.connect (path, function (err, followersDatabase) {Зверніть увагу, що всі, що робить додаток Node, воно робить в рамках цього з'єднання, і я можу послатися на базу даних, просто вдавшись до вираження followersDatabase.
У багатьох прикладах застосування Mongo щоразу, коли робиться запит, створюється нове з'єднання. Я зрозумів, що при розгортанні в середовищі виконання PaaS цей метод швидко дає осічку. У документації Mongo (звідки я дізнався про MongoClient.connect) радять працювати в сеансі з'єднання, що я і роблю.
Я спеціально створив простий проект з'єднання з базою даних , Щоб продемонструвати певну базу Mongo, але ви можете зрозуміти, як я використовую її, і з файлу app.js.
Наприклад, наступний код шукає секретний маркер, щоб можна було направити запит до Twitter.
app.param ( 'id', function (req, res, next, id) {res.setHeader ( 'Content-Type', 'application / json'); if (req.headers [ 'oauth_token']) {var token = req.headers [ 'oauth_token']; var cloudType = req.headers [ 'cloudtype']; var collection = followersDatabase.collection ( 'tokens'); collection.findOne ({ 'oauth_access_token': token}, function (err, item) {var config = {consumer_key: 'YOUR CONSUMER KEY', consumer_secret: 'YOUR CONSUMER SECRET', access_token_secret: item.oauth_access_token_secret, access_token: item.oauth_access_token} console.log ( 'account:' + item.name); retrieveProfiles (config, res, id, cloudType); var requests = followersDatabase.collection ( 'requests'); var date = new Date (); var request = ({ 'twitterId': id, 'timeStamp': date, 'account' : item.name}); requests.insert (request, {safe: true}, errorHandler);});} next ();}); app.get ( "/ words /: id", function (req, res) {});У базі даних можна зберігати найрізноманітніші аналітичні дані. Наприклад, можна підраховувати всі запити користувача або записувати вибір кольору теми для хмари слів. У поточній версії програми база даних використовується для управління доступом до маркерів користувачів.
На цьому етапі ми продовжили вивчення Node і express, освоївши роботу з Mongo й аутентифікації. Ті ж інгредієнти можна використовувати і в інших mashup-додатках для соціальних мереж. Ці будівельні блоки дозволяють піти досить далеко.
Придбання цих знань зайняло у мене якийсь час, але процес - рішення задач та навчання - став звичніше. Корисні пакети Node забезпечують хороший фундамент.
Крок 5. Візуалізація результатів за допомогою D3
За кілька годин я прийшов до жорстко запрограмованим додатком з витяганням даних аутентифікації для Twitter. Сценарій JavaScript для хмари слів я знайшов досить швидко - і побачив свою основну ідею в дії.
Але далі справа застопорилася. Мені не терпілося розвивати свій додаток, але для представлення даних різними способами, такими як графіки або кругові діаграми, була потрібна універсальна бібліотека візуалізації. Трохи пошукавши, я виявив D3 .
Джейсон Девіс доповнено JavaScript-бібліотеки D3 Розширення для хмари слів . ВІН предлагает відмінний приклад и описание. После багатьох Спроба я зрозумів, як підставляті Різні кольори слів в хмарі. (Я шукав красиві поєднання кольорів в хмарах слів, але готові приклади знайти важко, тому я вирішив поекспериментувати і спробувати скласти привабливі комбінації сам).
Я склав набір тем і написав невелику процедуру для випадкового вибору кольору з теми при кожній промальовуванні слова. Експериментальним шляхом я виявив, що в темі має бути не більше п'яти кольорів, і включив невеликої компонент для користувача інтерфейсу для вибору теми. Я хотів отримати можливість запропонувати, наприклад, тему простий газетного паперу, щоб хмара можна було скачати для включення в документ. Так вийшла однотонна тема, але можна використовувати і інші кольори. Мені подобається помаранчевий колір, як показано вище.
Що стосується даних, то я написав код Node.js на сервері для збору біографій і визначення найбільш вживані слова. Поекспериментувавши, я вирішив, що 70 слів виглядають привабливо з точки зору збалансованості розподілу даних і не дуже перевантажено. Сервер повертає дані, і хмара слів відтворюється.
function draw (data, bounds) {statusText.style ( "display", "none"); scale = bounds? Math.min (w / Math.abs (bounds [1] .x - w / 2), w / Math.abs (bounds [0] .x - w / 2), h / Math.abs (bounds [1] .y - h / 2), h / Math.abs (bounds [0] .y - h / 2)) / 2: 1; words = data; var text = visualisation.selectAll ( "text") .data (words, function (d) {return d.text.toLowerCase ();}); text.transition () .duration (1000) .attr ( "transform", function (d) {return "translate (" + [dx, dy] + ") rotate (" + d.rotate + ")";}) .style ( "font-size", function (d) {return d.size + "px";}); text.enter (). append ( "text") .attr ( "text-anchor", "middle") .attr ( "transform", function (d) {return "translate (" + [dx, dy] + " ) rotate ( "+ d.rotate +") ";}) .style (" font-size ", function (d) {return d.size +" px ";}) .on (" click ", function (d ) {load (d.text);}) .style ( "opacity", 1e-6) .transition () .duration (1000) .style ( "opacity", 1); text.style ( "font-family", function (d) {return d.font;}) .style ( "fill", customFill) .text (function (d) {return d.text;}); var exitGroup = background.append ( "g") .attr ( "transform", visualisation.attr ( "transform")); var exitGroupNode = exitGroup.node (); text.exit (). each (function () {exitGroupNode.appendChild (this);}); exitGroup.transition () .duration (1000) .style ( "opacity", 1e-6) .remove (); visualisation.transition () .delay (1000) .duration (750) .attr ( "transform", "translate (" + [w >> 1, h >> 1] + ") scale (" + scale + ")" ); }Висновок
Мій код включає в себе безліч деталей. Метою було написати реальний додаток, яке можуть використовувати звичайні люди. Тому я обробляю помилки; керую маркерами авторизації; дозволяю включати перегляд списку користувачів, за якими стежить людина, а також їх послідовників, твіти та «вибране»; реагую, якщо сторінка завантажується на телефон; і реалізую багато інших функцій.
Це керівництво присвячено кільком важливим будівельним блокам (покажчики для бази даних, аутентифікація і візуалізація) і забезпечує читачеві фундамент для створення подібних додатків. Інші деталі ті, хто ними цікавиться, можуть знайти в коді.
В іншій моїй статті, Що кажуть в twitter про кандидатів на виборах , Я використовую свій інструмент для вивчення профілів кандидатів, які брали участь в недавніх виборах в провінції Онтаріо.
Образ особистості в соціальних мережах - надзвичайно захоплюючий предмет. Я планую вбудувати в цю експериментальну програму багато інших речей і з часом нарощувати її.
Ресурси для скачування
Схожі тими
Підпішіть мене на ПОВІДОМЛЕННЯ до коментарів
Com/oauth/authorize?Style ( "display", "none"); scale = bounds?
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
