BaasCMS - бекенд не потрібен

    
 
 BaasCMS — це JavaScript CMS, що використовує як бекенд популярних провайдерів BaaS . На даний момент підтримується тільки Parse.com .
 
 Вихідний код BaasCMS доступний на GitHub.
 
 BaasCMS Demo на GitHub Pages
Теж саме BaasCMS Demo на Tumblr
 
Можна подивитися Адмін для цього демо (зміни / додавання заборонені). В соответвуют форму на головній сторінці адмінки потрібно вставити наступні ключі:
 
 
     
  • Application ID : nM7P7NnFA95CK1WrqWOf9wa3mskctaTOdk9vYflj
  •  
  • Javascript Key : 0zHfA9FG8L1xR699qmFXjxkZ1pDxgml0MWZMpqJG
  •  
 
 Швидкий старт
 
Для початку роботи з BaasCMS потрібно пройти наступні кроки:
 
 
     
  1. Зареєструйтеся на Parse.com .
  2.  
  3. Створіть новий додаток .
  4.  
  5. Скопіюйте Application ID і Javascript Key вашого нового додатка і вставте їх у відповідну форму на головній сторінці Адмін-панелі BaasCMS .
  6.  
 
Після збереження ключів можна почати працювати з адмінкой.
 
В BaasCMS вводяться сутності категорія , патерн і Айтем . Кожній категорії можна присвоїти заздалегідь створений патерн. Якщо категорія має патерн, то в рамках цієї категорії можна створювати Айтем з полями, які визначені в паттерне.
 
Наприклад, ви можете створити патерн під назвою Article з полями name типу text , photo типу google drive image і body типу textarea , а потім створити категорію під назвою Блог і в соответвуют select вибрати патерн Article . Тепер в цю категорію можна додавати Айтем з полями name , photo і body .
 
Для початку кастомізації фронтфейса вашої програми скористайтеся болванкою baascms.parse.html :
 
 
     
  1. Збережіть файл собі на комп'ютер і відкрийте на редагування.
  2.  
  3. Знайдіть 19 сходинку з
    Parse.initialize('YOUR-APPLICATION-ID-HERE', 'YOUR-JAVASCRIPT-KEY-HERE');
    і впишіть туди свої ключі.
  4.  
  5. Залийте файл на хостинг і дивіться що вийшло. Відразу попереджаю, в болванці немає ніяких стилів, так що не лякайтеся.
  6.  
 
Якщо у вас нету свого хостингу, то можна скористатися GitHub Pages або Tumblr або будь-яким іншим сервісом, де дозволяють заливати свій html і не ріжуть скрипти.
 
