Forem: Buddy Agyin 🦁

There's more than just console.log()....other useful ways to use the console in javascript

Buddy Agyin 🦁 — Wed, 30 Sep 2020 16:06:48 +0000

Update: After some requests from some of you I also added some ways for you to style your console outputs. Check out Facebook's console to see styling in action.

When working in JavaScript, one of the first debugging tools you're introduced to is the console. However, most of us are only shown how to utilize console.log() to log variables and strings but there are many other methods on the console object that you can use in order to more effectively debug your code.

console.assert()

Will write a message to the console only if the first argument is false.

console.assert() can be useful when you want to conditionally print an error message

let a = 3

let b = 4

let c = 5

function isOdd(num){
  console.assert((num % 2 === 0), "Number is odd")
}

isOdd(a) // output: Number is odd

isOdd(b) // output:

isOdd(c) // output: Number is odd

console.error()

Will write an error message to the console

console.error() can be very useful for testing purposes when you want to indicate that there is a code-breaking error within the code

console.error('There was an error with your code')

console.warn()

Will output a warning message to the console

console.warn() is useful for testing purposes when you want to indicate that there is a non-breaking error in the code

console.warn("Make sure to parse your numbers to integers")

console.group() & console.groupEnd()

Will create a group of messages in the console. Must use console.groupEnd() to indicate the end of a group.

console.group() can be useful when you have a collection of messages you want to keep together. If needed, you can also provide your group with a label.

// without label
console.log('Hello World!')
console.group()
console.log("I'm the first message")
console.log("I'm the second message")
console.log("I'm the third message")
console.groupEnd()

// with label
console.log('Hello World Pt.2!')
console.group('Group Label')
console.log("I'm a message")
console.log("I'm another message")
console.log("I'm also a message")
console.groupEnd()

console.table()

Will print a table in the console view.

console.table() is one of my favorite ones as it easily allows you to easily view a set of data in an organized fashion.

This method will also take in two parameters, tableData and tableColumns. tableData is required and should be either an array or an object while tabkeColumns is optional and is an array containing the names of the columns you want to display.

// passing in an object
console.table({ firstname : "John", lastname : "Doe" })

// passing in an array
console.table(["Kobe", "Lebron", "Shaq"])

// passing in an array of objects
let city1 = { name: "Salt Lake City", state: "UT" }
let city2 = { name: "San Diego", state: "CA" }
let city3 = { name: "Houston", state: "TX" }

console.table([city1, city2, city3])

// specify we only want "name" column shown 
let city1 = { name: "Salt Lake City", state: "UT" }
let city2 = { name: "San Diego", state: "CA" }
let city3 = { name: "Houston", state: "TX" }

console.table([city1, city2, city3], ["name"])

console.time() & console.timeEnd()

console.time() will start a timer in the console view while console.timeEnd() stops the timer and displays the result in the console view

These two can be extremely useful when you want to see how long it takes your code to run. You can also pass in an optional label parameter.

// without label
console.time()

for(let i=0; i<100000; i++){
// some code here
}

console.timeEnd()

// with label
console.time("Timer1: ")

for(let i=0; i<100000; i++){
// some code here
}

console.timeEnd("Timer1: ")

console.trace()

Will log a stack trace to show how the code ended up at a certain point

console.trace() can be extremely useful when you want to see trace when your functions are being called. You can also pass in an optional label parameter

function myHOF(){
  myCallback()
}

function myCallback(){
  console.trace()
}

myHOF()

Format Specifiers (Style Your Outputs)

The console allows you to specify what type of formatting you would like to apply to your output. All format specifiers will start with a % followed by a letter.

I've provided a table with all of the different format specifiers you can use, but for this article, I'm going to show you how to add CSS styling.

Specifier	Output
%s	Formats the value as a string
%i or %d	Formats the value as an integer
%f	Formats the value as a floating point
%o	Formats the value as an expandable DOM element
%O	Formats the value as an expandable JS Object
%c	Applies CSS style rules to the output string

console.log("%c Here is some really large, red text", "font-size: 58px; color: red;")

console.log("%c I'm Serif and Blue", "color: blue; font-family: serif; font-size: 32px")

Start Using Redux Hooks in Your Projects

