DEV Community: Reardon85

Zip Codes to Coordinates: Using Google's Geocoding API and PostgreSQL's Earth Distance Extension

Reardon85 — Wed, 24 May 2023 17:37:04 +0000

In this post, we're taking a look at how you can deal with geographic coordinates in your Flask-SQLAlchemy application. Specifically, we're going to convert zip codes into latitude and longitude using Google's Geocoding API, and then run some queries using PostgreSQL's Earth Distance extension. This could be pretty useful if you're developing an application that needs to work with location data (Like I currently am...).

Prerequisites

Before we dig in, here's what you need to have prepared:

Google Cloud account and Geocoding API access: You'll need an API key from the Google Cloud Console to access the Geocoding API. I should warn you this does cost 0.005 USD per each request.
PostgreSQL with Earth Distance extension: Make sure you've got a PostgreSQL database up and running, with the Earth Distance extension enabled. You can enable it by running CREATE EXTENSION earthdistance CASCADE; in your SQL terminal. You can do this in your terminal by using the PSQL Command key that your PAAS gave you. If You're using Render.com like me. It will be at the bottom of the info section in your database instance.

Converting Zip Codes to Latitude/Longitude

Let's start by converting zip codes into geographical coordinates. Google's Geocoding API is really straightforward for this. We'll create a Python function using Flask to handle this:

import requests

def get_coordinates(zip_code, api_key):
    url = f'https://maps.googleapis.com/maps/api/geocode/json?address={zip_code}&key={api_key}'
    response = requests.get(url)
    data = response.json()

    coordinates = data['results'][0]['geometry']['location']
    return [coordinates['lat'], coordinates['lng']]

This function takes a zip code and your API key as input, makes a request to the Geocoding API, and if everything goes as planned, returns the latitude and longitude for that zip code.

Doing Query Search with PostgreSQLs Earth Distance Extension

Now that we've got the latitude and longitude of this users zip code, we can now use PostgreSQL's Earth Distance extension to run query based off geographtical distance.

Assuming your sqlalchemy models are all set up correctly, we can now use the Earth Distance extension to run queries based on the geographical distance. For example, we can find all locations within a 10 kilometer radius of a certain point (The extention only works in Metric units)

def get_users_in_radius(user_id):
    user = User.query.get(user_id)
    radius = 1000
    if user:

        # Find users within the specified radius
        nearby_users = User.query.filter(db.func.earth_distance(
            db.func.ll_to_earth(user.latitude, user.longitude),
            db.func.ll_to_earth(User.latitude, User.longitude)
        ) <= radius).all()

        return nearby_user
    else:
        return None

The ll_to_earth() function is part of the Earth Distance extention that we installed on our PostgreSQL. We use it to turn latitude and longitude values into a specific point on the earth that we can then use earth_distance to figure out how far away these points are.

Bucket-loads of Fun: Setting up an AWS S3 Bucket

Reardon85 — Wed, 10 May 2023 17:50:27 +0000

Hello tech aficionados! Today, we're venturing into the exciting world of Amazon Web Services (AWS) to create an S3 bucket, configure its permissions, and use it for sharing and uploading images from an external website. Buckle up, it's going to be a fun ride!

Step 1: Creating an AWS Account and an S3 Bucket

Before we can play in Amazon's big sandbox, we need an AWS account. Head over to the AWS homepage and sign up. Once you're done signing up and logging in, you'll be greeted with the AWS Management Console. It's a bit like the cockpit of a spaceship - lots of buttons, each one more confusing than the last.

Now, we need to create an S3 bucket. S3 stands for Simple Storage Service, and it's basically Amazon's version of an infinitely expanding hard drive in the cloud. Here's how you set it up:

In the AWS Management Console, find the S3 service and click on it.
Click on "Create bucket".
Choose a globally unique name for your bucket and select a region.
Leave the other options as default for now and click on "Create bucket".

Congratulations! You've created an S3 bucket.

Step 2: Setting up Bucket Permissions

Next, we'll set up permissions so that our external website can interact with the bucket. This involves configuring the bucket's CORS (Cross-Origin Resource Sharing) policy. Here's how:

Go to your newly created bucket and click on the "Permissions" tab.
Click on "Cross-origin resource sharing (CORS)".
In the CORS configuration box, paste in the following configuration and then click "Save":

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "[Insert the host Url of your site]"
        ],
        "ExposeHeaders": []
    }
]

This configuration will allow only your site to interact with your bucket.

Step 3: Setting Up an S3 Bucket Policy

While the CORS configuration allows browsers to make requests to your bucket from different domains, the bucket policy specifies who can access your bucket and what actions they can perform. It's crucial to have a well-configured bucket policy for secure and controlled access to your S3 bucket.

To set up a bucket policy:

Go back to your bucket and click on the "Permissions" tab.
Click on "Bucket Policy".
Here, you'll see a JSON editor where you can define your bucket policy. For example, if you want to make your bucket public (which is not recommended for most use cases due to security concerns), you could use the following policy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
        }
    ]
}

