DEV Community: javier

Using rails generator to create you table models

javier — Fri, 17 Feb 2023 06:06:37 +0000

Ruby on rails makes creating table models super easy. In order to create a table model, you need to first go into your terminal. Start the command with:

rails g
"g" stands for generate. After you create your table, you have to name it. For example, if I wanted to created a table for restaurants I would type in something along the lines of:
rails g model Restaurants

Next, you'll add your columns. Continuing with the restaurant example, most restaurants have a name, store number, and address. To add this information, just type in:
rails g model Restaurant name store_number:integer address
rails by default rails will assume you want your column to be a string so you won't have to type anything after you've named your columns. Saying that, you'll notice that for store number I added :integer. If you want your column to be something besides a string, you'll have to specify that.
After that, you should get this in your terminal:

then check your app file, go into models, and your restaurant.rb should be there. Also go to your db file, then into migrate; your migration should be there all set up like so:

Rails has many more generators that can be useful. This just the tip of the iceberg. This probably my favorite part of rails. It makes coding a lot faster and more efficient. Let us focus on more complex and personalized code.

Like even creating the whole MVP. Using the resource generator not only creates your model but also your controller, your serializers , and your routes. Not including your associations. Which will set up your micros in your table that connects with other tables or your belongs_to but you will have to set up your has_many on your own.
The best part being that it is super easy to fallow and learn. So need to worry if it be hard to learn or not or even worth your time. Which obviously it is most definitely worth it.
You can find all the information ruby has great guides so I definitely recommend looking into the guides.

Creating A Carousel In React With Bootstrap

javier — Fri, 09 Dec 2022 07:12:38 +0000

Creating a carousel in react might sound a bit intimidating; but with the right tools and background knowledge, it becomes much easier. First, we'll start by installing Bootstrap with npm.

npm install react-bootstrap bootstrap

After you have installed Bootstrap, you will need to import it into your JS.

import Carousel from 'react-bootstrap/Carousel';

Now let's get to the fun part. You'll want do use the following code to create your carousel:

 <Carousel>
  <div className='slide'><img src='https://cdn.mos.cms.futurecdn.net/MeU4HokrzUwhbd9PJBQCSV-1200-80.png'/></div>
  <div className='slide'><img src='https://fs-prod-cdn.nintendo-europe.com/media/images/10_share_images/games_15/nintendo_switch_download_software_1/2x1_NSwitchDS_Overwatch2WatchpointPack_image1600w.jpg'/></div>
  <div className='slide'><img src='https://i.ytimg.com/vi/wQATS4HOxdo/maxresdefault.jpg'/></div>
  <div className='slide'><img src='https://p325k7wa.twic.pics/high/elden-ring/elden-ring/04-retailers/00-beautyshots/04-Standard/ER_standard_keyart.jpg?twic=v1/step=10/quality=80/max=760'/></div>
  <div className='slide'><img src='https://cdn.cloudflare.steamstatic.com/steam/apps/570940/capsule_616x353.jpg?t=1668145065'/></div>
  <div className='slide'><img src='https://images2.alphacoders.com/204/thumb-1920-204972.jpg'/></div>
  <div className='slide'><img src='https://i.ytimg.com/vi/H4rYVsJ4v9Y/maxresdefault.jpg'/></div>
  <div className='slide'><img src='https://cdn.akamai.steamstatic.com/steam/apps/12210/capsule_616x353.jpg?t=1618853493'/></div>
</Carousel>;

Personally, I recommend putting the carousel in its own component in case you need to use it in different places throughout your app. Putting it in its own component will also make it significantly easier to see what the placement will look like in your app.

After that, you're pretty much done. This will give you the basic foundation for your carousel. It can be customized to your liking by changing fonts, speeds, styles, transitions, and image size. I recommend playing around with these to see what you prefer and what works best with your personal style and project. You can use this for a slide show or even a loading page if you wanted to. Happy coding!

Working with the Spotify Api as a student in JavaScript

javier — Fri, 18 Nov 2022 01:54:35 +0000

As a person who is semi-new to coding, tapping in to the Spotify Api might seem pretty intimating. Trust me, it was, but once you break it down it's actually not too hard and absolutely cool to work with. If you do any project with music I highly recommend using it. My first challenge was actually getting data from the Api. This was definitely a blocker since I haven't worked with an Api with that needs any kind of token or authorization. This was solved with 2 days of research and few trips to stack overflow. To get onto Spotify's Api you really just have to get your Fetch headers right like so:

headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization':  `Bearer ` + token
        }

Although using a token isn't super efficient, I haven't quite figured out a way around it, since the token is only good for 60 minutes. I'll definitely have an update for you when I do figure that part out.
Depending on what kind of data you're trying to get from the Api will determine what your fetch link will be. The base of the link will start looking something like this:

https://api.spotify.com/v1/

I personally was playing around with looking for artist data so my link went a little like this:

https://api.spotify.com/v1/artists

If you run your fetch like this it will give you an error. So after artists, you will have to specify which artists you are looking for with their unique id, which you can find in the Spotify web browser in the link when you look up an artist like so :

After that, I recommend console logging your results to make sure you have the results you're looking for (console log everything !!!!). I did a group project in my cohort which honestly I am very impressed with. Make sure you go check it out!!!!

https://github.com/javirodmart/phase1ProjectJTK

If you do decide to check it make sure you put in a new token!