Posted on Leave a comment

Adding Google Drive Functionality To Screen Recorder Pro

You All Requested Google Drive Functionality!

In my last YouTube video, I was asked to implement Google Drive upload functionality for saving screen recordings. I thought this was a marvelous idea and immediately got to work! We already added OAuth login via Google and Laravel in the last tutorial to interact with the Youtube Data v3 API, so with a few simple backend tweaks, we can add Google Drive as well!

Steps To Accomplish

The functionality I want to add to this is going to be just uploading to Google Drive, with no editing or listing. Keep things simple! This is going to require the following steps

  • Adding Google Drive scopes to Laravel Socialite
  • Create a function to upload file to Google API endpoint

Pretty easy if I do say so myself. Let’s get started with the backend.

Adding Google Drive Scopes To Laravel Socialite

We already added scopes for YouTube in the last tutorial so thankfully not a whole lot of work is needed to add Google Drive scopes. Open up your routes/api.php file and update the scopes array to include the new scopes needed to interact with Google Drive

Route::get('/login/youtube', function (Request $request) {
  return Socialite::driver('youtube')->scopes(['https://www.googleapis.com/auth/youtube', 'https://www.googleapis.com/auth/youtube.upload', 'https://www.googleapis.com/auth/youtube.readonly', 'https://www.googleapis.com/auth/drive', 'https://www.googleapis.com/auth/drive.metadata', 'https://www.googleapis.com/auth/drive.metadata.readonly'])->stateless()->redirect();
});

Make sure you enable the API in the Google cloud console! Now we head over to the frontend Vue application and let’s add our markup and functions.

Open the Home.vue and we are going to add a button in our list of actions for uploading to Google Drive

<t-button v-on:click="uploadToDrive" v-if="uploadReady" class="ml-10">Upload To Drive 🗄️</t-button>
    

In the methods add a function called uploadToDrive() inside put the following

  async uploadToDrive () {
      let metadata = {
          'name': 'Screen Recorder Pro - ' + new Date(), // Filename at Google Drive
          'mimeType': 'application/zip', // mimeType at Google Drive
      }
      let form = new FormData();
      form.append('metadata', new Blob([JSON.stringify(metadata)], {type: 'application/json'}));
      form.append('file', this.file);
      await fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart', {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, *cors, same-origin
        cache: 'no-cache',
        headers: {
          'Content-Length': this.file.length,
          Authorization: `Bearer ${this.yt_token}`
        },
        body: form
      })
      alert('Video uploaded to Google Drive!')
    }

Inside this function we create an HTTP POST request to the Google Drive endpoint for uploading files. We pass a FormData object that contains some metadata about the object and the actual file itself. After the file is uploaded the user is alerted that their video is stored!

Screen Recorder Pro Google Drive upload confirmation

What’s Next?

Next, we will add cloud storage you will be able to share with Amazon S3 and WebShare API! Finally we will add monetization and this project will be wrapped up! If you enjoyed this please give the app a try at https://recorder.jcompsolu.com

Posted on Leave a comment

Finding An App Niche: On Screen Recorder Pro

It All Started Because I Needed A Screen Recorder

I do screen records all the time for my business J Computer Solutions LLC, especially in today’s remote work environment it is often the only way I can efficiently send my clients’ demos! I usually have to go through the same tedious process to get work done.

  • Open QuickTime
  • Record screen capture
  • Save file
  • Open up email
  • Upload file
  • Send to client

I eventually got very bored of it and wrote a progressive web app called Screen Recorder Pro to simplify the process and make it easier. Using the MediaRecorder API I capture the screen, save the output as a webm video file and from there I can take one of the following actions:

  • Share direct link with client
  • Download the file
  • Email the file
  • Upload the file to Google Drive
  • Upload the file to YouTube
Screen Recorder Pro in action

This was saving me precious time in getting work done as well as feedback. I started to ponder on how useful this would be for other users and decided to package it up. This PWA can be used on any Windows, Mac OSX or Linux desktop computer (mobile does not support MediaRecorder yet). I monetized the web app with Google Adsense and put it out to the world. To my surprise, it has gotten very positive feedback processing gigabytes worth of video data so far! This blog post isn’t so much about a screen recording software as it is about creating niche products of value.

Solve One Problem At A Time