Remember to replace YOUR_BUCKET_NAME with the actual name of your bucket.

This policy allows anyone ("Principal": "") to perform the s3:GetObject action, which basically means they can read any object in your bucket. The "Resource" specifies which objects in your bucket the policy applies to. In this case, it applies to all objects ("/").

If you're planning on having your website add images as well, you will need to add additional permissions for actions for put objects. But Make sure that you place stricter limitations on who's can perform these actions aka the "Principal"

You can specify different permissions for different users, restrict access based on IP address, deny certain actions, and much more. Be sure to understand the implications and use them wisely!

And there you have it! You now have an AWS S3 bucket set up with CORS and bucket policies. With this setup, you're well on your way to managing image storage for your website. Remember, AWS is a robust tool with a wide range of configurations and customizations, so continue exploring and experimenting. Happy coding!

Using ASCII Art in Python

Reardon85 — Wed, 19 Apr 2023 18:00:55 +0000

ASCII art is an ancient and mystical art form that uses characters from the ASCII character set to create wacky images. If you're feeling bored and want to spice up your programming life, why not try using Python to create some hilarious ASCII art designs?

Now, let's take a look at the ASCII character set. It's a group of 128 characters that includes letters, numbers, and symbols. But forget all that, because we're going to be using characters like ampersands, bananas, and ice cream cones to create our masterpieces!

To create ASCII art designs using Python, we'll need to use the built-in print() function, which is basically like a printer for your computer screen. We'll also need to use some string concatenation and repetition, which is just a fancy way of saying we're going to stick a bunch of characters together and repeat them until our design is complete.

Here's an example of how to create a simple ASCII art design using Python:

print("(\__/)")
print("(='.'=)")
print("('')_(")")

This code will output a cute little bunny made of parentheses, equal signs, and underscores:

(\__/)
(='.'=)
('')_('')

But that's just the beginning! We can create even more outrageous designs by combining characters and strategically using loops. Here's an example of how to create a Triangle:

for i in range(5):
    print(" " * (4 - i) + "/" + "  " * i + "\\")
print(" " * 2 + "========")

This code will output of simple triangle using symbols like forward slashes, backslashes, and equal signs:

   /\
  /  \
 /    \
/      \
  ======

If you want to take your ASCII art to the next level, you can also use external libraries like pyfiglet to create ASCII art from text. Pyfiglet is a Python module that provides a way to generate ASCII art from text using ASCII fonts. Here's an example of how to use pyfiglet to create ASCII art from text:

import pyfiglet

text = "LOL"
ascii_art = pyfiglet.figlet_format(text)
print(ascii_art)

This code will output the text "LOL" in ASCII art using a fancy ASCII font:

 _     ___  _     
| |   / _ \| |    
| |  | | | | |    
| |__| |_| | |___ 
|_____\___/|_____|

In conclusion, if you're feeling like a wild and crazy programmer, give ASCII art a try with Python! With the built-in print() function, string concatenation and repetition, and external libraries like pyfiglet, you can create hilarious and ridiculous ASCII art designs that will make your friends laugh and your enemies run away in fear.

Building a Persisting User Login with React.

Reardon85 — Thu, 30 Mar 2023 17:31:44 +0000

Can one build a Persisting User Login feature using only React and JSON-Server as a local REST API?

.....Yeah Obviously, otherwise I wouldn't be bothering to write this Blog about it. But should you? Probably not, there's a bunch framework/libraries that have been painstakingly built and tested by countless people to insure that they can securely do so with out risking users personal information or passwords being compromised. Still sometimes reinventing the wheel can be fun!

Writing a basic login feature isn't too difficult, assuming that you're already familiar with using React/Javascript to do Post and Get requests to a json-server database. Create a users array of obj on your db.json server with email as the unique identifier. Create a form with text inputs for e-mail, username and password. Hash the password, do some basic checks like insuring e-mail doesn't already exist, put it all together in an object Post it to /users and BAM you've got your account registration down!

But this blog isn't about creating user login feature it's about how to insure that once your user has logged in it persists. So how do you get a user to not only login but remain logged in when your React State is instantly wiped clean anytime a user refreshes the page or closes the tab?

The answer is that you need some way for the website to identify you as a unique user, so that it's still able to recognize you even if your react state is cleared on a refresh. Accomplishing this is as simple as creating a new array of objects in your db.json file called "status". Now when ever a user successfully logs into their account, your app will do a POST request to "status" with a id key that uniquely identifies the user (We'll get to that later) along with key/value pairs associated with their account. Now we just add an open bracket useEffect hook in the parent component that uses this unique identifier to do get request to "status" anytime the page loads to see if the client is logged in. If they are it can re-assigns it's user information to a useState variable. When the user wants to log out we can create a logout button with a onClick handler that does Delete request to status. The only question is what can we use to uniquely identify the client? Lets starts off with some quasi bad ideas before we get to the good idea!

