Programmering01 [prrprr01]

Projekt01 - Lilla bankapplikationen

Introduktion

Äntligen får du chansen att testa dina kunskaper på allvar. Alla delar som du tidigare har jobbat med skall nu testas i ett litet projekt.

Först skall vi dock gå igenom två användbara tekniker för att få en förståelse för hur vi bryter ner större utmaningar i mindre lösbara delar. Vi kommer lära oss använda pseduokod och aktivitetsdiagram, ibland är någon av dessa teknikerna en förutsättning för att få förståelsen för det större problemet och ibland har du redan sett en lösning men kan ta hjälp av pseudokoden för att på ett smidigt sätt dela upp arbete och kan då använda pseudokoden som kommentarer i koden.

Momentets mål

I varje moment så jobbar vi mot ett eller flera mål som skolverket har satt upp i varje kurs.

Centralt innehåll

  • Grundläggande programmering i ett eller flera programspråk varav minst ett av språken är textbaserat.
  • Programmeringens möjligheter och begränsningar utifrån datorns funktionssätt.
  • Strukturerat arbetssätt för problemlösning och programmering.
  • Grundläggande kontrollstrukturer, konstruktioner och datatyper.
  • Arbetsmetoder för förebyggande av programmeringsfel, testning, felsökning och rättning av kod.
  • Grundläggande datastrukturer och algoritmer.
  • Gränssnitt för interaktion mellan program och användare.

Pseudokod & aktivitetsdiagram/flödesschema

Vi skall kika lite på två olika tekniker som är användbara för att kunna beskriva en algoritm. En algoritm är en serie av instruktioner som löser en uppgift.

Pseduokod är en skriftlig beskrivning av lösningen där vi med så normalt språk som möjligt skall beskriva lösningen i punktform. Om varje punkt är formulerad så att den endast gör en instruktion så kan pseudokoden vara grunden till en välkommenterad kod.

Aktivitetsdiagram eller flödesschema, kärt barn har många namn, ger istället en grafisk bild av lösningen. I denna tekniken så är kombinationen av kod och figur mer lik den färdiga koden men det är viktigt med bägge teknikerna att det inte skrivs programspråkspecifik kod då programmerare som skriver kod i olika språk skall kunna göra varje lösning i sitt programmeringsspråk.

Jag kommer i de olika momenten visa med ett praktiskt exempel där uppgiften är att loopa igenom alla tal mellan ett och det tal som användaren angivit i ett formulär samt skriva ut alla udda tal fram tills vi når 20 eller det angivna talet, vilket som kommer först.

Pseduokod

Pseudokod kan vi skriva olika detaljerat, det kan vara värt att skriva en mer överskådlig beskrivning av lösningen, speciellt om det är en större applikation som skall skrivas, för att sedan gå in på djupet och skriva den mer detaljerad.

Övergripande

  • Hämta in tal från användaren.
  • Loopa igenom alla tal från 1 till det angivna talet.
  • Testa om talet är udda, skriv isf ut detta.
  • Om talet är 20 så avbryt loopen.

I många fall så skulle detta vara tillräckligt för en programmerare att skriva en applikation som gör just detta.

Mer detaljerad

Nu gör vi ett försök att skriva pseudokoden mer detaljerad utan att vi för den sakens skull blir allt för bundna till php, målet är att varje punkt skall kunna bli en bra kommentar till den koden som vi skall skriva.

  • Uppmana användaren att mata in ett tal.
  • Hämta talet som användaren angav.
  • Loopa igenom alla tal från 1 till det angivna talet.
    • Om aktuellt tal (det som loopas) är udda
      • Skriv ut talet
    • Om aktuellt tal (det som loopas) är 20
      • Avbryt loopen

Att skriva punkterna i en djupare nivå än andra punkter är ett sätt att visa på att det är en händelse som sker inne i en selektion eller inne i en loop. Detta blir viktigare när det är en längre pseudokod med kod i olika nivåer.
Det finns ingen exakt standard för hur pseudokod skall skrivas men försök så gott det går att hålla den tydlig och att undvika att blanda in kod.

Aktivitetsdiagram

