Wszechstronny JavaScript. Technologie: GraphQL, React, React Native i Electron - ebook

Dawno temu młodziutki JavaScript służył do ozdabiania stron WWW. Dziś, choć wciąż jest niewielkim językiem skryptowym, jego możliwości są imponujące. Można go użyć do pisania dużych aplikacji dla różnych platform, a nawet oprogramowania obsługującego urządzenia w IoT. Jest też świetnym narzędziem do tworzenia API dla interfejsów użytkownika aplikacji internetowej, aplikacji natywnej dla urządzeń mobilnych i aplikacji dla komputerów biurkowych. Pracę ułatwiają nowe technologie, w tym React, React Native i GraphQL, a także framework Electron. Okazuje się, że aby tworzyć wiele różnych rodzajów oprogramowania, wystarczy dobrze poznać JavaScript i towarzyszące mu narzędzia.

Ta książka jest przeznaczona dla średnio zaawansowanych i początkujących programistów, którzy chcą poznać narzędzia ułatwiające tworzenie różnych aplikacji w JavaScripcie. Przedstawiono tu kompletne instrumentarium, dzięki któremu można tworzyć kod aplikacji w stylu CRUD działającej na każdej platformie. Opisano, w jaki sposób należy przygotować sobie środowisko programistyczne do pracy, omówiono sposób tworzenia API za pomocą Node i Express, bazy danych MongoDB oraz serwera Apollo. Sporo miejsca poświęcono tworzeniu interfejsów użytkownika niezależnych od platformy za pomocą różnych narzędzi. Poszczególne zagadnienia zilustrowano praktycznymi przykładami działającego kodu. Dzięki tej publikacji nawet początkujący programista zacznie szybko podejmować świadome decyzje technologiczne.

W książce między innymi:

• procesy GraphQL do pracy z danymi
• wspólny mechanizm uwierzytelniania dla API, aplikacji internetowej i aplikacji natywnych
• wykorzystywanie React i Styled Components
• tworzenie aplikacji dla iOS i Androida za pomocą React Native
• praca z frameworkiem Electron

JavaScript - wykorzystaj prawdziwą wszechstronność!

Wstęp 13

Wprowadzenie 15

1. Środowisko programistyczne 19

• Edytor tekstu 20
• Terminal 20
  
  • Użycie dedykowanej aplikacji terminala 20
  • Użycie Visual Studio Code 20
  • Poruszanie się po systemie plików 20
• Narzędzia powłoki i menedżer Homebrew (tylko w systemie macOS) 21
• Node.js i menedżer pakietów npm 22
  
  • Instalacja Node.js i npm w systemie macOS 22
  • Instalacja Node.js i npm w systemie Windows 23
• MongoDB 23
  
  • Instalacja i uruchomienie MongoDB w systemie macOS 23
  • Instalacja i uruchomienie MongoDB w systemie Windows 24
• Git 24
• Expo 25
• Prettier 25
• ESLint 26
• Ładny wygląd kodu w edytorze 26
• Podsumowanie 26

2. Wprowadzenie do API 27

• Co będziemy budować? 27
• Jak zbudujemy nasze API? 28
• Rozpoczęcie pracy 28
• Podsumowanie 30

3. Aplikacja internetowa utworzona za pomocą Node.js i frameworka Express 31

• Witaj, świecie! 31
• nodemon 32
• Rozszerzone opcje portu 33
• Podsumowanie 34

4. Pierwsze API GraphQL 35

• Zmiana serwera na API (mniej więcej) 35
• Podstawy GraphQL 39
  
  • Schemat 39
  • Funkcja resolvera 40
• Dostosowanie API do naszych potrzeb 41
• Podsumowanie 47

5. Baza danych 49

• Rozpoczęcie pracy z MongoDB 50
• Połączenie MongoDB z aplikacją 51
• Odczytywanie i zapisywanie danych przez aplikację 55
• Podsumowanie 61

6. Operacje CRUD 63

• Rozdzielenie schematu GraphQL i funkcji resolverów 63
• Tworzenie schematu CRUD GraphQL 66
• Funkcje resolverów CRUD 67
• Data i godzina 69
• Podsumowanie 71

7. Konta użytkownika i uwierzytelnianie 73

• Uwierzytelnianie w aplikacji 73
• Szyfrowanie i tokeny 74
  
  • Szyfrowanie hasła 74
  • Tokeny JSON Web 75
• Integracja uwierzytelniania z naszym API 77
  
  • Schematy użytkownika 77
  • Funkcje resolverów uwierzytelniania 78
• Dodawanie użytkownika do kontekstu funkcji resolvera 82
• Podsumowanie 84

8. Akcje użytkownika 85

• Zanim zaczniesz 85
• Dodawanie użytkownika do nowej notatki 85
• Uprawnienia użytkownika w zakresie uaktualniania i usuwania notatek 88
• Zapytania użytkownika 89
• Oznaczanie notatki jako ulubionej 92
• Zapytania zagnieżdżone 96
• Podsumowanie 98

9. Istotne szczegóły 99

• Najlepsze praktyki podczas tworzenia aplikacji internetowej i aplikacji opartej na Express.js 99
  
  • Express Helmet 99
  • CORS 100
• Stronicowanie 100
• Ograniczenia danych 103
• Pozostałe aspekty tworzenia naszej aplikacji 104
  
  • Testowanie 104
  • Subskrypcje 104
  • Platforma Apollo GraphQL 104