Buddy Agyin 🦁 — Sat, 22 Feb 2020 21:23:22 +0000

Redux hooks have been around for quite some time now so why aren't you using them in your projects? Maybe you're just too attached to connect(), mapStateToProps and mapDispatchToProps. Maybe you just haven't taken the time to research the Redux hooks and how to utilize them in your projects. Or maybe, you just find them to be a little bit confusing.

Don't worry because I too was just a little too comfortable with using the standard methods for Redux. But once I decided to jump in and actually implement the Redux hooks, I haven't looked back.

I'll help walk you through some examples of how you can replace mapStateToProps and mapDispatchToProps with the easy to use useSelector and useDispatch hooks.

Let's take a look:

// ../reducers/ui.js

import * as types from '../actions/types'

export const ui = (state=initialState, {type, payload}) => {
    switch (type) {
        case types.SET_EXERCISE_VISIBILTY:
            console.log('action', payload)
            return {
                exerciseModal: payload
            }
        default:
            return state
    }
}

const initialState = {
    exerciseModal: false
}

// ../reducers/exercises.js

import * as types from '../actions/types'
import { exercises as initialState } from '../initialState.js'

export const exercises = (state=initialState, {type, payload}) => {
    switch (type) {
        case types.FILTER_EXERCISES:
            console.log(payload)
            const newArray = initialState.filter(item => item.name.toLowerCase().includes(payload.toLowerCase()))
            return [...newArray]
            break;
        default:
            break;
    }
    return state
}

// ../reducers/index.js

import { ui } from './ui.js'
import { exercises } from './exercises.js'
import { combineReducers } from 'redux'

export default combineReducers({
    exercises,
    ui
})

// ../store/store.js

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from '../reducers'

export const store = createStore(rootReducer, applyMiddleware(thunk))

What I did here was created two separate reducer files. I imported them all into a single file, ../reducers/index.js and utilized the Redux hook combineReducers to combine them into a single root reducer.

In the ../store/store.js file, I went ahead and created our Redux store with my root reducer and the thunk middleware to allow me to perform my dispatches asynchronously.

Now let's create our actions:


// ../actions/types.js

export const SET_EXERCISE_VISIBILTY = 'SET_EXERCISE_VISIBILTY'
export const FILTER_EXERCISES = 'FILTER_EXERCISES'

// ../actions/actions.js

import * as types from './types.js'

export const setExerciseModalVisibilty = (visible) => dispatch =>  {
    dispatch({type: types.SET_EXERCISE_VISIBILTY, payload: visible})
}

export const filterExercises = (filter) => dispatch => {
    console.log(filter)
    dispatch({type: types.FILTER_EXERCISES, payload: filter})
}

Here I created two separate files, one to store our actions and the other to store our types.

Now that we have those set up we can head on over to our index.js file to set up our Provider

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
import { Provider } from 'react-redux';
import { store } from './store/store.js'

ReactDOM.render(
<Provider store={store}>
    <App />
</Provider>
, document.getElementById('root'));

Alright, let's start using our reducers inside of our components now.

I'll show you how it would look utilizing mapStateToProps, mapDispatchToProps and connect before refactoring it to utilize useSelector and useDispatch


// using mapStateToProps and connect

import React from 'react'
import { TopBar } from './TopBar.js'
import { setExerciseModalVisibilty } from '../actions/actions'
import { connect } from 'react-redux'

const CurrentWorkout = (props) => {
    return(
        <>
            <TopBar style={styles.topBar}>
                <h2>
                    Current Workout
                </h2>
            </TopBar>
            <div>
                <p>
                    add some exercises
                </p>
                <button onClick={() => props.setExerciseVisibilityModal(!props.visible)}>
                        +
                </button>
            </div>
            {props.visible && props.exercises.map(exercise => (<h3>{exercise.name}</h3>))}
        </>
    )
}

const mapStateToProps = ({ui, exercises}) => {
   return {
      visible: ui.exerciseModal,
      exercises: exercises
 }
}