I have been saying this ever since my first days of making app revenue. The apps that make the most money tend to be the simpliest. They solve one problem and solve that problem very well. It’s the Unix philosophy at scale! Also if you are struggling with coming up with a concept, create an app that solves a PERSONAL problem for you first! Chances are if it solved a problem for you, then there are 1000s of other people whose problems you just solved as well! Once you find that pain point and solve it, you can monetize. From there iterate and create more features that solve more problems in that realm. In regards to Screen Recorder Pro, the next features I plan on adding is the ability to stream to YouTube and Twitch directly in the browser. No need for any downloads, I have given streamers the ability to set up anywhere and get to work! I plan on keeping this web app free monetized with ads. I don’t believe people should have to pay service fees monthly for the vast majority of software (but that’s another blog article entirely). Due to the nature of the app, it’s feasible to believe there will be enough screen time on the app where I don’t have to monetize in other ways but we will see. Do me a favor and check out Screen Recorder Pro and while you are at it cop some #CodeLife swag!

Posted on Leave a comment

This Might Be My Biggest Success Yet: A MobiSnacks Story!

MobiSnacks Was Conceptualized In 2015

I was working at Sephora in San Fransico working as a senior software engineer. I had a daily routine after coming home after work. I would go to the corner store, get some snacks, then proceed to walk to my condo get blazed then have a munchie feast. During one of my cannabis epiphanies I had an idea. Why not create an app that allows you to order your snacks from local corner stores and have delivery drivers drop off the merch? I went and wrote a demo and showed it to my homie Shay the next day at Sephora. He thought it was a solid concept so I decided to show it to the aforementioned corner store.

Going forward a few months I had a few sales and things were going good….until they weren’t. I moved back to Kentucky and quickly things fell apart and I lost a lot of time and money. It was such a hit actually that I trashed the app, then a couple years later goPuff came out and essentially MobiSnacks was dead in the water. I was so embittered by the experience that I vowed to never touch the source code again.

The 2020 Resurrection

From 2017 – 2020 one of my best friends would occasionally ask me “Hey what’s going on with MobiSnacks?“. I knew he thought it was a good idea but I was done. One day we are chilling at his place and we are talking about startups and his wife cooked for us. While eating I had the thought “man screw UberEats I wish I could just order directly from chefs!”. At that moment a lightning strike hit my brain and MobiSnacks was reborn. I told my homie and asked him if he wanted to come on-board! During this time we were a couple weeks away from the lockdown from COVID-19. In hindsight the timing was perfect. We were approached by another local startup called Quarantine and Eatz; a platform where they cook the food and throw a virtual Instagram live party. They needed logistics and drivers and first day MobiSnacks did over 200 orders on the website! That was all the motivation I needed to go back full swing.

Building The Brand

Over the past year, the app has a little over 200 downloads with a growing social media presence. I didn’t want to repeat the mistakes of the past so I’m taking everything slow. Talking to each driver, talking to each chef, and talking to each customer. It was during this time that I realized things about this platform I created I never considered. The first was that I was serving food deserts. Last May I got a order notification and when reviewing the order I realized I had NO IDEA who this woman is. I decided to give her a call and introduce myself as the CEO of MobiSnacks and ask her how she found out about our platform. She told me Facebook, which made me elated. I told her I would personally deliver the order and I drove out. I arrived to an independent senior citizen complex and met the lady. She told me that since the shutdown she hasn’t been allowed to see her adult children who normally grocery shop for her. The buses weren’t running at the time and she couldn’t drive. She was literally starving and was on a budget that UberEats was too expensive for her. This brought tears to my eyes and was the first time I heard the term “food desert”. I would have never thought that I would build something that literrally made a life-changing difference in someone’s life. I knew at that moment that I had something and I had to keep going.

Going Forward

MobiSnacks has a new feature called MobiSnacks TV, a platform that allows you to view pre-recorded and live-streamed content from chefs all around the world! The content line up comes out June 1st and I couldn’t be more excited. In addition there will be MobiSnacks+ the premium subscription service where you can get the fresh ingridents for the shows sent directly to your door. Also there will be updates including meal prep, 1-1 cooking classes and more! I am often asked what my exit strategy is, do I want to sell or do I want to run it in perpetuity. To be honest I go back and forth between the two options. I would love to sell to a Food Network or UberEats but I also wouldn’t mind running it if the numbers make sense. In either case MobiSnacks is a success and I couldn’t be happier. If you haven’t downloaded the app on iOS or Android then do so and leave feedback!

Posted on Leave a comment

Fixing A Hacked WordPress Site

Hacked WordPress Sites Suck!

Back in November my company J Computer Solutions LLC was the subject of a WordPress hack that affected all of my client and personal websites! This was an expensive lesson in security and eventually I recovered my client data! As a result of this experience I have decided to share with you what I did to help those who are also experiencing the same thing. I’m even going to throw in some tips to prevent this from happening in the first place!