Using IP Address as a Unique Identifier

Well every networked device has a globally unique M.A.C address so when it comes to finding a truly unique Key then you can't do much better than this. But no JavaScript is too high a language for it to gain access to something like this. But perhaps something similar might work, like an I.P address?

The problem with this is that multiple users on the same network can share the same I.P. address. So it can't guarantee that we'd be able to uniquely identify all of our users. Which could mean that our site could mistakenly give User B access to User A's credentials if they share the same I.P address. So its safe to say this would be a bad idea! But since this is more of a fun thought experiment. Let's proceed!

The first question we want to ask is if we can't pull a M.A.C address from the client's system using javascript then how do we pull their I.P. Address? The answer to this is you can't! But you can write javascript that sends a fetch request to a free api that will tell you what your I.P. Address is. Personally I recommend using:
https://api.ipify.org?format=json

Now by implementing a simple fetch request within an empty bracket useEffects hook, we can pull the clients IP address anytime they refresh or load the app and save it to a useState variable! Now that we have our unique identifier we can use it to do a fetch to localhost:3000/status to see if the user is logged in anytime the window is opened or refreshed! And if we added other key/value pairs associated with the clients browser such as "screen.width" we could help prevent situations where two people on the same I.P. address access the site. But even this wouldn't eliminate all the situations. So lets see if their isn't a better way to do this.

Local Storage

Yep, now we get to the real solution, Local Storage! What is Local storage? It's exactly what it sounds like, data that your browser stores locally. And unlike session storage, that your browser immediately erases anytime the window is closed, local storage will persist until the client chooses to erase it. We can access local storage with javascript by using window.localStorage and then calling its methods setItem(), getItem(), removeItem(). Now when the user logs in you can have them generate a random unique identifier key and use it as the id in your POST request to "status" and then place it into their localStorage with setItem(user, identifierKey). Now we use getItem(user) inside an empty bracket useEffect followed by a get request to "status" and we've got a persistent login. All in all this isn't too different from what most websites do with cookies.

Passing by Reference

Reardon85 — Thu, 09 Mar 2023 17:19:57 +0000

In JavaScript we are presented with two types of data types. Primitive types and object types. One of the main distinctions between the two is that one is immutable and the other isn't. But another important distinction between them is that objects are passed by reference while for all practical purposes primitive data types are pass by value.

As far as basic concepts go this isn't too hard to grasp. Basically any time you're assigning a variable to another variable or even passing a variable as an argument to a function parameter. You're creating a new space in memory and then creating a copy of the value and assigning it to that space. But rather than explain it let's use some actual code:

function passValue(b) {
    b++;
    console.log(`Inside the function: b = ${b}`);
}

let a = 2;
console.log(`Before the function: a = ${a}`);

passValue(a);

console.log(`After the function: a =${a}`);

The Output:

Before the function: a = 2 
Inside the function: b = 2 
After the function:  a = 2

But when it comes to assigning objects or passing them as arguments to functions things get a little more complex. Lets see a similar example but this time with two arrays:

function passReference(b) {
    b[1] = 3;
    console.log(`Inside the function: b = ${b`);
}

let a = [2, 0, 0];
console.log(`Before the function: a = ${a}`);

passValue(a);

console.log(`After the function: a =${a}`);

The Output:

Before the function: a = 2, 0, 0   
Inside the function: b = 3, 0, 0   
After the function:  a = 3, 0, 0

So what exactly is happening here? Lets think of our variables as envelopes that hold a value, envelope 'A' and envelope 'B'. When we assign them a value lets think of it in terms of us taking out a sheet of paper writing a value on it and placing it into the envelope. So When we go 'A' = 10. We are writing the number 10 on some paper and placing it into envelope 'A'. When we write 'B' = 'A' we are looking at the paper inside 'A' that says 10 and then we are writing the number '10' on a new sheet of paper and placing it into 'B'. So while both are equal to 10, we can write what ever we want on the paper inside 'A' with out impacting the paper inside 'B'.

Now when it comes to Objects, if we decide to assign an array to envelope 'A'. Instead of writing '[2, 0, 0]' on the sheet of paper we put into envelope 'A', we are instead writing down the address to a P.0 Box where the object's value can be found and putting that inside 'A'. So that means when we go ahead and say 'A' = 'B', we aren't writing the value of the array '[2, 0, 0]' on the new sheet either. Instead we are taking out that sheet of paper inside 'A' and copying down that same P.0 Box address that's on it onto a new sheet of paper and placing it into 'B'.

What this means is that in order to access the elements of the array '[2, 0, 0]' we have to drive all the way to P.0 box and if we decide to modify one of the elements it modifies it for both 'A' and 'B' since they are both pointing towards the the same address. This is essentially what it means to pass a value by reference in javascript but instead of assigning both variables the value of a P.0 Box where the object can be find you're assigning them the value of a memory address on your computer where the object is.