Download the PHP package ergare17/tasks without Composer

Tasks

Tasques

MP7:

• Webs interessants:

  • FlatIcon
  • Unsplash
  • Placeholder o lorempixel
  • https://screenpeek.io/
• CRUD de tasques per línia de comandes (vegeu més abaix notes sobre les comandes):
  • Comanda task:create:
    • Dos opcions amb nom de tasca o sense nom i executar un assistens pregunti pel nom
  • Idem que l'anterior però Task:delete
  • Comanda task:list: mostrar la llista de tasques
  • Opcional task:edit i task:show
  • Crear els tests necessàris per les comandes. Utilitzar Mocks per tal de poder respondre a preguntes
• TDD: https://laracasts.com/series/testing-vue

MP8: Crud per interfície JSON API

• Només treballem amb Javascript/Vue (no hi ha controlador només vista)
• La vista es comunica amb el servidor(backend) via peticions API JSON
• URL: /tasks
• Components Vue: resources/asssets/js/components. Crear:
  • TaskViewsComponent que inclou els següents components:
  • MessageComponent per mostrar missatges flash
  • WidgetComponent per utilitza widget adminlte
  • TaskComponent: mostra les tasques dind del widget
  • Comunicació entre widgets i events.
• Widgets específics: select: multiselect
• TDD: tots els endpoitns de l'API tenen el seu corresponent test

MP9:

• URL: /tasks_php
• CRUD per interfície web
  • Totes les operacions han de tenir el test específic
  • Una vista per create i una per edit.
• Protegir les tasques utilitzant autenticació per web (sessió) i autenticació per API (Token)
• Afegir suport per a Social Login
• Afegir suport per authorizació: roles i permissos, gates Laravel. Paquet laravel-permission

TODO. Refactoritazació

Comparar 3 interfícies:

• WEB
• JSON API
• CLI

i aprofitar codi (aproximació DRY no WET):

Qüestions a tenir en compte:

• Modificar fitxer viwe Laravel sidebar.php per modificar el menu i tenir dos opcions de menú que apuntin a l'exercici de MP9 i al de MP7

TODO /Notes professor

MP8: Ajax | HTTP CLIENT AXIOS | Working wiht APIs: JSON

Promise Based Axios:

• https://laracasts.com/series/es6-cliffsnotes/episodes/13
• Necessitem tenir accés al MODEL/BASE DE DADES via API: vam començar jugar tema API JSON a: -- https://github.com/acacha/tinkeringJsonApi

TODO:

• CRUD sencer: tenim LIST falta:
  • SHOW
  • STORE
  • EDIT
  • DELETE

JSON APIS:

• https://laracasts.com/series/incremental-api-development

Mostrar els errors (catch de promises, missatges d'error de la pròpia API)

• Que mostrar sinó hi ha cap TODO (base de dades buida)
• Errors HTTP (500, 404, timeouts per que no funcioni connexió) <- Útil per provar mètode abort Laravel

MP8: Vue.js

TLTR:

• Explicar slots: Widget/Panel boostrap -> Col·locar en algún lloc la llista de todos: dins un widget
• Components pares i fills -> comunicació entre components

• Vue Events i Event Dispatcher -> Comunicació entre esdeveniments

  • API $emit (entre esdeveniment) i $on (handler).
  • Object global Window.Event = new Vue -> Objecte compartir entre tots els components
• Llista de todos/tasques dins d'un widget AdminLTE: https://adminlte.io/themes/AdminLTE/pages/widgets.html
• Aprofitar per explicar slots i named slots de Vue.js per fer Content Distribution: https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots
  • Els slots permeten posar components dins altre components i també customitzar parts d'un widget com Footer, Content , Header
• Ja tinc un paquet per anar posant els components AdminLTE fets: https://www.npmjs.com/package/adminlte-vue
  • https://www.npmjs.com/package/adminlte-vue
• MOSTRAR ERRORS API i missatges ok (added task) <- MessageComponent
  • Utilitzar component vam fer en un altre projecte: message /flash message MessageComponent
  • Message component: Funció global flash per mostrar un missatge flash <- Refactorització:
    • Patró de comunicació entre components EVENT DISPATCHER: https://laracasts.com/series/learn-vue-2-step-by-step |
    • https://laracasts.com/series/learn-vue-2-step-by-step/episodes/13
  • Altres llibreries i noms
  • Toastr: http://codeseven.github.io/toastr/demo.html
  • Gritter

COMPONENTS

• tasks
  • adminlte-widget
  • HEADER: title
  • CONTENT: Task list
  • FOOTER:
    • create-task
    • Filters
• message component

Done

Commands

CLI: another interface (like WEB or API JSON)

https://laravel.com/docs/5.5/artisan

php artisan make:command CreateTask

API:

1) Wizard:

Preguntar pel nom de la tasca

2) Nom de la tasca com a paràmetre

Instal·lació vue test utils

Install npm libraries:

Create folder for Tests and file setup.js

Example JSON:

https://github.com/acacha/relationships/blob/master/tests/Javascript/setup.js

File content:

Add mpm script test on package.json:

Hooking into Laravel mix: Observe --webpack-config=node_modules/laravel-mix/setup/webpack.config.js

Folder for Javascript Tests:

Execute tests:

PHPStorm configuration

• New run configuration mocha
• Change mocha executable to mocha-webpack!!!

Example test:

• https://github.com/acacha/relationships/blob/master/tests/Javascript/adminlte-input-gender.spec.js

Exemple sense Laravel Mix:

• https://github.com/laracasts/testingvue/blob/master/episode-1/package.json

Resources

• https://vue-test-utils.vuejs.org/en/guides/testing-SFCs-with-mocha-webpack.html
• https://laracasts.com/series/testing-vue/episodes/6
• https://github.com/vuejs/vue-test-utils
• https://vue-test-utils.vuejs.org/en/guides/getting-started.html
• https://github.com/acacha/relationships
  • https://github.com/acacha/relationships/tree/master/tests/Javascript

Recursos

• https://github.com/ratiw/vuetable-2

  • https://github.com/acacha/users-test/blob/master/resources/assets/js/components/users/UsersList.vue

  Vuetable:

  npm i babel-plugin-transform-runtime babel-preset-stage-2 babel-preset-es2015

https://github.com/ratiw/vuetable-2-with-laravel-5.4/blob/master/resources/assets/js/components/MyVuetable.vue