DEV Community: Jaspreet kaur

React Native - Create an autocomplete search bar with Google Places autocomplete

Jaspreet kaur — Sat, 06 May 2023 07:13:49 +0000

For my last project, I created a React Native app for checking weather conditions powered by Open weather API. Open weather has different APIs to show current weather, hourly weather, weather forecast for 5 days and so on. The API can be called using latitude, longitude for any place Eg-
https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}
To make things easier, they also have built-in API requests by city name and other options as well Eg-
https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}

Now to make this API work, all we need to do is get the city name from the search bar.

Search bar
A simple Search bar can be created using TextInput component in React Native and setting the state for place. By default, this search bar will not autocomplete the search input. I wanted to create a search bar with an autocomplete feature to add more convenience for the user. Now, there were some other options apart from google autocomplete component, but Google autocomplete library for react native was quite easier to understand and implement.

The Google Autocomplete search bar can be created by following the below steps-
1. Download the react native google places autocomplete library-

Run `npm i react-native-google-places-autocomplete`

link

2.Create the Google Places API key-
If you are new to creating Google API keys, no need to panic, it's quite simple, you can check out the documentation.
Go to Google Cloud Console and select API & Services, then go to Enabled APIs & services:

For next steps you can follow the below video, it will be easier to understand -

You need to enable Places API and Maps JavaScript API in Google Cloud Console
One thing to pay attention to is, all above steps can only be accomplished when you update your billing information. Don’t worry, you won’t be charged right away, all APIs have different pricing ranges and google also gives free credit as well which should be sufficient if you're using it for your personal projects. Google makes it compulsory for you to enable billing for your project before you can use the Places API or any other API. you can check the pricing and billing info here and here too

For easy understanding of how billing works you can go on Google Maps Platform

Here you will see that a $200 credit is given to you for free every month, but if you exceed this limit then you will be charged. So you need to keep a track of your API calls per day or you can add a limit to your per day calls. Based on $200 credit you can check how many calls are free, by checking on the calculator slider provided on the same page. There are different APIs with different price ranges, choose the API you are working with to check allowed calls by setting the price range to $200, It's easy to check. For a deeper understanding please go to the FAQ section on this page.

It's always better to get assured of any kind of billing information by going through their documentation. I strongly recommend this.

3.Hiding the API key -
Once you have created the key you need to hide it, to avoid any kind of misuse of the API key created by you. Afterall, your calls are limited right? and nobody likes sudden surprises since you have linked your billing info while creating this key.

One way is by adding Google recommended restrictions to your API key-

Google strongly recommends that you restrict your API keys by limiting their usage to only those APIs needed for your application. Restricting API keys adds security to your application by protecting it from unwarranted requests.

The second way of hiding the key, is not to use the key directly in your code but hide it in the .env file-If you put the key directly in your code and push it to github it will be visible to all and it can be misused. (This is only applicable to personal projects that won’t be released on app stores).

Download npm i babel-plugin-inline-dotenv in your react native project. Check the npm library here

Replace your babel.cofig.js file with below code:



module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ["inline-dotenv",{
        path: '.env' 
      }]
    ],
  };
};

Now create a .env file in the root directory and add your API keys there for eg:
API_KEY= your copied api key

You can use it in your code as:
key = process.env.API_KEY

4.Create a search bar with google autocomplete-
Use the useState hook to set the state for place.To understand the structure of the data received as a result of our place selection, just console.log the data.
Then set the place to the city name received from data.



import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const GooglePlacesInput = () => {
const [place, setPlace] = React.useState(' ')

return (
    <GooglePlacesAutocomplete
      placeholder='Search'
      onPress={(data, details = null) => {
       fetchDetails={true}
        console.log(data, details);
        setPlace(data.structured_formatting.main_text)
      }}
      query={{
        key: process.env.API_KEY,
        language: 'en',
      }}
    />
  );
};

5.Style your search bar with some CSS:
You can checkout the Styling section in here
GooglePlacesAutocomplete can be easily customized to meet the required styles of your app. Pass styles props to GooglePlacesAutocomplete with style objects for different elements.



<GooglePlacesAutocomplete
    placeholder='Enter Location'
    minLength={2}
   autoFocus={false}
    returnKeyType={'default'}
    fetchDetails={true}
    styles={{
    textInputContainer: {
      backgroundColor: 'grey',
    },
    textInput: {
      height: 38,
      color: '#5d5d5d',
      fontSize: 16,
    },
    predefinedPlacesDescription: {
      color: '#1faadb',
    },
  }}
