DEV Community: The Holistic Technologist 👩🏻‍💻

Building Community Resource Web-Apps with Google Maps API

The Holistic Technologist 👩🏻‍💻 — Thu, 09 Jun 2022 21:50:53 +0000

Hello beautiful people!

In this post, I’ll be giving an overview on utilizing Google Cloud’s location services APIs to build a web-app that enables users to find resources near them.

Since the pandemic, there has been a lot more emphasis on what has always been true for people of color- our communities keep us safe. Community rallies when we need support, mutual aid, and care. I’ve noticed Google docs, static web-pages, and other forms of resource sharing platforms pop up as a result of more people seeking a variety of services.

For something like a national database or communities with different types of resources, using Google Cloud APIs can create a more dynamic way of creating, querying, and displaying data.

📌 Description of app: users can enter their location and see resources in their area / within a specified radius pinned on a map. They can click on each pin to view the resource and also filter by resource type / categories.

Building with the MERN Stack

The project uses the MERN stack: a web development framework made up of the stack of MongoDB, Express.js, React.js, and Nodejs.

For the main purpose of this blog, I will be only covering the Google APIs and what they do. I realized in the middle of making this tutorial it’s way too long to code along so I will be breaking up the code’s main functionalities further in the coming weeks!*

Google Cloud APIs & What They Do

Places API
This API autocompletes addresses in an input so users are able to select their location, if it is within Google’s Places library. This is helpful in ensuring we have the correct, formatted address we need to query the next API and it’s an easy way for users to input their information!

Input provides suggestions and auto completes the option that users select

Geocode API
This API converts addresses into coordinates, and vice versa. This is used in the code when the user inputs their location and also when you post a resource, so that we are able to check if the coordinates are within a specified range of one another.

📌 The great thing about building with the MERN stack is that there are node modules we can use that make it easy to implement these APIs. I was able to quickly convert the user’s location into coordinates by importing “react-geocode” and using its built-in methods.

//import component
import Geocode from "react-geocode";

//set API key
Geocode.setApiKey(process.env.REACT_APP_GOOGLE_API_KEY);

//convert from address(userLocation) to coordinates (userCoords)
Geocode.fromAddress(userLocation).then((res) => {
      let userCoords = res.results[0].geometry.location;
      setCoordinates(userCoords);
    });

Maps JavaScript API
This API displays a Google Map with “Markers” pinned, using the resource’s coordinates. “InfoWindows” display information when users click on the Markers. Map, Markers, and InfoWindow components are imported from google-maps-react npm package.

Note: Resources that are within the user’s radius are calculated through a separate algorithm, not built-in to Google Maps.

If you sign up for a Google Developer account, you will receive $300 of developer credits for 90 days, which is plenty of time to test your app! You will not be charged and your app will not make API calls once your trial runs out.

Why is this important?

While this is only the first step in providing someone with resources and care, there are plenty of other use cases utilizing this as a template / base. With more developers utilizing larger platforms- there’s hope that technology will be built with us, for us. Can’t wait to see what you dream up!

Happy coding 👾

Ellie

I would like to take a moment to thank organizers, specifically Black women / femmes / gender non-conforming folks. Our collective liberation deeply tied to the work that you do and the ways you show up. Thank you. May you be protected and safe. May the burden of teaching and emotional labor not fall entirely on you. Wishing you rest and ease. Wishing you softness.

You can view the code here if you’d like to start building: codebase on Github

For more instructions on setting up, please visit the blog post hosted on my website.

Pseudocode Like a Badass: Breaking Down Problems and Figuring Out What They’re Asking For

The Holistic Technologist 👩🏻‍💻 — Tue, 03 May 2022 17:19:44 +0000

Hello beautiful people!

In this post I’ll share some tips on breaking down coding challenges using pseudocode*. It also includes a video of me working through a newbie-friendly coding challenge on Codewars!

As someone who has worked with over 100 emerging software engineers, one of the common blockers I’ve seen is that folks get paralyzed when initially presented with a coding challenge or project. They believe that they don’t know how to solve the problem or the task feels too big. I remind them that they don’t have to climb the whole mountain, just try to take the next step.

My approach to strengthening this skill is centered around communication. Language is not only a way to express what we think or feel, but also can be a tool for shaping the way we relate to what we’re doing and to develop patterns in our learning. Asking yourself an excessive amount of questions can help you get better at asking the right questions, to lead to the right answers.

I highly recommend TALKING OUT LOUD through this process- whether its to yourself, rubber duck, or another dev. Programming is very similar to learning a new language. It’s one thing to study but fluency comes from having conversations, exchanging ideas, and figuring out how to communicate our ideas better.

Pseudocode is a plain description of the steps in a coding problem or algorithm.

Using P.R.E.P to Dissect Coding Challenges

The objectives of pseudocode are: to get your mind to think about a problem in layman’s terms, lay a foundation to build your code on, and get past the initial fear of starting. I ask myself questions and write down every single thought or idea I have relating to the problem- to begin with what I know. Take what resonates. 😃

Note: Examples will be in Javascript

📍 One method we introduce to our students at Resilient Coders is: P.R.E.P, which stands for Parameters, Return, Examples, and Pseudocode.

Below is a set of questions I’ll start with when solving a coding challenge:

Parameters: What are the parameters of the function?

What data type(s) are they?
What are the constraints?
How will I be working with those parameters / what do I need to do with them?
if numbers: will most likely have to do some kind of operation
if arrays: loop through them
if objects: work with key:value pairs or its properties
I sometimes will think about edge cases here as well such as empty parameters, special characters, etc.

Return: What will the function return?

Will I mutate the parameter and return it or return a something new?
💡 use clues from the problem i.e ‘return a new array of even numbers’
it may be helpful to store the return in a new variable

Examples: Understanding the expected return

Coding challenges will often provide an example but it would be helpful to create 2-3 examples of your own to think through the parameters and returns.

Pseudocode: Steps to code

This is where I’ll try to create a step by step guide to solve the problem, starting with what I know.

Write a function
Declare a variable
Loop through the array
If the element is... (write conditional statements)
Return x variable

Look for action words in the the problem to break up the sentences and use that as your guide. i.e “take the array”, “if it is”, “then do this” = 3 smaller steps to take rather than ONE big step
Look for keywords in the problem to give you clues on what methods to use i.e “filter” or “new array” to me indicate I may have to use Array.filter() or Array.map(), respectively

side plug: check out my array methods cheatsheet!

From there, it’s a process of asking “what’s next?” over and over again. After this step, what do you want to happen? It’s not important how many steps there are left or if the steps aren’t linear. We’re trying to create a blueprint and get as specific as possible. The more you can clearly communicate your issue or blocker, hopefully it will be easier to Google or ask for help when you’re stuck!

Pseudocode in Action

📍 Here is a video of how I use P.R.E.P to solve this codewar: Complete the function that takes a list of numbers (nums), as the only argument to the function. Take each number in the list and square it if it is even, or square root the number if it is odd. Take this new list and return the sum of it, rounded to two decimal places.

Pseudocoding a Coding Challenge Using P.R.E.P - ellidelaluna

ellidelaluna.wistia.com

Closing

While I don’t believe that coding challenges during technical interviews are reflective of what someone has to offer in a SWE role, I do think they’re helpful while learning how to code and implementing larger concepts.

Sometimes the next steps won’t make sense or come to you until you start writing code- and that’s just part of the process! As you continue to practice breaking down problems, I hope you’ll find the questions and systems that work best for you.

Tune in next time for tips on architecting single projects and applications!

Happy coding 👾

Ellie