const mapDispatchToProps = {
  setExerciseModalVisibility
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(CurrentWorkout)


// using Redux hooks

import React from 'react'
import { TopBar } from './TopBar.js'
import { setExerciseModalVisibilty } from '../actions/actions'
import { useDispatch, useSelector } from 'react-redux'

const CurrentWorkout = (props) => {
    const [visible, exercises] = useSelector(({ui, exercise}) => [ui.exerciseModal, exercises])
    const dispatch = useDispatch()

    return(
        <>
            <TopBar style={styles.topBar}>
                <h2>
                    Current Workout
                </h2>
            </TopBar>
            <div>
                <p>
                    add some exercises
                </p>
                <button onClick={() => dispatch(setExerciseModalVisibilty(!visible))}>
                        +
                </button>
            </div>
            {visible && exercises.map(exercise => (<h3>{exercise.name}</h3>))}
        </>
    )
}

export default CurrentWorkout

As you can see, by utilizing useSelector we can return an array with our wanted state directly inside of our component.

Similarly, we can use useDispatch to create a reference to our dispatch functions inside of our Redux store. We can then pass our action inside of that dispatch reference.

Next time, I'll show you how you can implement the Redux Toolkit into your projects.

For a deeper dive into Redux hooks, be sure to check out the official docs here

React Router Hooks - How To Use Them

Buddy Agyin 🦁 — Tue, 11 Feb 2020 22:15:11 +0000

I know I'm a little behind the ball, but a few months ago React-Router released a new update that introduced hooks to their API.

This update now allows users access to the state of the router and the ability to perform navigation from inside components by using the useHistory, useParams, useLocation, and useRouteMatch hooks.

Today, I'll be giving you a brief overview of each of the hooks and how they've changed the way we write routes.

`useHistory`

The useHistory hook gives you access to the history object that you can use to navigate routes.

import { useHistory } from "react-router-dom"

const Homepage = () => {
  let history = useHistory()

  function goBack(){
    history.goBack()
  }

  function goHome(){
    history.push('/')
  } 

  return(
    <div>
      <button onClick={goBack}>Previous</button>
      <button onClick={goHome}>Home</button>
    </div>
 )
}

export default Homepage

The history object will give us access to the following properties and methods:

length - (number) The number of entries in the history stack
action - (string) The current action (PUSH, REPLACE, or POP)
location - (object) The current location. May have the following properties:
- pathname - (string) The path of the URL
- search - (string) The URL query string
- hash - (string) The URL hash fragment
- state - (object) location-specific state that was provided to e.g. push(path, state) when this location was pushed onto the stack. Only available in browser and memory history.
push(path, [state]) - (function) Pushes a new entry onto the history stack
replace(path, [state]) - (function) Replaces the current entry on the history stack
go(n) - (function) Moves the pointer in the history stack by n entries
goBack() - (function) Equivalent to go(-1)
goForward() - (function) Equivalent to go(1)
block(prompt) - (function) Prevents navigation

`useParams`

The useParams hook gives you access to the params of the given route. Params are just parameters on a given URL that is dynamically set.

Before the useParams hook was introduced by React-Router you had to access the params through props that were passed down to the component like so

import React from "react"
import ReactDOM from "react-dom"
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom"

function Post(props) {
  let { id } = props.match.params
  return <div>Now showing post {id}</div>
}

function App(){
  return(
   <div className='app'>
    <Router>
      <Switch>
        <Route exact path="/" component={Homepage} />
        <Route 
          path="/blog/:id"
          render={routerProps => (
           <Post {...routerProps}/>
          )}
          />
      </Switch>
    </Router>
   </div>
 )
}

Now all you need to do is call the useParams hook to have access to the params.

import React from "react"
import ReactDOM from "react-dom"
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useParams
} from "react-router-dom"

function Post(props) {
  let { id } = useParams()
  return <div>Now showing post {id}</div>
}

function App(){
  return(
   <div className='app'>
    <Router>
      <Switch>
        <Route exact path="/" />
          <Homepage />
        </Route>
        <Route path="/blog/:id">
          <Post />
        </Route>
      </Switch>
    </Router>
   </div>
 );
}

`useLocation`

Another hook that now ships with the React-Router update is the useLocation hook.

This hook will give you access to the location object that represents the current URL. The official documentation said that you can view the useLocation hook as useState that returns a new location every time the URL is updated.

