Book Image

Full Stack Web Development with Raspberry Pi 3

By : Soham Kamani
Book Image

Full Stack Web Development with Raspberry Pi 3

By: Soham Kamani

Overview of this book

Modern web technology and portable computing together have enabled huge advances in the Internet of Things (IoT) space,as well as in areas such as machine learning and big data. The Raspberry Pi is a very popular portable computer for running full stack web applications. This book will empower you to master this rapidly evolving technology to develop complex web applications and interfaces. This book starts by familiarizing you with the various components that make up the web development stack and that will integrate into your Raspberry Pi-powered web applications. It also introduces the Raspberry Pi computer and teach you how to get up and running with a brand new one. Next, this book introduces you to the different kinds of sensor you’ll use to make your applications; using these skills, you will be able to create full stack web applications and make them available to users via a web interface. Later, this book will also teach you how to build interactive web applications using JavaScript and HTML5 for the visual representation of sensor data. Finally, this book will teach you how to use a SQLite database to store and retrieve sensor data from multiple Raspberry Pi computers. By the end of this book you will be able to create complex full stack web applications on the Raspberry Pi 3 and will have improved your application’s performance and usability.
Table of Contents (13 chapters)
2
Getting Up-and-Running with Web Development on the Raspberry Pi

Migrating the frontend assets

The first part of moving to firebase is migrating our client-side files, which includes all of the HTML, CSS, and client-side JavaScript files we were serving earlier.

Our files are not going to be served on our application server anymore, and we will not be using its APIs anymore. In order to clean things up, we are going to remove the contents of all our API-invoking functions that were there in the client-side script, such as fetchTemperature, fetchHumidity, fetchHumidityHistory, fetchTemperatureHistory, fetchHumidityRange, and fetchTemperatureRange.

The resultant script.js file will look like this:

    const temperatureCanvasCtx = document
       .getElementById('temperature-chart')
       .getContext('2d')

    const temperatureChartConfig = {
      type: 'line',
      data: {
        labels: [],
        datasets...