Merge branch 'source' into part7-spanish

Author: pablo-maff

src/content/0/en/part0a.md

@@ -340,6 +340,7 @@ Despite changes *all the submitted exercises remain valid*, and the course can b
 
 Recent major changes
 
+- Part 10 (March 21, 2024): Create React app replaced with Vite
 - Parts 3-5 (February-March 2024): Libraries used for testing changed
 - Part 10 (February 26, 2024): Library versions updated
 - Part 11 (16th January 2024): Example project dependencies updated

src/content/0/fi/osa0a.md

@@ -282,6 +282,7 @@ Kurssilla ei ole enää vuosittaisia versiota. Kurssi on siis käynnissä koko a
 Muutoksista huolimatta <i>kaikki jo tehdyt palautukset säilyvät voimassa</i>, eli voit jatkaa kurssia päivityksistä huolimatta normaaliin tapaan.
 
 Viimeaikaisia isompia muutoksia
+- Osa 12 10 (21.3.2024): Create React app korvattu Vitellä
 - Osat 3-5 (helmi-maaliskuu 2024): Testaukseen käytetyt kirjastot muutettu
 - Osa 10 (26.2.2024): Kirjastoversiot päivitetty
 - Osa 11 (16.1.2024): Esimerkkiprojektin riippuvuudet päivitetty

src/content/1/en/part1.md

@@ -8,7 +8,7 @@ lang: en
 
 In this part, we will familiarize ourselves with the React-library, which we will be using to write the code that runs in the browser. We will also look at some features of JavaScript that are important for understanding React.
 
-<i>Part updated 11th August 2023</i>
-- <i>Create React App replaced with Vite</i>
+<i>Part updated 21th March 2024</i>
+- <i>About LLMs in sotware development</i>
 
 </div>

src/content/1/en/part1d.md

