Category Archives: Tutorials

Configuring Supervisor for Amazon Linux in 2017

in Tutorials, Woes

Fucking pain in the ass. I remember 1 year ago, this process used to be super straight forward and easy.

Anyway with Laravel 5.5 and Amazon Linux in December 2017, here is what I did to make it work.

Install Supervisor

Create supervisor OS config file. This is DIFFERENT from the Supervisor config that runs your process(es). This is for initialising Supervisor in Linux and allow it to be run as a service.

 

Edit supervisor and enter the following:

Change permissions to allow it to be read and executed.

Check if process is running

Try running it

For some reason, my service became supervisor instead of supervisord

Create Supervisor Config file for laraval worker.

Paste this:

Run supervisord to see if its working. For some reason mine only worked in sudo if i put the full path, i.e. /usr/local/bin/supervisord

The command is:

If i’m not wrong running supervisord will also automatically load the file.

LASTLY

Add service to your start up workers.

Restart your motherfucking server, and it should be running by default.

References:
https://stackoverflow.com/questions/28702780/setting-up-supervisord-on-a-aws-ami-linux-server

 

Simple Reusable Captcha Component in AngularJS 2

Simple Reusable Captcha Component in AngularJS 2

in Tutorials

Woohoo, I’m almost done with my new web platform using cutting edge Angular JS2 with Bootstrap 4 alpha 6, powered by Laravel 5.2.

The power of these new technologies are just fucking amazing. During the development process, there were many times I was simply in awe at how easy and convenient it was to create and achieve stuff.

Eg. making a member section post list? Just make a member posts container component, and insert the standard post-list component with a username/id parameter. In the words of the late Steve Jobs,

It just works.

So today I’m sharing a little captcha component I created that can be reused in all your forms. I wanted something light and easy, without integration into the official captcha services. If you’re looking for a real Captcha tutorial, please skip this.

The idea is simply to validate a simple dynamic mathematic question.

The UI would look like this.

We’re calling this the antibot component. Make one by typing this in the command line. If you’re manually creating component files in angular2, you’re doing it wrong.

this will generate these files in your project folder, and also automatically declare them in your app.module.ts

The code of the antibot.component.ts is super lean.

So we’re basically generating two random numbers from 1-20 , the answer will be the sum of the both of them.

We create a checkAnswer() method that checks if the user input = the sum of both parts. If so, we return true. Otherwise, we return an error message which gets printed in the view.

Speaking of the view..

Just some flex box bootstrap 4 alpha 6 code.

We interpolate the two numbers to be shown, and bind the text input to the answer variable.

The error div only shows up if the error variable isn’t null.

That’s it! So how do we use it?

We make use of the ViewChild method to achieve two-way binding between the components.

Here is how the antibot component is implemented in the parent contact form’s view.

And in the contact form component, we just need to perform 4 steps.

Import the Antibot component:

Initialize our Antibot component as a ViewChild:

Import the antibot component before the constructor with ViewChild.

This means that from here on, you can pass data to and from the antibot component via this.antiBot

Lastly, on the onSubmit method, simply run the antibot check. If it returns true, proceed with submitting the form. We don’t even need to handle the error here as it is done within the antibot component. We do however need to revert the loading state of the button back to normal.

And that’s it! We just need to perform these 4 steps for every other form component that we want to implement the antibot component to!

All hail, AngularJS 2!!!

 

File Upload with Angular 2 and Laravel 5

in Tutorials

Ok the latest hurdle was handling File uploads via Angular JS 2, and receiving it on the API end in Laravel 5.

I realised there wasn’t a lot of resources on the internet about this, and earlier reports shown that file uploading was not supported in Angular JS 2. Thankfully, this is now possible and quite easy.

First to set up the file upload on Angular JS 2.

Simply set up a file input component, you can wrap it in a directive, but for simplicity’s purposes, I am simply listening to a generic input here.

In the view,

In the component, we have a fileUpload method which listens on any changes to the input, if so, we upload the file to the API.

And on the receiving controller in Laravel, it’s as simple as:

 

Where the fuck is LocalStorage in AngularJS 2?!

in General, Tutorials

So I’m a new migrator from AngularJS1/Ionic1 to AngularJS2/Ionic 2.

Already I’m working on a new production project while learning on the job, and so far so good, until I ran into my post login processes, where I needed to store the logged in user info in the app, which traditionally would be done with LocalStorage, built in, in Ionic Framework 1.

To my dismay, there are ZERO docs on localStorage in AngularJS 2/Ionic Framework 1, nor the built in Storage service it provides. I managed to only learn about Storage-LocalStorage from a Udemy tutorial and searches, and turns out the way to import the service was wrong in most of the results.

The above syntax will result in an error that says:

Turns out, LocalStorage was removed entirely in Ionic2, and Storage was separated away from the core ionic-angular package, into a separate package called ionic/storage.

One has to install the @ionic/storage package first, by running:

Followed by importing the service in Ionic Framework 2 final, is this:

Remember to do this both in your component and app.module.ts. Remember to also declare the provider in your app.module.ts as so:

So to set and get data from Storage, simply do this:

Set

Get

Clear

 

You’re welcome.

 

 

Angular Translate on Angular JS 2 and Ionic Framework 2

in General, Tutorials

Yes, finally I made it work.

What were the main issues?

  1. I had a lot of peer dependencies errors while installing ng2-translate. Apparently, I can ignore them all.
  2. The right dependencies need to be loaded on your app.ts and page.ts for the plugin to work.

Things to take note of, we load the bulk of the initialisation and config of the ng2-translate plugin in the bootstrap file, aka the app.ts, which serves as the root of your app. In Ionic1, this would be the app.js

This file serves as the base structure upon which you will load the other components upon.

Remember to call the translate service in the constructor! I suppose I am only having this problem now because I am new to AngularJS 2. In future, this should come in as second nature.

Here are the two files that are needed to make this Ionic Framework 2 implementation of ng2-translate run.

Many thanks to Olivier Combe for creating the Angular JS 2 port @ https://github.com/ocombe/ng2-translate

But seriously, the code examples needed to be clearer and more ‘plug and play’.

It was missing import {Http} from '@angular/http'; in the bootstrap file, and it wasn’t clear how the bootstrap and the component files should look like, once installed correctly. But anyway, here you go.

app.ts

 

startup.ts