В это воскресенье я был свободен и думал попробовать что-нибудь новенькое. Итак, я решил создать простое приложение для Android, которое будет использовать BOLT Cloud API для управления светодиодом.
Одним из основных преимуществ любого облачного API является то, что вам не нужно полагаться на какой-либо конкретный сервис, чтобы получить ваше приложение без проблем. Вы также не ограничены одним доменом, и вы можете создать свое собственное приложение для Android, веб-приложение или приложение для Windows, не сообщая своему клиенту об услуге.
Здесь я привожу пример одного простого приложения для Android, но с помощью Bolt Cloud API вы можете сделать гораздо больше.
Следующее, что приходит мне в голову, - это выбрать правильный фреймворк для разработки приложения. Я выбрал Ionic framework для разработки нашего приложения из-за его простоты. Для этого эксперимента я использую версию Ubuntu 14.04. Вы можете использовать любую другую ОС, вам просто нужно выяснить альтернативы в соответствии с вашими требованиями.
Что такое ионный?
Ionic - это среда разработки гибридных приложений с открытым исходным кодом. Ionic строится поверх Cordova. Вы можете узнать больше об ionic в:
Https://ionicframework.com/docs/
Ionic framework использует AngularJS и предоставляет дополнительные компоненты, специально упрощающие разработку мобильных приложений. Вы можете использовать простой HTML 5, JavaScript и CSS для ионной разработки.
Предварительные требования для Ionic:
Прежде чем мы начнем разработку нашего приложения, мы должны установить следующее программное обеспечение:
- JDK (комплект для разработки Java)
- Apache Ant
- Android SDK
- NodeJS / NPM
- Apache Cordova
- Ионный каркас
После установки вы должны указать весь путь к программному обеспечению в переменной окружения. Если вам потребуется помощь в установке, вы всегда можете обратиться к блогу Ника Рабоя. (Привет, Ник Рабой!)
Создание проекта в Ionic:
Сначала откройте терминал и смените текущий рабочий каталог на рабочий стол.
cd ~/Desktop
Теперь создайте пустой ионный проект с именем BoltApp. Эта команда создаст папку с именем BoltApp.
ionic start BoltApp blank
После создания проекта перейдите в папку проекта.
cd BoltApp/
Чтобы включить серверный запрос, установите плагин белого списка Cordova.
ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git
А затем добавьте эти строки в файл config.xml.
<allow-navigation href=”*” />
Теперь, чтобы запустить пустой проект, введите свой терминал
ionic serve
Эта команда запустит проект BoltApp в браузере.
Следующим шагом является загрузка любых текстовых редакторов, таких как Sublime Text или Atom, для лучшего управления проектами и открытие проекта BoltApp в текстовом редакторе. «www» - это основная папка, в которую будут записаны все коды, определенные пользователем, и «index.html» - это главный файл, который открывается первым в приложении ionic. Мы помещаем все пользовательские изображения, файлы javascript (js) и CSS в соответствующие папки.
Теперь откройте файл index.html. Весь наш контент будет помещен в тег, например ‹ion-content› ……. ‹/Ion-content›. Добавьте две кнопки как LEDOn и LedOff.
Давайте посмотрим на код, а затем попробуем разобраться в небольших фрагментах.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="startercontroller">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">My BOLT App</h1>
</ion-header-bar>
<!--All content will go here -->
<ion-content>
<div class="row">
<div class="col text-center">
<button class="button button-positive button-outline" ng-click="LedOn()">
LED On
</button>
</div>
</div>
<div class="row">
<div class="col text-center">
<button class="button button-balanced button-outline" ng-click="LedOff()">
LED OFF
</button>
</div>
</div>
<div class="row">
<div class="col text-center">
<span>
{{ responseFromCloud }}
</span>
</div>
</div>
</ion-content>
<!--Ending of content -->
</ion-pane>
</body>
</html>
Итак, как мы знаем, ionic использует Angular js. Итак, сначала мы попытаемся понять, что такое Angular js и как он работает.
<body ng-app="starter" ng-controller="startercontroller">
Директива ng-app определяет приложение AngularJS, а ng-controller контролирует данные приложений AngularJS. Таким образом, в нашем коде тег всего тела представляет собой приложение angular js, а содержимое тега тела управляется ng-contoller.
Я предлагаю вам прочитать некоторые основы приложения angular js по ссылке: «http://www.w3schools.com/angula Факr.
Мы вызываем две функции LedOn () и LedOff () при ng-щелчке. ng-click в angular очень похож на onclick в javascript. Функции LedOn и LedOff написаны в файлах app.js. Давайте откроем файл «app.js».
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
app = angular.module('starter', ['ionic'])
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.controller('startercontroller', function($http, $scope) {
$scope.responseFromCloud = "Led is on"
$scope.LedOn = function() {
console.log("Led on is clicked");
$http.get('http://cloud.boltiot.com/remote/3fe6d9d3-129b-4f60-b7f9-10afc5944334/digitalWrite?pin=0&state=HIGH&deviceName=BOLT14093956')
.success(function(response){
$scope.responseFromCloud = response ;
}) ;
}
$scope.LedOff = function() {
console.log("Led off is clicked");
$http.get('http://cloud.boltiot.com/remote/3fe6d9d3-129b-4f60-b7f9-10afc5944334/digitalWrite?pin=0&state=LOW&deviceName=BOLT14093956')
.success(function(response){
$scope.responseFromCloud = response ;
}) ;
}
});
Эти строки определяют приложение:
app = angular.module('starter', ['ionic'])
Следующая часть - определение контроллера для нашего приложения. Мы определяем все функции и переменные в разделе контроллера для приложения. Мы передаем контроллеру «$ http» и «$ scope». Область видимости является связующим звеном между index.html и нашим контроллером. Сервис «$ http» делает запрос к серверу и возвращает ответ.
app.controller('startercontroller', function($http, $scope) {
Следующая часть - функция LedOn.
$scope.LedOn = function() {
console.log("Led on is clicked");
$http.get('http://cloud.boltiot.com/remote/3fe6d9d3-129b-4f60-b7f9-10afc5944334/digitalWrite?pin=0&state=HIGH&deviceName=BOLT14093956')
.success(function(response){
$scope.responseFromCloud = response ;
}) ;
}
Как видите, мы запрашиваем Bolt Cloud API в $ http.get, и какой бы ответ ни возвращал сервер, мы передаем его переменной responseFromCloud. Создайте ключ API из Bolt Cloud, а также замените ключ API и имя устройства на имя вашего устройства. Функция Ledoff похожа на LedOn, только значение для вывода другое.
Теперь все готово, и мы будем создавать файлы apk для Android.
Введите эту команду в терминал для создания приложения для Android.
ionic build android
и вы найдете свой файл apk для Android в разделе platform / android / build / ouput.
Если вы столкнулись с какой-либо ошибкой, вы всегда можете открыть консоль в Chrome для отладки. Так что наслаждайтесь развитием.
«Остерегайтесь ошибок в приведенном выше коде; Я только доказал, что это правильно, а не пробовал. »- Дональд Кнут
Надеюсь, вам понравится разработка API-интерфейсов Bolt для вашего сценария использования. Если вам интересно узнать больше о платформе Bolt IoT или вы хотите создать продукт IoT или комплексное решение IoT для своей компании? Я буду рад поговорить с вами и помочь вам в этом процессе. Пожалуйста, заполните эту короткую форму на странице http://boltiot.com/app/consult.php, чтобы запланировать звонок.
