Full Stack Web Development with Raspberry Pi 3

Soham Kamani

• Publisher: Packt Publishing
• Year: 2017
• eBook ISBN: 9781788290418
• Edition: 1
• Topic: Computer Science
• Subtopic: Hardware
• Index: Computer Science

Discover how to build full stack web applications with the Raspberry Pi 3About This Book• Leverage JavaScript, HTML5, and Cloud APIs to create visual representations and interactive web pages.• Learn to install and use a Node.js-based web framework to develop Raspberry Pi 3-powered web applications.• A step-by-step guide that will cover from setting up a embedded system to developing embedded, device-powered interactive web applications.Who This Book Is ForThis book is aimed at hobbyist, enthusiasts, and developers eager to develop embedded device-powered web applications. Prior programming experience with JavaScript, HTML5, and Node.JS will be beneficial.What You Will Learn• Get up and running with your Raspberry Pi• Go full stack! Learn about the end-to-end development process for web applications, right from the OS up to the actual HTML web interface• Discover that JavaScript is one of the fastest growing languages today, and is the only language that can be used both on a browser and server. This book will empower you to develop in a complete JavaScript stack• See that the IoT is everywhere!Connect your application to the outside world. Make use of sensors in your Raspberry Pi to give your application an edge, and unleash the full power of the Internet of Things• Build a rich UI with beautiful charts and data visualizations that can run on any browser• Make your software data-driven. Learn how to utilize SQLite to collect and analyze data from multiple systemsIn DetailModern 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.Style and approachStep-by-step instructions on developing a full stack web application and deploying it to the Cloud.

Enhancing Our UI - Using Interactive Charts

An important thing to note during the development of any application is that the experience of the user is paramount. In the end, all we are really doing when we make applications is valuing our users' time. If we manage to save the user some effort in thinking or understanding some piece of data, we know we are moving in the right direction.

In the previous chapter, this is exactly what we were focusing on by combining the temperature and humidity readings into a single interface and, after that, by highlighting the relevant pieces of information through the modification of size and color by using CSS.

In this chapter, we will be continuing with the concept of user experience improvement by introducing advanced UI elements such as charts, which will help us interpret and understand the data even further.

Here's what we will be covering in this chapter:

• Introducing the the Chart.js library
• Building HTML5 charts using the Chart.js library
• Enhancing our server to provide consumable responses
• Injecting our sensor data into our chart

Considerations when implementing complex features

When it comes to building complex features in any software application, it often boils down to two options:

• Building each feature from scratch, thoroughly testing and integrating it into your application
• Using an existing library that has already taken care of the preceding point

Each option has its own trade-offs. If we decide to implement a feature and build it from scratch, we will have full control over what happens, and can customize it the way we like without any dependency. However, we must also take into consideration the time and effort that we will have to spend in building it. Even after spending months, there may still be scenarios and optimizations that we did not think of. These will, of course, be fixed as time passes, but this is time that could be spent elsewhere.

In contrast, we have numerous libraries available in the open source ecosystem at our disposal. Many smart people have spent time to develop code that we can reuse for our own purposes...

Table of contents

• Title Page
• Copyright
• Credits
• About the Author
• About the Reviewers
• www.PacktPub.com
• Customer Feedback
• Preface
• Getting Started on the Raspberry Pi
• Getting Up-and-Running with Web Development on the Raspberry Pi
• Running a Node Server on the Pi
• Extracting Information from the GPIO Pins
• Retrieving Sensor Readings from the Server
• Creating a Web Page to Display Sensor Data
• Enhancing Our UI - Using Interactive Charts
• SQLite - The Fast and Portable Database
• Integrating SQLite into Our Application
• Making our Application Real Time with Web Sockets
• Deploying our application to Firebase
• Using Firebase APIs to Update Our Application