• Podsumowanie 104

10. Wdrożenie naszego API 105

• Hosting bazy danych 105
• Wdrożenie aplikacji 109
  
  • Konfiguracja projektu 111
  • Wdrożenie kodu aplikacji 112
  • Testowanie 113
• Podsumowanie 113

11. Interfejsy użytkownika i React 115

• JavaScript i interfejs użytkownika 116
• Interfejsy deklaratywne tworzone za pomocą JavaScriptu 117
• Minimalna znajomość biblioteki React 117
• Podsumowanie 122

12. Budowa klienta internetowego za pomocą React 123

• Co będziemy budować? 123
• Jak będziemy budować naszą aplikację? 124
• Rozpoczęcie pracy 125
• Budowa aplikacji 126
• Routing 127
  
  • Łączenie 131
• Komponenty UI 131
• Podsumowanie 134

13. Nadawanie stylu aplikacji 135

• Tworzenie komponentu układu 135
• CSS 137
  
  • Biblioteka typu CSS-in-JS 138
  • Utworzenie komponentu przycisku 139
  • Dodawanie stylów globalnych 140
  • Style komponentu 142
• Podsumowanie 145

14. Praca z klientem Apollo 147

• Konfiguracja klienta Apollo 148
• Wykonywanie zapytań do API 149
  
  • Wybrane style 156
• Zapytania dynamiczne 158
• Stronicowanie 161
• Podsumowanie 163

15. Uwierzytelnianie i informacje o stanie 165

• Utworzenie formularza rejestracyjnego 165
  
  • Formularze React i informacje o stanie 168
  • Mutacja signUp 170
  • Tokeny JWT i lokalne magazyny danych 173
• Przekierowania 174
• Dołączanie nagłówków do żądania 174
• Zarządzanie lokalnymi informacjami o stanie 175
• Wylogowanie 177
• Utworzenie formularza logowania 180
• Trasy chronione 185
• Podsumowanie 186

16. Operacje tworzenia, odczytywania, uaktualniania i usuwania 187

• Tworzenie nowych notatek 187
• Odczytywanie notatek użytkownika 193
• Uaktualnianie notatek 196
• Usunięcie notatki 202
• Zmiana ulubionych 204
• Podsumowanie 208

17. Wdrożenie aplikacji internetowej 209

• Statyczna witryna internetowa 209
• Procedura wdrożenia 210
  
  • Hosting kodu źródłowego w repozytorium Git 211
  • Wdrożenie z użyciem Netlify 212
• Podsumowanie 214

18. Aplikacje utworzone za pomocą frameworka Electron 215

• Co zbudujemy? 215
• Jak utworzymy aplikację? 215
• Rozpoczęcie pracy 216
• Nasza pierwsza aplikacja Electron 217
• Szczegóły związane z oknem aplikacji w systemie macOS 218
• Narzędzia programistyczne 219
• API frameworka Electron 220
• Podsumowanie 221

19. Integracja istniejącej aplikacji internetowej z frameworkiem Electron 223

• Integracja aplikacji internetowej 223
  
  • Ostrzeżenia i błędy 224
• Konfiguracja 226
• Polityka CSP 227
• Podsumowanie 229

20. Wdrożenie aplikacji frameworka Electron 231

• Electron Builder 231
  
  • Konfigurowanie Electron Builder 232
• Kompilacja dla bieżącej platformy 233
• Ikony aplikacji 233
• Kompilacja aplikacji dla różnych platform 234
• Podpisywanie kodu 234
• Podsumowanie 235

21. Tworzenie aplikacji mobilnych za pomocą React Native 237

• Co będziemy tworzyć? 237
• W jaki sposób utworzymy aplikację? 238
• Rozpoczęcie pracy 239
• Podsumowanie 242

22. Tworzenie aplikacji mobilnej 243

• Elementy konstrukcyjne React Native 243
• Style i biblioteka Styled Components 245
  
  • Biblioteka Styled Components 247
• Routing 248
  
  • Nawigacja oparta na kartach i React Native 249
  • Nawigacja oparta na stosie i React Native 251
  • Dodawanie tytułów ekranów 255
• Ikony 256
• Podsumowanie 258

23. GraphQL i React Native 259

• Utworzenie widoków listy i przewijanej treści 259
  
  • Zapewnienie routingu listy 265
• GraphQL i klient Apollo 266
  
  • Tworzenie zapytań GraphQL 267
• Dodanie paska postępu wczytywania danych 273
• Podsumowanie 273

24. Uwierzytelnianie w aplikacji mobilnej 275

• Mechanizm uwierzytelniania 275
• Utworzenie formularza logowania 283
• Uwierzytelnienie za pomocą mutacji GraphQL 288
• Uwierzytelnione zapytania GraphQL 290
• Dodanie formularza rejestracji 293
• Podsumowanie 298

25. Dystrybucja aplikacji mobilnej 301

• Konfiguracja pliku app.json 301
• Ikony i ekrany wczytywania aplikacji 303
  
  • Ikony aplikacji 303
  • Winietka 304
• Publikowanie aplikacji za pomocą Expo 305
• Tworzenie kompilacji natywnych 306
  
  • iOS 306
  • Android 307
• Dystrybucja aplikacji w sklepach Apple'a i Google'a 308
• Podsumowanie 308

Zakończenie 309

A. Lokalne uruchomienie API 311

B. Lokalne uruchomienie aplikacji internetowej 313