React Native: Xcode

0.62.2+

0:00Czyli udało nam się uruchomić nasza aplikację React Native wygląda całkiem fajnie mamy

0:04trochę inny boilerplate niż w przypadku Expo ale o tym sobie jeszcze będziemy mówić natomiast to

0:08o czym chciałbym teraz porozmawiać to o tym natywnym projekcie iOS-owym wprawdzie

0:12on nie będzie wam potrzebny pewnie na początku przez długi czas natomiast fajnie

0:16wiedzieć mniej więcej co tu się dzieje co oznaczają te foldery dlatego uruchomimy sobie naszego

0:20xcode'a wejdziemy

0:25sobie do folderu ios i uruchomimy projekt xcworkspace

0:30w naszym folderze ios

0:36tak i tutaj generalnie naszym workspace mamy 2 powiedzmy podprojekty pierwszy

0:40projekt to jest nasz projekt pods i to jest to

0:46jest tak naprawdę zbiór podprojektów naszych dependencji znaczy można

0:50powiedzieć że ten pod file i cały ten ten projekt to jest coś jak package json

0:54w przypadku Reacta czyli jak Native'a czyli mamy tutaj informację o tym

0:58co chcielibyśmy doinstalować w jakich wersjach i tak dalej jak widać

1:02już sam React Native dorzucił nam sporo dependencji które

1:06są niezbędne do tego żeby nasz kod uruchomić choćby dlatego żebyśmy

1:10wiedzieli jak żeby React Native wiedział jak ma pewne rzeczy layoutować

1:14jak zapisywać obrazki i tak dalej czy na przykład jak korzystać

1:19z narzędzi debuggujących natomiast moglibyśmy sobie tutaj w dowolnym miejscu dopisać

1:25nasze depandencje jeśli potrzebowalibyśmy użyć ich tylko

1:29wyłącznie w przypadku naszego projektu natywnego na iOS-ie jeśli

1:33wejdziemy sobie w nasz TestProject i w folder TestProject to mamy tutaj parę parę

1:37rzeczy pierwszym plikiem to jest nasz plik mine.jsbundle i to

1:41jest plik z naszą logiką JS-ową czyli właśnie tym co

1:46zostaje stworzone po zbundlowaniu naszego z

1:50naszego kodu czyli po tym procesie który się dzieje o którym opowiadałem

1:55na początku o tym jak działa React Native czyli nasz kod JS-owy zostaje zbundlowany

1:59do takiego pojedynczego pliku i ten plik może być albo ładowany

2:03statycznie z naszych zasobów albo właśnie serwowany

2:07z serwera który sobie tutaj działa w tej chwili to wszystkio jest serwowane z serwera więc ten plik

2:11po prostu jest jakiś tam wygenerowany natomiast my z niego w tej chwili nie korzystamy mamy

2:16nasz folder assets gdzie mamy jakieś grafiki które możemy wrzucić to

2:20jest ikonka aplikacji którą możemy sobie zmieniać jak widać potrzebne jest w

2:25odpowiednich rozmiarach ponieważ potrzebuję tej ikonki na różnych rozdzielczościach w

2:29różnych sytuacjach i tak dalej w tej chwili tej ikonki żadnej nie ma mamy

2:33nasz plik info plist jest to dokument w którym trzymamy

2:38takie bardzo ogólne informacje o aplikacji jak nazwa aplikacji jak wersja

2:42jak parę innych rzeczy jeśli chcielibyśmy dodać jakieś no nie wiem informacje

2:49o uprawnieniach które będą nam potrzebne czyli jesli chcielibyśmy korzystać z bluetootha

2:53i tak dalej to tutaj musi byśmy takie informacje zawrzeć i parę innych rzeczy które

2:57chcielibyśmy ogólnie globalnie do naszej aplikacji wprowadzić mamy

3:01nasz launch screen to jest plik to

3:06jest widok który jest ładowany odpalany w trakcie uruchamiania naszej aplikacji i

3:10zauważcie że jeśli zamkniemy sobie naszą aplikację i uruchomimy

3:14ją to dokładnie przez chwilę było widać ten widok czyli to jest to co się dzieje jeszcze zanim

3:19odpali nam się faktyczny projekty xcode'owy poza tym

3:23z takich istotnych rzeczy mamy nas plik AppDelegate tak jak mówiłem na początku

3:27React Native w tej chwili generuje nam projekt w objective-c czyli

3:31nie jest to raczej dla nas zbyt czytelne ale nie musi być teraz w żadnym stopniu ponieważ tak jak mówiłem

3:36na pewno w początkowych etapach nie będziecie w najmniejszym

3:40stopniu potrzebowali tutaj nic zmieniać ale i tak chciałem wam to pokazać być

3:44może będziecie mogli do tego wrócić i żeby zrozumieć

3:48co tu się dzieje z istotnych rzeczy tak naprawdę to jest ciekawa ciekawe

3:53znaczy to jest właśnie to o czym mówiłem czyli jeśli pracujemy jeśli

3:57nasz projekt widzi że pracujemy w trybie debug to

4:01ładuje naszego bundla

4:05z serwera tak czyli jakby szuka tak naprawdę URL-a

4:09do naszego serwera który jest tutaj i będzie ładować tego bundla

4:13powiedzmy to w locie natomiast jeśli wypuszczamy wersję realisową

4:17czyli taką już z spaczkowanym js bundlem to on zostanie ładowany tutaj

4:22na sztywno możemy polecieć jeszcze po takich bardzo ogólnych

4:26ustawieniach projektu tutaj w zakładce general

4:30po kliknięciu nasz projekt mamy ogólne informacje o

4:34naszej aplikacji to znaczy mamy takie informacje jak nazwa aplikacji jak

