JavaScript становится все более популярным для разработки мобильных приложений. Это позволило разработчикам веб-приложений разрабатывать мобильные веб-приложения без изучения каких-либо навыков родного языка.
В этом руководстве мы обсудим облегченную библиотеку пользовательского интерфейса JavaScript под названием App.js. Используя App.js, можно создавать мобильные веб-приложения без ущерба для производительности или внешнего вида.
Начиная
В течение этого урока мы будем создавать простое приложение для регистрации пользователей, используя App.js. Мы будем использовать Firebase в качестве бэкэнда. Для начала загрузите App.js и разархивируйте его. Внутри у нас есть 4 файла.
- app.min.css: таблица стилей по умолчанию, содержащая все стили Android / iOS
- app.min.js: библиотека
- index.html: базовый файл шаблона для начала работы
- zepto.js: библиотека для jQuery, как для мобильных устройств
Использование zepto.js необязательно. В этом уроке мы будем использовать jQuery .
Создание главного экрана
Ниже показан стандартный формат для веб-приложений app.js.
<!DOCTYPE html> <html> <head> <title>My App</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"> <link rel="stylesheet" href="//cdn.kik.com/app/2.0.1/app.min.css"> <style> /* put your styles here */ </style> </head> <body> <!-- put your pages here --> <script src="//zeptojs.com/zepto.min.js"></script> <script src="//cdn.kik.com/app/2.0.1/app.min.js"></script> <script> /* put your javascript here */ </script> </body> </html> Давайте начнем с нуля. Откройте index.html и удалите из тела все, кроме app.min.css , app.min.js и добавьте приведенный ниже скрипт.
try { App.restore(); // it loads/restores the app } catch (err) { App.load('home'); // in case of error it loads the default page }
Загрузите jQuery и включите его на своей странице или обратитесь к версии jQuery CDN .
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
Создайте div , добавьте app-page класса app-page и ваша первая страница готова. Класс app-page используется для определения страницы.
<div class="app-page"></div>
Страница app-page всегда должна иметь атрибут data-page . data-page используется для доступа к странице из JavaScript.
Теперь давайте добавим верхнюю панель и заголовок к ней.
<div class="app-page" data-page="home"> <div class="app-topbar"> <div class="app-title">My Web App</div> </div> </div>
Далее нам нужно добавить кнопку « SignIn и « SignUp на главной странице. Все содержимое должно быть определено внутри div app-content , поэтому создайте div app-content и поместите в него кнопки.
<div class="app-page" data-page="home"> <div class="app-topbar"> <div class="app-title">Simple Web App</div> </div> <div class="app-content"> <br /> <div class="app-button green">SignIn</div> <br /> <div class="app-button blue">SignUp</div> </div> </div>
Просмотрите index.html и вы должны увидеть домашнюю страницу с SignIn и SignUp .
Создание экрана регистрации
App.js создан, чтобы служить создателям статических одностраничных приложений. Это означает, что он сохраняет всю навигацию по страницам в течение сеанса веб-страницы, определяя «страницы» как узлы DOM, которые могут быть созданы
Из документации App.js
Мы будем создавать все наши страницы в одном index.html . Давайте создадим экран регистрации и подключим его к кнопке главного экрана. Вот как это выглядит:
<div class="app-page" data-page="SignUp"> <div class="app-topbar"> <div class="app-button left blue" data-target="home">back</div> </div> <br /> <div class="app-content"> <input id="btnEmail" class="app-input" placeholder="Email"> <input id="btnPassword" " class="app-input " placeholder="Password" type="password"> <div id="btnSignUp" class="app-button green ">SignUp</div> </div> </div>
Атрибут data-target используется для связи экранов вместе. Добавьте data-target к кнопке SignUp на домашней странице, чтобы перейти на этот экран. Если вы просмотрите файл index.html и SignUp кнопку « SignUp на домашней странице, он будет перенаправлен на экран регистрации.
Подключите ваше приложение к Firebase
Firebase — это мощный API для хранения и синхронизации данных в реальном времени. Чтобы начать работу с Firebase, вам необходимо зарегистрироваться для бесплатной учетной записи. Просто войдите, создайте приложение и нажмите на ссылку, чтобы управлять приложением. Вы получите уникальный URL для хранения данных. В моем случае это:
https://burning-fire-1723.firebaseio.com/
На панели инструментов Firebase выберите « Simple login в меню слева. Перейдите на вкладку «Поставщики проверки подлинности Email and Password » и установите флажок «Включить».
Создайте скрипт контроллера с именем controller.js и включите его в index.html . Каждая app-page имеет логику контроллера. В файле controller.js мы определим логику контроллера для чтения электронной почты и пароля и сохранения их в firebase.
Для начала загрузите и включите клиент Firebase или ознакомьтесь с версией CDN .
<script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.17/firebase.js'></script>
Нам также понадобится простой скрипт входа в систему firebase.
<script type='text/javascript' src='https://cdn.firebase.com/js/simple-login/1.6.1/firebase-simple-login.js'></script>
Сначала нам нужно создать экземпляр firebase, используя наш URL-адрес. Используя этот экземпляр firebase, создайте экземпляр FirebaseSimpleLogin .
var firebaseRef = new Firebase('https://burning-fire-1723.firebaseio.com'); var wishRef = new Firebase('https://burning-fire-1723.firebaseio.com/WishList'); var auth = new FirebaseSimpleLogin(firebaseRef, function (error, user) { if (!error) { if (user) { App.load('LoginHome',user); } } });
Когда мы пытаемся аутентифицировать логин пользователя, если нет ошибки, LoginHome будет загружен.
Далее мы добавим логику контроллера для страницы регистрации. Вот как это будет выглядеть:
App.controller('SignUp', function (page) { $(page) .find('#btnSignUp') .on('click', function () { var email = $('#btnEmail').val(); var password = $('#btnPassword').val(); if (email && password) { // on successful validation create the user auth.createUser(email, password, function (error, user) { if (!error) { // App.load('SignIn'); } }); } else { // on validation failure show the validation message App.dialog({ title: 'Validation Error', text: 'Please enter username and password.', okButton: 'Try Again', cancelButton: 'Cancel' }, function (tryAgain) { if (tryAgain) { App.load('SignUp'); } }); } }); });
Нажав кнопку btnSignUp на странице регистрации, вы создадите пользователя, вызвав auth.createUser .
Добавьте html-страницу LoginHome, которую мы загружаем при успешном входе в систему, как показано ниже:
<div class="app-page" data-page="LoginHome"> <div class="app-topbar"> <div class="app-title">Welcome Home!! <span class="user"></span> </div> <div class="app-button right">Logout</div> </div> <div class="app-content"> </div> </div>
Просмотрите страницу index.html и нажмите кнопку « Зарегистрироваться» . Введите адрес электронной почты и пароль и нажмите SignUp . Если все пойдет хорошо, добавленный пользователь появится в списке пользователей Firebase.
Создание экрана входа
Пока у нас есть домашняя страница со ссылкой на экраны SignUp и SignIn . Мы создали экран регистрации и также связали его с домашней страницей. Давайте добавим экран входа в систему .
<div class="app-page" data-page="SignIn"> <div class="app-topbar"> <div class="app-button left blue" data-target="home">back</div> </div> <br /> <div class="app-content"> <input id="btnUsername" class="app-input" placeholder="Username"> <input id="btnPass" class="app-input" placeholder="Password" type="password"> <div id="btnSignIn" class="app-button green">SignIn</div> </div> </div>
Приведенный выше HTML-код похож на экран регистрации. Теперь давайте прикрепим контроллер к этой data-page .
App.controller('SignIn', function (page) { $(page) .find('#btnSignIn') .on('click', function () { var email = $('#btnUsername').val(); var password = $('#btnPass').val(); if (email && password) { auth.login('password', { email: email, password: password }); } else { App.dialog({ title: 'Validation Error', text: 'Please enter username and password.', okButton: 'Try Again', cancelButton: 'Cancel' }, function (tryAgain) { if (tryAgain) { App.load('SignIn'); } }); } }); });
Приведенный выше код вызывает функцию auth.login для аутентификации на основе данных auth.login . Если пользователь найден, он будет перенаправлен на LoginHome .
Давайте добавим метод контроллера для страницы LoginHome и определим функцию выхода из системы.
App.controller('LoginHome', function (page,user) { $(page) .find('.user').text(user.email); //setting the email in welcome message $(page) .find('.app-button') .on('click', function () { auth.logout(); //logs out the user session App.load('SignIn'); // loads the Sign In page }); });
Поскольку мы добавили страницу входа , раскомментируйте App.load('SignIn') в SignUp . Свяжите домашнюю страницу со страницей входа, используя атрибут data-target . Перейдите к index.html, и, если все в порядке, функции входа и регистрации должны работать нормально.
Добавление списка в Login Home
Далее давайте создадим интерфейс для вошедшего в систему пользователя, чтобы добавить элемент в список. Мы изменили существующий html LoginHome чтобы включить текстовое поле и кнопку. Мы также добавили приветственное сообщение и ссылку в верхней панели. Вот модифицированный HTML-код:
<div class="app-page" data-page="LoginHome"> <div class="app-topbar"> <div id="btnShowList" class="app-button red left">Wish List</div> <div class="app-title">Welcome Home!! <span class="user"></span> </div> <div id="btnLogout" class="app-button red right ">Logout</div> </div> <div class="app-content"> <input id="txtWish" class="app-input" placeholder="wish"> <br /> <div id="btnAdd" class="app-button green">Add Wish</div> </div> </div>
Нам нужно проверить текстовое поле на допустимые данные и сохранить данные в базе данных. Если данные неверны, мы покажем всплывающее окно проверки с использованием диалоговых окон . Для сохранения данных в firebase мы будем использовать push () . Ниже приведен код для btnAdd :
$(page) .find('#btnAdd') .on('click', function () { var wish = $('#txtWish').val(); if (wish) { // checking if valid data // if valid data insert into firebase wishRef.push({ 'user_id': user.email, 'text': wish }); App.load('WishList',user); // load the page to show all wishes } else{ // got invalid data, show validation message App.dialog({ title: 'Validation Error', text: 'Looks like you forgot to enter the wish.', okButton: 'Try Again', cancelButton: 'Cancel' }, function (tryAgain) { if (tryAgain) { App.load('LoginHome', user); } }); } });
Далее нам нужно предоставить интерфейс для отображения данных, введенных пользователями. Давайте создадим еще одну страницу, WishList, как показано ниже:
<div class="app-page" data-page="WishList"> <div class="app-topbar"> <div class="app-title">Wish List</div> <div class="app-button left blue">Back</div> </div> <div class="app-content"> <ul class="app-list"> </ul> </div> </div>
Обратите внимание на ul с помощью app-list класса. Мы будем заполнять наши пункты в этом списке. На странице LoginHome у нас есть ссылка в верхней панели под названием « Список пожеланий» . Давайте прикрепим событие к этой ссылке, чтобы загрузить страницу WishList при нажатии.
$(page) .find('#btnShowList') .on('click', function () { App.load('WishList', user); });
Теперь нам нужно объявить метод контроллера для страницы WishList . Внутри контроллера нам нужно определить событие нажатия для загрузки LoginHome при нажатии на кнопку в верхней панели. Нам также нужно извлечь данные из firebase и связать их с ul с помощью app-list класса. Вот код контроллера:
App.controller('WishList', function (page, user) { $(page) .find('.app-button') .on('click', function () { App.load('LoginHome', user); //Loading LoginHome page }); // Fetching data from Firebase and passing it to show function new Firebase('https://burning-fire-1723.firebaseio.com/WishList') .once('value', show); function show(snap) { $.each(snap.val(), function (i, value) { var spanText = $('<span/>').css('font-weight', 'bold').text(value.text); var spanUser = $('<span/>').text(' by:: ' + value.user_id); $(page).find('.app-list').append($('<li/>').append(spanText, spanUser)); }); } });
Попробуйте перейти к index.html и все должно работать.
Вывод
В этом уроке мы использовали некоторые функции app.js для создания небольшого приложения. Мы сосредоточились только на ограниченном количестве функций, таких как app-page , app-list и app.dialog . Все функции и возможности, предоставляемые app.js, можно найти в документации App.js.
Исходный код из этого урока доступен на GitHub .