Diana sf2 hw #308

aurelijusb · 2019-12-14T16:58:32Z

Rebased: #150

git clone git@github.com:aurelijusb/kickstart.git
cd kickstart/
git checkout homework-2019-11-14 
git checkout -b diana-sf2-hw
git remote add diana https://github.com/diana-v/kickstart.git
git fetch diana 
git merge diana/lecture-2019-11-14

scripts/frontend.sh yarn add @babel/preset-react --dev yarn add react react-dom prop-types Dokumentacija: https://symfony.com/doc/current/frontend/encore/reactjs.html Jei paimate pavyzdį, tai scripts/frontend.sh yarn

Iš assets/js eis į build/js/app.js, nes taip parašėme webpack.config.js scripts/frontend.sh yarn watch Rezultato ieškoti: build/js/app.js Dokumentacija: https://symfony.com/doc/current/frontend/encore/reactjs.html https://yarnpkg.com/lang/en/docs/package-json/#toc-scripts

Sugeneruota su scripts/backend.sh bin/console make:controller People Patikrinimui: * http://127.0.0.1:8000/people Dokumentacija: * https://symfony.com/doc/current/bundles/SymfonyMakerBundle/index.html

Patikrinimui: http://127.0.0.1:8000/people Dokumentacija: https://reactjs.org/docs/hello-world.html

Klaidą buvo galima patyti per Naršyklės konsolę: ReferenceError: ReactDOM is not defined Esmė: React'ą turėjome node_modules (prsiminkime yarn... komandą), bet WebPack Encore nežinojo, kad reikia jį įtraukti. Dokumentacija (neatsimenu, kur radau, bet čia geras pavyzdys): https://artemzhuravlev.com/blog/symfony-reactjs-using-encore/ Bonus per konsole siūlo (ir programuoti padės): Download the React DevTools for a better development experience: https://fb.me/react-devtools

scripts/frontend.sh yarn add axios yarn watch Pridėta į app.js, kad būtų galima patikrinti: public/build/js/app.js Dokumentacija: https://www.npmjs.com/package/axios https://yarnpkg.com/lang/en/docs/cli/add/ https://yarnpkg.com/lang/en/docs/cli/run/ Jei naudojamas commit'as kaip pavyzdys, scripts/frontend.sh yarn

Čia viena iš pavyzdžių, kaip galima panaudoti išorinę bilbioteką, kad mūsų kodas būtų paprastesnis. Kad kodas veiktų, paleidžiame per scripts/frontend.sh yarn watch Patirikrinimui: http://127.0.0.1:8000/people Patirkinimui, atsidarome Naršyklės console langą Turėtų būti kažkas į Object { "build/app.css": "/build/app.css", "build/app.js": "/build/app.js", "build/runtime.js": "/build/runtime.js", "build/vendors~app.js": "/build/vendors~app.js" } Dokumentacija: https://www.npmjs.com/package/axios

Pradedame nuo "...", nes užsikrauna ne iš karto, kad naudotoja matytų, jog pasikeis. Kodo generavimu paleisti per scripts/frontend.sh yarn watch Rezultatas matysis atsidarius pusplaį: http://127.0.0.1:8000/people Patikrinimui pabandykite (manifest.json reikšmė pasikeis): yarn dev yarn build Dokumentacija: https://www.w3schools.com/jsref/prop_html_innerhtml.asp https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById https://developer.mozilla.org/en-US/docs/Web/API/Node/innerText https://symfony.com/doc/current/frontend/encore/versioning.html https://yarnpkg.com/lang/en/docs/cli/run/

Problema: naudojame React ir axious kodą tik People puslapyje, bet JavaScript įkraunamas visur. Taigi Pagrindiniame puslapyje Console'je metamos klaidos. Sprendimas: įterpti JavaScript dalį, kuri būtų virš. Naudojami globalūs JavaScript kintamieji ("var", bet ne "let") Gerosios praktikos: naudoti data-... parametrus Geresnis sprendimas: patikrinti ar elementas egzistuoja Kodas sukeneruotas per scripts/frontend.sh yarn watch Patikrinimui, ar veikia: Tiek pagrindiniame, tiek /people puslapyje Naršyklės Console nerodo klaidos Dokumentacija: https://symfony.com/doc/current/frontend/encore/server-data.html https://www.w3schools.com/js/js_datatypes.asp