4:39identyfikator tej aplikacji jak wersja kodu wersja builda na

4:43to takie informację czy chcemy wspierać tylko iphone'y czy również ipady jaką

4:47chcemy orientację oczywiście może jeśli odznaczymy to w ten sposób to

4:51nigdy nasza nasz telefon nie będzie nasza aplikacja nie będzie działać horyzontalnie

4:56natomiast jeśli zaznaczymy sobie te opcje to jeszcze mamy możliwość ustawienia na przykład w kodzie że

5:00jeden konkretny widok będzie się obracać a drugi już nie mamy jeszcze parę

5:05innych opcji które możemy poustawiać ikonki i tak dalej tak naprawdę z takich podstawowych

5:09ustawień które nas interesują to tyle z ciekawostek mogę jeszcze dodać pokazać

5:13wam coś takiego jak jak build phases i to jest tak naprawdę zestaw instrukcji który

5:17jest wywołany podczas budowania to znaczy najpierw budowane sa jakieś dependencies

5:22później są kompilowane źródła coś tam jest linkowane ładowane są

5:26assety i tak dalej natomiast ciekawa rzecz jest tutaj ostatnia czyli to jest bundle react native

5:31code and images i to wywołuje skrypt który nam

5:35uruchamia serwer bundluje nam naszego JS-a

5:39jeśli jest to robione w trybie w trybie debugowym to

5:43tak naprawdę nasz serwer zostanie postawiony czyli w praktyce oznacza to tyle

5:47że jesli wyłączymy sobie nasz serwer i

5:52zamkniemy naszą aplikację to tak naprawdę możemy

5:56uruchomić nasz projekt tylko przy pomocy xcode'a to znaczy nie musimy w ogóle

6:01korzystać z naszych skryptów które są tutaj w package jsonie

6:05nie musimy w ogóle uruchamiać tych sktypów ponieważ one zostaną uruchomione z

6:11poziomu xcode'a co ciekawe tak jak mówiłem na początku ten skrypt uruchamia

6:15nam budowanie najpierw xcode'a czyli to jest tak naprawdę równe

6:20sobie wywołania czyli z jednej strony możemy wywołać budowanie

6:25projektów xcode'owego z poziomu naszego npm-a a z drugiej

6:29strony możemy wywołać budowanie projektu a później bundlowanie naszego

6:34kodu JS-owego z poziomu xcode'a wiec jesli sobie uruchomimy nasz projekt zobaczymy

6:39że najpierw będzie trwało troszeczke szybciej już budowanie naszego projektu ponieważ po

6:44pierwszym zbudowaniu xcode sobie scachował sporo rzeczy nie

6:49musimy się przejmować za bardzo tymi warningami które się tutaj pokazują nasz

6:54projekt został zbudowany zauważcie że projekt

6:58się uruchamia to sekundkę jeszcze chwilę trwa w tym momencie następuje ładowanie

7:02i mamy tak czyli możemy nasz projekt uruchomić równie dobrze z

7:06poziomu xcode'a i znowu żeby nie oszukiwać żeby zobaczyć czy wszystko działa czy

7:11działa nasz czy działa nasze refreshowanie to zmieńmy

7:15sobie ten tytuł z hello na hi z wykrzyknikami zapiszmy

7:19jak widać to wszystko działa czyli znowu podsumowując możemy

7:25nasz projekt uruchamiać zarówno z poziomu xcode'a jaki i z poziom naszego naszych skryptów

7:29i czasem po prostu jest to wygodniejsze jeśli pisalibyśmy jakiś

7:34kod natywny poprawiali go to żeby on działał to musielibyśmy na

7:38nowo budować projekt xcode'owy i czasem po prostu wygodniej ja w komercyjnych projektach

7:42czasem tak robię że odpalam sobie nasz projekt stąd a ponieważ zmieniam sobie pewne rzeczy natywne

7:47i wygodniej jest nam wtedy widzieć te

7:51zmiany faktycznie no i przykładem takiej zmiany którą możemy zrobić to jest

7:55proszę nasza aplikacja działa zarówno horyzontalnie jaki wertykalnie ale

7:59no wymaganie jest takie żeby że tak naprawdę to nie musi działać w żaden sposób w innej

8:04orientacji tak naprawdę chcielibysmy tą orientację zablokować oczywiście moglibyśmy ściągnąć odpowiednie paczki

8:08do React Native'a i w odpowiednich ekranach je blokować ale najprościej będzie nam w

8:12ustawieniach naszego projektu odznaczyć landscape left landscape right

8:16żeby się tego nie dało żeby nasz projekt był

8:21sztywno zawsze portretowy i uruchomić to jeszcze raz na pewno więcej ustawień

8:25i więcej informacji na temat xcode'a znajdziecie w kursie o którym już wcześniej mówiłem odnośnie

8:29podstaw iOS-a zobaczmy co się teraz stało

8:33nasz projekt się zbudował jak widzimy po obrocie

8:38już nasza aplikacja się nie obraca i w tym momencie już z poziomu React Native'a nie mamy

8:42możliwości wymuszenia w jakimkolwiek widoku wersji

8:46horyzontalnej no dlatego że jakby ona jest już tutaj na

8:50sztywno zabita jako portretowa to jest

8:54fajnie myślę że w początkowych etapach w ogóle wam się to nie przyda nie będziecie w ogóle wchodzić do

8:58tego xcode'a natomiast myślę że po jakimś czasie będziecie mogli wrócić do tej lekcji jeśli

9:02będziecie potrzebowali czegoś zmieniać coś zmienić właśnie w natywnym kodzie czy

9:06właśnie takie ustawienia jak wersja portretowa to fajnie wiedzieć o podstawach