Mootor, HTML5 Framework для мобильной разработки

 (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(); }()); 

Перезапустите сервер, укажите в браузере http://localhost:8000/examples/BucketApp и вы должны увидеть экран входа в систему.

Внедрение входа

Откройте examples/BucketApp/views/index.js . Здесь мы определим знак в логике. Мы будем использовать Firebase в качестве бэкэнда.

Давайте начнем с прикрепления события отправки к форме входа.

 (function($) { "use strict"; m.app.view("index").on("ready", function() { $("#myForm").on("submit", function() { // logic will be here }); }); }(window.$)); 

Начать работу с Firebase довольно просто. Начните с регистрации бесплатной учетной записи на Firebase. Как только вы войдете в firebase, в левом боковом меню нажмите « Войти и авторизация» и установите флажок « Включить аутентификацию по электронной почте и паролю» .

Когда пользователь успешно вошел в систему, приложение будет перенаправлено на домашнюю страницу пользователя с приветственным сообщением. Давайте создадим представление для пользователя home.

Создайте папку 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")); 

Давайте реализуем логин пользователя. Как только пользователь отправит форму входа, мы проверим имя пользователя и пароль для пустых значений и вызовем функцию firebase 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 и 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> 

Перезапустите сервер и укажите ваш браузер на http://localhost:8000/examples/BucketApp/ . Попробуйте войти, используя имя пользователя [email protected] и пароль sam, и в случае успеха вы увидите экран ниже:

Вывод

В этом уроке мы увидели, как начать создавать мобильное приложение с использованием платформы Mootor . Мы реализовали функциональность входа пользователя с использованием платформы Mootor и Firebase . В следующем уроке мы попытаемся использовать некоторые другие функции, предлагаемые этой платформой, а также реализовать функцию регистрации.

Подробную информацию о структуре можно найти в официальных документах . о чем ты думаешь? Предлагает ли что-нибудь новое по сравнению с другими существующими фреймворками?