Forem: Mahallawy

Tweeting with an image using Node JS

Mahallawy — Sat, 10 Jul 2021 15:21:41 +0000

Introduction

This is my fourth tutorial about using Twitter API with Node JS. My previous tutorials are listed up there 👆.

In my first tutorial, I showed how to tweet with only text using Twitter API and Node JS, see here.
Then I got a question on how to tweet with an image, thanks to @thomasbnt and @generativexbot , so here I'll explain my way to do this.

Before we start

You need to have a Twitter Developer account and for the basic configurations please go here for more explanation as I follow the same structure.

Let's start

To tweet an image, the process will consist of two requests:
1- Uploading the image
2- Tweeting with that image

The new thing here is that each request uses a different subdomain in the Twitter API url, which means that a small change will be done on the config.js file.

const twitter = require('twitter-lite');

exports.newClient = function (subdomain = 'api') {
    return new twitter({
        subdomain,
        consumer_key: '',
        consumer_secret: '',
        access_token_key: '',
        access_token_secret: ''
    });
}

Here I changed the configurations to be returned as a function instead of a JSON object. The function returns a twitter lite client that I moved its definition here for simplicity. The reason I did that is the new configuration attribute subdomain, which can be set from the function parameter.

-Now, we are ready to edit the index.js file. Some changes must be made after changing the config.js file:
1- Remove twitter lite definition
2- Define twitter lite clients for both subdomains to be used later

const apiClient = config.newClient();
const uploadClient = config.newClient('upload');

I got this photo to be used with the tweet
Then we deal with the image file and make it ready for the upload by defining the fs and path modules.

const fs = require('fs');
const path = require('path');

Then, read the file as a 64 based file.

const mediaFile = fs.readFileSync(path.join(__dirname, 'hello_world.png'));
const base64image = Buffer.from(mediaFile).toString('base64');

Next, it's similar to what we did in this tutorial where a request is depending on the result of another request.
The first request is for uploading image using media/upload endpoint and the uploading subdomain. This means using uploadClient here and returns an object with media_id attribute which we save for the next step.

// Uploading an image
uploadClient.post('media/upload', { media_data: base64image })
    .then(media => {

    console.log('You successfully uploaded media');

    var media_id = media.media_id_string;
}).catch(console.error);

You can see full details for this request here.
The second request is the normal tweeting using statuses/update endpoint to tweet with the image, which uses the apiClient.

// tweeting with text and image
apiClient.post('statuses/update', { status: 'Hello world!', media_ids: media_id })
    .then(tweet => {

    console.log('Your image tweet is posted successfully');
}).catch(console.error);

You can see full details for this request here.
everything in place now and we can run the app in Command Prompt using:

node index.js

That's it and your image is added to your tweet and takes its place in your friends timeline 😁.

Here's is the full code for index.js file:

const fs = require('fs');
const path = require('path');
const config = require('./config');
const apiClient = config.newClient();
const uploadClient = config.newClient('upload');

const mediaFile = fs.readFileSync(path.join(__dirname, 'hello_world.png'));
const base64image = Buffer.from(mediaFile).toString('base64');

uploadClient.post('media/upload', { media_data: base64image })
    .then(media => {

    console.log('You successfully uploaded media');

    var media_id = media.media_id_string;
    apiClient.post('statuses/update', { status: 'Hello world!', media_ids: media_id })
        .then(tweet => {

        console.log('Your image tweet is posted successfully');
    }).catch(console.error);

}).catch(console.error);

In the following tutorial, we are going to explore more about twitter API. I have several ideas to share with you, so stay tuned 😉

For the full code, you can visit my github page.

If you like my tutorials, support me here and follow me on Twitter

Building a Desktop PC for Coding

Mahallawy — Sat, 26 Dec 2020 22:09:58 +0000

I just bought a new desktop PC, so I think this can be useful to other developers how I did that.

Why I bought a PC not a laptop

I had a power problem with my Asus TUF laptop and no one was able to solve it.
If a similar problem happened in a desktop PC, it's easy to change the damaged part with less cost and less chance losing the whole machine.
Also, desktop PCs are much powerful than laptops even with the same specifications.

My use

When you buying a new PC (desktop or laptop), you must think carefully about how you going to use it. You don't want to buy the best computer that you'll use less than 10% of it's capabilities, or buy a cheap one that slows your work.
My use is for programming, streaming, video editing, photoshop, and some gaming (only 2 games)
This means that I need a powerful processor, good quality motherboard, fast reading and writing storage, an average graphics card, and good memory capacity.

