В этой статье мы рассмотрим фреймворк Mootor – фреймворк HTML 5 для разработки мобильных приложений. Он относительно новый (март 2014), но есть некоторые недостатки, как и у других подобных фреймворков. Несмотря на это, он достоин нашего внимания.
Исходный код этой статьи доступен на GitHub.
Начало работы
Мы будем использовать angular seed , чтобы настроить локальный сервер для проекта Mootor. Для начала клонируйте проект углового источника и установите необходимые средства поддержки зависимостей:
git clone https://github.com/angular/angular-seed.git cd angular-seed npm install
Когда Вы это сделаете, клонируйте фреймворк Mootor и скопируйте dist, source и examples папку в каталог angular-seed.
git clone https://github.com/emi420/Mootor.git // copy dist, source and examples to angular-seed
Из каталога angular-seed начните использование сервера npm start и укажите Ваш браузер //localhost:8000/examples/demo/. Вы должны увидеть демо приложение:
Что мы будем создавать
Используя фреймворк Mootor мы, будем создавать простой список приложений Bucket, где пользователи смогут зарегистрироваться и создавать свои списки. Мы присоединим приложение к бэкенду Firebase, чтобы сохранить наши данные.
Создание знака на экране
Создайте каталог с именем BucketApp в angular-seed/examples. Создайте файл HTML index.html, который будет служить как корневой файл. Вложите в файл все необходимые библиотеки.
Далее создайте index.js, где мы определим направление для нашего BucketApp.
Вот как выглядит examples/BucketApp/index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale = 1.0, user-scalable = no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="../../source/css/mootor.css">
<link rel="stylesheet" href="../../source/css/color.css">
<link rel="stylesheet" href="../../source/css/icons.css">
<script defer type="text/javascript" src="../../dist/js/zepto-bundle.js"></script>
<script defer type="text/javascript" src="../../dist/js/mootor.js"></script>
<script defer type="text/javascript" src="index.js"></script>
</head>
<body>
<header>
<h1><img src="img/logo.png" /></h1>
</header>
</body>
</html>Внутри BucketApp создайте каталог с названием views. Внутри views создайте папку с названием index, а в ней создайте index.html,index.js и index.css.
index.html будет видом по умолчанию Вашего приложения. index.js будет поддерживать скрипт, а index.css будет css, относящимся к виду index.
Вот как должен выглядеть views/index/index.html
<form id="myForm" class="m-form m-padding">
<fieldset class="m-form-top-labels">
<div class="m-field">
<input id="txtEmail" type="text" class="m-text" placeholder="Username" />
</div>
<div class="m-field">
<input id="txtPass" type="password" class="m-text" placeholder="Password" />
</div>
</fieldset>
<button type="submit" class="m-button m-button-success m-button-block">Sign In</button>
</form>Далее мы определим маршруты в examples/BucketApp/index.js как показано:
(function() {
"use strict";
// Created the Mootor app
var app = m.app({
views: [
"index"
]
});
//default route
app.route("^$", app.view("index"));
// initialize the app
app.init();
}());Cнова откройте сервер, укажите браузер //localhost:8000/examples/BucketApp и Вы должны увидеть знак на мониторе.
Осуществление регистрации
Откройте examples/BucketApp/views/index.js. Здесь мы будем работать с регистрацией. Мы будем использовать Firebase в качестве бэкенда.
Давайте начнем с того, что приложим событие submit к форме регистрации.
(function($) {
"use strict";
m.app.view("index").on("ready", function() {
$("#myForm").on("submit", function() {
// logic will be here
});
});
}(window.$));Начинать работу с firebase достаточно просто. Для начала, нужно бесплатно зарегистрировать аккаунт на Firebase. После этого, в меню слева кликните на Login & Auth и проверьте Enable Email & Password Authentication.
Когда пользователь успешно пройдет регистрацию, приложение направит его на домашнюю страницу пользователя с приветственным письмом. Давайте создадим хороший вид домашней страницы пользователя.
Создайте папку userhome в examples/BucketApp/views/. А в ней нужно создать userhome.html, userhome.js и userhome.css.
Вот как userhome.html должен выглядеть:
<h2>Welcome to User Home!!</h2> <button id="btnLogout" type="button" class="m-button m-button-success m-button-block">Logout</button>
Откройте userhome.js и определите событие onclick для btnLogout как показано ниже:
(function($) {
"use strict";
m.app.view("userhome").on("ready", function() {
// create the firebase object
var firebaseRef = new Firebase('https://burning-fire-1723.firebaseio.com');
// create auth object
var auth = new FirebaseSimpleLogin(firebaseRef, function(error, user) {
if (!error) {
if (user) {
}
}
});
// Logout click event
$("#btnLogout").click(function() {
auth.logout();
window.location.href = "";
});
});
}(window.$));Далее, добавьте маршрут для userhome в examples/BucketApp/index.js как на примере:
app.route("^#userhome", app.view("userhome"));Давайте осуществим логин пользователя. Как только пользователь заполняет форму логина, мы валидируем имя пользователя и пароль, а затем вызываем функцию auth.login.
Измените examples/BucketApp/views/index/index.js как на примере:
(function($) {
"use strict";
m.app.view("index").on("ready", function() {
// create the firebase object
var firebaseRef = new Firebase('https://burning-fire-1723.firebaseio.com');
// create auth object
var auth = new FirebaseSimpleLogin(firebaseRef, function(error, user) {
if (!error) {
if (user) {
window.location.href = "#userhome";
}
}
});
// form on submit event
$("#myForm").on("submit", function() {
var email = $('#txtEmail').val();
var password = $('#txtPass').val();
auth.login('password', {
email: email,
password: password
});
return false;
});
});
}(window.$));Откройте examples/BucketApp/index.html и включите скрипт, ссылающийся на Firebase как показано:
<script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.17/firebase.js'></script> <script type='text/javascript' src='https://cdn.firebase.com/js/simple-login/1.6.1/firebase-simple-login.js'></script>
Перезапустите сервер и укажите браузер //localhost:8000/examples/BucketApp/. Попробуйте войти, используя имя пользователя sam@sam.com и пароль sam и Вы увидите следующее:
Вывод
В этой обучающей статье мы увидели, как начинать создание мобильных приложений с помощью фреймворка Mootor. Мы осуществили пользовательский вход, используя функциональность фрейморка Mootor и Firebase. В следующий раз мы попробуем воспользоваться некоторыми другими возможностями, которые предоставляет нам этот фреймворк.
Более детальную информацию об этом фреймворке Вы можете найти в официальной документации.
А как Вы считаете, предлагает ли этот фреймворк нечто новое, в отличие от других существующих фреймворков? Поделитесь своими мыслями в комментариях.
Высоких конверсий!
