Posted on 7 Comments

How To Automate Your Twitter Posts With Laravel and Vue

Twitter Marketing Is Huge

Well for my platform it is anyway, whenever I create a new app or website Twitter is the first social network that I turn to. It’s fast, the analytics are on point, and it’s easy to use, my only issue is that I am busy coding and whatnot to Tweet as much as I would like or need to in order to optimize my reach. This leaves me with two options:

  1. Pay someone to manage my account for me
  2. Learn the Twitter API and write my own automation program to manage it myself

The idea of paying another person to manage my social media just made my stomach and my wallet hurt so the OBVIOUS choice is to use the API. Now let me tell you thisn  API is DENSE there is a lot you can do with it (click here for the docs) so I will only focus on one aspect in this tutorial, sending posts. The first basic application that I wrote was a simple post scheduler, it allows me to create as many posts as I want, set a date-time to post at, then a Laravel job executes at the desired time, then deletes the entry from the database. This basic application has saved me tremendous time because now I can just schedule all my important tweets weeks or months early!
 

Registering Your Twitter App

Before you can do any actual coding you need to register your app on Twitter, head over to the developer portal and create your app. The home page will show a list of your Twitter apps, if this is your first time then you won’t have any apps, click on create new app.
Fill out all the mandatory fields then proceed you should see a screen that shows you your Consume Key and Consumer Secret. Copy those down and also create some access tokens. These access tokens are for writing Twitter apps that only interact with your OWN account. Copy down the access token and the access token secret and that’s all you have to do. Now let’s code!
 

App Components

 

The main page will be a Vue.js app that allows you to add new tweets, and an area below to edit and delete them. In a traditional SPA manner the app will interact with an API for all it’s calls. The backend will consist of one model (Tweet), one controller (TweetController), and one Job ProcessTweet, pretty simple stuff let’s begin.  Start by creating your Laravel application.

laravel new tweeter && cd tweeter && php artisan make:auth

This app only has one composer dependency add it

composer require thujohn/twitter

In the config/app.php make sure to add the following provider and alias

'providers' => [
    Thujohn\Twitter\TwitterServiceProvider::class,
]
'aliases' => [
    'Twitter' => Thujohn\Twitter\Facades\Twitter::class,
]

Lastly run the following command to import the twitter config/ttwitter.php file and modify inserting your Twitter app credentials

php artisan vendor:publish --provider="Thujohn\Twitter\TwitterServiceProvider"

Tweet Model

Now create the Tweet model along with it’s migration

php artisan make:model -m Tweet

The Tweet model only has two attributes a string that holds the content that is limited to 140 characters and a timestamp for when you want the tweet to be published.

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateTweetsTable extends Migration
{
 /**
 * Run the migrations.
 *
 * @return void
 */
 public function up()
 {
 Schema::create('tweets', function (Blueprint $table) {
 $table->increments('id');
 $table->string('content',140);
 $table->timestamp('publish_timestamp');
 $table->timestamps();
 });
 }/**
 * Reverse the migrations.
 *
 * @return void
 */
 public function down()
 {
 Schema::dropIfExists('tweets');
 }
}

The Tweet model is pretty bare bones

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Tweet extends Model
{
 //
 public $fillable = [
 'content',
 'publish_timestamp'
 ];
}

Go ahead and run your migrations we are done with models, now to make our RESTful controller.

RESTful Controller and Routes

Create a resource controller for our Tweet model

php artisan make:controller --resource TweetController

