Search icon
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
Full Stack Web Development with Raspberry Pi 3
Full Stack Web Development with Raspberry Pi 3

Full Stack Web Development with Raspberry Pi 3: Build complex web applications with a portable computer

By Soham Kamani
€22.99 €15.99
Book Aug 2017 214 pages 1st Edition
eBook
€22.99 €15.99
Print
€28.99
Subscription
€14.99 Monthly
eBook
€22.99 €15.99
Print
€28.99
Subscription
€14.99 Monthly

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now

Product Details


Publication date : Aug 3, 2017
Length 214 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781788295895
Vendor :
Raspberry Pi
Category :
Table of content icon View table of contents Preview book icon Preview Book

Full Stack Web Development with Raspberry Pi 3

Getting Started on the Raspberry Pi

The Raspberry Pi has become hugely popular as a portable computer, and for good reason. When it comes to what you can do with this tiny piece of technology, the sky's the limit. Back in the day, computers used to be the size of entire neighborhood blocks, and only large corporations doing expensive research could afford them. After that, we went on to embrace personal computers, which were still a bit expensive, but, for the most part, could be bought by the common man. This brings us to where we are today, where we can buy a fully functioning Linux computer, which is as big as a credit card, for under $30. It is truly a huge leap in making computers available to anyone and everyone.

The marvel of the Raspberry Pi, however, doesn't end here. Its extreme portability means we can now do things that were not previously possible with traditional desktop computers. The GPIO pins give us easy access to interface with external devices. This allows the Pi to act as a bridge between embedded electronics and sensors and the power that Linux gives us. In essence, we can run any code in our favorite programming language (which can run on Linux) and interface it directly to outside hardware quickly and easily. Once we couple this with the wireless networking capabilities introduced in the Raspberry Pi 3, we gain the ability to make applications that would not have been feasible to make before this device existed.

Web development and portable computing have come a long way. A few years ago, we couldn't dream of making a rich, interactive, and performant application that runs on the browser. Today, not only can we do that, but we can also do it all in the palm of our hands (quite literally). When we think of developing an application that uses databases, application servers, sockets, and cloud APIs, the picture that normally comes to mind is that of many server racks sitting in a huge room. In this book, however, we are going to implement all of that using only the Raspberry Pi.

In this chapter, we will go through the concept of the Internet of Things and discuss how web development on the Raspberry Pi can help us get there. Following this, you will also learn how to set up your Raspberry Pi and access it from our computer.

We will cover the following topics:

  • The Internet of Things (IoT)
  • Our application
  • Setting up the Raspberry Pi
  • Remote access

The Internet of Things

The web has, until today, been a network of computers exchanging data. The limitation of this was that it was a closed loop. People could send and receive data from other people via their computers but rarely much else.

The IoT, in contrast, is a network of devices or sensors that connect the outside world to the internet. Superficially, nothing is different: the internet is still a network of computers. What has changed is that now, these computers are collecting and uploading data from things instead of people. This now allows anyone who is connected to obtain information that is not collected by a human.

The IoT as a concept has been around for a long time, but it is only now that almost anyone can connect a sensor or device to the cloud, and the IoT revolution was hugely enabled by the advent of portable computing, which was led by the Raspberry Pi.

A brief look at our application

Throughout this book, we are going to go through different components and aspects of web development and embedded systems. These are all going to be held together by our central goal of making an entire web application capable of sensing and displaying the surrounding temperature and humidity.

In order to make a properly functioning system, we have to first build the individual parts. More difficult still is making sure all the parts work well together. Keeping this in mind, let's take a look at the different components of our technology stack and the problems that each of them solves:

The sensor interface - perception

The sensor is what connects our otherwise isolated application to the outside world. The sensor will be connected to the GPIO pins of the Raspberry Pi. We can interface with the sensor through various different native libraries, which we will be looking into in the later chapters.

This is the starting point of our data. It is where all the data that is used by our application is created. If you think about it, every other component of our technology stack exists only to manage, manipulate, and display the data collected from the sensor.

The database - persistence

Data is the name we give to raw information, which is information that we cannot easily aggregate or understand. Without a way to store and meaningfully process and retrieve this data, it will always remain data and never information, which is what we actually want.

If we just hook up a sensor and display whatever data it reads, we are missing out on a lot of additional information. Let's take the example of temperature: what if we wanted to find out how the temperature was changing over time? What if we wanted to find the maximum and minimum temperatures for a particular day, or a particular week, or even within a custom duration of time? What if we wanted to see temperature variation across locations? There is no way we could do any of this with only the sensor. We also need some sort of persistence and structure to our data, and this is exactly what the database provides for us.

If we structure our data correctly, getting the answers to these questions is just a matter of a simple database query.