placeholder='Search'
      onPress={(data, details = null) => {
       fetchDetails={true}
        console.log(data, details);
        setPlace(data.structured_formatting.main_text)
      }}
      query={{
        key: process.env.API_KEY,
        language: 'en',
      }}  />

Conclusion
In this article, we learnt how to create a Google Autocomplete search bar, create a Google place API key, how to hide the key, and use the GooglePlacesAutocomplete component into the code along with some CSS. Hope this will help you create your own search bar with autocomplete feature.

Locate users on Google map in React App!

Jaspreet kaur — Fri, 13 Jan 2023 19:05:31 +0000

While I was working on my project, which is like an online service providing platform, I had to show some user related details including user's location too (based on the address provided by the user while signing in to my website) to the service provider.

For this project I used React js for frontend and rails for backend.

My backend has a users table with address, state, & zip columns along with other columns about user details. While creating an account user will share these address details.

Now, we have the address but we can't locate address directly on the map , you need coordinates for that. Below steps will help converting the address into coordinates and eventually show it on the google map.

Getting started,

Install google map react => npm install --save google-map-react
Then, get the particular user details for whom you want to show the location. You can get it either by fetching the api ("users/:id") or through the props from other components. That depends on the way your application is designed and how you want to code.
After that below code will help you get the coordinates. With this code you don't need to store the latitudes & longitudes in the database. It will dynamically convert the user address provided into coordinates. You just need to set the state for latitude, and longitude.
And inside useEffect you need to pass dependency array with latitude & longitude state values. This will ensure that the fetch runs any time dependency value changes.
Since we don't want to show only 1 user's location but for all whenever required. Hence, we need this dependency which ensures whenever the user details changes it will dynamically locate it on map.

Please note, here we are using google API key as well, make sure to secure/hide your API key before pushing your code to your GitHub.

import React, { useEffect, useState } from 'react'
import GoogleMapReact from 'google-map-react'

export default function SetCords ({user}) {
  const [lat, setLat] = useState()
  const [lon, setLon] = useState()
  const key = 'Your Google API key'
  let url = `https://maps.googleapis.com/maps/api/geocode/json?address=+${user.address},+${user.state},+${user.zip}&key=${key}`

useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(res => {
        if (res.status === 'OK') {
          console.log('Cordinates'+ JSON.stringify(res))
          setLat(res.results[0].geometry.location.lat)
          setLon(res.results[0].geometry.location.lng)
        } else if (res.status === 'ZERO_RESULTS') {
          alert(
            'Unable to process this location. Please revise location fields and try submitting again.'
          )
        }
      })
  },[lat, lon])

Next, you need show the above coordinates on map. Follow below code to show the map and marker on the map.

const renderMarker = (map, maps) => {
    let marker = new maps.Marker({
      position: {lat: lat, lng: lon},
      map,
      title: 'User Location'
    })
    return marker;
  };

  return (
        <div style={{ height: '100vh', width: '100%' }}>
          <GoogleMapReact
            bootstrapURLKeys={{ key: key }}
            center={{lat: lat, lng: lon}}
            zoom={10}
            yesIWantToUseGoogleMapApiInternals= {true}
            onGoogleApiLoaded={({ map, maps }) => {
              renderMarker(map, maps)
            }}
          >
          </GoogleMapReact>
        </div>
    )

Overall code looks like this:

import React, { useEffect, useState } from 'react'
import GoogleMapReact from 'google-map-react'


export default function SetCords ({ user }) {
  const [lat, setLat] = useState()
  const [lon, setLon] = useState()
  const key = 'Your Google API key'
  let url = `https://maps.googleapis.com/maps/api/geocode/json?address=+${user.address},+${user.state},+${user.zip}&key=${key}`
  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(res => {
        if (res.status === 'OK') {
          console.log('Cordinates' + JSON.stringify(res))
          setLat(res.results[0].geometry.location.lat)
          setLon(res.results[0].geometry.location.lng)
        } else if (res.status === 'ZERO_RESULTS') {
          alert(
            'Unable to process this location. Please revise location fields and try submitting again.'
          )
        }
      })
  },[lat, lon])

  const renderMarker = (map, maps) => {
    let marker = new maps.Marker({
      position: {lat: lat, lng: lon},
      map,
      title: 'User Location'
    })
    return marker;
  };

  return (
      <div>

        <div style={{ height: '100vh', width: '100%' }}>
          <GoogleMapReact
            bootstrapURLKeys={{ key: key }}
            center={{lat: lat, lng: lon}}
            zoom={10}
            yesIWantToUseGoogleMapApiInternals= {true}
            onGoogleApiLoaded={({ map, maps }) => {
              renderMarker(map, maps)
            }}
          >
          </GoogleMapReact>
        </div>
      </div>
    )
}