The controller is basic I purposely left out validation and such as a homework exercise for you, but the gist is basic CRUD operations that return JSON

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Tweet;
use App\Jobs\ProcessTweet;
class TweetController extends Controller
{
 /**
 * Display a listing of the resource.
 *
 * @return \Illuminate\Http\Response
 */
 public function index()
 {
 //
 return response()->json(Tweet::all());
 }
/**
 * Show the form for creating a new resource.
 *
 * @return \Illuminate\Http\Response
 */
 public function create()
 {
 //
 }
/**
 * Store a newly created resource in storage.
 *
 * @param \Illuminate\Http\Request $request
 * @return \Illuminate\Http\Response
 */
 public function store(Request $request)
 {
 //create the tweet
 $tweet = Tweet::Create([
 'content' => $request->content,
 'publish_timestamp' => \Carbon\Carbon::parse($request->publish_timestamp)
 ]);
 //Add tweet to the queue
 ProcessTweet::dispatch($tweet)->delay(\Carbon\Carbon::parse($request->publish_timestamp,'America/New_York')->diffInSeconds(\Carbon\Carbon::now('America/New_York')));
//return json
 return response()->json($tweet);
 }/**
 * Display the specified resource.
 *
 * @param int $id
 * @return \Illuminate\Http\Response
 */
 public function show($id)
 {
 //
 return response()->json(Tweet::findOrFail($id));
 }/**
 * Show the form for editing the specified resource.
 *
 * @param int $id
 * @return \Illuminate\Http\Response
 */
 public function edit($id)
 {
 //
 }/**
 * Update the specified resource in storage.
 *
 * @param \Illuminate\Http\Request $request
 * @param int $id
 * @return \Illuminate\Http\Response
 */
 public function update(Request $request, $id)
 {
 //
 $tweet = Tweet::findOrFail($id);
 $tweet->fill([
 'content' => $request->content,
 'publish_timestamp' => \Carbon\Carbon::parse($request->publish_timestamp)
 ]);
 //return json
 return response()->json($tweet);
 }
/**
 * Remove the specified resource from storage.
 *
 * @param int $id
 * @return \Illuminate\Http\Response
 */
 public function destroy($id)
 {
 //
 Tweet::destroy($id);
 }
}

Notice the ProcessTweet job? We will implement that next but for now open up the routes/api.php file and add the following resource route

<?php
use Illuminate\Http\Request;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
Route::middleware('auth:api')->get('/user', function (Request $request) {
 return $request->user();
});
Route::resource('/tweet','TweetController');

Now our Vue application (patience it’s coming) can interact with our backend. Now let’s add our ProcessTweet job and we will be finished on the backend.

ProcessTweet Job

In order to schedule the tweets to post at any given time you must utilize Laravel Jobs this will allow you to schedule your events to fire at a certain point in time. If you aren’t familiar with jobs and queues please look at my previous post because I will not be covering setting up queues in this tutorial, otherwise create a new job

php artisan make:job ProcessTweet

In the handle method we simply call the Twitter API and send the tweet then delete it from the database

<?php
namespace App\Jobs;
use Illuminate\Bus\Queueable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Twitter;
class ProcessTweet implements ShouldQueue
{
 use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
 public $tweet;
 /** * Create a new job instance.
 *
 * @return void
 */
 public function __construct(\App\Tweet $tweet)
 {
 //
 $this->tweet = $tweet;
 }
/**
 * Execute the job.
 *
 * @return void
 */
 public function handle()
 {
 //post the tweet
 Twitter::postTweet(['status' => $this->tweet->content, 'format' => 'json']);
 //delete the tweet from database
 \App\Tweet::destroy($this->tweet->id);
 }
}

Your backend is now functioning run your queue worker and test around with it or continue to creating the Vue application.

Getting The Front End Together

We need to add vue-resource to call our api so let’s add that first

npm install --save vue-resource

Also update the resources/js/app.js file

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
require('./bootstrap');
window.Vue = require('vue');
const resource = require('vue-resource');
Vue.use(resource);
/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
Vue.component('tweet-component', require('./components/TweetComponent.vue'));
const app = new Vue({
 el: '#app'
});

As you can see the example-component has been replaced with the tweet-component rename your ExampleComponent.vue to TweetComponent.vue and update it with the following contents

<template>
 <div class="container">
 <div class="row">
 <div class="col-md-8 col-md-offset-2">
 <div class="panel panel-default">
 <div class="panel-heading">Tweet Scheduler</div>