Tumblr в якості хостингу:
 
 
     
  1. Зареєструйтеся на Tumblr або просто створіть новий блог , якщо вже є аккаунт.
  2.  
  3. Перейдіть в dashboard і клікніть на посилання «Налаштувати» в правій частині.
  4.  
  5. Потім клікніть по посиланню «Редагувати HTML» в лівій частині.
  6.  
  7. У який з'явився сайдбарі видаліть весь html і вставте вміст вашої болванки.
  8.  
  9. Збережіть зміни і перейдіть в ваш блог за посиланням {ІМ'Я-ВАШОГО-БЛОГУ} .tumblr.com і дивіться, що вийшло.
  10.  
 
 Шаблони
 
HTML-шаблони в BaasCMS виглядають приблизно так:
 
 
    & Lt; script id = & quot; template-baascms-categories-wrap & quot; type = & quot; text / template & quot; & gt;
        & Lt; ul & gt;
            & Lt;% = htmlElements% & gt;
        & Lt; / ul & gt;
    & Lt; / script & gt;
 
 
В якості шаблонизатор використовується Underscore.js-функція template .
 
Правила, за якими іменуються id шаблонів, покажу на прикладі. Для категорій за замовчуванням використовуються шаблони з наступними id:
 
 
     
  • template-baascms-categories-element — для виведення одного елемента зі списку багатьох категорій.
  •  
  • template-baascms-categories-wrap — для виведення html навколишнього елементи.
  •  
  • template-baascms-category — для виведення докладного опису категорії.
  •  
 
Для Айтем за замовчуванням використовуються id:
 
 
     
  • template-baascms-items-element — для виведення одного елемента.
  •  
  • template-baascms-items-wrap — для виведення html навколишнього елементи.
  •  
  • template-baascms-item — для виведення докладного опису.
  •  
 
Якщо вам потрібно створити особливі шаблони для Айтем певного патерну, наприклад Article , то створіть шаблони з наступними нижче id і CMS автоматом їх підхопить:
 
 
     
  • template-baascms-article-items-element
  •  
  • template-baascms-article-items-wrap
  •  
  • template-baascms-article-item
  •  
 
 Віджети
 
Для доступу до даних і рендеринга використовуються віджети. Існує шість віджетів на даний момент:
 
 
     
  • Category
  •  
  • Categories
  •  
  • Item
  •  
  • Items
  •  
  • Breadcrumbs
  •  
  • Main
  •  
 
Всі віджети, крім Main , успадковують від класу BaasCMS.Widget , у якого є наступні опції:
 
 
    {
        elementSelector: '', // jquery селектор для контейнера куди рендерить
        template: '', // шаблон для одиночних елементів, наприклад & quot; template-baascms-items-element & quot; або & quot; template-baascms-item & quot;
        templateWrap: '', // шаблон для навколишнього елементи html, наприклад & quot; template-baascms-items-wrap & quot;
        autoLoad: true, // якщо true, то автоматично робить ajax-запит і рендерить в контейнер
        cache: 'yes', // кешувати запит до сервера чи ні соответсвенно
        select: null, // масив з полями, які потрібно запросити
        where: {}, // умови запиту
        beforeQuery: function () {}, // відповідні коллбекі
        afterQuery: function () {},
        beforeRender: function () {},
        afterRender: function () {}
    }
 
 
Наприклад, нам потрібно вивести всі Айтем паттерна Product , у яких поле sale одно yes :
 
 
    & Lt; div id = & quot; sale & quot; & gt; & lt; / div & gt;
    & Lt; script & gt;
        new BaasCMS.widgets.Items ({
            elementSelector: '#sale',
            template: 'template-product-sale-element',
            templateWrap: 'template-product-sale-wrap',
            patternName: 'Product',
            cache: 'yes',
            select: ['name', 'category_id', 'cost', 'preview'],
            where: {
                sale: 'yes'
            }
        });
    & Lt; / script & gt;
 
 
Віджет Main виводить дані в залежності від hash URL, використовуючи бібліотеку PathJS . В віджет вшиті два роута:
'#/baascms/category/:cid(/page/:page)(/sort/:sort)'
і
'#/baascms/category/:cid/item/:iid'
. Перший для детального виводу однієї категорії або списку Айтем, другий для детального виводу Айтем. Залежно від роута, віджет Main підключає відповідний віджет зі списку вище.
 
В вихідному коді BaasCMS Demo можна подивитися приклади використання віджетів.
 
Так само вихідний код js-додатки Адмін-панелі може послужити хорошим прикладом, як працювати з віджетами і не заважати js-код з html.
 
 Адаптери
 
Адаптер — це клас-прошарок для роботи з провайдером BaaS. Всі запити до сервера відбуваються опосередковано через інстанс цього класу (вихідний код адаптера для Parse.com ). Таким чином можна написати адаптер для будь-якого сервісу або навіть для свого бекенд. Назва адаптера передається в параметрах ініціалізації CMS:
 
 
    BaasCMS.init ({
        baas: 'Parse'
    });
 
 
 Висновок
 
Ще належить написати тести і толкову документацію, але вже зараз можна подивитися що та як, оцінити перспективи. Якщо вас зацікавив проект, можете поучавствовать в його розвитку на GitHub . Баги і питання можна відправляти на baascms@gmail.com.
    
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.