- Крок 0. Знайомимося з технологією
- Крок 1. Постановка завдання
- Крок 2. Проектування і збір інформації
- Крок 3. Малюємо дизайн
- Крок 4. Створення дизайну додатки
- Крок 5. Створення бізнес логіки
- Крок 6. Додаємо в Андроїд проект
- Крок 7. Робимо додаток оффлайн
Наша взаимовыгодная связь https://banwar.org/
Іноді буває потреба в створенні програми сайту, блогу, клієнта соціальної мережі на андроїд або просте розрахункове додаток. Один із способів це створення міні сайту всередині нашого андроїд програми.
Крок 0. Знайомимося з технологією
В даному уроці, ми використовуємо JQueryMobile, як движок, для створення нашого застосування. Цей дасть нам можливість створювати вигляд і якийсь функціонал нашого застосування використовуючи HTML5, CSS3, JavaScript. Таке додаток може бути доступне в двох режимах: оффлайн - коли всі файли (сторінки) знаходяться всередині програми або онлайн - коли сторінки або дані ми отримуємо віддалено. Про технологію і додаткові можливості можна почитати на оф. сайті: http://jquerymobile.com/ .
Крок 1. Постановка завдання
Мій улюблений стиль, це постановка задачі, а потім проходження до мети. І так, припустимо нам потрібно створити додаток яке буде вести розрахунки ккал. для людей в залежності від мети, яку людина поставила перед собою, його зростання, ваги, віку. Це буде звичайне оффлайн додаток.
Крок 2. Проектування і збір інформації
Для розрахунків ми використовуємо формулу Харріс-Бенедикт. Виглядає вона так:
Норма калорій = BMR x Рівень активності, де
чоловіки:
BMR = 88.36 + (13.4 x вага, кг) + (4.8 х зростання, см) - (5.7 х вік, років)
жінки:
BMR = 447.6 + (9.2 x вага, кг) + (3.1 х зростання, cм) - (4.3 х вік, років)
і рівень активності протягом тижня:
Мінімальний рівень, норма калорій = 1.2
Низький, норма калорій = 1.375
Середній, норма калорій = 1.55
Високий, норма калорій = 1.725
Дуже високий, норма калорій = 1.9
А також 2 умови:
1. Якщо людина хоче набрати вагу, то йому потрібно "+ 20%"
2.Якщо потрібно скинути вагу, то "- 20%"
3. Швидко скинути вагу, то "- 40%"
Крок 3. Малюємо дизайн
Поміркувавши і посмикав мишкою в сторони вийшло створити шаблон додатки.
Протягом уроку будемо слідувати цим шаблоном і намагатися його реалізувати. І так, приступаємо до програмування безпосередньо :-)
Крок 4. Створення дизайну додатки
На даному етапі створимо дизайн нашого застосування. Цей крок буде досить простий і захоплюючий, так як побудова дизайну програми та перевірка коректності відбувається безпосередньо в браузері.
Ось що вийшло у мене:
І, природно опишемо код, який дав нам такий дизайн:
<! DOCTYPE html> <html> <head> <title> Розрахунок калорій </ title> <meta name = "viewport" content = "width = device-width, initial-scale = 1" charset = "utf-8"> <link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" /> <link rel = "stylesheet" href = " style.css "/> <script src =" http://code.jquery.com/jquery-2.1.0.min.js "> </ script> <script src =" http://code.jquery.com /mobile/1.4.0/jquery.mobile-1.4.0.min.js "> </ script> </ head> <body> <div id =" main "data-role =" page "> <div data- role = "header"> <h1> Розрахунок калорій </ h1> </ div> <div role = "main" class = "ui-content"> <table width = "100%"> <tr> <td> Введіть ваш вага: </ td> <td> <input id = "weight" type = "text"> </ td> </ tr> <tr> <td> Введіть вік: </ td> <td> <input id = "age" type = "text"> </ td> </ tr> <tr> <td> Введіть зростання (см): </ td> <td> <input id = "height" type = "text"> </ td> </ tr> <tr> <td> Активність: </ td> <td> <select id = "active"> <option value = "0"> хоча був відсутній </ Option> <option value = "1"> 1-3 в тиждень </ option> <option value = "2"> 3-5 в тиждень </ option> <option value = "3"> 6-7 в тиждень </ option> <option value = "4"> Кілька разів в день </ option> </ select> </ td> </ tr> <tr> <td> Мета: </ td> <td> <select id = "target"> <option value = "1"> Тримати вагу </ option> <option value = "2"> Набрати вагу </ option> <option value = "3"> Скинути вагу </ option> <option value = "4"> Швидко скинути вагу </ option> </ select> </ td> </ tr> <tr> <td> Пол: </ td> <td> <select id = "sex"> <option value = "1"> Чоловік </ option> <option value = "2"> Жінка </ option> </ select> </ td> </ tr> </ table> <div id = "result" class = " result-block "> Результат буде тут </ div> </ div> <div data-role =" footer "> <div data-role =" navbar "> <ul> <li> <a href =" # info " data-icon = "info"> Про </a> </ li> <li> <a href="#" data-icon="check"> Розрахувати </a> </ li> </ ul> < / div> </ div> </ div> <div id = "Info" data-role = "page"> <div data-role = "header"> <h1> Розрахунок калорій </ h1> <a href = "index.html" data-icon = "carat-l" class = "ui-btn-left"> Назад </a> </ div> <div role = "main" class = "ui-content"> <p> Це міні програма для того щоб розраховувати денну норму калорій для людини </ p > <p> Опис до пункту активності </ p> <p> Чи поділяють п'ять типів фізичної активності: мінімальний (ніяких фізичних навантажень), низький (фізичні навантаження 1-3 рази в тиждень), середній (3-5 днів в тиждень), високий (6-7 разів на тиждень), дуже високий (тренування частіше, ніж раз в день). </ p> </ div> </ div> </ body> </ html>Розглянемо що тут і до чого.
<! DOCTYPE html> - вказуємо що у нас буде використовуватися HTML5. Це дасть можливість використовувати більше можливостей фреймворка.
<meta name = "viewport" content = "width = device-width, initial-scale = 1" charset = "utf-8"> - вказуємо як відображати, зумувати нашу сторінку. А також, ставимо кодування для підтримки російського тексту.
Далі йде підключення скриптів jQuery. А саме сам jQuery, jQuery Mobile. Далі підключаємо стилі, також цієї бібліотеки і наші стилі для програми.
В одному документі може бути кілька "сторінок" - готових видів (view). У нас їх буде 2. Основний і "Про програму".
<Div id = "main" data-role = "page"> ... </ div> <div id = "info" data-role = "page"> ... </ div>Далі, кожен блок сторінки ділитися на 3 основні частини:
<div data-role = 'header'> - шапка
<div role = 'main' class = 'ui-content'> - тіло, основна частина де буде весь контент
<div data-role = 'footer'> - футер. Тут ми помістили наші кнопки управління. Навігаційна панель.
До блоку main не даю пояснення, так як там розміщений звичайний HTML код. Де ми описуємо елементи які хочемо бачити. У нас це табличка, всередині якої елементи форми. Кожен елемент містить унікальний ідентифікатор. Знадобитися для отримання даних. Переходимо до футера.
<div data-role = 'navbar'> - створення навігаційної панелі.
<li> <a href='#info' data-icon='info'> Про програму </a> </ li> - кожен елемент списку, це один елемент панелі. В котрому.
href = '# info' - id "page" всередині документа, якщо використовуємо "#". При натисканні нам здасться блок "page" з цим id, Або ж можемо посилатися на зовсім інший файл або ресурс (URL).
data-icon = 'info' - встановлюємо іконку.
І останнє, в цьому файлі, блок другої сторінки <div id = 'info' data-role = 'page'>
<a href='index.html' data-icon='carat-l'> Назад </a> - кнопка в шапці для повернення на головну сторінку.
А також наші стилі для сторінок.
.result-block {text-align: center; font-size: 20px; font-weight: bold; color: green; }Крок 5. Створення бізнес логіки
На цьому кроці ми напишемо скрипт, який буде отримувати наші дані, вважати їх і повертати на сторінку.
var MAN_COEFFICIENTS = {main: 88.36, weight: 13.4, height: 4.8, age: 5.7}; var WOMAN_COEFFICIENTS = {main: 447.6, weight: 9.2, height: 3.1, age: 4.3}; var INCREASE = 1.2; var DECREASE = 0.8; var QUICK_DECREASE = 0.4; var ACTIVITY_COEFF = [1.2, 1.375, 1.55, 1.725, 1.9] function forMan (weight, height, age, active) {return (MAN_COEFFICIENTS.main + (MAN_COEFFICIENTS.weight * weight) + (MAN_COEFFICIENTS.height * height) + (MAN_COEFFICIENTS .age * age)) * ACTIVITY_COEFF [active]; } Function forWoman (weight, height, age, active) {return (WOMAN_COEFFICIENTS.main + (WOMAN_COEFFICIENTS.weight * weight) + (WOMAN_COEFFICIENTS.height * height) + (WOMAN_COEFFICIENTS.age * age)) * ACTIVITY_COEFF [active]; } Function getData () {var data = {weight: parseFloat (document.getElementById ( "weight"). Value), age: parseInt (document.getElementById ( "age"). Value), height: parseInt (document.getElementById ( "height"). value), active: parseInt (document.getElementById ( "active"). value), target: parseInt (document.getElementById ( "target"). value), sex: parseInt (document.getElementById ( "sex ") .value)}; return data; } Function calculateData () {var result; var data = getData (); switch (data.sex) {case 1: result = forMan (data.weight, data.height, data.age, data.active); console.log (result); break; case 2: result = forWoman (data.weight, data.height, data.age, data.active); } Switch (data.target) {case 1: return result; case 2: return result * INCREASE; case 3: return result * DECREASE; case 4: return result * QUICK_DECREASE; }} Function showData () {document.getElementById ( "result"). InnerHTML = calculateData (); }Щоб скрипт запрацював, підключаємо його до документа:
<script src = 'core.js'> </ script>
І додаємо виклик функції при кліці на кнопку "Розрахувати".
<li> <a href='#' data-icon='check' onClick='showData();'> Раcсчітать </a> </ li>
Після цього, при натисканні на кнопку буде відбуватися розрахунок даних і виведення інформації.
Крок 6. Додаємо в Андроїд проект
Після того, як ми підготували всі файли, залишилося налаштувати наш проект. Андроїд додаток можна будувати в будь-якому середовищі в якій зручно. Першим пунктом буде додавання наших файлів проект. Їх потрібно розмістити в папці assets. Якщо додаток побудовано в Eclipse або intelijIdea то ця директорія перебувати в корені проекту. Додаємо ці файли туди. Якщо структура додатка побудована в AndroidStudio за допомогою Gradle то, потрібно створити цю директорію по шляху src / main / assets. Я додав файли в папку www / всередині якої знаходяться наші сторінки.
Далі нам потрібно додати на головний шар компонент WebView в якому будуть відображатися наші сторінки:
<WebView android: layout_width = "fill_parent" android: layout_height = "fill_parent" android: id = "@ + id / webView" android: layout_gravity = "left | top" />Тепер передаємо нашому компоненту шлях до файлу, який буде завантажуватися за замовчуванням під час запуску програми. Це все відбувається у класі, який створюється середовищем за замовчуванням. У ньому змінюємо поведінку методу який генерує view:
@Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); WebView webView = (WebView) findViewById (R.id.webView); webView.getSettings (). setJavaScriptEnabled (true); webView.loadUrl ( "file: ///android_asset/www/index.html"); }findViewById (R.id.webView) - отримуємо наш контейнер для відображення сторінок
webView.getSettings (). setJavaScriptEnabled (true) - включаємо підтримку JavaScript
webView.loadUrl ( "file: ///android_asset/www/index.html") - завантажуємо сторінку яка лежить у нас в директорії assets.
Тепер, так як наша сторінка містить підключення бібліотек з сайту (віддалено), потрібно додати привілеї на доступ до інтернету нашому додатку. Це робиться в файлі маніфесту AndroidManifest.xml одним рядком, на початку:
<Uses-sdk android: minSdkVersion = "7" android: targetSdkVersion = "19" /> <uses-permission android: name = "android.permission.INTERNET" />Після цього залишилося відправити додаток на пристрій. І готово :-)
Якщо ви хочете зробити оффлайн додаток, щоб не потрібний був доступ до мережі інтернет, то викачуємо бібліотеки з сайту, поміщаємо їх в папку і міняємо шлях в сторінці. Також, тоді немає потреби прописувати дозволу доступу до інтернету.
Крок 7. Робимо додаток оффлайн
Отже, нам знадобиться викачати потрібні бібліотеки. Перша, основна бібліотека jQuery знаходиться за адресою: http://jquery.com/download/ там вибираємо версію і викачуємо. Ми використовуємо ось цю версію: Download the compressed, production jQuery 2.1.0 . Тепер викачуємо jQueryMobile. Йдемо на офіційний сайт: http://jquerymobile.com/ і завантажуємо архів з файлами:
Всередині архіву перебувати безліч файлів. Нам потрібно тільки деякі з них: jquery.mobile-1.4.0.min.css, jquery.mobile-1.4.0.min.js і іконки з директорії images /. Дані файли я розміщу в корінь папки / www. Після цього, варто поміняти посилання сторінки на фали, які ми тільки що викачали:
<Link rel = "stylesheet" href = "jquery.mobile-1.4.0.min.css" /> <script src = "jquery-2.1.0.min.js"> </ script> <script src = "jquery .mobile-1.4.0.min.js "> </ script>А також не забуваємо прибрати в маніфесті дозвіл на доступ в інтернет, він тепер нам не потрібен. Загалом, це і все.
Тепер, у вас є маленьке робоче додаток під андроїд. Швидкість, правда, поступається нативном варіанту створення, але це можна буде поправити. З маленьким додатком Вас :-) Сподіваюся все було доступно і цікаво)
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
