Примерно в середине прошлого года ребята из MongoDB запустили свой новый бэкэнд в виде сервисного продукта под названием MongoDB Stitch. Хотя запуск только бета-версии, обещание сервиса весьма интересно. MongoDB существует уже давно, и некоторые стеки разработки были основаны на его продукте базы данных, стеках MongoDB-ExpressJS-Angular-NodeJS (MEAN) и MongoDB-ExpressJS-React-NodeJS (MERN), чтобы назвать немного. Однако эти стеки основаны на таких серверных технологиях, как ExpressJS и NodeJS. Идея выделения серверов и разработки серверного решения делает ее сложной для приложений малого и среднего масштаба. MongoDB Atlas, по крайней мере, значительно облегчил жизнь, предоставив облачное решение для баз данных, но должно же быть более простое решение, не так ли? Решение могло бы сшить бэкэнд и фронтенд вместе (видите, что я там делал?).
MongoDB Stitch позволяет разработчикам сосредоточиться на создании приложений, а не на управлении кодом обработки данных, интеграции служб или внутренней инфраструктуре. Если вы только начинаете и хотите полностью управляемый бэкэнд как услугу, или вы являетесь частью предприятия и хотите предоставить существующие данные MongoDB новым приложениям, Stitch позволяет вам сосредоточиться на создании приложения, которое хотят пользователи, а не на написании шаблонная внутренняя логика.
Stitch предоставляет разработчикам полный доступ к MongoDB, возможность объявлять детализированные элементы управления доступом к данным и возможность компостирования с другими сервисами. Изначально Stitch доступен для MongoDB Atlas.
Чтобы опробовать этот новый продукт, я решил отказаться от обычного приложения todo, которое, похоже, является новым стандартом hello world для разработчиков. Филиппинская поп-культура была такой же креативной, как и всегда, и в прошлом месяце (или около того) филиппинское поколение миллениалов придумало новый сленг, который каким-то образом немного изменился. Таким образом, чтобы оседлать эту временную тенденцию, я начал писать простое веб-приложение, используя только MongoDB Stitch и JavaScript. Приложение настолько простое, насколько это возможно, оно анализирует филиппинскую фразу и переводит ее на сленг, используя пары ключ-значение, хранящиеся в базе данных. Чтобы добавить немного пикантности, он отслеживает время использования сленга и позволяет пользователям предлагать новые термины. Если вам интересно, вот ссылка на приложение Lodify.
- Редактор кода
- MongoDB Compass или MongoDB Shell
- Аккаунт MongoDB Stitch
Я предполагаю, что небольшие базовые знания HTML, CSS, JavaScript и немного MongoDB будут полезны. Для этого учебника я использовал функции ECMAScript 6 в своем коде JavaScript. Я создал ES6 Starter Kit с поддержкой WebPack и SASS для тех, кто хочет опробовать языковые особенности JavaScript ES6 и все хорошее.
В настоящее время MongoDB Stitch использует MongoDB Atlas в качестве облачного сервера. Возможно, в разработке находится поддержка локальной базы данных. Ваша учетная запись MongoDB Stitch такая же, как и ваша учетная запись MongoDB Atlas, с этого момента мы просто называем ее учетной записью MongoDB Cloud.
Войдите в свою учетную запись MongoDB Cloud. Если вы еще не создали свой кластер, создайте его. Подробные инструкции по созданию кластера можно найти в документации MongoDB Atlas. Вот вид моего кластера, это бесплатный кластер M0 с набором реплик из 3 узлов. Как я уже упоминал, для бесплатного уровня у вас есть доступ только к основному узлу с помощью SDK. Вы можете использовать кнопку Connect, чтобы получить строку подключения, необходимую для доступа к кластеру через MongoDB Compass или MongoDB Shell.
Нажмите Stitch Apps в консоли MongoDB Atlas, а затем нажмите Create New Application. Назовите свое приложение, в моем случае я использовал i-lodi-fy. Подождите, пока ваше приложение инициализируется. После инициализации вы попадете на страницу администратора Stitch.
В нашем приложении мы хотим разрешить анонимным пользователям доступ к нашим данным. Включите анонимный вход.
Создайте коллекции, необходимые нашему приложению. В нашем примере мы будем использовать «lodi» в качестве имени базы данных, а нашу коллекцию словарей - как «dict». Настройте правила доступа для нашей коллекции.
- В разделе AtlasCluster на боковой панели администратора щелкните mongodb-atlas.
- На вкладке «Правила» выберите созданную нами коллекцию (например, «lodi.dict»). Вы также можете добавлять сюда новые коллекции.
- Щелкните коллекцию, чтобы просмотреть правила чтения, правило записи, правило проверки и правило фильтрации.
- Для нашего приложения любой должен иметь возможность читать и записывать в базу данных. Поэтому мы устанавливаем для правила чтения, записи и проверки значение {}. Чтобы узнать больше об этих правилах, обратитесь к этому документу.
- Удалите все существующие фильтры на вкладке «Фильтр».
Наше приложение для вышивания готово. Следующим шагом будет создание нашего интерфейсного приложения.
Давайте создадим веб-приложение
Если вы предпочитаете смотреть на реальный источник, чтобы следить за обсуждением, загрузите исходный код ниже.
trashvin / lodify-front-end
lodify-front-end - Простой« lodifier для демонстрации основных операций с базой данных с использованием Mongo DB Stitch. github.com»
В этом примере я использовал Visual Studio Code в качестве редактора кода. Webpack используется в качестве сборщика модулей, однако он был настроен на сборку только наших файлов JS и CSS.
Настройка нашего INDEX.HTML
Чтобы получить доступ к библиотеке MongoDB Stitch, мы собираемся использовать файл размещенной библиотеки на Amazon. Добавьте следующую запись в свой тег Head.
<script src="https://s3.amazonaws.com/stitch-sdks/js/library/stable/stitch.min.js">
Webpack объединяет наши файлы CSS и JS, убедитесь, что на них правильно ссылается наша страница.
Давайте начнем кодирование
Давайте начнем с настройки Webpack, чтобы он указывал на наш входной JS-файл index.js. Это делается в webpack.config.js. Если вы собираетесь использовать другой файл, убедитесь, что он обновлен. Обратите внимание на выходное значение, это файл, на который должна ссылаться наша HTML-страница.
entry: "./app/js/index.js",
output: {
filename: "./app/dist/bundle.js"
},
В нашем файле index.js убедитесь, что все файлы, которые нам нужно разместить в большом количестве, импортированы. В нашем случае это файл SCSS и два дополнительных файла JS.
import "../styles/styles.scss";
import * as lodifier from "./lodifier";
import * as localDB from "./data";Затем мы начинаем создавать наш код, настраивая соединение с нашим приложением MongoDB Stitch и объявляя необходимые переменные для клиента и базы данных.
let stitch;
let client;
let db;
const connect = () => {
try {
stitch = window.stitch;
client = new stitch.StitchClient("i-lodi-fy-uhhdc");
db = client.service("mongodb", "mongodb-atlas").db("lodi");
return true;
} catch ( err) {
return false;
}
}
Мы создали наш клиентский объект с помощью вызова функции StitchClient. Функция принимает параметр, идентификатор приложения. Это идентификатор, сгенерированный службой при создании приложения в Stitch Admin. Если вы забыли значение, просто войдите в Stitch Admin, оно должно быть там. Затем мы создали объект базы данных, db, создав службу, которая в конечном итоге вызывает функцию db, принимающую имя базы данных (например, lodi). При желании мы можем создать объект для коллекции dict, вызвав метод коллекции db, аналогичный приведенному ниже коду:
const dict_collection = db.collection("dict");Чтобы иметь возможность использовать приложение Stitch, нам необходимо войти в систему. Даже если мы включили поддержку анонимного входа, процесс входа в систему все равно должен быть выполнен. Это необходимо для отслеживания индивидуального доступа к базе данных с помощью их сгенерированного «аутентифицированного идентификатора». Для нашего приложения эта информация не используется нашей коллекцией. Анонимный вход выполняется путем вызова функции login () клиента. Это вернет обещание, которое должно обрабатываться нашим кодом.
const stitchLogin = () => { return client.login(); }Теперь, когда мы создали способ входа в приложение Stitch, давайте создадим метод для получения коллекции. Мы настроили нашу коллекцию так, чтобы она была доступна для чтения любому пользователю, поэтому вызов функции find вернет все записи. Функция возвращает обещание, поэтому код должен правильно обрабатывать его.
const getTerms = () => {
db.collection("dict").find()
.then(result => {
// ..process data here
})
.catch(err => {
// .. do some error handling
});
ВАЖНО Не рекомендуется извлекать всю коллекцию для большой системы. Добавьте несколько фильтров и реализуйте какую-либо форму разбиения по страницам.
Прежде чем перейти к операциям записи, давайте взглянем на данные схемы и выборки.
// Schema
{
_id: string,
approved: int32,
count: int32,
example: string,
flagged: int32,
lodi: string,
type: int32
}
// Sample Data
{
_id: "kain",
lodi: "enka",
example: "Tara enka na tayo.",
count: 12,
approved: 1,
flagged: 0,
type: 0
}- Поле _id является первичным ключом документа. Фактический формально приемлемый термин или слово служит ключом, это гарантирует его уникальность.
- Поле lodi - это жаргонный термин.
- Поле пример содержит пример фразы, в которой можно использовать сленг.
- Поле count содержит количество использований сленга.
- Поле одобрено позволяет отличить одобренный термин от администратора и предлагаемые условия от пользователей. Первоначально все термины или сленги, представленные пользователями, помечаются как предложения. Администраторы просматривают их и при необходимости одобряют. Это позволяет избежать загрязнения и без того загрязненного сленгового словаря.
- Поле помечено будет использоваться в будущем расширении.
- Поле тип будет использоваться в будущем расширении.
Одна из особенностей Lodify - принимать предложения пользователей по условиям. Предложения - это условия, которые были отправлены, но еще не утверждены. Для этого мы используем функцию коллекции Stitch insertOne.
const addTerm = (term, lodi) => {
return db
.collection("dict")
.insertOne({ _id: term, lodi: lodi, example: "", approved: 0, count: 0,flagged:0 });
};Опять же, этот вызов Stitch возвращает обещание, которое должно обрабатываться нашим кодом. Пример кода для этого можно увидеть ниже.
const add =() => {
// .. codes here
stitchLogin()
.then(() => {
addTerm(term.toLowerCase(), lodi.toLowerCase())
.then(() => {
console.log("Adding Done");
// ..additonal codes here
})
.catch(err => {
console.log("Failed", err);
});
})
.catch(err => {
console.log(err);
});
};
Итак, мы можем добавить новый сленг. Как насчет подсчета случаев использования сленга и отображения наиболее часто используемого сленга для пользователей? Поле count в нашем документе предназначено для поддержки этой функции. Идея состоит в том, что каждый раз, когда во время синтаксического анализа встречается сленг или его эквивалент, мы увеличиваем счетчик на единицу. Для обновления нашей базы мы используем функцию Stitch updateOne коллекции. И как всегда обещает возврат :)
const updateCount = () => {
const counts = lodifier.getCounter();
stitchLogin().then(()=> {
counts.forEach(word => {
update(word).then(res => {
console.log(`${word} count updated :`,res);
}).catch(err => {
console.log("Failed Update", err);
});
},this);
});
}
const update = (term) => {
return db
.collection("dict")
.updateOne({_id:term},{$inc:{count:1}},{upsert:false});
};
Итак, поехали. По сути, это операция CRUD на MongoDB Stitch без буквы D. Я не видел никаких операций удаления, необходимых для интерфейса. Консоль администратора - это совсем другая история, когда я получаю возможность ее построить. Прямо сейчас я использую консольное приложение, работающее поверх NodeJS, для управления моими коллекциями. Но чтобы удовлетворить ваше любопытство, вот как выглядит функция удаления. Чтобы удалить один термин, я использовал функцию deleteOne.
const deleteOne = (collection, filter) => {
db.collection(collection).deleteOne(filter)
.then(res => {
console.log("Success :", res);
})
.catch(err => {
console.log(err);
});
};
Интеграция с MongoDB Stitch довольно проста. Для новичков довольно сложно настроить сервис. Приложение не требовало особой настройки.
Некоторые примечания разработчика
В этом руководстве основной темой является MongoDB Stitch. Однако это было также мое первое приложение, созданное с помощью ES6 и Webpack. Таким образом, на этом пути есть некоторые дополнительные уроки.
- Использование функций ES6 может привести к тому, что ваше приложение не будет работать в старых браузерах. Большинство новых функций не передаются Babel из коробки, вам необходимо установить дополнительные пакеты npm.
- Сначала Webpack сбивает с толку, я использую 3.6.0. JS, переданный webpack-dev-сервером, использовал const, и почему-то Safari, мой старый iPad Mini под управлением iOS 9+ жалуется на то, что не поддерживает ключевое слово в строгом режиме. После исследования или переполнения стека для поиска решений я решил использовать SimpleHTTPServer Фитона (Боже, я скучаю по Python!) Для обслуживания сайта при его тестировании на мобильных устройствах.
- Мне не удается загрузить исходную карту Stitch SDK, размещенного на сервере Amazon S3. Я уже поднимал эту ошибку в их репозитории на GitHub. Пока это не вызвало у меня задержек, но на всякий случай поставил.
- GitHub - отличный хостинг для приложения. Легко настраивается. Опять же, вы всегда можете перетащить свой сайт в BitBalloon.
Итак, прежде чем я резюмирую этот длинный пост, вот приложение в действии.
В заключение
Новый продукт, предлагаемый MongoDB, выглядит многообещающим. Хотя мне не удалось использовать другие его более сложные функции в этом посте, я считаю, что разработчикам понравится их много. Он все еще находится в стадии бета-тестирования, ожидайте дальнейших улучшений. В настоящее время, когда многие решения движутся в сторону бессерверного подхода, MongoDB Stitch - это вариант, который вам, как разработчику, необходимо держать в своем арсенале.
использованная литература
Не стесняйтесь оставлять свои комментарии, предложения или вопросы ниже!
Изначально опубликовано в моем личном блоге.
Если этот пост в любом случае вам помог, нажмите кнопку хлопка 👏 несколько раз ниже, чтобы выразить свою поддержку!
