Forem: Andrew Sverdrup

Building Your First React Website

Andrew Sverdrup — Wed, 17 Jul 2019 14:03:35 +0000

React is one of the most popular web frameworks out there. It has been growing steadily in popularity for years, passing Angular for the first time in the 2019 Stack Overflow developer survey.

This post will show you how to create your own React website in just a few minutes. If you're interested in learning more after completing this tutorial, checkout the Beginning React course I just created on Next Tech to further improve your React skills.

For now, let's dive right into building a website with React!

Prerequisites

To complete these steps you'll need to have the Node Package Manager (npm) installed. If you don't have it installed yet, head on over to https://www.npmjs.com/get-npm to download and install npm.

This will also install npx which we'll use to run create-react-app.

Create React App

Create React App is an excellent way to quickly get a React website up and running. Create React App was created by Facebook (the same company that created React!). In their docs, they describe it as:

Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

Knowing that Create React App is supported by the creators of React is a huge plus. Let's use it to get started with our website!

Run the following command to create your site:

npx create-react-app hello-react

Note that it may take a couple minutes for this command to complete.

Viewing the React website

Next, run the following commands to start the React development server:

cd hello-react
npm start

At this point a browser tab should open showing your React site. If it doesn't, visit http://localhost:3000 in your favorite browser to see your React site!

Updating the site

Now, let's make a change to update the site. Open the hello-react/src/App.js file, then replace the following line:

Edit <code>src/App.js</code> and save to reload.

with

My first React website!

If you open the web page again you'll see that it updated without you having to refresh the page! Live reloading is one of the awesome features that Create React App configures for you.

Creating a React Component

Next, we'll create a new React component. First, create a folder in the src folder named components. Then create a file called HomepageImage.js in the src/components folder. This file will hold our new homepage image component.

We'll create this component by adding the following code to the HomepageImage.js file:

import React from 'react';

function HomepageImage() {
  const url = 'https://cdn.filestackcontent.com/XYrHCaFGRSaq0EPKY1S6';
  return (
    <img src={url} style={{width: 650}} alt='Image of Golden Gate Bridge' />
  );
}

export default HomepageImage;

Then, in App.js, replace

<img src={logo} className="App-logo" alt="logo" />

with

<HomepageImage />

We also need to import the component at the top of App.js by adding the following code to the top of the file:

import HomepageImage from './components/HomepageImage'

Since we removed the image of the React logo, you can then remove this import for the logo as well:

import logo from './logo.svg';

The final App.js file should look like this:

import React from 'react';
import './App.css';
import HomepageImage from './components/HomepageImage'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <HomepageImage />
        <p>
          My first React website!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Now, open http://localhost:3000 again in your browser. If everything is working, you should see the following page:

Congratulations on creating your first website using React 🎉!

Next steps

This tutorial was a quick introduction to creating web pages with React. If you want to gain a better understanding of React so you can build awesome sites using it, checkout the course I just released that teaches React!

Have you built a site with React? Feel free to share your URL or a link to your project on GitHub in the comments below to show it off!

Thanks for reading,

Andrew, Software Engineer @ Next Tech

Special thanks to Maarten van den Heuvel for taking the photo of the Golden Gate Bridge used in this post!

How to use the OpenWeatherMap API with Python

Andrew Sverdrup — Wed, 22 May 2019 01:51:25 +0000

OpenWeatherMap is an online service that provides access weather data, including current weather data, forecasts, and historical data. Developers can use their API (application programming interface) to make requests and incorporate the returned data into their website or app.

In this video you'll learn how to get the temperature, wind speed, humidity, and weather status using the Python OpenWeatherMap library, which provides an interface to the OpenWeatherMap API.

You'll get to use the Python programming language, a real application programming interface (API), and (if you'd like) an online coding environment!

We'd love to hear what you think of the video, and if you have any ideas for other videos you'd like to see. We'll be making many more in the weeks to come!

Now, without further ado, let's code!

How to use the OpenWeatherMap API with Python

Andrew Sverdrup — Wed, 06 Feb 2019 16:53:10 +0000

In this article we’ll explore the powerful OpenWeatherMap API, which allows you to access and use weather data in your programs. It can be used to display information such as the temperature, wind, and humidity, for the current weather and for the forecasted weather.

We’ll use the Python programming language and an awesome library called Python OpenWeatherMap (PyOWM) to make it easier to use the OpenWeatherMap API in Python.

This article is based on an interactive course I released on Next XYZ. The course has Python and the PyOWM library preinstalled and lets you use both directly from your browser. If you want to learn even more about PyOWM , you can check out the course and get started for free!

Setting Up Your Environment

To run the code snippets in this article you’ll need to have Python and the pyowm library installed (install instructions for pyowm can be found here).

