diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pl/learn/server-side | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/pl/learn/server-side')
7 files changed, 1765 insertions, 0 deletions
diff --git a/files/pl/learn/server-side/django/index.html b/files/pl/learn/server-side/django/index.html new file mode 100644 index 0000000000..1eb4d61586 --- /dev/null +++ b/files/pl/learn/server-side/django/index.html @@ -0,0 +1,70 @@ +--- +title: Django Web Framework (Python) +slug: Learn/Server-side/Django +tags: + - Beginner + - CodingScripting + - Intro + - Learn + - NeedsTranslation + - Python + - Server-side programming + - TopicStub + - django +translation_of: Learn/Server-side/Django +--- +<div>{{LearnSidebar}}</div> + +<p>Django is an extremely popular and fully featured server-side web framework, written in Python. This module shows you why Django is one of the most popular web server frameworks, how to set up a development environment, and how to start using it to create your own web applications.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module you don't need to have any knowledge of Django. Ideally, you would need to understand what server-side web programming and web frameworks are by reading the topics in our <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a> module.</p> + +<p>A general knowledge of programming concepts and <a href="/en-US/docs/Glossary/Python">Python</a> is recommended, but is not essential to understanding the core concepts.</p> + +<div class="note"> +<p><strong>Note</strong>: Python is one of the easiest programming languages for novices to read and understand. That said, if you want to understand this module better, there are numerous free books and tutorials available on the Internet to help you out (new programmers might want to check out the <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python for Non Programmers</a> page on the python.org wiki).</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></dt> + <dd>In this first Django article we answer the question "What is Django?" and give you an overview of what makes this web framework special. We'll outline the main features, including some advanced functionality that we won't have time to cover in detail in this module. We'll also show you some of the main building blocks of a Django application, to give you an idea of what it can do before you set it up and start playing.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></dt> + <dd>Now that you know what Django is for, we'll show you how to set up and test a Django development environment on Windows, Linux (Ubuntu), and macOS — whatever common operating system you are using, this article should give you what you need to be able to start developing Django apps.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></dt> + <dd>The first article in our practical tutorial series explains what you'll learn, and provides an overview of the "local library" — an example website we'll be working through and evolving in subsequent articles.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></dt> + <dd>This article shows how you can create a "skeleton" website project as a basis, which you can then go on to populate with site-specific settings, urls, models, views, and templates.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></dt> + <dd>This article shows how to define models for the <em>LocalLibrary</em> website — models represent the data structures we want to store our app's data in, and also allow Django to store data in a database for us (and modify it later on). It explains what a model is, how it is declared, and some of the main field types. It also briefly shows a few of the main ways you can access model data.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></dt> + <dd>Now that we've created models for the <em>LocalLibrary </em>website, we'll use the Django Admin site to add some "real" book data. First we'll show you how to register the models with the admin site, then we'll show you how to login and create some data. At the end we show some ways in which you can further improve the presentation of the admin site.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></dt> + <dd>We're now ready to add the code to display our first full page — a home page for the <em>LocalLibrary</em> that shows how many records we have of each model type and provides sidebar navigation links to our other pages. Along the way we'll gain practical experience in writing basic URL maps and views, getting records from the database, and using templates.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></dt> + <dd>This tutorial extends our <em>LocalLibrary</em> website, adding list and detail pages for books and authors. Here we'll learn about generic class-based views, and show how they can reduce the amount of code you have to write for common use cases. We'll also go into URL handling in greater detail, showing how to perform basic pattern matching.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></dt> + <dd>This tutorial extends our <em>LocalLibrary</em> website, adding a session-based visit-counter to the home page. This is a relatively simple example, but it does show how you can use the session framework to provide persistent behaviour for anonymous users in your own sites.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></dt> + <dd>In this tutorial we'll show you how to allow users to login to your site with their own accounts, and how to control what they can do and see based on whether or not they are logged in and their <em>permissions</em>. As part of this demonstration we'll extend the <em>LocalLibrary</em> website, adding login and logout pages, and user- and staff-specific pages for viewing books that have been borrowed.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></dt> + <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Django, and in particular the easiest way to write forms to create, update, and delete model instances. As part of this demonstration we'll extend the <em>LocalLibrary</em> website so that librarians can renew books, and create, update, and delete authors using our own forms (rather than using the admin application).</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></dt> + <dd>As websites grow they become harder to test manually — not only is there more to test, but, as the interactions between components become more complex, a small change in one area can require many additional tests to verify its impact on other areas. One way to mitigate these problems is to write automated tests, which can easily and reliably be run every time you make a change. This tutorial shows how to automate <em>unit testing</em> of your website using Django's test framework.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></dt> + <dd>Now you've created (and tested) an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></dt> + <dd>Protecting user data is an essential part of any website design. We previously explained some of the more common security threats in the article <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> — this article provides a practical demonstration of how Django's built-in protections handle such threats.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessment will test your understanding of how to create a website using Django, as described in the guides listed above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></dt> + <dd>In this assessment you'll use some of the knowledge you've learned from this module to create your own blog.</dd> +</dl> diff --git a/files/pl/learn/server-side/express_nodejs/development_environment/index.html b/files/pl/learn/server-side/express_nodejs/development_environment/index.html new file mode 100644 index 0000000000..f525a69f31 --- /dev/null +++ b/files/pl/learn/server-side/express_nodejs/development_environment/index.html @@ -0,0 +1,411 @@ +--- +title: Przygotowanie środowiska programisty Node +slug: Learn/Server-side/Express_Nodejs/development_environment +tags: + - Express + - Node + - Początkujący + - Wprowadzenie + - środowisko programisty +translation_of: Learn/Server-side/Express_Nodejs/development_environment +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}</div> + +<p class="summary"></p> + +<p class="summary">Gdy już wiesz do czego służy Express, nadszedł czas, żeby pokazać Ci jak przygotować i przetestować środowisko programistyczne Node/Express w różnych systemach operacyjnych: Windows, Linux (Ubuntu) i macOS. Jakiegokolwiek systemu byś nie używał, w tym artykułe przygotujemy wszystko co Ci będzie potrzebne, by zacząć tworzyć aplikacje w Express.</p> + +<p class="summary"></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Wymagania:</th> + <td> + <p>Umiejętność pracy z terminalem lub w trybie wiersza poleceń. Umiejętność instalacji oprogramowania w systemie operacyjnym Twojego komputera, który będzie służył do programowania.</p> + </td> + </tr> + <tr> + <th scope="row">Cel:</th> + <td>Przygotowanie środowiska programisty do tworzenia aplikacji w Express(4.x) na Twoim komputerze.</td> + </tr> + </tbody> +</table> + +<h2 id="Przegląd_środowiska_programisty_Express">Przegląd środowiska programisty Express</h2> + +<p>Instalacja środowisk <em>Node</em> i <em>Express</em> jest stosunkowo prosta. W tej sekcji dokonamy przeglądu wszystkich potrzebnych narzędzi, przedstawimy kilka prostych metod instalacji <em>Node </em>(<em>Express </em>także) w systemach operacyjnych Ubuntu, macOS i Windows. Na koniec przetestujemy przygotowane środowisko.</p> + +<h3 id="Co_to_jest_środowisko_programisty_Express">Co to jest środowisko programisty Express?</h3> + +<p>Środowisko do tworzenia aplikacji <em>Express </em>wymaga zainstalowania pakietu <em>Node.js</em>, menadżera pakietów <em>NPM</em> oraz opcjonalnie pakietu <em>Express Application Generator.</em></p> + +<p>Środowisko <em>Node </em>i menadżer <em>NPM </em>mogą zostać zainstalowane razem z różnych źódeł. Mogą być to pakiety binarne, pakiety instalacyjne, menadżery pakietów systemu operacyjnego lub pliki źródłowe (co zostanie pokazane w następnych sekcjach). Sam <em>Express</em> jest instalowany przez <em>NPM</em>, podobnie jak pozostałe zależności aplikacji webowej (inne biblioteki w tym silnik szablonów, sterowniki baz danych, moduły warstwy pośredniej do autentykacji, obsługi plików statycznych itd.)</p> + +<p>Przy pomocy <em>NPM </em>możemy też zainstalować <em>Express Application Generator</em>, który jest bardzo użytecznym narzędziem do generowania szkieletu aplikacji webowej w architekturze MVC. Oczywiście jest to narzędzie opcjonalne i nie jest wymagane, aby tworzyć aplikacje webowe przy pomocy <em>Express</em> o podobnej architekturze. Będziemy niego korzystać, ponieważ ułatwia trudne początki w pracy nad aplikacją i promuje modułową strukturę aplikacji.</p> + +<div class="note"> +<p><strong>Uwaga: </strong>W odróżnieniu od pozostalych frameworków, środowisko programisty nie zawiera oddzielnego serwera WWW do celów deweloperskich. W Node/Express aplikacja sama tworzy i uruchamia własny serwer internetowy!</p> +</div> + +<p>Potrzebne będą także inne narzędzia, które są typowymi składnikami środowiska programisty, jak edytory tekstu czy środowisko IDE do edycji kodu, systemy kontroli wersji np. Git, dzięki którym możemy bezpiecznie zarządzać wersjami kodu. Zakładamy, że posiadasz już tego typu narzędzia zainstalowane (w szczególności edytor tekstu).</p> + +<h3 id="Jakie_systemy_operacyjne_są_wspierane">Jakie systemy operacyjne są wspierane?</h3> + +<p><em>Node </em>można uruchomić w systemie Windows, macOS, wszelkim odmianach systemu Linux, czy kontenerach typu Docker (pełna lista znajduje się na stronie Node.js <a href="https://nodejs.org/en/download/">Downloads</a>). Praktycznie każdy komputer ma wystarczającą wydajność do uruchomienia <em>Node</em> w trakcie tworzenia aplikacji. <em>Express </em>jest uruchamiane w środowisku <em>Node</em>, co oznacza, że może działać na dowolnej platformie obsługującej Node.</p> + +<p>W tym artykule wyjaśnimy proces instalacji w systemie Windows, maxOS i dystrybucji Ubuntu systemu Linux.</p> + +<h3 id="Z_jakie_wersji_NodeExpress_możemy_skorzystać">Z jakie wersji Node/Express możemy skorzystać?</h3> + +<p>Środowisko <em>Node </em>wystepuje w <a href="https://nodejs.org/en/blog/release/">wielu wersjach</a> - najnowsze zawierają poprawki błędów, wsparcie dla najnowszych wersji standardu ECMASript (JavaScript) oraz lepsze API. </p> + +<p>Zasadniczo powinieneś korzystać z najbardziej aktualnej wersji <em>LTS</em> (ang. <em>long-term supported</em> - o długim okresie wsparcia) ponieważ jest bardziej stabilna od bieżących wersji, przy zachowaniu w miarę aktualnej funkcjonalności (i jest nadal aktywnie utrzymywana). Z wersji najbardziej aktualnych możesz korzystać, gdy chcesz mieć dostęp do najnowszych funkcji, których brak w wersji <em>LTS</em>.</p> + +<p>W przypadku pakietu <em>Express </em>powinieneś zawsze korzystać z najnowszej wersji</p> + +<h3 id="A_co_z_bazami_i_pozostałymi_zależnościami">A co z bazami i pozostałymi zależnościami?</h3> + +<p>Pozostałe potrzebne elementy aplikacji, jak sterowniki baz danych, generatory widoków, moduły autentykacji itd. są importowane do środowiska aplikacji za pomocą menadżera <em>NPM</em>. Zajmiemy się nim w późniejszych artykułach dotyczących tworzenia aplikacji.</p> + +<h2 id="Instalacja_Node">Instalacja Node</h2> + +<p>W tej sekcji zajmiemy się najłatwiejszym sposobem instalacji Node.js w wersji <em>LTS </em>dla różnych systemów operacyjnych: Ubuntu Linux 18.04, maxOS i Windows 10. </p> + +<div class="note"> +<p><strong>Wskazówka: </strong>Jeśli korzystasz z innego systemu operacyjnego lub po prostu chcesz poznać inne możliwości swojej platformy zobacz <a href="https://nodejs.org/en/download/package-manager/">Installing Node.js via package manager</a> (nodejs.org).</p> +</div> + +<h3 id="macOS">macOS</h3> + +<p>Instalacja <em>Node </em>wraz z <em>NPM </em>w systemach Windows i macOS jest dość łatwa, wystarczy użyć instalatora:</p> + +<ol> + <li>Pobierz wymagany instalator: + <ol> + <li>wejdź na stronę <a href="https://nodejs.org/en/">https://nodejs.org/en/</a></li> + <li>Wybierz przycisk z napisem "Recommended for most users", którym pobierzesz najnowszą wersję <em>LTS</em>.</li> + </ol> + </li> + <li>Zainstaluj <em>Node </em>podwójnie klikając w pobrany plik i postępuj zgodnie z pojawiającymi instrukcjami.</li> +</ol> + +<h3 id="Windows">Windows</h3> + +<p>Najbardziej wskazaną metoda instalacji <em>Node </em>i <em>NPM </em>w systemie Windows jest skorzystanie z możliwości podsystemu Linux v2 (WSL2), co wymaga zainstalowania niejawnego programu testów systemu Windows (zobacz <a href="https://docs.microsoft.com/windows/nodejs/setup-on-wsl2">Set up your Node.js development environment with WSL 2</a>).</p> + +<p>Po zainstalowaniu podsytemu Linux możesz zainstalować Ubuntu 18.04 jako system dla środowiska Node.js. Gdy już WSL2 i Ubuntu zostały zainstalowane, możesz kontynuować proces instalacji Node.js zgodnie z opisem w punkcie dotyczącym instalacji Node na Ubutu 18.04.</p> + +<h3 id="Ubuntu_18.04">Ubuntu 18.04</h3> + +<p>Najbardziej aktualną wersję <em>LTS </em>środowiska <em>Node </em>12.x najłatwiej jest zainstalować korzystając z <a href="https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions">menadżera pakietów</a> pobranego z binarnego repozytorium systemu Ubuntu. Można to zrobić dwoma poleceniami w Twoim terminalu:</p> + +<pre class="brush: bash notranslate">curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - +sudo apt-get install -y nodejs +</pre> + +<div class="warning"> +<p><strong>Uwaga:</strong> Nie instaluj wprost z normalnych repozytoriów Ubuntu, ponieważ zawierają one bardzo stare wersje Node.</p> +</div> + +<ol> +</ol> + +<h3 id="Testowanie_Node.js_i_NPM_po_instalacji">Testowanie Node.js i NPM po instalacji</h3> + +<p>Testujemy poprawność instalacji wpisując polecenie "version" w wierszu poleceń. Jeśli instalacja się powiodła to zostanie wyśiwetlony numer aktualnej wersji:</p> + +<pre class="brush: bash notranslate">> node -v +v10.16.0</pre> + +<p>Razem ze środowiskiem <em>Node.js</em> powinien zostać zainstalowany także menadżer <em>NPM.</em> Poprawność instalacji możemy przetestować ten sam sposób:</p> + +<pre class="brush: bash notranslate">> npm -v +6.9.0</pre> + +<p>Przeprowadzimy teraz test działania środowiska tworząc prosty serwer z użyciem wyłącznie pakietów znajdujących w <em>Node</em>, który wygeneruje dokument z napisem "Hello World":</p> + +<ol> + <li>Skopuj poniższy tekst do pliku o nazwie <strong>hellonode.js</strong>. Kod wykorzystuje wyłącznie funkcje <em>Node </em>(nie zawiera żadnych funkcji <em>Express</em>) i jest napisany z wykorzystaniem składni ES6: + + <pre class="brush: js notranslate">//Load HTTP module +const http = require("http"); +const hostname = '127.0.0.1'; +const port = 3000; + +//Create HTTP server and listen on port 3000 for requests +const server = http.createServer((req, res) => { + + //Set the response HTTP header with HTTP status and Content type + res.statusCode = 200; + res.setHeader('Content-Type', 'text/plain'); + res.end('Hello World\n'); +}); + +//listen for request on port 3000, and as a callback function have the port listened on logged +server.listen(port, hostname, () => { + console.log(`Server running at http://${hostname}:${port}/`); +}); +</pre> + + <p>W kodzie znajduje się import modułu "http", który to moduł jest wykorzystany do utworzenia serwera (<code>createServer()</code>) nasłuchującego na porcie 3000. Skrypt wysyła na konsolę komunikat z informacją pod jakim adresem URL działa nasz serwer. Funkcja tworząca serwer (<code>createServer()</code>) pobiera argument w postaci definicji funkcji zwrotnej, która zostanie wywołana w chwili odebrania żądania. W funkcji zwrotnej tworzymy prostą odpowiedź z kodem statusu HTTP 200 ("OK") i zwykłym tekstem "Hello World".</p> + + <div class="note"> + <p><strong>Uwaga:</strong> Nie przejmuj się, jeśli nie rozumiesz tego kodu. Wszystko wyjaśnimy ze szczegółami, gdy zaczniemy korzystać z Express. </p> + </div> + </li> + <li>Uruchom serwer przechodząć najpierw w terminalu do katalogu z plikiem <code>hellonode.js</code> a następnie wydając polecenie <code>node</code> z nazwą skryptu: + <pre class="brush: bash notranslate">>node hellonode.js +Server running at http://127.0.0.1:3000/ +</pre> + </li> + <li>W przeglądarce wpisz URL <a href="http://127.0.0.1:3000">http://127.0.0.1:3000 </a>. Jeśli wszystko pracuje poprawnie w przegladarce powinieneś zobaczyć napis "Hello World".</li> +</ol> + +<h2 id="Korzystanie_z_NPM">Korzystanie z NPM</h2> + +<p>Drugim ważnym narzędziem po samym <em>Node </em>jest menadżer pakietów <a href="https://docs.npmjs.com/">NPM</a>. Głównym jego zadaniem jest pobieranie pakietów (bibliotek JavaScript), których aplikacja potrzebuje w trakcie tworzenia, testowania i pracy w środowisku produkcyjnym. Możesz też go potrzebować do uruchamiania testów i narzędzi wykorzystywanych w trakcie programowania. </p> + +<div class="note"> +<p><strong>Uwaga:</strong> Z punktu widzenia Node, Express jest tylko jednym z wielu pakietów, których potrzebujesz w swoim kodzie i musisz zainstalować przy pomocą NPM.</p> +</div> + +<p>Możesz pobierać każdy z wymaganych modułów wpisując polecenia dla NPM do każdego modułu. W praktyce o wiele wygodniejszym rozwiązaniem jest zarządzanie zależnościami poprzez specjalny plik tekstowy o nazwie <a href="https://docs.npmjs.com/files/package.json">package.json</a>. W pliku tym znajduje się lista wszystkich potrzebnych modułów wymaganych przez tworzony pakiet JavaScript, a także nazwa pakietu, wersja, opis, początkowy plik do uruchomienia, zależności produkcyjne, zależności deweloperskie, wersja środowiska <em>Node</em>, w której pakiet może pracować itd. Plik <strong>package.json </strong>powinien zawierać wszystkie informacje wymagane przez <em>NPM</em>, dzięki którym możliwe jest pobranie i uruchomienie Twojej aplikacji (jeśli piszesz bibliotekę wykorzystywaną przez innych użytkowników musisz skorzystać z definicji opisującej załadowanie pakietu do repozytorium npm).</p> + +<h3 id="Dodawanie_zależności">Dodawanie zależności</h3> + +<p>W kolejnych krokach opiszemy jak możesz użyć <em>NPM</em> do pobrania pakietu, zapisania go w zależnościach projektu i oznaczenia go jako wymaganego przez naszą aplikację <em>Node</em>.</p> + +<div class="note"> +<p><strong>Uwaga: </strong>Pokażemy teraz instrukcje pobrania i instalacji pakietu <em>Express. </em>Później poznamy jak ten pakiet i pozostałe zostaną automatycznie wyspecyfikowane w projekcie, gdy utworzymy go modułem <em>Express Application Generator. </em>Ta sekcja jest po to, abyś mógł zrozumieć jak działa sam NPM i jakie korzyści daje wykorzystanie generatora aplikacji.</p> +</div> + +<ol> + <li>Zaczniemy od utworzenia katalogu na Twoją nową aplikację.Potem musimy do niego wejść: + <pre class="brush: bash notranslate">mkdir myapp +cd myapp</pre> + </li> + <li> + <p>Poleceniem <code>init</code> narzędzia npm utworzymy plik <strong>package.json</strong> dla naszej aplikacji. Pojawią się pytania o kilka istotnych rzeczy, jak nazwa i wersja Twojej aplikacji, nazwę pliku wejściowego aplikacji (domyślnie jest to <strong>index.js</strong>). Na razie zaakceptujemy ustawienia domyślne:</p> + + <pre class="brush: bash notranslate">npm init</pre> + + <p>Jeśli zajrzysz do pliku <strong>package.json</strong>, to zobaczysz zakceptowane ustawienia domyślne wraz z licencją na końcu.</p> + + <pre class="brush: json notranslate">{ + "name": "myapp", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC" +} +</pre> + </li> + <li>W kolejnym kroku zainstalujemy moduł <em>Expess </em>w katalogu <code>myapp</code> co spowoduje dodanie tego modułu jako zależności w naszym pliku <strong>package.json</strong>. </li> + <li> + <pre class="brush: bash notranslate">npm install express</pre> + + <p>Możemy teraz zobaczyć dodaną na końcu w pliku <strong>package.json</strong> sekcję, która dołączy do naszej aplikacji pakiet Express.</p> + + <pre class="brush: json notranslate">{ + "name": "myapp", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", +<strong> "dependencies": { + "express": "^4.16.4" + }</strong> +} +</pre> + </li> + <li>Kolejnym krokiem po dołączeniu zależności do projektu, jest zaimportowanie pakietu w pliku źródłowym przy pomocy wywołania funkcji <code>require()</code>. Utwórz teraz plik <strong>index.js</strong> w katalogu aplikacji <code>myapp</code> i wpisz do niego poniższą zawartość: + <pre class="brush: js notranslate">const express = require('express') +const app = express(); + +app.get('/', (req, res) => { + res.send('Hello World!') +}); + +app.listen(8000, () => { + console.log('Example app listening on port 8000!') +}); +</pre> + + <p>Utworzony kod to odpowiednik aplikacji typu "Hello World!" w <em>Express</em>. Najpierw importujemy pakiet "express" funkcją <code>require()</code>, a następnie tworzymy serwer (<code>app</code>), który nasłuchuje żądań na porcie 8000 i wysyła komunikaty na konsolę z informacją o porcie pracującego serwera. Funkcja <code>app.get()</code> realizuje obsługę żądań wyłacznie typu GET skierowanych do głównej ścieżki URL aplikacji ('/'), na które generuje odpowiedź z komunikatem "Hello World!".</p> + </li> + <li>Możesz uruchomić serwer wywołując w terminalu polecenie node z parametrem w postaci nazwy naszego skryptu: + <pre class="brush: bash notranslate">>node index.js +Example app listening on port 8000 +</pre> + </li> + <li>Otwórz w przeglądarce stronę z URL (<a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>). Jeśli wszystko pracuje poprawnie powinieneś zobaczyć stronę z napisem "Hello World!".</li> +</ol> + +<h3 id="Zależności_środowiska_deweloperskiego">Zależności środowiska deweloperskiego</h3> + +<p>Jeśli jakiś pakiet wykorzystujesz tylko podczas tworzenia aplikacji to powinieneś go dodać jako zależność deweloperską - "development dependency" (to spowoduje, że użytkownicy Twojej aplikacji (lub pakietu) nie będą instalować takiego pakietu w wersji produkcyjnej). Na przykład, gdy chcesz skorzystać z popularnej biblioteki <a href="http://eslint.org/">eslint</a> (jest to tzw. linter) to powinieneś wywołać NPM następująco:</p> + +<pre class="brush: bash notranslate"><code>npm install eslint --save-dev</code></pre> + +<p>W efekcie dostaniesz nowy wpis w pliku <strong>package.json</strong> Twojej aplikacji:</p> + +<pre class="brush: js notranslate"> "devDependencies": { + "eslint": "^4.12.1" + } +</pre> + +<div class="note"> +<p><strong>Uwaga:</strong> "<a href="https://en.wikipedia.org/wiki/Lint_(software)">Linter</a>y" to narzędzia do statycznej analizy kodu aplikacji służące do wykrywania i raportowania fragmentów, które nie są zgodne/lub są zgodne z dobrymi praktykami tworzenia oprogramowania.</p> +</div> + +<h3 id="Uruchamianie_zadań">Uruchamianie zadań</h3> + +<p>Oprócz dodawania i pobierania zależności, w pliku <strong>package.json</strong> możesz też definiować tzw. nazwane skrypty. Przy pomocy NPM możesz je później uruchamiać poleceniem <a href="https://docs.npmjs.com/cli/run-script">run-script</a>. Jest to typowe rozwiązanie stosowane do automatyzacji takich zadań jak uruchamianie testów, fragmentów tworzonej aplikacji czy budowania ciągu uruchamianych narzędzi (np. uruchamianie narzędzi minimalizujących objętość kodu JavaScript, zmiany rozmiaru obrazów, LINT, analizatory kodu itp.).</p> + +<div class="note"> +<p><strong>Uwaga:</strong> Możesz też korzystać z innych narzędzi do tego celu jak <a href="http://gulpjs.com/">Gulp</a> lub <a href="http://gruntjs.com/">Grunt</a> .</p> +</div> + +<p>Przykładem może być skrypt do uruchomienia narzędzia eslint (jako zależność deweloperska) w postaci bloku dodanego do pliku <strong>package.json</strong> (zakładamy, że żródła naszej aplikacji znajdują się w katalogu /src/js):</p> + +<pre class="brush: js notranslate">"scripts": { + ... + "lint": "eslint src/js" + ... +} +</pre> + +<p>Wyjaśnijmy teraz co dodaliśmu w bloku "scripts": jest to polecenie, które musiałbyś wpisać w oknie terminala, żeby uruchomić <code>eslint</code> dla wszystkich plików JavaScript w katalogu <code>src/js</code>. Aby móć później się odwołać do tego polecenia nazwaliśmy go skrótem <code>lint</code>. </p> + +<p>Teraz możemy uruchomić <em>eslint</em> wywołując NPM z naszym skrótem:</p> + +<pre class="brush: bash notranslate"><code>npm run-script lint +# OR (using the alias) +npm run lint</code> +</pre> + +<p>Choć wydaje się, że wywołanie utworzonego skrótu nie jest krótsze od oryginalnego polecenia, to pamiętaj, że możesz w skryptach zawrzeć znacznie dłuższe polecenia, jak i całe ciągi poleceń. Możesz też stworzyć jeden skrypt, który uruchamia wszystkie testy.</p> + +<h2 id="Instalacja_generator_aplikacji_Express_-_Express_Application_Generator">Instalacja generator aplikacji Express - Express Application Generator</h2> + +<p><a href="https://expressjs.com/en/starter/generator.html">Express Application Generator</a> to narzędzie do generowania szkieletu aplikacji Express. Zaczniemy od zainstalowania generatora przy pomocy NPM z flagą <code>-g</code>:</p> + +<pre class="notranslate"><code>npm install express-generator -g</code></pre> + +<div class="blockIndicator note"> +<p><strong>Uwaga: </strong>Może pojawić się konieczność wstawienia na początku wiersza polecenia <code>sudo</code> w systemach Ubuntu lub macOS. Flaga <code>-g</code> powoduje zainstalowanie pakietu w trybie globalnym, ktory pozwala na wywołanie go z dowolnego katalogu.</p> +</div> + +<p>Żeby utworzyć aplikację "helloworld" z domyślnymi ustawieniami, wejdź do katalogu, w którym chcesz ją utworzyć i uruchom polecenie:</p> + +<pre class="brush: bash notranslate">express helloworld</pre> + +<div class="note"> +<p><strong>Uwaga: </strong>Podczas instalacji możesz<strong> </strong>podać bibliotekę szablonów i wiele innych ustawień. Wpisz polecenie <code>help</code> żeby zobaczyć wszystkie możliwości:</p> + +<pre class="brush: bash notranslate">express --help +</pre> +</div> + +<p>NPM będzie tworzył nową aplikację Express w podfolderze bieżącego katalogu wypisując na konsoli komunikaty obrazujące postęp instalacji. Po zakończeniu zobaczysz komunikat z poleceniem instalującym zależności Node i uruchamiające aplikację.</p> + +<div class="note"> +<p><strong>Uwaga</strong>: Nowa aplikacja posiada własny plik package.json w swoim głównym katalogu. Możesz go otworzyć i sprawdzić zainstalowane zależności, w tym Express i bibliotekę szablonów Jade:</p> + +<pre class="brush: js notranslate">{ + "name": "helloworld", + "version": "0.0.0", + "private": true, + "scripts": { + "start": "node ./bin/www" + }, + "dependencies": { + "cookie-parser": "~1.4.3", + "debug": "~2.6.9", + "express": "~4.16.0", + "http-errors": "~1.6.2", + "jade": "~1.11.0", + "morgan": "~1.9.0" + } +} +</pre> +</div> + +<p>Zainstaluj wszystkie zależności do swojej aplikacji przy pomocy NPM:</p> + +<pre class="brush: bash notranslate">cd helloworld +npm install +</pre> + +<p>Następnie uruchom aplikację (polecenia różnią się nieco dla systemów Widnows i Lunux/macOS):</p> + +<pre class="brush: bash notranslate"># Run the helloworld on Windows with Command Prompt +SET DEBUG=helloworld:* & npm start + +# Run the helloworld on Windows with PowerShell +SET DEBUG=helloworld:* | npm start + +# Run helloworld on Linux/macOS +DEBUG=helloworld:* npm start +</pre> + +<p>Polecenie DEBUG jest bardzo przydatne, gdyż uruchamia rejestrowanie zdarzeń, które możemy zobaczyć poniżej:</p> + +<pre class="brush: bash notranslate">>SET DEBUG=helloworld:* & npm start + +> helloworld@0.0.0 start D:\Github\expresstests\helloworld +> node ./bin/www + + helloworld:server Listening on port 3000 +0ms</pre> + +<p>Otwórz przeglądarkę i wpisz adres <a href="http://127.0.0.1:3000/">http://127.0.0.1:3000/</a>, a zobaczysz domyślną stronę powitalną aplikacji Express.</p> + +<p><img alt="Express - Generated App Default Screen" src="https://mdn.mozillademos.org/files/14331/express_default_screen.png" style="border-style: solid; border-width: 1px; display: block; height: 301px; margin: 0px auto; width: 675px;"></p> + +<p>Więcej o wygenerowanej aplikacji dowiemy się w artykule o generowaniu szkieletu aplikacji.</p> + +<ul> +</ul> + +<h2 id="Podsumowanie">Podsumowanie</h2> + +<p>Masz przygotowane środowisko do tworzenia i uruchamiania aplikacji webowych w środowisku Node. Poznałeś działanie menadżera NPM, dowiedziałeś się jak zaimportować pakiet Express do swojej aplikacji i jak utworzyć szkielet aplikacji przy pomocy generatora aplikacji Express a potem go uruchomić.</p> + +<p>W następnym artykule zaczniemy prawdziwe szkolenie, w trakcie którego stworzymy kompletną aplikację webową korzystając z Node.js i dostępnych w nim narzędzi.</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li><a href="https://nodejs.org/en/download/">Downloads</a> page (nodejs.org)</li> + <li><a href="https://nodejs.org/en/download/package-manager/">Installing Node.js via package manager</a> (nodejs.org)</li> + <li><a href="http://expressjs.com/en/starter/installing.html">Installing Express</a> (expressjs.com)</li> + <li><a href="https://expressjs.com/en/starter/generator.html">Express Application Generator</a> (expressjs.com)</li> + <li><a href="https://docs.microsoft.com/windows/nodejs/">Using Node.js with Windows subsystem for Linux</a> (docs.microsoft.com)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}</p> + +<h2 id="W_tym_module">W tym module</h2> + +<ul> + <li><a href="/pl/docs/Learn/Server-side/Express_Nodejs/Introduction">Wprowadzenie do Express/Node</a></li> + <li><a href="/pl/docs/Learn/Server-side/Express_Nodejs/development_environment">Przygotowanie środowiska programisty Node</a></li> + <li><a href="/pl/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Szkolenie z Express: aplikacja webowa Biblioteka </a></li> + <li><a href="/en-US/pl/Learn/Server-side/Express_Nodejs/skeleton_website">Szkolenie z Express - część 2: Tworzenie szkieletu aplikacji</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li> +</ul> diff --git a/files/pl/learn/server-side/express_nodejs/index.html b/files/pl/learn/server-side/express_nodejs/index.html new file mode 100644 index 0000000000..3cb01fe7ae --- /dev/null +++ b/files/pl/learn/server-side/express_nodejs/index.html @@ -0,0 +1,70 @@ +--- +title: Tworzenie aplikacji z użyciem framework'u Express (Node.js/JavaScript) +slug: Learn/Server-side/Express_Nodejs +tags: + - Express + - Express.js + - JavaScript + - Node + - Początkujący + - Wprowadzenie + - node.js +translation_of: Learn/Server-side/Express_Nodejs +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Express to popularny framework webowy stworzony w języku JavaScript działający w środowisku uruchomieniowym Node.js. W tym module znajdziesz kluczowe zalety framework'u, opis jak możesz przygotować środowisko deweloperskie, typowe metody tworzenia aplikacji webowych oraz proces ich instalacji i uruchamiania.</p> + +<h2 id="Wymagania_wstępne">Wymagania wstępne</h2> + +<p>Zanim zaczniesz ten moduł powinieneś wiedzieć czym jest programowanie po stronie serwera i czym są frameworki webowe. Najlepiej, gdybyś przeczytał nasze wprowadzadzenie <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a>. Znajomość JavaScript i podstawowych zasad programowania na pewno Ci pomogą zrozumieć ten materiał, ale nie są konieczne do zrozumienia ogólnej koncepcji tworzenia aplikacji webowych.</p> + +<div class="note"> +<p><strong>Uwaga:</strong> Wiele przydatnych materiałów do nauki JavaScript'u znajdziesz w rozdziale <em>the context of client-side development</em>: <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>, <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript Basics</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> (learning). Środowisko Node.js posługuje się językiem JavaScript, tym samym, który działa w Twojej przeglądarce, ale posiada dodatkowe API zapewniające pracę w środowisku poza przeglądarką (np. daje możliwość uruchamiania serwerów HTTP, ma dostęp do systemu plikowego, ale brak mu API do pracy z przeglądarką i strukturą DOM).</p> + +<p>W tym przewodniku znajdziesz informacje o tym jak pracować z Node.js i Express, ale wiele wartościowych materiałów jest w Internecie i książkach - część z nich jest podlinkowana w wątkach <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) i <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora).</p> +</div> + +<h2 id="Przewodnik">Przewodnik</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Wprowadzenie do Express/Node</a></dt> + <dd>Znajdziesz tutaj odpowiedzi na pytania "Czym jest Node?" i "Co to jest Express?", oraz zrozumiesz co czyni framework Express wyjątkowym. W dalszej części zostały przedstawione najistotniejsze możliwości wraz z głównymi elementami potrzebnymi do budowy aplikacji webowych w Express (choć jeszcze nie będziesz miał przygotowanego środowiska do tworzenia i testowania takich aplikacji).</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Przygotowanie środowiska programisty do pracy z Node (Express)</a></dt> + <dd>Gdy już wiesz jakie możliwości oferuje Express, pokażemy Ci jak przygotować środowisko deweloperskie Node/Express dla systemów Windows, Linux(Ubuntu) i Mac OS X. Bez względu na system, którego używasz, w tej części powinieneś poznać wszystko to co będzie Ci potrzebne do tworzenia aplikacji w Express.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Szkolenie z Express - część 1: aplikacja webowa "Biblioteka"</a></dt> + <dd>W pierwszym artykule naszego cyklu praktycznych tutoriali wyjaśnimy Ci czego się nauczysz podczas tworzenia przykładowej aplikacji internetowej "Biblioteka". W kolejnych artykułach będziemy nad nią pracować i ją rozwijać<span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Szkolenie z Express - część 2: Tworzymy szkielet witryny</a></dt> + <dd>Artykuł zawiera opis jak stworzyć "szkielet" projektu naszej witryny, który będziesz mógł wypełnić takimi elemenatami jak: ścieżki do podstron witryny, szablony/widoki i bazy danych.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Szkolenie z Express - część 3: Korzystamy z bazy danych (Mongoose)</a></dt> + <dd>W artykule zapoznasz się z krótkim omówieniem baz danych wykorzystywanych w technologii Node/Express. W dalszej części opisujemy jak wykorzystać <a href="http://mongoosejs.com/">Mongoose</a> do zapisu danych naszej "Biblioteki" w tym jak zadeklarować schematy i modele bazy, jakie są główne typy danych i metody ich walidacji. W końcowej cześci zobaczysz jakimi metodami możesz operować na danych za pośrednictwem modeli<span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Szkolenie z Express - część 4: Rutery i kontrolery</a></dt> + <dd>W tej części cyklu zdefiniujemy ścieżki URL (z kodem obsługi takiego adresu) do wszystkich podstron naszej aplikacji, a z każdym takim URL skojarzymy funkcję (wstępnie będą to atrapy funkcji), która zostanie wywołana, gdy nadejdzie do niego żądanie. Po zakończeniu będziemy dysponować modułową strukturą kodu routingu, co zapewni nam łatwą rozbudowę aplikacji, gdy w następnych artykułach będziemy kod uzupełniać o rzeczywiste funkcje. Po tej części powinieneś dobrze rozumieć metodę tworzenia modularnego routingu w Express.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Szkolenie z Express - część 5: Prezentacja danych biblioteki</a></dt> + <dd>Jesteśmy teraz gotowi dodać do naszej aplikacji strony, które będą wyświetlać książki i pozostałe dane naszej "Biblioteki". Wśród nich znajdzie się strona domowa z informacją ile rekordów danego modelu znajduje się w bazie oraz strony ze szczegółami każdego modelu. Zdobędziesz cenne doświadczenie w pobieraniu danych z bazy i tworzeniu szablonów strony.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Szkolenie z Express - część 6: Praca z formularzami</a></dt> + <dd>Artykuł przeprowadzi Cię przez proces tworzenia formularzy HTML, które będą współpracować z Express. Skorzystamy z preprocesoram PUG, aby stworzyć formularze do tworzenia, modyfikacji i usuwania dokumentów w bazie danych naszej aplikacji.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Szkolenie z Express - część 7: Wdrożenie do produkcji</a></dt> + <dd>Masz już gotową super aplikację webową "Biblioteka" i zamierzasz ją zainstalować na publicznym serwerze WWW i w ten sposób stanie się dostępna dla pracowników biblioteki i użytkowników przez Internet. W artykule przedstawiono jak znaleźć odpowiedni hosting dla aplikacji i co powinienś zrobić aby była gotowa do działania w środowisku produkcyjnym.</dd> +</dl> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Instalacji aplikacji "Biblioteka" w PWS/Cloud Foundry</a></dt> + <dd>Artykuł przedstawia praktyczną demonstrację instalacji aplikacji "Biblioteka" w serwisie <a href="http://run.pivotal.io">Pivotal Web Services PaaS cloud</a>, który jest w pełni funkcjonalnym, o otwarty kodzie, odpowiednikiem Heroku. PWS/Cloud Foundry jest warte sprawdzenia jeśli szukasz alternatywy dla Herooku lub po prostu chcesz spróbować czegoś innego.</dd> +</dl> + +<h2 id="Zapotrzebowanie_na_kolejne_samouczki">Zapotrzebowanie na kolejne samouczki</h2> + +<div> +<p>To koniec atrykułów szkoleniowych (jak na razie). Jeśli chcesz poszerzać bazę materiałow, to poniżej znaduje się spis tematów, które warto opracować:</p> + +<ul> + <li>Korzystanie z sesji.</li> + <li>Autentykacja użytkowników.</li> + <li>Autoryzacja i prawa dostępu użytkowników.</li> + <li>Testowanie applikacji webowych tworzonych w Express.</li> + <li>Bezpieczeństwo sieciowe w aplikacjach tworzonych w Express.</li> +</ul> +</div> diff --git a/files/pl/learn/server-side/express_nodejs/introduction/index.html b/files/pl/learn/server-side/express_nodejs/introduction/index.html new file mode 100644 index 0000000000..4c4049f67f --- /dev/null +++ b/files/pl/learn/server-side/express_nodejs/introduction/index.html @@ -0,0 +1,538 @@ +--- +title: Wprowadzenie do Express/Node +slug: Learn/Server-side/Express_Nodejs/Introduction +tags: + - Początkujacy Express Node +translation_of: Learn/Server-side/Express_Nodejs/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div> + +<dl> + <dd>Znajdziesz tutaj odpowiedzi na pytania "Czym jest Node?" i "Co to jest Express?", oraz zrozumiesz co czyni framework Express wyjątkowym. W dalszej części zostały przedstawione najistotniejsze możliwości wraz z głównymi elementami potrzebnymi do budowy aplikacji webowych w Express (choć jeszcze nie będziesz miał przygotowanego środowiska do tworzenia i testowania takich aplikacji).</dd> +</dl> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Wymagania:</th> + <td>Podstawowe umiejętności w posługiwaniu się komputerem. Rozumienie ogólnych zasad <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">programowania po stronie serwera</a>, w szczególności mechanizmów <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">interakcji między klientem a serwerem aplikacji webowych</a>.</td> + </tr> + <tr> + <th scope="row">Cel:</th> + <td>Zapoznanie się z frameworkiem Express, jego współpracą ze środowiskiem Node, jego funkcjonalnością i głównymi elementami aplikacji tworzonymi w tym frameworku.</td> + </tr> + </tbody> +</table> + +<h2 id="Wprowadzenie_do_Node">Wprowadzenie do Node</h2> + +<p><a href="https://nodejs.org/">Node</a> (lub bardziej formalnie <em>Node.js</em>) jest wieloplatformowym oprogramowaniem o otwartym kodzie, które pozwala deweloperom na tworzenie wszelkiego rodzaju oprogramowania w języku JavaScript pracującym po stronie serwera. Jest to środowisko uruchomieniowe, które działa poza przeglądarką, współpracujące bezpośrednio z systemem operacyjnym. W ten sposób środowisko Node udostępnia swoim aplikacjom API systemu operacyjnego, w tym dostęp do systemu plików, bibliotek systemowych czy uruchomionych procesów, w tym serwerów HTTP.</p> + +<p>Z perspektywy tworzenia oprogramowania po stronie serwera, Node ma szereg zalet:</p> + +<ul> + <li>Wysoka wydajność! Node zostało zaprojektowane, aby optymalizować wydajność i skalowalność aplikacji webowych i jest dobrym rozwiązaniem wielu często występujących problemów podczas tworzenia aplikacji tego typu.</li> + <li>Kod aplikacji to "stary dobry JavaScript", co oznacza, że spędzamy mniej czasu na "przełączanie kontekstu" podczas pracy z różnymi językami po stronie klienta i serwera.</li> + <li>JavaScript jest relatywnie nowym językiem programowania i oferuje sporo ulepszeń w porównaniu do innych, tradycyjnie używanych po stronie serwera języków (np. PHP, Python itd.). Także wiele nowszych i popularnych języków jest kompilowanych/tłumaczonych do JavaScript, więc możesz korzystać także z TypeScript, CoffeScript, ClojureScript, Scala.js, LiveScript i innych.</li> + <li>Menadżer pakietów środowiska Node (NPM - Node Package Manager) daje Ci dostęp do setek tysięcy pakietów, z których możesz korzystać. Posiada on najlepszy w swojej klasie mechanizm rozwiązywania zależności i może być wykorzystany do automatyzacji pracy narzędzi budujących aplikację.</li> + <li>Node.js jest przenośne. Jest dostępne dla Microsoft Widnows, macOs, Linux, Solaris, FreeBSD, OpenBSD, WebOS, and NonStop OS. Jest także wspierane przez dostawców usług sieciowych, którzy zapewniają odpowiednią infrastrukturę i dokumentację do hostowania aplikacji Node.</li> + <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">Ma też bardzo aktywny ekosystem firm trzecich i społeczność programistów, którzy gotowi są służyć pomocą.</span></li> +</ul> + +<p>Możesz teraz wykorzystać Node.js do stworzenia prostego serwera stron WWW posługując się pakietem HTTP.</p> + +<h3 id="Hello_Node.js">Hello Node.js</h3> + +<p>W poniższym przykładzie utworzymy serwer WWW, który będzie oczekiwał dowolnego rodzaju żądań HTTP skierowanych pod URL <code>http://127.0.0.1:8000/</code> - gdy żądanie zostanie odebrane, skrypt wyśle odpowiedź z łańcuchem "Hello World". Jeśli masz już zainstalowane Node, możesz wykonać poniższe kroki, aby wykonać przykład:</p> + +<ol> + <li>Otwórz terminal (w Windows otwórz wiersz poleceń - cmd.exe).</li> + <li>Utwórz katalog w miejscu, którym chcesz zapisać program, na przykład <code>test-node</code>, a następnie wejdź do nie niego wykonując polecenie w terminalu:</li> +</ol> + +<pre>cd test-node</pre> + +<ol start="3"> + <li>Korzystając z ulubionego edytora tekstu, utwórz plik o nazwie <code>hello.js</code> i wklej do niego poniższy kod:</li> +</ol> + +<pre class="brush: js">// Load HTTP module +const http = require("http"); + +const hostname = "127.0.0.1"; +const port = 8000; + +// Create HTTP server +const server = http.createServer((req, res) => { + + // Set the response HTTP header with HTTP status and Content type + res.writeHead(200, {'Content-Type': 'text/plain'}); + + // Send the response body "Hello World" + res.end('Hello World\n'); +}); + +// Prints a log once the server starts listening +server.listen(port, hostname, () => { + console.log(`Server running at http://${hostname}:${port}/`); +}) +</pre> + +<ol start="4"> + <li>Zapisz plik do katalogu, który utworzyłeś powyżej w punkcie 2.</li> + <li>Wróć do terminalu i wpisz następujące polecenie:</li> +</ol> + +<pre class="brush: bash">node hello.js</pre> + +<p>W ostatnim kroku otwórz przeglądarkę WWW i wpisz adres <code>http://localhost:8000</code> ; powinieneś zobaczyć napis "<strong>Hello World</strong>" w lewy górnym rogu pustej strony.</p> + +<h2 id="Frameworki_do_budowy_aplikacji_webowych">Frameworki do budowy aplikacji webowych</h2> + +<p>Inne typowe zadania związane z tworzeniem aplikacji internetowych nie są bezpośrednio wspierane przez samo Node.js. Jeśli chcesz obsługiwać osobno każdą z metod HTTP (np. GET, POST, DELETE itp.), lub obsługiwać żądania w różnych ścieżkach URL („routes”), lub wysyłać statyczne dokumenty (jako pliki HTML) lub korzystać z szablonów do dynamicznego tworzenia odpowiedzi, to będziesz musiał napisać kod samemu. Albo zamiast wymyślać na nowo koło możesz użyć frameworka webowego do tworzenia aplikacji!</p> + +<h2 id="Wprowadzenie_do_Express">Wprowadzenie do Express</h2> + +<p><a href="https://expressjs.com/">Express</a> to jeden z najpopularniejszych frameworków webowych, który jest także wykorzystywany jako biblioteka w wielu innych popularnych <a href="https://expressjs.com/en/resources/frameworks.html">frameworkach Node</a>. Dostarcza następujących mechanizmów:</p> + +<ul> + <li>Tworzenie funkcji obsługujących żądania o różnych metodach HTTP i skierowanych do różnych ścieżek w URL (tzw. routing).</li> + <li>Integrację z różnymi silnikami do generowania widoków, które są tworzone na podstawie osadzanych danych w szablonach stron.</li> + <li>Konfigurowania typowych ustawień aplikacji webowych jak np. portu, lokalizacji szablonów do generowania widoków odpowiedzi.</li> + <li>Dodatkowe przetwarzanie żądań w warstwie pośredniej (tzw. "middleware"), które może być umieszczone w dowolnym miejscu łańcucha obsługi żądania.</li> +</ul> + +<p>Ponieważ <em>Express </em>jest dość minimalistyczny, dlatego deweloperzy stworzyli wiele kompatybilnych z nim pakietów pracujących w warstwie pośredniej, które rozwiązują prawie każdy problem pojawiający się w aplikacjach webowych. Są dostępne biblioteki do zarządzania ciasteczkami, do pracy w trybie sesji, do logowania użytkowników, do parsowania: parametrów w URL, danych przesyłanych w żądaniach POST, nagłówków zabezpieczeń i wiele innych. Pełną listę bibliotek rozwijanych przez zespół programistów Express znajdziesz na stronie <a href="http://expressjs.com/en/resources/middleware.html">Express Middleware</a> (która zawiera także popularne pakiety firm trzecich).</p> + +<div class="note"> +<p><strong>Uwaga:</strong> Ta elastyczność Express ma dwa różne oblicza. Jest wiele pakietów warstwy pośredniej, które rozwiązują prawie każdy problem lub wymaganie, ale ich opracowanie jest czasem nie lada wyzwaniem. Nie ma także "jedynie słusznej" struktury aplikacji, wiele dostępnych w Internecie przykładów nie jest optymalnych, lub prezentują tylko niewielki wycinek tego, co musisz zrobić, aby zbudować aplikację webową.</p> +</div> + +<h2 id="Skąd_się_wziął_Node_i_Express">Skąd się wziął Node i Express?</h2> + +<p>Pierwsza edycja Node została wydana, tylko dla systemu Linux, w 2009 roku. Menadżer pakietów NPM pojawił się w 2010, a natywne wsparcie dla systemu Windows dodano w 2012 roku. Bieżąca edycja LTS Node ma wersję v12.13.1, gdy najnowsza wersja Node ma numer 13.2.0. Jest to tylko krótki wycinek z bogatej historii; jeśli chcesz się więcej dowiedzieć zajrzyj do <a href="https://en.wikipedia.org/wiki/Node.js#History">Wikipedi</a>i.</p> + +<p>Express został pierwotnie wydany w listopadzie 2010 i obecnie jest dostępny w wersji 4.17.1. Możesz sprawdzić <a href="https://expressjs.com/en/changelog/4x.html">dziennik zmian</a>, aby uzyskać informacje o zmianach w bieżącej wersji, a <a href="https://github.com/expressjs/express/blob/master/History.md">GitHub</a>, aby uzyskać bardziej szczegółowe informacje o historii wersji.</p> + +<h2 id="Jak_popularne_są_Node_i_Express">Jak popularne są Node i Express?</h2> + +<p>Popularność danego frameworku jest bardzo ważna, gdyż jest wskaźnikiem, czy będzie rozwijany i nadal będzie dostępna dokumentacja, dodatkowe biblioteki i wsparcie techniczne.</p> + +<p>Oczywiście nie ma miarodajnego wskaźnika popularności frameworków po stronie serwera (choć są strony takie jak <a href="http://hotframeworks.com/">Hot Frameworks</a>, które próbują oszacować popularność danego framworku na podstawie liczby projektów na GitHub i liczby pytań w serwisie StackOverflow). Lepszym pytaniem jest to, czy Node i Express są wystarczająco popularne, aby nie spotkał ich los niszowych lub zapomnianych platform. Czy mogą liczyć na dalszy rozwój. Czy możesz liczyć na pomoc, gdy będziesz jej potrzebował? Czy istniej możliwość dostania pracy jeśli nauczysz się platformy Express.</p> + +<p>Opierając się na liczbie znanych firm korzystających z Express, liczbie osób wnoszących wkład w kod źródłowy oraz liczbie osób zapewniających zarówno bezpłatne, jak i płatne wsparcie, można potwierdzić, że Express jest popularnym frameworkiem!</p> + +<h2 id="Czy_Express_jest_restrykcyjny">Czy Express jest restrykcyjny?</h2> + +<p>Frameworki webowe często określają siebie jako restrykcyjne lub elastyczne.</p> + +<p>Frameworki restrykcyjne to takie, które prezentują jeden „właściwy sposób” na wykonanie określonego zadania. Najczęściej wspierają szybki rozwój w określonej dziedzinie (rozwiązywanie problemów określonego typu), ponieważ ten właściwy sposób realizacji zadania jest zwykle dobrze rozpoznany i udokumentowany. Są jednak znaczniej mniej elastyczne w rozwiązywaniu problemów poza obszarem swojej głównej domeny i nie oferują dużych możliwości w kwestii wyboru komponentów czy rozwiązań, których można użyć.</p> + +<p>Przeciwieństwem są frameworki elastyczne, które mają znacznie mniejsze ograniczenia dotyczące wyboru połączenia komponentów w celu realizacji aplikacji, a nawet tego, które komponenty należy zastosować. Ułatwiają programistom na korzystanie z najodpowiedniejszych dla nich narzędzi do wykonania określonego zadania, aczkolwiek kosztem jest konieczność samodzielnego szukania takich komponentów.</p> + +<p>Express jest elastyczny. Możesz korzystać z dowolnego kompatybilnego oprogramowania w warstwie pośredniej, włączając je w dowolnym miejscu całego łańcucha obsługi żądań. Możesz tworzyć aplikację z kodem w jednym pliku lub podzielić kod na wiele plików, korzystając z dowolnej struktury katalogów. Czasami możesz odnieść wrażenie, że masz zbyt wiele możliwości!</p> + +<h2 id="Jak_wygląda_kod_Express">Jak wygląda kod Express?</h2> + +<p>Tradycyjna aplikacja webowa przetwarzająca dane czeka na żądania HTTP nadchodzące z przeglądarki (lub innego programu klienta). W chwili, gdy żądanie nadejdzie, aplikacja określa akcję, która musi być podjęta. O tym jaką akcję należy wybrać decydują wzorzec zawarty w URL i ewentualne informacje zawarte w żądaniu POST lub GET. W zależności od żądania aplikacja może odczytać lub zapisać informacje w bazie danych, może też wykonywać inne zadania. Gdy aplikacja zakończy akcję wysyła odpowiedź do przeglądarki klienta. Najczęściej tą odpowiedzią jest dynamicznie tworzony dokument HTML zawierający dane dla przeglądarki klienta. Dokument taki tworzony jest na podstawie szablonu HTML, w którym wyróżnione są miejsca na dane.</p> + +<p>W kolejnych sekcjach wyjaśnimy typowe elementy kodu, z którymi się spotkasz podczas pracy z Express i Node.</p> + +<h3 id="Hello_World_Express">Hello World Express</h3> + +<p>Na początek zajmiemy się nieśmiertelnym przykładem <a href="https://expressjs.com/en/starter/hello-world.html">Hello World</a> (przedyskutujemy każdy fragment kou w tej i następnych sekcjach).</p> + +<div class="note"> +<p><strong>Wskazówka: </strong>Jeśli już masz zainstalowany Node i Express (lub zainstalujesz oba według wskazówek zawartych w <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">następnym artykule</a>), zapisz poniższy kod w pliku <strong>app.js</strong> a następnie uruchom go wpisując w wierszu poleceń:</p> + +<p><strong><code>node ./app.js</code></strong></p> +</div> + +<pre class="brush: js">var express = require('express'); +var app = express(); + +<strong>app.get('/', function(req, res) { + res.send('Hello World!'); +});</strong> + +app.listen(3000, function() { + console.log('Example app listening on port 3000!'); +}); +</pre> + +<p>W pierwszych dwóch wierszach importujemy przez <code>require()</code> moduł o nazwie express a następnie tworzymy <a href="https://expressjs.com/en/4x/api.html#app">Aplikację Express</a>. Zwyczajowo obiekt aplikacji został nazwany <code>app</code> i zawiera metody do ustalania trasy (routing) żądań, konfiguracji warstwy pośredniej, renderowania widoków w HTML, rejestracji silnika szablonów i konfiguracji <a href="https://expressjs.com/en/4x/api.html#app.settings.table">ustawień aplikacji</a>, które kontrolują jej zachowanie (np. tryb środowiska, czy definicje routingu są wrażliwe na wielkość znaków itd.)</p> + +<p>W środkowej części kodu (trzy kolejne wiersze zaczynające się od <code>app.get</code>) znajduje się definicja trasy. Metoda określa funkcję zwrotną, która zostanie wywołana, gdy pojawi się żądanie GET HTTP skierowane do ścieżki (<code>'/'</code>) względem katalogu głównego strony. Argumentami funkcji zwrotnej są obiekty żądania (request) i odpowiedzi (response). W ciele funkcji została wywołana metoda <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> odpowiedzi, która wysyła napis "Hello World!" do klienta.</p> + +<p>Ostatni blok odpowiada za uruchomienie serwera, który nasłuchuje na porcie 3000 i drukuje komunikaty logów na konsoli. Gdy serwer już działa możesz otworzyć przeglądarkę i po wpisaniu adresu <code>localhost:3000</code> powinieneś zobaczyć odpowiedź serwera.</p> + +<h3 id="Import_i_tworzenie_modułów">Import i tworzenie modułów</h3> + +<p>Modułem jest biblioteka lub plik JavaScript, który można zaimportować do innego pliku źródłowego przy użyciu funkcji <code>require()</code>. <em>Express </em>jest też modułem, podobnie jak biblioteki funkcji warstwy pośredniej czy baz danych.</p> + +<p>W kodzie poniżej widać, jak importujemy moduł przez nazwę, podobnie jak zaimportowaliśmy framework <em>Exress</em> w przykładzie. Najpierw wywołujemy funkcję <code style="font-style: normal; font-weight: normal;">require() </code>z podaną nazwą modułu (<code>'express'</code>), a potem wykorzystujemy zwrócony przez import obiekt, żeby utworzyć <a href="https://expressjs.com/en/4x/api.html#app">aplikację Express</a>. Mając obiekt aplikacji możemy korzystać z jego właściwości i metod.</p> + +<pre class="brush: js">var express = require('express'); +var app = express(); +</pre> + +<p>Oczywiście możesz też tworzyć własne moduły, które moga być importowane w ten sam sposób.</p> + +<div class="note"> +<p><strong>Wskazówka:</strong> Dobrze, żebyś tworzył własne moduły, wtedy Twoja aplikacja będzia złożona z osobnych, łatwo zarządzanych części. Trzymanie całego kodu aplikacji w jednym pliku tworzy trudny do utrzymania i zrozumienia monolit. Korzystanie z modułów pomoże Ci w kontrolowaniu przestrzeni nazw, czyli na zewnątrz modułu będą dostępne tylko te zmienne, które jawnie z niego eksportujesz.</p> +</div> + +<p>Obiekty, które mają być dostępne na zewnątrz modułu, muszą być przez Ciebie wskazane za pomocą dodanej właściwości obiektu <code>exports</code>. Przykładowy poniżej moduł, zapisany w pliku <strong>square.js</strong>, exportuje dwie metody: <code>area()</code> i <code>perimeter()</code>. </p> + +<pre class="brush: js">exports.area = function(width) { return width * width; }; +exports.perimeter = function(width) { return 4 * width; }; +</pre> + +<p>Możemy zaimportować moduł funkcją <code>require()</code> i wywołać wyeksportowane metody:</p> + +<pre class="brush: js">var square = require('./square'); // Here we require() the name of the file without the (optional) .js file extension +console.log('The area of a square with a width of 4 is ' + square.area(4));</pre> + +<div class="note"> +<p><strong>Wskazówka:</strong> Możesz też wskazać moduł podając ścieżkę absolutną do jego pliku (lub nazwy, tak jak to już robiliśmy).</p> +</div> + +<p>Jeśli chcesz wyeksportować cały obiekt jednym przypisaniem (zamiast eksportować osobno każdą jego metodę lub pole) to przypisz ten obiekt do <code>module.exports</code> (możesz również tak zrobić, aby obiekt główny eksportu był konstruktorem lub inną funkcją):</p> + +<pre class="brush: js">module.exports = { + area: function(width) { + return width * width; + }, + + perimeter: function(width) { + return 4 * width; + } +}; +</pre> + +<div class="note"> +<p><strong>Wskazówka:</strong> Możesz traktować <code>exports</code> jak <a href="https://nodejs.org/api/modules.html#modules_exports_shortcut">skrót</a> do <code>module.exports</code> w obrębie danego modułu. Faktycznie, <code>exports</code> jest właśnie zmienną zainicjalizowana wartością <code>module.exports</code> zanim modułe zostanie ewaluowany. Ta wartość jest referencją do obiektu (w tym przypadku pustego). Oznacza to, że <code>exports</code> przechowuje referencję do tego samego obiektu, którego odwołuje się <code>module.exports</code>. To oznacza także, że przypisując do obiektu <code>exports</code> inną wartość przestaje on mieć związek z <code>module.exports</code>.</p> +</div> + +<p>Więcej informacji o modułach znajdziesz w dokumentacji API Node: <a href="https://nodejs.org/api/modules.html#modules_modules">Modules</a>.</p> + +<h3 id="Asynchroniczne_API">Asynchroniczne API</h3> + +<p>Kod JavaScript częściej wykorzystuje asynchroniczne wykonywanie operacji, których czas może być znaczny. Synchroniczne wykonywanie kodu zakłada, że następna operacja nie może się zacząć, dopóki poprzednia się nie zakończy. Przykładem może być wywołanie synchroniczne dwóch funkcji wysyłających komunikaty do konsoli, które powinny się wyświetlić w kolejności: "First, Second":</p> + +<pre class="brush: js">console.log('First'); +console.log('Second'); +</pre> + +<p>Przeciwieństwem jest kod wykonywany asynchronicznie, w którym kolejna operacja jest uruchamiana, i zanim się zakończy, wywołana jest następna. Gdy operacja się zakończy, mechanizm API wywołuje dodatkowe działanie. Poniższy przykład wyświetli na konsoli komunikaty "Second, First", ponieważ najpierw wywoływana jest funkcja <code>setTimeout()</code>, która po uruchomieniu odliczania czasu, natychmiast wraca i jest wywoływana następna funkcja.</p> + +<pre class="brush: js">setTimeout(function() { + console.log('First'); + }, 3000); +console.log('Second'); +</pre> + +<p>Korzystanie z nieblokującego asynchronicznego API jest znacznie ważniejsze w Node niż w przeglądarce, ponieważ Node jest jednowątkowym, sterowanym zdarzeniowo, środowiskiem uruchomieniowym. "Jednowątkowe" oznacza, że wszystkie żądania skierowane do serwera są wykonywane w tym samym wątku (czyli nie są uruchamiane w oddzielnych procesach, które mogłyby się wykonywać równocześnie). Taki model jest bardzo wydajny pod względem szybkość wykonywania i wykorzystania zasobów serwera, ale powoduje on, że jeśli zostanie wywołana synchronicznie funkcja, której wykonanie trwa długo, to zablokuje ona nie tylko bieżące żądanie, ale także wszystkie pozostałe obsługiwane w tym czasie przez aplikację.</p> + +<p>Jest kilka metod do sygnalizowania, że asynchroniczna operacja się zakończyła. Najczęściej wykorzystywana jest rejestracja funkcji zwrotnej podczas wywoływania asynchronicznego. Funkcja zwrotna zostanie wywołana, gdy asynchroniczna operacja się zakończy. Z takiego podejścia skorzystano w przykładzie powyżej.</p> + +<div class="note"> +<p><strong>Uwaga:</strong> Korzystanie z funkcji zwrotnych może prowadzić do bałaganu. Jeśli zaczniesz tworzyć sekwencję kolejnych wywołań operacji asynchronicznych, aby wykonały się we właściwym porządku, to w rezultacie powstaje wiele poziomów zagnieżdżonych wywołań. Jest to znany problem o nazwie "callback hell" (piekło funkcji callback). Skutki problemu można złagodzić stosując dobre praktyki (zobacz <a href="http://callbackhell.com/">http://callbackhell.com/</a>), wykorzystując odpowiednie biblioteki jak np. <a href="https://www.npmjs.com/package/async">async</a>, lub możliwości standardu ES6 jak np. <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a>.</p> +</div> + +<div class="note"> +<p><strong>Uwaga:</strong> Funkcje zwrotne w Node i Express stosują wspólną konwencję, według której pierwszym argumentem funkcji zwrotnej jest wartość błędu. Drugim argumentem jest obiekt zawierający wszystkie dane zwrócone po prawidłowym zakończeniu funkcji wywołującej. Blog <a href="http://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js" style="font-size: 1rem; letter-spacing: -0.00278rem;">The Node.js Way - Understanding Error-First Callbacks</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> (fredkschott.com) zawiera dobre wyjaśnienie, dlaczego ta konwencja jest tak użyteczna</span><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></p> +</div> + +<h3 id="Tworzenie_procedur_obsługi_tras">Tworzenie procedur obsługi tras</h3> + +<p>W naszej przykładowej aplikacji Hello World zdefiniowaliśmy funkcję obsługującą żądania GET protokołu HTTP skierowane do katalogu głównego strony <code>'/'</code>).</p> + +<pre class="brush: js">app.<strong>get</strong>('/', function(req, res) { + res.send('Hello World!'); +}); +</pre> + +<p>Funkcja zwrotna podczas wywołania otrzymuje obiekty żądania i odpowiedzi jako argumenty. W naszym przypadku funkcja po prostu wywołuje <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> na obiekcie odpowiedzi ,żeby wysłać napis "Hello World!". Nie jest to jedyna metoda formułowania odpowiedzi na żądanie. Istnieje wiele metod kończących cykl procesu przetwarzania żądania w odpowiedzi np. możesz wywołać metodę <code><a href="https://expressjs.com/en/4x/api.html#res.json">json()</a></code>, żeby wysłać odpowiedź w formacie JSON lub <code><a href="https://expressjs.com/en/4x/api.html#res.sendFile">sendFile()</a></code>, aby wysyłać plik.</p> + +<div class="note"> +<p><strong>JavaScript tip:</strong> W funkcji zwrotnej obiekty żądania i odpowiedzi mogą mieć dowolne nazwy, ważne abyś zapamiętał, że podczas wywołania tej funkcji zawsze pierwszym argumentem jest obiekt żądania, a drugim obiekt odpowiedzi. Jednak jest głęboki sens w tym, aby oba argumenty nazwać zgodnie z ich przeznaczeniem.</p> +</div> + +<p>Obiekt aplikacji Express posiada odpowiednie metody do definiowania funkcji obsługujących pozostałe rodzaje żądań HTTP :</p> + +<p><code>checkout()</code>, <code>copy()</code>, <strong><code>delete()</code></strong>, <strong><code>get()</code></strong>, <code>head()</code>, <code>lock()</code>, <code>merge()</code>, <code>mkactivity()</code>, <code>mkcol()</code>, <code>move()</code>, <code>m-search()</code>, <code>notify()</code>, <code>options()</code>, <code>patch()</code>, <strong><code>post()</code></strong>, <code>purge()</code>, <strong><code>put()</code></strong>, <code>report()</code>, <code>search()</code>, <code>subscribe()</code>, <code>trace()</code>, <code>unlock()</code>, <code>unsubscribe()</code>.</p> + +<p>Jest też jedna specjalna metoda <code>app.all()</code>, która jest wywoływana dla każdego żądania HTTP. Wykorzystuje się ją do instalowania funkcji warstwy pośredniej obsługujących wybraną trasę dla dowolnych żądań. Poniższy przykład (pochodzący z dokumentacji Express) ilustruje przypadek funkcji obsługującej wszystkie żądania (o dowolnej metodzie HTTP) skierowane do ścieżki <code>/secret</code> (funkcja pochodzi z modułu <a href="https://nodejs.org/api/http.html#http_http_methods">http</a>).</p> + +<pre class="brush: js">app.all('/secret', function(req, res, next) { + console.log('Accessing the secret section ...'); + next(); // pass control to the next handler +});</pre> + +<p>Metody definiujące trasy są wywoływane na podstawie dopasowania do określonych wzorców w URL jak i wydobywają pewne części z URL i przekazują je jako parametry do funkcji obsługi żądania (jako atrybuty żądania).</p> + +<p>Często przydatne jest grupowanie procedur obsługi tras dla określonej części witryny i uzyskiwanie do nich dostępu za pomocą wspólnego przedrostka ścieżki (np. strona z Wiki może mieć wszystkie trasy związane z wiki w jednym pliku i mieć do nich dostęp w postaci ścieżki z prefiksem /wiki/). Za realizacje grupowania odpowiedzialny jest obiekt <code><a href="http://expressjs.com/en/guide/routing.html#express-router">express.Router</a></code>. Wracając do przykładu Wiki: wszystkie trasy możemy umieścić w module <strong>wiki.js</strong> i wyeksportować je do obiektu <code>Router</code> , jak w przykładzie poniżej:</p> + +<pre class="brush: js">// wiki.js - Wiki route module + +var express = require('express'); +var router = express.Router(); + +// Home page route +router.get('/', function(req, res) { + res.send('Wiki home page'); +}); + +// About page route +router.get('/about', function(req, res) { + res.send('About this wiki'); +}); + +module.exports = router; +</pre> + +<div class="note"> +<p><strong>Uwaga:</strong> Dodawanie tras do obiektu <code>Router</code> jest jak dodawanie tras do obiektu <code>app</code> (jak pokazaliśmy to już wcześniej).</p> +</div> + +<p>Dołączamy utworzony router (nasz plik <strong>wiki.js</strong>) do głównego pliku aplikacji przez <code>require()</code> i włączamy go do warstwy pośredniej aplikacji wywołując metodę <code>use()</code>. To spowoduje, że nasza aplikacja będzie teraz obsługiwać dwie ściezki: <code style="font-style: normal; font-weight: normal;">/wiki/</code> i <code style="font-style: normal; font-weight: normal;">/wiki/about/</code>.</p> + +<pre class="brush: js">var wiki = require('./wiki.js'); +// ... +app.use('/wiki', wiki);</pre> + +<p>W dalszych częściach cyklu pokażemy więcej możliwości konfigurowania ścieżek, w szczególności korzystanie z obiektu <code>Router</code> w rozdziale <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Routery i kontrolery.</a></p> + +<h3 id="Warstwa_pośrednia">Warstwa pośrednia</h3> + +<p>Warstwa pośrednia (middleware) jest bardzo istotną częścią aplikacji Express. Wykonuje ona wiele operacji począwszy od obsługi plików statycznych po kompresje odpowiedzi HTTP. Jeśli funkcje obsługi żądań są ostatnim etapem, w którym wysyłamy odpowiedź do klienta, to funkcje middleware po wykonaniu operacji na żądaniu lub odpowiedzi wywołują następną funkcje w łańcuchu, którą może być kolejna funkcja warstwy pośredniej lub końcowa funkcja obsługi żądania. O kolejnością wywołań funkcji middleware decyduje programista.</p> + +<div class="note"> +<p><strong>Uwaga:</strong> Warstwa pośrednia może wykonywać dowolne operacje, wykonywać dowolny kod, dokonywać zmian w żądaniu lub odpowiedzi a także może zakończyć cały cykl przetwarzania żądania w odpowiedź. Jeśli funkcja middleware nie kończy przetwarzania to musi wywołać metodę <code>next()</code>, która przekazuje sterowanie do następnej funkcji warstwy (w przeciwnym przypadku żądanie zostanie zawieszone). </p> +</div> + +<p>Większość aplikacji korzysta z funkcji warstwy pośredniej firm trzecich, bo upraszcza to proces projektowania aplikacji webowych, w których korzystamy z ciasteczek, sesji, autentykacji użytkowników, danych w formacie JSON, logowania itd. Lista dostępnych pakietów znajduje się na stronie <a href="http://expressjs.com/en/resources/middleware.html">Express middleware</a> (łącznie z pakietami firm trzecich). Więcej pakietów jest dostępnych poprzez menadżer pakietów NPM.</p> + +<p>Pakiet middleware'u, który chcesz wykorzystać w swojej aplikacji, musisz najpierw zainstalować przy pomocy NPM. Załóżmy, że chcesz dodać logger żądań do warstwy pośredniej znajdujący się w pakiecie <a href="http://expressjs.com/en/resources/middleware/morgan.html">morgan</a> HTTP:</p> + +<pre class="brush: bash"><code>$ npm install morgan +</code></pre> + +<p>Teraz powinieneś go dodać do stosu warstwy pośredniej wywołując metodę <code>use()</code>:</p> + +<pre class="brush: js">var express = require('express'); +<strong>var logger = require('morgan');</strong> +var app = express(); +<strong>app.use(logger('dev'));</strong> +...</pre> + +<div class="note"> +<p><strong>Uwaga:</strong> Funkcje middleware'u i obsługi żadań wywoływane są w kolejności ich deklaracji. Dla wybranych pakietów ich miejsce w łańcuchu wywołań jest bardzo ważne (np. jeśli warstwa sesji zależy od warstwy obsługi ciasteczek, wtedy funkcja obsługi ciasteczek powinna być dodana jako pierwsza). W praktyce prawie zawsze funkcje warstwy pośredniej są dodawane przed definicją funkcji obsługi tras, gdyż w przeciwnym razie obsługa żądań nie będzie miała dostępu do funkcji warstwy pośredniej.</p> +</div> + +<p>Oczywiście możesz tworzyć własne funkcje warstwy pośredniej, i prawdopodobnie będziesz zmuszony do ich definiowania (jak choćby funkcje obsługi błędów). Jedyną różnicą między funkcjami middleware'u, a funkcjami obsługi żądań jest dodatkowy, trzeci argument funkcji warstwy pośredniej. Argument ten, zazwyczaj o nazwie <code>next</code>, jest funkcją, której wywołanie uruchamia następną funkcje warstwy pośredniej. Każda funkcja middleware'u musi wywołać ten argument, gdyż tego oczekuje kontrakt przetwarzania żądania i odpowiedzi w warstwie pośredniej i to je odróżnia od funkcji, które tego nie robią lub nie posiadają takiego argumentu, na których kończy się cykl życia żądania.</p> + +<p>Wywołując metodę <code>app.use()</code> masz dwie możliwości włączania funkcji middleware'u do łańcucha przetwarzania żądania, określając czy funkcja ta obsługuje wszystkie żądania czy tylko o określonej metodzie protokołu HTTP (GET, POST itd.). Możesz też określić dla jakiś ścieżek funkcja ma działać, choć podanie ścieżki przy wowołaniu <code>app.use()</code> jest opcjonalne.</p> + +<p>W przykładzie poniżej możesz zobaczyć jak należy dodawać funkcje middleware'u bez i ze ścieżką.</p> + +<pre class="brush: js">var express = require('express'); +var app = express(); + +// An example middleware function +var a_middleware_function = function(req, res, <em>next</em>) { + // ... perform some operations + next(); // Call next() so Express will call the next middleware function in the chain. +} + +// Function added with use() for all routes and verbs +app.use(a_middleware_function); + +// Function added with use() for a specific route +app.use('/someroute', a_middleware_function); + +// A middleware function added for a specific HTTP verb and route +app.get('/', a_middleware_function); + +app.listen(3000);</pre> + +<div class="note"> +<p><strong>Wskazówka JavaScript:</strong> W przykładzie powyżej najpierw zadeklarowaliśmy funkcję middleware'u a następnie dodaliśmy ją jako funkcję zwrotną. W poprzednich przykładach funkcję zwrotną definiowaliśmy w miejscu definiowania funkcji obsługi żądania. W JavaScript oba podejścia są poprawne. </p> +</div> + +<p>Dokumentacja Express zawiera o wiele więcej informacji na temat wykorzystania i definiowania warstwy pośredniej w aplikacjach webowych.</p> + +<h3 id="Obsługa_plików_statycznych">Obsługa plików statycznych</h3> + +<p>Aby Twoja aplikacja mogła obsługiwać pliki umieszczone na serwerze, jak pliki graficzne, CSS czy JavaScript, musi posiadać w warstwie pośredniej odpowiednią funkcję. Na szczęście jest ona częścią Express (jest to jedyna dostarczana z pakietem Express funkcja middlewaru). Jeśli na przykład, chcesz aby aplikacja umożliwiała klientom pobieranie plików z katalogu '<strong>public</strong>' (pliki CSS, JavaScript, grafika), który znajduje się w katalogu aplikacji, umieść poniższy kod:</p> + +<pre class="brush: js">app.use(express.static('public')); +</pre> + +<p>Każdy plik z katalogu `public` jest teraz dostępny pod adresem URL z dołączoną na końcu nazwą tego pliku. Na przykład:</p> + +<pre><code>http://localhost:3000/images/dog.jpg +http://localhost:3000/css/style.css +http://localhost:3000/js/app.js +http://localhost:3000/about.html +</code></pre> + +<p>Możesz wielokrotnie dodać funkcję <code>static()</code>, aby dodać więcej katalogów z zasobami statycznymi. Jeśli plik nie zostanie znaleziony przez jedną funkcję middleware'u to żądanie tego pliku zostanie przekazane do następnej funkcji tej warstwy (kolejność wywołań funkcji jest zogdna z kolejnościa ich deklaracji).</p> + +<pre class="brush: js">app.use(express.static('public')); +app.use(express.static('media')); +</pre> + +<p>Istnieje też możliwość tworzenia wirtualnych przedrostów w URL do zasobów statycznych, tak aby nie udostępniać ich pod tym samym adresem bazowym URL. W rezultacie zasoby będą dostępne jakby były w odrębnym katalogu. Posłużmy się kolejnym przykładem, w którym podamy ścieżkę montowania katalogu `public` pod przedrostkiem "/media"</p> + +<pre class="brush: js">app.use('/media', express.static('public')); +</pre> + +<p>Od tego momentu możesz dostać się do plików z katalogu <code>public</code> podając URL zakończony prefiksem <code>/media</code> z umieszczoną za nim nazwą pliku:</p> + +<pre><code>http://localhost:3000/media/images/dog.jpg +http://localhost:3000/media/video/cat.mp4 +http://localhost:3000/media/cry.mp3</code> +</pre> + +<p>Więcej dowiesz się zaglądając do rozdziału <a href="Serving static files in Express">Udostępnianie plików statycznych w Express</a>.</p> + +<h3 id="Obsługa_błędów">Obsługa błędów</h3> + +<p>Błędy mogą być obsługiwane przez jedną lub więcej specjalnych funkcji middleware'u, które muszą posiadać cztery argumenty (w odróżnieniu od pozostałych, trójargumentowych funkcji tej warstwy) <code>(err, req, res, next)</code>. Popatrzmy na przykład poniżej:</p> + +<pre class="brush: js">app.use(function(err, req, res, next) { + console.error(err.stack); + res.status(500).send('Something broke!'); +}); +</pre> + +<p>Funkcje obsługi błędów mogą zwracać odpowiedzi o dowolnej zawartości, ale muszą zostać dodane metodą <code>app.use()</code> po wszystkich pozostałych funkcjach tej warstwy, aby zostały wywołane na końcu procesu przetwarzania żądania.</p> + +<p>Express posiada wbudowany mechanizm obsługi wszelkich błędów mogących wystąpić w aplikacji. Ta domyślna obsługa znajduje się w warstwie pośredniej jako ostania funkcja tej warstwy. Jeśli wywołaniem <code>next()</code> przekażesz błąd do następnej funkcji, w której nic z tym błędem nie zrobisz, to zostanie on obsłużony przez domyślną funkcję, która wyśle do klienta opis błędu wraz z opisem śladu stosu.</p> + +<div class="note"> +<p><strong>Uwaga:</strong> Śledzenie stosu nie jest włączone do środowiska produkcyjnego. Aby je włączyć w trybie produkcyjnym musisz ustawić zmienną środowiskową <code>NODE_ENV</code> o wartości '<code>production'</code>. </p> +</div> + +<div class="note"> +<p><strong>Uwaga:</strong> HTTP404 i pozostałe "błędy" kojarzone z kodem statusu nie są traktowane jako błędy. Jeśli chcesz je kontrolować to musisz dołączyć odpowiednią funkcję middleware'u. Więcej informacji znajdziesz w <a href="http://expressjs.com/en/starter/faq.html#how-do-i-handle-404-responses">FAQ</a>.</p> +</div> + +<p>Więcje o obsłudze błędów możesz dowiedzieć się w <a href="http://expressjs.com/en/guide/error-handling.html">Error handling</a> (Dokumentacja Express).</p> + +<h3 id="Korzystanie_z_baz_danych">Korzystanie z baz danych</h3> + +<p>Aplikacja Express może korzystać z dowolnej bazy danych wspieranej przez środowisko Node (sam Express nie definiuje żadnych specjalnych zachowań ani wymagań odnośnie współpracy z bazami danych). Możliwa jest współpraca z wieloma silnikami BD, włączając takie jak PostgreSQL, MySQL, Redis, SQLite, MongoDB itd.</p> + +<p>Pierwszym krokiem jest zainstalowanie sterownika przy pomocy menadżera pakietów NPM. Na przykład zainstalowanie sterownika do popularnej bazy NoSQL MongoDB sprowadza się do wydania polecenia:</p> + +<pre class="brush: bash"><code>$ npm install mongodb +</code></pre> + +<p>Silnik bazodanowy może być zainstalowany lokalnie lub na zdalnym serwerze. W kodzie aplikacji wymagany jest zainstalowany sterownik, przy pomocy którego łączymy się z bazą i wykonujemy typowe operacje jak tworzenie, odczyt, edycja i usunięcie (CRUD). W przykładzie poniżej (dokumentacja Express) możesz zobaczyć jak znaleźć i odczytać wszystkie ssaki z bazy zawierającej informacje o zwierzętach.</p> + +<pre class="brush: js">//this works with older versions of mongodb version ~ 2.2.33 +var MongoClient = require('mongodb').MongoClient; + +MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) { + if (err) throw err; + + db.collection('mammals').find().toArray(function (err, result) { + if (err) throw err; + + console.log(result); + }); +}); + + +//for mongodb version 3.0 and up +let MongoClient = require('mongodb').MongoClient; +MongoClient.connect('mongodb://localhost:27017/animals', function(err, client){ + if(err) throw err; + let db = client.db('animals'); + db.collection('mammals').find().toArray(function(err, result){ + if(err) throw err; + console.log(result); + client.close(); + }); +}); +</pre> + +<p>Innym, popularnym modelem współpracy aplikacji z bazą danych jest ORM (Object Relational Mapping - mapowanie obiektowo relacyjne). Korzystanie z ORM powoduje, że dane utrwalane w bazie definiujemy jako obiekty lub modele, które są automatycznie mapowane na format bazodanowy. Zaletą takiego podejścia, jest to, że możesz myśleć w kategoriach obiektów JavaScript a nie formatu danych bazy, które w dodatku podlegają sprawdzeniu poprawności danych. Bardziej szczegółowo bazy danych omówimy w późniejszym artykule.</p> + +<p>Więcej informacji znajdziesz w <a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Dokumentacja Express).</p> + +<h3 id="Prezentacja_danych_widoki">Prezentacja danych (widoki)</h3> + +<p>Silniki szablonów (określane w Express jako "view engines") pozwalają Ci na łatwiejsze tworzenie dokumentów wysyłanych jako odpowiedź żądania. Taki dokument, a jest to najczęściej plik HTML lub inny typ dokumentu, zawiera specjalne znaczniki, w miejscu których silnik szablonów wstawia, przekazane z funkcji obsługi żądania, dane. Express wspiera wiele różnych silników widoków, więc przy wyborze najbardziej odpowiedniego można posłużyć się zestawieniem <a href="https://strongloop.com/strongblog/compare-javascript-templates-jade-mustache-dust/">Comparing JavaScript Templating Engines: Jade, Mustache, Dust and More</a>.</p> + +<p>Jeśli chcesz budować swoją aplikację w architekturze MVC musisz w niej wskazać położenie plików szablonów. W sekcji konfiguracyjnej aplikacji wskaż atrybutami 'views' lub 'view engine' katalog szablonów, tak jak poniżej:</p> + +<pre class="brush: js">var express = require('express'); +var app = express(); + +// Set directory to contain the templates ('views') +app.set('views', path.join(__dirname, 'views')); + +// Set view engine to use, in this case 'some_template_engine_name' +app.set('view engine', 'some_template_engine_name'); +</pre> + +<p>Wygląd szablonu zależy od zastosowanego silnika generującego widoki, ale niezależnie od niego przekazanie danych do szablonu wygląda podobnie. Zakładając, że plik szablonu ma nazwę "index.<template_extension>", a w nim znajdują się znaczniki na umieszczenie zmiennych o nazwach `title` i `message`, to w funkcji obsługi żądania powinieneś wywołać <code><a href="http://expressjs.com/en/4x/api.html#res.render">Response.render()</a></code>, żeby klient otrzymał wygenerowany z szablonu dokument HTML:</p> + +<pre class="brush: js">app.get('/', function(req, res) { + res.render('index', { title: 'About dogs', message: 'Dogs rock!' }); +});</pre> + +<p>Więcej informacji o szablonach znajdziesz w <a href="http://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (dokumentacja Express).</p> + +<h3 id="Struktura_plików">Struktura plików</h3> + +<p>Express nie wymaga sztywnej struktury plików, składających się na aplikację. Kontrolery, widoki, pliki statyczne i pozostałe elementy aplikacji mogą być rozmieszczone w dowolnej liczbie plików rozmieszczonych w dowolnej strukturze katalogów. Choć możliwe jest zawarcie całej aplikacji w jednym pliku, to znacznie bardziej rozsądnym rozwiązaniem jest podzielenie aplikacji na pliki o określonych funkcjach. (np. zarządzanie kontem, blogi, forum dyskusyjne) i zgodnie z architekturą aplikacji (np. model, widok i kontroler jeśli jest to aplikacja w architekturze <a href="/en-US/docs/Glossary/MVC">MVC</a>)</p> + +<p>W dalszych rozdziałach będziemy korzystać <em>Express Application Generator</em>, który tworzy modularny szkielet aplikacji, którą możemy łatwo rozbudowywać.</p> + +<ul> +</ul> + +<h2 id="Podsumowanie">Podsumowanie</h2> + +<p>Gratulacje, zrobiłeś pierwszy krok w swojej podróży z Express/Node! Mam nadzieję, że dobrze poznałeś najważniejsze zalety środowiska Express/Node i zrozumiałeś ogólne działanie najważniejszych elementów aplikacji (funkcje obsługi żądań, warstwa pośrednia, obsługa błędów, szablony widoków. Powinieneś też rozumieć, że Express jako elastyczny framework, nie narzuca Ci sposobu łączenia elementy aplikacji, ale Tobie pozostawia w tej kwestii wybór.</p> + +<p>W założeniu twórców Express jest lekkim frameworkiem. dlatego wiele jego zalet i możliwości pochodzi z bibliotek i funkcji firm trzecich. Będziemy im się przyglądać bardzie szczegółowo w dalszych częściach cyklu. W następnym artykule będziemy poznawać konfigurację środowiska uruchomieniowego Node.</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li><a href="https://medium.com/@ramsunvtech/manage-multiple-node-versions-e3245d5ede44">Venkat.R - Manage Multiple Node versions</a></li> + <li><a href="https://nodejs.org/api/modules.html#modules_modules">Modules</a> (Node API docs)</li> + <li><a href="https://expressjs.com/">Express</a> (home page)</li> + <li><a href="http://expressjs.com/en/starter/basic-routing.html">Basic routing</a> (Express docs)</li> + <li><a href="http://expressjs.com/en/guide/routing.html">Routing guide</a> (Express docs)</li> + <li><a href="http://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (Express docs)</li> + <li><a href="https://expressjs.com/en/guide/using-middleware.html">Using middleware</a> (Express docs)</li> + <li><a href="http://expressjs.com/en/guide/writing-middleware.html">Writing middleware for use in Express apps</a> (Express docs)</li> + <li><a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs)</li> + <li><a href="http://expressjs.com/en/starter/static-files.html">Serving static files in Express</a> (Express docs)</li> + <li><a href="http://expressjs.com/en/guide/error-handling.html">Error handling</a> (Express docs)</li> +</ul> + +<div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div> + +<h2 id="W_tym_module">W tym module</h2> + +<ul> + <li><a href="/pl/docs/Learn/Server-side/Express_Nodejs/Introduction">Wprowadzenie do Express/Node</a></li> + <li><a href="/pl/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li> + <li><a href="/pl/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li> +</ul> diff --git a/files/pl/learn/server-side/express_nodejs/skeleton_website/index.html b/files/pl/learn/server-side/express_nodejs/skeleton_website/index.html new file mode 100644 index 0000000000..d3a949c8cd --- /dev/null +++ b/files/pl/learn/server-side/express_nodejs/skeleton_website/index.html @@ -0,0 +1,528 @@ +--- +title: 'Szkolenie z Express - część 2: Tworzenie szkieletu aplikacji webowej' +slug: Learn/Server-side/Express_Nodejs/skeleton_website +tags: + - Express + - Początkujący + - Szkolenie + - Wprowadzenie + - środowisko programisty +translation_of: Learn/Server-side/Express_Nodejs/skeleton_website +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}</p> + +<p class="summary">W drugim artykule cyklu <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Szkolenie z Express</a> zbudujemy "szkielet" aplikacji webowej, którą będziemy później rozbudowywać o kolejne elementy: ścieżki, szablony/widoki i odwołania do bazy danych. </p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Wymagania:</th> + <td>Przeczytanie artykułu <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Set up a Node development environment</a>.</td> + </tr> + <tr> + <th scope="row">Cele:</th> + <td>Umiejętność samodzielnego utworzenia własnego projektu aplikacji webowej za pomocą <em>Express Application Generator</em>.</td> + </tr> + </tbody> +</table> + +<h2 id="Wstęp">Wstęp</h2> + +<p>Artykuł przedstawia tworzenie szkieletu aplikacji webowej Biblioteka przy pomocy narzędzia <a href="https://expressjs.com/en/starter/generator.html">Express Application Generator</a>. W kolejnych artukułach będziemy ją rozbudowywać o kolejne elementy. Proces tworzenia jest bardzo prosty i wymaga wywołania tylko jednego polecenia z nazwą budowanej aplikacji. Opcjonalnie można także podać silnik do renderowania widoków i generator CSS.</p> + +<p>W kolejnych sekcjach przyjrzymy się bliżej działaniu generatora, poznamy opcje widoków/CSS. Zostanie też wyjaścniona struktura utworzonej aplikacji. Na zakończenie poznasz metody uruchomienia utworzonej aplikacji oraz zweryfikowania jej działania. </p> + +<div class="note"> +<p><span style="line-height: 1.5;"><strong>Uwaga</strong>: <em>Express Application Generator</em> nie jest jedynym narzędziem do tworzenia aplikacji Express, a struktura utworzonych projektów nie jest jedyną właściwą. Wygenerowana aplikacji posiada modularną strukturę, która może być łatwo rozszerzana oraz jest wystarczająco przejrzysta i zrozumiała. Informacje o tym jak zrobić minimalną aplikację Express znajdziesz w <a href="https://expressjs.com/en/starter/hello-world.html">Hello world example</a> (dokumentacja Express).</span></p> +</div> + +<div class="note"> +<p><span style="line-height: 1.5;"><strong>Uwaga</strong>: W tym szkoleniu wykorzystano wersję Express zdefiniowaną w pliku <strong>package.json</strong> utworzonym automatycznie przez <em>Express Application Generator.</em> I niekoniecznie jest to najnowsza wersja! </span></p> +</div> + +<h2 id="Korzystanie_z_generatora_aplikacji">Korzystanie z generatora aplikacji</h2> + +<p>Powinieneś mieć zainstalowany generator jako część środowiska przygotowanego w artykule <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Przygotowanie środowiska programisty Node</a>. W ramach przypomnienia instalacja generatora aplikacji Express wymaga wpisania poniższego polecenia:</p> + +<pre class="brush: bash notranslate"><code>npm install express-generator -g</code></pre> + +<p>Generator posiada wiele opcji, które możesz poznać za pomocą polecenia <code>--help</code> (lub <code>-h</code>):</p> + +<pre class="brush: bash notranslate">> express --help + + Usage: express [options] [dir] + + + Options: + + --version output the version number + -e, --ejs add ejs engine support + --pug add pug engine support + --hbs add handlebars engine support + -H, --hogan add hogan.js engine support + -v, --view <engine> add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade) + --no-view use static html instead of view engine + -c, --css <engine> add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css) + --git add .gitignore + -f, --force force on non-empty directory + -h, --help output usage information +</pre> + +<p>Wpisując wyłącznie polecenie <code>express</code> utworzysz projekt w bieżącym katalogu z domyślnym silnikiem zablonów Jade i czystym CSS. Dodanie nazwy katalogu spowoduje utworzenie projektu w tym właśnie katalogu. </p> + +<pre class="brush: bash notranslate"><code>express</code></pre> + +<p>Opcją <code>--view</code> możesz wyspecyfikować inny generator widoków a <code>--css</code> podać preprocesor CSS.</p> + +<div class="note"> +<p><strong>Uwaga:</strong> Pozostałe opcje wyboru silnika szablonów(n.p. <code>--hogan</code>, <code>--ejs</code>, <code>--hbs</code> itd.) są już przestarzałe i nie należy z nich korzystać . Skorzystaj z opcji <code>--view</code> (or<code> -v</code>)!</p> +</div> + +<h3 id="Jaki_silnik_szablonów_wykorzystać">Jaki silnik szablonów wykorzystać?</h3> + +<p>Paczka <em>Express Application Generator</em> pozwala na skonfigurowanie wielu popularnych silników renderujących, w tym <a href="https://www.npmjs.com/package/ejs">EJS</a>, <a href="http://github.com/donpark/hbs">Hbs</a>, <a href="https://pugjs.org/api/getting-started.html">Pug</a> (Jade), <a href="https://www.npmjs.com/package/twig">Twig</a> i <a href="https://www.npmjs.com/package/vash">Vash</a>, spośród których to Jade jest domyślnie instalowany w sytuacji braku specyfikacji silnika. Sam Express wspiera znaczną liczbę innych języków szablonów <a href="https://github.com/expressjs/express/wiki#template-engines">out of the box</a>.</p> + +<div class="note"> +<p><strong>Uwaga:</strong> Jeśli chcesz skorzystać z silnika, który nie jest wspierany przez generator to zapoznaj się publikacją <a href="https://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (dokumentacja Express) i dokuemntacją wybranego silnika.</p> +</div> + +<p>Ogólnie mówiąc powinnieneś wybrać taki silnik szablonów, który dostarcza wszystkich potrzebnych Ci funkcji i pozwala na szybkie osiągnięcie produktywności. Innymi słowy kieruj się tymi samymi regułami, którymi się kierujesz wybierając pozostałe komponenty. Podczas wyboru powinieneś rozważyć kilka kwestii:</p> + +<ul> + <li>czas osiągnięcia zadawalającej produktywności - jeśli Twój zespół posiada już jakieś doświadczenie w pracy z danym jezykiem szablonów to zapewne szybciej osiągnie sprawność w posługiwaniu się nim. Jeśli nie, to rozważ język łatwy do przyswojenia. </li> + <li>popularność i aktywność - rozważ wybór silnika popularnego i posiadającego aktywną społeczność. Jest to ważne, bo pozwala mieć wsparcie doświadczonych użytkowników w problematycznych sytuacjach pojawiających się w trakcie cyklu życia aplikacji. </li> + <li>styl - niektóre silniki szablonów korzystają ze speyficznych znaczników do oznaczania miejsc wypełnianych zawartością pośród "zwykłego" kodu HTML, a inne korzystają ze specyficznej składni (np. w postaci wcięć lub nazw bloków).</li> + <li>wydajność/ czas renderowania</li> + <li>funkcjonalność - warto uwzględnić podczas wyboru silnika także dostepność następujących funkcji: + <ul> + <li>Dziedziczenie layoutów: ten mechanizm pozwala zdefiniować szablon bazowy, który może zostać wykorzystany do budowy kolejnych poprzez przejęcie fragmentów bazowego i dodanie elementów specyficznych dla tworzonego szablonu. Jest to znacznie lepsze podejście od budowania szablonu na zasadzie dołączania wymaganych komponentów lub tworzenia za każdym razem od podstaw. </li> + <li>Wsparcie dla dyrektywy typu "include": tego typu dyrektywa pozwala na umieszczanie w szablonie innych szablonów.</li> + <li>Możliwość definiowania zmiennych i wykonywania instrukcji ieracyjnych.</li> + <li>Zdolność formatowania wartości na poziomie szablonu (np. operacja typu upper-case, formatowanie daty).</li> + <li>Zdolność generowania dokumentów wyjściowych w innych formatach od HTML (np. JSON lub XML).</li> + <li>Obsługa operacji asynchronicznych i przesyłania strumieniowego.</li> + </ul> + </li> +</ul> + +<div class="note"> +<p><strong>Wskazówka: </strong> W Intenecie znajduje się wiele zasobów, które mogą pomóc w porównaniu wiel opcji!</p> +</div> + +<p>W naszym projekcie wykorzystamy generator szablonów <a href="https://pugjs.org/api/getting-started.html">Pug</a> (poprzednio funkcjonował pod nazwą Jade), który jest najpopularniejszym narzędziem tego typu w środowisku Express/JavaScript i intalowanym wraz z generatorem aplikacji.</p> + +<h3 id="Jakiego_preprocesora_arkuszy_stylów_CSS_należy_użyć">Jakiego preprocesora arkuszy stylów CSS należy użyć?</h3> + +<p><em>Express Application Generator</em> pozwala na utworzenie projektu, który można skonfigurować do pracy z najbardziej znanymi preprocesorami stylów CSS: <a href="http://lesscss.org/">LESS</a>, <a href="http://sass-lang.com/">SASS</a>, <a href="http://compass-style.org/">Compass</a>, <a href="http://stylus-lang.com/">Stylus</a>.</p> + +<div class="note"> +<p><strong>Uwaga: </strong>CSS posiada pewne ograniczenia, które czynią definiowanie niektórych reguł bardzo trudnymi. Preprocesory dają możliwość wykorzystania bogatszej i o znacznie wiekszych możliwościach składni do definiowania reguł styli i kompilacji ich do tradycyjnego formatu CSS wykorzystywanego przez przeglądarki.</p> +</div> + +<p>Podobnie jak przy wyborze silnika szablonów, tak i przy wyborze preprocesora powinieneś się kierować preferencjami zespołu, aby osiągnąć żądaną produktywność. W naszym projekcie wykorzystamy ustawienia domyślne, czyli tzw. vanilla CSS, ponieważ nie będziemy korzystać ze zbyt skomplikowanych reguł, a czysty CSS będzie dla nas wystarczająco dobry.</p> + +<h3 id="Jakiej_bazy_danych_uzyć">Jakiej bazy danych uzyć?</h3> + +<p>Wygenerowany kod aplikacji nie jest skonfigurowany do współpracy z bazą danych. Oczywiście aplikacje <em>Express</em> moga korzystać z <a href="https://expressjs.com/en/guide/database-integration.html">dowolnego silnika bazodanowego</a> wspieranego przez środowisko Node (sam <em>Express</em> nie stawia żadnych specjalnych wymagań co do stosowanej bazy danych). Itegrację aplikacji z bazą danych omówimy w późniejszym artykule.</p> + +<h2 id="Tworzenie_projektu">Tworzenie projektu</h2> + +<p>Stworzymy na początek przykładowy projekt pod nazwą <em>express-locallibrary-tutorial </em>korzystający z generatora szablonów Pug<em> </em>i<em> </em>czystego CSS.</p> + +<p>Utwórz katalog projektu o podanej wyżej nazwie i przejdź do niego. Uruch teraz <em>Express Application Generator</em> wpisując w wierszu poleceń (terminalu) poniższą komendę:</p> + +<pre class="brush: bash notranslate">express express-locallibrary-tutorial --view=pug +</pre> + +<p>Generator aplikacji utworzy poniższą strukturę plików i katalogów.</p> + +<pre class="brush: bash notranslate"> create : express-locallibrary-tutorial\ + create : express-locallibrary-tutorial\public\ + create : express-locallibrary-tutorial\public\javascripts\ + create : express-locallibrary-tutorial\public\images\ + create : express-locallibrary-tutorial\public\stylesheets\ + create : express-locallibrary-tutorial\public\stylesheets\style.css + create : express-locallibrary-tutorial\routes\ + create : express-locallibrary-tutorial\routes\index.js + create : express-locallibrary-tutorial\routes\users.js + create : express-locallibrary-tutorial\views\ + create : express-locallibrary-tutorial\views\error.pug + create : express-locallibrary-tutorial\views\index.pug + create : express-locallibrary-tutorial\views\layout.pug + create : express-locallibrary-tutorial\app.js + create : express-locallibrary-tutorial\package.json + create : express-locallibrary-tutorial\bin\ + create : express-locallibrary-tutorial\bin\www + + change directory: + > cd express-locallibrary-tutorial + + install dependencies: + > npm install + + run the app (Bash (Linux or macOS)) + > <code>DEBUG=express-locallibrary-tutorial:* npm start +</code> + run the app (PowerShell (Windows)) +<code> > $ENV:DEBUG = "express-locallibrary-tutorial:*"; npm start +</code> + run the app (Command Prompt (Windows)): + > SET DEBUG=express-locallibrary-tutorial:* & npm start +</pre> + +<p>Na końcu zwróconych przez generator komunikatów znajdują się instrukcje w jaki sposób zainstalować wymagane pakiety (ich spis znajduje się w pliku <strong>package.json</strong>) i jak uruchomić aplikację.</p> + +<h2 id="Uruchomienie_szkieletu_aplikacji">Uruchomienie szkieletu aplikacji</h2> + +<p>W katalogu mamy na razie kompletny szkielet naszego projektu, a nasza aplikacja nie wykonuje zbyt wielu zadań. Warto jednak uruchmić ją w tej początkowej postaci, aby sprawdzić czy działa.</p> + +<ol> + <li>Na początku zainstaluj zależności(polecenie <code>install</code> pobierze wymienione w <strong>package.json</strong> pliki). + + <pre class="brush: bash notranslate">cd express-locallibrary-tutorial +npm install</pre> + </li> + <li>Uruchom aplikację. + <ul> + <li>W systemie Windows użyj tego polecenia: + <pre class="brush: bash notranslate">SET DEBUG=express-locallibrary-tutorial:* & npm start</pre> + </li> + <li>W sytemach macOS lub Linux wpisz jak poniżej: + <pre class="brush: bash notranslate">DEBUG=express-locallibrary-tutorial:* npm start +</pre> + </li> + </ul> + </li> + <li>Wpisz w przeglądarce adres <a href="http://localhost:3000/">http://localhost:3000/</a> aby dostać się do strony aplikacji.</li> +</ol> + +<p>W przeglądarce powinieneś zobaczyć stronę podobą do tej poniżej:</p> + +<p><img alt="Browser for default Express app generator website" src="https://mdn.mozillademos.org/files/14375/ExpressGeneratorSkeletonWebsite.png" style="display: block; height: 403px; margin: 0px auto; width: 576px;"></p> + +<p>Gratulacje! Twoja aplikacja Express działa i jest dostępna na Twojej lokalnej maszynie pod portem 3000.</p> + +<div class="note"> +<p><strong>Uwaga: </strong>Możesz też uruchomić aplikację korzystająć z polecenia<strong> </strong><code>npm start</code>. Ustawiając zmienną DEBUG możesz włączyć wyświetlanie komunikatów logowania i debugowania. Przykładowo podczas odświeżenia powyższej strony aplikacji zobaczysz poniższe komunikaty w oknie konsoli:</p> + +<pre class="brush: bash notranslate">>SET DEBUG=express-locallibrary-tutorial:* & npm start + +> express-locallibrary-tutorial@0.0.0 start D:\github\mdn\test\exprgen\express-locallibrary-tutorial +> node ./bin/www + + express-locallibrary-tutorial:server Listening on port 3000 +0ms +GET / 304 490.296 ms - - +GET /stylesheets/style.css 200 4.886 ms - 111 +</pre> +</div> + +<h2 id="Włączenie_restartowania_serwera_po_modyfikacji_plików">Włączenie restartowania serwera po modyfikacji plików</h2> + +<p>Jakakolwiek zmiana w naszym projekcie nie będzie widoczna dopóki nie wykonasz ponownego uruchomienia serwera. Z czasem może to być bardzo irytujące, gdy każda zmiana będzie wymagała ciągłego zatrzymywania i ponownego uruchamiania serwera. Dlatego warto poświecić nieco czasu na zautomatyzowanie tej czynności.</p> + +<p>Odpowiednim narzędziem do tego celu jest <a href="https://github.com/remy/nodemon">nodemon</a>. Zwykle jest instalowany globalnie, ale tutaj zainstalujemy go lokalnie jako zależność developerską, aby każdy developer pracujący z aplikacją miał go po zainstalowaniu projektu. Wywołaj poniższe polecenia w głównym katalogu naszego projektu::</p> + +<pre class="brush: bash notranslate">npm install --save-dev nodemon</pre> + +<p>Jeśli jednak chcesz zainstalować <a href="https://github.com/remy/nodemon">nodemon</a> globalnie, a nie tylko w swoim projekcie dodając wpis do <strong>package.json</strong>, to wpisz taką wersję polecenia: </p> + +<pre class="brush: bash notranslate">npm install -g nodemon</pre> + +<p>Gdy otworzysz plik <strong>package.json </strong>swojego projektu to powinieneś zobaczyć nową sekcję z poniższą zależnością:</p> + +<pre class="brush: json notranslate"> "devDependencies": { + "nodemon": "^2.0.4" +} +</pre> + +<p>Ponieważ nasze narzedzie nie została zainstalowane globalnie, to nie możemy go uruchomić wprost z linii poleceń (dopóki nie dodamy go do ścieżki). Możemy je jednak wywołać wprost ze skryptu NPM, bo NPM wie wszystko o zainstalowanych pakietach. Znajdź sekcję <code>scripts</code> w swoim pliku <strong>package.json</strong>. Dodaj do niej dwa wiersze ze skryptami "devstart" i "serverstart", Pamiętaj o dodaniu na końcu każdego wiersza (oprócz ostatniego) znaku przecinka: </p> + +<pre class="brush: json notranslate"> "scripts": { + "start": "node ./bin/www"<strong>,</strong> +<strong> "devstart": "nodemon ./bin/www", + "serverstart": "</strong>DEBUG=express-locallibrary-tutorial:* npm <strong>run devstart"</strong> + }, +</pre> + +<p>Możemy teraz uruchomić serwer w prawie taki sam sposób jak poprzednio, ale przy pomocy polecenia <code>devstart</code>: </p> + +<ul> + <li>W systemie Windows wpisz polecenie w takiej postaci: + <pre class="brush: bash notranslate">SET DEBUG=express-locallibrary-tutorial:* & npm <strong>run devstart</strong></pre> + </li> + <li>W systemach macOS lub Linux użyj tej postaci: + <pre class="brush: bash notranslate">DEBUG=express-locallibrary-tutorial:* npm <strong>run devstart</strong> +</pre> + </li> +</ul> + +<div class="note"> +<p><strong>Uwaga:</strong> Od tej chwili każda zmiana jakiegokolwiek pliku projektu powoduje restart serwera (możesz też zrestartować serwer wpisując w dowolnym momencie polecenie rs w terminalu). Nadal jednak będziesz musiał odświeżać stronę w przeglądarce.</p> + +<p>Od teraz musimy uruchamiać skrypty poleceniem "<code>npm run <em><scriptname></em></code>" zamiast zwykłego <code>npm start</code>, ponieważ „start” jest w rzeczywistości poleceniem NPM, które jest odwzorowane na skrypt o takiej nazwie. Mogliśmy zamienić polecenie w skrypcie <em>start</em>, ale podczas programowania chcemy używać tylko <em>nodemon</em>, więc sensowne jest utworzenie nowego polecenia skryptu.</p> + +<p>Dodanie polecenia <code>serverstart</code> w sekji skryptów pliku <strong>package.json</strong> jest dobrym rozwiązaniem, które pozwala uniknąć wpisywania długim poleceń uruchamiających serwer. Zwróć uwagę, że niektóre konkretne polecenia dodane do skryptu działają tylko w systemie macOS lub Linux.</p> +</div> + +<h2 id="Wygenerowany_projekt">Wygenerowany projekt</h2> + +<p>Przyjrzyjmy się bliżej projektowi, który stworzyliśmy.</p> + +<h3 id="Struktura_katalogów">Struktura katalogów</h3> + +<p>Utworzony projekt wraz z zainstalowanymi zależnościami ma przedstawioną poniżej strukturę (pliki są elementami z prefiksem "/").</p> + +<p>Plik <strong>package.json </strong>definiuje spis wymaganych przez naszą aplikację pakietów oraz zawiera wiele innych informacji o aplikacji. W pliku tym są też zdefiniowane skrypty, w tym też skrypt startowy, który wywołuje punkt wejścia aplikacji, czyli plik JavaScript <strong>/bin/www</strong>. Skrypt ten po ustawieniu mechanizmu obslugi błędów uruchamia plik <strong>app.js</strong>, który wykonuje resztę pracy.</p> + +<p>W katalogu <strong>/routes</strong> znajdują się moduły obsługujące ścieżki aplikacji. Szablony generowanych stron przechowywane są w katalogu <strong>/views</strong>. </p> + +<pre class="notranslate">/express-locallibrary-tutorial + <strong>app.js</strong> + /bin + <strong>www</strong> + <strong>package.json</strong> + <strong>package-lock.json</strong> + /node_modules + [about 6700 subdirectories and files] + /public + /images + /javascripts + /stylesheets + <strong>style.css</strong> + /routes + <strong>index.js</strong> + <strong>users.js</strong> + /views + <strong>error.pug</strong> + <strong>index.pug</strong> + <strong>layout.pug</strong> + +</pre> + +<p>W kolejnych sekcjach znajdziesz więcej szczegółów dotyczących plików projektu. </p> + +<h3 id="package.json">package.json</h3> + +<p>Plik <strong>package.json</strong>:</p> + +<pre class="brush: json notranslate">{ + "name": "express-locallibrary-tutorial", + "version": "0.0.0", + "private": true, + "scripts": { + "start": "node ./bin/www" + }, + "dependencies": { + "cookie-parser": "~1.4.4", + "debug": "~2.6.9", + "express": "~4.16.1", + "http-errors": "~1.6.3", + "morgan": "~1.9.1", + "pug": "2.0.0-beta11" + }, + "devDependencies": { + "nodemon": "^2.0.4" + } +} +</pre> + +<p>Sekcja zależności zawiera paczkę <em>express </em>i wybrany przez nas silnik szablonów (<em>pug</em>). Oprócz tego znajdują się w niej jeszcze inne paczki przydatne w aplikacjach webowych:</p> + +<ul> + <li><a href="https://www.npmjs.com/package/cookie-parser">cookie-parser</a>: służy do parsowania ciasteczek i zapewnia przeniesienie ich do <code>req.cookies</code> (zasadniczo daje możliwość wygodnego dostępu do informacji w nagłówkach cookie)</li> + <li><a href="https://www.npmjs.com/package/debug">debug</a>: niewielka paczka służąca do debugowania. której mechanizm jest wzorowany na technice wykorzystywanej w rdzeniu środowiska Node.</li> + <li><a href="https://www.npmjs.com/package/morgan">morgan</a>: Narzędzie do rejestrowania zdarzeń (logger) w warstwie obsługi żądań HTTP.</li> + <li><a href="https://www.npmjs.com/package/http-errors">http-errors</a>: Tworzenie błędów HTTP w razie potrzeby (zgodnych z obsługa błędów w aplikacjach <em>express</em>).</li> +</ul> + +<p>W sekcji scripts zdefiniowany jest skrypt "start", który jest tym samym skryptem wywoływanym poleceniem <code>npm start</code>, gdy chcemy uruchomić serwer. Z definicji tego skryptu wynika, że uruchomia on plik <strong>./bin/www </strong>z kodem JavaScript. </p> + +<pre class="brush: json notranslate"> "scripts": { + "start": "node ./bin/www", + "devstart": "nodemon ./bin/www", + "serverstart": "DEBUG=express-locallibrary-tutorial:* npm run devstart" + }, +</pre> + +<p>Pozostałe skrypty <em>devstart</em> i <em>serverstart</em> możemy wykorzystywać do uruchomienia tego samego pliku <strong>./bin/www</strong> ale z użyciem <em>nodemon</em> niż <em>node</em> (jak zostało to wyjaśnione w sekcji <a href="#Enable_server_restart_on_file_changes">Włączenie restartowania serwera po modyfikacji plików</a>).</p> + +<h3 id="Plik_www">Plik www</h3> + +<p>Plik <strong>/bin/www</strong> jest punktem wejścia aplikacji! Pierwszą rzeczą jaką wykonuje ten plik to funkcja <code>require()</code>, która kieruje do prawdziwego punktu zaczynającego wykonywanie aplikacji (<strong>app.js</strong>, w głównym katalogu projektu), w którym następuje przygotowanie i zwrócenie obiektu aplikacji <code><a href="http://expressjs.com/en/api.html">express()</a></code>.</p> + +<pre class="brush: js notranslate">#!/usr/bin/env node + +/** + * Module dependencies. + */ + +<strong>var app = require('../app');</strong> +</pre> + +<div class="note"> +<p><strong>Uwaga:</strong> <code>require()</code> jest funkcją globalną środowiska Node, która importuje moduł do bieżącego pliku. W powyższym kodzie moduł <strong>app.js</strong> został podany z użyciem ścieżki względnej i z pominięciem opcjonalnego rozszerzenia <strong>.js</strong>.</p> +</div> + +<p>Pozostała część kodu tego pliku konfiguruje serwer HTTP z aplikacją pracującą pod wskazanym portem (numer portu jest zdefiniowany w zmiennej środowiskowej lub przyjmowana jest wartość 3000 jeśli brak takiej zmiennej). W dalszej części następuje uruchomienie nasłuchiwania i raportowania błędów serwera i połączeń. Na razie nie musisz znać wszystkich szczegółów tego kodu (wszystko w tym pliku jest standardowym kodem), choć jeśli jesteś zainteresowany możesz go przejrzeć.</p> + +<h3 id="app.js">app.js</h3> + +<p>Ten plik jest odpowiedzialny za utworzenie obiektu aplikacji (pod konwencjonalną nazwą <code>app</code>), jej skonfigurowanie wraz z warstwami pośrednimi i wyeksportowanie jej z modułu. Kod poniżej zawiera tę cześć pliku app.js, która zawiera tworzenie i eksportowanie obiektu aplikacji:</p> + +<pre class="brush: js notranslate"><code>var express = require('express'); +var app = express(); +... +</code>module.exports = app; +</pre> + +<p>Powrót do punktu wejściowego, czyli do pliku <strong>www</strong>, następuje w linii zawierającej <code>module.exports</code>, która eksportuje obiekt app aplikacji i zwraca go do wywołującego kodu, który ten moduł zaimportował.</p> + +<p>Czas teraz na szczegóły pliku app.js. Na początku importowne są dość użyteczne moduły przy pomocy funkcji <code>require()</code>, w tym <em>http-errors</em>, <em>express</em>, <em>morgan</em> i <em>cookie-parser, </em>które wcześniej zostały pobrane przez menadżera NPM, oraz pakiet <em>path</em>, który jest częścią środowiska Node i odpowiada za parsowanie ścieżek do plików i katalogów. </p> + +<pre class="brush: js notranslate">var createError = require('http-errors'); +var express = require('express'); +var path = require('path'); +var cookieParser = require('cookie-parser'); +var logger = require('morgan'); +</pre> + +<p>Kolejne funkcje <code>require()</code>, importują moduły z katalogu <em>routes</em>. Zawierają one kody źródłowe obsługujące zbióry ścieżek naszej aplikacji (URL). Gdy będziemy rozbudowywać aplikację o kolejne ścieżki, na przykład zwracają listę wszystkich książek naszej biblioteki, to będziemy musieli dodać nowy plik z definicją operacji wykonywanych pod tą ścieżką. </p> + +<pre class="brush: js notranslate">var indexRouter = require('./routes/index'); +var usersRouter = require('./routes/users'); +</pre> + +<div class="note"> +<p><strong>Uwaga:</strong> W tym miejscu tylko zaimportowaliśmy moduły, na razie nie korzystamy z tych ścieżek (nastapi to później). </p> +</div> + +<p>Następnie tworzymy obiekt <em>app </em>za pomocą zaimportowanego modułu <em>express</em>, po czym konfigurujemy go do pracy z wybranym silnikiem szablonów. W pierwszym kroku określa się lokalizację szablonów poprzez przypisanie katalogu do zmiennej 'views'. W drugim należy podać nazwę wykorzystywanej biblioteki szablonów (w naszym przypadku jest to "pug"). </p> + +<pre class="brush: js notranslate">var app = express(); + +// view engine setup +app.set('views', path.join(__dirname, 'views')); +app.set('view engine', 'pug'); +</pre> + +<p>Następna sekcja zawiera szereg wywołań metody <em>use </em>na obiekcie aplikacji, których zadaniem jest dodanie bibliotek wykorzystywanych w warstwie pośredniej całego łańcucha przetwarzania żądań. Oprócz dołączonych wcześniej modułów zewnętrznych, wykorzystujemy także moduł <code>express.static</code>, którego zadaniem jest obsługa plików statycznych z katalogu <strong>/public</strong> naszego projektu. </p> + +<pre class="brush: js notranslate">app.use(logger('dev')); +app.use(express.json()); +app.use(express.urlencoded({ extended: false })); +app.use(cookieParser()); +<strong>app.use(express.static(path.join(__dirname, 'public')));</strong> +</pre> + +<p>Po skonfigurowaniu warstwy pośredniej możemy dodać (poprzednio już zaimportowane) nasze skrypty obsługujące żądania ścieżek. Zaimportowane pliki definiują poszczególne ścieżki dla różnych części naszej aplikacji:</p> + +<pre class="brush: js notranslate">app.use('/', indexRouter); +app.use('/users', usersRouter); +</pre> + +<div class="note"> +<p><strong>Uwaga:</strong> Podane powyżej ścieżki (<code>'/'</code> i '<code>/users'</code>) są traktowane jako przedrostki tras zdefiniowanych w importowanych plikach. Na przykład, jeśli zaimportowany moduł <strong>users</strong> definiuje ścieżkę względną <code>/profile</code>, to dostęp do tej ścieżki będzie możliwy pod <code>/users/profile</code>. Ścieżki zostaną dokładniej omówione w następnych artykułach.</p> +</div> + +<p>Końcowym etapem konfigurowania warstwy pośredniej jest dodanie obsługi błędów i odpowiedzi HTTP 404.</p> + +<pre class="brush: js notranslate">// catch 404 and forward to error handler +app.use(function(req, res, next) { + next(createError(404)); +}); + +// error handler +app.use(function(err, req, res, next) { + // set locals, only providing error in development + res.locals.message = err.message; + res.locals.error = req.app.get('env') === 'development' ? err : {}; + + // render the error page + res.status(err.status || 500); + res.render('error'); +}); +</pre> + +<p>Obiekt aplikacji Express jest teraz w pełni skonfigurowany. Ostatnim działaniem w skrypcie jest wyeksportowanie obiektu z bieżącego modułu (w ten sposób staje się on dostępny w pliku <strong>/bin/www </strong>po zaimportowaniu).</p> + +<pre class="brush: js notranslate">module.exports = app;</pre> + +<h3 id="Ścieżki">Ścieżki</h3> + +<p>Plik definiujący obsługę żądań kierowanych do ścieżki <strong>/routes/users.js</strong> znajduje się poniżej (struktura wszystkich plików ścieżek jest bardzo podobna, dlatego nie ma potrzeby oglądania pliku <strong>index</strong>). Na początku znajduje się znana już funkcja importująca moduł <em>express</em>, z którego pobierany jest obiekt <code>express.Router</code> . Po zdefiniowaniu obsługi żądania, obiekt rutera jest exportowany z modułu (dzięki czemu może być zaimportowany w <strong>app.js</strong>). </p> + +<pre class="brush: js notranslate">var express = require('express'); +var router = express.Router(); + +/* GET users listing. */ +<strong>router.get('/', function(req, res, next) { + res.send('respond with a resource');</strong> +}); + +module.exports = router; +</pre> + +<p>Ruter definiuje metodę, która będzie wywoływana w chwily pojawienia się żądania <code>GET</code> protokołu HTTP skierowanego pod adres zgodny z wzorcem. Pełna ścieżka do tej metody zostanie zdefiniowana gdy moduł ('<code>/users</code>') zostanie zaimportowany i zostanie dodany przedrostek ('<code>/</code>') w module importujacym. Krótko mówiąc, ściezka zostanie użyta, gdy skierowane zostanie żądanie z URL zawierającym <code>/users/</code>. </p> + +<div class="note"> +<p><strong>Wskazówka: </strong>Wypróbuj działanie rutera uruchamiając serwer i odwiedzając w przeglądarce URL <a href="http://localhost:3000/users/">http://localhost:3000/users/</a>. Powinieneś zobaczyć komunikat: 'respond with a resoure'. </p> +</div> + +<p>Interesującym elementem w kodzie metody obsługującej żądanie GET jest trzeci argument <code>next</code>, co świadczy o tym, że jest to metoda warstwy poredniej a nie prosta funkcja zwrotna. Chociaż na razie w metodzie nie korzystamy z tego argumentu to być może będzie potrzebny w przyszłości, gdy zechsze dodać wiecej metod obsługujących ścieżkę <code>'/'.</code></p> + +<h3 id="Widoki_szablony">Widoki (szablony)</h3> + +<p>Widoki (szablony) są przechowywane w katalogu <code>/views</code> (tak jak zdefiniowano to w pliku <strong>app.js</strong>) i posiadają rozszerzenie .<strong>pug</strong>. Metoda <code><a href="http://expressjs.com/en/4x/api.html#res.render">Response.render()</a></code> jest wykorzystywana do renderowania strony HTML na podstawie szablonu i dostarczonych do niego wartości zmiennych, po czym gotowy dokument jest wysyłany do jako odpowiedź żądania. W znajdującym się kodzie poniżej pochodzącym z pliku możesz obaczyć jak funkcja obsługi żądania ścieżki renderuje szablon "index" na podstawie przekazanej zmiennej "title". </p> + +<pre class="brush: js notranslate">/* GET home page. */ +router.get('/', function(req, res, next) { + res.render('index', { title: 'Express' }); +}); +</pre> + +<p>Szablon "index" (<strong>index.pug</strong>) jest przedsatwiony poniżej. Składnię szablonów omówimy poźniej. To co na razie powinieneś wiedzieć to to, że zmienna <code>title</code> (zawierająca napisz '<code>Expres</code>s') została wstawiona w określonym miejscu szablonu.</p> + +<pre class="notranslate">extends layout + +block content + h1= title + p Welcome to #{title} +</pre> + +<h2 id="Challenge_yourself">Challenge yourself</h2> + +<p>Create a new route in <strong>/routes/users.js</strong> that will display the text "<em>You're so cool"</em> at URL <code>/users/cool/</code>. Test it by running the server and visiting <a href="http://localhost:3000/users/cool/">http://localhost:3000/users/cool/</a> in your browser</p> + +<ul> +</ul> + +<h2 id="Summary">Summary</h2> + +<p>You have now created a skeleton website project for the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Local Library</a> and verified that it runs using <em>node</em>. Most importantly, you also understand how the project is structured, so you have a good idea where we need to make changes to add routes and views for our local library.</p> + +<p>Next, we'll start modifying the skeleton so that it works as a library website.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://expressjs.com/en/starter/generator.html">Express application generator</a> (Express docs)</li> + <li><a href="https://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (Express docs)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li> +</ul> diff --git a/files/pl/learn/server-side/express_nodejs/szkolenie_aplikacja_biblioteka/index.html b/files/pl/learn/server-side/express_nodejs/szkolenie_aplikacja_biblioteka/index.html new file mode 100644 index 0000000000..a23787a253 --- /dev/null +++ b/files/pl/learn/server-side/express_nodejs/szkolenie_aplikacja_biblioteka/index.html @@ -0,0 +1,89 @@ +--- +title: 'Szkolenie z Express: Projekt aplikacji webowej "Biblioteka"' +slug: Learn/Server-side/Express_Nodejs/Szkolenie_aplikacja_biblioteka +tags: + - Początkujący +translation_of: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}</div> + +<p class="summary">W pierwszym artykule naszego cyklu praktycznych lekcji omówimy będziemy się uczyć i jak będzie wyglądała tworzona w trakcie nauki aplikacja webowa, którą nazwiemy Biblioteka.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Wymagania:</th> + <td>Przeczytanie artykułu <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Wprowadzenie do Express</a>. Aby móc aktywnie uczestwiczyć w szkoleniu potrzebne Ci będzie także <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Przygotowanie środowiska do tworzenia applikacji w Node</a>. </td> + </tr> + <tr> + <th scope="row">Cel:</th> + <td> + <p>Wprowadzenie do przykładowej aplikacji, która będzie tworzona w całym cyklu szkolenia i przedstawienie wszystkich tematów, które będą omawiane. </p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Wstęp">Wstęp</h2> + +<p>Witaj w cyklu szkoleń MDN pt. tworzenie aplikacji "Biblioteka" w frameworku Express(Node), w którym będziemy projektować aplikację webową do zarządzania biblioteką</p> + +<p>A oto co będziemy robić w tym cyklu:</p> + +<ul> + <li>Wykorzystywać <em>Express Application Generator</em> do stworzenia szkieletu naszej aplikacji webowej.</li> + <li>Uruchamiać i zatrzymywać serwer WWW.</li> + <li>Przechowywać dane aplikacji w bazie danych.</li> + <li>Tworzyć trasy do obsługi żądań skierowanych do aplikacji oraz wykorzystywać szablony (widoki) do generowania stron HTML z danymi aplikacji.</li> + <li>Pobierać dane od użytkownika przy pomocy formularzy.</li> + <li>Wdrażać aplikację w środowisku produkcyjnym.</li> +</ul> + +<p>Część tematów nie powinna być Ci obca, bo zostały już po krótce omówione lub zasygnalizowane. Po zakończeniu szkolenia powinieneś umieć samodzielnie wykonać prostą aplikację Express.</p> + +<h2 id="Aplikacja_webowa_Biblioteka">Aplikacja webowa Biblioteka</h2> + +<p><em>Biblioteka </em>to nazwa naszej aplikacji, którą będziemy tworzyć i rozwijać w trakcie tego kursu. Domyślasz się, że celem aplikacji jest udostępnienie katalogu online do zarządzania niewielką biblioteką. Użytkownicy będą mogli przejrzeć dostępne książki i zarządzać swoim kontem.</p> + +<p>Temat przykładowej aplikacji został starannie dobrany, ponieważ możemy w niej skalować liczbę szczegółów według potrzeb oraz dobrze pokazać możliwości frameworku Express. Najważniejszą jednak sprawą jest to, że aplikacja będzie naszym przewodnikiem prowadzącym przez wszystkie funkcje, które są potrzebne w prawie każdej aplikacji webowej:</p> + +<ul> + <li>W kilku pierwszych artykułach zdefiniujemy aplikację w dość prostej wersji (tylko do odczytu), w której użytkownicy będą mogli tylko wyszukiwać dostępne książki. Pozwoli to nam zapoznać się z typowymi operacjami występującymi w prawie każdej aplikacji: odczytywanie i wyświetlanie danych z bazy.</li> + <li>W dalszej części kursy aplikacja będzie rozbudowywana o elementy demonstrujące bardzie zaawansowane możliwości. Przykładem może być rozszerzenie aplikacji o funkcję dodawania nowych książek do katalogu, w której pokażemy jak wykorzystywać formularze i wspierać autentykację użytkowników.</li> +</ul> + +<p>Chociaż jest to przykład aplikacji o dużych możliwościach rozbudowy, to jej celem jest pokazanie minimum informacji potrzebnych do rozpoczęcia pracy z Express. Dlatego będziemy przechowywać w niej informacje o książkach, kopiach książek, autorach itd. Nie będziemy jednak przechowywać informacji o innych elementach związanych z pracą biblioteki, ani nie zapewnimy infrastruktury niezbędnej do obsługi wielu witryn bibliotecznych lub innych funkcji „dużej biblioteki”. </p> + +<h2 id="Utknąłem_gdzie_znajdę_kod_źródłowy">Utknąłem, gdzie znajdę kod źródłowy?</h2> + +<p>W trakcie szkolenia będziemy prezentować kolejne fragmenty kodu źródłowego przykładowej aplikacji, żebyś mógł je skopiować i wkleić do swojego projektu. Będą też fragmenty, dzięki którym, mamy nadzieję, będziesz mógł samodzielnie ją rozbudować (z niewielką pomocą).</p> + +<p>Jednak zamiast stosowania metody "Copy Paste", postaraj się samodzielnie przepisać kod. To zaowocuje w przyszłości lepszą znajomością kodu, gdy będziesz pisał coś podobnego.</p> + +<p>Gdy jednak utkniesz, bo nie będziesz umiał znaleźć błędu popełnionego przy przepisywaniu, kompletny kod aplikacji możesz znaleźć w repozytorium <a href="https://github.com/mdn/express-locallibrary-tutorial">Github</a>.</p> + +<div class="note"> +<p><strong>Uwaga:</strong> Wersje środowiska Node, Express oraz pozostałych modułów, dla których przetestowano opisywaną tu aplikację znajdują się w pliku <a href="https://github.com/mdn/express-locallibrary-tutorial/blob/master/package.json">package.json</a> projektu.</p> +</div> + +<h2 id="Podsumowanie">Podsumowanie</h2> + +<p>Gdy już wiesz jaką aplikację będziemy tworzyć i czego będziesz się uczyć możesz przejść do następnego etapu i utworzyć <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">szkielet projektu</a> naszej przykładowej aplikacji.</p> + +<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}</p> + +<h2 id="W_tym_module">W tym module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Wprowadzenie do środowiska Express/Node</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Przygotowanie środowiska do tworzenia aplikacji w Node(Express)</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Szkolenie z Express: Projekt aplikacji webowej "Biblioteka"</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li> +</ul> diff --git a/files/pl/learn/server-side/index.html b/files/pl/learn/server-side/index.html new file mode 100644 index 0000000000..7330545ac9 --- /dev/null +++ b/files/pl/learn/server-side/index.html @@ -0,0 +1,59 @@ +--- +title: Server-side website programming +slug: Learn/Server-side +tags: + - Beginner + - CodingScripting + - Intro + - Landing + - Learn + - NeedsTranslation + - Server + - Server-side programming + - Topic + - TopicStub +translation_of: Learn/Server-side +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">The <strong><em>Dynamic Websites </em></strong>–<em><strong> Server-side programming</strong></em> topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a general introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.</p> + +<p>Most major websites use some kind of server-side technology to dynamically display different data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Displaying all of these using completely different static pages would be completely inefficient, so instead such sites display static templates (built using <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>), and then dynamically update the data displayed inside those templates when needed, e.g. when you want to view a different product on Amazon.</p> + +<p>In the modern world of web development, learning about server-side development is highly recommended.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>Getting started with server-side programming is usually easier than with client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.</p> + +<p>Basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".</p> + +<p>You will need to understand "how the web works". We recommend that you first read the following topics:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li> +</ul> + +<p>With that basic understanding, you'll be ready to work your way through the modules in this section. </p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks. </p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a></dt> + <dd>This module provides server-technology-agnostic information about server-side website programming, including answers to fundamental questions about server-side programming — "what it is", "how it differs from client-side programming", and "why it is so useful" — and an overview of some of the more popular server-side web frameworks and guidance on how to select the most suitable for your site. Lastly we provide an introductory section on web server security.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt> + <dd>Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt> + <dd>Express is a popular web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Node_server_without_framework">Node server without framework</a></dt> + <dd>This article provides a simple static file server built with pure Node.js, for those of you not wanting to use a framework.</dd> +</dl> |