Exploring the Web3 field can quickly feel very overwhelming for beginners, even for folks with a technical background. This then is probably the guide if you would like to take your first 12 steps and start doing things without any real money involved.

__So you’ve heard developers talking about Web3 and Blockchain development! The tech community, especially on Twitter, is currently very active, but it can quickly feel very overwhelming for beginners, even for folks with a technical background. This then is probably the guide if you would like to take your first 12 steps and start doing things instead of just reading and researching (and it’s not only valuable to software developers).__

Many people think about scams and fraud when dealing with blockchains for the first time. Don’t worry: Nothing you’ll do during this guide has any real money involved.

### 1. Learn what the Blockchain actually is

This is somewhat mandatory before you even start in the field. Having a basic understanding of blockchain technology will help you to get started with the following steps. I recommend [this](https://www.youtube.com/watch?v=SSo_EIwHSd4) video, but probably hundreds of other resources are available.

### 2. Understand Ethereum and Web3 concepts

For Web3 developers, one of the most interesting current blockchains (can change in the future!) is *Ethereum* because it enables the deployment of smart contracts, small applications that “live” on the Ethereum Virtual Machine (EVM), instead of just handling currency interactions. This is where it gets interesting for software developers and where Web3 development starts. Applications that are built "on" the blockchain or/and interact with smart contracts are usually called *dApps* (decentralized apps).

### 3. Understand the concept of tokens

Tokens are a fundamental concept in Web3. There are fungible tokens and non-fungible tokens (*NFTs*). For instance, payment and/or utility tokens like *Bitcoins* and *Ether*, or governance tokens like MKR are a kind of fungible token. 

Ever heard of [Bored Apes](https://opensea.io/collection/boredapeyachtclub) and CryptoPunks? Because each NFT is uniquely identifiable (in contrast to fungible tokens), they are often used as speculative assets. NFTs are mostly associated with digital files such as photos, videos, and graphical art. Sometimes they are used as an "entry ticket" to online communities.

### 4. Set up your wallet

Getting into Web3 development does not require buying any real *cryptocurrency* (e.g. Ether) in the first place, as long as you stay in a local development environment or (even easier) on a so-called "testnet". *Testnets* behave like the "real" Ethereum *mainnet*, but work with "worthless" ETH that you can use to pay so-called *gas fees* needed for interacting with smart contracts. 

But where should you store this "fake" ETH? For this, you’ll need a *software crypto wallet* and the most widely used is [*Metamask*](https://metamask.io/), which you can add as a browser extension for free. Setting up an account is easy and anonym but beware: Always store your passphrase safely, especially if you want to deal with non-testnet ETH at a later date. Make sure you select one of Ethereum’s testnets (e.g. *Rinkeby*) after creating your wallet and copy your wallet’s public key (looks something like 0x03....172a6559), it will be needed in the next step.

![METAMASK](//images.ctfassets.net/e598mslz60uf/6tIRZbNM41LYvuTcsJ5p9V/dcc832400b48f8ce8d338c19851757c2/METAMASK.png)

### 5. “Purchase” your first ETH

Remember: You’ll mostly stay on the Ethereum testnet for this tutorial, so you don’t buy real Ether. Obtaining testnet Ether cannot be done via cryptocurrency exchanges, like *Coinbase* or *Binance*. Those are the places where you would exchange $, €, etc. to "real" BTC, ETH, or any other coin. In our case, you’ll need to use a faucet. Enter your wallet’s public key and how many testnet Ether you’d like to receive on this page - wait, and see your ETH added to your Metamask.

### 6. Swap your ETH for another Coin

One of the most famous cryptocurrency exchanges is *Uniswap*, and it works totally fine on testnets! Go to [app.uniswap.org](https://app.uniswap.org/) and swap some of your ETH into (e.g.) UNI and add them to your wallet. Transactions like this require *gas* fees, but since you stay on testnet this action is - again - for free (and fun).

### 7. Mint your first NFT

An NFT comes into existence during the process of so-called *minting*. This means it is “uploaded” to the blockchain initially. NFTs are often part of a collection that is accompanied by lots of marketing and community building. For demonstration purposes (and again, for free) you can mint your first NFT at my testnet NFT collection, which I have set up [here](https://rinkeby-me.netlify.app/). Once you have minted one of the NFTs from the collection you are the one and only owner of it, and the NFT visibly appears at [OpenSea](https://testnets.opensea.io/collection/rinkebymenft-v3) (the worldwide biggest NFT marketplace). Of course, selling your NFT to other interested people is possible.

### 8. Mint your own NFT

So you minted your first NFT from another artist’s collection! Maybe it’s time to publish and mint your own NFT now. It’s supereasy with [testnets.opensea.io](https://testnets.opensea.io/) as well. Just pick an artwork, made by (preferably) yourself, in a compelling image format, connect your wallet, and click on “Create”. After adding some metadata your NFT will be put up for auction or immediate selling.

### 9. “Purchase” your first NFT

Again, you don’t need to pay $284,515 (this was the price of the cheapest Bored Ape today) to get a feeling for the NFT buying process. Just stay on the OpenSea testnet and buy any (trashy) testnet NFT you can get for “fake” ETH.

### 10. Join a DAO

A *DAO* (Decentralized Autonomous Organization) is an online community, operating on top of smart contracts, which is owned and controlled by its members. They make it possible for an online group to pool capital and hard-code rules for how that capital will be managed or spent. Those rules are subsequently enforced by the underlying blockchain. Finding a DAO of your liking and committing to it, can be an intimidating step, so I created a testnet DAO (”Hagrid’s Hut”) *[Coming soon]*, where you can become a member and vote on testnet ETH. Happy DAOing!

### 11. Store your assets decentrally

Have you ever used a peer-to-peer-based network for sharing data? Blockchain-based decentralized storage systems function in almost the same way: Unlike a centralized server operated by a single company, they consist of a network of user-operators who hold a portion of the overall data. Storing data upon decentralized storage will (almost) make sure, it can never be deleted and will stay online forever. If you want to try out how this works I can recommend using [Fleek](https://fleek.co/) (based on the Filecoin network).

### 12. Register your ENS Domain

Recall that your wallet's public key lets people send assets (e.g., NFTs) to you. Unfortunately, the long string of characters (e.g., 0xa5d1b…) is hard to remember. For this, the ENS Domain system was invented: By registering a domain like superduperhero.eth and matching it to your public key, means sending NFTs or coins to another person’s wallet gets a bit easier. Furthermore, ENS allows you to store additional info about yourself such as bio, avatar, or Twitter profile (see [app.ens.domains/name/brantly.eth/details](https://app.ens.domains/name/brantly.eth/details) as an example). And yes, also this popular procedure can be done on any testnet as well! Go to https://app.ens.domains to get started.

---

__If you followed me up to this point, you have tried out quite a few of the typical use cases in the Web3 space. Check out [my Web3 resources collection](https://rike.dev/web3/), to explore further with a focus on Web3 development.__


Exploring Web3: Safe and sound starter guide (not only for software developers)

The Web3 community is certainly one of the most vibrant ones in the tech space. During web3con hackathon 2022 a team of five built the decentralized version of the popular Wordle online game. This is how we implemented it using Solidity, React, Hardhat and Alchemy.

*The Web3 community is certainly one of the most vibrant and evolving communities in the tech space. For many developers, it feels like being part of a new movement, regardless of the many (sometimes legitimate) doubts and critical voices. Over the last few months, I got the chance to explore this new and exciting space. I even built a few projects in order to get a feel for Web3 backend applications (In my case: Solidity) and Web3 frontend development.*

Luckily, during __[web3con](https://www.web3con.dev/) hackathon 2022__ (hosted by Developer DAO) I joined a team of five inspiring women ([Ana](https://github.com/mspuz), [Afoma](https://github.com/Afoma), [Brenda](https://github.com/mejia-b) & [Kristen](https://github.com/cuddleofdeath)) with the mission to build a decentralized application (__dApp__), which works as the Web3 counterpart of the popular Wordle online game. In this game, the user is able to play a daily round of Wordle and has the chance to proudly mint their result (may it be good or bad) on the Ethereum blockchain as an __NFT__. During this process, the user is asked to donate a small amount of Ether to a charity of their choosing to help a great cause.

## Our Web3 backend tech stack
The Ethereum chain is quite possibly the most used chain for building Web3 dApps. Its [EVM (Ethereum Virtual Machine)](https://ethereum.org/en/developers/docs/evm/) makes it possible to deploy smart contracts directly and immutably to the chain and interact with them with an appropriate frontend. The primary programming language for this backend-ish application is currently Solidity. So, for our hackathon project *“New Wordle on The Block”* we decided to write our code in native Solidity (though other options exist).

For our development environment, we chose [__Hardhat__](https://hardhat.org/), a framework that enabled us to easily run tests and debug Solidity code. With the Hardhat network, it’s even possible to run a local Ethereum network, designed to resemble a “real” blockchain environment.

For the final smart contract, we used no more than 50 lines of code. The majority of our smart contract's code consisted of the mintAndDonate function, which is the function responsible for handling the minting and donation process. 

![Solidity function](//images.ctfassets.net/e598mslz60uf/1VKQNbk7274C6fiU4tdDsu/923383ca3706da80085647d145839d38/solidity-function.png)

The function expects two arguments: the first being the Ethereum wallet address of the charity chosen by the user, and the second argument being the metadata URI, which serves as the URL to the NFT's metadata. After making sure that the user is offering a donation payment, the function keeps track of the NFT’s unique token id and handles the actual minting process with the help of OpenZeppelin’s utility functions. According to the ERC721 standard, the provided Wordle result is published as a non-fungible token (NFT) to the blockchain and issued to the Wordle player.

## Connecting to the chain
Building and deploying our Solidity smart contract needed one further step: Simply speaking, deploying a dApp requires communicating with a blockchain node which serves as an entry point to the chain enabling interactions such as managing transactions. Not long ago, every blockchain developer had to build directly on top of so-called RPC nodes to do that. As an alternative, a developer platform like __[Alchemy](https://www.alchemy.com/)__ enabled us to communicate with the blockchain without having to run our own nodes.

## Storing images and their metadata the decentralized way

The trickiest part of our project was to figure out how to store the image of the Wordle result and all of its metadata in a (desirably) decentralized way. This is where [__IPFS__ (Interplanetary File System)](https://ipfs.io/) comes in. IPFS is a way to store and retrieve content based on a "fingerprint" of the content itself. "Fingerprinting" an NFT gives that NFT the ability to access its own data. This method is complemented with a decentralized file storage network like [Filecoin](https://filecoin.io/) (or, in our case: [Fleek](https://fleek.co/), which allows you to store files similarly to other Peer-to-Peer networks e.g. BitTorrent).

## How we built the frontend

With the help of the [__React__ framework](https://reactjs.org/) and the Tailwind CSS library, we created a basic single page application as a boilerplate for our frontend application. Following that, we made use of libraries like [walletconnect](https://walletconnect.com/) and [usedapp](https://usedapp.io/) to handle wallet connection functionality and account management.

![Connect function](//images.ctfassets.net/e598mslz60uf/61pb82PlRKkxoBzCFervZd/ae5f790a9c5285080f947261c6a4d15b/connect.png)

Fortunately, building a Wordle game was easy with the help of the Open Source library [react-wordle](https://github.com/cwackerfuss/react-wordle), which enabled us to create the typical Wordle result matrix graphic in the end. But, how were we able to create an image out of that React component? We did so by referencing the container div element, then we implemented a function that generates a canvas from plain HTML. Afterwards, we transferred this to a blob object and finally created a base64 string from that.

![Wordle](//images.ctfassets.net/e598mslz60uf/7F1Q5xSlNnbjhqVhBeFHB7/97b31858974d365a244c37665168e0c2/wordle.png)

The next task was uploading that image to Fleek file storage, which required setting up an API key & secret. Using the IPFS backed public URI of the image that Fleek created for us, we set up a JSON consisting of the asset’s metadata. Providing valid metadata allows NFT marketplaces like [OpenSea](https://opensea.io/) to pull in this data and display them in-app. We added properties such as a name and description to the metadata for the smart contract to use. Also, the metadata JSON was uploaded to Fleek file storage and the resulting metadata URI was the final input for the minting action.

![Store function](//images.ctfassets.net/e598mslz60uf/mRY2VyPFr2bgWfRQ7tdFp/ba9d7ec680903dbdd1d8288fd87d7bf7/store.png)

Using the Web3 library, [ethersJS](https://docs.ethers.io/v5/) provided us with functionality to call the mintAndDonate function from the smart contract in a very straightforward way.

![Mint function](//images.ctfassets.net/e598mslz60uf/4nGmgPV7Wt3aYNvGKDEDsb/2aec233e56cfe771f034630fa20fce0b/mint.png)

To add a little more user interaction, fun, and purpose to our app, we implemented a feature which allows users to customize their NFT by adding an emoji reaction for that day’s Wordle result. In addition to emoji reactions, we also implemented a dropdown menu containing a list of charities that the user can select to donate their minting fee to.

![Modal](//images.ctfassets.net/e598mslz60uf/4wRGwjxOga27iNqLQUmGPl/85e086eec5c6833afcc010c0befd24a4/modal.png)

## Deploying our frontend dApp

Deploying static sites like our Wordle frontend app is not much different from the process in the “traditional” Web 2.0. Several services like Netlify or Vercel might have been possible to use but, ultimately, we decided to use Fleek file storage for our project.

Have a look at our final result and have fun playing Wordle along with minting (currently still on Rinkeby Testnet) your NFT [here](https://wordle-on-the-block.on.fleek.co/).

## Get the code

Find the code at [Github](https://github.com/gitfrosh/maxima).

---

*Special thanks to [Kristen](https://twitter.com/CuddleofDeath) & [Brenda](https://twitter.com/engineerbrenda) for your support in writing this post! ❤️*


Hack the Web3: Building a Wordle on the Blockchain

In diesem Tutorial geht es darum, einen einfachen Webserver auf Python-Basis zu installieren und zu testen. Dieses Tutorial ist im Rahmen der Summer Schools in Bremen (Informatica Feminale) und Salzburg (ditact) entstanden.

> In diesem Tutorial geht es darum, einen einfachen Webserver auf Python-Basis zu installieren und zu testen. Dieses Tutorial ist im Rahmen der Summer Schools in Bremen (Informatica Feminale) und Salzburg (ditact) entstanden.

### Los geht's!

## Vorbereitungen treffen
- Lege auf deinem Computer einen Ordner an, in dem du während des Kurses bzw. während des Tutorials arbeiten möchtest. Den Ort kannst du beliebig festlegen.
- Innerhalb des Ordners lege eine neue Datei an mit dem Namen "index.html". (In Windows solltest du sicher gehen, dass sich die Dateiendung mitändert, und nicht etwa eine Datei nach dem Schema "index.html.txt" entstanden ist!)
- Öffne die Datei "index.html" in einem Texteditor (z. B. "Sublime") und füge einen beliebigen Text ein, z. B. "Hello World!". Optional kannst du eine weitere Datei "about.html" erstellen und diese mit Leben füllen.
- Navigiere im Terminal zum neu angelegten Ordner. Der Befehl dazu lautet "cd" gefolgt vom entsprechenden Pfad. 

Für ein Windows-System könnte der Befehl so lauten:

```cd C:\Users\Ulrike\Projekte\Neues-Projekt1```

- Für ein macOS-System wäre dies ein Beispiel-Befehl: 

```cd /Volumes/PROJECTS/Neues-Projekt1```

Wenn du erfolgreich warst, wird der Pfad, in dem du dich nun befindest, der neuen Kommandozeile voran gestellt.

Da wir Python [im vorangegangenen Schritt bereits](https://rike.dev/2021/26/08/mit-dem-terminal-arbeiten-und-python-installieren/) installiert haben und Python in der Standardausführung bereits ein kleines "Werkzeug" für einen einfachen Webserver mitnringt, müssen wir diesen jetzt nur noch starten:

## Anleitung für Python 2.x.x

- Prüfe noch einmal, ob du dich in deinem Terminal im richtigen Dateipfad befindest (auf der gleichen Ebene wie deine "index.html".
- Wenn ja, gib ins Terminal den folgenden Befehl ein:

 ```python -m SimpleHTTPServer```

- Solltest du eine Warnmeldung von deiner Firewall erhalten, klicke auf "Ok" bzw. "Zulassen".
- Navigiere in deinem Browser zur URL http://127.0.0.1/8000. Wenn alles geklappt hat, wird dort nun der Inhalt des von dir angelegten HTML-Dokuments angezeigt, z. B. "Hello World!"

## Anleitung für Python 3.x.x

- Prüfe noch einmal, ob du dich in deinem Terminal im richtigen Dateipfad befindest (auf der gleichen Ebene wie deine "index.html".
- Wenn ja, gib ins Terminal den folgenden Befehl ein:

 ```python -m http.server```

- Solltest du eine Warnmeldung von deiner Firewall erhalten, klicke auf "Ok" bzw. "Zulassen".
- Navigiere in deinem Browser zur URL http://127.0.0.1/8000. Wenn alles geklappt hat, wird dort nun der Inhalt des von dir angelegten HTML-Dokuments angezeigt, z. B. "Hello World!"

## Den Webserver stoppen

Den gestarteten Webserver kannst du jederzeit wieder stoppen. Dann ist er nicht mehr unter der URL http://127.0.0.1:8000/ erreichbar. Im Terminal musst du dazu lediglich [Strg] + [C] bzw. [Ctrl] + [C] drücken.

Einen einfachen Webserver mit Python 2.x.x oder 3.x.x installieren

In diesem Tutorial geht es darum, den Umgang mit dem Terminal zu üben und die Programmiersprache Python auf deinem Betriebssystem zu installieren. Dieses Tutorial ist im Rahmen der Summer Schools in Bremen (Informatica Feminale) und Salzburg (ditact) entstanden.

> In diesem Tutorial geht es darum, den Umgang mit dem Terminal zu üben und die Programmiersprache Python auf deinem Betriebssystem zu installieren. Dieses Tutorial ist im Rahmen der Summer Schools in Bremen (Informatica Feminale) und Salzburg (ditact) entstanden.

## Mit dem Terminal arbeiten / Die Installation von Python prüfen
Mit dem Terminal können wir unser Betriebssystem textbasiert steuern. Häufigster Vorbehalt gegen das Terminal ist, dass es komplex und damit schwierig zu erlernen sei. Für einige Aufgaben ist er jedoch sehr gut geeignet, weswegen wir für dieses Tutorial / den Kurs ein wenig damit arbeiten werden. Öffne das Terminal (= Kommandozeile oder CLI oder Konsole) deines Betriebssystems:

- In __Windows 8 und 10__ geht das mit einem Klick mit der rechten Maustaste unten links im Bildschirm auf das Windows-Symbol oder mit der Tastenkombination [Windows] und [X]. Danach muss die "Eingabeaufforderung" oder die "Eingabeaufforderung (Administrator)" aus der Liste ausgewählt werden.
- In __Windows 7__ klickst du auf das Windows-Symbol links unten und suchst unter "Dateien/Programme durchsuchen" nach "Eingabeaufforderung".
- In vielen __Linux__-Distributionen öffnet sich das Terminal durch die Tastenkombination [Strg] + [Alt] + [T].
- Auf __MacOS__ führt die Tastenkombination [cmd] + [Leertaste] zur Spotlight-Suche. Dort kann nach "Terminal" gesucht und dieser ausgeführt werden.

Nun prüfen wir, ob auf unserem Betriebssystem die Programmiersprache Python korrekt installiert wurden. Die Chancen stehen gut, denn MacOS und viele Linux-Distributionen bringen Python bereits mit. Gib im Terminal den folgenden Befehl ein:

```python --version```

Im besten Fall informiert dich dein Betriebssystem nun darüber, ob und in welcher Version Python installiert ist (wie im Beispielbild unten auf einem Ubuntu-Computer).

![Ubuntu-Rechner: Python installiert](//images.contentful.com/e598mslz60uf/3ZWZHP4wc7owM6qJmPvEG/17bb798e1817d49445930d8e22ebad4a/Auswahl_146.png)

Wenn das der Fall ist, muss du an dieser Stelle nichts weiter tun (es ist egal, welche Python-Version du nutzt). Falls eine Fehlermeldung erscheint (wie im Beispielbild unten auf einem Windows-Computer), musst du die Installation von Python für dein Betriebssystem nachholen.

![Windows: Python nicht verfügbar](//images.contentful.com/e598mslz60uf/5RxRuH1gDHN8TZB2gGPYiY/47e24ee2b7d2449c7f615b78df5d3568/image001.png)

## Python installieren (empfohlen: Version 3.x.x)

Python können wir wie ein normales Softwarepaket herunterladen und für unser Betriebssystem installieren. Die Programmiersprache ist Open Source verfügbar, das heißt kostenlos erhältlich.

- Surfe zu https://www.python.org/downloads/ und lade die jüngste Version von Python 3 herunter, momentan ist das Version 3.9.6. Achte darauf, dass du das Paket für *dein* Betriebssystem runterlädst, normalerweise erkennt die Website dein Betriebssystem automatisch und schlägt dir die richtige Datei vor.
- Installiere die Datei wie eine gewöhnliche Software, z. B. über Windows mit einem Doppelklick auf die Datei, die du heruntergeladen hast. Aktiviere die Auswahl "Add Python 3.x to PATH" während des Installationsprozesses, wenn du auf einem Windows-Computer arbeitest. Weitere Anpassungen musst du nicht durchführen. Eventuell musst du deinen Rechner und/oder deinen Terminal neu starten, damit alles funktioniert.
- Wenn Python korrekt installiert wurde, kannst du die Installation wie im vorigen Schritt prüfen und solltest diesmal erfolgreich sein.


Mit dem Terminal arbeiten und Python installieren

Social bots? Sounds suspicious? Depends on how you implement them: I'll show you how I built a friendly Twitter bot that supports women in tech and how you could as well.

__Social bots? Sounds suspicious? Depends on how you implement them: I'll show you how I gained 21k followers and built a supportive community on Twitter with just retweeting others. Besides that I will cover what bots actually are, why you should use automated interactions in Social Media and what might be the difficulties doing that.__

This blog post is based on a conference talk I gave at WomenTech Global Conference in June 2021.

## The @femtech_ bot

The Twitter account [@femtech_](https://twitter.com/femtech_ "femtech_") (don't forget the underscore) is probably the biggest automated account that supports women in tech, shares their stories and has gained 21k followers until now. I founded it as a totally non-profit fun project and started it during a coding challenge in Summer 2019.

Its aim has always been to amplify women's voices in tech, get them connected and do good for the community. What is special about this account is probably that it doesn't publish any original content. Also it does not follow back anybody, so it's really based on pure retweeting - and despite of that many people (not only women) find this very interesting and inspiring. 

## What a supportive bot might re-tweet

From all the content that get's retweeted and is spread to the community, this is actually the stuff which is mostly appreciated: achievements of women in our community who are doing research, did a great job or have been promoted. Also: Announcements of events, podcasts, talks, conferences where great women participate, job offers, calls for papers, etc. Or just personal stories from women of our community. The bot also shares personal stories from all over the world as long as it's in English, which makes its content very diverse. Or just personal stories from women of our community. You might ask if the followers do interact in any way with each other. They do! They do get into interaction, and that's probably the most wonderful thing about the femtech_ bot. They comment and discuss, like tweets of fellow women in tech, follow each other. So this is actually what the bot's about: networking, socializing, support!

## The odds of building a bot

Is building a bot or using automated interactions in your Twitter account or any other Social Media platform a good idea for you (your business, your organisation)? Yes, I think so, if you are able to deal with some odds..

This is because of @femtech_ has constantly been target of spammers who love to make use of popular hashtags and accounts and try to place their annoying content.

So what are they trying to do? The tag their unrelated stuff with any trending hashtags and know that there are bots that will consider retweeting their content. This behaviour is called *hashtag cramming* but is actually forbidden by Twitter. Nevertheless  spammers try to place their advertising for (often) non-technical products, services and adult content.

Also, there are people, who try to share their political and religious views, also anti-feminist and racist content through @femtech_.

I've seen it all!

## What is a bot

Let's take a step back for a moment and clarify one thing. What is a bot?

> In sum, a bot is an automated account — nothing more or less.

As Yoel Roth, Head of Site Integrity at Twitter, says, a Twitter bot is a Twitter account that has (mostly) automated interactions. By the way, there's of course not just bot actitivy on Twitter but of course also on platforms like Facebook or Instagram.

Bots can be the absolute worst part of Twitter when they are being unnerving and untrustworthy, and there have also been cases where bot networks aggressively engaged in political affairs. 

BUT They can also be the best. Let's start with the good parts.

## The good parts

Bots we usually like and sometimes don't even identify as bots act in a way that don't bother us. Whenever building a bot you should either do good to the community (to the world even) or make use of them in a trustworthy way and grow your business.

Here is a list of very kind, very useful, even funny bots:
- [@wayback_exe](https://twitter.com/wayback_exe "@wayback_exe")
- [@greatartbot](https://twitter.com/greatartbot "@greatartbot")
- [@earthquakebot](https://twitter.com/earthquakebot "@earthquakebot")

If you'd rather like to use bot technologies for your business, your can do so in multiple ways, just to name a few:

- boost social media engagement (auto-follow, auto-retweet)
- provide 1st level support to your customers (send automated direct messages, auto-respond to dm's)
- automate repetitive tasks (auto-tweet every article you publish on your blog)
- setup a publishing schedule

One hint from me to you: Stay human when you use bot technology to boost your brand! *Only* automate those processes that require no engagement or no interaction from your side. That could be posting statuses that are meant to be shared to bring more visibility to yourself and your brand. But if you want to build trust and loyalty with users, you can’t automate everything you do, but you have to interact on a personal, one on one level as well. It’s not a substitute for a complete social strategy, you still need to engage regularly, and listen to your customers.

## Let's code

So, what's the technical side of building a bot?

You can either use an automation tool. Those are mostly commercial ones and there are a lot out there, so I listed just some of them here.

- [https://buffer.com/](https://buffer.com/) (Scheduling)
- [https://tweepi.com/](https://tweepi.com/) (Follower handling)
- [https://www.personalautodm.com/](https://www.personalautodm.com/) (Messaging)

OR you could build one yourself. So if there are some developers around here, this is how you start:

1. Have a Twitter account! Of course! You could use your existing one and add some automated behaviour to it OR you could create a new account which could be fully automated and act as a real bot if you'd like.
2. Then there's maybe one tricky thing and this is getting approved for a Twitter developer's account to get access to the Twitter API
3. If you don't know what an API is, think of it as a stream and a pool of all the data that is coming through Twitter in a raw data format that can be fetched and processed with a programming language like Python, Java or JavaScript. [(Read my beginner's guide to REST APIs here!)](https://rike.dev/2021/05/04/rest-apis-for-absolute-beginners/ "REST APIs for absolute beginners")
4. Get familiar with it and write a script that will react to the incoming data stream as you like it, so for example retweet tweets based on some criteria. [(Read my full introduction into how to code a Twitter bot here.)](https://rike.dev/2019/06/26/how-to-build-a-twitter-bot-with-node-js-fast/ "How to: Build a Twitter bot with Node.js - fast!")

## Ban the evil

If you do automated retweeting based on hashtags or any other criteria your bot will probably attract spammers so your bot will appear spammy as well if you don't take care of some things.

Here is my recommendation on what tweaks you should consider to keep your bot's feed un-spammy:

- filter unwanted, adult content (nudes mostly); make use of AI/ML technologies that are able to identify those content
- block usernames with suspicious patterns (e.g. usernames that contain a lot of numbers are often used by spammers)
- block other bots (because they are mostly not well maintained)
- filter tweets with too many hashtags (often used by aggressive advertisers)
- identify and block shady strings and hashtags, e.g. "womenaretrash"
- maintain an account blocklist (that's the last resort for spammers that can't be blocked through other mechanism) that have shared abusive content

## So: Bot or not?

Sure! Building and maintaining a bot can be a great thing if you use bot technologies wisely. Checklist: 
- always monitor
- do spot checks every now and then
- check your dm's because your followers will probably report spam

__Have fun!__


How to build a friendly Social bot

What are REST APIs? What do I need them for? This is what you maybe searched for or didn't dare to ask: The absolute beginner's guide to REST APIs. I explain how you can access (and authenticate) them and make the most out of them. I will use the Lord of the Rings API in this article.

Sometimes I get requests on how the [Lord of the Rings API](https://the-one-api.dev/ "Lord of the Rings API") works and I realize that its documentation might not be outstretched enough for absolute beginners. So here is what you maybe searched for or didn't dare to ask: __The absolute beginner's guide to REST APIs using the example of The Lord of the Rings API.__

## Why you should learn about REST APIs

So maybe you just stumbled into web development, wrapped your head around some HTML and CSS and you have a basic idea of how the internet and web servers work. (No? Don't give up. I found a great intro here: [https://roadmap.sh/guides/what-is-internet](https://roadmap.sh/guides/what-is-internet)) Why would you learn about REST APIs? REST APIs are a great way to fetch data of all kinds and integrate them into your web project, no matter if just for fun or the next big startup that you are building. Many of those data stores are free of charge and open for you to work with them. 

## A definition of REST APIs

Many refer to them as "Web Services", which I would explain as a web application without a user frontend but still accessible through a web URL. They often provide a set of multiple sub URLs (also called "endpoints") that point to different subsets of the data store. The term __REST__ is a short term for a special style the architecture of the API is based on. REST is the most common way to create an API (though GraphQL gains popularity the last years) and it's mostly for developers actually building the API to know those principles. For developers fetching data it's only important to know __how the data is provided__: a data format called JSON. A single JSON object could represent a single item of a data store, e.g. a character from the Lord of the Rings, which looks basically something like this:

```
    {
      "_id": "5cd99d4bde30eff6ebccfe19",
      "height": "Tall",
      "race": "Human",
      "gender": "Male",
      "birth": "TA 2948 ,Gondor",
      "spouse": "Elfhild",
      "death": "March 15 ,3019",
      "realm": "",
      "hair": "White with braids (book) Blonde (films)",
      "name": "Théoden",
      "wikiUrl": "http://lotr.wikia.com//wiki/Th%C3%A9oden"
    }
```

Not really pretty, right? But useful in many ways (We'll see..)!

A data subset that provides multiple items (e.g. multiple characters from the Lord of the Rings) is placed into an array and would look like these:

```
    [
     {
      "_id": "5cd96e05de30eff6ebcceb9f",
      "dialog": "What do you fear, my lady? ",
      "movie": "5cd95395de30eff6ebccde5b",
      "character": "5cd99d4bde30eff6ebccfbe6"
    }, {
      "_id": "5cd96e05de30eff6ebcceb9e",
      "dialog": "A cage.To stay behind bars until useand old age accept them.And all chance of valor has gonebeyond recall or desire.",
      "movie": "5cd95395de30eff6ebccde5b",
      "character": "5cdbdecb6dc0baeae48cfa59"
    },
   ]
```

## How to access the data and go through authentication

There are many ways to connect to web URLs and the data behind them. The most common is to use a web browser like Chrome, Firefox or Safari. So what happens if you try to access [https://the-one-api.dev/v2/book](https://the-one-api.dev/v2/book) via browser? You actually send a GET request to the webserver storing the LotR API data, which then returns a JSON object of all three books of the trilogy to your browser.

If you read the [APIs documentation](https://the-one-api.dev/documentation) (or already tried) you might have seen that the endpoint [https://the-one-api.dev/v2/movie](https://the-one-api.dev/v2/movie) movie doesn't return any data, but just a HTTP status code 401 (Unauthorized). Most endpoints of the API are protected (for monitory & security reasons), that means - __only available if the user provides authentication credentials__.

So the first step for you to access all protected endpoints is [registering a new user account](https://the-one-api.dev/sign-up) (don't worry, it's free of charge). You will get a so-called access key - this is your personal key to the all protected data and should look something like this: xvi06TKLyJvBmrQC4yZv

The documentation says you have to add that access key as a __bearer token__ to your GET request. But how are you able to add that during you browser's request? The answer is - *you can't* by just surfing to the desired endpoint. You'll have to add it programmatically (e.g. through a browser-side JavaScript script or a server-side Python script) or by using another type of client: e.g. a command-line tool for data like cURL or a more sophisticated software like [Postman](https://www.postman.com/) or [Hoppscotch](https://hoppscotch.io/).

Let's try Hoppscotch (no need to install anything): Enter the desired protected API endpoint (e.g. https://the-one-api.dev/v2/movie) and the authorization header including your access key as a bearer token:

![Hoppscotch Sample Request](//images.ctfassets.net/e598mslz60uf/4vdyYHKTlJEm8087LQGbgv/fb63730192338f7ba5c82df8c3f3caf4/hoppscotch.png)

Hurray! The status code 200 tells us that this has worked.

## Doing something useful with REST API data

Using a client like Hoppscotch is actually a very common way to try out the different endpoints of a REST API. It's often the first step before integrating REST API data into your real app. After you have found out which endpoints are available, how the authentication mechanism works and which data they provide, you can switch into your application code and try to integrate this behaviour into your app.

Let's say we'd like to build a __React app__ that fetches a random Lord of the Rings API quote, the matching character's data, processes it and creates a nice-looking quote representation.

Let's do 

```npx create-react-app lotr-sample-app
cd lotr-sample-app
```

At first we jump right into *App.js* and remove all the boilerplate. We create two local state variables for the quote text and the character.

```const [quote, setQuote] = useState()
const [character, setCharacter] = useState();
```

Let's use a nifty little useEffect hook to fetch all quotes on page loading. For simplicity, we use the built-in fetch library (don't forget to add your authorization header here as well!). After that, let's pick a random quote, but - oh no - the quote's character is only the character's id, so we have to create a second fetch request that will fetch all characters's data based on the id.

After some processing we are ready to put the quote and character data into the React state so we can use it in the return statement.

```useEffect(() => {
    const headers = {
      'Accept': 'application/json',
      'Authorization': 'Bearer xvi06TocPJvBmrQC4yZv'
    }

    const fetchData = async () => {
      const rawQuotes = await fetch('https://the-one-api.dev/v2/quote', {
        headers: headers
      })
      const quotes = await rawQuotes.json();
      const quote = quotes.docs[Math.floor(Math.random() * quotes?.docs?.length)];
      setQuote(quote.dialog)
      const rawCharacters = await fetch('https://the-one-api.dev/v2/character?_id=' + quote.character, { headers: headers })
      const characters = await rawCharacters.json();
      const character = characters.docs[0];
      setCharacter(character.name)
    };

    fetchData();
  }, []);
```

The return statement can be very simple including a __blockquote__ and a __cite__ element. Styling-wise, I'm a bit lazy and use [this very nice-looking template by Joe Hastings](https://codepen.io/JoeHastings/pen/MOdRVm). Copy and paste all the CSS into your index.css and you should be fine.

## Get the code

You can have a look into all the code in [this Github Repo](https://github.com/gitfrosh/lotr-api/tree/release/sample-app).

REST APIs for absolute beginners

For quite some time Wordpress seemed like the only popular solution for content-driven webpages, but in the last years some new paradigms in content management evolved that basically try to level up content management into the new web app age. I gathered some information about general cms concepts.

I have been blogging for all my online life now which reaches back to the very early 2000s. This is a very long time and it resumes all the technical background content management systems (cms) and blogging in general went through. I started with plain HTML, used all the famous blogging platforms (blogger, blogspot, livejournal, pitas, twoday, probably more..) and later found my home at (a self-hosted version of) the cms Wordpress like many others. My blog at rike.dev has been running quite a while on Wordpress. 

But with all the modern JavaScript tech stacks, serverless deployments and the evolution of noSQL databases Wordpress (and its colleagues like Drupal, Typo3, and others) felt more and more unintuitive. I'm a JavaScript developer at heart so I more and more wanted to leave the PHP and MySQL stack altogether and stay flexible in which frontend technologies I use (React atm). Also, Wordpress feels bloated and overloaded especially if it is used for small blogs like mine.

For quite some time Wordpress seemed like the only popular solution for content-driven webpages, but in the last years some new paradigms in content management evolved that basically try to level up content management into the new web app age. I gathered some really short information about general cms concepts:

## Traditional cms (= Coupled cms = Monolith cms = Regular cms)
This is what most non-technical people and content managers love: Traditional cms provide a monolith consisting of a backend and a tightly connected frontend that both work on the same database. The backend comes with a GUI and often with a WYSIWYG editor so that there will be no need to write code. Traditional cms like Wordpress come with a big set of addons, plugins, themes and - which is great - a very devoted community. They can be maintained by non-technical persons up to some point, though their configurations can get messy and complex.

## Decoupled (= Hybrid Headless cms = Hybrid cms) 
Decoupled cms crash the tight connection between the frontend and backend typical for traditional cms.  The new approach is: The frontend consumes data from the backend via API, so it will never perform direct database operations. Decoupled cms also assist with a tool box including optional templates just like traditional cms enabling also non-technical people to publish their content and push it to various channels. A popular use case for decoupled cms are web shops.

## Headless cms (= API-first cms)
They are defined as asubset of decoupled cms and go one step further: Chopping off the head of a traditional cms completely leaves a cms without a coupled frontend component: This means that the content will be provided in a raw data format, like JSON. This type of cms simply doesn't care about the devices and services that will consume the data created by the backend GUI. A popular buzz word connected to this paradigm is Content as a Service (CaaS), which puts the headless cms up into the cloud, providing a chargeable service to its customers, maybe you have heart of Contentful, or other services.

## Flat-File cms
Most (self-hosted) decoupled and headless cms still rely on databases, e.g. MySQL, PostgreSQL or MongoDB. For complex projects this might be a practical approach, but for smaller websites or blogs a flat-file cms could suffice:  it does not require a database but rather, saves it's data to a set of text files, often XML files.

### So which paradigm to choose for my blog? 

At first I thought about using the (quite new) Wordpress REST API, but that would have meant to stay with the PHP/MySQL stack. What I definitively wanted was a flat-file cms without any database connection, just to keep it simple. Unfortunately, many flat-file cms still rely on PHP. Also out of simplicity decoupled cms were no alternative, so I searched for an API-first alternative and almost fount what I needed with Open Source projects like e.g. Strapi. But those still felt bloated and like an overkill to my use case, and I didn't like the thought of caring for another microservice on my server.

Just for fun I build my own super simple cms: It provides just one content type ("posts") so its use case would be blogs, mostly. It persists all posts into a simple JSON file without any database setup which makes it easy to backup as well. It has got a basic auth mechanism with only one admin user and of course provides its data via REST API. Like that the posts can be embedded simply anywhere - that's where your frontend skills are needed, no matter if you are a React, Angular or even Android developer. You can check it our on my [Github repository](https://github.com/gitfrosh/minako/).

For my own blog, however, I finally decided for a cloud-based Headless cms, which works very well for me.

In the end, it's up to you use case which cms to choose!

Headless, API-first, wtf? A short introduction to all the Content Management System types

Finally, I finished my #100DaysOfCode challenge I started on May 31st this year. The challenge is a great way to establish coding to become a daily habit, stop procrastinating and working on projects, that have been only ideas before. 

Finally, I finished my #100DaysOfCode challenge I started on May 31st this year. The challenge is a great way to establish coding to become a daily habit, stop procrastinating and working on projects, that have been only ideas before. For me it also became a way to keep in practice, since I left my programmer's job for maternal leave. I wrote a short recap about what I did in 100 days time.

## What is the #100DaysOfCode challenge?

The challenge was established by [Alexander Kallaway](https://twitter.com/ka11away) and its website is available [here](https://www.100daysofcode.com/). There are just two rules: code every day and track your efforts on Twitter. I didn't stick to those rules 100%, but I am happy with the outcome nevertheless. You can follow my progress on this small [log book](https://github.com/gitfrosh/100-days-of-code/blob/master/r1-log.md.) I wrote during the time.

For many coding newbies, the #100DaysOfCode helps with first tutorials and bootcamps, but since this was not the case for me I collected some topics I wanted to learn about and projects I planned to build.

## Which projects did I finish?

### [The Lord of the Rings API](https://the-one-api.herokuapp.com)

The "API to rule them all", the Lord of the Rings api, provides users with book, character, movie and quotes data. The api's documentation is available [here](https://the-one-api.herokuapp.com). This was my biggest project I finished during the challenge and it is also my favourite one. It's built with Hapi.js, server side rendering React.js and includes technologies like MongoDB and JSON Web Token authorization. In the future I would like to put this project on Open Source to make contributions possible. [Github repository](https://github.com/gitfrosh/lotr-api)

### [The friendly fem tech bot](https://twitter.com/femtech_)

The Node.js powered Twitter bot retweets female tech related tweets including #girlswhocode #womenintech #womenwhocode #womeninstem #femaletech #momswhocode and others. You can follow the [@femtech_](https://twitter.com/femtech_) bot on Twitter. 

### [Blockchain simulator](https://gitfrosh.github.io/blockchain-simulator/)

This small app provides a basic blockchain simulation and is built in React.js. For this project I also [deployed](https://gitfrosh.github.io/blockchain-simulator/) an app to a static site hoster Github pages for the first time -  a straightforward experience. [Github repository](https://github.com/gitfrosh/blockchain-simulator)

### "Track ur mood" Electron.js app

This is an experimental small project that can track your daily moods. It is built to try out Electron.js app and runs on Next.js under the hood. Data is stored in a lowdb powered Node.js / Hapi.js backend. Plus, it is styled with a supercute Windows95 UI library. [Github repository](https://github.com/gitfrosh/track-ur-mood)

### [The false quotes generator](https://false-quotes-generator.herokuapp.com/)

The [false quotes generator](https://false-quotes-generator.herokuapp.com/) missmatches mostly Simpsons' quotes to famous people. For this project I tried out Svelte.js and Sapper, a new shiny Javascript framework with a Node.js / Polka backend. [Github repository](https://github.com/gitfrosh/false-code-generator)

### [Publish a npm package](https://www.npmjs.com/package/random-lotr-movie-quote)

This is my first move to publish a npm package and - hurray! - it returns a single Lord of the Rings movie quote. [Github repository](https://github.com/gitfrosh/random-lotr-movie-quote)

### [ueberdiespree.de](https://ueberdiespree.de)

This is my small portfolio website I revamped with the static site generator Gatsby.js and some responsiveness improvements. [Github repository](https://github.com/gitfrosh/ueberdiespree)

### What else did I learn?

Whenever I didn't feel like coding on a project I worked on [this Udemy course](https://www.udemy.com/the-complete-junior-to-senior-web-developer-roadmap/) by Andrei Neagoie which includes great material about advanced web development topics like performance enhancements, security, typescript, testing, CI/CD, server side rendering, and more. I also worked on advanced React.js topics like React hooks and React CSS styling. Furthermore a studied some DevOps related problems and created my first Docker container.

## Should you do the #100DaysOfCode challenge too?

Totally! The challenge can help to keep going: Learning to code, finishing projects, achieving your goals. A big plus is the huge community on Twitter. With like-minded people in your timeline staying away from procrastination is much more easier. [Start today!  ](https://www.100daysofcode.com/)

#100DaysOfCode - a recap		

Building a Twitter bot with Node.js is easy these days (if you have at least some web development & JavaScript knowledge). Get ready with me and set up your own one in just a few minutes.

Building a Twitter bot with Node.js is easy these days (if you have at least some web development & JavaScript knowledge). Get ready with me and set up your own one in just a few minutes.

At first you will need to [register](https://twitter.com/signup) a (new) Twitter account specifiying the screen name, through which you'd like to tweet into the world. After that you are ready to apply for a developer's account and add a new Twitter developer's app [here](https://developer.twitter.com/en/apps). This is necessary for generating keys and tokens for accessing the official [Twitter API](https://developer.twitter.com/en/docs/basics/things-every-developer-should-know). Twitter asks for several information about what you want to do with your app. Writing down what the bot is all about went just fine for me. Finally it's time for coding. Make sure _node_ and _npm_ are installed on your computer with the following commands.

```
node -v
npm -v
```

After that, we are ready to setup a working folder and init a npm project with:

```npm init```

The only library that is mandatory for our project is the npm package *twitter-lite*, a tiny, full-featured, modern client / server library for the Twitter API, whose documentation you will find [here](https://github.com/draftbit/twitter-lite). It was built because existing ones [have not been recently maintained](https://github.com/desmondmorris/node-twitter), or depend on [outdated](https://github.com/ttezel/twit/issues/411) [libraries](https://github.com/ttezel/twit/issues/412). Within our working folder we create a Node.js script, which could be named "bot.js". 

```const Twitter = require("twitter-lite");
const client = new Twitter({
  consumer_key: 'xyz',
  consumer_secret: 'xyz',
  access_token_key: 'xyz',
  access_token_secret: 'xyz'
});
```

This creates a new authorized Twitter API client. All keys and secrets are available in your Twitter developer's account. 

What should the bot do exactly? Well, for example, we could filter all incoming new tweets around the world with the help of keywords or hashtags by opening up the Twitter Stream and providing some parameters, like so:

```const parameters = {
  language: "en",
  track:
    "#girlswhocode,#girlsintech,#womenintech,#womenwhocode,#momsintech,#momswhocode"
};

client
  .stream("statuses/filter", parameters)
  .on("start", response => console.log("start"))
  .on("data", async data => {
    console.log("got data", data.id_str);
  })
  .on("error", error => console.log("error", error))
  .on("end", response => console.log("end")); 
```

Instead of just logging filtered tweets we could now automatically retweet those tweets by adding:

```
const url = "statuses/retweet/${data.id_str}";
await client.post(url);
```

That's it! Just start your script with

```node bot.js```

and your bot starts firing. There are many more possibilities on how the Twitter API can be used. You would like to deploy this app? Sure, you could [deploy on Heroku ](https://devcenter.heroku.com/articles/getting-started-with-nodejs)or use a hoster like [DigitalOcean](https://www.digitalocean.com/) that could run your app in the background with *pm2*. Beware: Your secrets and keys should be stored in environment variables! A great library to do so is [dot-env](https://www.npmjs.com/package/dotenv).

Have fun!

How to: Build a Twitter bot with Node.js - fast!	

This small tutorial provides a solution to provide a download link for your website users to fetch a csv file including the data out of a PostgreSQL or lowdb database. Have fun!

This small tutorial provides a solution to provide a download link for your website users to fetch a csv file including the data out of a PostgreSQL or lowdb database. Have fun! It's also part of the series "[How To: Smart Home setup to track indoor temperatures and humidity with sensors, Raspberry Pi, MQTT, Node.js, Vue.js and Chart.js](/2019/02/11/smart-home-setup-to-track-indoor-temperatures-and-humidity-with-sensors-raspberry-pi-mqtt-node-js-vue-js-and-chart-js)"

At first we create a basic Node.js application with Express.js and setup and connect to PostgreSQL or lowdb database. Make sure your PostgreSQL database is accessable on port 5432!

```
// import Express.js
const express = require('express');
const app = express();
// import lib needed for csv download in lowdb
const jsonexport = require('jsonexport');
// connect to lowdb
const low = require('lowdb');
const adapter = new FileSync('db.json');
const db = low(adapter);
// connect to PostgreSQL db
const Pool = require('pg').Pool;
let pool;
try {
    pool = new Pool({
      user: 'postgres',
      host: 'localhost',
      database: 'whatever-db-name',
      password: 'password',
      port: 5432,
    })
    pool.query("CREATE TABLE IF NOT EXISTS posts (id VARCHAR(100) PRIMARY KEY, room INT, temp VARCHAR(30), humidity VARCHAR(30), time VARCHAR(100))");
  } catch (e) {
    console.log(e)
  }
// setup Express web app
app.listen(port, () => console.log('App listening on port ', port));
```

Then we create a new endpoint providing a csv download of the lowdb database:

```
// download CSV
app.get('/lowdb-download', function (req, res) {
  try {
    var reader = fs.createReadStream('db.json');
    var writer = fs.createWriteStream('db.csv');
    var pipe = reader.pipe(jsonexport()).pipe(writer);
  } catch (e) {
    console.log(e)
  }
});
```

Or, if you use a PostgreSQL database this snippet works:

```
app.get('/postgres-download', function (req, res) {
  try {
    var writer = fs.createWriteStream('db.csv');
    pool.connect(function (pgErr, client, done) {
      var stream = client.query(copyTo('COPY posts TO STDOUT'));
      var pipe = stream.pipe(writer);
      pipe.on('finish', function () {
        var stream = fs.createReadStream('db.csv');
        res.attachment('db.csv');
        stream.pipe(res);
      });
    })
  } catch (e) {
    console.log(e)
  }
});
```

Now start your app with `node server.js` and check your implementation on http://localhost:3000/postgres-download and http://localhost:3000/lowdb-download. Your browser should start the download automatically.

Get a CSV download out of PostgreSQL or lowdb database on Node.js	

In this short tutorial we will setup a Node.js application with a connection to a PostgreSQL database and provide data via API endpoint. 

In this short tutorial we will setup a Node.js application with a connection to a PostgreSQL database and provide data via API endpoint. It's also part of the series "[How To: Smart Home setup to track indoor temperatures and humidity with sensors, Raspberry Pi, MQTT, Node.js, Vue.js and Chart.js](/2019/02/11/smart-home-setup-to-track-indoor-temperatures-and-humidity-with-sensors-raspberry-pi-mqtt-node-js-vue-js-and-chart-js)"

At first, follow the [official online documentation](http://www.postgresqltutorial.com/install-postgresql/) on how to install a PostgreSQL database system on your OS. On a Linux machine, you might do something like this:
```sudo apt-get update
sudo apt-get install postgresql postgresql-contrib
```
This installation comes with _psql, _a terminal-based front-end to PostgreSQL. Access to the (still empty) database system is provided with:
```sudo -u postgres psql```
Create a new database with the name "tshtest", list all available databases and connect to "tsh":
```postgres=# CREATE DATABASE tshtest;
postgres=# \list
postgres=# \c tsh
```

From here you could create tables to store data, but it is also possible to do that from our Node.js application later. _So here we go:_ Our Node.js application won't do anything more than handle our database requests from a (non-existing) frontend. You can test all API calls with a client like [Postman](https://www.getpostman.com/) or even just your browser. The next code snippet provides our basic Node.js (with Express.js) boilerplate already including the [_node-postgres_ library](https://www.npmjs.com/package/pg), the propably best client for Node.js. Because we are working on a web application which makes frequent queries we use a connection pool. The easiest and by far most common way to use node-postgres is through a connection pool.
```
const express = require('express');
const app = express();
const uuid = require('uuid');
const Pool = require('pg').Pool;
const port = 3000;
app.listen(port, () => console.log('App listening on port ', port));
```

The connection pool is triggered with the following code snippet. This code also checks on every server start, if the table "posts" is already existing. If not, it will be created. Right after that we will insert a first example post. If the SQL syntax is new to you, you can check out [this great tutorial](https://beginner-sql-tutorial.com/sql.htm) to know what's going on here.

```
let pool;
try {
    pool = new Pool({
      user: 'postgres',
      host: 'localhost',
      database: 'tshtest',
      password: 'password',
      port: 5432,
    })
    pool.query("CREATE TABLE IF NOT EXISTS posts (id VARCHAR(100) PRIMARY KEY, room INT, temp VARCHAR(30), humidity VARCHAR(30), time VARCHAR(100))");
    pool.query('INSERT INTO posts (id, room, temp, humidity, time) VALUES ($1, $2, $3, $4, $5)', [uuid.v1(), 1, 30, 40, 2019-04-20], (error, results) => {
        if (error) {
          throw error
        } else {
          console.log(results);
        }
    })
} catch (e) {
    console.log(e)
}
```

It's time to open up a new endpoint on _/getData_, which will fetch all posts from the table "posts" in the database "tshtest".

```
app.get('/getData', (req, res) => {
    pool.query('SELECT * FROM posts', (error, results) => {
      if (error) {
        throw error
      }
      res.status(200).json(results.rows)
    })
});
```

Just for fun I add another endpoint _/deleteData_, which will delete all data from the database if called (be careful with that one ;)).

```
app.get('/deleteData', (req, res) => {
    try {
      pool.query("TRUNCATE TABLE posts");
      res.end('Deleted data!');
    } catch (e) {
      res.send(e);
      console.error(e);
    }
});
```

Start you web app with `node server.js` and check the endpoint http://localhost:3000/getData, which works also just right out of every browser and displays all database entries in JSON format.

Setup PostgreSQL database and API for Node.js

In this part we will build a basic dashboard displaying smart home sensor data with charts. We will go with the SPA framework Vue.js with Quasar on top: It comes with UI components in the popular Material Design, axios and some other features, that help getting started with Vue.js very fast.

> This tutorial is the second part of the series "[How To: Smart Home setup to track indoor temperatures and humidity with sensors, Raspberry Pi, MQTT, Node.js, Vue.js and Chart.js](/2019/02/11/smart-home-setup-to-track-indoor-temperatures-and-humidity-with-sensors-raspberry-pi-mqtt-node-js-vue-js-and-chart-js)" ([1](/2019/02/11/hardware-sensors-receiver-raspberry-pi-for-a-basic-tracking-tool-on-temperature-and-humidity)&nbsp;|&nbsp;[2](/2019/02/07/smart-home-sensor-data-with-mqtt-broker-mosquitto-and-a-node-js-backend-application)&nbsp;|&nbsp;3)

In this part we will build a basic dashboard displaying smart home sensor data with charts.&nbsp;We could go with whatever implementation you would like here: from vanilla HTML/CSS/JS to every framework which is suitable to our needs - which are basically doing an API call to our backend to fetch sensor data and lift them up to work nicely with a chart visualisation.&nbsp; There are also other good solutions to deal with IoT frontends like Pimatic, OpenHAB and FHEM, but let's just build this part completely on our own.&nbsp;We will go with the SPA framework Vue.js with Quasar on top: It comes with UI components in the popular Material Design, axios and some other features, that help getting started with Vue.js very fast.

## Install dependencies

Install the Vue.js ([Link](https://vuejs.org/)) and Quasar CLI ([Github link](https://github.com/quasarframework/quasar)) first!
```npm install -g vue-cli
npm install -g quasar-cli
```
Go to your project root and init a new sub project for your frontend code with
```quasar init vue-frontend```
Now start you development server on http://localhost:8080/ with
```quasar dev```
and you are ready to develop your frontend according to your likes. Quasar comes with a basic starter layout including a side navigation. However we don't need to work on this heavily and focus on the homepage, where we will build the dashboard functionality.

Go to *Index.vue* and update the basic dashboard layout. You can use static images like in my proposal and put them into the *src/assets* folder.

![Code](//images.ctfassets.net/e598mslz60uf/Yrg9Rt4esrHZGTl7B8MPa/c84ca24bab38c90ab07d7bdcd66bb042/6f3b27872fe74a6b89c0b43b5ea90265.png)

![Dashboard](//images.ctfassets.net/e598mslz60uf/1Lo30XzYL0lYDvghUaP5xv/1fab89075de0e4c0f59676e8efc458d0/973e15a752b844b89347973a9cb998dc.png)

## Fetch sensor data from Node.js backend

To fetch necessary data on initial page load we make use of Vue.js' created() function in the scripts section below the template. We insert a new function this.fetchData(); there and implement this new function in the methods' block.

```
methods: {
  fetchData() {
   this.loaded = false;
   this.$axios
    .get("http://localhost:3000/api")
    .then(response => {
       return response.data;
    })
    .then(response => {
      console.log(response);
      this.loaded = true;
    })
    .catch(e => {
      console.log(e);
      this.$q.notify({
       color: "negative",
       position: "top",
       message: "Could not fetch.",
       icon: "report_problem"
    });
  });
 }
}
```

We simply use the *axios* library ([Github link](https://github.com/axios/axios)) which Quasar included right from the setup, so we can use it globally without importing it explicitly. If this works properly you should be able to log the array of sensor data in your browser's developer tools. If there is any problem, we trigger&nbsp;the Quasar component notification and include the error message.

**Hint:** If you encounter *CORS* problems in the communication between front- and backend (e. g. "No Access-Control-Allow-Origin header is present on the requested resource.") edit your *server.js* and restart it as follows:

```
app.use(function (req, res, next) {
 res.header("Access-Control-Allow-Origin", "*");
 res.header("Access-Control-Allow-Headers", 
    "Origin, X-Requested-With, Content-Type, Accept");
 next();
});
```

## Build a line chart with Chart.js

In this part I will focus on displaying only the temperature chart to make the tutorial more comprehensable. At first we will install the npm package *vue-chartjs* [(Github link)&nbsp;](https://github.com/apertureless/vue-chartjs)which works as a practical Vue.js wrapper for Chart.js ([Link](https://www.chartjs.org/)).
```
npm install vue-chartsjs --save
```
Now we build a generic, reusable line chart component to use in the web application. Create a new file "LineChart.js" in the *src/components* folder and import the *vue-chartsjs* package. Furthermore, we will follow the basic tutorial for the package and specify a data collection prop and an options prop that will prettify our line chart later.

```
import { Line } from 'vue-chartjs';
export default {
 extends: Line,
 props: {
   datacollection: {
    type: Object,
    default: null
   },
   options: {
    type: Object,
    default: null
   }
  },
 mounted() {
   this.renderChart(this.datacollection, this.options, {responsive: true})
 }
}
```

Switch to the *Index.vue* again and include a new line chart component (html tag) in your template.&nbsp;We want to display it within the card component. Additionally we specify some properties: *v-if="loaded"* will tell the component that it should only mount, if the according data prop is true. Also, we transfer the fetched *datacollection_humidity* and *options_humidity* as our generic datacollection and options into the line chart.

![Code](//images.ctfassets.net/e598mslz60uf/2vVrqF8ABDv95EWeuxUC71/672f87e965112f2fe42ad884fa58de15/4519a16c52c64bf493739b0ca16c590f.png)

We also have to edit our fetchData(); function and transfer the fetched data as a processible JSON to the data collection prop.

```
// process the backend response and add labels and some styling for the Chart.js api  
const datacollection_humidity = {
   labels: response.map(obj => obj.time),
   datasets: [
     {
       label: "Humidity",
       backgroundColor: "#000",
       data: response.map(obj => obj.humidity)
     }
   ]
};
this.datacollection_humidity = datacollection_humidity;
// set some optional properties regarding axes and ticks
this.options_humidity = {
   scales: {
   xAxes: [
     {
       type: "time",
       distribution: "linear"
     }
   ],
   yAxes: [
     {
       scaleLabel: {
       display: true
     },
   ticks: {
     callback: function(value, index, values) {
       return value + "%";
       }
     }
    }
   ]
  }
};
```

Don't forget to add the LineChart component and the necessary "loaded" data prop in your Vue.js script section.

```
export default {
 name: "PageIndex",
 components: {
   LineChart
   },
 data() {
   return {
     loaded: false,
     };
   }
}
```

That's it! On every page reload, the web application fetches available sensor data from our backend service and will display it as a line chart. You would like to add more functionality? You can find all features we built and more (filtering, reloading, deploying, saving persistently, ..) in my [Github repository](https://github.com/gitfrosh/tiny-smart-home) for this project.

Display smart home data in a Quasar, Vue.js and Chart.js powered web application

The main problem in this part is how to setup a stable and endlessly running task on a Raspberry Pi to continuously receive the (correct!) sensor data. Secondly we want it to somehow process and transfer it to a service that works as our middleware to provide the frontend with JSON data to display.

> This tutorial is the second part of the series "[How To: Smart Home setup to track indoor temperatures and humidity with sensors, Raspberry Pi, MQTT, Node.js, Vue.js and Chart.js](/2019/02/11/smart-home-setup-to-track-indoor-temperatures-and-humidity-with-sensors-raspberry-pi-mqtt-node-js-vue-js-and-chart-js)"&nbsp;([1](/2019/02/11/hardware-sensors-receiver-raspberry-pi-for-a-basic-tracking-tool-on-temperature-and-humidity)&nbsp;|&nbsp;2&nbsp;|&nbsp;[3](/2019/02/11/display-smart-home-data-in-a-quasar-vue-js-and-chart-js-powered-web-application))

The main problem&nbsp;in this part is how to setup a stable and endlessly running task on&nbsp;a Raspberry Pi to continuously receive the (correct!) sensor data. Secondly&nbsp;we want it to somehow process and transfer it&nbsp;to a service that works as our middleware to provide the frontend with JSON data to display. MQTT is the IoT protocol to go with but how can a MQTT broker like Mosquitto work with a Node.js backend properly?

## Setup a web server backend with Node.js and Express.js

Multiple solutions would be possible here, but I decided for a Javascript Node.js backend which will be running with Express.js. Make sure _node_ and _npm_ are ready on your machine or install them first.
```
node -v
npm -v
```

Setup a project folder and a make a subfolder "server". Create a new file "server.js" within and code a basic backend service. We will upgrade its functionality later.

```
const express = require('express');
const app = express();
// test
app.get('/', function (req, res) {
 res.send('hello world!');
});
app.listen(3000, () => console.log('App listening on port ', 3000));
```

Don't forget to install the _npm_ package_ express_ in your console and start the application! (Don't know&nbsp;how Node.js with Express.js works? Check out e.g.&nbsp;[this tutorial](https://www.guru99.com/node-js-express.html).)

```
npm init
npm install express --save
node server.js
```

Go to your browser and check if your&nbsp;web server works on http://localhost:3000.

## Setup the MQTT broker Mosquitto

Why MQTT? The protocol is a lightweight publish/subscribe messaging transport solution which is very popular in the IoT field. We will use a MQTT broker as the control center to receive raw sensor data from our *rtl_433 program*, we installed in the previous chapter and forward them to our web server. Mosquitto is a common MQTT broker and is installed and tested on or Raspberry Pi with

```
sudo apt install -y mosquitto mosquitto-clients
mosquitto -v
```
The broker will be accessable to clients on mqtt://localhost:1883.

## Setup a bash script that pipes incoming data to Mosquitto

The Raspberry Pi now gets the important task to not only start *rtl_433* to decode traffic from devices that are broadcasting on 433.9 MHz manually, but to start this task on every reboot automatically. For that, we create a cronjob with the tool *crontab*, which should be installed on&nbsp;our&nbsp;system.

```crontab -h```

On your Raspberry Pi create a new file *tsh_raspberry_script.sh* (or whatever you want) in your _pi_&nbsp;home folder and make it executable from your terminal:

```chmod +x tsh_raspberry_script.sh```

After that, open the file in a text editor and add the following bash script. It will start *rtl_433* and pipe the output in JSON format to Mosquitto, where it will be published in the topic *home/rtl_344*. Don't forget to close and safe the file.

```#!bin/bash
/usr/local/bin/rtl_433 -F json -M utc ' mosquitto_pub -t home/rtl_433 -l
```

Now we can set up a new cronjob which will execute the shell script on every Raspberry Pi reboot. Open up a terminal:

```# edit crontabs of user "pi"
crontab -e
# a text editor will open and load all existing cronjobs, add
@reboot sleep 60 &&&nbsp;sh&nbsp;/home/pi/tsh_raspberry_script.sh
```

## Build a simple database with lowdb and Node.js

In development mode a very basic database will suffice our requirements, that's why I used _lowdb_ [(Github link)](https://github.com/typicode/lowdb) to store the sensor data on localhost first. Lowdb is based on a JSON file in&nbsp;our project folder. If you would like to take an eye on performance and persistence later I have built a solution with PostgreSQL too, but this is [another story](/2019/04/20/setup-postgresql-database-and-api-for-node-js).

```npm install lowdb --save```

In your _server.js_ add some code.&nbsp;Set some defaults first, which are required if your JSON file (mine is "db.json") is empty at first.

```const low = require('lowdb');
const FileSync = require('lowdb/adapters/FileSync')
const adapter = new FileSync('db.json');
const db = low(adapter);
db.defaults({ posts: [] })
 .write()
```
That's all. Now we can write into, edit and delete data within our database.

## Consume MQTT sensor data and save it to the database

We go back to our Node.js application and install the MQTT client _MQTT.js_ ([Github link](https://github.com/mqttjs/MQTT.js)) to be able to consume data that is available via Mosquitto.

```npm install mqtt --save```

With the newly installed MQTT client we are able to receive all the messages that the MQTT broker delivers over its API on mqtt://localhost:1883. We now filter them to only process and store "correct" data sets (remember: our RTL-SDR receiver found signals from multiple IoT gagdets we are not interested in).

My setup included some buffer, temperature and date parsing, basic verifying and filtering regarding incoming messages before I stored the correct Javascript Objects into the lowdb. Continue working on your _server.js_:

```const mqtt = require('mqtt');
const client = mqtt.connect(mqtt://localhost:1883);
fahrenheitToCelsius = (fahrenheit) => {
 var fTempVal = parseFloat(fahrenheit);
 var cTempVal = (fTempVal - 32) * (5 / 9);
 return (Math.round(cTempVal * 100) / 100);
}
client.on('message', function (topic, message) {
 // message is buffer
 var stringBuf = message && message.toString('utf-8')
 try {
   var json = JSON.parse(stringBuf);
   // console.log(json);
   if (json.model === 'inFactory sensor') {
     if (json.id === 91 '' json.id === 32) {
     // catch my specific sensor model
       if (json.temperature_F && json.humidity) {
       // add data to lowdb
       const time = moment.utc(json.time).tz("Europe/Berlin");
       const formattedTime = time.format('YYYY-MM-DD HH:mm:ss');
       console.log('write post');
       db.get('posts')
       .push({ id: uuid.v1(), room: json.id, temp: 
            fahrenheitToCelsius(json.temperature_F), 
            humidity: json.humidity, time: formattedTime }).write()
       }
     }
   }
 } catch (e) {
   console.error(stringBuf);
   }
})
```

That's it. Whenever the MQTT client receives sensor data it will store it in our database accordingly. You can check that in your "db.json" file in your project folder, which grows bigger and bigger during runtime. It won't delete itself on backend restart!
```{
 "posts": [
 {
 "id": "c107fc70-1f33-11e9-9b95-fbfea27c8046",
 "room": 32,
 "temp": 22.89,
 "humidity": 30,
 "time": "2019-01-23 18:24:34"
 },
 {
 "id": "6607f9f0-1f34-11e9-9b95-fbfea27c8046",
 "room": 32,
 "temp": 22.89,
 "humidity": 30,
 "time": "2019-01-23 18:29:11"
 },
 {
 "id": "16492190-1f35-11e9-9b95-fbfea27c8046",
 "room": 91,
 "temp": 22.72,
 "humidity": 35,
 "time": "2019-01-23 18:34:07"
 }
]
}
```

## Provide sensor data via REST API

Now that we have clean data in our lowdb we might want to provide them via a REST API to be consumable for a frontend or multiple frontends (smartphone app, web app, ..). We already deployed a local web server running on Node.js and Express.js and can very simply add an endpoint the provides the database data with the following code. Add it to your _server.js_!

```app.get('/api', (req, res) => {
 res.send(db.get('posts'));
});
```
Yes, that's it. Check if it is working on http://localhost:3000/api or with your favourite REST client (e.g. Postman).

* * *

Proceed to the third part of the tutorial "[Display smart home data&nbsp;in a Quasar, Vue.js and Chart.js powered web application](/2019/02/11/display-smart-home-data-in-a-quasar-vue-js-and-chart-js-powered-web-application)".

Get and process your smart home sensor data with MQTT Broker Mosquitto and a Node.js backend application

Is there a better and easier alternative to an all self made solution to build basic weather stations and home automation systems with a Raspberry Pi? Which (new) IoT hardware do we need for this setup?

> This tutorial is part of the series "[How To: Smart Home setup to track indoor temperatures and humidity with sensors, Raspberry Pi, MQTT, Node.js, Vue.js and Chart.js](/2019/02/11/how-to-smart-home-setup-to-track-indoor-temperatures-and-humidity-with-sensors-raspberry-pi-mqtt-node-js-vue-js-and-chart-js)"&nbsp;(1&nbsp;|&nbsp;[2](/2019/02/07/smart-home-sensor-data-with-mqtt-broker-mosquitto-and-a-node-js-backend-application/)&nbsp;|&nbsp;[3](/2019/02/11/display-smart-home-data-in-a-quasar-vue-js-and-chart-js-powered-web-application))

## Which (new) IoT hardware do&nbsp;we need for this setup?

**RTL-SDR USB receiver:**&nbsp;a cheap&nbsp;dongle&nbsp;that can be used as a computer based radio scanner for receiving live radio signals in your area (those gagdets receive signals from 500 kHz up to 1.75 GHz) ([Amazon link](https://www.amazon.com/dp/B00VZ1AWQA/ref=cm_sw_em_r_mt_dp_U_GkvyCb5A4PD19))

**Temperature / Humidity sensor:** an even cheaper gagdet, that sends sensor data at 433 MHz into the area (e.g. as part of a "real" wheather station) ([Amazon link](https://www.amazon.de/gp/product/B01MXEBI18/ref=ppx_yo_dt_b_asin_title_o05__o00_s00?ie=UTF8&psc=1))

**Raspberry Pi 3 Model B:** the&nbsp;small&nbsp;single-board computer&nbsp;servers as our heart and base station to receive and process sensor data, I have the Raspbian operating system installed. It could even serve as your web server later (if you are familiar with maintaining your own, but I will use a cloud service in this tutorial). ([Amazon link](https://www.amazon.com/Raspberry-Pi-RASPBERRYPI3-MODB-1GB-Model-Motherboard/dp/B01CD5VC92/ref=sr_1_3?ie=UTF8&qid=1549882307&sr=8-3&keywords=Raspberry+Pi+3+Model+B))

At first, setup your sensors whereever you like in your appartment and connect your RTL-SDR receiver with the Raspberry Pi. How to receive the raw data out of the nearby area? A little open source software will help us with that: *rtl_433* is a program ([Github link](https://github.com/merbanan/rtl_433)) to decode traffic from devices that are broadcasting on 433.9 MHz. We install it on our Raspberry Pi:

```
sudo apt-get update
sudo apt-get upgrade
# install dependencies
sudo apt-get install libtool libusb-1.0.0-dev librtlsdr-dev rtl-sdr cmake
# clone rtl_433 Git Repository
git clone https://github.com/merbanan/rtl_433.git
# change to directory
cd rtl_433/
# make build folder
mkdir build
cd build/
# compile
cmake ../
# make
make
# install
sudo make install
# test if rtl_433 was properly installed
rtl_433 -h
```

After that we test if the program detects our RTL-SDR receiver with
```rtl_433 -G```

I had some trouble with the following error: Kernel driver is active, or device is claimed by second instance of librtlsdr. In the first case, please either detach or blacklist the kernel module (dvb_usb_rtl28xxu), or enable automatic detaching at compile time._

The repository owner recommends
```sudo rmmod dvb_usb_rtl28xxu rtl2832```

in that case. If everything went well, the receiver is ready to get sensor data and *rtl_433* helps with processing, so that after a few seconds you should get signals in the nearby area (yes, even temperature sensor data of your neighbor's or sensor data of connected cars.)

![Incoming Messages](//images.ctfassets.net/e598mslz60uf/6RQK46h2ElbsYlVtZ2QlKr/0e9922f56153923a80aaf205bd54e372/11b0f646239547b7b4b115dcd2e12104.png)

![Incoming Messages (2)](//images.ctfassets.net/e598mslz60uf/1RSntS1ItVLGfSO3TRuJSO/bb8a37f4e626bd00ac4251cd0da4a624/aa1627243d4f488f9df5fa730a719d69.png)

Hurray, hardware is running!

* * *

Proceed to the second part of the tutorial "[Get&nbsp;and process your smart home sensor data with MQTT Broker Mosquitto and a Node.js backend](/2019/02/07/smart-home-sensor-data-with-mqtt-broker-mosquitto-and-a-node-js-backend-application/)".

Choose and setup hardware (sensors, receiver, Raspberry Pi) for a basic tracking tool on temperature and humidity		

This three-part tutorial explains how to setup a basic smart home web app tracking sensor data for temperature and humidity with a Raspberry Pi and web technologies like Mosquitto, Node.js, Express.js, Vue.js, Quasar and Chart.js.

> TLDR; This three-part tutorial explains how to setup a basic smart home web app tracking sensor data for temperature and humidity with a Raspberry Pi and web technologies like Mosquitto, Node.js, Express.js, Vue.js, Quasar and Chart.js.

![Tiny Smart Home](//images.ctfassets.net/e598mslz60uf/4XOFMfHT7H9FPbdUGzGe1O/b98d6f9484b9bac0d35e79e8a513d716/01741853357341038f43d5a2d33daa5a.png)

So I went on maternity this January and came up with an idea about a nice little project to do in my free time that went a little further from my usual Javascript front- und backend projects I usually do at work. I have a Raspberry Pi 3 at home I bought over a year ago and never did something useful with so I decided I wanted to track temperatures and humidity in our child's room and bedroom to a have an idea about a good indoor climate. In the end I wanted to finalize a cloud-based dashboard web app which provides the incoming sensor data in real time and available everywhere and everytime.

I wrote this three-part tutorial to track my experiences, tech choices and suggestions for you to follow and came up with a solution that comes with an easy hardware setup and some popular (and worth to learn if you are not already familiar with) web development technologies, including Node.js, Mosquitto and Vue.js.

The basic three parts will allow you to run a web application on your local machine. Nevertheless I added some more features including persistent database storing and the deployment in the cloud with Heroku. You will find these tutorials at the end of this page.
**The code base is stored on [Github](https://github.com/gitfrosh/tiny-smart-home)!**

##### [Choose and install hardware (sensors, receiver, Raspberry Pi) for a basic tracking tool on temperature and humidity](/2019/02/11/hardware-sensors-receiver-raspberry-pi-for-a-basic-tracking-tool-on-temperature-and-humidity)

I did some research on how to build basic weather stations and home automation systems with a Raspberry Pi but they were mostly no wireless solutions or they came up with too much IoT hacking/soldering and especially required a lot of electrical knowledge I do not have. The core problem I figured out was that many tutorials wanted me to build a remote sensor gagdet with radio functionality and sleep mode (e.g. with an Arduino) all on my own. So the question was: Is there a better and easier alternative to such an all self made solution and what about the receiving hardware on the Raspberry Pi?

Fortunately, there exists an easier alternative I will show you in this part of the tutorial which deals with slightly more expensive IoT gagdets but which enabled me to set up my smart home hardware in a smooth but nonetheless instructive way.

##### [Get and process your smart home sensor data with MQTT Broker Mosquitto and a Node.js backend](/2019/02/07/smart-home-sensor-data-with-mqtt-broker-mosquitto-and-a-node-js-backend-application)

The main problem in this part was how to set up a stable and endlessly running task on my Raspberry Pi to continuously receive the (correct!) sensor data. Secondly I wanted it to somehow process and transfer it to a backend/microservice/middleware, which then would provide an upcoming frontend with JSON data to display. MQTT is the IoT protocol to go with but how to set it up? How can a MQTT broker like Mosquitto work with a Node.js backend properly?

##### [Display smart home data in a Quasar, Vue.js and Chart.js powered web application](/2019/02/11/display-smart-home-data-in-a-quasar-vue-js-and-chart-js-powered-web-application)

This was somehow the easiest part, because I mainly work as a frontend engineer and know how to implement dashboard-like web app solutions in combination with backend REST API services and the like. I challenged myself with an insight into Vue.js, since I mainly used React as a SPA framework before. In search of a nice UI library I discovered Quasar, which provides a very useful CLI and UI components so that there was no need to come up with an own CSS by myself.

* * *

#####  Add more features?

I wrote some more or less standalone tutorials, which will help you to improve your existent application with some more capacities.

1.  [Setup PostgreSQL database and API for Node.js](/2019/04/20/setup-postgresql-database-and-api-for-node-js)
2.  [Get a CSV download out of PostgreSQL or lowdb database on Node.js](/2019/04/20/get-a-csv-download-out-of-postgresql-or-lowdb-database-on-node-js)

How To: Smart Home setup to track indoor temperatures and humidity with sensors, Raspberry Pi, MQTT, Node.js, Vue.js and Chart.js

In diesem Tutorial geht es darum, einen einfachen Webserver auf Node.js-Basis zu installieren und zu testen. Dieses Tutorial ist im Rahmen der Summer Schools in Bremen (Informatica Feminale) und Salzburg (ditact) entstanden.

> In diesem Tutorial geht es darum, einen einfachen Webserver auf Node.js-Basis zu installieren und zu testen. Dieses Tutorial ist im Rahmen der Summer Schools in Bremen (Informatica Feminale) und Salzburg (ditact) entstanden.

## Was ist Node.js? Was ist npm?
__Node.js__ ist eine Softwareumgebung für Javascript, welche es u.a. ermöglicht, serverseitige Javascript-Anwendungen (-> Webserver) auf einem beliebigen Betriebssystem zu programmieren.

__Wofür brauchen wir npm?__ Mit dem Node Package Manager (npm) können wir die Kernfunktionalität von Node.js über Zusatzpakete erweitern. Entwickler_innen aus der ganzen Welt stellen ihre Pakete dort kostenlos zur Verfügung.

### Los geht's!

## Node.js installieren
### Windows 7/8/10
Für Windows stellt die offizielle Node.js-Website für die jeweiligen Versionen Node.js als Download zur Verfügung: https://nodejs.org/en/download/. Lade die richtige Datei (.msi) herunter und starte den Installer mit einem Doppelklick. Der Wizard wird dich durch den sehr kurzen Installationsprozess begleiten. Wähle während der Installation die Standardeinstellungen. npm wird hier glücklicherweise gleich mitinstalliert.

### MacOS
Über die offizielle Node.js-Website kannst du den Installer (.pkg) für Node.js herunterladen: https://nodejs.org/en/download/. Starte den Installer über deinen Mac und befolge die (kurzen) Installationsanweisungen. Wähle während der Installation die Standardeinstellungen. npm wird hier glücklicherweise gleich mitinstalliert.

### Linux/Ubuntu
In Ubuntu kann Node.js über die Paketverwaltung installiert werden. Da npm nicht automatisch mitinstalliert wird, holen wir dies manuell nach.

```sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm
```

## Mit dem Terminal arbeiten / Die Installation von Node.js und npm prüfen
Mit dem Terminal können wir unser Betriebssystem textbasiert steuern. Häufigster Vorbehalt gegen das Terminal ist, dass es komplex und damit schwierig zu erlernen sei. Für einige Aufgaben ist er jedoch sehr gut geeignet, weswegen wir für dieses Tutorial / den Kurs ein wenig damit arbeiten werden. Öffne das Terminal (= Kommandozeile oder CLI oder Konsole) deines Betriebssystems:

- In __Windows 8 und 10__ geht das mit einem Klick mit der rechten Maustaste unten links im Bildschirm auf das Windows-Symbol oder mit der Tastenkombination [Windows] und [X]. Danach muss die "Eingabeaufforderung" oder die "Eingabeaufforderung (Administrator)" aus der Liste ausgewählt werden.
- In __Windows 7__ klickst du auf das Windows-Symbol links unten und suchst unter "Dateien/Programme durchsuchen" nach "Eingabeaufforderung".
- In vielen __Linux__-Distributionen öffnet sich das Terminal durch die Tastenkombination [Strg] + [Alt] + [T].
- Auf __MacOS__ führt die Tastenkombination [cmd] + [Leertaste] zur Spotlight-Suche. Dort kann nach "Terminal" gesucht und dieser ausgeführt werden.

Nun prüfen wir, ob auf unserem Betriebssystem Node.js und npm korrekt installiert wurden. Das geht mit den Terminal-Befehlen

```node -v
npm -v
```

Im besten Fall informiert dich dein Betriebssystem nun darüber, ob und in welcher Version Node.js und npm installiert sind. Falls eine Fehlermeldung erscheint, solltest du den Installationsvorgang wiederholen.

## Den Webserver einrichten / Express.js installieren

- Lege auf deinem Computer einen Ordner an, in dem du während des Kurses arbeiten möchtest. Den Ort kannst du beliebig festlegen.
- Innerhalb dieses Ordners lege zwei neue Dateien an (in Windows z. B. per Rechtsklick: "Neues Textdokument")!
- Benenne eine Datei um in "server.js", die andere in "index.html". (In Windows solltest du sicher gehen, dass sich die Dateiendung mitändert, und nicht etwa eine Datei nach dem Schema "server.js.txt" und "index.html.txt" entstanden ist!)
- Navigiere im Terminal zum neu angelegten Ordner. Der Befehl dazu lautet "cd" gefolgt vom entsprechenden Pfad. Für ein Windows-System könnte der Befehl so lauten: 

```cd C:\Users\Ulrike\Projekte\Neues-Projekt1```

- Für ein macOS-System wäre dies ein Beispiel-Befehl: 

```cd /Volumes/PROJECTS/Neues-Projekt1```

- Wenn du erfolgreich warst, wird der Pfad, in dem du dich nun befindest, der neuen Kommandozeile voran gestellt.
- Installiere in diesem Ordner das _npm_-Paket "Express.js", den de-Facto-Standard für Webanwendungen unter Node.js mit dem Terminal-Befehl

```npm install express```

- Öffne die Datei "server.js" in einem Texteditor (z. B. "Sublime") und füge diesen Quellcode ein:
    ```
    const express = require('express');
    const app = express();

    app.use(express.static(__dirname + '/dist'));

    app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html');
    })

    app.get('/about', function (req, res) {
    res.sendFile(__dirname + '/about.html');
    })

    app.listen(3000);
    console.log("server started on port 3000");
   ```
- Öffne die Datei "index.html" und füge einen beliebigen Text ein, z. B. "Hello World!". Optional kannst du eine weitere Datei "about.html" erstellen und diese mit Leben füllen.
- Jetzt müssen wir unseren Webserver nur noch starten. Im Quellcode haben wir ihn bereits angewiesen, die Datei _index.html _auszugeben.

## Den Webserver starten

Prüfe noch einmal, ob du dich in deinem Terminal im richtigen Dateipfad befindest. Wenn ja, gib ins Terminal den folgenden Befehl ein:

```node server.js```

Navigiere in deinem Browser zur URL [http://127.0.0.1:3000/ ](http://127.0.0.1:3000/)oder [http://localhost:3000/](http://localhost:3000/). Wenn alles geklappt hat, wird dort nun der Inhalt des von dir angelegten HTML-Dokuments angezeigt, also z. B. "Hello World".

In diesem Beispiel-Tutorial übernimmt unser Server das Handling der Routen (z. B. /about) für uns. Wir könnten den Server auch noch weitere Aufgaben erfüllen lassen, z. B. die Anbindung einer Datenbank.

## Den Webserver stoppen

Den gestarteten Webserver kannst du jederzeit wieder stoppen. Dann ist er nicht mehr unter der URL http://127.0.0.1:3000/ erreichbar. Im Terminal musst du dazu lediglich [Strg] + [C] bzw. [Ctrl] + [C] drücken.

Node.js installieren und einen Webserver starten

Die Sehnsucht nach verlässlichen intelligenten Agenten mit scheinbar eigener Persönlichkeit scheint groß zu sein. Wir lassen uns heute durch Apples "Siri" den Weg zeigen oder einen Restauranttisch buchen. Doch die Evolution von intelligenten Agenten ist eine Geschichte mit Höhen und Tiefen.

Die Sehnsucht nach verlässlichen intelligenten Agenten mit scheinbar eigener Persönlichkeit scheint groß zu sein. Wir lassen uns heute durch Apples "Siri" oder Microsofts "Cortana" den Weg zeigen oder einen Restauranttisch buchen. Doch die Evolution von intelligenten Agenten ist eine Geschichte mit Höhen und Tiefen. Ein berühmter Vertreter einer einfachen Form von interface agents ist Microsofts "Clippy the Paperclip" - eine tragische Figur auf dem Experimentierfeld der Künstlichen Intelligenz, der schon vor Beginn ihres Untergangs mit Häme und Spott begegnet wurde. Neue Entwicklungen versprechen innnovative agents, die sich das Internet zu Nutze machen. Das Paper beinhaltet die jeweiligen Entwicklungslinien.

*Exner, Ulrike: "Die, Clippy, die!!" Zur Evolution von User Interface Agents und aktuelle Entwicklungen bei Intelligent Personal Assistants, 2016.  [Download](https://rike.dev/2cfde365744a43028b90b8621fca16cd.pdf)


"Die, Clippy, die!!" Zur Evolution von User Interface Agents und aktuelle Entwicklungen bei Intelligent Personal Assistants

Das World Wide Web stellt über unterschiedlichste Kanäle eine Vielzahl von potentiell relevanter Information zu diversen Fragestellungen bereit. Insbesondere Unternehmen sind jedoch darauf angewiesen, stets den Überblick über technologische Neuerungen, Marktdaten und sonstige Trends zu behalten. 

Das World Wide Web stellt über unterschiedlichste Kanäle eine Vielzahl von potentiell relevanter Information zu diversen Fragestellungen bereit. Insbesondere Unternehmen sind jedoch darauf angewiesen, stets den Überblick über technologische Neuerungen, Marktdaten und sonstige Trends zu behalten. Neben der Erhebung kann auch die Verarbeitung, Analyse und Präsentation von relevanten Daten aus dem Web heute mit Web-Monitoring- Tools unterstützt werden. Die vorliegende Masterarbeit dokumentiert die Entwicklung eines Web-Monitoring-Tools zur Anwendung und Implemen- tierung für einen Engineering-Dienstleister im Automobilbereich. Zur Voranalyse werden einerseits der aktuelle Forschungsstand sowie wichtige Konzepte im Umfeld von Web-Monitoring-Technologien dargelegt. Andererseits werden als eigene empirische Forschung potentielle Nutzer über ihre Anforderungen und Erwartungen an das System in qualitativen Interviews befragt. Die daraus gewonnenen Erkenntnisse gehen im Sinne des Human-Centered-Design direkt in die Konzeption ein. In einem schlanken Feature-Driven-Development-Prozess wird ein Web-Monitoring-Tool mit Hilfe von modernen Webentwicklungstechnologien wie AngularJS, Flask und MongoDB umgesetzt. Der Prototyp wird abschließend unter Anwendung eines Nutzertests und eines Fragebogens einer summativen Evaluation unterzogen.

Exner, Ulrike: Nutzerzentrierte Entwicklung eines prototypischen Web-Monitoring-Tools, 2017. [Download](https://opus4.kobv.de/opus4-fhbrb/frontdoor/index/index/docId/2192)

Nutzerzentrierte Entwicklung eines prototypischen Web-Monitoring-Tools

Die digitalisierende Bankbranche sehnt ihn förmlich herbei: Den Durchbruch des Mobile Banking auch in Deutschland. Mobile Banking als zusätzlicher Distributionskanal wird für traditionelle Geldinstitute überlebenswichtig, um neue Kunden zu gewinnen und bestehende Kundenbeziehungen zu erhalten.

Die digitalisierende Bankbranche sehnt ihn förmlich herbei: Den Durchbruch des Mobile Banking auch in Deutschland. Mobile Banking als zusätzlicher Distributionskanal wird für traditionelle Geldinstitute überlebenswichtig, um neue Kunden zu gewinnen und bestehende Kundenbeziehungen zu erhalten. Doch die Realität scheint momentan noch eine andere: Im internationalen Vergleich vertrauen nur wenige Deutsche ihre Bankgeschäfte ihrem Handy an. Unter den älteren Bevölkerungsgruppen zeigt sich eine besonders hohe Skepsis dieser Technologie gegenüber. Um dem Phänomen des Mobile Bankings auf die Spur zu kommen, beginnt das Paper mit einer kurzen Einführung in Begrifflichkeiten zum Thema und die Einbeziehung medienpsychologischer Aspekte zur Akzeptanz innovativer Technologien. Schließlich werden einige internationale Studienergebnisse zusammengefasst, die sich mit dem Einflussfaktor Alter als Einflussfaktor auf die Akzeptanz von Mobile Banking befasst haben.

*Exner, Ulrike: Banking via Handy - Akzeptanz altersgruppenspezifisch?, 2015. [Download](https://rike.dev/06ca9125e5754d08a272cd91350ec8f7.pdf)


Hallo.

Want to get in contact?

My favourite Projects

Blog

Exploring Web3: Safe and sound starter guide (not only for software developers)

Hack the Web3: Building a Wordle on the Blockchain

How to build a friendly Social bot

Hallo.

Want to get in contact?

My favourite Projects

de enBlog

Exploring Web3: Safe and sound starter guide (not only for software developers)

Hack the Web3: Building a Wordle on the Blockchain

How to build a friendly Social bot

Blog