<div class="panel-body">
 <div class="form-group">
 <input class="form-control" placeholder="Content" v-model="newTweet.content">
 </div>
 <div class="form-group">
 <input class="form-control" type="datetime-local" placeholder="Description" v-model="newTweet.publish_timestamp">
 </div>
<div class="form-group">
 <button class="btn btn-success" v-on:click="addTweet(newTweet)">Add Tweet</button>
 </div>
 <ul v-if="ready" class="list-group">
 <li v-for="post in tweets" class="list-group-item clearfix">
 {{post.content}}
 <span class="pull-right button-group">
 <button class=" btn btn-default" v-on:click="openEditTweet(post)">Edit</button>
 <button class=" btn btn-danger" v-on:click="deleteTweet(post)">Delete</button>
 </span>
 </li>
 </ul>
</div>
 </div>
 </div>
 </div>
 <!-- Modal -->
<div id="editModal" class="modal fade" role="dialog">
 <div class="modal-dialog">
<!-- Modal content-->
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal">&times;</button>
 <h4 class="modal-title">{{selectedTweet.content}}</h4>
 </div>
 <div class="modal-body">
 <div class="form-group">
 <input class="form-control" placeholder="Content" v-model="selectedTweet.content">
 </div>
 <div class="form-group">
 <input class="form-control" type="datetime-local" placeholder="Publish At" v-model="selectedTweet.publish_timestamp">
 </div>
 <div class="form-group">
 <button class="btn btn-info" v-on:click="editTweet(selectedTweet)">Edit Tweet</button>
 </div>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 </div>
 </div>
</div>
 </div>
 </div>
</template>
<script>
export default {
 mounted() {
 console.log('Component mounted.')
 },
 data(){
 return {
 tweets: {},
 newTweet:{
 'content': '',
 'publish_timestamp': ''
 },
 selectedTweet:{
 'content': '',
 'publish_timestamp': ''
 },
 ready: false
 }
 },
 created(){
 this.$http.get('/api/tweet').then(function(data){
 this.tweets = data.data;
 this.ready = true;
 });
 },
 methods: {
 addTweet: function(tweet){
 this.$http.post('/api/tweet',tweet).then(function(data){
 this.tweets.unshift({content:tweet.content,publish_timestamp:tweet.publish_timestamp});
 });
 },
 editTweet: function(tweet){
 this.$http.put('/api/tweet/'+tweet.id,this.selectedTweet).then(function(data){
 let index = this.tweets.indexOf(tweet);
 this.tweets[index] = tweet;
 alert('Updated!');
 $("#editModal").modal('hide');
 });
 },
 openEditTweet: function(tweet){
 console.log(tweet);
 this.selectedTweet = tweet;
 $("#editModal").modal({show: true});
},
 deleteTweet: function(tweet){
 this.$http.delete('/api/tweet/'+tweet.id).then(function(data){
 let index = this.tweets.indexOf(tweet)
 this.tweets.splice(index, 1);
 });
}
}
}
</script>

Open up your resources/assets/sass/app.scss file and add the following fade transition

.fade-enter-active, .fade-leave-active {
 transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
 opacity: 0
}

Run your npm build script as well as your queue worker and start tweeting! You can get the full source code here, and as always please subscribe to my blog via email or push notifications, share, and leave your comment below! If you would like to add a real-time nodejs microservice to your app then read here!

Posted on 1 Comment

Check Out My New Web Application Anon Video Chat

Anon Video Chat

Anon Video Chat is my latest web application, the premise is simple, anonymous video chat using webRTC for secure low latency browser to browser connections. This app assigns you a random channel ID everytime you load the page (you have the option on saving the current ID to your device to use permanently) you can call other channel IDs and if they answer a webRTC connection is set up between your two browsers and the live feeds start. In the future I plan on adding features like file and location sharing and possibly Bitcoin sending/receiving. No data is ever stored on my server making all actions anonymous. I decided to write this for a few reasons

  • I wanted to sharpen my Vue.js skills
  • I wanted to better understand webRTC
  • I need to implement P2P chat in other applications
  • I didn’t want to pay Twilio to do something I could do myself