import React from "react"
import ReactDOM from "react-dom"
import {
  BrowserRouter as Router,
  Switch,
  useLocation
} from "react-router-dom"

const LearnMore = () => {
  let location = useLocation()
  return(
    <div>
      You are currently at the following path {location.pathname}
    </div>
  )
 }

function App(){
 return(
  <div className='app'>
    <Router>
     <ul>
        <li>
            <Link to='/'>Home</Link>
        </li>
        <li>
            <Link to='/learn-more'>Learn More</Link>
        </li>
     </ul>
     <Switch>
       <Route exact path='/'>
          <HomePage />
       </Route>
       <Route path='/learn-more'>
          <LearnMore />
       </Route>
     </Switch>
    </Router>
  </div>
 )
}

`useRouteMatch`

Finally, the useRouteMatch hook will give you access to the match property without actually rendering a <Route> component.

Previously you had to use the render prop function to handle this like so

import { Route } from "react-router-dom"

function AnimalCard() {
  return (
    <Route
      path="/animal/:id"
      render={({ match }) => {
        // Do some stuff with your match...
        return <div />
      }}
    />
  );
}

Now you can just import the hook and render elements once the route matches

import { useRouteMatch } from "react-router-dom"

function AnimalCard() {
  let match = useRouteMatch("/animal/:id")

  // Do some stuff with your match...
  return <div />;
}

One thing that is extremely helpful about the useRouteMatch hook is that it accepts strict, exact, path, and sensitive options as well.

Conclusion

Well, there you have it! A quick look at the React-Router hooks. Try these out with your next project and check out the full documentation here

Let's Create a Twitter Bot using Node.js and Heroku (3/3)

Buddy Agyin 🦁 — Wed, 05 Feb 2020 20:08:57 +0000

Welcome to the third and final installment of creating a twitter bot. In this post, I'll show you how to automate your bot using Heroku.

If you haven't had the chance yet, check out Part 1 and Part 2.

After this, you will have your own fully automated Twitter bot. Let's jump in.

1. Setup Heroku Account

You'll want to sign up for a Heroku account. If you have a Github account you'll be able to link the two accounts.

2. Create Your App

Once you're all set up with your account, you'll have to create an app.

In the top right corner, you'll see a button that says 'New' Click on that and select 'Create New App'

That should take you to another page where you'll have to name your app.

3. Install Heroku

You can install Heroku a few different ways depending on your OS. If you want to use the CLI to install it, enter the following code in your terminal

sudo snap install --classic heroku

If that didn't work for you, you can find other ways of installing Heroku to your device here

4. Prepare For Deployment

Open up your terminal and cd into your tweetbot folder. Once inside run this code to log in to your Heroku account.

heroku login

You'll have the option to log in either through the terminal or webpage.

If you haven't deployed to Github run the following code. If you have you can skip this part

git init

Now you'll want to connect to Heroku's remote git server. Run this code in your terminal.

Be sure to replace <your app name> with the name of your Heroku's app name

heroku git:remote -a

Almost there!!! You just want to setup our access keys on Heroku's server.

You can do this directly in terminal quite easily. Run the following code to get it setup.

You're actually just going to be copying it over from your .env file

heroku config:set CONSUMER_KEY=XXXXXXXXXXXXXXXXXXXXXXXXX
heroku config:set CONSUMER_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
heroku config:set ACCESS_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
heroku config:set ACCESS_TOKEN_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Sweet! Now we are going to create a Procfile to configure the process we want Heroku to run.

touch Procfile

Once you have this file created open it up and add the following code inside

worker: node bot.js

Now you just need to commit and push your files up to the Heroku server.

Run this last bit of code in your terminal

git add .
git commit -m "add all files"
git push heroku master

Time to test out our bot now that it's on Heroku. In your terminal, run the following:

heroku run worker

You should see your terminal output 'Retweet Successful' and 'Favorite Successful'

If you're getting some type of error message, be sure to double-check your code and your deployment.

5. Time To Automate

All that's left is getting our bot to run on a schedule. I really like the Herkou Scheduler add to handle this.

Go back to your overview page on Heroku and select configure add-ons

Do a search for Heroku Scheduler and add it to your app.