How It All Started

So one day I get a bunch of emails from my monitoring app that is telling me that not one, not two but ALL OF MY WORDPRESS sites were down. No sooner I start getting a barage of calls and texts from my clients complaining that their websites (many of whom, these sites were the backbone of their businesses) where down. After talking to each client individually I narrowed down the cause. One of my clients had installed a cracked plugin to avoid paying the original developer. I promptly removed him from my service.

A cracked plugin is a pirated plugin that allows website administrators to use software without paying the original developer. Often these plugins have malware embedded inside them, hacking the site.

What Was The Hack

The hack would place <script> tags on every .php page and in every post in the database that would cause a series of redirects to a bunch of spam sites. This happened on all of my WordPress sites and the first thing I noticed was that all of the sites were going redirecting to the same series of three URLs. Knowing that the hack was caused by a plugin and not a human meant that if I could reverse engineer the hack, I could come up with a algorithmic solution to fix all of my hacked WordPress sites.

wordpress hack redirect
An example of one of my client sites doing redirects

Fix: wp export & RegEx

I knew I wasn’t going to go through all the .php files and remove the malware; way too many files and the database is more important I can always reinstall WordPress. That being said I decided the best thing to do was the following

  • Install a fresh version of the website on a new server
  • Export the post, page and product data using the wp cli
  • Use RegEx to find and replace malware data with appropriate data

Luckily I use Laravel Forge and can manage my WordPress installations from a dashboard. I created a fresh database and fresh WordPress instance.

On the old instance, I SSH’d into the machine and ran the following command in the website directory

wp export

This will generate a .xml file that contains all of the post, page and product data. After opening the .xml file in Atom I see one of the URLs immediately

Ya.....that is not my URL

Atom has some great RegEx find and replace functionality I needed to replace all these URLs with the URL of the website here is an example for this site.

After replacing all malware URLs you can save the .xml file and head back to your fresh installation. Head over to tools -> import and select the default WordPress importer. Simply upload the XML file and you should have your site back hack free!

Hacks Are Horrible

However they can be mitigated, I hope this tutorial helps anyone who experienced the same hack I did and can get their sites back up. If this did help you please share the blog post!

Posted on Leave a comment

Why You Should Use Twitter Fleets To Promote Your Apps

Twitter Fleets Are Here

Twitter has introduces a “Stories” like feature today called Fleets. Essentially they are tweets that disappear after 24 hours. Yours and all of the people you follow’s Fleets appear on the top of the timeline. While many people were upset they got stories instead of an edit button (it’s a stupid idea and will never happen stop asking) content creators and entrepreneurs such as myself were elated. Twitter is where most of my reach happens personally, I average 200K impressions per month and most of my clients come from the platform. In this article I will explain why you should be using Twitter Fleets to promote your apps and help you continue to live a #CodeLife

Twitter launched Fleets today and it is awesome!

Fleets Offer An Incentive Of Time

The number one reason I feel Fleets are a great addition to app developers trying to promote their apps and brands is because of the fact that they disappear after 24 hours. This creates a sense of urgency for your followers to see your content. Take the scenario below:

You are a game developer and want to promote your latest DLC content. You have a decent sized following on Twitter. You tell your followers that over the next 5 days you will be posting Fleets with bits of a coupon code and if you have all the pieces you can get the new DLC for free.

Over the next 5 days your followers who want this new DLC will be anxiously waiting for you to post your next Fleet, thus creating user engagement. This is just one example but it can be extrapolated and juxtaposed across many.

Another way that app developers can use Fleets is for promotions of upcoming events such as app launches. Instead of clogging the TL with simple tweets such as ” X launches in Y days!” You can make a story, still gets the message across to your audience while leaving your timeline open to more quality posts.

How will you use Fleets to promote your apps? Leave a comment below and don’t forget to sign up for the #CodeLife investment group and start earning residual income with apps!

Posted on Leave a comment

Building A Twitter Discord Bot In Node.JS

Discord Is Awesome, So Is Twitter

I have a discord server and I have a pretty decent sized Twitter following. I wanted to add a bot that followed my tweets and sent them as messages in my #twitter channel on my server. I refuse to pay for software and I have a hyper distrust of other’s software so I wrote my own. In this node.js script I have one file main.js that uses 3 dependencies: twit (for Twitter streaming API), Discord.js (for well….Discord) and dotenv (to load environment variables). The script is ~30 lines long and is available on my Github.

