Ert projekt är väldigt stort för totala nybörjare. Som du sett i tråden redan finns det lika många svar som det finns utvecklare. Så fort det kommer till webb är det en djungel och det dyker upp nya "lösningar" varje vecka. Jag vill därför ge er några konkreta små projekt att börja med så ni får en grundförståelse. Ni kan såklart slänga er på femtioelva färdiglösningar och ramverk, men risken är att ni blir överväldigade och inte får något gjort öht. Dessa steg är till för att kickstarta er förståelse, efter det kan ni dyka ner i hur ni faktiskt ska bygga er app. Många av förslagen nedanför är mer backend än frontend.
Fokusera inte så mycket på val av programmeringsspråk eller specifika lösningar. Om någon skriker till er att "ni ska använda x för det är senaste och bästa!" så gör dessa er en björntjänst. Som nybörjare måste ni lära er fundamentala kunskaper. Många specifika lösningar lär er inte grundkunskaper, det lär er hur ni använder den specifika lösningen. React är ett exempel på en specifik lösning där ni lär er mer om hur React fungerar än hur webbutveckling i grunden fungerar. Det riskerar låsa in er i tankesättet "hur får jag React att göra X" istället för att använda React när det passar.
En liten disclaimer. Ni säger att ni ska göra en webbapp med en mobilapp. Det betyder att ni gör en webbtjänst först och främst, er mobilapp är endast ett gränssnitt för att nyttja tjänsten. Mina förslag nedan utgår därför därifrån.
Hemsida med HTML/PHP/Javascript
Fixa en hemsida på valfri webhost som låter er komma åt FTP och lägga upp en hemsida. Förslagsvis cPanel med PHP och MySQL databas. Dessa är gamla som gatan och oerhört lätta att komma igång med. Fokusera endast på att få upp hemsidan i PHP i detta steg, skit i databasen. Designa inte en flashig sida, spotta bara ut lite enkel HTML som en länk eller något. Kolla gärna på htaccess bara för att känna till den. Det kan även vara bra att läsa på lite om Apache Server som sköter webbhostningen.
Detta ger er enklare förståelse i hostning.
Lär er "dev tools" i webbläsaren
Här föreslår jag Chrome-baserad webbläsare. Om ni trycker F12 får ni upp debugverktyg för den aktiva hemsidan. Ni kan göra allt från att inspektera HTML/CSS-layout, till ett se vilka JavaScript som laddas in, vilka anrop som görs, och lite annat smått och gott. Denna är grundläggande för att bevaka vad som händer på klientsidan. Ni kan ju testa köra lite JavaScript direkt i console.
Detta ger er en första introduktion till debugverktyg för webb.
Lär er GET och POST-anrop till en URL
Gör en enkel sida som hanterar GET och POST-anrop. Dessa är grundläggande för "API requests", som är ett fint ord för att be om information från en länk som spottar tillbaka data som inte nödvändigtvis är en hemsida. httpbin.org är en exempel-sida för att testa olika anrop. Om du öppnar t.ex. httpbin.org/ip så ser du att du får bara text tillbaka i ett format som kallas för JSON. Försök att göra en PHP-sida som kan hantera POST och spotta ut olika resultat beroende på vad du skickar till den. Det finns olika verktyg för att generera anrop, t.ex. RestMan Chrome Plugin i webbläsaren. Ni kan också använda cURL direkt i terminalen/cmd/console. Hitta gärna olika hemsidor med APIer och testa göra anrop och se vad ni får.
Detta ger er förståelse i hur ni kommunicerar med en webbserver via web API-anrop. API-design är mycket mer invecklat än så här men ni måste börja någonstans.
Lär er JSON, YAML eller XML
Dessa är text-standarder för att skicka data. JSON är vanligast och enklast att förstå, "you can't go wrong with it". Skicka och ta emot data till er sida med POST med JSON och försök göra något mer avancerat med det. Ni kan se dessa format som sätt att skicka standardiserad data mellan er app/klient och servern. Det är er uppgift att bearbeta datan och presentera det för användaren i ett senare skede.
Här lär ni er serialisering av data i läsbart textformat. Detta är obligatoriskt för all webbutveckling.
Kolla på base64 encoding
Detta är ett sätt att konvertera valfri data till en textsträng och tillbaka. I Javascript, spara en bild eller <canvas> som base64 med toDataURL och skicka den strängen till din PHP-sida. Försök sedan få tillbaka den som textsträng och återskapa till bild. base64 förekommer ibland för "data blobs" och sparas i databaser. Ni behöver mest känna till att det finns när ni väl börjar använda existerande lösningar.
Detta ger er förståelse i att det ni ser i applikationer ibland måste bearbetas och sparas i annat format i bakgrunden osynligt för användaren.
Spara saker i databasen
Om ni har en host med MySQL så har ni troligtvis phpMyAdmin. Här kan ni sätta upp hur er databas ser ut. En databas används för att spara undan "persistent information". Användarinformation, uppladdade bilder, inlägg, o.s.v. Skicka upp text eller bilder med POST-anrop till en PHP-url och spara informationen i databasen. Använd en annan PHP-sida för att kolla på det uppladdade innehåller.
Detta ger er en enklare förståelse för relationsdatabaser och hur ni sparar/hämtar information. När ni är bekväm med MySQL så kan ni gå ut och söka i djungeln kring databaser som PostgreSQL, Redis, InfluxDB. De har helt olika syften, MySQL räcker ofta långt.
Webhooks och botar
I samma spår som GET och POST kan ni göra ett försök till att bygga en Discord eller Telegram-bot. Dessa är program som sitter och väntar på anrop från andra servrar. Ni kan köra en PHP-sida som pingar en Discord-bot som sedan spottar ut något i en av era chat-kanaler.
Detta ger er en försmak för hur ni kan automatisera flöden genom att studsa mellan olika services. Det kan dessutom spåra ut i väldigt många roliga sidoprojekt.
Åtkomst via SSH
Secure Shell (SSH) är ett standardsätt för att komma åt webbservrar och liknande via terminalen/console. Detta är fundamentalt för utvecklare. Om er nuvarande webhost inte har SSH-åtkomst, för att ni kör en billig PHP-host med cPanel, testa släng upp en droplet på DigitalOcean. Droplet är bara deras marknasföringsnamn för en virtualiserad mini-server som körs på gemensam hårdvara med andra användare.
Om ni råkar sitta på en RaspberryPi så kan ni lära er hur ni sätter upp SSH-åtkomst till den i Linux. Det finns gott om RPI-guider för detta. Då kan ni använda terminalen på en dator och styra er RPI på distans. Samma princip som för webbhosts.
Att jobba med SSH och terminalkommandon är fundamentalt.
Mer automatisering med Node-RED
Släng upp en Node-RED på StackHero eller annan host som är enkel att använda. Node-RED är superenkelt att leka med. Ni drar och släpper noder och kan snabbt göra flöden som "om någon skickar ett meddelande till URL, skicka ett mail, pinga en bot, o.s.v.". Node-RED är egentligen bäst för mindre automatisering som IoT-enheter (typ värmesensorer som loggar data). Det är dock väldigt enkelt och roligt för att testa flöden innan man bygger något större.
Detta bygger vidare på lekstugan så ni kan göra lite roliga saker.
Testa cross-platform dev
När ni ska bygga appar så behöver ni känna till att olika platformar/enheter kräver olika implementationer. (Desktop, Mobile) (MacOS, Windows, iOS, Android) Detta gör att det finns cross-platform-lösningar, lösningar där ni bygger på ett ställe och kan köra på flera platformar. Detta är en djungel. Börja testa något välanvänt som ElectronJS. Om det duger för Discord, Trello och Dropbox så borde det duga för er. Electron låter er bygga appen som en hemsida men ändå komma åt enhetsspecifika funktioner som att ta bild med kameran. Försök få ut appen både till Desktop och Android (eller vad ni nu har). Krångla inte till det! Försök bara göra en funktion, typ en knapp, som syns på enheterna ni bygger för.
Här kommer ni närmare "vanlig" programmering där ni behöver göra anrop via JavaScript till enhetens funktioner.
Testa lokal databas med SQLite
SQLite är den absolut vanligaste "offline-databasen" som nyttjas för program lokalt på din telefon eller dator. Den använder liknande syntax som MySQL. Detta är något som ibland används för att spegla resultat som finns på en webbserver så du inte behöver ladda om en massa data hela tiden. SQLite används för övrigt i massa datorspel för att hålla koll på hela spelvärldens status (har du plockat föremålet, var finns det fiender, har en boss avslutats, o.s.v).
Detta är lite överkurs.
Sen då?
Välkommen till resten av träsket. Databaser som Redis, PostgreSQL, InfluxDB, o.s.v. Frontend som React, VueJS, AngularJS. App dev med Android Studio. Container hosting med Docker och NAS-enheter. Routing med nginx. Det finns så många lösningar att vissa youtubekanaler som Fireship kan existera endast på att sammanfatta lösningar på ett skämstamt sätt och aldrig få slut på ämnen.
