DEV Community: Tom

Deploy your ZEIT's hosted website right from WordPress using Deploy Hooks

Tom — Mon, 06 Apr 2020 20:35:50 +0000

Without a doubt, Gatsby's most powerful feature is being able to pull data from multiple sources and serve that data statically on build time. This creates a blazing fast experience for websites with CMS's behind the scenes, but also creates a complication if you regularly update your website with new content, because you'd need to manually re-build and re-deploy your website so the updated content kicks in.

Thankfully the new technologies available for serverless websites allow us to create easy workarounds for this problem. For example if you have a Gatsby website that serves data from WordPress and it's hosted on ZEIT's Now, we can add a "Deploy Now" button to your WP Admin panel. Here's how:

Creating a Deploy Hook

First we'll need to create a Deploy Hook in our project's settings. Deploy Hooks are unique URL's that allow you to trigger a deployment of a given branch. This is extremely helpful for our purpose, right?

To create a Deploy Hook, go to your project's settings inside ZEIT's dashboard, then inside "GIT Integration" create a new Deploy Hook for your production branch (probably master).

Once you created your Deploy Hook, all it takes to deploy your branch is to make a POST request to the given URL like this:

    $ curl -X POST "your_deploy_hook_url"

Once you made the POST request, the selected branch should start deploying and you should get a response like this:

    {
      "job": {
        "id": "A7OcAEEgNRh61p1VZXE1",
        "state": "PENDING",
        "createdAt": 1564399503217
      }
    }

We're half way there! Now we just need to add a button to the WP Admin panel that makes a POST request to the Deploy Hook.

Add a "Deploy Now" button to the WP Admin

Now we need to add an identifiable button to the WP Admin bar. We can do this by using Wordpress' admin_bar_menu hook. So, in your functions.php file in your theme directory add the following:

    <?php
        // Add a 'Deploy Now' button to WP Admin bar
        function add_deploy_button($wp_admin_bar) {
          $args = array(
            'id' => 'deployButton', // ID of the button added. 
            'title' => 'Deploy Now',
            'href' => '#'
          );

          $wp_admin_bar->add_node($args);
        }

        // WP Hook
        add_action('admin_bar_menu', 'add_deploy_button', 100);
    ?>

Excellent! Now we need to create a JavaScript file inside our theme directory, to do a POST request to our Deploy Hook every time we click the "Deploy Now" button.

    const deployButton = document.querySelector('#wp-admin-bar-deploy-button > a')

    if (deployButton) {
      deployButton.addEventListener('click', (event) => {
        event.preventDefault()

        // To make the POST Request will use
        // the gud-ol jQuery that comes with WordPress
        jQuery.ajax({
          url:
            '', // Our Deploy Hook URL here,
          method: 'POST',
        }).done(() => {
          alert(
            'Your website will be updated shortly. Check in a couple of minutes'
          )
        })
      })
    }

Great we're almost there! Now we just need to include this script in the Admin page. We'll do this by using the admin_enqueue_script WP Hook. Again, inside your functions.php file, add the following:

    <?php
        function add_deploy_script() {
            wp_enqueue_script('deploy_script', get_template_directory_uri() . '/path/to/your/script.js');
        }

        add_action('admin_enqueue_scripts', 'add_deploy_script');
    ?>

Yayyy! We did it! ✨ Now every time you finish adding some content through the WP Admin, all you have to do to deploy your website is click the "Deploy Now" button.

Hoped this little workaround helped you ✌

Stay safe. Stay home!

Adding your Dribbble shots to your Gatsby website

Tom — Sat, 04 Apr 2020 16:44:41 +0000

We all love Gatsby, don't we? One of my favorites features is being able to pull data from different sources and serve that data statically.

Recently I found myself in the need of adding Dribbble shots to my company's website. So, like with any other content source, I looked for a plugin in Gatsby’s website. I found and installed this one.

    $ npm install --save gatsby-source-dribbble

Once installed, we need to add its configuration to the gatsby-config.js file:

    plugins = [
      {
        resolve: `gatsby-source-dribbble`,
        options: {
          access_token: '' // Your access token here
        }
      }
    ]

So far, so good, right? So, what’s the point of this how-to? Well the thing is that getting that access token is not a walk in the park.

Getting Dribbble’s access token

Thanks to Dribbble’s API not-so-clear documentation, getting our account’s access token is a really tedious task. Here’s a simple walkthrough on how to do it:

1) Register your Dribbble application

In orden to access the API data we need to register an application in our Dribbble account. To do this:

Log in into your Dribbble account.
Go to Account Settings > Applications > Register Application.
Fill the register form.

Once your application is registered you'll have a Client ID and a Client Secret. Save these credentials for later.

2) Request your access token

Here's where things get...tricky. In order to get access to your access token, open this website in your browser (replace your_client_id with the Client ID you got from the previous step:

https://dribbble.com/oauth/authorize?client_id=YOUR_CLIENT_ID

After you authorize your application, you'll be redirected to the callback URL that you filled in the previous form. That URL will have a parameter like these:

https://your-callback-url?code=SOME_RANDOM_CODE

We're almost there! ✨ Now, we just need to make a POST request like this —replacing your_client_id, your_client_secret **and previous_random_code with the credentials you got in the previous steps— to this URL:

https://dribbble.com/oauth/token?client_id=YOUR_CLIENT_ID**&client_secret=YOUR_CLIENT_SECRET&code=PREVIOUS_RANDOM_CODE

To make the POST request, open your terminal and run:

    $ curl -X POST THE_PREVIOUS_URL

We did it! 🎉 The POST request should have returned a code like this one:

    {
        'access_token': '123n12jb2v32u32b3u2b', // Yayy 🎉
        'token_type': 'bearer',
        'scope': 'public',
        'createdAt': '123mm22opw'
    }

That's it! It wasn't that hard, huh? Well, Dribbble's documentation isn't anywhere clear about how to get this access token, so figuring out this was incredibly tedious and I wanted to clear it out for anyone in the same situation.

Anyway, if you have any question you can DM on Twitter :)

Stay safe, stay home!

How to build a Twitter Bot that recommends movies

Tom — Fri, 03 Apr 2020 21:05:27 +0000

I love films. I love recommending films to watch. I also love when people ask for my recommendations on what to watch. But sometimes this can become a little tedious, so a couple of months ago I started building a bot that recommends random (and good) movies when you mention it on Twitter. That's how @nosequever was born.

This is a simple guide on how to do it:

First let's install all the dependencies we'll use to build our bot. These are:

Twit: it's a Twitter API client for Node.js. We'll use this client to "listen" for mentions in our account, and to tweet a response with our recommendation.
Axios: an HTTP client for Node.js. This client will allow us to do a GET request to the TMDb API to get our random movie to recommend.

To install these dependencies, run inside your project's directory:

    $ npm install --save twit axios

Once you've all our dependencies installed, we need to get all the credentials for the API's we'll be using: the Twitter API and the TMDb API. Let's create a config.js file and paste those credentials:

    module.exports = {
      // Add your Twitter API Credentials
      twitter_api: {
        consumer_key: '',
        consumer_secret: '',
        access_token: '',
        access_token_secret: ''
      },
      // Add the ID of the user you want to track
      // You can find the ID of a twitter user in http://gettwitterid.com/
      twitter_user_id: '',
      // Add your TMBb API Credentials
      movies_database_api_key: ''
    }

Now we're ready to start building our bot! First, let's create an asynchronous function that returns the movie we'll recommend. This function will make a GET request to the TMDb API to retrieve a movie based in certain search parameters: a minimum number of votes and a minimum average score. In theory this will allow us to recommend only "good" movies, but it can fail (yes, we're talking to you Green Book). This request will return an array with different movies, and our recommendation we'll be a random index of that array.

    const config = require('./config')
    const Twit = require('twit')
    const axios = require('axios')

    // This will return the string with
    // the recommended movie. If something
    // goes wrong, returns an error message to tweet.
    const getRecommendedMovie = async () => {
      const tmdbApiKey = config.movies_database_api_key 
      const listPage = Math.floor(Math.random() * 234) + 1
      const minimumVotes = 50
      const minimumScore = 7
      const requestURL =
        'https://api.themoviedb.org/3/discover/movie?api_key=' +
        tmdbApiKey +
        '&language=en-US&sort_by=vote_average.desc&include_adult=false&include_video=false&page=' +
        listPage +
        '&vote_count.gte=' +
        minimumVotes +
        '&vote_average.gte=' +
        minimumScore

      // Stores the GET request into a variable
        // that we'll return
      const recommendedMovie = await axios
        .get(requestURL)
        .then((response) => {
          if (response.status === 200) {
            const moviesList = response.data.results
            const listLength = moviesList.length
            const randomIndex = Math.floor(Math.random() * listLength) + 1

            // Yayy! We've our random movie to recommend!
            const recommendedMovie = moviesList[randomIndex]

            // Now, let's start putting together
            // the string to tweet to the user
            const movieID = recommendedMovie.id
            const movieTitle = recommendedMovie.title
            const movieReleaseYear = recommendedMovie.release_date.split('-')[0] // We just want the year
            const movieURL = 'https://www.themoviedb.org/movie/' + movieID

            // We'll tweet this to the user
            const tweet =
              ' today you could watch ' +
              movieTitle +
              ' (' +
              movieReleaseYear +
              '). More info: ' +
              movieURL
            return tweet
          }
        })
        .catch(() => {
          return ' seems like something went wrong 💔. Try again in a few minutes!'
        })

      return recommendedMovie
    }