The user interface - presentation

The user interface is the layer that connects our application to the end user. One of the most challenging aspects of software development is making information meaningful and understandable to regular users of our application.

The UI layer serves exactly this purpose: it takes relevant information and shows it in such a way that it is easily understandable to humans. How do we achieve such a level of understandability with such a large amount of data? We use visual aids, such as colors, charts, and diagrams (just like how the diagrams in this book make the information easier to understand).

An important thing for any developer to understand is that your end user actually doesn't care about any of the backend stuff. The only thing that matters to them is a good experience. Of course, all the other components serve to make the users experience better, but it's really the user facing interface that leaves the first impression, and that's why it's so important to do it well.

The application server - middleware

This layer consists of the actual server-side code we are going to write in order to get the application running. It is also called middleware. In addition to being in the exact center of the architecture diagram, this layer also acts as the controller and middle-man for the other layers.

The HTML pages that form the UI are served through this layer. All the database queries that we were talking about earlier are made here. The code that runs in this layer is responsible for retrieving the sensor readings from our external pins and storing the data in our database. As you will see in later chapters, the middleware can also be further broken down into individual components, each with its own function.

Setting up our Raspberry Pi

So far, we've been reading a lot of theory. Now let's actually get our Raspberry Pi working. Before we get started, here is a list of things you need at the bare minimum to get your Pi up-and-running:

  • The Raspberry Pi (duh)
  • An SD card (8 GB or higher)
  • A micro USB power source (many phone chargers are of this type so you might have one already)
  • A keyboard and mouse
  • Any screen or display with an HDMI port and cable
  • A laptop (optional)

Have everything? Awesome! Let's move on...

There are lots of operating systems and lots of ways to install them on the Pi. However, the easiest way by far is to use the official NOOBS installer. NOOBS, which stands for New Out Of Box Software, is the officially recommended way to install a fresh OS on the Pi for newcomers, and it's terribly easy.