Now click on Heroku Scheduler to open up the settings in a new window.

For this example, I'm going to configure mine to run every 10 minutes. You can change this to run every hour or less if you'd prefer.

You'll notice that I added node bot.js under the Run Command section. You'll want to do the same so Heroku knows which command to run for your bot.

There you have it!!! You have now successfully created your own automated twitter bot.

If you'd like to check mine out you can at @coolnatureshots. You can also find the GitHub repo for it here

Let's Create a Twitter Bot using Node.js and Heroku (2/3)

Buddy Agyin 🦁 — Wed, 05 Feb 2020 20:07:28 +0000

Welcome to Part 2 of creating your own twitter bot. If you haven't already had a chance, check out Part 1 on setting up your twitter account and getting access to Twitter's API.

Now, we get to make the magic happen and code out our twitter bot in Node.js. Let's get down to business.

1. Installing Node

First things first you're going to need to install node onto your computer. If you've ever worked with npm before you will already have it installed. If you're unsure just run the following command in your terminal

node -v

If your terminal displays something like v13.3.0 in your terminal than move ahead to step 2. If not, then you'll have to complete the steps to download and install the Node package which you can find here. After downloading rerun the above command to verify it's properly installed before moving on

2. Creating Your Files

Now we want to create our directories and files for the project. Open up your terminal and run the following commands.

mkdir tweetbot
cd tweetbot
touch README.md bot.js touch.js .env .gitignore

What we just did here was:

1. Make a directory named tweetbot

2. Change directories into our tweetbot folder

3. Make some files inside of our tweetbot directory (which we'll get back to later)

Now that we have our files created it's time to initialize our project. You'll want to open your tweetbot directory in the IDE of your choice(I recommend VSCode) and then run the following command in your terminal

npm init

You'll be prompted to fill out some information. You can always change the info later so don't stress too much if you don't fill in everything. After you're done you should notice a package.json file in your folder. You'll want it to look like this

{
  "name": "tweetbot",
  "version": "1.0.0",
  "description": "Twitter bot",
  "main": "bot.js",
  "scripts": {
    "test": "test"
  },
  "author": "Buddy Agyin",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^8.2.0",
    "twit": "^2.2.11"
  }
}

Inside of your package.json file, you'll want to add some code inside of "scripts" so it looks like this. All that this is doing is giving our bot a default command that we can use later on.


  "scripts": {
    "test": "test",
    "start": "node bot.js"
  }

Alright, now the final step is to get our dependencies added to our project. We want to install both twit and dotenv. The twit dependency is the Twitter API client while the dotenv dependency will allow us to load environment variables into our project. Run the following command in your terminal

node install twit dotenv

These both will be automatically added to your package.json file.

3. Creating Github Repo

Next, we'll be creating a GitHub repo for our project. This step isn't necessary and if you don't want to create a repo you can feel free to skip ahead to step 4.

Just a quick reminder that you never want to push your code up to Github with your access keys public.

If you already have an account login and create a new repo. If you need an account, go ahead and create one before creating a repo.

You'll want to name your repo and give it a brief description. For our purposes don't initialize your repo with a README file (we already have one created) or a license.

After you've created your repo, you'll want to go back into your terminal. Make sure you're in the tweetbot directory before running the following command. This will initialize your project as a Git repository

git init

Now you'll want to add your files to your local repository and stage them for commit. Again in your terminal run the following command.

git add .

Almost there, now you'll want to commit your files to the local repository. Run this command in your terminal

git commit -m "commit all files"

Ok, now you'll want to copy the url from your GitHub repo which you can find at the top of your GitHub repository's Quick Setup page. Just click the clipboard to copy the remote repository URL.

Now back in the terminal you'll want to run the following code so you can set your remote repository as the location we want to push our local repository. Be sure to replace with the url you just copied from your GitHub repo.

$ git remote add origin <remote repository URL>
$ git remote -v

Finally, you'll want to push all of your files up to your GitHub repo with the following command inside your terminal. Once you do that, your GitHub repo will be all setup.

git push -u origin master

4. Programming The Bot

We have the files set up and our Github repo made, let's finally program our bots.