Create a Discord Bot using the Twitter Streaming API

Main.js

require('dotenv').config()
const Twit = require('twit')
const Discord = require('discord.js');
const client = new Discord.Client();
var T = new Twit({
  consumer_key:         process.env.TWITTER_CONSUMER_KEY,
  consumer_secret:      process.env.TWITTER_CONSUMER_SECRET,
  access_token:         process.env.TWITTER_ACCESS_TOKEN,
  access_token_secret:  process.env.TWITTER_ACCESS_TOKEN_SECRET,
  timeout_ms:           60*1000,  // optional HTTP request timeout to apply to all requests.
  strictSSL:            true,     // optional - requires SSL certificates to be valid.
})
client.login(process.env.DISCORD_TOKEN);
client.once('ready', () => {
  var stream = T.stream('statuses/filter', { follow: [process.env.TWITTER_USER_ID] })
  stream.on('tweet', function (tweet) {
    //...
    var url = "https://twitter.com/" + tweet.user.screen_name + "/status/" + tweet.id_str;
    try {
        let channel = client.channels.fetch(process.env.DISCORD_CHANNEL_ID).then(channel => {
          channel.send(url)
        }).catch(err => {
          console.log(err)
        })
    } catch (error) {
            console.error(error);
    }
  })
})

.env file to load variables.

TWITTER_CONSUMER_KEY=
TWITTER_CONSUMER_SECRET=
TWITTER_ACCESS_TOKEN=
TWITTER_ACCESS_TOKEN_SECRET=
TWITTER_USER_ID=
DISCORD_TOKEN=
DISCORD_CHANNEL_ID=

Now all you have to do is run it using the following command

node main.js

Don’t forget to get your application keys from the Discord developer portal and the Twitter developer portal. I made a Youtube video showing the process in detail. Want to start making money and living a #CodeLife? Join the group today!

Posted on Leave a comment

10 TIPS TO HIRE AND RETAIN GREAT SOFTWARE DEVELOPERS

10 Tips to Hire and Retain Great Software Developers

Software developers could be the secret weapon for most companies. They can be as important as your leadership team. Do you want to know why? According to this recent Stripe and Harris report, 70% of your company’s success depends on the quality of your software developers. People spend most of their time on their phones on mobile apps than doing any other activity. So companies need to make users feel products are easily accessible. A mobile app for a retail company can significantly boost its sales. Us, as users, prefer to look for deals on a functional app rather than shopping at a store.

However, most software developers prefer to work remotely according to these statistics. And it’s no surprise. With the rise of tech jobs, the need for remote working increases. But hiring a remote worker is not an easy thing. Here, we’ll show you 10 tips that’ll ease your job when recruiting remote software developers.

  1. Don’t Use a Generic Hiring Test

If you’re not a software developer or have zero knowledge of coding, likely, you’ll just find a generic test on the internet and make aspirants show their skills this way. First, the more generic it is, the more likely applicants will know it. Maybe other recruiters like you already used it. So it won’t transparently show you applicant skills. 

Besides, sometimes generic tests do not reflect the requirements of your company. So this won’t show you how an applicant would fit in your business. If you have coding knowledge, test them with potential programming challenges to prove themselves. If you don’t know how to code, you can consult with the experts to draft a suitable test.

  1. Provide Developers with the Tools They Need 

Good developers will work only with companies that provide a good environment, and this includes having tech tools that’ll make their jobs easier and more efficient. This is also something that your company can benefit from. If your software developer is productive and efficient, this will show positive outcomes for your business. Some of these tools could be ClickUp, KeyCode Info, and HTML Minifier. The key is to become a software developer’s heaven.

  1. Don’t Limit Resources

Even though software developers don’t look like artists, they are. And artists need the freedom and tools to scale their creativity level. Developers solve problems through their programming knowledge and there’s not only a single way to solve problems – there are many ways to do it. Setting boundaries will only make them waste time and limit their creativity. The best way to act is to allow them to work with different programming languages and tools that’ll make them feel comfortable.

  1. Maintain Constant Communication

When working on a digital product, communication is key. If you want an intuitive interface, you need to work shoulder-to-shoulder with your developer. If the developer doesn’t have good communication skills, the project won’t be successful. So it’s very important to check that aspirants understand your point of view and are able to come up with great ideas that’ll make the project better.

  1. Consider Talent vs Resume