Nes jau sunku per puslapius vaikščioti. Patrikrinimui (viršuje turėtų būti navigacijos juosta): http://127.0.0.1:8000/people http://127.0.0.1:8000/ Gali prireikti per scripts/backend.sh bin/console cache:clear Dokumentacija: https://symfony.com/doc/current/reference/twig_reference.html https://twig.symfony.com/doc/2.x/tags/extends.html https://getbootstrap.com/docs/4.3/components/navbar/

Kuris bus naudojamas tik viename puslapyje Nes jau nebereikia mokintis parametrų perdavimo. Priminimui: CSS failai yra įtraukiami iškviečiant require('../css/app.scss') ar pan. Kodas sugeneruojamas per scripts/frontend.sh yarn watch Patikrinimui, žiūrėti sugeneruotą: public/build/validation.js (Gali tekti iš naujo paleisti "yarn watch") Dokumentacija: https://symfony.com/doc/current/frontend/encore/shared-entry.html https://symfony.com/doc/current/frontend/encore/split-chunks.html

Pridedame validacijos failą tik People puslapyje. Kodo sugeneruojamas (nukopijuojamas į build katalogą) node konteineryje: yarn watch Lyginant su senesnėmis Symfony/Encore versijomis buvo naudojama asset komanda, kurią dabar pakeičia gudresnė encore_entry_script_tags. Patikrinimui, ar veikia: http://127.0.0.1:8000/people keičiant teksta su klaviatūra, turi šalia rodyti

Symfony turi galingą takų (angl. route) sistemą, tai galima perduoti argumentus užklausoje, kaip argumentus į funkciją. Pasidarome apribojimą, kad būtų galima kviesti tik per POST metodą. Vis dar nėra kaip pilnai ištestuoti. Galima tik patikrinti per scripts/backend.sh bin/console debug:router bin/console debug:router validatePerson Arba iš Linux: curl -X POST http://127.0.0.1:8000/validate/name curl -X POST http://127.0.0.1:8000/validate/labas Dokumentacija: https://symfony.com/doc/current/routing.html https://symfony.com/doc/current/routing.html#matching-http-methods

Path irgi gali priimti parametrus Javascript pergeneravimui iš scripts/frontend.sh yarn watch Patirkinimui: http://127.0.0.1:8000/people keičiant tekstą, rodo: "Validuosiu su: /validate/name" Dokumentacija: https://symfony.com/doc/current/frontend/encore/server-data.html https://symfony.com/doc/current/routing/generate_url_javascript.html

Keičiant laukelio turinį, grąžina ":)" Rankomis galima pasibandyti pakeisti, ar pagauna ir klaidas. Bet jau turime sujungtą Frontend'ą su Backend'u. Dokumentacija: https://www.npmjs.com/package/axios

Nesinori parodyti spendimo pirmam namų darbui, tai dėl paprastumo tiesiog įdedama į PHP failą.

Patikrinimui: Įvesti egzistuojantį vardą (pvz. Lukas) ir bus matoma laiminga šypsenėlė ":)" Bandome apsisaugoti nuo netinkamų laukų pavadinimų. JavaScript pergeneravimui per scripts/frontend.sh yarn watch Dokumentacija: https://symfony.com/doc/current/create_framework/http_kernel_controller_resolver.html

Merge remote-tracking branch 'diana/lecture-2019-11-14' into diana-sf2-hw Conflicts: assets/js/validation.js src/Controller/PeopleController.php templates/people/index.html.twig

aurelijusb · 2019-12-15T18:43:58Z

assets/js/validation.js