First things first we'll have to get our access keys configured. Open up your .env file and add your consumer keys and access tokens to the file. If you don't have these you can get them from your Twitter Developer account.

You'll want to replace the X's with your keys.

CONSUMER_KEY=XXXXXXXXXXXXXXXXXXXXXXXXX
CONSUMER_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
ACCESS_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
ACCESS_TOKEN_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Now head on over to your config.js file and enter the following code.

require('dotenv').config()
module.exports = {
    consumer_key: process.env.CONSUMER_KEY,
    consumer_secret: process.env.CONSUMER_SECRET,
    access_token: process.env.ACCESS_TOKEN,
    access_token_secret: process.env.ACCESS_TOKEN_SECRET
}

Once that's all set up open up your bots.js file and place this code at the top of the file.

const Twit = require('twit');
const config = require('./config.js');
const tweetBot = new Twit(config);

All this is doing is importing our access keys from our config.js file and allowing us access to the Twitter API.

Next, you'll want to add some parameters to tell your bot what to search for. You can do that by adding this code to your file.

const params = {
    q: '#nature AND #photography filter:media',
    count: 10,
    lang: 'en'
}

Sweet. I'm telling my bot to search twitter for tweets tagged with both #nature AND #photography, have some type of media and are written in English. I'm also only returning 10 tweets with each search.

Feel free to use the same parameters or switch it up to your liking. For more info on the different parameters check out Twitter's guide

Ok, now we want to tell our bot what to do with these tweets, which in our case is retweet them.

tweetBot.get('search/tweets', params,  (err, data, res) => {
    if(!err){
        for(let i=0; i < data.statuses.length; i++){
            let tweetID = {id: data.statuses[i].id_str}
            tweetBot.post('statuses/retweet', tweetID, (err, res) => {
                if(!err){
                    console.log(`Retweet successful`)
                }else{
                    console.log(err.message)
                }
            })
        }
    }else{
        console.log(err)
    }
})

Here we're telling our bot to search for tweets with the parameters we set up. Our bot will then tell console out whether it was able to retweet the tweet. If it's a new tweet it will retweet it and give us the following message "Retweet Successful." If it has already been retweeted the bot will let us know.

I also want my bot to be able to favorite tweets as well but using different search parameters.

At the top of your bots.js file under your params add this add.

const favParams = {
    q: '#photography OR #nature filter:media',
    count: 15,
    lang: 'en'
}

You'll notice that the code looks familiar but with a few differences. In this case, we're telling our bot to search for tweets tagged with #photography OR #nature, have some type of media and written in English. In this case, we'll be returning 15 tweets with each search.

Like before, feel free to change the parameters to your own choosing.

Now we're going to want to tell our bot to search for these tweets and then favorite them.

At the bottom of your file add the following code.

tweetBot.get('search/tweets', favParams,  (err, data, res) => {
    if(!err){
        for(let i=0; i < data.statuses.length; i++){
            let tweetID = {id: data.statuses[i].id_str}
            tweetBot.post('favorites/create', tweetID, (err, res) => {
                if(!err){
                    console.log(`Favorite successful`)
                }else{
                    console.log(err.message)
                }
            })
        }
    }else{
        console.log(err)
    }
})

Similar to the retweeting functionality, our bot will search for tweets with the parameters we set up. Our bot will then tell console out whether it was able to favorite the tweet. If it's a new tweet it will favorite it and give us the following message "Favorite Successful." If it has already been favorited the bot will let us know.

Your final code should look something like this:

const Twit = require('twit');
const config = require('./config.js');
const tweetBot = new Twit(config);

const params = {
    q: '#nature AND #photography filter:media',
    count: 10,
    lang: 'en'
}

const favParams = {
    q: '#photography OR #nature filter:media',
    count: 15,
    lang: 'en'
}

tweetBot.get('search/tweets', params,  (err, data, res) => {
    if(!err){
        for(let i=0; i < data.statuses.length; i++){
            let tweetID = {id: data.statuses[i].id_str}
            tweetBot.post('statuses/retweet', tweetID, (err, res) => {
                if(!err){
                    console.log(`Retweet successful`)
                }else{
                    console.log(err.message)
                }
            })
        }
    }else{
        console.log(err)
    }
})