When hiring a remote software developer, it’s not all about their resume. In the end, you need to know if they’re capable of doing the job your company needs to get done. Even though an aspirant has worked at a great company, it doesn’t mean he’ll be able to run your project successfully. For example, there could be coding bootcamps graduates that don’t have any experience at all but their skills are elevated. That’s why it’s so important to test them before hiring someone. Tests will tell you more than their resume.

  1. Ensure Steady Internet Connection 

When working remotely, this is very important and will also result in good communication, if your developer has a stable internet connection. Imagine this: maybe you found a great software developer; he passed the test and he has a great attitude, but he doesn’t have a good connection. This will make your recruitment process effortless because that developer is not going to meet deadlines and be as productive as other aspirants would.

  1. Offer Career Opportunities 

According to this Stack Overflow Developer Survey, an important benefit that software developers consider when choosing a job is to have career development opportunities. Don’t be afraid to offer them this opportunity when recruiting because it will be reflected in your company’s outcome. Career opportunities increase motivation, therefore, developers will be more likely to work efficiently.

  1. Inspire Passion and Motivation

Someone that’s only applying for a job position because it’ll pay the bills is not the kind of person you want in your company. Passionate people don’t only work because of the salary, they do it because they enjoy it, and they will probably put all their effort into succeeding because they challenge themselves towards better results every time. Passionate aspirants will be the ones that’ll bring success to your company.

  1. Know That Coding Ability is Crucial

Badly-written code is not just something about aesthetics, it can cause terrible productivity issues to your company. It usually has to be re-written or modified. Maybe the algorithm is functional, but if you want to modify anything later, it’ll be a tedious task and your team will have to spend more time fixing the code. So when you’re hiring a remote software developer, make sure they’re able to produce well-written code.

  1. Be Clear About Deadlines and Timezones

Time Zones can be very tricky when it comes to meeting deadlines, so it’s important to be clear with aspirants. This way, they can organize their schedule towards the deadlines and they’ll be more likely to meet deadlines.

This post was provided by Career Karma

Posted on Leave a comment

Adding Github Actions To Your Laravel Application

Github Actions Make CI/CD A Breeze

I will be the first to admit that even though I have an adequate DevOps and programming knowledge base; I have been reluctant to embrace best practices such as testing and employing continuous integration. I finally got over it once I realized that I was wasting time and losing money by NOT doing these things. Since I use Github for over 90% of my projects I decided to give Github Actions a try.

GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.

Github actions allows for ultimate flexibility for continuous integration and deployment.

With Github Actions you can choose when deployments run based on triggers such as: push, merge, comments and more. In this example I will show you how to add a simple .yml file that will run your Laravel tests and push to Laravel Forge upon successful tests.

Enabling Github Actions In Your Project

The first thing that must be done in any project to use Github Actions is to add the .github/workflows/ci.yml file this file will house the YAML script that will run on your deployments. In my example the code looks like this

on: push
name: CI
jobs:
  phpunit:
    runs-on: ubuntu-latest
    container:
      image: kirschbaumdevelopment/laravel-test-runner:7.3
    services:
      mysql:
        image: mysql:5.7
        env:
          MYSQL_ROOT_PASSWORD: password
          MYSQL_DATABASE: test
        ports:
          - 33306:3306
        options: --health-cmd="mysqladmin ping" --health-interval=10s --health-timeout=5s --health-retries=3
    steps:
    - uses: actions/checkout@v1
      with:
        fetch-depth: 1
    - name: Install composer dependencies
      run: |
        composer install --no-scripts
    - name: Prepare Laravel Application
      run: |
        cp .env.ci .env
        php artisan key:generate
    - name: Run Testsuite
      run: vendor/bin/phpunit tests/
    - name: Deploy to Laravel Forge
      run: curl ${{ secrets.FORGE_DEPLOYMENT_WEBHOOK }}

The first line “on” defines the trigger that will run the script, in this case it is whenever we push to our repo. Next we give it a “name” which in this example we call CI. Afterwards we define “jobs” that will run when the Action is called, in this example we will run phpunit on a linux machine running the latest ubuntu OS running a laravel 7 docker image. Next we define the services, we only need to use MySQL so we bring in that image. Lastly we define the steps :
– checkout the latest push
– install the Composer dependencies
– copy the .env.ci to the .env and generate the encrypted application key
– run the tests
– deploy to Laravel Forge

# database
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=test
DB_USERNAME=root
DB_PASSWORD=password

Above is the .env.ci file. In the last step we use secrets. Secrets are a way for you to put sensitive information like keys in your repository settings without putting them in source control.

After each push now it will run the tests and if they pass will deploy to Laravel Forge. Watch my YouTube video for a more in depth explanation!