My hardware choices

I choose to go with AMD Ryzen 7 3700x processor, it has 8 cores and 16 threads with a very nice RGB cooler. Its benchmarks are very near to 10th gen i9 processors but with much less price. According to the CPU benchmark website, Ryzen 7 3700x ($325) is better than Intel i9-10900x ($560) check the benchmark

You can check it on Amazon from here

For the motherboard, My first choice was Asus TUF gaming x570-plus with Wi-Fi ($189) (see it on amazon from here) but It was out of stock. So, I chose Asus Rog Strix B550 gaming-f with Wi-fi ($210). It's a very beautiful peace with support to PCIe gen 4, 2 M.2 SSD slots, can take up to 128Gb of RAM, has built-in Wi-fi, contains a USB type-c port, 2.5Gb LAN port, a USB 3.2 gen 2 port, and supports RGB.

You can check it on amazon from here

For the graphics card, I choose the Asus TUF GTX 1660 super ($500) which has 6Gb of memory. It's a relatively new card with very good performance at a very affordable price.

You can check it on amazon from here

For the storage, I choose western digital black 500Gb SN750 NVMe Internal SSD ($60) which has the highest quality of WD SSD drives.

You can check it on amazon from [here])https://amzn.to/2KComRQ)

For the memory, I choose the TEAMGROUP T-Force Vulcan Z 32Gb (16 x 2) DDR4 with 3600MHz ($120) which is the best to be used with Ryzen processors.

You can check it on amazon from here

Finally the computer case, I choose Corsair Carbide Series SPEC-DELTA RGB Mid-Tower ATX Case ($50) which has a tempered glass side, 3 RGB fans in the front, 1 fan in the back, and with EVGA 600 W 80+ Certified ATX Power Supply ($40).

You can check it on amazon from here

The total price was $1305, prices are changing every day, so this may vary at your time of reading.

If you like my tutorials, support me here and follow me on Twitter

Using Postman with Twitter API

Mahallawy — Sat, 26 Dec 2020 13:14:43 +0000

introduction

This is my 3rd article on Twitter API series, so some information may need visiting my previous articles.

Let's start...
We don't need to write code to test a Twitter API endpoint. This can be done using Postman.
According to their website: "Postman is used to Quickly and easily send REST, SOAP, and GraphQL requests".

Getting into Action

You must have a Twitter developer account, to continue with this tutorial.
Now, you'll download postman from here

You may need to sign up to be able to use Postman. After that you can open it.

There will be some configurations before dealing with Twitter API. First, you'll add an environment by clicking on the button in the following image.

A new window will appear as you can see in the following image, then click Add.

You can set your environment the same as the following image, you are free to choose the environment name. Use your Twitter account API key, API key secret, access token, and access token secret to filling the Initial Value and Current Value of the fields, then click Add.

Now you have an environment that you can use by selecting it from the environment's dropdown list.

Then, you need to open a new request by clicking the + button or by clicking Create a request from the Launchpad of Postman.

You can use the following endpoint to get tweets of a specific account, see the documentation here
https://api.twitter.com/1.1/search/tweets.json

Add this endpoint to the textbox after the word GET as you can see in the following image:

After that, click on the Authorization button. In the Type dropdown, select OAuth 1.0. The OAuth parameters will appear on the right and will be filled with the environment variables.

One last step, according to Twitter documentation, this endpoint requires a q parameter which is a query text used to search tweets. To add this parameter, click on the Params button and add the parameter key and value as in the following image and make sure the checkbox beside the parameter key is checked ☑.

This will change the endpoint to look like that
https://api.twitter.com/1.1/search/tweets.json?q=ahmed_mahallawy

Finally, You can click the blue Send button, and see the results. If you get a 200 OK status as the following image, this means you did it successfully 🎉

That's all. 💪

Conclusion

Using Postman can be very useful to test Twitter API for your use cases before building your applications. That's why it's very important to understand how to use it.

If you like my tutorials, support me here and follow me on Twitter

A 14 years journey of programming

Mahallawy — Wed, 02 Dec 2020 19:32:53 +0000

Introduction

I grow up in Tanta, Egypt, and I'm an Electric Communications and Electronics Engineer. Didn't I tell you my name yet? Oh, silly me. It's Ahmed El-Mahallawy.

The Very Beginning

Studying for an engineering degree was really boring for me. I didn't care much for studying Fortran and C in college. So, when asked "when did I start programming?", I never say in college.

First Step

