Практический online-курс

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

1

В этой статье мы рассмотрим фреймворк 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/. Вы должны увидеть демо приложение:

2

Что мы будем создавать

Используя фреймворк 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 и Вы должны увидеть знак на мониторе.

3

Осуществление регистрации

Откройте 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 и Вы увидите следующее:

5

Вывод

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

Более детальную информацию об этом фреймворке Вы можете найти в официальной документации.

А как Вы считаете, предлагает ли этот фреймворк нечто новое, в отличие от других существующих фреймворков? Поделитесь своими мыслями в комментариях.

Высоких конверсий!

28-03-2016

Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".
MASK.setDomain('//static.lpgenerator.ru/media/');