.NET Web I - Nowy projekt

28 Grudnia 2017

Dziś dowiemy się jak zacząć tworzenie aplikacji webowej, tworząc nowy projekt, które będziemy potem modyfikowali.

To jest pierwszy post z serii “.NET Web”, w której nauczymy się budować aplikacje webowe. Równolegle będziemy pracować w dwóch różnych językach, w dwóch różnych frameworkach. Jeśli interesuje was tylko jeden, kliknijcie link poniżej by od razu przeskoczyć do odpowiedniego rozdziału.

  1. F# z Suave
  2. C# z ASP.NET Core

Zanim zaczniemy wykonaj następujące kroki:

Zainstaluj środowisko .NET Core 2.0

W tym celu odwiedź stronę microsoft.com/net i postępując zgodnie z instrukcjami dla swojej platformy pobierz i zainstaluj środowisko.

Zainstaluj Visual Studio Code

W tym celu odwiedź stronę code.visualstudio.com, pobierz i zainstaluj to jakże fajne IDE. Po instalacji, uruchom VS Code, wybierz z panelu po lewej stronie zakładkę “Extensions” i zainstaluj rozszerzenia C# i F# Ionide.

F# z Suave

Utwórz nowy folder na swój projekt i przejdź do niego. Klikając na nim prawym, albo z konsoli, otwórz w tym folderze VS Code. Jeśli zrobisz to poprawnie to w oknie VS Code, w zakładce “Explorer” zobaczysz nazwę i zawartość tego folderu.

Teraz będziemy chcieli otworzyć konsolę w tym folderze. Możemy to zrobić w VS Code używając skrótu klawiszowego Ctrl+`.

Utworzymy nowy projekt .NET Core F# wpisując

dotnet new console -lang F#

I w folderze zobaczymy pliki Program.fs i Project.fsproj. Plik projektu będzie miał nazwę taką jak folder w którym jesteśmy.

Następnie będziemy chcieli zainstalować potrzebną nam paczkę z biblioteką Suave

dotnet add package Suave -v 2.2.1 -f netcoreapp2.0

Sprawdziłem najpierw w bibliotece paczek na stronie NuGet wersję paczki Suave, stąd wiedziałem, żeby użyć wersji 2.2.1. Bez tego, dotnet próbował dodać wersję 1.0.0.

Po poprawnym dodaniu paczki, aby sprawdzić czy wszystko działa jak należy, wpisz do pliku Program.fs następującą zawartość:

open System

open Suave
open Suave.Successful

[<EntryPoint>]
let main argv =
    startWebServer defaultConfig (OK "Hello World!")
    0 // return an integer exit code

W skrócie, otwieramy niezbędne moduły (OK jest funkcją z modułu Suave.Successful) i w funkcji main uruchamiamy serwer Suave z domyślnymi ustawieniami, który dla każdego requestu zwróci odpowiedź HTTP 200 OK z zawartością "Hello World!".

Żeby ten projekt przetestować, musimy go zbudować i uruchomić

dotnet build
dotnet run

Zobaczymy szczęśliwą wiadomość

Smooth! Suave listener started in 70.228 with binding 127.0.0.1:8080

I możemy wejść z dowolnej przeglądarki na http://localhost:8080 aby zobaczyć napis Hello World!.

Co dalej?

Możesz teraz wskoczyć na stronę Suave.IO, pobawić się funkcjonalnością, albo przeczytać kolejny artykuł: Filtrowanie requestów.

C# z ASP.NET MVC

Utwórz nowy folder na swój projekt i przejdź do niego. Klikając na nim prawym, albo z konsoli, otwórz w tym folderze VS Code. Jeśli zrobisz to poprawnie to w oknie VS Code, w zakładce “Explorer” zobaczysz nazwę i zawartość tego folderu.

Teraz będziemy chcieli otworzyć konsolę w tym folderze. Możemy to zrobić w VS Code używając skrótu klawiszowego Ctrl+`.

Utworzymy nowy projekt .NET Core z template’u ASP.NET MVC z silnikiem budowania widoków Razor

dotnet new razor

Dostaniemy gotowy działający projekt. Jednorazowo upewnijmy się, że mamy wszystkie niezbędne paczki

dotnet restore

Żeby nasz projekt uruchomić

dotnet build
dotnet run

I następnie w przeglądarce wchodzimy na http://localhost:5000, gdzie powita nas strona z zasoba do dalszej nauki ASP.NET Core.

Co dalej?

Możesz teraz poczytać te zasoby, które prezentuje ci template, pobawić się funkcjonalnością, albo przeczytać kolejny artykuł: Filtrowanie requestów.