quimgc/tasks

The Laravel Framework.

Tasks

, _(*1)

Laravel Scheduling

https://laravel.com/docs/5.6/scheduling, _(*2)

Al fitxer App\Console\Kernel es pot configurar a la funció shcedule., _(*3)

Un cop configurar s'ha d'afegir una configuració al cron:, _(*4)

* * * * * php /path-to-your-project/artisan schedule:run >> /dev/null 2>&1

Error de moustachs amb PHP

Per solucionar l'error dels {{ variable }} del vue a l'interior d'un fixer .php, la solució està en posar @ al devant de {{ variable }}, _(*5)

Enllaç de adminlte alarms

https://adminlte.io/themes/AdminLTE/pages/UI/general.html, _(*6)

JSON amb php

http://php.net/manual/es/book.json.php, _(*7)

json_encode és per passar d'una variable a JSON., _(*8)

PROMISES

Si va bé executarà una cosa, i si va malament, una altra., _(*9)

npm run watch // npm run watch-poll

Serveix per compilar al instant., _(*10)

Crear una comanda

Per crear una comanda s'ha de fer:, _(*11)

php artisan make:command nomFitxerComanda

Extres

Agafar header d'una taula per no implementar-ho hardcoded

$tasks = Task::all()->toArray();
$headers = array_keys($tasks[0]);
dd($headers);

El resultat és:, _(*12)

array:4 [
  0 => "id"
  1 => "name"
  2 => "created_at"
  3 => "updated_at"

Ara es pot utilitzar $headers per a retornar alguna cosa en format de table:, _(*13)

    $this->table($headers,$tasks);

D'aquesta forma, no hi ha res hardcoded i si mai es modifica la taula, el codi funcionarà igual., _(*14)

DIRECTORI MENÚ ESQUERRA

NPM RUN HOT

S'ha d'executar abans d'arrencar el servidor web, ja que utilitza el port 8080., _(*15)

API passport

Aquests passos es fan cada cop que es treballi amb API., _(*16)

https://laravel.com/docs/5.5/passport, _(*17)

per executar automàticament el php artisan passport:install es pot fer:, _(*18)

Al fitxer DatabaseSeeder.php a la funció run, afegir:, _(*19)

Artisan::call('passport:install');

VUE multiselect

https://github.com/monterail/vue-multiselect, _(*20)

Paquet laravel

Un paquet laravel ho és perquè té providers. Els paquets s'instal·len gràcies als fitxers composer.json., _(*21)

CAN'T CD NODE_MODULES

S'ha de fer un npm install., _(*22)

npm install

Crear un objecte de tipus REQUEST

Per crear:, _(*23)

php artisan make:request nom

Els requests ha de complir:, _(*24)

• Validacions.

URL

Enllaç: http://acacha.org/mediawiki/URL#.WhcefU3Wx-U, _(*25)

User Agent -> browser., _(*26)

Paquet es divideix amb dos parts:, _(*27)

• Capçalera-> Metdades., _(*28)

• Dades -> la informació., _(*29)

Per diferenciar entre URL i URI és:, _(*30)

• Si ens diu com arribar a aquella cosa és URL.
• Si identifica alguna cosa és URI.

Helpers

Al composer.json s'ha de canviar l'autoload apuntant al fitxer helpers.php, d'aquesta forma s'aconsegueix que tothom pugui utilitzar aquest fitxer., _(*31)

   "autoload": {
       ...
        "files" : [
         "app/helpers.php"
        ]
    },

Tot seguit s'executa:, _(*32)

composer dumpautoload

PLUCK

Aquest mètode agafa tots els valors a partir d'una clau passada com a paràmetre., _(*33)

$collection = collect([
    ['product_id' => 'prod-100', 'name' => 'Desk'],
    ['product_id' => 'prod-200', 'name' => 'Chair'],
]);


$plucked = $collection->pluck('name');

$plucked->all();

// ['Desk', 'Chair']

També es pot fer:, _(*34)

    $plucked = $collection->pluck('name', 'product_id');

    $plucked->all();

    // ['prod-100' => 'Desk', 'prod-200' => 'Chair']

SCOPED

Assegura que només s'apliquen els canvis al style que es vol i no en general., _(*35)

SPA

Toggle button

Primer que tot s'ha d'instal·lar:, _(*36)

https://github.com/euvl/vue-js-toggle-button, _(*37)

Tot seguit a l'/home/quim/Code/Tasks/resources/assets/js/quimgc-tasks/index.js s'ha d'afegir:, _(*38)

import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton)

Un cop fet això, el que s'ha de fer és wrapper, al fitxer Task.php s'ha d'afegir:, _(*39)

public function toArray()
    {
        return [
            'id' => $this->id,
            'name' => $this->name,
            'description' => $this->description,
            'user_id' => $this->user_id,
            'completed' => $this->completed? true:false,
            'created_at' => $this->created_at."",
            'updated_at' => $this->updated_at."",
        ];
    }

Amb això sobreescrivim el mèotode toArray per canviar el 0 o 1 per false o true., _(*40)

Laravel Dusk

https://laravel.com/docs/5.5/dusk, _(*41)

S'han de crear tests de tipus Browser seguint les tres fases:, _(*42)

