Начнём с идеи
Например, вы зашли на сайт в поисках чего-либо. Доступ к контенту ограничен. Есть два варианта: зарегистрироваться или поискать тот же контент на другом сайте. Велика вероятность, что данный сайт вам больше не пригодится, и захламлять свою почту спамом, да и просто делать какие-то лишние действия (регистрация, подтверждение) мало кому захочется. В таком случае, вы вводите адрес сайта в сервисе, и смотрите, есть ли свободные аккаунты для данного сайта. Свободным аккаунтом может быть любой логин и пароль, который другой пользователь посчитал не нужным, и решил поделиться им с другими, дабы сократить их время.
Идея сайта родилась в процессе трудового дня. На разработку потребовался один рабочий день. Мотивация – желание доказать что есть люди, готовые помогать другим пользователям интернета бесплатно, и подобного рода проекты могут жить.
Сервис создавался с помощью all-in-one фреймворка Next Code. Кому интересно как — добро пожаловать под кат.
Next Code
Фреймворк состоит из:
• NextJS – JS ядро, включающее обработку ajax запросов, отладчик, базовые функции
• NextUIJS – визуальные компоненты и расширения
• NextCSS – набор CSS стилей для быстрой вёрстки
• XCode – PHP ядро, включающее работу с БД, работу с шаблонами, отладчик, установщик приложений, парсеры и многое другое.
Сам фреймворк разрабатывается для собственных нужд. Многое сделано, но не все идеи воплощены. Продакшен версия будет open-source. Если будет интересно, напишу отдельную статью о внутренностях и всех особенностях, коих не мало.
Процесс разработки
Конфигурируем XCode
Для начала работы выбираем необходимые компоненты для отображения и работы сайта.
Итак нам понадобится:
1. Менеджер БД
2. Драйвер MySQL
3. Менеджер шаблонов
4. Драйвер Smarty
5. Установщик приложений
6. Обработчик пользовательский запросов
7. Плагин работы с числами
Конфигурирование происходит путём настройки ini файлов каждого необходимого компонента. Для того чтобы компонент можно было использовать в процессе работы, ini файл с настройками необходимо положить в папку конфигурации.
Например, ini файл (plugins/numeric.ini) для плагина работы с числами выглядит следующим образом:
[plugin]
name = numeric
class = plugin.numeric.defaultСоздание приложения
Весь сервис представляет собой одно приложение – freeacc.
Приложение включает в себя:
1. класс xcFreeAcc_Application (внутрисистемное имя – application.freeacc)
2. конфигурационный файл
3. сущность freeacc_account для хранения аккаунтов
4. сущность freeacc_site – для хранения сайтов
5. сущность freeacc_verify – для хранения оценок доступности аккаунта
6. список резервируемых запросов
7. шаблон страниц
Приложение хранится в репозитории по адресу application/freeacc/
Чтобы система определила приложение необходимо произвести его установку.
xc("call.application.freeacc::__install");
Функция __install выполняет следующие действия:
public static function __install()
{
$app_id = xc::query( "api.application.install", xc::query( "setting", "name", "application", __class__ ), xc::query( "setting", "caption", "application", __class__ ) );
xc::query( "api.application.registerComponents", xc::query( "setting", "name", "application", __class__ ), $app_id );
}
В первой строчке вызывается API установщика приложений, с передачей имени и заголовка приложения (значения берутся из конфигурационного файла).
Вторая строчка создаёт сущности и резервирует запросы для приложения.
Приложение готово к работе!
Создание шаблонов
Исходя из принципов MVC для работы приложения необходим tpl файл с вёрсткой, и php файл в качестве контроллера. В качестве модели выступает класс приложения.
Код tpl файла
<div class="xc-fullpage-layout">
<div class="xc-layout-header">
<div class="xc-layout-frame">
<div class="xc-grid">
<div class="block logo xc-column"><a href="/"><img src="{$MEDIAPATH}/logo.png" /></a></div>
<div class="block motto xc-column"><span class="delimiter">|</span> <span class="motto">сервис свободных аккаунтов</span></div>
</div>
<div class="block description">
<span>Сервис предлагает воспользоваться уже ранее созданным, свободным аккаунтом, чтобы пропустить процедуру регистрации</span>
</div>
</div>
</div>
<div class="xc-layout-content xc-center">
<div class="xc-layout-frame">
{if $self}
{$self}
{else}
{$likes}
{/if}
<form title="Добавить аккаунт" id="addForm" action="freeacc/forms/add_form" class="ui-component-form" data-valid-timeout="3000" data-valid-message="Пожалуйста, подождите..." data-valid-area=">footer.ui-element-validation">
<fieldset class="fields">
<div class="header">
<h2>Поделиться свободным аккаунтом:</h2>
</div>
<ul class="xc-grid">
<li class="item ui-component xc-column">
<div class="xc-grid">
<div class="field xc-column"><input name="url" title="Сайт" placeholder="введите адрес сайта..." class="ui-component-edit" pattern="site" type="text" required /></div>
<div class="field xc-column"><input name="login" title="Логин" placeholder="введите логин..." class="ui-component-edit" type="text" required /></div>
<div class="field xc-column"><input name="password" title="Пароль" placeholder="введите пароль..." class="ui-component-edit" type="text" required /></div>
</div>
</li>
<li class="item control xc-column">
<button class="ui-component-button" type="submit">добавить</button>
</li>
</ul>
</fieldset>
<footer class="ui-element-validation">
</footer>
</form>
<form title="Получить аккаунты" id="requestForm" data-callback-function="postRequest" data-action="none" class="ui-component-form" data-valid-timeout="3000" data-valid-message="Пожалуйста, подождите..." data-valid-area=">footer.ui-element-validation">
<fieldset class="fields">
<div class="header">
<h2>Найти свободный аккаунт: *</h2>
</div>
<ul class="xc-grid">
<li class="item ui-component xc-column">
<div class="field"><input name="url" title="Сайт" placeholder="введите адрес сайта..." class="ui-component-edit" pattern="site" type="text" required /></div>
</li>
<li class="item control xc-column">
<button class="ui-component-button" type="submit">искать</button>
</li>
</ul>
</fieldset>
<div class="description">
* Поиск совершенно бесплатный. Аккаунты добавляются другими пользователями. Администрация сайта не несёт никакой ответственности за содержание аккаунтов!
</div>
<footer class="ui-element-validation">
</footer>
</form>
{if !$self}
<div class="block table xc-full">
<div class="site">
<span>в базе <b>{$accounts->asFormat(0,"."," ")}</b> {$accounts->getDeclension(array("аккаунтов","аккаунт","аккаунта"))} для <b>{$sites->asFormat(0,"."," ")}</b> {$sites->getDeclension(array("сайтов","сайта","сайтов"))}</span>
</div>
<div class="table">
<div class="xc-grid xc-full" data-account="{$item.id}">
<div class="header">Популярные сайты</div>
{foreach from=$favorites item=item}
<div class="xc-item"><a href="/{$item.url}/">{$item.url}</a> ({$item.cnt})</div>
{/foreach}
</div>
</div>
</div>
{/if}
</div>
</div>
<div class="xc-layout-footer">
<div class="xc-layout-frame">
</div>
</div>
</div>
<div id="alertModal" data-popup-modal="true" class="ui-popup">
</div>
<div id="alertPopup" class="ui-popup popup">
</div>
<div id="alertMessage" data-popup-modal="true" class="ui-popup message">
</div>
</body>
Контроллер, созданный для обработки данного шаблона следующий:
$self = "";
xc("tpl likes=freeacc/blocks/likes comments=freeacc/blocks/comments :fetch");
if (isset(xc("tpl")->variable("this")->extra['site']))
{
xc("tpl")->assign("site",xc("tpl")->variable("this")->extra['site']);
$accounts = xc("call.application.freeacc::getAccounts",xc("tpl")->variable("this")->extra['site']);
$self = xc("tpl freeacc/blocks/accounts")->apply($accounts);
}
else
{
xc("tpl")->assign("accounts",xc("plugin.numeric",true)->setData(xc("db freeacc_account")->fields("COUNT(*) as cnt")->cnt));
xc("tpl")->assign("sites",xc("plugin.numeric",true)->setData(xc("db freeacc_site")->fields("COUNT(*) as cnt")->cnt));
xc("tpl")->assign("favorites",xc("db freeacc_account:group(url):order(cnt down):limit(0,20)")->fields("url,COUNT(#id#) as cnt"));
}
xc("tpl")->assign("self", $self);
Думаю для любого веб программиста, шаблон «вида» не вызовет никаких затруднений при чтении.
Контроллер выполняет следующие действия:
• Создаёт переменные likes и comments для вывода лайков и комментариев Вконтакте
• Проверяет наличие сайта в запросе (если сайта нет, то мы на главной)
• Помещает требуемый сайт в переменную site для быстрого доступа внутри шаблона
• Вызывает функцию приложения для получения аккаунтов требуемого сайта
• Обрабатывает шаблон с таблицей аккаунтов
• Создаёт переменную accounts с количеством аккаунтов в БД
• Создаёт переменную sites с количеством сайтов в БД
• Создаёт переменную favorites с 20 сайтами, к которым больше всего аккаунтов
Обработчик формы добавления выглядит следующим образом:
$id = xc("call.application.freeacc::addAccount",$_GET['fields']);
if ($id)
{
$GLOBALS['_RESULT']["result"] = "";
$GLOBALS['_RESULT']["debug"]["info"] = "Аккаунт добавлен";
$GLOBALS['_RESULT']["debug"]["type"] = "success";
}
else
{
$GLOBALS['_RESULT']["result"] = "";
$GLOBALS['_RESULT']["debug"]["info"] = "Неизвестная ошибка";
$GLOBALS['_RESULT']["debug"]["type"] = "fail";
}
Визуализируем шаблон
$(function()
{
$(".block.table a.verify").live("click",function()
{
var obj = $(this);
$$.database.get("ajax").onReadyState(function(result)
{
obj.parent().empty().text(" ");
});
$$.database.get("ajax").send({"mode": "ajax", "type": "API", "api": "freeacc.account.verify", "parameters":[$(this).parents("div[data-account]").attr("data-account")]});
});
$(".block.table a.unverify").live("click",function()
{
var obj = $(this);
$$.database.get("ajax").onReadyState(function(result)
{
obj.parent().empty().text(" ");
});
$$.database.get("ajax").send({"mode": "ajax", "type": "API", "api": "freeacc.account.unverify", "parameters":[$(this).parents("div[data-account]").attr("data-account")]});
});
});
function postRequest()
{
$$.fn.redirect("/"+$$("#requestForm [name='url']").val()+"/");
}
Тематика хаба не позволяет мне указывать ссылку на сервис, т.к это будет считаться рекламой. Для переноса в «Я пиарюсь» нет кармы. Ссылку могу указать в комментариях или в ЛС. Хотя мудрый читатель без труда допишет ".ru" ;)
P.S мой первый пост на хабре, надеюсь на понимание.
P.P.S готов дописать что не дописал о сервисе или технологиях.
P.P.P.S с русским языком проблемы, так что думаю что на сайте, что в статье есть куча ошибок. Буду рад исправить!
UPD: спасибо тем, кто отнёсся с пониманием! Чтот никто не спрашивает про технологии, может я мало рассказал, что не понятна вся динамика системы