Hope, this helps anyone who is new to google maps and want to convert address stored in the database into coordinates to locate it on the map.

Fetch within Fetch !

Jaspreet kaur — Fri, 16 Dec 2022 18:37:00 +0000

For my last project, I had to display some information for which I had to fetch requests within fetch request.

As you can see, in my database structure, I had a project data which has a user_id related to that project and tasks that belongs to that project. This information in the database is being collected from 3 different tables projects, users, and tasks using association and serialization.
(Just for information, I am using ruby on rails for backend and react for frontend).

Below is the data I wanted to display. As you can notice, I wanted to display user name (Assigned member) instead of user_id and related tasks content.

Now, in order to achieve above, I had to work with fetch requests in such a way that it gets the user data for the user_id related to that particular project as well as tasks for that project.

In code below,

First its fetching the particular project data and setting the project state to that project.
In order to get the tasks, setting the projectTask state to project.tasks (this will give us the tasks array, you can console.log to check ) within that fetch request. And then you can display content inside return using tasks.content .
Now for the member info, we can only get the user_id from the current data structure, so in order to get the name we need to fetch the particular user's data which is related to the project being fetched(fetch(/users/${project.user_id})),

If you fetch users outside the project fetch request, it will give you unrelated user data which is not relevant to that project since that will be an independent fetch request not related to any project. So for a particular user's info, you need to fetch inside the project's fetch since there you can grab that project's id and user_id related to project.
This will fetch you the users' data of the user_id in that specific project and you can use user.name to display the name. This is just an example. Check the code below -

function DetailedProjectView (){
    const [project,setProject] = useState({});
    const [projectTasks, setProjectTasks] = useState([])
    const [user, setUser] = useState ({})
    const { id } = useParams();

    useEffect (()=> {
        fetch (`/projects/${id}`)
        .then (res=> res.json())
        .then (project => {
            setProject(project);
            setProjectTasks(project.tasks);
            console.log(project.tasks)
            console.log(project.user_id)
            fetch (`/users/${project.user_id}`)
            .then (res=> res.json())
            .then (user => setUser(user))
        })},[id]);

return (
   <> 
    <Card width={'100%'} align='center'>
        <CardHeader>
            <Heading size='md'>{project.project_title}</Heading>
        </CardHeader>
        <CardBody>
            <Text>{project.detail}</Text><br></br>
            <Text fontFamily={"cursive"}><b>Assigned Member: </b></Text>
            <Text>{user.first_name}</Text><br></br>
            <Text fontFamily={"cursive"} ><b>List of Tasks:</b> </Text>
            <OrderedList>
                {projectTasks.map((task) => {
                    return (
            <ListItem key={task.id}>{task.content}</ListItem>
             )})}
             </OrderedList>
        </CardBody>
    </Card>     
    </>
)}

Hope, this helped someone who is a newbie like me to the coding world! When i was working on this problem, I couldn't find relevant answers on google. So, I thought to write this in my blog and help someone who is still learning to code like me. There must be for sure better ways to do this but this is what worked for me at that time.

Undo a specific migration in Ruby!

Jaspreet kaur — Mon, 28 Nov 2022 07:06:15 +0000

In Ruby, usually if you want to alter the table which you created using the command Eg. "bundle exec rake db:create_migration NAME=create_games", and then "bundle exec rake db:migrate", you need to create a new migration, where you can add or change the columns.

But there is another way how you can alter the table without creating a new migration.

Check the migration status by running below in your terminal.

bundle exec rake db:migrate:status

This will show you status of all migrations you created.
If the status is up, that means this migration is active: it's been run, and has updated the database successfully!

database: db/development.sqlite3

 Status   Migration ID    Migration Name
--------------------------------------------------
   up     20210719113216  Create games
   up     20210719113221  Create reviews
   up     20221110080300  Create users

Now, for eg. if you want to change the games table , you need run the command below, where VERSION= 'Migration ID' from the status.

rake db:migrate:down VERSION=20210719113216

database: db/development.sqlite3

 Status   Migration ID    Migration Name
--------------------------------------------------
  down    20210719113216  Create games
   up     20210719113221  Create reviews
   up     20221110080300  Create users

This will change the status from active to inactive (down), plus it will remove the table from database and schema too,
Check your schema file, there is no games table -

Now you can edit the table in the create_games migration, save and run-

bundle exec rake db:migrate

This will create a new table with all the changes in the database and schema.

Create a simple Quiz using Ruby!

Jaspreet kaur — Fri, 04 Nov 2022 18:36:05 +0000

