Visiteu:
- https://tubeme.acacha.org/ionic_real | https://tubeme.acacha.org/ionic_realworld | https://tubeme.acacha.org/ionic_real_world
Codi en producció:
Casteaching és una aplicació desenvolupada per Sergi Tur Badenas. Es tracta d'una web app i REST API per a ensenyar utilitzant screencasts.
L'aplicació està desenvolupada amb Laravel i utilitzant TDD (Test Driven Development). Podeu veure com s'ha realitzat aquesta aplicació a la sèrie de vídeos:
- Casteaching Landing Page -> Descarrega app a Google Play
- API REST que utilitzem -> Videos 124 i 15 de https://tubeme.acacha.org
- Coneixements bàsics de vue. Recomano haver fet la sèrie: https://www.vuemastery.com/courses/intro-to-vue-3/intro-to-vue3
- Coneixement Vue real world: https://www.vuemastery.com/courses/real-world-vue3/rwv3-orientation
- Opcional (paquet casteaching javascript): TODO
Si no coneixeu les bases de Vue us recomano el curs:
https://www.vuemastery.com/courses/intro-to-vue-3
Aquest repositori conté el codi de la versió per a Ionic/Mòbils de casteaching. Es tracta d'una versió de la web app casteaching adaptada a mòbils i creada amb Ioni i VueJs. L'aplicació Ionic és una aplicació Frontend que utilitza Axios per comunicar-se amb el backend (REST API de l'aplicació casteaching)
- Sergi Tur Badenas: https://acacha.github.io
- Instagram: https://instagram.com/acacha_dev
- Github: https://github.com/acacha
- Audí Bielsa, Daniel: https://github.com/daudi44/casteaching-ionic
- Avante Caballé, Marc: https://github.com/AvanteCaballe/casteaching_ionic
- Brusca Manchón, Albert: https://github.com/Albert-Brusca/casteachingIonic
- Goncear, Tudor: https://github.com/tgoncear/casteaching-ionic
- Moreno Giraldo, Jhon: Jhon1348: https://github.com/Jhon1348/casteachingIonic
- Muñoz Zafra, Ferran | https://github.com/Fmunozzafra/casteachingIonic
- Pont Lopez, David: Palanka777: https://github.com/Palanka777/casteaching_ionic.git
- Rius Rivas, Alba: AlbaRiius: https://github.com/AlbaRiius/casteachingIonic
- Tomas Altadill, Axel: AxelTomas99: https://github.com/AxelTomas99/casteaching_Ionic
- Gabriel Urs. Gabriel: l3lackJack https://github.com/l3lackJack/casteachingIonic
- Tur Badenas, Sergi: Alumne DAM Prova: https://github.com/acacha/casteachingIonic
Similar a com vam fer amb el projecte ionic-comptador: https://www.youtube.com/watch?v=e03ea9TQ6lg&list=PLyasg1A0hpk0Z60Jg0kMpjP_Nw5ZTA7My&index=8
Curs de vue mastery: https://www.vuemastery.com/courses/real-world-vue3/deploying-with-render/
Aneu a render.com i entreu amb el vostre usuari de Github:
- Feu click a botó New.
- Escolliu new static
- Poseu la URL de vostre projecte Github (és posible que tingueu que donar permisos o fer el projecte public)
- Nom del projecte: CasteachingIonic (o quelcom similar identificatiu, per exemple el vostre nom)
- branch: production
- comanda: npm run build
- carpeta: dist
Captura exemple:
Feu click a create new service.
- Audí Bielsa, Daniel: https://casteaching-ionic-daniel-audi-bielsa.onrender.com
- Avante Caballé, Marc: https://casteachingionicavante.onrender.com/
- Brusca Manchón, Albert: https://casteachingionicalbert.onrender.com
- Goncear, Tudor: https://casteaching-ionic.onrender.com/
- Moreno Giraldo, Jhon: Jhon1348: https://jhon-casteaching-ionic.onrender.com
- Pont Lopez, David: Palanka777: https://casteachingionic-palanka.onrender.com
- Rius Rivas, Alba: https://casteachingionic-fvju.onrender.com
- Tomas Altadill, Axel: AxelTomas99: https://casteaching-ionic-1ykr.onrender.com/
- Muñoz Zafra, Ferran | https://casteachingionicfmz.onrender.com
- Urs, Gabriel: l3lackJack: http://TODO.gabriel.alumnedam.me/
- Tur Badenas, Sergi: Alumne DAM Prova: https://casteachingionicstatic.onrender.com
https://tubeme.acacha.org/ionic_real | https://tubeme.acacha.org/ionic_realworld | https://tubeme.acacha.org/ionic_real_world
- NodeJs i NPM i Ionic 101: https://tubeme.acacha.org/ionic
- Casteaching REST API: https://tubeme.acacha.org/tdd vídeos 124 i 125
Explicació:
- Versió per a mòbils casteaching
- Comunicació amb el frontend via XHR/Fetch/Axios. REST API casteaching és un coneixement previ
- Utilitzarem la llibreria npm casteaching -> https://www.npmjs.com/package/casteaching -> Servei que connecta el frontend amb el backend.
- Utilitzem una plantilla Github com a inici de l'aplicació Ionic en comptes de ionic start -> Us proporciono una versió sense Typescript
- Plantilles Github vs Forks
- Vue Router. Client Side Routing Vs Server Side Routing -> SPA -> https://www.vuemastery.com/courses/real-world-vue3/vue-router-essentials
Veieu els commits:
- Eliminació de typescript: https://github.com/acacha/casteachingIonic/commit/12639bcc0a0c4ff28aa8e0ee20023c60d11bcd9b
- Eliminació de Typescript als testos: https://github.com/acacha/casteachingIonic/commit/d9ccc28cfe200de451b008843745535fffd84253
La documentació de ionic no explica com arreglar els testos, la poseu trobar a:
https://ionicframework.com/docs/vue/quickstart
Secció:
https://ionicframework.com/docs/vue/quickstart#build-your-way-with-typescript-or-javascript
- Intro amb exemples User Experience:
- Feedback que es proporciona als usuaris. Tailwind UI té un apartat feedback: Alerts / Empty states
- Empty States | Skeletons | Placeholders: llista buida de vídeos | que mostrar quan la llista encara s'està carregant
- Progress indicators: molt relacionats amb la programació concurrent/asincrona i processos que a priori no sabem quan poden tardar
- Spinners| Barras de progrés:https://ionicframework.com/docs/api/loading | https://ionicframework.com/docs/api/progress-bar
- Placeholders texts: https://ionicframework.com/docs/api/skeleton-text
Llistes:
- Simples ion-list: https://ionicframework.com/docs/api/list
- Pull to refresh: especific de mòbils: ion-refresher
- Llistes infinites | infinite-scroll: relacionades amb la paginació
Casos ús:
- Llista de vídeos: tots
- Pull to refresh al show del video
- Un cop la api tingui paginació podem implementar llista infinita
- Mostrar un truc per omplir amb dades inventades la Api
Vídeos Previs:
- Un de casteaching com a backend explicant que és Laravel Sanctum
- Recordar que de moment hem fet una "xapuza" a nivel authenticació i seguretat que és Token Hardcoded https://github.com/acacha/casteaching_package/blob/main/index.js#L10
- Al reiniciar amb fresh la base de dades el token s'esborrar i ja no va Videos per Vue
- Funciona amb Laravel Sanctum?
TODO:
- Afegir Formulari de login a aplicació Ionic
- Link a registre al backend Laravel: no cal/bo farem fer registre Ionic
Casteaching package:
- Ara té hardcoded un valor de api token: https://github.com/acacha/casteaching_package/blob/main/index.js#L10
- S'ha de poder indicar aquest valor al crear la llibreria
Aquest valor s'ha d'obtenir amb:
Laravel Sanctum:
- SPA: al mateix domini o subdomini: Utilitzant cookies, no calen tokens
- Mobile apps: https://laravel.com/docs/8.x/sanctum#mobile-application-authentication