-name.onkeyup = validateName;
-name.onchange = validateName;
+var timeout;
+function pleaseWork (funcs) {


Kažkas čia ne į tą pausę.

Namų darbų įvykdymui nereikėjo jokių focus arba timeout

aurelijusb · 2019-12-15T18:44:19Z

src/Controller/PeopleController.php

                return new JsonResponse(['valid' => in_array(strtolower($input), $students)]);
+            case 'team':
+                $studentTeam = $this->getStudentTeam($input);
+                $input2 = json_decode($request->getContent(), true)['input2'];


Geriau būtų šitą vietą iškelti į viršų

aurelijusb · 2019-12-15T18:44:42Z

src/Controller/PeopleController.php

+        foreach ($storage as $teamData) {
+            foreach ($teamData['students'] as $student) {
+                if (strtolower($student_name) == strtolower($student)) {
+                    return strtolower($teamData['name']);


Atidumo. Pavyzdys buvo ne toks

aurelijusb · 2019-12-15T18:46:26Z

assets/js/validation.js

 };
+const validateTeam = function () {
+    validateTeamResult.innerText = '...';
+    axios.post(validateTeamResult.dataset.path, {input: name.value, input2: team.value})


Per paskaitą lig minėjau, kad jie neturi būti priklausomi.

Tada kodas būtų daug paprastesnis.

aurelijusb · 2019-12-15T18:50:23Z

Matau, kad interpretacija buvo, jei žmogus ir komanda sutampa:

Nors pavyzdyje specialiai yra parodyta iš skirtingų komandų:

aurelijusb · 2019-12-15T18:54:55Z

Ir aišku pasimokius gitą būtum gavus komentarus greičiau (vietoj to, kad taisyčiau git'o žinių spragas aš)

aurelijusbanelis and others added 24 commits November 13, 2019 21:47

Lecture notes

08b9cce

Pridedam React'ui reikalingas JavaScript bibliotekas

02d2606

scripts/frontend.sh yarn add @babel/preset-react --dev yarn add react react-dom prop-types Dokumentacija: https://symfony.com/doc/current/frontend/encore/reactjs.html Jei paimate pavyzdį, tai scripts/frontend.sh yarn

Sukuriame Controller patogesniam testavimui

8d99df9

Sugeneruota su scripts/backend.sh bin/console make:controller People Patikrinimui: * http://127.0.0.1:8000/people Dokumentacija: * https://symfony.com/doc/current/bundles/SymfonyMakerBundle/index.html

Bandome React Hello world, bet neveikia

6824312

Patikrinimui: http://127.0.0.1:8000/people Dokumentacija: https://reactjs.org/docs/hello-world.html

Siųnčiame AJAX užklausą

9f38140

Keičiant laukelio turinį, grąžina ":)" Rankomis galima pasibandyti pakeisti, ar pagauna ir klaidas. Bet jau turime sujungtą Frontend'ą su Backend'u. Dokumentacija: https://www.npmjs.com/package/axios

Pasiruošiame testinius duomenis

923ca9d

Nesinori parodyti spendimo pirmam namų darbui, tai dėl paprastumo tiesiog įdedama į PHP failą.

Done.

67bc07a

Code style fixes.

2d0a210

Solving conflicts

cc9effe

Merge remote-tracking branch 'diana/lecture-2019-11-14' into diana-sf2-hw Conflicts: assets/js/validation.js src/Controller/PeopleController.php templates/people/index.html.twig

Merge branch 'homework-2019-11-14' into diana-sf2-hw

21f42c3

Merge branch 'homework-2019-11-14' into diana-sf2-hw

3380cbb

Merge branch 'homework-2019-11-14' into diana-sf2-hw

dc572bf

aurelijusb commented Dec 15, 2019

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Diana sf2 hw #308

Diana sf2 hw #308

Uh oh!

aurelijusb commented Dec 14, 2019

Uh oh!

aurelijusb Dec 15, 2019

Uh oh!

aurelijusb Dec 15, 2019

Uh oh!

aurelijusb Dec 15, 2019

Uh oh!

aurelijusb Dec 15, 2019

Uh oh!

aurelijusb commented Dec 15, 2019 •

edited

Loading

Uh oh!

aurelijusb commented Dec 15, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Diana sf2 hw #308

Are you sure you want to change the base?

Diana sf2 hw #308

Uh oh!

Conversation

aurelijusb commented Dec 14, 2019

Uh oh!

aurelijusb Dec 15, 2019

Choose a reason for hiding this comment

Uh oh!

aurelijusb Dec 15, 2019

Choose a reason for hiding this comment

Uh oh!

aurelijusb Dec 15, 2019

Choose a reason for hiding this comment

Uh oh!

aurelijusb Dec 15, 2019

Choose a reason for hiding this comment

Uh oh!

aurelijusb commented Dec 15, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aurelijusb commented Dec 15, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

aurelijusb commented Dec 15, 2019 •

edited

Loading