Business Data Extractor with Google Places API, Next.Js, and Node
In a previous article, we used C# to scrape Craigslist gigs to find freelance developer jobs. In this tutorial, we’ll be building a local business data extractor with Node and Next.js. We can use this tool to find local businesses we can work with.
Installing Node and VS Code
Setting Up Our Project
For our front-end, we’ll be using Next.Js along with Material UI. I have created an empty folder, opened it in VS Code, opened the integrated terminal (terminal > new terminal), and ran the following command:
Follow the prompts and fill in whatever is applicable.
Then run the following command:
npm install --save next react react-dom express axios google-places-web @material-ui/core
And, one last command:
npm install nodemon --save-dev
package.json and add the following under
"dev": "nodemon server.js"
Next, we’ll create our Express server. In the root of our application, add a server.js file. This is where all the logic for our Google Places API will live. This accomplishes two things. First, it allows us to use the Places API without exposing our API key and second, it helps us avoid CORs issues.
Now, we’ll create a pages directory and add a new file called
index.js . One of the convenient features of Next.js is that it automatically creates routes for our application. It does this by taking what we put in the pages directory and generating routes based on those files.
The index.js file in our pages directory acts as the starting point/homepage for our application. If we were to add a blog.js file it would create a /blog route.
Google Places API Access
In order to get our data, we’ll be using the Google Places API. Luckily, Google has a step-by-step tutorial on how to get an API key that we’ll be using later in this article: https://developers.google.com/places/web-service/get-api-key.
Creating the Application Layout
Now that we have our basic project structure set up, lets set up our basic application skeleton. We’ll start with a header and a global CSS file. I’ll create a components directory and add one file to it called header.js. I will also create an assets directory and add a file to it called styles.
Now in your pages directory, create another file called: _app.js. Next.js will automatically recognize this file. This will help us keep our layout consistent throughout the whole app. You can read more about this file at their docs: https://nextjs.org/docs/advanced-features/custom-app
Next, we’ll add another file to the pages directory called _document.js. Be careful with the naming as this is another file that Next.js automatically detects.
There are two reasons we’re adding this. The first is that Material UI and Next do not play nicely together on the initial page load as it is server-side rendered (SSR). The second is that we need access to the <Head> of the page to load the material type font. You can read more about the document page at https://nextjs.org/docs/advanced-features/custom-document
The last step is to code out our index.js file to display as the home page. We’ll have a simple form on it so users can add a business type, zip code, and a button to submit. Under our form, we’ll add a table to display the results from our search.
Extracting Business Data with Node
To extract business data, we’ll be using the Google Places API we set up access to earlier. To get our data, we’ll use Google’s API.
At the root of the project create a folder called lib. Inside of the lib folder, add a file called google-places.js. We’ll be using this as a service to make a post request to the express server.
Now, inside of our server.js file, we’ll create a function to get the data we need from the Google Places API. Under our global variables, we’ll add a few constants to hold some variables.
const googleApiKey = 'YOUR_API_KEY';const googlePlacesBaseUrl = 'https://maps.googleapis.com/maps/api/place';const fields = 'name,formatted_address,formatted_phone_number,website'
Now inside of our app.prepare then block we’ll make the calls to the Google Places API.
That’s it! Now we can run our program. Enter a business type, zip code and press the submit button. After a few seconds, the table below should populate with local business information.
You can find a GitHub repo for this project here: https://github.com/TheDiligentDev/BusinessExtractor