@@ -1126,6 +1126,56 @@ Programming is hard, that is why I will use all the possible means to make it ea
 - If my code does not work, I will not write more code. Instead I start deleting the code until it works or just return to a state when everything was still working
 - When I ask for help in the course Discord or Telegram channel or elsewhere I formulate my questions properly, see [here](http://fullstackopen.com/en/part0/general_info#how-to-get-help-in-discord-telegram) how to ask for help
 
+### Utilization of Large language models
+
+Large language models such as [ChatGPT](https://chat.openai.com/auth/login), [Claude](https://claude.ai/) and [GitHub Copilot](https://github.com/ features/copilot) have proven to be very useful in software development.
+
+Personally, I mainly use Copilot, which integrates seamlessly with VS Code thanks to the [plugin](https://visualstudio.microsoft.com/github-copilot/).
+
+Copilot is useful in a wide variety of scenarios. Copilot can be asked to generate code for an open file by describing the desired functionality in text:
+
+![](../../images/1/gpt1.png)
+
+If the code looks good, Copilot adds it to the file:
+
+![](../../images/1/gpt2.png)
+
+In the case of our example, Copilot only created a button, the event handler _handleResetClick_ is undefined.
+
+An event handler may also be generated. By writing the first line of the function, Copilot offers the functionality to be generated:
+
+![](../../images/1/gpt3.png)
+
+In Copilot's chat window, it is possible to ask for an explanation of the function of the painted code area:
+
+![](../../images/1/gpt4.png)
+
+Copilot is also useful in error situations, by copying the error message into Copilot's chat, you will get an explanation of the problem and a suggested fix:
+
+![](../../images/1/gpt5.png)
+
+Copilot's chat also enables the creation of larger set of functionality
+
+![](../../images/1/gpt6.png)
+
+The degree of usefulness of the hints provided by Copilot and other language models varies. Perhaps the biggest problem with language models is [hallucination](https://en.wikipedia.org/wiki/Hallucination_(artificial_intelligence)), they sometimes generate completely convincing-looking answers, which, however, are completely wrong. When programming, of course, the hallucinated code is often caught quickly if the code does not work. More problematic situations are those where the code generated by the language model seems to work, but it contains more difficult to detect bugs or e.g. security vulnerabilities.
+
+Another problem in applying language models to software development is that it is difficult for language models to "understand" larger projects, and e.g. to generate functionality that would require changes to several files. Language models are also currently unable to generalize code, i.e. if the code has, for example, existing functions or components that the language model could use with minor changes for the requested functionality, the language model will not bend to this. The result of this can be that the code base deteriorates, as the language models generate a lot of repetition in the code, see more e.g. [here](https://visualstudiomagazine.com/articles/2024/01/25/copilot-research.aspx).
+
+When using language models, the responsibility always stays with the programmer.
+
+The rapid development of language models puts the student of programming in a challenging position: is it worth and is it even necessary to learn programming in a detailed level, when you can get almost everything ready-made from language models?
+
+At this point, it is worth remembering the old wisdom of  [Brian Kerningham](https://en.wikipedia.org/wiki/Brian_Kernighan) the developer of the programming language C:
+
+![](../../images/1/kerningham.png)
+
+In other words, since debugging is twice as difficult as programming, it is not worth programming such code that you can only barely understand. How can debugging be even possible in a situation where programming is outsourced to a language model and the software developer does not understand the debugged code at all?
+
+So far, the development of language models and artificial intelligence is still at the stage where they are not self-sufficient, and the most difficult problems are left for humans to solve. Because of this, even novice software developers must learn to program really well just in case. It may be that, despite the development of language models, even more in-depth knowledge is needed. Artificial intelligence does the easy things, but a human is needed to sort out the most complicated messes caused by AI. GitHub Copilot is a very well-named product, it's Copilot, a second pilot who helps the main pilot in an aircraft. The programmer is still the main pilot, the captain and bears the ultimate responsibility.
+
+It may be in your own interest that you turn off Copilot by default when you do this course and rely on it only in a real emergency.
+
 </div>
 
 <div class="tasks">

src/content/1/fi/osa1.md

@@ -8,7 +8,7 @@ lang: fi
 
 Alamme tässä osassa tutustua React-kirjastoon, jolla siis teemme sovelluksen selaimessa suoritettavan koodin. Teemme samalla myös nopean katsauksen Javascriptin Reactin kannalta oleellisimpiin ominaisuuksiin.
 
-<i>Osa päivitetty 11.8.2023</i>
-- <i>Create React App korvattu Vitellä</i>
+<i>Osa päivitetty 21.3.2024</i>
+- <i>Kielimallien hyödyntäminen ohjelmistokehityksessä</i>
 
 </div>

src/content/1/fi/osa1d.md

@@ -1136,6 +1136,55 @@ Ohjelmointi on hankalaa, ja sen takia lupaan hyödyntää kaikkia ohjelmointia h
 - jos koodini ei toimi, en kirjoita enää yhtään lisää koodia, vaan alan poistaa toiminnan rikkoneita rivejä tai palaan suosiolla tilanteeseen, missä koodini vielä toimi
 - kun kysyn apua kurssin Discord- tai Telegram-kanavalla, tai muualla internetissä, muotoilen kysymyksen järkevästi, esim. [täällä](/en/part0/general_info#how-to-get-help-in-discord-telegram) esiteltyyn tapaan
 
+### Kielimallien hyödyntäminen
+
+Suuret kielimallit, kuten [ChatGPT](https://chat.openai.com/auth/login), [Claude](https://claude.ai/) ja [GitHub Copilot](https://github.com/features/copilot) ovat osoittautuneet erittäin hyödyllisiksi ohjelmistokehityksessä.
+
+Itse käytän pääasiassa Copilottia, joka integroituu saumattomasti VS Codeen [pluginin](https://visualstudio.microsoft.com/github-copilot/) ansiosta.
+
+Copilot on hyödyllinen monenlaisissa skenaarioissa. Copilotia voi pyytää generoimaan koodia avoinna olevaan tiedostoon kuvailemalla halutun toiminnallisuuden teksinä:
+
+![](../../images/1/gpt1.png)
+
+Jos koodi vaikuttaa hyvältä, Copilot lisää sen tiedostoon:
+
+![](../../images/1/gpt2.png)
+
+Esimerkkimme tapauksessa Copilot loi ainoastaan painikkeen, tapahtumankäsittelijä _handleResetClick_ on määrittelemättä. 
+
+Myös tapahtumankäsittelijän saa generoitua. Funktion ensimmäisen rivin kirjoittamalla Copilot tarjoaa generoimaansa toiminnallisuutta:
+
+![](../../images/1/gpt3.png)
+
+Copilotin chat-ikkunassa on mahdollista kysyä selitystä maalatun koodialueen toiminnalle:
+
+![](../../images/1/gpt4.png)
+
+Copilot on hyödyllinen myös virhetilanteissa, kopioimalla virheviesti Copilotin chatiin, tulee selitys ongelmasta ja korjausehdotus:
+
+![](../../images/1/gpt5.png)
+
+Copilotin chat mahdollistaa myös suurempien kokonaisuuksien luomisen
+
+![](../../images/1/gpt6.png)
+
+Copilotin ja muiden kielimallien antamien vihjeiden hyödyllisyyden aste vaihtelee. Kielimallien ehkä suurin ongelma on [hallusinointi](https://en.wikipedia.org/wiki/Hallucination_(artificial_intelligence)), ne generoivat välillä täysin vakuuttavan näköisiä vastauksia mitkä kuitenkin ovat täysin päättömiä. Ohjelmoidessa toki hallusinoitu koodi jää usein nopeasti kiinni jos koodi ei toimi. Ongelmallisempia tilanteita ovat ne, missä kielimallin generoima koodi näyttää toimivan, mutta se sisältää vaikeammin havaittavia bugeja tai esim. tietoturvahaavoittuvuuksia.
+
+Toinen ongelma kielimallien soveltamisessa ohjelmistokehitykseen on se, että kielimallien on vaikea "hahmottaa" isompia projekteja, ja esim. generoida toiminnallisuutta, joka edellyttäisi muutoksia useisiin tiedostoihin. Kielimallit eivät myöskään nykyisellään osaa yleistää koodia, eli jos koodissa on esim. olemassaolevia funktioita tai komponentteja, joita kielimalli pystyisi pienin muutoksin hyödyntämään siltä pyydettyyn toiminnallisuuteen, ei kielimalli tähän taivu. Tästä voi olla seurauksena se, että koodikanta rapistuu sillä kielimallit generoivat koodiin paljon toisteisuutta, ks. lisää esim. [täältä](https://visualstudiomagazine.com/articles/2024/01/25/copilot-research.aspx).
+
+Kielimalleja käytettäessä vastuu siis jää aina ohjelmoijalle. 
+
+Kielimallien nopea kehitys asettaa ohjelmointia opiskelevan haastavaan asemaan: kannattaako ja tarvitseeko enää ylipäätään opetella ohjelmointia vanhan liiton tyyliin, kun lähes kaiken saa kielimalleilta valmiina? 
+
+Tässä kohtaa kannattaa muistaa C-kielen kehittäjän [Brian Kerninghamin](https://en.wikipedia.org/wiki/Brian_Kernighan) vanha viisaus:
+
+![](../../images/1/kerningham.png)
+
+Eli koska ongelmien selvittely on kaksi kertaa vaikeampaa kuin ohjelmointi, ei kannata ohjelmoida sellaista koodia minkä vain juuri ja juuri itse ymmärtää. Miten debuggaus mahtaakaan onnistua tilanteessa missä ohjelmointi on ulkoistettu kielimallille ja ohjelmistokehittäjä ei ymmärrä debugattavaa koodia ollenkaan?
+
+Toistaiseksi kielimallien ja tekoälyn kehitys on vielä siinä vaiheessa, että ne eivät ole itseriittoisia, ja vaikeimmat ongelmat jäävät ihmisten selvitettäväksi. Tämän takia aloittelevienkin ohjelmistokehittäjien on kaiken varalta opeteltava ohjelmoimaan todella hyvin. Voi olla, että kielimallien kehityksestä huolimatta tarvitaankin entistä syvällisempää osaamista. Tekoäly tekee ne helpot asiat, mutta ihmistä tarvitaan kaikkein kiperimpien tekoälyn aiheuttamien sotkujen selvittelyyn. GitHub Copilot onkin varsin hyvin nimetty tuote, kyseessä on Copilot eli lentoperämies/nainen. Ohjelmoija on edelleen kapteeni ja kantaa lopullisen vastuun.
+
+Voikin olla oman etusi mukaista, että kytket oletusarvoisesti Copilotin pois päältä kun teet tätä kurssia ja turvadut siihen ainoastaan todellisella hädän hetkellä.
 
 </div>
 

src/content/10/en/part10.md

@@ -8,16 +8,12 @@ lang: en
 
 In this part, we will learn how to build native Android and iOS mobile applications with JavaScript and React using the React Native framework. We will dive into the React Native ecosystem by developing an entire mobile application from scratch. Along the way, we will learn concepts such as how to render native user interface components with React Native, how to create beautiful user interfaces, how to communicate with a server, and how to test a React Native application.
 
-<i>Part updated 17th Feb 2023</i>
-- <i>The last three exercises reordered: the old exercise 10.25 is now the last exercise of the part</i>
-
 <i>Part updated 26th Feb 2024</i>
 - <i>New Node 20 version of rate-repository-api</i>
 - <i>Material updated in parts 10a, 10b and 10c</i>
 
-
 Note: Some updates are not compatible anymore with material before Feb 2024.
-We recommend a fresh start with this new Part 10 material you're reading now. However, if you´re returning to this course after a break, and you want to continue the exercises in your older project, please use [Part 10 material before the upgrade](https://github.com/fullstack-hy2020/fullstack-hy2020.github.io/tree/e9784f36de8a0badc28fabde49e33e2959479177/src/content/10/en).
+We recommend a fresh start with this new Part 10 material you're reading now. However, if you´re returning to this course after a break, and you want to continue the exercises in your older project, please use [Part 10 material before the update](https://github.com/fullstack-hy2020/fullstack-hy2020.github.io/tree/e9784f36de8a0badc28fabde49e33e2959479177/src/content/10/en).
 
 
 </div>

src/content/10/en/part10a.md

@@ -8,7 +8,7 @@ lang: en
 <div class="content">
 
 Note: This course material was updated in Feb 2024. Some updates are not compatible anymore with older material.
-We recommend a fresh start with this new Part 10 material. However, if you´re returning to this course after a break, and you want to continue the exercises in your older project, please use [Part 10 material before the upgrade](https://github.com/fullstack-hy2020/fullstack-hy2020.github.io/tree/e9784f36de8a0badc28fabde49e33e2959479177/src/content/10/en).
+We recommend a fresh start with this new Part 10 material. However, if you´re returning to this course after a break, and you want to continue the exercises in your older project, please use [Part 10 material before the update](https://github.com/fullstack-hy2020/fullstack-hy2020.github.io/tree/e9784f36de8a0badc28fabde49e33e2959479177/src/content/10/en).
 
 Traditionally, developing native iOS and Android applications has required the developer to use platform-specific programming languages and development environments. For iOS development, this means using Objective C or Swift and for Android development using JVM-based languages such as Java, Scala or Kotlin. Releasing an application for both these platforms technically requires developing two separate applications with different programming languages. This requires lots of development resources.
 

src/content/11/en/part11.md

@@ -12,7 +12,7 @@ Doing all the above manually is a pain and doesn’t scale well for a larger tea
 
 This module was crafted by the Engineering Team at Smartly.io. At Smartly.io, we automate every step of social advertising to unlock greater performance and creativity. We make every day of advertising easy, effective, and enjoyable for more than 650 brands worldwide, including eBay, Uber, and Zalando. We are one of the early adopters of GitHub Actions in wide-scale production use. Contributors: [Anna Osipova](https://www.linkedin.com/in/a-osipova/), [Anton Rautio](https://www.linkedin.com/in/anton-rautio-768190145/), [Mircea Halmagiu](https://www.linkedin.com/in/mhalmagiu/), [Tomi Hiltunen](https://www.linkedin.com/in/tomihiltunen/).
 
-<i>Part updated 16th January 2024</i>
-- <i>Example project dependencies updated</i>
+<i>Part updated 19th March 2024</i>
+- <i>Added info on using Playwright for the End to end -tests</i>
 
 </div>