I am new to coding, and it's been a week I have started learning Ruby. For practicing the concepts I have learnt so far, I did a quiz exercise. As a beginner, I feel until & unless you start coding actually, you might always be in doubt if you have understood the concepts thoroughly or if you can implement your leanings confidently. Doing these small exercises can make your concepts clearer.

So lets begin constructing a simple multiple choice quiz in ruby -

Step 1 >>

Create a class Quiz.
Inside this class - Initialize question and answer attributes

class Quiz 
    attr_accessor :question, :answer
    def initialize(question, answer)
        @question=question
        @answer= answer
    end 
end

Step 2 >>
After you create the class, you can write the questions you want to ask along with the answer choices. Each question will be assigned to a variable.

question1= "How many sides does a square have?\n(a) 2\n(b) 4\n(c) 6"
question2 = "When it's raining what do you need?\n(a) A parachute\n(b) A teapot\n(c) An umbrella"
question3= "What sea creature has 8 legs?\n(a) An octopus\n(b) A dolphin\n(c) A crocodile"

Step 3 >>

Create an array of questions.
Inside this array we will create new question instances or objects using our Quiz class (Quiz.new).
Since we have initialized question and answer attributes above, we can pass these attributes to our new instances.
Each question is a new instance/object which will have unique question (questions that we created ) and answer( the correct choice) attribute.

Now we have an array that stores all the questions for our quiz with correct answers.

questions= [
    Quiz.new(question1,"b"),
    Quiz.new(question2,"c"),
    Quiz.new(question3,"a")
]

Step 4 >>

Next we need to run the Quiz.
For this we need to create a method that will run our quiz and calculate the score.
This method should be able to go through each question in the array and ask the user that particular question, get their answer and check if that answer is correct or not.

def run_quiz(questions)
    answer=""
    for item in questions
        puts item.question
        answer= gets.chomp()
    end 
end

In the code above, we are passing questions array to the run_quiz method.
We created an answer variable with (""), This basically will store the user's answers.
Next we create a loop to iterate through each item in the questions array, and prints the question for user. (item.question), we called the question attribute on item which will display the question(question1/ question2/ question3)for the current item we are looping through.
Then we are getting user's answer (answer= gets.chomp()) (.chomp() basically removes the new line that gets entered when users click enter).

Step 5 >>

Find the Score.
Add a new score variable with 0 initial value.
With the help of if statement find out if your answer is correct or not. If correct add 1 to the score each time.

def run_quiz(questions)
    answer=""
    score=0
    for item in questions
        puts item.question
        answer= gets.chomp()
        if answer==item.answer
            score+=1
        end 
    end 
    puts ("Your Score is " + score.to_s + "/"+ questions.length().to_s)
end

Step 6 >>
Finally , call the run_quiz method with argument of questions.
Overall the code looks like below -

class Quiz 
    attr_accessor :question, :answer
    def initialize(question, answer)
        @question=question
        @answer= answer
    end 
end 

question1= "How many sides does a square have?\n(a) 2\n(b) 4\n(c) 6"
question2 = "When it's raining what do you need?\n(a) A parachute\n(b) A teapot\n(c) An umbrella"
question3= "What sea creature has 8 legs?\n(a) An octopus\n(b) A dolphin\n(c) A crocodile"

questions= [
    Quiz.new(question1,"b"),
    Quiz.new(question2,"c"),
    Quiz.new(question3,"a")
]

def run_quiz(questions)
    answer=""
    score=0
    for item in questions
        puts item.question
        answer= gets.chomp()
        if answer==item.answer
            score+=1
        end 
    end 
    puts ("Your Score is " + score.to_s + "/"+ questions.length().to_s)
end 

run_quiz(questions)

Step 7>>
Run your ruby file in the terminal, quiz should look like below-

And that's it. Hope you enjoyed constructing your own quiz!!

Javascript vs React!

Jaspreet kaur — Fri, 14 Oct 2022 19:33:19 +0000

If React is written in JavaScript, then how is it different than the plain JavaScript?
JavaScript can also be used to build Web Applications, then why do we need React?

I would say React is an abstraction on top of JavaScript. React is basically a JavaScript Library which is popular because of its dynamic approach. Let's look at some of the few advantages of using React over JavaScript.

I tried adding few basic differences only , but there's a lot more to it. I hope it helped you in giving an overview of React and its usage.

Conclusion-
It's completely your choice whether to use JavaScript or React for your web development. As mentioned, For scalable and more complex applications React would work better than JavaScript. But if your application doesn't have much complexity, you might want to use JavaScript because of its simpler syntax and basic setup.