Aktivitetsdiagram är den grafiska bilden av lösningen och vi kommer använda oss av ett gäng symboler för att visa hur algoritmen fungerar. Alla symboler och aktivitetsdiagram som jag ritar på denna sidan är gjorda med draw.io som är en smidig applikation för att rita sådana här saker. Koppla gärna din Google drive eller Dropbox till applikationen så sparas allt du skapar i applikationen. Se ocksp till att dina streck eller pilar verkligen dockar fast i övriga symboler så är det enkelt att förändra ditt aktivitetsdiagram om du behöver.
I boxen med Flowchart hittar du symbolerna som används för aktivitetsdiagram.

Symboler

Aktivitetsdiagram symboler Till höger ser du fem symboler och en pil. Jag går kort igenom vad de representerar och hur de skall användas.

Start/stop: Varje aktivitetsdiagram skall börja med en startsymbol och ha minst en stoppsymbol, ibland kan det vara meninga att ha flera stoppsymboler om algoritmen har flera utgångar som avslutar den.

In-/output: Denna symbolen används för att visa i flödet att det pågår en inmatning av data eller någon form av output i form av utskrift eller lagring till fil, databas eller något liknande.

Process: Processen är den koden som utför en beräkning eller andra händelser som inte innefattar in-/output eller ett val.

Förbindelse: Förbindelsen är endast användbar i det fall där aktivitetsdiagrammet är för stort att skriva ut på en enda sida, då kan vi använda förbindelsen för att hålla ihop hela flödet över flera dokument. Det är också användbart om flera mindre flödesdiagram på något sätt hänger ihop i ett större sammanhang. Här blir det extra viktigt att vara tydlig med namngivning oavsett om det görs med text, siffror, symboler eller kombinationer av dessa.

Val: Romben symboliserar alla val, beslut eller uttryck som är grunden till selektioner (if/switch) eller iterationer (loopar). Härifrån kan pilarna med val gå åt både höger, vänster eller nedåt. Genom att skriva en tydlig text på vad valet representerar så är det lättare att följa med i programflödet.

Riktning: Pilen används för att visa på riktning genom aktivitetsdiagrammet. Grunden är att riktningen kommer ovanifrån och går nedåt genom hela figuren, ibland är detta inte möjligt då diagrammet blir allt för stort. Jag brukar utgå ifrån att det bästa möjliga läget, när inget går fel eller det mest vanliga valet, skall visas genom en rak linje genom hela aktivitetsdiagrammet och så får vi ta hand om alla fel, avvikelser eller mindre vanliga/positiva händelser utåt sidorna. Tänk om vi skall rita ett aktivitetsdiagram för en bankomat, då är den lyckade kundens aktivitet representerad av en vertikal linje och alla felinmatningar tas om hand på bägge sidor om detta.

På samma sätt som att pseudokod saknar standarder om hur den skall utformas så saknas här också tydliga regler för hur vi skall tänka. De olika symbolerna kan vi anse är standardiserade men hur vi ritar flödet är mer öppet för våra egna beslut. Mitt önskemål är dock att det i möjligaste mån är konsekvent, tydligt, mer raka streck än sneda kors och tvärs samt att inga pilar eller block ligger bakom någon annan symbol så att det är svårt att följa.

Vårt exempel

Aktivitetsdiagram exempel Nu har jag tagit vår uppgift som vi arbetar med och nu skall vi se om vi kan följa flödet och förstå hur det fungerar.

Startblocket behöver väl ingen större beskrivning och sedan kommer det ett block där användaren får information om att ett tal skall matas in. Detta följs av ett inputblock där användaren faktiskt matar in talet.

Nu börjar själva processen där vi skall utföra operationen, först sätts en räknare, vi talar inte om vad den skall heta, till 1. Detta är mer likt programmeringskod än något vi skrivit i pseduokoden men det är en kombination av utrymmesskäl inne i boxen och tydlighet om vad som skall göras som göra att vi skriver så här. Vi får dock inte skriva programspecifik kod eftersom uppgiften skall gå att lösa med flera olika programmeringsspråk.

Nu kommer tre på varandra följande val-block, den första kollar om räknaren är mindre än eller lika med tal och om det är sant så kör vi ett varv i loopen. Om det är falskt så går vi till stoppblocket och applikationen avslutas.

