# Web kehittäjän blogi // Nikolai Poutanen ## Web-ohjelmointi, syksy 2021 ### Tekijä: [2006238] ##### Alkusanat Seuraan tässä blogissa edistymistäni web-ohjelmointi kurssilla. Blogin lopussa on kurssin itsearvointi. ## Viikko 1 & 2(1.9.- 10.9.2021) Sain hyvää kertausta web-ohjelmoinnin perusteista. Rekisteröidyin Slackiin. Asensin tarvittavat ohjelmistot. ##### -Git ##### -VScode ##### -Slack ##### -NodeJs #### Harjoitus 1 -Kopioin projektin pohjan ja tutkin koodia. -Asensin laajennukset VSCodeen. ###### -Bracket Pair Colorizer 2 ###### -Prettier-Code formatter -Tein pyydetyt asetusmuutokset ja asensin Live-Serverin. -Muokkasin pohjaprojektin koodia hieman: ###### Lisäsin opintojaksot.html näkymään linkit kahdelle -opintojaksolle. Web.html & Tra.html *** ### Mitä harjoituksia tein ##### JavaScript tehtävä 1. Kirjoitin javascriptillä ohjelman joka pyytää käyttäjältä syötteen jonka, ohjelma tarkistaa onko syötetty merkkijono palidromi. Algoritmi kävi läpi syötetyn merkkijonon molemmista suunnista ja testasi ovatko arvot samoja. ## Viikko 3 & 4 ### Mitä opin JavaScriptin perusteita. Sain hyvää kertausta web-ohjelmoinnin perusteista. Opettelin lisää Javascriptin syntaksia ja perusteita. ### Mitä harjoituksia tein Opettelin lisää Javascriptin syntaksia ja perusteita. Tein javascript tehtävän #2 ja #3 ja lisäsin ohjelmakoodit git repositoryyn. Tein tehtävän 3. Jossa tehtiin luokkamäärittelyä ja perityimistä javascriptillä. ## Viikko 5 & 6 ### Mitä opin Opin käyttämään web ohjelmoinnissa HTTP protokollaa. Pääsin myös jyvälle Express frameworkin toiminnasta. ### Mitä harjoituksia tein Opettelin lisää Javascriptin syntaksia ja perusteita. Tein tehtävän #4a jossa luotiin sanakirja rest api joka käytti tietokantana .txt tiedostoa. Tein tehtävän #4b eli loin käyttöliitymän edelliessä tehtävässä tehdyllä api:lle. ## Viikko 7 & 8 ### Mitä opin Opin testaamaan post,get,put,delete etc. kutsuja hyödyntämällä Postman ohjelmaa. Harjoittelin myös hyödyntämään front-end ohjelmoinnissa DOM:ia ja jQueryä. ### Mitä harjoituksia tein Tein tehtävän 5 jossa, loin Node.js joka käyttää express:iä ja mysql:ää. Onnistuin tehtävässä kohtuullisesti. Jouduin käyttämään aikaa että sain sql aliohjelmien kutsut kuntoon. Tämä oli tähän mennessä haastavin ja samalla opettavaisin harjoitus. ## Viikko 9 ### Mitä opin Reactin perusteita. ### Mitä harjoituksia tein Tein harjoitustehtävän jossa käytettiin reactia ja hookkeja. Onnistuin tehtävässä hyvin. ## Viikko 10 ### Mitä opin - Opin hitaasti mutta varmasti reactin logiikkaa. - Opin hyödyntämään Axiosta ### Mitä harjoituksia tein Aloitin tekemään tehtävää 6. - Loin kaksi kansiota johon toiseen tuli serverin puoli ja toiseen frontend eli client. - Loin client kansioon react sovelluksen ja asensin Axios kirjaston. - Loin frontendiin kentät tekstille ja kentille eventit niin että kenttiin kirjoitettu data on saatavilla. - Loin kaksi painiketta tiedon tallentamiseen ja näyttämiseen sekä onClick eventit näille painikkeille. - Tein MySql Workbenchillä dummy tietokannan. - Aloitin serverin koodaamisen ottamalla yhteyden mySQL tietokantaan. ![](https://i.imgur.com/rPpNyfH.png) ## Viikko 11 ### Mitä opin - Menin vain enemmän sekaisin reactista :S - Aloitin opiskelemaan enemmän bootstrapista - Opin että en voi lyhyessä ajassa ja kiireessä tehdä hyvää jälkeä. ### Mitä harjoituksia tein Jatkoin tehtävää 6. - Tein serverin loppuun - Lisästin post,get,put ja delete metodit - Tein käyttöliittymän loppuun ![](https://i.imgur.com/4ewv4I8.png) ## Viikko 12 Tein portfolion josta voi tarkastella päällisin puolin mitä olen tehnyt web ohjelmointi kurssilla. Käytin portfoliossa: - Bootstrap - HTML - CSS - JavaScript ### Kuva portfoliosta: ![](https://i.imgur.com/HElzTOE.png) Tein runsaasti web-ohjelmointia liittyen ketteräkehitysprojektiin. Pääsin tutustumaan azuren työkaluihin ja pääsin pintaraapaisun verran käsiksi koneoppimiseen ja "tekoälyyn". Projekti oli mielenkiintoinen erityisesti ohjelmoinnin osalta ja sain käyttää runsaasti web-ohjelmointi kurssilla saamiani asioita hyödyksi työskentelyssä projektin parissa. Teimme ketteräkehitysprojektin tuotteen web-sovelluksena, jossa käytimme toteutukseen - ReactJS - CSS - HTML - Lyhyt video sovelluksen käytöstä: https://youtu.be/rlQJrkvPdcQ ## Viikko 13-14 Tutkin kirjoittamiani koodeja ja jatkoin ketteräkehitysprojektin ohjelmoinnin parissa. ### Huomioita koodista: - löysin useita bugeja, jotka vaikuttavat ohjelmakoodien toimintaan - osa virheistä oli huolimattomutta ja osa selkeitä virheitä ymmärryksessä siitä miten jotkin esim. reactin ydinasioista toimii. # ARVIOINTI ## Itsearviointi: Opin tämän kurssin aikana valtavasti web-ohjelmoinnista. En tullut kurssille täysin ilman pohjatietoa, sillä olin ohjelmoinut aiemmin hieman php:llä, mutta ymmärrykseni webin kiemuroista hahmottui entistä selkeämmäksi. Opiskeltavat teknologiat ovat nykyaikaisia ja taidoista on taatusti hyötyä mikäli aikoo työskennellä web- ja ohjelmistokehityksen parissa kuten itse toivon tulevaisuudessa tekeväni. #### Huomioita: - Onnistuin tehtävissä kohtalaisesti. - Sain ohjelmakoodit toimimaan. - Opin soveltamaan oppimiani ohjelmointitaitoja(ketteräkehitysprojekti). - Kurssin kohokohta oli ehdottomasti React johon aion tutustua jatkossa itsenäisesti. - Tein paljon töitä kurssin eteen. Opittavaa kuitenkin vielä jäi ja tämä kurssi antoi hyvät eväät opiskella aiheesta lisää. Minun olisi tullut myös olla hieman huolellisempi tehtäviä tehdessä. #### Huomioita: - Unohdin miltei kokonaan ohjelmakoodien kommentoinnin. - Ohjelmissa oli bugeja. - Ohjelmakoodeissa oli huolimattomuusvirheitä. - Olisin voinut kysyä enemmän apua ja hakata päätä seinään vähemmän. - Priorisoin blogin ylläpidon väärin ja siitä syystä päivitysvälit venyivät ja blogi ei ole niin hyvä kun tahtoisin. #### Antaisin itselleni kurssista arvosanan: 3 tai 4