I graduated in 2004 and worked in some engineering jobs that I didn't enjoy. In 2006, I was lucky 🤞 to be selected to work in a governmental Cairo, Egypt based company in the IT department. I did very well in the interview and exam, which led me to work in the GIS (Geographic Information System) section.
I was told you need to learn programming, I was thrilled and answered "Yes, I love programming".
Then, I started learning VB6 (Visual Basic 6) from a book. Then, it was time to write my own code without following book instructions. I was thinking I'm totally ready 😏 but found that coding is much harder than I thought, and googling information back then was so limited. I had to read a lot of documentation and practice by try and error. As a result, I learned VB6, ArcObjects SDK for VBA, Microsoft Access databases.

Second Step

After a while, I started gaining more confidence and exploring C#, WPF, PHP, MySql.
Learning more technologies helped me landing my second job in 2013 with the title Senior GIS Developer. It was in Jeddah, Saudi Arabia, so I had to relocate with my family.
It was challenging, as I had to work with technologies I don't know such as Oracle database, ArcGIS Server, Silverlight, ArcGIS API for Silverlight, and I was up to the challenge.

My First Web Programming Job

In 2015, I got my third job and it was in Taif, Saudi Arabia with the title Expert GIS Developer. The job was all about web programming that wasn't my expertise. So, I had to learn more about HTML and CSS and take JavaScript more seriously. I also learned ArcGIS API for JavaScript, jQuery, Dojo Toolkit, Bootstrap, Node JS, Angular 2+, MongoDB, and Firebase.

What's Next

In 2018, I decided not to work exclusively in GIS, because of the lack of good working opportunities. I moved to a new company to lead a team to build some amazing web apps, but the company failed us 😰.

Nowadays

Now, I got back to Egypt and I have a stable job now as an Expert Web Developer. After the Covid-19 lockdown, I discovered a great community on Twitter for developers. This community showed support to me 🥰 and made me believe that I can contribute more to other developers in the world.
I started blogging here in Dev.to, shared some of my ideas in Codepen.io, taught JavaScript to some code newbies, and lately gave a talk about Node JS, and soon starting a coding channel on Youtube.

Check my Articles here in Dev.to 📝

If you like my tutorials, support me here and follow me on Twitter

سؤال للمبرمجين العرب

Mahallawy — Mon, 03 Aug 2020 01:21:15 +0000

ايه رأيكم نكتب مقالات تقنية باللغة العربية هنا؟

Like, Retweet, and Follow in Twitter using Node JS

Mahallawy — Sun, 02 Aug 2020 13:08:25 +0000

Introduction

In the previous tutorial, I built a node js application with the help of twitter lite to add a new tweet to Twitter. You can see the tutorial here.

In this new tutorial, we'll make a similar application to like a tweet, retweet, and follow a twitter user. The new application follows the same structure used in the previous one.

The Application

As we did in the previous tutorial, We should have 2 files, the first one is config.js that contains twitter lite configurations, and the second file is index.js which contains the following code:

const config = require('./config');
const twitter = require('twitter-lite');
const client = new twitter(config);

We'll use my twitter account to explain how to like, retweet, and follow. So first, we'll search for my account using twitter API:

// Get twitter user
client.get('users/show', { screen_name: 'ahmed_mahallawy' })
    .then(result => {

    var user = result;
    var latestTweet = result.status;
}).catch(console.error);

This code makes a get request to 'users/show' endpoint that retrieves user data using my screen name (screen name in twitter is the one preceded by @). You can see full details for this request here.
We'll save the result in user variable and the user’s latest tweet in latestTweet variable using result.status, so we can use both of them later.
To like the selected tweet, we'll use a post request to 'favorites/create' endpoint that will add a like to tweet using the tweet id_str attribute:

// Like a tweet using its id_str attribute
client.post('favorites/create', { id: latestTweet.id_str })
    .then(result => {

    console.log('Liked tweet successfully!');
}).catch(console.error);

You can see full details for this request here
Now, we make a retweet in a very similar way of liking. We'll make a post request to 'statuses/retweet' endpoint that will make retweet using the tweet id_str attribute:

// Retweet a tweet using its id_str attribute
client.post('statuses/retweet', { id: latestTweet.id_str })
    .then(result => {

    console.log('Retweeted successfully!');
}).catch(console.error);

You can see full details for this request here
Finally, we follow the user by making a post request to 'friendships/create' endpoint using the user screen name:

// Follow a user using his/her screen_name attribute
client.post('friendships/create', { screen_name: user.screen_name })
    .then(result => {

    console.log('Followed ' + user.screen_name + ' successfully!');
}).catch(console.error);

You can see full details for this request here
We wrote all the required code, and now we can run it from cmd using the command:

node index.js

Congratulations!
You did it!!!!!!!!!! 💪

Here's is the full code for index.js file:

const config = require('./config');
const twitter = require('twitter-lite');
const client = new twitter(config);

// Get twitter user
client.get('users/show', { screen_name: 'ahmed_mahallawy' })
    .then(result => {

    var user = result;
    var latestTweet = result.status;

    // Like a tweet using its id_str attribute
    client.post('favorites/create', { id: latestTweet.id_str })
        .then(result => {

        console.log('Liked tweet successfully!');
    }).catch(console.error);

    // Retweet a tweet using its id_str attribute
    client.post('statuses/retweet', { id: latestTweet.id_str })
        .then(result => {

        console.log('Retweeted successfully!');
    }).catch(console.error);

    // Follow a user using his/her screen_name attribute
    client.post('friendships/create', { screen_name: user.screen_name })
        .then(result => {

        console.log('Followed ' + user.screen_name + ' successfully!');
    }).catch(console.error);
}).catch(console.error);

In the following tutorial, we are going to explore more about twitter API. I have several ideas to share with you, so stay tuned 😉

For the full code, you can visit my github page

If you like my tutorials, support me here and follow me on Twitter

Tweeting using Node js

Mahallawy — Sat, 25 Jul 2020 14:24:35 +0000

Introduction

Twitter is a great social media platform where you can interact with a lot of people all over the world. But you can use twitter in a different way, the Developers Way. You can do that by consuming the Twitter API.

Twitter API gives you the capability to do what you do on twitter but from outside of it. You can build applications that can tweet, message, like, and retweet. There are many ways to do that, but here you’ll build an application using Node js.

Here you’ll use only Node Js and twitter lite to post tweets to your account.

Create a twitter developer account

First, you’ll need to have a developer account on Twitter, you can apply for it at Twitter Developer Website.
After you created the developer account, log in to it
Create an App by clicking on Dashboard in the top right of the page, then under Standalone Apps click on + Create App.
Then you’ll only choose a unique name for your App
That’s great. Now you have an App on twitter. We’ll get back to it in a few minutes.

Using Node JS

If you don’t have Node js yet, you have to install it from Node JS website and choose the LTS version.
If you have it installed check its version in cmd using:

node -v

Now start building the application by creating a folder and name it TweetBot (you can change the name).
Open cmd and type the following command to create package.json file:

npm init -y

Then add the twitter lite using npm with the command:

npm install –save twitter-lite

Open VSCode or any code editor and create a file and name it config.js and add the twitter-lite configurations as follows:

module.exports = {  
  consumer_key: ' ' ,  
  consumer_secret: ' ',  
  access_token_key: ' ',  
  access_token_secret: ' '  
}

The configuration values can be found in the app you created in the twitter developer website under Keys and Tokens link. >The latest twitter changes included changing the consumer key name to be API key, and consumer secret name to be API key secret.
You may need to generate access token and secret.
Now create an index.js file and start it by adding the configuration file and twitter-lite to the app as follows:

const config = require('./config');
const twitter = require('twitter-lite');
const client = new twitter(config);

Then, you create a request for the Twitter API.
For tweeting, we can use the post request 'statuses/update'. You can see full details for this request here.
You'll use twitter lite to handle the request (for more information about twitter lite visit their Github page)

client.post('statuses/update', { status: 'Hello world!' }).then(result => {
  console.log('You successfully tweeted this : "' + result.text + '"');
}).catch(console.error);

This post method consists of 2 parts: the first is the endpoint text (which is 'statuses/update'), the second is a parameter object that requires a status attribute that contains the text to be tweeted.
If the request is successful, the result object will contain all tweet information. If an error happens, the catch method will log it to the console.
Now go to cmd and type:

node index.js

And voila!!! You tweeted from your application 💪

In the following tutorial, we will make like, retweet and follow bot, so stay tuned 😉

For the full code, you can visit my github page

If you like my tutorials, support me here and follow me on Twitter

Pictures used in cover are:

SVG Text Editor

Mahallawy — Tue, 07 Jul 2020 13:27:46 +0000

This is a small project I'm working on

This pen has been featured in codepen yesterday and I thought of sharing it with Dev Community here too.

For cover image I used resources from freepik:
Business vector created by studiogstock
Background vector created by starline