För varje varv i loopen så kollar vi om räknaren är lika med 20, om så är fallet så stoppar applikationen genom att vi går till stoppblocket. Om talet inte är lika med 20 så kollar vi om talet inte är jämnt delbart med 2, om så är fallet skriver vi ut talet. Sedan ökar vi räknaren med 1 och börjar om loopens test.

Ta dig lite tid, gå igenom aktivitetsdiagrammet och försök förstå hur det hänger ihop.

Vår applikation

Nu är det dags att skriva kod utifrån vår pseudokod, här följer några exempel i olika programmeringsspråk. Även om du kanske inte förstår de andra språken så ser du troligtvis likheter och får en uppfattning om hur användbart pseudokod/aktivitetsdiagram är för att lösa problem oavsett programmeringsspråk.

PHP

Vill du testa så spara filen som valfritt namn med filändelsen .php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Lista tal</title>
</head>
<body>

<!-- // PSEUDO: Uppmana användaren att mata in ett tal. -->
<!-- action="#" innebär att vi skickar formulärets innehåll till samma sida -->
<form action="#" method="post">
	<p>Ange ett tal<br>
	<input type="text" name="tal"><br>
	<input type="submit"></p>
</form>

<?php
// Kollar om formuläret har skickats
if(isset($_POST['tal'])){
	// PSEUDO: Hämta talet som användaren angav.
	$tal = $_POST['tal'];
	echo "<p>De utskrivna talen är</p>";
	// PSEUDO: Loopa igenom alla tal från 1 till det angivna talet.
	for($i = 1; $i <= $tal; $i++){
			// PSEUDO: Om aktuellt tal (det som loopas) är udda
			if($i % 2 == 1){
				// PSEUDO: Skriv ut talet
				echo "$i<br>";
			}

			// PSEUDO: Om aktuellt tal (det som loopas) är 20
			if($i == 20){
				// PSEUDO: Avbryt loopen
				break;
			}
	}
}
?>
</body>
</html>

Output

Bild när applikationen har körts

JavaScript [klicka för att öppna/stänga]

Vill du testa så spara filen som valfritt namn med filändelsen .html

<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8">
  <title>Lista tal med JavaScript</title>
</head>
<body>
  <div id="content"></div>
  <script>
    var myContent = document.getElementById("content");
    // PSEUDO: Uppmana användaren att mata in ett tal.
		// PSEUDO: Hämta talet som användaren angav.
		var tal = parseInt(prompt("Ange ett tal"));

		var content = "<p>De utskrivna talen är</p>";
		// PSEUDO: Loopa igenom alla tal från 1 till det angivna talet.
		for(var i = 1; i <= tal; i++){
			// PSEUDO: Om aktuellt tal (det som loopas) är udda
			if(i % 2 == 1){
				// PSEUDO: Skriv ut talet
				content += i + "<br>";
			}

			// PSEUDO: Om aktuellt tal (det som loopas) är 20
			if(i == 20){
				// PSEUDO: Avbryt loopen
				break;
			}
		}
    myContent.innerHTML = content;
  </script>
</body>
</html>

Output

Bild när applikationen har körts

C# [klicka för att öppna/stänga]

För att testa denna behöver du kunna kompilera filen till en csharp-applikation. För det krävs applikationer som Xamarin, XCode eller Visual Studio.

using System;

namespace example
{
	class MainClass
	{
		public static void Main (string[] args)
		{
			// PSEUDO: Uppmana användaren att mata in ett tal.
			Console.WriteLine ("Ange ett tal");
			// PSEUDO: Hämta talet som användaren angav.
			int tal = int.Parse(Console.ReadLine());

			Console.WriteLine("De utskrivna talen är");
			// PSEUDO: Loopa igenom alla tal från 1 till det angivna talet.
			for(int i = 1; i < tal; i++){
				// PSEUDO: Om aktuellt tal (det som loopas) är udda
				if(i % 2 == 1){
					// PSEUDO: Skriv ut talet
					Console.WriteLine (i);
				}

				// PSEUDO: Om aktuellt tal (det som loopas) är 20
				if(i == 20){
					// PSEUDO: Avbryt loopen
					break;
				}
			}
		}
	}
}

Output

Bild när applikationen har körts

Projekt01 - En bankapplikation

