НашСамогон - самогонные аппараты, дубовые бочки, винные и турбо дрожжи, электроника и оборудование для производства алкоголя в домашних условиях.

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

0

В этой статье мы рассмотрим фреймворк Mootor – фреймворк HTML 5 для разработки мобильных приложений.  Он относительно новый (март 2014), но есть некоторые недостатки, как и у других подобных фреймворков. Несмотря на это, он достоин нашего внимания.

Исходный код этой статьи доступен на GitHub.

Начало работы

Мы будем использовать angular seed , чтобы настроить локальный сервер для проекта Mootor. Для начала клонируйте проект углового источника и установите необходимые средства поддержки зависимостей:

Когда Вы это сделаете, клонируйте фреймворк  Mootor и скопируйте dist, source и examples папку в каталог angular-seed.

Из каталога angular-seed начните использование сервера npm start и укажите Ваш браузер http://localhost00/examples/demo/. Вы должны увидеть демо приложение:

141760933912

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

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

Создание знака на экране

Создайте каталог с именем BucketApp в angular-seed/examples. Создайте файл HTML  index.html, который будет служить как корневой файл. Вложите в файл все необходимые библиотеки.

Далее создайте index.js, где мы определим направление для нашего BucketApp.

Вот как выглядит examples/BucketApp/index.html

Внутри BucketApp создайте каталог с названием views. Внутри views создайте папку с названием index, а в ней создайте  index.html,index.js и index.css.

index.html  будет видом по умолчанию Вашего приложения. index.js будет поддерживать скрипт, а index.css будет css, относящимся к виду index.

Вот как должен выглядеть views/index/index.html

Далее мы определим маршруты в examples/BucketApp/index.js как показано:

Cнова откройте сервер, укажите браузер http://localhost00/examples/BucketApp и Вы должны увидеть знак на мониторе.

2

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

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

Давайте начнем с того, что приложим событие submit  к форме регистрации.

Начинать работу с firebase достаточно просто. Для начала, нужно бесплатно зарегистрировать аккаунт на  Firebase. После этого, в меню слева кликните на Login & Auth и проверьте Enable Email & Password Authentication.

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

Создайте папку userhome в examples/BucketApp/views/. А в ней нужно создать userhome.html, userhome.js и userhome.css.

Вот как userhome.html должен выглядеть:

Откройте userhome.js и определите событие  onclick  для btnLogout как показано ниже:

Далее, добавьте маршрут для userhome в examples/BucketApp/index.js как на примере:

Давайте осуществим логин пользователя. Как только пользователь заполняет форму логина, мы валидируем имя пользователя и пароль, а затем вызываем функцию auth.login.

Измените  examples/BucketApp/views/index/index.js как на примере:

Откройте examples/BucketApp/index.html и включите скрипт, ссылающийся на Firebase как показано:

Перезапустите сервер и укажите браузер http://localhost00/examples/BucketApp/. Попробуйте войти, используя имя пользователя [email protected] и пароль sam и Вы увидите следующее:

3

Вывод

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

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

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

Поделиться:

Об Авторе

Переводчик портала WebDesignMagazine.ru. Пишу статьи и делаю переводы для веб-сайта.