tweetBot.get('search/tweets', favParams,  (err, data, res) => {
    if(!err){
        for(let i=0; i < data.statuses.length; i++){
            let tweetID = {id: data.statuses[i].id_str}
            tweetBot.post('favorites/create', tweetID, (err, res) => {
                if(!err){
                    console.log(`Favorite successful`)
                }else{
                    console.log(err.message)
                }
            })
        }
    }else{
        console.log(err)
    }
})

5. Give Your Bot A Spin

Sweet! Your bot should be ready to test out. Go ahead and run the following code in your terminal. Make sure you're inside your tweetbot folder.

npm start

You should see a bunch of "Retweet Successful" and "Favorite Successful" outputs in your terminal. This means that your bot is doing its thing. You can check your twitter account just to verify that it actually worked.

Now that our bot is alive, you'll want to push your changes up to your Github repo. Run the following commands in your terminal

git add .
git commit -m "bot working"
git push origin master

Congratulations! You just built your very own bot. But we don't want to only be able to run it in our terminal, so in the third and final post I'll show you how to automate this process.

Feel free to check out my bot @coolnatureshots and the Github repo for it here

Let's Create a Twitter Bot using Node.js and Heroku (1/3)

Buddy Agyin 🦁 — Wed, 05 Feb 2020 20:07:15 +0000

Do you want to automatically retweet topics you're interested in? Maybe you want to send thank every new follower you gain? Or maybe you just want to mess around and create a fun side project? If you answered yes to any of these than a twitter bot is exactly what you're looking for and I'll walk you through step by step on how to build your own.

First, I want to warn you that you'll want to be careful when building out your bot because you don't want to spam users as you can get your account suspended. There are some great examples of some twitter bots like @dscovr_epic (a bot that tweets photos from NASA's DSCOVR spacecraft), @museum_bot (which tweets out high-res images from the Metropolitan Museum of Art), and (@codedailybot)https://twitter.com/codedailybot. These are just a few examples but there are many more out there in the Twitter-verse.

Alright, now that you've had a chance to see some examples of twitter bots let's get down to the fun and build our own. I'll be breaking up this walkthrough into 3 separate blog posts so this first one will just focus on getting your twitter account and API access setup.

If you want to see my twitter bot in action you can check it out here @coolnatureshots.

1. Create your Twitter Account

I recommend creating a new twitter account for your bot so your followers aren't bombarded with your endless retweets and if you accidentally violate Twitter's Terms of Service and they shut your account down you don't lose your personal account. Once you create your account just make sure to verify your email address and phone number because you won't be able to anything until you have.

2. Setup A Developer Account

Now you'll want to signup for a developer account to gain access to Twitter's API.

There are many different options to choose but for our purposes just go on ahead and select bot. After you'll have to answer some questions on how you plan to use Twitter's API. For this project, I'll be retweeting tweets with '#photography' and '#nature'.

For this project, I'll be retweeting tweets with '#photography' and '#nature'. Feel free to use these as well or you can change them how you please. While answering the questions you'll want to answer the ones you see above. Once you complete these you'll receive an email from Twitter to complete your application. It's important that you open this email and click on the provided link or else you won't be able to have a developer account.

3. Create Your App

Now that your application is complete, you can create an app. You'll have to give your app a name (I called mine "Nature Photo Bot"), give a brief description of what your app will do. You can use the same information you put for your application here.

After completing that you can edit your permission options. I'm using 'Read and write' permissions which will allow my bot to both search tweets and read tweets. If you'd like your bot to be able to send messages as well as select the 'Read, write and Direct Messages' option. You can always change these later but you'll have to regenerate your tokens if you do. Speaking of tokens...

Your API keys will already be generated for you so you'll just need to generate your Access tokens. Click on the generate button and a popup should appear with your keys. Be sure to copy those down and save them somewhere safe as you'll only be able to view them once. We'll also be using these in Part 2 once we get to building out the actual bot.

Whew!!! We made it through the first part. I know you're probably thinking when the heck are we actually going to start writing some code? Well head on over to Part 2 with your API keys and let's get down to business.

If you'd like to check mine out you can at @coolnatureshots. You can also find the GitHub repo for it here