Uppgiften är att skapa en bankapplikation som skall göra din webbläsare till Sveriges enklaste, och minst säkra, internetbank. Uppgiften kommer vara tvådelad, först en grundläggande del som alla skall göra för att visa på kunskaper i nivå med betyget E. Sedan kommer det en lista med tilläggsfunktioner som gör applikationen lite mer avancerad och förbereder dig på högre betyg.

för dig som läser Programmering 1 och Webbserverprogrammering 1 parallellt så finns det slutligen en möjlighet att slå ihop de två projekten och bygga ihop inloggningsapplikationen, från Webbserverkursen, med bankapplikationen.

Innan du börjar hacka kod, gör en grovplanering av hur du skall lägga upp arbetet. Det är oftast mer effektivt att sedan lösa en deluppgift i taget. Koden för grundkraven är inga nyheter, det är saker du har gjort tidgare, det gäller bara att pussla ihop det på rätt sätt.

Grundkrav

Följande grundkrav finns för att ha löst uppgiften.

  • När ett konto skapas så får användaren 1000kr insatta på kontot.
  • Bygg applikationen i en eller flera php-filer.
  • Användaren skall kunna göra ett uttag eller insättning till sitt konto i applikationen, detta sköts genom ett eller flera formulär med lämpliga formulärelement.
  • Kontots saldo får aldrig vara negativt. Du skall visa med pseudokod och/eller aktivitetsdiagram hur du har löst detta.
    Rita detta i draw.io.
  • Insättning och uttag får vara vilket belopp som helst, fast vi jobbar bara med hela kronor.
  • Saldot på kontot skall beräknas utifrån kontots händelser, det skall inte lagras någonstans i en fil.

Hjälp

För de elever som tycker att detta är svårt så finns det hjälp att få. Jag har byggt upp en tutorial som går igenom bankens uppbyggnad steg för steg och hjälper dig att lösa uppgiften på E-nivå. Du lär dig mest genom att försöka själv, du lär dig mycket genom att försöka själv och ta hjälp och du lär dig mindre av att bata skriva av tutorial och inte fundera på egen hand.

Tilläggsfunktionalitet

Grundkraven skall först vara uppnådda innan du jobbar vidare med de lite svårare tilläggsfunktionerna. Du behöver inte lösa alla om du inte vill, att lösa en är bättre än att inte lösa någon. Att lösa en rikigt bra är bättre än att lösa två lite halvslarvigt.

  • Använd en delimiter för att lagra mer info i filen. En text för kontohändelsen och ett datum/tid för att ange när händelsen ägde rum, är vanligt när vi får ett kontoutdrag.
  • Hur skulle vi kunna använda flera konton i vår bank? Även för samma användare.
  • Vid ett givet tillfälle lägga till ränta, på 1.25% på samtliga konton. Hur fungerar den funktionen? Skriv psedukod och/eller aktivitetsdiagram för detta.
  • Här skall insättningar kunna göras med valfritt belopp men uttag skall endast kunna göras med hela hundralappar. Kontots saldo skall kunna innehålla ören, fast vi avrundar till två decimaler.

TIPS: Användbara funktioner/tekniker är glob(). Att använda sessioner kan underlätta i vissa fall, tänk bara på hur du vill använda detta.

Ämnesöverskridande projekt

Om du parallellt med programmering 1 läser webbserverprogrammering 1 så tror jag det kan vara intressant att slå ihop dessa två projekt och göra en gemensam övning.

  • Skapa flera olika användare, fundera på hur du lagrar användarnamn och lösenord. Varje användare kan ha ett eller flera konton.
  • Om du har löst räntefrågan som tilläggsfunktion, skulle det gå att göra denna individuell och kopplad till varje användare?

Redovisning

Redovisa detta moment på följande sätt;

  1. Lägg upp projektet på din webbplats. Se till att applikationen håller ihop genom att lägga hela projektet i en mapp.
  2. Länka till applikationen från din samlingssida.
  3. Länka också till CSource och se till att jag den vägen kan se all din kod.
  4. I wordpress så reflekterar du över ditt arbete,
    • berätta vad du gjort i projektet, bara grunduppgiften eller någon/några av de fördjupande delarna.
    • beskriv vad som varit enkelt, svårt, utmanande eller näst intill helt omöjligt.
    • lägg upp din pseudokod och/eller aktivitetsdiagram.
    • länka till applikationen och CSource.