В этой статье мы рассмотрим фреймворк 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. В следующий раз мы попробуем воспользоваться некоторыми другими возможностями, которые предоставляет нам этот фреймворк.
Более детальную информацию об этом фреймворке Вы можете найти в официальной документации.
А как Вы считаете, предлагает ли этот фреймворк нечто новое, в отличие от других существующих фреймворков? Поделитесь своими мыслями в комментариях.
Высоких конверсий!