Andreas Argelius
Feb 3, 2016
...or how you create an hybrid app for your IoT project
Engineer originally from Sweden, recently moved to Japan to work with JavaScript development.
Interested in languages, both natural languages and those that a computer can understand.
An avid running currently recovering from a sprained ankle.
Recently started knitting. A great way to relax while creating something useful.
I help make a service called Monaca.
Monaca is ...
A hybrid app UI component library
Please ☆✨ us!
Some of the features are:
All the components are custom elements:
<!-- A simple switch -->
<ons-switch></ons-switch>
<!-- A material Design switch -->
<ons-switch modifier="material"></ons-switch>
<!-- Material input with floating label -->
<ons-input
modifier="material"
float
label="Username">
</ons-input>
<ons-dialog>
<ons-carousel>
<ons-col> and <ons-row>
<ons-popover>
<ons-tabbar>
<ons-range>
I want to create an app to keep track of the fish in my fish tank.
Let's use Onsen UI 2.0 to prototype a simple UI for the app.
<!--
I start with an empty
page using the <ons-page>
element.
-->
<ons-page>
</ons-page>
The <ons-page> element is a container that serves as the root of our app.
<!--
I add a <ons-toolbar> to
display a toolbar at the top.
-->
<ons-page>
<ons-toolbar>
</ons-toolbar>
</ons-page>
The <ons-toolbar> element adds a toolbar to the top of the app where we can put a title and buttons.
<!--
Now we add some content to
the toolbar.
-->
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button>
<ons-icon icon="md-menu">
</ons-toolbar-button>
</div>
<div class="center">
Fish tank
</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="md-search">
</ons-toolbar-button>
<ons-toolbar-button>
<ons-icon icon="md-more-vert">
</ons-toolbar-button>
</div>
</ons-toolbar>
</ons-page>
<!--
Let's add some tabs!
-->
<ons-page>
<ons-toolbar>
...
</ons-toolbar>
<ons-tabbar>
<ons-tab
active
label="Animals"
page="animals.html">
</ons-tab>
<ons-tab
label="Water"
page="water.html">
</ons-tab>
</ons-tabbar>
</ons-page>
<!--
Creating pages for the tabs.
-->
<ons-template id="animals.html">
<ons-list>
<ons-list-header>
Guppies
</ons-list-header>
<ons-list-item>
<div class="list__item__center">
<div class="list__item__center">
<div class="list__item__title">
Elsa
</div>
<div class="list__item__subtitle">
Female
</div>
</div>
</div>
</ons-list-item>
...
</ons-list>
</ons-template>
<!--
The <ons-fab> element creates
a Material Design Floating
action button.
-->
<ons-fab position="bottom right">
<ons-icon icon="md-plus"></ons-icon>
</ons-fab>
There is also the
<ons-speed-dial> element which expands into a menu when clicked.
A personal Arduino project that I've been tinkering with.
It keeps track of the temperature, basicity (pH value) and the amount of dissolved oxygen in the water.
My wife thinks I worry too much about the well-being of our fish...
pH probe
Dissolved oxygen probe
Anna
Olaf
The Arduino project doesn't save the data anywhere. It's just displayed on a OLED screen.
It would be great if I would have access to the data anywhere!
The ESP8266 is a tiny WiFi module. What's better, it's programmable!
To upload code to the ESP8266 GPIO0 must be grounded.
Connect a short jumper cable here. Must be removed when booting normally.
A simple program that connects to my home WiFi network, reads data from the temperature sensor and transmits it to Firebase every five minutes.
#include <Arduino.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#include <ESP8266WiFi.h>
#include <ESP8266WiFiMulti.h>
#include <ESP8266HTTPClient.h>
#define ONE_WIRE_BUS 4
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
DeviceAddress thermometer;
ESP8266WiFiMulti WiFiMulti;
float fetchTemperature() {
sensors.requestTemperatures();
return sensors.getTempCByIndex(0);
}
void setup() {
Serial.begin(115200);
sensors.begin();
if (sensors.getAddress(thermometer, 0)) {
sensors.setResolution(thermometer, 12);
}
for(uint8_t t = 4; t > 0; t--) {
Serial.printf("[SETUP] WAIT %d...\n", t);
Serial.flush();
delay(1000);
}
WiFiMulti.addAP("SSID", "PASSWORD");
}
void loop() {
// Fetch temperature from sensor.
float temperature = fetchTemperature();
// Send data to Firebase.
if((WiFiMulti.run() == WL_CONNECTED)) {
HTTPClient http;
http.begin("URL", 80, "/");
String data = "{\"temperature\": " + String(temperature) + ", \"timestamp\": {\".sv\": \"timestamp\"}}";
int httpCode = http.POST(data);
if (httpCode) {
if (httpCode == 200) {
Serial.println("Data saved! :)");
delay(1000 * 60 * 5);
} else {
Serial.println("Unable to save data to server: " + String(httpCode));
}
} else {
Serial.println("No connection to server.");
}
}
delay(1000);
}
Vue.component('my-dialog', {
template: `
<ons-dialog>
<ons-button
@click="hide()">
Hide
</ons-button>
</ons-dialog>
`,
methods: {
show: function() {
return this.$el.show();
},
hide: function() {
return this.$el.hide();
}
},
events: {
'show-dialog': function() {
return this.show();
}
}
});
new Vue({
el: '#app',
template: `
<ons-page>
<ons-toolbar>
<div class="center">
Vue.js sample
</div>
</ons-toolbar>
<p>
<ons-button
@click="showDialog()">
Click me!
</ons-button>
</p>
</ons-page>
<my-dialog></my-dialog>
`,
methods: {
showDialog: function() {
this.$broadcast('show-dialog');
}
}
});