Alright! We've our movie recommendation. That was easy, wasn't it?

Now we need to initialize a Twit instance to "listen" for mentions in our account. If we're mentioned, we'll post a tweet in reply with our recommendation.

If you check Twit's documentation, in order to initialize an instance of it we need to pass our Twitter API credentials as a parameter. Once it's initialized we'll use the stream() method to filter Twitter's public stream to search for mentions in our account, by using our Twitter account ID. Then, we can finally reply to that mention with our recommendation ❤️.

    const config = require('./config')
    const Twit = require('twit')
    const axios = require('axios')

    // This will return the string with
    // the recommended movie. If something
    // goes wrong, returns an error message to tweet.
    const getRecommendedMovie = async () => {
      const tmdbApiKey = config.movies_database_api_key // Your TMDb api key goes here
      const listPage = Math.floor(Math.random() * 234) + 1
      const minimumVotes = 50
      const minimumScore = 7
      const requestURL =
        'https://api.themoviedb.org/3/discover/movie?api_key=' +
        tmdbApiKey +
        '&language=en-US&sort_by=vote_average.desc&include_adult=false&include_video=false&page=' +
        listPage +
        '&vote_count.gte=' +
        minimumVotes +
        '&vote_average.gte=' +
        minimumScore

      // Does a GET request to the TMDb API
      // to get the random movie data
      const recommendedMovie = await axios
        .get(requestURL)
        .then((response) => {
          if (response.status === 200) {
            const moviesList = response.data.results
            const listLength = moviesList.length
            const randomIndex = Math.floor(Math.random() * listLength) + 1

            // Yayy! We've our random movie to recommend!
            const recommendedMovie = moviesList[randomIndex]

            // Now, let's start putting together
            // the string to tweet to the user
            const movieID = recommendedMovie.id
            const movieTitle = recommendedMovie.title
            const movieReleaseYear = recommendedMovie.release_date.split('-')[0] // We just want the year
            const movieURL = 'https://www.themoviedb.org/movie/' + movieID

            // We'll tweet this to the user
            const tweet =
              ' today you could watch ' +
              movieTitle +
              ' (' +
              movieReleaseYear +
              '). More info: ' +
              movieURL
            return tweet
          }
        })
        .catch(() => {
          return ' seems like something went wrong 💔. Try again in a few minutes!'
        })

      return recommendedMovie
    }

    // Our bot object
    const bot = new Twit(config.twitter_api)
    const myAccountId = config.twitter_user_id

    // Twitter's public stream
    const stream = bot.stream('statuses/filter', { follow: myAccountId })

    // Every time our account receives a tweet,
    // the `stream` object will run a function
    // to verify if the tweet it's a mention
    stream.on('tweet', async (eventMsg) => {
      if (eventMsg.in_reply_to_screen_name === 'nosequever') {
        const userToMention = eventMsg.user.screen_name
        const toTweet = '@' + userToMention + ' ' + (await getRecommendedMovie()) // Remember getRecommendedMovie() it's asynchronous
        const tweetParams = {
          status: toTweet,
          in_reply_to_status_id: eventMsg.id_str,
        }

        // 🎉🎉 Tweets the recommendation 🎉🎉
        bot.post('statuses/update', tweetParams)
      }
    })

🎉 IT'S ALIVE 🎉

You can test it by running node app.js and then mentioning your bot account on Twitter. If you want it to run forever (wink, wink) you'll need to start a forever process in your app.js. You can do this by installing forever like this:

    $ npm install --save forever

And then running

    $ forever start app.js

✨ That's it! You've successfully created a bot on Twitter ✨

Feel free to clone this project and make any improvements you want. You can even make a pull-request to add some features!

Hope you liked it. If you have any questions, you can ask me for help on Twitter at any time :)

Stay home, stay safe!