GitHub - додаток Javascript PATATESUPREMECalorieMeter для проекту IUT на фреймворках JS
Проект розрахунку калорій Knockout.js, створений у березні 2017 року Кевіном ДЕСІМУЛІ.
Встановлення з git
Додаток залежить від зовнішніх плагінів, таких як JQuery, для взаємодії з сервером Nutritionix або Bootstrap, який його надає, тому вам слід пам’ятати про підключення до Інтернету.
Тоді, щоб мати змогу запустити програму, просто відкрийте index.html у браузері і підемо.
Вимірювач калорій побудований на основі нокауту.
Knockout - це бібліотека JavaScript, яка дозволяє створювати розширені та чуйні користувальницькі інтерфейси з чистою моделлю даних. Кожного разу, коли у вас є розділи інтерфейсу, який динамічно оновлюється (тобто користувач виконує дію, яка змінить стан інтерфейсу або коли зовнішні дані змінюються), Knockout може допомогти вам реалізувати це простіше і стійкіше.
Цей фреймворк складається, як видно вище, з архітектури Model - View - ViewModel. Що також називається у випадку Knockout Model - View - Binder, оскільки воно відокремлює подання від моделі, по суті, підшивкою даних.
Nutritionix - це API, що дозволяє отримати доступ до бази даних, що містить велику кількість їжі. Це дозволяє здійснювати зовнішній ввід даних у програму «Вимірювач калорій» і, відповідно, мати відповідний набір тестів.
Bootstrap - це найпопулярніший у світі фреймворк для створення адаптивних веб-сайтів та додатків для мобільних пристроїв. Всередині ви знайдете високоякісні HTML, CSS та JavaScript, щоб колись було простіше починати проекти.
JQuery - це швидка, невелика, багатофункціональна бібліотека JavaScript. Це робить такі речі, як обробка та обробка документів HTML, обробка подій, анімація та Ajax, набагато простішими завдяки простому у використанні API, який працює у багатьох браузерах. Завдяки поєднанню універсальності та розширюваності jQuery змінив спосіб написання JavaScript мільйонами людей.
Tether - це залежність Bootstrap 4, головним чином для візуалізації виділень та підказки.
Рядок пошуку
Додаток представляє поле введення для пошуку продуктів на основі ключових слів.
Як це виглядає
Рядок пошуку вище дозволяє шукати продукти в Nutritionix.
Як це працює
Результати пошуку
Результат пошуку відображається у вигляді списку, елементи якого можна вибрати.
Як це виглядає
Завдяки введеному вище полі введення, ви можете відображати продукти від nutritionix.
Як це працює
Продукти, відібрані користувачем, поміщаються у "комору", яка не є ні більшою, ні меншою, ніж усі продукти, обрані до того часу. За замовчуванням продукти додаються з одиницею кількості. Але цю кількість можна змінити для кожної їжі. Для кожного продукту споживання калорій динамічно вказується з урахуванням кількості, обраної користувачем. Також є можливість прибрати їжу з комори. Всі модифікації, внесені в комору, змінюють загальну теплотворну здатність комори, яка також динамічно оновлюється.
Як це виглядає
На зображенні списку результатів ми можемо побачити дію, представлену синьою кнопкою з +. Це дозволило додати в кошик їжу, яку можна побачити вище.
І з кожною дією ви можете або збільшувати, зменшувати або навіть видаляти предмети з кошика. Що змінює загальну кількість калорій у кошику і що модифікується в прямому ефірі.