Once you have this installed, you can open up a Python shell from your command line (usually using python or python3, depending on which version of Python you're using) and use it to run the commands below.

Getting your OpenWeatherMap API Key

Once you have your environment setup, the next step is to get your free API key from the OpenWeatherMap website.

After you’ve signed up on OpenWeatherMap’s website, you’ll see this at the top of the page:

Click on "API keys" and you’ll see the API key.

When you work with the the examples below, you’ll need to replace <api_key> with this API key.

Weather Conditions

Now that you have your API key, let’s check the weather! First we’ll start by checking if there are any clouds in the five-day forecast for Los Angeles. Here’s the code to do that:

import pyowm
owm = pyowm.OWM('<api_key>') # TODO: Replace <api_key> with your API key
la = owm.three_hours_forecast('Los Angeles, US')
print(la.will_have_clouds())

Let’s break this down. We start by importing the pyowm library, then we authenticate using an API key. The authenticated connection to the API is stored in the owm variable.

Next we use the three_hours_forecast() method to get the forecast for a specified location (in this case, Los Angeles) and store it in the la variable. Note that the three_hours_forecast() method returns a five-day forecast with weather data sampled every three hours.

Now that we have the weather object, we can call the will_have_clouds() method on it to check if there will be clouds! Within the pyowm library, this will check the weather at each three-hour interval and if any weather sample indicates there will be clouds, the method will return true, otherwise it will return false.

We can also use PyOWM to see if it will rain, be foggy, or check for other common weather conditions. OpenWeatherMap has data from all around the world as well. For example, let’s take a look at the weather in London:

import pyowm
owm = pyowm.OWM('<api_key>') # TODO: Replace <api_key> with your API key
london = owm.three_hours_forecast('London, GB')
print(london.will_have_rain())
print(london.will_have_fog())

Awesome! With just a few lines of code you can get and display some amazing information in your program.

Current Temperature

Now let’s take a look at how to get the current temperature:

import pyowm
owm = pyowm.OWM('<api_key>') # TODO: Replace <api_key> with your API key
sf = owm.weather_at_place('San Francisco, US')
weather = sf.get_weather()
print(weather.get_temperature('fahrenheit')['temp'])

As you might guess from the use of 'fahrenheit' in the above code, you can also request the data in Celsius by passing 'celsius' to the get_temperature() method.

Sunrise and Sunset Times

Another cool thing you can do with PyOWM is request and display the sunrise and sunset times. The get_sunrise_time() and get_sunset_time() methods can be called to get this info. There is a catch when using these methods though- they return the time in unix time by default (e.g., 1542800608). Passing the timeformat='iso' parameter converts the time to a more human-readable format (e.g., 2018–11–21 21:16:54+00). Also, the times are in the GMT timezone (in the Next XYZ course we cover how to convert the times to a specific timezone).

Here’s an example of getting the sunrise and sunset times:


import pyowm
owm = pyowm.OWM('<api_key>') # TODO: Replace <api_key> with your API key
boston = owm.weather_at_place('Boston, US')
weather = boston.get_weather()
print(weather.get_sunrise_time(timeformat='iso')) # Prints time in GMT timezone
print(weather.get_sunset_time(timeformat='iso')) # Prints time in GMT timezone

Wrapping Up

If you enjoyed this post and want to learn more about using Python OpenWeatherMap to access weather data, check out the course on Next XYZ, which goes more in-depth into how to use PyOWM. It also includes interactive tasks and quizzes which will help you master the material in the course. By the end of it you’ll have created a weather GUI just like the image below!

Have any questions or comments? Just leave a note below!

Thanks for reading, and happy coding!

ActionChat to spread positive energy and motivation!

Andrew Sverdrup — Fri, 25 May 2018 23:58:56 +0000

What I built

ActionChat is an iOS and Android chat app that specializes in spreading positive energy! Its easy to use. Simply select a time to chat and at that time your chat window will open for five minutes. Spread and receive as many positive messages as possible in those five minutes.

The intended use for this app is to set it for a time in the morning just after you wake up. Then you get access to the chat for five minutes and get flooded with positive energy to help you start your day off right! So what are you waiting for? Download ActionChat today! Special shoutout to Pusher for powering the chat functionality with their awesome Channels API!

Demo Link

This app is published on Expo. Download their client app to run any expo app on your phone. The link to ActiveChat is: https://expo.io/@andrewsverdrup/active-chat

Link to Code

The code is located on GitHub here: https://github.com/AndrewSverdrup/ActionChat

Tech stack

Pusher Channels API
- Powers the chat functionality
React-Native
- Mobile app framework
Expo
- Mobile app SDK to simplify cross-platform app creation
Create React Native App
- Boilerplate to get started with React-Native and Expo
Google Cloud Functions
- For Pusher Channels Authentication endpoint (b/c serverless is cool)
- My cloud function code can be found here: https://github.com/AndrewSverdrup/ActionChatCloudFunction

ActionChat to start your day off right!

Andrew Sverdrup — Sun, 20 May 2018 06:48:45 +0000

Announcing ActionChat, a mobile app where you are surrounded by like-minded people who inspire each other to make the most of the day!

I often hear that the key to a productive day is having a solid morning routine. When people talk about morning routines, they usually mention exercising, a shower, meditation, a cup of coffee, and reviewing the day's tasks. This is a great way to start the day, but many people struggle to get into their routine. The goal of this app is to allow people to chat with each other first thing in the morning to motivate each other to take control of their day!

I think Pusher Channels will be a great API for this app. I've done some tutorials with Firebase in the past, but I'm always on the lookout for the best tools out there. I'm looking forward to trying out Pusher Channels and making an awesome app!

Tech stack

Stay tuned for updates!

Thanks for reading,

Andrew