Why Did I Choose To Release It?

The reason I chose to release Anon Video Chat to the public is because I believe in the philosophy of an open and free internet. Other video applications like Skype collect tons of metadata on you and in turn sell that data on you for a profit. In cases like these you are not the consumer but the product. Not only is this creepy but it affects the performance of the application by providing overhead with no benefit to the end user resulting in laggy performance.

anon video chat screenshot
Screenshot of me and my friend in France using Anon Video Chat

Current Limitations Of Anon Video Chat

Until iOS11 is released later in the fall, Anon Video Chat will not work on iOS devices (blame them not me they decided not to implement webRTC until now!). Other than that it should work on Chrome, Firefox and Opera. If you notice that it doesn’t please email me and let me know jyrone.parker@gmail.com.
Needless to say I wrote this app in a few hours, you can tell by it’s current lack of features but as I stated above I will update it periodically. If the demand calls for it I will add whatever features you guys leave below in the comments. Also if you are interested in contributing to the project, drop your GitHub username in the comment section below and I will add you to the private repo!

Posted on Leave a comment

Adding Javascript To About Me Page

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

Making About Me Interactive

If you have been following this series thus far then you should have an About Me page that looks similar to the following:

About Me Page Pre Javascript
About Me page before javascript implementation

So far we have added the HTML, integrated Bootstrap and added some custom CSS. This blog will serve as an introduction to Javascript. Javascript is the programmig language of the web. HTML defines the content, CSS defines the layout, Javascript defines the behavior. In this tutorial I will introduce you to the high level concepts of Javascript with fine tuned examples later to come.

Random Color Generator

To get you started on the basics of Javascript I will take you through creating a random color generator that will change the background color. This process will require adding a new button to the HTML as well as a new tag <script>. It will also involve an external script that contains the logic for changing the color. Below your phone number add the following HTML

<button id="color-change" class="btn btn-default">Change Background Color</button>

Nothing special the javascript will use this button later. Now create a new folder, call it js/ and inside create a new file called main.js. Inside this newly created file add the following contents.

window.onload = function(){
  document.getElementById('color-change').onclick = function(){
    /* In HTML colors are represented in a 6-digit hexadecimal string
    The values range from 0-9 and A-F*/
    var letters = '0123456789ABCDEF';
    //Colors in HTML are always prepended with a #
    var color = '#';
    //Loop 6 times and randomly select a character from the letters variable
    //Then concatanate to the color string
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    //set the background color of <body> to the random color
    document.body.style.backgroundColor = color;
  };
};

I’m going to break this down top to bottom:

  • window.onload – The window object represents an open window in a browser, onload is a javascript event that runs the specified function once everything on the page loads.
  • function() – A JavaScript function is a block of code designed to perform a particular task.
  • document.getElementById(‘color-change’)- get the button we just created based on it’s ID
  • .onclick = function(){ – onClick is a Javascript event that fires when an element is *WAIT FOR IT…..* CLICKED!
  • var letters = ‘0123456789ABCDEF’; – a variable called letters that holds all the possible values for a HTML color string
  • var color = ‘#’; – In HTML color strings always start with # followed by 6 characters. Here we initialize a color string.
  • for (var i = 0; i < 6; i++ ) { – A Javascript loop that runs 6 times and evaluates everything between {}
  • color += letters[Math.floor(Math.random() * 16)]; – Remember that color string and letters string? Here we add (concatenate) onto
    the color string and select a random character from the letters string
  • document.body.style.backgroundColor = color; – Set the background color of <body> to the newly generated color.

Your page should look similar to this:

About Me Page Newly Added Button
About Me Page Newly Added Button

If you click the button your background should change to a random color like so:
About Me Page Random Color
About Me Page Random Color

Conclusion

I know it isn’t terribly fancy but you just wrote your first web app! It’s not that difficult is it?! Continuing forth I will add more advanced features to teach more in-depth skills. If you haven’t already please subscribe to my blog via email and feel free to leave any comments below!