• Preparació, _(*43)

• Executar, _(*44)

• Comprovar, _(*45)

Instal·lació

composer require --dev laravel/dusk
php artisan dusk:install

La última comanda crea una carpeta on s'emmagatzemen imatges del moment que ha fallat per poder veure l'error a posteriori., _(*46)

Per crear un test:, _(*47)

php artisan dusk:make nomTest

Per executar un test no es pot fer amb shit + f10, s'ha de fer per terminal:, _(*48)

php artisan dusk /ruta/fins/al/test

Però també s'ha de tenir un servidor obert per poder executar el test., _(*49)

Si es comenta una linia del fitxer DuskTestCase.php es pot veure com s'executa el test:, _(*50)

 protected function driver()
    {
        $options = (new ChromeOptions)->addArguments([
            '--disable-gpu',
            //'--headless' linia a comentar
        ]);

        return RemoteWebDriver::create(
            'http://localhost:9515', DesiredCapabilities::chrome()->setCapability(
                ChromeOptions::CAPABILITY, $options
            )
        );
    }

Per configurar el port del test és a .env.dusk.local:, _(*51)

Recomanació: Separar els entorns (Bd, Ports, Controladors,...) per cada cosa., _(*52)

...
APP_URL=http://localhost:8090

DB_CONNECTION=sqlite_dusk_testing
...

Estem indicant que per als test s'utilitzarà el port 8090 i la bd sqlite_dusk_testing., _(*53)

Modificar també amb la mateix configuració .env.dusk.testing., _(*54)

S'ha de tenir en compte que s'ha d'obrir un servidor escoltant pel mateix port que s'executarà el test:, _(*55)

php artisan serve --port=8090 --env=dusk.local

També s'ha de modificar el fitxer database.php i afeigr:, _(*56)

'sqlite_dusk_testing' => [
            'driver'   => 'sqlite',
            'database' => env('DB_DATABASE_TESTING', database_path('nom.bd.creada')),
            'prefix'   => '',
        ],

Comunicació entre pare i fill

Per parlar del fill al pare;, _(*57)

• És necessita events.
• Propietats.

VUE CUSTOM-UI

Enllaç wiki acacha: - http://acacha.org/mediawiki/CSS#.WljKDk3Wx-U, _(*58)

S'ha creat un nou projecte vue:, _(*59)

vue init webpack nomPlantilla

S'ha executat npm run dev per executar i veure les modificacions al navegador., _(*60)

• CSS Normalize per evitar els css dels user agents: https://necolas.github.io/normalize.css/

Per veure la disponibilitat de les etiquetes CSS als diferents navegadors: - https://caniuse.com/, _(*61)

VUE QUILL EDITOR

https://github.com/surmon-china/vue-quill-editor, _(*62)

CREAR CONTROLADORS

php artisan make:controller nomControlador

Automàticament apareixerà a l'apartat de controladors del nostre projecte., _(*63)

EMAIL

https://laravel.com/docs/5.5/mail, _(*64)

Per crear un OrderShiped:, _(*65)

php artisan make:mail OrderShipped

Crear la plantilla amb la que s'envia el mail (markdown)

https://laravel.com/docs/5.5/mail#markdown-mailables, _(*66)

MAIL EXPLOTACIÓ

Des d'explotació s'ha d'enviar correctament el correu al seu destinatari. Es pot usar els següents drivers:, _(*67)

• Si s'utilitza gmail a username i password s'ha de posar el de gmail.

NOTES

Amb $browser->script("es pot executar qualsevol codi JS");, _(*68)

EVENTS

https://laravel.com/docs/5.5/events, _(*69)

VUETIFY

https://vuetifyjs.com/vuetify/quick-start, _(*70)

Primer que tot es crea la plantilla:, _(*71)

$ z Tasks
$ cd vue
$ vue init vuetifyjs/webpack vuetify-tasks

Apareix el següent wizard:, _(*72)

? Project name vuetify-tasks
? Project description A Vue.js project
? Author quimgc <quimgonzalez@iesebre.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner karma
? Setup e2e tests with Nightwatch? Yes
? Use a-la-carte components? No
? Use custom theme? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

Un cop creat s'entra dins del directori creat i s'executa:, _(*73)

npm run dev

drawer -> calaixera de navegació., _(*74)

REDIS

Instal·lar al servidor:, _(*75)

composer require predis/predis
sudo apt-get install redis-server

Al .env posar QUEUE_DRIVER=redis, _(*76)

També instal·lar:, _(*77)

sudo apt-get install supervisor
cd /etc/supervisor/conf.d
sudo nano tasks-laravel-worker.conf

Afegir tot això al fitxer de configuració (compte amb els paths):, _(*78)

    [program:tasks-laravel-worker]
    process_name=%(program_name)s_%(process_num)02d
    command=php /home/quim/Code/Tasks/artisan queue:work redis --sleep=3 --tries=3
    autostart=true
    autorestart=true
    user=quim
    numprocs=8
    redirect_stderr=true
    stdout_logfile=/home/quim/Code/Tasks/storage/logs/worker.log

Al fitxer .env canviar QUEUE_DRIVER=sync per QUEUE_DRIVER=redis, _(*79)