Заканчиваем курс PHP и делаем Web-клиент для Голоса
О том чем займемся после курса PHP. Будем делать Веб-клиент для Golos-а.
По PHP у меня по плану осталось 2 урока - сообщества (29) и "что не успели рассказать" (30) там про мета-теги для постов в другие соцсети и подобное.
По блокчейну и SQL буду писать и далее, там есть еще о чем :)
Поскольку с соцсетью мы заканчиваем план новых уроков такой:
Делаем Веб-клиент к блокчейну Голоса дополняя его всякими штуками (как у mapala), про которые я писал все эти 30 уроков PHP.
Также будем делать бота на node.js (его будут звать @npm) и он будет помощником в веб-клиенте.
По PHP затронем тему ООП.
Думаю также сделать небольшой курс по блокчейну ethereum, а именно написанию смарт-контрактов.
На PHP еще будем делать CMS (точнее у меня она уже сделана, но без компонентов). Опишу ее и будем делать компоненты для работы с Golos-ом.
Но в начале о Веб-клиенте
Блокчейн Голоса позволяет создавать пользовательские приложения дополняя их своими разработками, я уже написал много уроков по PHP и думаю пора это все использовать так сказать по назначению))
Я решил сделать веб-клиент, использующий API голоса и при этом расширенный функционалом, который мы напишем на PHP и будем использовать СУБД MySQL для хранения внутренних данных (которые в блокчейне не были реализованы).
Я буду подробно описывать ход разработки, так что бы каждый желающий смог научиться создавать подобные веб-сайты с использованием блокчейна Голоса.
Идея
Мне захотелось сделать такой веб-проект, который отображал бы данные из нашего блокчейна, но при этом они были организованы с использованием различного рода сообществ. В частности я хочу СМИ, общественные и творческие обьединения.
Они смогут создавать свои группы, по котором их можно будет легко найти.
Отдельный (первый пункт) это авторы. Но здесь будут отображаться не все авторы из блокчейна, а те кто добавился в одну из групп, которые имеются в базе данных.
Естественно это не все и по мере расширения проекта я буду добавлять новые возможности.
Но прежде всего считаю главной задачей этого проекта, создать условия и мотивацию для организаций и СМИ в Голосе, имеющие взаимовыгодный характер для сторон: у Голоса это новые авторы, создающие полезный контент, у авторов - новые читатели (аудитория).
Естественно сами по себе даже СММ-смециалисты из различных СМИ не прибегут (они пока тусуются в крупных соцсетях и о Голосе не ведуют) однако их можно пригласить, прояснив приемущества (и недостатки). Непосредственно этим я и планирую заняться, после запуска проекта.
Ну а пока давайте посмотрим собственно о чем же я.
Техническая сторона
Ну веб-приложение подразумневает отдельный сайт.
Вообще изначально я хотел все доделать до конца. Но понял, что некоторые функции API не очень то хотят работать так как я задумал.
Естественно без советов коллег, имеющих бльший опыт в работе (@vik, @onfroctail, @litveinch) с API тут не обойтись подумал я.
А за одно как раз напишу, собственно код, основываясь на котором, у читателей может родиться идея создать подобное и реализовать свои идеи.
Первое что я захотел, это сделать возможность обращаться к блогам пользователей по принципу ЖЖ.
То есть вместо golos.io/@rusldv запрос в моем приложении выглядит так rusldv.golos.site ну или serejandmyself.golos.site (тут сразу видна моя "дружба" с регулярными выражениями для вывода картинок ну ладно будет о чем написать=))..
Для ПС это равнозначно отдельному сайту. Что в некоторых случаях весьма полезно.
Да кстати вы можете проверить <никвголосе>.golos.site
Каким образом я это сделал: все просто в записи А настроек DNS сайта golos.site я написал * - это означает все поддомены.
Теперь какой бы поддомен не написали он отображается на index.php golos.site.
Узнать какой поддомен набрал пользователь так же просто. Мы используем все тот-же глобальный массив $_SERVER:
<?php
if($_SERVER['HTTP_HOST'] == 'golos.site') {
$title = "Веб клиент Голоса";
include $_SERVER['DOCUMENT_ROOT'].'/inner/index.in.php';
} else {
$nick = substr($_SERVER['HTTP_HOST'], 0, strpos($_SERVER['HTTP_HOST'], '.'));
$title = "Пользователь";
print 'person: '.$nick;
include $_SERVER['DOCUMENT_ROOT'].'/inner/person.in.php';
}
?>
На самом деле здесь есть косяк - такие никнеймы как dobryj.kit или golos.loto не сработают тут буду substr($_SERVER['HTTP_HOST'], 0, strpos($_SERVER['HTTP_HOST'], '.') менять на регулярное выражение.
Затем мы используем API Steem (Golos) для получения данных о пользователе:
Параметры (Это подключаем в head):
<script type="text/javascript" src="assets/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="assets/js/steem.min.js"></script>
<script type="text/javascript">
steem.config.set('websocket','wss://ws.golos.io'); // assuming websocket is work at ws.golos.io
steem.config.set('address_prefix','GLS');
steem.config.set('chain_id','782a3039b478c839e4cb0c941ff4eaeb7df40bdd68bd441afd444b9da763de12');
</script>
Запросы (Их мы уже помещаем внизу страницы в теге body, чтобы загрузились все элементы):
steem.api.getAccounts(['<?php echo $nick; ?>'], function(err, result) {
// balance
if(result.length <= 0) {
window.location.replace('http://golos.site/404.html');
}
$(".reputation").text(steem.formatter.reputation(result[0].reputation));
// profile
//console.log(err, result[0].json_metadata);
var json_meta = JSON.parse(result[0].json_metadata);
//console.log(err, json_meta.profile);
if('profile' in json_meta)
{
if(json_meta.profile.profile_image === undefined || json_meta.profile.profile_image === null || json_meta.profile.profile_image === "") {
$(".profile_image").attr("src", '/img/default.jpg');
} else {
$(".profile_image").attr("src", json_meta.profile.profile_image);
}
$(".profile_name").text(json_meta.profile.name);
$("title").text(json_meta.profile.name);
$(".profile_location").html('<i class="fa fa-map-marker"></i> ' + json_meta.profile.location);
$(".profile_about").text(json_meta.profile.about);
} else {
//console.log('profile is empty');
$(".profile_image").attr("src", '/img/default.jpg');
$(".profile_name").text('нету');
$(".profile_location").text('нету');
$(".profile_about").text('отсутствует');
}
// any
//console.log(result);
$(".post_count").text(result[0].post_count);
steem.api.getFollowCount('<?php echo $nick; ?>', function(err, result) {
//console.log(err, result);
$(".follower_count").text(result.follower_count);
$(".following_count").text(result.following_count);
});
//console.log(result[0].last_post);
steem.api.getDiscussionsByAuthorBeforeDate('<?php echo $nick; ?>', '', result[0].last_post, 10, function(err, result) {
//console.log(err, result);
result.forEach(addNewsItem);
});
});
function addNewsItem(item, i, arr) {
console.log(item);
var prevstr = item.body.substring(0, 392).replace(/<\/?[^>]+>/i,'');
//var re = /(https?:\/\/\[a-zA-Z0-9а-яА-Я\/\.-_]+\.jpg)/;
var re = /(https?:\/\/[a-zA-Zа-яА-Я0-9\.\/\-_=&%\?]+[jpg|png|gif])/g;
prevstr = prevstr.replace(re, '<-img class="img-responsive img-rounded" src=$1 />');
last_permlink = item.permlink;
$("#news").append('<div class="well"><h2>' + item.title + '</h2><p>' + prevstr + '...</p><p><small><a href="javascript:showItem(\'' + item.permlink + '\');"><i class="fa fa-arrow-circle-o-down"></i> Открыть</a> | <a href="https://golos.io/@<?php echo $nick; ?>/' + last_permlink + '" target="_blank"><i class="fa fa-rocket"></i> Поросмотреть на golos.io</a></small></p></div>');
//$(document).on('scroll', nextCommentScroll);
}
function showItem(data) {
alert(data);
}
Выглядит довольно стремно, так как я все-таки PHP-программист, а не JS. Но я стараюсь .)
Да кстате весь код я написал прямо в HTML по указанной выше ссылке, вы его можете скопировать и запустить хоть локально, и проводить эксперементы. В дальнейшем отлаженный код мы вынесем куда нибудь в папку assets/js или подобную.
А я пока подготовлю список того что не получается сделать через API - умные люди подскажут.
Кстати принцип разработки ботов примерно тот же самый. Его даже можно из браузера запустить. Правда жить с открытым браузером не по феншую, поэтому его мы вскоре разберем с уроками по nodejs.