Download the NOOBS archive from official website (https://www.raspberrypi.org/downloads/noobs/). Once the archive is downloaded, unzip it into a new folder anywhere on your computer.

If you are using NOOBS v2.3.0, the directory structure, once you unzip the archive, should look like this:

BUILD-DATA
INSTRUCTIONS-README.txt
RECOVERY_FILES_DO_NOT_EDIT
bcm2708-rpi-0-w.dtb
bcm2708-rpi-b-plus.dtb
bcm2708-rpi-b.dtb
bcm2708-rpi-cm.dtb
bcm2709-rpi-2-b.dtb
bcm2710-rpi-3-b.dtb
bcm2710-rpi-cm3.dtb
bootcode.bin
defaults
os
overlays
recovery.cmdline
recovery.elf
recovery.img
recovery.rfs
recovery7.img
riscos-boot.bin

Most of these files have no meaning to us except the INSTRUCTIONS-README.txt file. Open this file in any text editor (such as Notepad), and you will find instructions on how to format your SD card.

After formatting your SD card, transfer all these files and folders to the root directory of the SD card. As described in the instructions, all files and folders should be copied in such a way that the INSTRUCTIONS-README.txt file is at the root.

Once your SD card is ready and loaded, connect everything to your Pi:

  1. Insert the SD card into the slot.
  2. Using the HDMI cable, connect the HDMI port of the Pi with the external display.
  3. Connect the keyboard and mouse to the USB ports of the Pi
  4. Connect the power cable to the Micro USB port of the Pi

Once all the connections are made, switch on the power supply to your Pi. You should now see the monitor light up. After a few boot screens, you should see a friendly little GUI that will lead you to this:

It's here that you can select the OS you want in order to install to your Pi. For this book, we will be working with Raspbian.

Raspbian is a port of the Debian Linux OS, that has been optimized for the Pi. It is currently the most popular OS that runs on the Pi. Follow the installation wizard, and you should be done with the installation in a few minutes.

Once your installation is done, your Pi will boot into the OS, and you should now see a complete desktop on your monitor screen, something that looks like this:


Congratulations! You have successfully set up your Raspberry Pi computer. Amazingly, there are a lot of things you can do like you're using a regular desktop computer. The Raspberry Pi, along with the Raspbian OS, comes with a variety of programs, such as a text editor, a file explorer, and even an HTML5 web browser!

Remote access

The setup we have here is perfectly sufficient for moving on with the rest of the chapters. You now have a fully functioning Raspberry Pi running and now have the capability to run a fully functioning web application on it.

Yet, for those who prefer programming on their laptop (and most people do), it would make sense to be able to remotely access and program on the Raspberry Pi using our computer of choice.

Fortunately for us, it's really easy to do this. Sometimes, I even prefer remotely programming my Pi from my laptop because it's much easier and more convenient to do that.

To access our Pi, we are going to use SSH (secure shell) to access its shell from any computer on the network:

  1. First things first, make sure your Pi is connected to the same network as your computer. If you are using a wired router, connect the Pi through it using a LAN cable:
A better option, though, is to connect the Pi wirelessly through WLAN.

If you already have a wireless network running, connect your Pi to the network by clicking on the wireless network icon on the desktop:

Select your wireless network and connect to it.

  1. The next step is to find the private IP address of your Pi. Open the Terminal application by clicking on the icon, as shown in the following screenshot:

Execute the ifconfig command in the Terminal window. The ifconfig command, if executed with no other arguments, will display the status of all network interfaces on the device. You should get an output that looks like this:

Your private IP address can be found by looking at the inet addr field (as highlighted in the preceding figure). Depending on the interface you are connected to, this address can appear either under wlan0 (if you are connected using Wi-Fi) or eth0 (if you connect with a LAN cable). My IP address, in this case, is 192.168.0.10.

  1. We need to now enable the SSH server on our Pi. This is the service that allows us to access our Pi's command line remotely. To do this, open the system configuration by running the following command:
     sudo raspi-config

You should see a GUI-like configuration screen, as follows:

Go to the Interfacing Options section, and then go to P2 SSH.

You will then need to give a confirmation to start the SSH server.

  1. All that's left is to finally connect to the Raspberry Pi using our laptops or desktops.

If you are working on a Windows machine, you will need to download and install PuTTY (http://www.putty.org/), which is a free SSH client for Windows. Enter the IP address of the Raspberry Pi, which we obtained in the previous step, with the port as 22 (the default SSH port).

If you are using a Unix system (Mac or Linux), you can ssh into the Pi by entering the following command:
ssh pi@192.168.0.10

Remember to replace 192.168.0.10 with your own Pi's IP address.

In both cases, you will be asked for a password. The default username for the Raspbian OS after installation is pi, with the default password being raspberry. If you are able to establish an SSH session with the Pi, you should see its Command Prompt:

You can now remotely access your Raspberry Pi device from any computer on the network. Awesome!

What's even more awesome is that there is no need to connect any peripheral device to the Pi anymore. That means no mouse, no keyboard, and no monitor required! All you need is the power supply, and with SSH, you're good to go!

As I stated earlier, you need not go through the hassle of remotely accessing the Pi from your own computer. The Pi is a perfectly good standalone computer on its own. Many of your favorite text editors can also be run on the Pi, which means that you can write and execute code on the same Raspberry Pi device.

Summary

We are just warming up! In this chapter, we got a brief introduction to the concept of the Internet of Things. We then went on to look at an overview of what we were going to build throughout the rest of this book and saw how the Raspberry Pi can help us get there.
The next section showed us how to get up and running with our Pi by installing and running the Raspbian OS.

Finally, you learned how to make life easier by being able to access the Pi remotely through our desktop or laptop.

This chapter essentially forms the base for us moving forward. It is important to make sure that you get the installation right, as we are going to rely solely on the Raspberry Pi's environment for the execution of our code. Our laptop is simply going to assist us in writing the code.

In the next chapter, we will dive deep into the web development stack and look at how each layer plays its role and how we can build them it forward.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • ?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.

Description

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.

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 systems

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now

Product Details


Publication date : Aug 3, 2017
Length 214 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781788295895
Vendor :
Raspberry Pi
Category :

Table of Contents

13 Chapters
Preface Chevron down icon Chevron up icon
Getting Started on the Raspberry Pi Chevron down icon Chevron up icon
Getting Up-and-Running with Web Development on the Raspberry Pi Chevron down icon Chevron up icon
Running a Node Server on the Pi Chevron down icon Chevron up icon
Extracting Information from the GPIO Pins Chevron down icon Chevron up icon
Retrieving Sensor Readings from the Server Chevron down icon Chevron up icon
Creating a Web Page to Display Sensor Data Chevron down icon Chevron up icon
Enhancing Our UI - Using Interactive Charts Chevron down icon Chevron up icon
SQLite - The Fast and Portable Database Chevron down icon Chevron up icon
Integrating SQLite into Our Application Chevron down icon Chevron up icon
Making our Application Real Time with Web Sockets Chevron down icon Chevron up icon
Deploying our application to Firebase Chevron down icon Chevron up icon
Using Firebase APIs to Update Our Application Chevron down icon Chevron up icon

Customer reviews

Filter icon Filter
Top Reviews
Rating distribution
Empty star icon Empty star icon Empty star icon Empty star icon Empty star icon 0
(0 Ratings)
5 star 0%
4 star 0%
3 star 0%
2 star 0%
1 star 0%

Filter reviews by


No reviews found
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.