Dziewczyny kodują, czyli powieści dla przyszłych programistek

Reshma Saujani, założycielka organizacji Girls Who Code, napisała, że

“[…] brakuje książek, które opisywałyby, jak to jest być dziewczyną programistką. Zawsze powtarzam, że nie można stać się kimś, kogo w życiu się nie widziało. Ani o kim nic się nie czytało. Musimy czytać o dziewczynach takich jak my, żeby mieć odwagę próbować nowych rzeczy!” – “Kod przyjaźni”, s. 5-6).

Cóż, teraz już nie brakuje – książki Stacii Deutsch “Kod przyjaźni” i “Przyjaciółki rządzą” wypełniają tę lukę, a sądząc z komunikatu na końcu drugiego tomu serii, będzie ona kontynuowana.

O czym są te książki?

Książeczki z serii “Dziewczyny kodują” to powieści dla dziewczynek w wieku 10 – 12 lat. Opowiadają o czterech (a w drugim tomie – pięciu) przyjaciółkach, które zaczęły się uczyć kodowania. A jednocześnie przemycają pewną dawkę wiedzy programistycznej – głównie dotyczącej sposobów myślenia, ale też pseudokodu i terminologii. Książki są ciekawe, a bohaterki zróżnicowane – co jest bardzo ważne, bo pokazuje, że “programować każdy może”. Narratorką każdej z książek jest inna dziewczynka z tej samej grupy, co pozwala przyjrzeć się stworzonemu światu z różnych perspektyw.

W pierwszym tomie dziewczynki znajdują tajemnicze listy, w których otrzymują zadania do wykonania. Zadania są oczywiście związane z programowaniem – listy zapisane są pseudokodem. Jednocześnie czytelniczka jest ostrożnie wprowadzana w tajniki myślenia programistycznego oraz podstawowych elementów pseudokodu. W kolejnym tomie dziewczynki biorą udział w hakatonie – konkursie programistycznym, w którym ich zadaniem jest zaprogramować robota tak, by przeszedł przez labirynt. Jednocześnie pojawiają się kolejne terminy oraz prezentowany jest sposób, w jaki tworzy się oprogramowanie.

Trochę zastrzeżeń

Chociaż książki są dobrze napisane i nie zawierają błędów merytorycznych, pewne moje zastrzeżenia budzi tłumaczenie elementów pseudokodu na polski. Pojawia się ono tylko w pierwszym tomie – był to trudny wybór tłumaczki, która musiała zdecydować się albo na formę angielską, która mogłaby być niezrozumiała dla nieznającej angielskiego dziewczynki, albo na formę polską, która jednak odbiera temu fragmentowi część wymiaru edukacyjnego. W drugim tomie w analogicznej sytuacji pojawia się już słówko angielskie.

Drugie moje zastrzeżenie to trochę zbyt skomplikowany język, którym napisana jest jedna z definicji pod koniec książki – nie jestem pewna, czy czytająca dziewczynka zrozumie o co chodzi. To jednak są drobiazgi.

Czy warto podarować dziewczynce książkę z serii “Dziewczyny kodują”?

Książki same w sobie przedstawiają pewną wartość merytoryczną, przekazują podstawową wiedzę zarówno o podstawowych terminach związanych z kodowaniem, jak i o potrzebnym do tego sposobie myślenia. Są też ciekawe. Nie to jednak stanowi o ich wartości. Moim zdaniem najważniejsze jest to właśnie, co powiedziała cytowana wyżej Reshma Saujani – pokazują, że programowanie jest także dla dziewczynek, i że może być dla nich świetną zabawą. I że może się nim zajmować każdy. Nieważne, czy jest dziewczynką, czy chłopcem, typem strojnisi czy sportsmenki. Kodować każdy może.

Książki burzą też mit samotnego, niechętnego ludziom programisty-ekscentryka i pokazują, że programowanie to tak naprawdę często praca zespołowa. A tym samym zachęcają dziewczynki do podjęcia pierwszych prób. I to właśnie liczy się dla mnie w tych powieściach najbardziej.

Wszystkie cytaty w tekście pochodzą z książkek Stacii Deutsch “Kod przyjaźni” i “Przyjaciółki rządzą” z serii “Dziewczyny kodują”. Tł. K. Rosłan, Warszawa 2017.

Jak stworzyć rekina w HTML, czyli pływające rozwijane okienko

Widzisz to pływające rozwijane okienko w dolnym prawym rogu? Pokażę ci dziś, jak stworzyć podobne.

Stworzymy nasz element z wykorzystaniem HTML i CSS. Jeśli masz bloga na WordPressie, będzie ci łatwiej, bo pokażę ci, co dokładnie zrobić, żeby okienko pojawiło się gdzie trzeba. Ale nie martw się – pokazane kody da się wykorzystać na każdej platformie, będziesz tylko musiał samodzielnie ustalić, gdzie należy je dodać.

Ustawiamy okienko we właściwym miejscu

Może ci się wydać zabawne, że zaczniemy od ustawiania okienka, którego jeszcze nie mamy. Ale wierz mi, tak będzie łatwiej 🙂

Okienko ustawimy za pomocą CSS. Ponieważ chcemy mieć możliwość łatwego tworzenia innych pływających okienek, dodamy nasz kod do szablonu strony, a nie do pojedynczego elementu.

Na początek wybierz w menu WordPress pozycję Wygląd i w podmenu Personalizacja, tak jak widać na poniższym obrazku. Twoje menu może się troszkę różnić od mojego, na pewno będzie miało inne kolory, może też mieć troszkę inną zawartość, ale pozycja Personalizacja na pewno w nim jest.

Fragment bocznego menu WordPressa z zaznaczoną pozycją Wygląd i rozwiniętym podmenu z zaznaczoną pozycją Personalizacja.

Zostaniesz przeniesiony do nowego ekranu, który po prawej stronie będzie pokazywać twoją stronę główną, a po lewej – kolumnę z ustawieniami, która może (ale nie musi) wyglądać podobnie do poniższej:

Fragment bocznego menu z różnymi pozycjami i przyciskami.

Znajdź pozycję Dodatkowy CSS (powinna być gdzieś na końcu) i kliknij na nią

Fragment menu z zaznaczoną pozycją Dodatkowy CSS

Zobaczysz puste okienko, podobne do poniższego. W tym okienku wpiszemy nasz kod CSS.

Okienko do wpisywania danych z nagłówkiem Dodatkowy CSS

Kod CSS ustawiający okienko

Wpisz w okienko lub skopiuj i wklej poniższy kod. Zaraz go sobie objaśnimy.

#latajace_okienko {
  position: fixed;
  Width: auto;
  bottom: 0;
  right: 0;
  float: right;
}

Nie zapomnij nacisnąć przycisku Opublikuj umiejscowionego na górze ekranu (twój może mieć inny kolor).

Przycisk Opublikuj

#latajace_okienko jest nazwą, za pomocą której będziemy informować element HTML, że ma użyć tego właśnie kodu. Znaczek # jest konieczny, ale nazwa po nim może być dowolna, nie może tylko zawierać spacji ani innych znaków specjalnych. No i trzeba ją zapamiętać, żeby potem móc się do niej odwoływać 🙂

Właściwość position – pozycja okienka

position: fixed; mówi o pozycji okienka – oznacza, że będzie się ono wyświetlało zawsze w tym samym miejscu, nawet jeśli strona będzie przewijana. Dokładnie tak, jak dzieje się z okienkiem zaprezentowanym na tej stronie. Jeśli chcesz się dowiedzieć, jakie inne pozycje można wpisać zamiast fixed, możesz zajrzeć tutaj, jednak jeśli wybierzesz inną pozycję, twoje okienko nie będzie pływać.

Właściwości Width i Height – wielkość okienka

Kolejny element – Width: auto; – odpowiada za szerokość okienka. Wartość auto oznacza, że szerokość okienka dopasuje się do jego zawartości. Jeśli chcesz, żeby okienko zajmowało całą szerokość ekranu, wpisz zamiast auto wartość 100% (nie zapomnij o średniku na końcu!). Jeśli wpiszesz 50%, okienko będzie miało szerokość połowy ekranu. Możesz też wpisać szerokość w pikselach, np. 150px. Więcej informacji możesz znaleźć tutaj.

W podobny sposób można ustawić wysokość okienka za pomocą linijki Height: auto;. Nie będziemy jednak tego robić, ponieważ wartość auto jest wartością domyślną (czyli taką, która ustawia się, jeśli w ogóle nie wpiszemy tej linijki). Linijki Width: auto; również moglibyśmy nie wpisywać, ponieważ chcemy aby nasze okienko automatycznie dopasowywało się do zawartości – podałam ją tylko po to, żebyście wiedzieli, jak można zmienić wielkość okienka. Działanie właściwości Height jest analogiczne do działania Width – więcej informacji znajdziesz tutaj.

Właściwości bottom, top, right i left – marginesy

Linijki bottom: 0; i right: 0; odpowiadają za odległość okienka od krawędzi ekranu – bottom mówi o odległości od dołu ekranu, right od prawej strony, można również w analogiczny sposób ustawić właściwość top, odpowiadającą za odległość od góry, i left – od lewej strony ekranu. Ponieważ nasze okienko ma się znajdować w dolnym prawym rogu, ustawiamy tylko te dwie pierwsze wartości.

Odległości te można ustawić podając wartość w taki sam sposób, jak ustawialiśmy to w przypadku właściwości Width i Height – szczegóły znajdziesz w opisach właściwości: bottom, top, right i left.

Właściwość float – położenie okienka

Wreszcie doszliśmy do ostatniej właściwości – float: right;. Oznacza ona położenie okienka – niezależnie od tego, w którym miejscu strony zostanie zapisany kod okienka, ono i tak będzie przyciągnięte do prawej strony ekranu. Zamiast right można oczywiście wpisać left – więcej informacji znajdziesz tutaj.

Tworzymy okienko

Otwórz teraz wpis, w którym chcesz dodać okienko. Jeśli pracujesz w trybie wizualnym, musisz przełączyć się na tekstowy – służy do tego przycisk widoczny u góry po prawej stronie. Powinieneś widzieć takie menu jak poniżej:

Menu z widocznymi po prawej dwoma zakładkami Wizualny i Tekstowy.

Teraz przejedź na dół wpisu i wklej kod:


Po uruchomieniu podglądu strony powinieneś zobaczyć mały, różowy kwadracik w dolnym prawym rogu ekranu, który przy scrollowaniu zostaje zawsze w tym samym miejscu – o taki: Różowy kwadracik. To jest nasze okienko, do którego będziemy wkładać kolejne elementy. Na razie jednak przyjrzyjmy się temu, co już mamy.

Tag <div> i jego atrybuty

Słowem tag albo znacznik w języku HTML określa się element pomiędzy znaczkami < >. Otwarcie tagu wygląda tak: <div>, a jego zamknięcie – tak: </div>. Zamiast słówka div umieszczona jest nazwa tego konkretnego tagu. Każdy tag musi być otwarty i zamknięty, przy czym zamknięcia i otwarcia muszą mieścić się jedno w drugim, jak w szkatułce, np. tak: <div><b></b></div>. Jeśli umieścimy je np. tak: <div><b></div></b>, nie będą działały. Jeśli chcesz dowiedzieć się więcej na temat podstaw HTML, kilknij tutaj

Tag <div> określa sekcję dokumentu – zawartością sekcji będzie wszystko to, co znajdzie się między <div> a </div>.

Wewnątrz tagu można wpisać atrybuty, które będą odnosiły się do całej zawartości tagu. Umieszcza się je wewnątrz otwarcia tagu, np. taki zapis: <div id=”latajace_okienko”> oznacza, że tag <div> ma atrybut id o wartości latajace_okienko.

Omówimy sobie teraz poszczególne atrybuty naszego pływającego okienka i ich znaczenie.

Atrybut id

Atrybut id nadaje nazwę naszej sekcji div. Mówi też o tym, że do tej sekcji należy zastosować kod CSS, który tworzyliśmy wyżej, dzięki czemu nasze okienko będzie trzymało się w tym samym miejscu okna przeglądarki, niezależnie od zmian pozycji scrolla.

Atrybut class=”entry-meta”

Ta wartość atrybutu class zapewnia, że zawartość sekcji nie należy do głównej treści wpisu. Nie będę tego bliżej wyjaśniać. W każdym razie kod działałby również bez tego atrybutu, jednak powinien on się w nim znaleźć.

Atrybut style

Atrybut style pozwala na używanie CSS bezpośrednio w kodzie html. Zauważ, że cała zawartość atrybutu znajduje się w cudzysłowie.

W naszym wypadku ustawiamy text-decoration: none;, co oznacza, że tekst nie będzie miał dodatkowych podkreśleń – jeśli interesuje cię sposób ustawiania tej wartości, szczegóły znajdziesz tutaj.

Następnie ustawiamy wielkość czcionki na standardową poprzez wpisanie font-size: 1em;1em oznacza wielkość domyślną, 2em wielkość dwa razy większą niż domyślna itp. Można ustawiać również wartości ułamkowe, np. 0.5em

W podobny sposób ustawiamy prawy margines (margin-right: 3em;) i padding, czyli odstęp między tekstem a końcem brzegiem ramki tekstu (padding: 0.5em;)

Za pomocą text-align: center; ustawiamy sposób przyciągania tekstu – w tym wypadku do środka, można również zamiast center użyć left (wyrównanie do lewej), right (wyrównanie do prawej) lub justify (wyrównanie do prawej i lewej jednocześnie).

Kolor tła ustawiamy przy użyciu background-color: #ed0cf4;. Jest to kolor różowy, podany za pomocą kodu heksadecymalnego. Niektóre podstawowe kolory można podawać również za pomocą angielskich nazw, np. background-color: white. Więcej informacji o kodach kolorów znajdziesz tutaj.

Tag <details> – rozwijalne okienko

Skoro już mamy nasze pływające okienko, warto by dodać do niego jakąś zawartość. Chcemy, żeby było ono rozwijane, tzn. żeby po kliknięciu pokazywało dodatkową zawartość. Służy do tego tag <details>. Wrzucimy go do wnętrza naszego znacznika <div> w sposób pokazany poniżej:

<div id="latajace_okienko" class="entry-meta" style="text-decoration: none; font-size: 1em; margin-right: 3em; background-color: #ed0cf4; padding: 0.5em; text-align: center;">
   <details style="margin: 0; padding: 0;"> 
   </details>
</div>

Po podejrzeniu strony powinniśmy zobaczyć takie okienko:

Przycisk ze strzałką w dół i napisem Szczegóły.

Po jego kliknięciu zmieni się tylko kierunek trójkącika – nic się nie wydarzy, bo jeszcze nic nie włożyliśmy do środka. Można tam wstawić dowolny element HTML. My wstawimy sobie przycisk.

<div id="latajace_okienko" class="entry-meta" style="text-decoration: none; font-size: 1em; margin-right: 3em; background-color: #ed0cf4; padding: 0.5em; text-align: center;">
   <details style="margin: 0; padding: 0;"> 
      <button type="button">Jestem przyciskiem!</button>
   </details>
</div>

Jak widzisz, teraz po kliknięciu na strzałkę przycisk się pojawia, a po ponownym kliknięciu – znika. Gdybyśmy chcieli, żeby nasze okienko pokazywało się otwarte i zamykało dopiero po kliknięciu, musimy dodać atrybut open do znacznika <details>:

<div id="latajace_okienko" class="entry-meta" style="text-decoration: none; font-size: 1em; margin-right: 3em; background-color: #ed0cf4; padding: 0.5em; text-align: center;">
   <details style="margin: 0; padding: 0;" open> 
      <button type="button">Jestem przyciskiem!</button>
   </details>
</div>

Tag <summary> – tytuł rozwijalnego okienka

Jeśli chcemy zmienić tekst “Szczegóły” na jakiś inny, trzeba dodać znacznik <summary> wewnątrz <details>, o tak:

<div id="latajace_okienko" class="entry-meta" style="text-decoration: none; font-size: 1em; margin-right: 3em; background-color: #ed0cf4; padding: 0.5em; text-align: center;">
   <details style="margin: 0; padding: 0;" open> 
      <summary>Tytuł</summary>
      <button type="button">Jestem przyciskiem!</button>
   </details>
</div>

Teraz jednak zniknęła nam strzałka pokazująca, czy element jest otwarty, czy zamknięty. Żeby ją przywrócić, trzeba dodać do znacznika <summary> atrybut style=”display: list-item;”

<div id="latajace_okienko" class="entry-meta" style="text-decoration: none; font-size: 1em; margin-right: 3em; background-color: #ed0cf4; padding: 0.5em; text-align: center;">
   <details style="margin: 0; padding: 0;" open> 
      <summary style="display: list-item;">Tytuł</summary>
      <button type="button">Jestem przyciskiem!</button>
   </details>
</div>

W ten sposób stworzyliśmy pływające rozwijalne okienko. Pobaw się nim teraz. Pozmieniaj położenie, kolory, zawartość. Sprawdź, co da się zrobić, a co nie. Gdybyś miał jakieś pytania – pisz w komentarzu.

* * *

Zwrócono mi uwagę, że kod stworzony w ten sposób trzeba by kopiować do każdego wpisu z osobna i że lepszy byłby do tego plugin (wtyczka). Oczywiście można używać wtyczek, ale one zajmują więcej pamięci. Mój kod można wykorzystać do stworzenia jednorazowego okienka w pojedynczym wpisie. Można też wkleić go w odpowiednim miejscu szablonu strony, aby okienko pojawiało się w każdym wpisie lub w określonych kategoriach wpisów. Ja tak właśnie zrobiłam. Jednak ze względu na wielość szablonów nie będę pisała instrukcji jak to zrobić – musi Ci wystarczyć informacja, że kodu można użyć wszędzie tam, gdzie można użyć HTML-a.

Kolejny zarzut, jaki się pojawił, to że niektóre atrybuty wpisałam w HTML zamiast wszystkie dać w CSS. Zrobiłam tak z dwóch powodów. Jeden to taki, że chciałam pokazać, że atrybuty można wrzucać i tu, i tu. Drugim powodem było to, że chciałam, żeby mój kod był uniwersalny i żebym mogła go wykorzystywać w wielu miejscach bez modyfikacji. Dlatego te atrybuty, które miały dotyczyć wszystkich okienek, są w CSS, a te, które miały dotyczyć tego konkretnego – w HTML.

Kulisy powstania książki “JavaFX 9. Tworzenie graficznych interfejsów użytkownika”

Wydawnictwo Helion właśnie wydało kolejną książkę. Żadna niespodzianka, prawda? Książka nosi tytuł “JavaFX 9. Tworzenie graficznych interfejsów użytkownika”. Też mało zaskakujący, jeśli zna się profil wydawnictwa. Co więc jest w tej książce niezwykłego? To znaczy oprócz tego, że jest świetna i pozwala w łatwy sposób nauczyć się programować? W sumie nic… poza tym, że jest mojego i mojego taty autorstwa 🙂 .

Pracowaliśmy nad nią przez wiele pełnych wyrzeczeń miesięcy. I oto wreszcie jest! I można ją zamówić w przedsprzedaży na tej stronie. Można też przeczytać darmowy fragment książki, żeby się przekonać, czy faktycznie jest dla Was interesująca.

Jak to się zaczęło

Pomysł książki narodził się bardzo dawno temu, chyba jeszcze w 2015 roku, w głowie mojego taty. Długi czas sobie tam siedział, powoli moszcząc się i urządzając, wypływał od czasu do czasu w rozmowach, ale nie spieszyło mu się. Aż wreszcie, mniej więcej na wiosnę 2017 roku, dojrzał. Książka zaczęła powstawać, początkowo jedynie jako zestaw kodów autorstwa taty. Wtedy wydawało nam się, że to właśnie jest najgorsza część roboty. Tata napisał kody i krótkie, ogólne ich opisy, zarysy zagadnień, które miały zostać poruszone. Jest tego dużo, jak możecie się przekonać, więc prace trochę trwały. Zaplanował też strukturę książki, choć potem trochę ją jeszcze zmienialiśmy.

Wreszcie, mniej więcej w połowie kwietnia 2017 roku, surowe teksty i kody trafiły do mnie. Jednocześnie skontaktowaliśmy się z wydawnictwem Helion, proponując im wydanie naszej książki. Odzew był bardzo szybki i pozytywny – piszcie! Wydawnictwo chciało wiedzieć, kiedy książka będzie gotowa. Przewidywałam, że zajmie to sporo czasu – trzeba było jeszcze napisać większość tekstu, a także sformatować go zgodnie z wymogami wydawnictwa, poza tym wiedzieliśmy już, że na jesieni wyjdzie Java 9 i będzie trzeba poprawić i uzupełnić kody (pierwowzór książki powstał jeszcze w Javie 8), więc podałam jako termin koniec 2017 roku. Wydawało mi się, że to duży zapas czasowy. Jakże się myliłam!

Swoją część pracy rozpoczęłam mniej więcej w tym samym czasie, w którym skontaktowaliśmy się z wydawnictwem. Początkowo nie przykładałam się bardzo, bo wydawało mi się, że jest dużo czasu, poza tym była piękna pogoda, więc uznałam, że intensywniej wezmę się za to na jesieni.

Wyścig z czasem

Na jesieni okazało się, że czasu jest za mało! Rozpoczął się wyścig z czasem. Wymienialiśmy z tatą od kilkunastu do kilkudziesięciu połączeń dziennie. Roboty był ogrom. Musiałam zrozumieć napisane kody, czasem je przerobić lub zarządzić ich przerobienie. Ale przede wszystkim napisać i uporządkować tekst – tak, żeby był czytelny i zrozumiały, żeby nie mający doświadczenia czytelnik wiedział, jak i po co używać danej konstrukcji. Wpleść w ten tekst kody tak, by wyjaśniały, co trzeba, a jednocześnie były zgodne z wymogami wydawnictwa. I wreszcie sformatować to wszystko, co samo w sobie też zajmowało sporo czasu.

Były momenty, kiedy oboje mieliśmy dość. Kiedy ja płakałam, a tata rzucał w gniewie słuchawką. Kiedy krzyczałam – ze zmęczenia i frustracji – a tata próbował mnie uspokoić. Ale prace posuwały się naprzód. Zbyt wolno. Termin gonił. W listopadzie rozmawiałam z szefem pod kątem ewentualnego urlopu bezpłatnego, bo coraz bardziej byłam przekonana, że nie zdążę. Rezygnowałam niemal ze wszystkiego, odrzucałam zaproszenia od przyjaciół, zaniedbywałam swoje zwierzaki, skracałam rozmowy telefoniczne, jedyną przyjemnością, na jaką sobie pozwalałam, były warsztaty teatralne, warsztaty improwizacji i bibliodrama. Miałam wyrzuty sumienia, ale musiałam mieć jakąś odskocznię.

To była wyczerpująca, ciężka praca, zajmująca każdą wolną chwilę. Soboty, niedziele, wieczory. Po ośmiu godzinach siedzenia przy komputerze wracałam do domu, by znów siąść przed komputerem do pracy. Nie powtórzyłabym tego, nie dałabym rady. Ale było warto.

Początek końca, czyli demoniczny korektor

Pod koniec grudnia, kilka dni przed terminem (dzięki rezygnacji z dołączenia do książki pewnych dodatkowych elementów) wysłałam finalną wersję książki do wydawnictwa. Myślałam, że to koniec problemów. Ale znów się myliłam.

Wymiana maili z przedstawicielką wydawnictwa przebiegała pomyślnie i bezproblemowo. Problemy zaczęły się dopiero, kiedy dotarliśmy do etapu korekty. Korektor bardzo mi się naraził, od samego początku. Wysłał mi teksty do korekty w poniedziałek. Tego samego dnia napisałam mu grzecznie, że sprawdziłam, ile dałam radę, a resztę doślę w piątek i w weekend (kolejne trzy dni miałam wracać bardzo późno). A on, że nie mogę, bo on ma termin i że zaraz wyśle mi jeszcze drugą połowę materiałów. Cóż… nie miałam zamiaru rezygnować dla niego ze swoich planów i spraw ani zarywać nocy (i tak już zbyt krótkich), więc napisałam do wydawnictwa, że proszę o przesunięcie mu terminu, skoro się nie wyrabia. Na co uzyskałam grzeczną odpowiedź, że oczywiście, mam pracować w swoim tempie i nie przejmować się nadgorliwym panem, który najwyraźniej nie otrzymał dokładnych informacji o zasadach współpracy.

Nie wiem, czy był to efekt tej kłótni, czy osobowości korektora, ale to nie był koniec problemów. Korektor uparł się, że musi dokonać jak najwięcej zmian, wobec tego robił dziwne rzeczy w rodzaju zamiany wszystkich “stworzyć” na “utworzyć” i odwrotnie – w miejscach, gdzie nie było to niczym uzasadnione. Dwukrotnie dokonał sobie samodzielnej zmiany kodu, który w efekcie stracił całkowicie sens i przestał się kompilować (przestawił nawiasy, usunął słowko new w deklaracji nowego obiektu itp.). Na szczęście sprawdzałam tekst odesłany mi po korekcie, obserwując wszystkie zmiany, a nie jedynie przeglądając komentarze. Nie mam pewności, czy czegoś nie przepuściłam, bo byłam już zmęczona, a wiadomo, że uwaga wtedy szwankuje. Ale mam nadzieję, że nie.

Nareszcie koniec!

I wreszcie nadszedł dzień, kiedy mogłam odetchnąć z ulgą. Książka była gotowa. Pozostały już tylko drobnostki, w postaci przejrzenia gotowej makiety książki czy zaakceptowania stworzonej przez grafika okładki. Książka jest już dostępna w przedsprzedaży na stronie Helionu. Bardzo ją Wam polecam. Mimo że dotyczy Javy 9, jest w pełni kompatybilna z Javą 10, która została niedawno udostępniona. Wiele godzin mojej i taty pracy nie poszło na marne – książka jest napisana przystępnym językiem, tłumaczy zagadnienia w prosty, jasny sposób i pozwala szybko nauczyć się korzystania z funkcjonalności JavaFX. Można ją traktować jako podręcznik, czytając krok po kroku, ale też nic nie stoi na przeszkodzie, by korzystać z niej, szukając konkretnych zagadnień. Było ciężko, ale efekt naprawdę wart jest polecenia.

Nowe wiaderko, czyli jak zaktualizować Android Studio

Od czasu do czasu w Android Studio pojawiają się okienka takie jak poniższe:

Dymek aktualizacji z tytułem: Platform and plugin updates i linkiem do słowa update

Oznacza to, że pojawiła się nowa aktualizacja Android Studio albo elementów SDK Androida (jeśli nie pamiętasz, co to jest, zajrzyj do wpisu o uruchamianiu Android Studio. Żeby tę nową aktualizację zainstalować, naciśnij na niebieski link ze słowem “Update”. Otworzy Ci się okienko informujące, co zostanie zaktualizowane, o takie:

okienko Platform and Plugin updates z przyciskami Update Now, Release Notes, Ignore This Update i Remind Me Later

Jeśli klikniesz na “Release Notes”, będziesz mógł przyjrzeć się dokładniej, co się zmieniło. Oprócz tego możesz aktualizację zignorować (przycisk “Ignore This Update”) – wówczas ta aktualizacja nie pokaże Ci się już nigdy więcej jako wyskakujące okienko (ale wciąż będziesz mógł wykonać ją ręcznie). Kolejną opcją jest odłożenie aktualizacji (przycisk “Remind me later”) – dzięki temu informacja o aktualizacji pojawi się ponownie przy kolejnym uruchomieniu Android Studio. I wreszcie – możesz po prostu od razu zainstalować aktualizację, klikając “Update Now”.

Po wybraniu tej ostatniej opcji otworzy Ci się kolejne okienko:

Okienko SDK Quickfix Installation z treścią licencji (Terms And Conditions). Po lewej stronie drzewo z listą kolejnych licencji. Na dole radiobuttony Decline (zaznaczony) i Accept oraz przyciski Previous (nieaktywny), Next (nieaktywny), Cancel i Finish (nieaktywny)

W tym okienku będziemy akceptować kolejne licencje. Oczywiście wypadałoby je najpierw chociaż przejrzeć 😉 Kliknij w białe kółeczko obok słowa “Accept” w dole okna. Teraz kolejno wybierz pozostałe elementy z listy po lewej stronie. Wystarczy wybrać te główne. Na każdy z nich trzeba kliknąć i wybrać opcję “Accept”. Kiedy zaakceptujesz już wszystkie, przycisk “Next” stanie się aktywny, jak na poniższym obrazku:

Okienko SDK Quickfix Installation z treścią licencji (Terms And Conditions). Po lewej stronie drzewo z listą kolejnych licencji. Na dole radiobuttony Decline i Accept (zaznaczony) oraz przyciski Previous (nieaktywny), Next, Cancel i Finish (nieaktywny)

Kliknij na “Next”. Otworzy się okienko podobne do poniższego:

Okienko Component Installer z paskiem postępu pobierania i przyciskami Background, Previous (nieaktywny), Next (nieaktywny), Cancel i Finish (nieaktywny)

Teraz pozostaje Ci tylko czekać. To może potrwać krótko albo długo – wszystko zależy od wielkości aktualizacji. Pasek postępu może długo stać w miejscu albo wielokrotnie cofać się do początku – nie przejmuj się tym. Poczekaj cierpliwie, aż przycisk “Finish” stanie się aktywny. Możesz kliknąć przycisk “Background” – powinien on sprawić, że okno zniknie, a pobieranie będzie się odbywało w tle. Jednak nie polecam jego naciskania – kiedy próbowałam go użyć, aplikacja po prostu się zawiesiła i konieczny był reset Android Studio.

Jeśli w trakcie instalacji pojawią się jakieś dodatkowe okna z ustawieniami, co się czasem zdarza, w większości przypadków najbezpieczniej pozostawić je bez zmian, klikając “Next” bądź “Finish”. No chyba że wiesz co robisz wprowadzając daną zmianę 🙂 Kiedy wreszcie aktualizacja się zakończy, kliknij przycisk “Finish”.

Okienko Component Installer z pełnym paskiem postępu pobierania (done) i przyciskami Background (nieaktywny), Previous (nieaktywny), Next (nieaktywny), Cancel (nieaktywny) i Finish

W kolejnej lekcji przyjrzymy się dokładniej stworzonemu w poprzedniej lekcji programowi i spróbujemy go zmodyfikować, a potem uruchomić. Na razie możesz wyłączyć aplikację, klikając krzyżyk w górnym rogu okna albo wybierając z menu File -> Exit. Jeśli pojawi Ci się pytanie “Are you sure you want to exit Android Studio?”, potwierdź chęć wyjścia, klikając “Exit”.

Nasza pierwsza babka z piasku – tworzymy pierwszą aplikację na Androida

Teraz, kiedy już zainstalowaliśmy i przygotowaliśmy nasze środowisko, możemy nareszcie stworzyć naszą pierwszą aplikację 🙂

Tworzymy nowy projekt

Wyszukaj Android Studio. Jeśli nie wiesz, jak to zrobić, zajrzyj do wpisu o instalacji środowiska, gdzie znajdziesz instrukcję – tylko tym razem musisz szukać słów “Android Studio”. Uruchom aplikację, klikając na nią. Otworzy Ci się okienko takie, jak widzisz poniżej:

Ekran startowy Android Studio z zaznaczoną pozycją 'Start a new Android Studio Project'

Pierwsza, zaznaczona domyślnie na niebiesko pozycja, służy do stworzenia nowego projektu. Pozostałe pozwalają na różne sposoby otworzyć istniejący już projekt. O tym będziemy jeszcze mówić w przyszłości, na razie wybieramy “Start a new Android Studio project”, klikając na tym właśnie napisie.

Powinieneś zobaczyć następujący ekran:

Ekran 'New Project' z polami 'Application name' (uzupełnione domyślnie tekstem 'My Application'), 'Company domain' (uzupełnione tekstem: 'ula.example.com'), 'Package name' i obok wpisane na szaro 'com.example.ula.myapplication'. Poniżej niezaznaczony checkbox 'Include C++ support'. Trochę niżej pole 'Project location' z wpisaną ścieżką. Na dole przyciski Previous (nieaktywny), Next, Cancel, Finish (nieaktywny).

Pola są już wypełnione, ale trochę je zmienimy. W polu “Application Name” wpisujemy nazwę, którą chcemy nadać naszej aplikacji. Nie powinna być zbyt długa, ale mogą w niej być polskie litery, spacje albo myślniki. To jest ta nazwa, która pojawi się pod ikonką naszej aplikacji, kiedy już ją uruchomimy na telefonie. W informatyce pierwsza aplikacja zwykle nazywa się “Hello world”, ale my nazwijmy ją sobie po polsku – “Witaj”. Wpisz tę nazwę w pole “Application Name”.

Domena firmy a nazwa pakietu

Kolejne pole, “Company domain”, jest przeznaczone na nazwę firmy, która publikuje daną aplikację. Na razie wpisz tu po prostu swoje imię, najlepiej z małej litery. Zauważ, że kiedy zmieniasz tekst w tym polu, zmienia się też szary tekst poniżej, obok napisu “Package name”. Ta wartość jest bardzo ważna, jeśli tworzymy aplikację, którą będziemy chcieli umieścić w sklepie Google Play, ponieważ stanie się częścią linka, po którym będzie można aplikację wyszukać. Na razie nie jest dla nas istotna. Można ją zmienić, klikając niebieski przycisk “Edit” po prawej stronie. Nie wolno w niej używać innych znaków niż litery, cyfry, kropki i dolne podkreślniki. Zresztą jeśli spróbujesz wpisać tam niewłaściwe wartości, aplikacja ostrzeże Cię za pomocą czerwonego komunikatu w dole okna. Zostawmy to pole niezmienione.

Wsparcie C++ nas nie interesuje, będziemy programować w typowym dla Androida języku czyli w Javie, dlatego zostawiamy checkbox “Include C++ support” niezaznaczony.

Lokalizacja projektu

Ostatnie pole, “Project location”, pozwala na wybranie miejsca na dysku, w którym będzie przechowywana nasza aplikacja. Możesz je zostawić niezmienione albo wybrać inne, klikając przycisk z trzema kropkami po prawej stronie pola. Ja lubię trzymać swoje aplikacje w jednym miejscu, dlatego zmieniłam sobie miejsce przechowywania aplikacji na swoje własne.

Po zmianach Twój ekran powinien wyglądać podobnie do tego:

Ekran 'New Project' z polami 'Application name' (uzupełnione tekstem 'Witaj'), 'Company domain' (uzupełnione tekstem: 'ula'), 'Package name' i obok wpisane na szaro 'ula.witaj'. Poniżej niezaznaczony checkbox 'Include C++ support'. Trochę niżej pole 'Project location' z wpisaną ścieżką. Na dole przyciski Previous (nieaktywny), Next, Cancel, Finish (nieaktywny)

Kliknij przycisk “Next”.

Wybór wersji Androida

Ekran 'Target Android Devices' z kilkoma checkboxami, zaznaczony tylko 'Phone And Tablet'. W polu wyboru wybrane 'Minimum SDK: API 15: Android 4.0.3 (IceCreamSandwich). Na dole przyciski Previous, Next, Cancel, Finish (nieaktywny).

Na tym ekranie będziemy wybierać, w jakich wersjach Androida aplikacja ma się uruchamiać. Zostawimy tu wartości domyślne. Zaznaczona jest pozycja “Phone and tablet”, a więc nasza aplikacja będzie działała na telefonach i na tabletach. Pozycja “Wear” pozwala stworzyć aplikację na zegarki z Androidem, “TV” – na telewizory, a “Android Auto” – dla samochodów posiadających system Android. W naszym kursie skupimy się wyłącznie na aplikacjach na telefony i tablety, dlatego po prostu kliknij “Next”. Może Ci się pojawić ekran pobierania – jeśli tak się stanie, odczekaj aż skończy i ponownie kliknij “Next”.

Wybór typu aktywności

Zobaczysz okienko, pozwalające wybrać typ aktywności:

Okienko 'Add Activity To Mobile', pozwalające na wybór rodzaju aktywności z kilku podanych. Zaznaczone 'Empty Activity'. Na dole przyciski Previous, Next, Cancel, Finish (nieaktywny).

Aktywność (Activity) jest to podstawowy element pozwalający na działanie aplikacji. O jej znaczeniu i poszczególnych typach powiemy sobie w przyszłości, na razie pozostaw zaznaczony typ “Empty Activity” i kliknij “Next”. Pojawi się ekran pozwalający na nadanie nazw stworzonym plikom:

Ekran 'Customize the Activity. Pole 'Activity Name', domyślnie uzupełnione tekstem 'MainActivity', poniżej zaznaczony checkbox 'Generate Layout File', pole 'Layout Name' z wpisanym tekstem 'activity_main', poniżej zaznaczony checkbox 'Backwards Compatibility (AppCompat)'. Na dole przyciski Previous, Next (nieaktywny), Cancel, Finish.

O samych aktywnościach również jeszcze sobie powiemy – na razie wystarczy, jeśli będziecie wiedzieć, że aktywność jest miejscem, gdzie programuje się działania aplikacji. Główna aktywność aplikacji (bo może ich być kilka) zwyczajowo nosi nazwę MainActivity, dlatego zostawimy ją domyślną (mimo że można ją zmienić). Ważne jest, żeby w tym polu nie dawać spacji i zaczynać nazwę z wielkiej litery – nakazują to zasady dobrego tworzenia kodu. Nazwy zwyczajowo nadawane są po angielsku, ale nic nie stoi na przeszkodzie, żeby używać polskich.

Drugie pole, “Layout Name”, odpowiada za nazwę pliku, w którym będzie się znajdować graficzna część aplikacji. Przy tworzeniu kolejnych programów będziemy ją zmieniać, na razie jednak nie ma takiej potrzeby, więc ją również zostawimy domyślną.

Pole “Backwards Compatibility” pozwala na używanie w aplikacji kodu zrozumiałego zarówno dla starszych, jak i nowszych wersji Androida – pozostawimy je zaznaczone. Gdybyśmy je odznaczyli, musielibyśmy w niektórych przypadkach pisać różne kody dla różnych wersji systemu.

Kliknij “Finish”.

Czekamy, aż projekt się stworzy

Okienko startowe Android Studio, ponad nim pasek postępu.

Teraz trzeba będzie trochę poczekać – Android Studio musi stworzyć aplikację według wytycznych, które podaliśmy mu w poprzednich krokach. Nie denerwuj się, to może trwać dosyć długo. W końcu powinien Ci się pojawić ekran taki jak poniżej:

Otwarty projekt Android Studio. Po prawej drzewko projektów. Na środku okienko 'Tip of the day'.

Zamknij okienko “Tip of the day”, klikając “Close” albo krzyżyk w jego górnym rogu. W dolnym prawym rogu ekranu zobaczysz okienko z tekstem “Help improve Android Studio[…]”. Jeśli klikniesz niebieski napis “I agree”, do zespołu tworzącego Android Studio będą wysyłane anonimowe informacje o tym, w jaki sposób korzystasz z aplikacji. Jeśli nie chcesz udostępniać im tych informacji, kliknij “I don’t agree”. Ja zwykle wolę nie udostępniać więcej danych, niż to konieczne, nawet jeśli są anonimowe.

A w kolejnej lekcji…

W kolejnej lekcji dowiemy się, jak zaktualizować elementy Android Studio jeśli zajdzie taka potrzeba. Na razie możesz wyłączyć aplikację, klikając krzyżyk w górnym rogu okna albo wybierając z menu File -> Exit. Jeśli pojawi Ci się pytanie “Are you sure you want to exit Android Studio?”, potwierdź chęć wyjścia, klikając “Exit”.

Pierwsze wejście do piaskownicy, czyli uruchamiamy Android Studio

Teraz wreszcie uruchomimy naszą piaskownicę 🙂 . Jeśli na koniec poprzedniej lekcji odznaczyłeś uruchomienie aplikacji od razu, musisz ją wyszukać – albo za pomocą wyszukiwarki właściwej dla Twojego systemu, tak jak opisywałam to w poprzednim wpisie, albo po prostu odnajdując na liście programów aplikację Android Studio – i kliknąć w nią, żeby ją uruchomić.

Natomiast jeśli trafiłeś tu od razu po wykonaniu kroków z poprzedniej lekcji, wystarczy, że chwilkę poczekasz.

Import wcześniejszych ustawień

Aplikacja spyta Cię, czy chcesz zaimportować wcześniejsze ustawienia. Jeśli będziesz ją w przyszłości aktualizował, wybierzesz pierwszą opcję. Teraz jednak nie masz żadnych wcześniejszych ustawień, więc pozostaw zaznaczoną drugą opcję, tak jak na obrazku poniżej, i kliknij “Ok”.

Okienko pozwalające wybrać czy zaimportować wcześniejsze dane (pierwsza opcja), czy nie (druga opcja). Na dole przyciski OK

Zobaczysz logo aplikacji:

To może chwilkę potrwać. Aplikacja jest duża i uruchomienie się zajmuje jej trochę czasu, więc bądź cierpliwy. Nic się nie zawiesiło! 🙂

Konfiguracja i personalizacja aplikacji

Kiedy pojawi Ci się poniższe okienko, kliknij “Next”. Będziemy teraz konfigurować aplikację, czyli dostosujemy ją do naszych potrzeb – tak, żeby było nam jak najwygodniej.

Okienko informujące że dalej będzie się konfigurować aplikację. Przyciski Previous (nieaktywny), Next, Cancel i Finish (nieaktywny).

Na samym początku musimy zdecydować, czy chcemy mieć większą możliwość personalizacji aplikacji, czy mniejszą. Ponieważ robimy to razem – wybierzmy większą. Jak się bawić, to się bawić 😉 .

Okienko Install Type, pozwala wybrać opcję Standard lub Custom. Przyciski Previous, Next, Cancel, Finish (nieaktywny)

Zaznacz drugą opcję – “Custom”, tak jak na obrazku powyżej – i kliknij “Next”.

Na początek wybierzemy, jak będzie wyglądało okienko, w którym będziemy pisać kod. Możesz sam wybrać, które Ci się bardziej podoba. Ja osobiście wolę białe, ale niektóre osoby twierdzą, że przy czarnym tle wzrok się mniej męczy. Sam zdecyduj.

Okienko Select UI Theme, pozwalające wybrać wygląd okna z kodem. Dwa radiobuttony IntellIJ (jasny) i Dracula (ciemny). Przyciski Previous, Next, Cancel, Finish (nieaktywny)

Zaznacz wybrany wygląd i kliknij “Next”. Wiem, strasznie dużo tego klikania “Next”… ale już niedługo skończymy 🙂 .

Aktualizacja aplikacji

Teraz musimy zaktualizować SDK i kilka innych rzeczy. Tak jak już mówiłam, SDK to taki jakby słownik dla komputera – ten krok jest czymś w rodzaju uczenia komputera najnowszych językowych zwrotów. Oprócz tego instalujemy też aktualizację poprawiającą wydajność oraz nasz wirtualny telefon – ostatnią opcję prawdopodobnie będziesz musiał sam zaznaczyć, ponieważ domyślnie jest odznaczona. Upewnij się, że ekran wygląda tak jak na obrazku poniżej i kliknij “Next” (tak… znowu).

Okienko SDK Components Setup. Zaznaczone wszystkie checkboxy. Przyciski Previous, Next, Cancel, Finish (nieaktywny)

Jeśli przy instalacji nie wybrałeś opcji instalacji “Android Virtual Device”, poniższy ekran może Ci się wcale nie pojawić, bo teraz będziemy wybierać, ile miejsca w pamięci przeznaczamy na uruchamianie naszego wirtualnego telefonu. Przy tej opcji lepiej nie kombinować – zostaw ją tak, jak Ci się pojawi, nawet jeśli wartości będą inne niż u mnie. Znów kliknij “Next”.

Okienko Emulator Settings z suwakiem pozwalającym dostosować ilość miejsca. Przyciski Previous, Next, Cancel, Finish (nieaktywny)

Powinieneś zobaczyć ekran z podsumowaniem dokonanych przez Ciebie wyborów. Kliknij “Finish”, żeby rozpocząć pobieranie aktualizacji, które zaznaczyliśmy wcześniej.

Okienko Verify Settings, prezentujące dotychczas wybrane ustawienia. Przyciski Previous, Next (nieaktywny), Cancel, Finish.

To może potrwać dość długo. Jeśli chcesz, możesz kliknąć na przycisk “Show Details”, będziesz wtedy widział, który plik komputer pobiera w tej chwili. Ale nie warto czekać, siedząc przy komputerze – zrób sobie herbatę, poczytaj książkę, albo pobaw się ze zwierzakiem. Komputer i tak zrobi, co do niego należy 😉 . Znów, tak jak poprzednio, pasek postępu może kilka razy wracać do zera. Może też czasem dość długo wisieć w jednym miejscu – to tylko znaczy, że akurat jest ściągany jakiś większy plik. Bądź cierpliwy – u mnie ten etap trwał mniej więcej cztery godziny, czyli tyle samo, ile ściągnięcie samego Android Studio. Oczywiście wszystko zależy od tego, jak szybki masz internet.

Okienko Downloading Components z paskiem postępu i przyciskiem Show Details. Przyciski Previous (nieaktywny), Next (nieaktywny), Cancel, Finish (nieaktywny)

Kiedy pobieranie wreszcie się skończy, zobaczysz, że przycisk “Finish” stał się aktywny. Kliknij go.

Okienko downloading Components z zakończonym pobieraniem - aktywny przycisk Finish.

Teraz mamy wreszcie wszystko przygotowane i możemy uruchomić naszą piaskownicę.

Okienko startowa Android Studio.

Na razie jednak na tym zakończymy – w kolejnej lekcji będziemy już tworzyć pierwszą aplikację 🙂 . Tymczasem zamknij Android Studio za pomocą krzyżyka w prawym górnym rogu okna. Kiedy uruchomisz ponownie program, zobaczysz właśnie ten ekran.

Nadal przygotowujemy piaskownicę – czyli jak zainstalować środowisko Android Studio

Dzisiaj zainstalujemy sobie aplikację Android Studio, którą ściągnęliśmy w poprzedniej lekcji. Nie bój się – zrobimy to krok po kroku, naprawdę nie da się przy tym niczego zepsuć 🙂 .

Uruchamianie instalatora

Znajdź plik, który ściągnąłeś. Jeśli nie zmieniłeś jego nazwy, powinna zaczynać się od “android-studio” (oczywiście bez cudzysłowów). Jeśli nie pamiętasz, gdzie go zapisałeś, skorzystaj z poniższych linków, wpisując w wyszukiwarkę słowo “android-studio”:
Jak wyszukać plik w Windows 10
Jak wyszukać plik w Windows 8
Jak wyszukać plik w Windows 7
Jak wyszukać plik w Windows XP

Jeśli nie jesteś pewien, jakiego systemu używasz, możesz to sprawdzić korzystając z instrukcji na tej stronie.

Teraz kliknij dwukrotnie znaleziony plik. Na wolniejszych komputerach może się okazać, że trzeba będzie dłuższą chwilę poczekać. Może Ci się wydawać, że nic się nie dzieje – spokojnie, to normalne. Jeśli w ciągu 5 minut nic się nie stanie, spróbuj jeszcze raz.

Na niektórych komputerach może się pojawić prośba o potwierdzenie, że chcesz uruchomić plik. U mnie wygląda to tak:

Okienko z napisem czy chcesz uruchomić ten plik? i dwoma przyciskami - uruchom i anuluj

Jeśli zobaczysz takie lub podobne okienko, kliknij “Uruchom”.

Być może znów będziesz musiał chwilkę poczekać, po czym pojawi się coś takiego:

Okienko z napisem Please wait while Setup is loading... verifying installer: 67%

I wreszcie otworzy się pierwsze okienko instalatora:

Okienko z napisem Welcome to Android Studio Setup, informujące o tym, że najlepiej zamknąć pozostałe aplikacje i że użytkownik zostanie poprowadzony przez proces instalacji. W okienku przyciski Back, Next i Cancel

Wybór składników instalacji

Klinij przycisk “Next”. Przejdziesz do okienka widocznego poniżej:

Okienko choose components, wewnątrz trzy elementy z możliwymi do zaznaczenia checkboxami i ilością wymaganego miejsca. Przyciski Back, Next i Cancel

Upewnij się, że wszystkie pola są zaznaczone.

Element “Android Studio” instaluje naszą piaskownicę – czyli samą aplikację, w której będziemy pisać kod.

“Android SDK” to coś w rodzaju słownika, dzięki któremu komputer będzie rozumiał to, co podamy mu w kodzie – instalując mu to, w pewnym sensie uczysz go nowego języka.

“Android Virtual Device” instaluje komputerowy symulator telefonu – czyli coś, co pozwoli Ci otworzyć sobie na ekranie okienko z wirtualnym telefonem, na którym można będzie instalować aplikacje. Nie będziemy z niego zbyt często korzystać, ponieważ jest bardzo wolny – ale jeśli nie masz telefonu z Androidem, będzie Ci bardzo potrzebny.

O tym, jak sprawdzić, czy masz telefon z Androidem porozmawiamy jeszcze później. W każdym razie jeśli masz zbyt mało miejsca na dysku i jesteś pewien, że posiadasz telefon z Androidem, możesz ten ostatni podpunkt odznaczyć.

Kliknij “Next”.

Licencja i miejsce instalacji

Okienko o tytule Licence Agreement z treścią licencji oraz przyciskami Back, I Agree i Cancel

Teraz musisz zaakceptować licencję. Oczywiście powinieneś ją najpierw przeczytać… Ale jeśli tego nie zrobisz, też się nic nie stanie 😉 . Po prostu kliknij “I Agree”. Otworzy Ci się okienko, w którym będziesz mógł wybrać, gdzie chcesz zainstalować aplikację.

Okienko Configuration Settings, pozwalające wybrać ścieżkę instalacji Android Studio i ścieżkę instalacji Android SDK. Przyciski Back, Next i Cancel

Jeśli wiesz co robisz, możesz zmienić domyślne katalogi – ale zapamiętaj wtedy, jakie podałeś. Najlepiej jednak zostaw pierwszą ścieżkę taką, jaka jest. Drugą natomiast zmienimy, żeby łatwiej nam potem było odnaleźć SDK Androida, które będzie nam dosyć często potrzebne. W drugim polu zmień wartość na: “C:\Android\sdk” (oczywiście bez cudzysłowów). Po zmianie powinno to wyglądać tak:

Okienko Configuration Settings, pozwalające wybrać ścieżkę instalacji Android Studio i ścieżkę instalacji Android SDK. Przyciski Back, Next i Cancel

Znów kliknij “Next”. Zobaczysz okienko podobne do tego:

Okienko o tytule Choose Start Menu Folder i miejscem na wpisanie lub wybranie nazwy. Przyciski Back, Install, Cancel

W Twoim mogą być wymienione zupełnie inne nazwy – nie przejmuj się tym. Nic nie zmieniaj, po prostu kliknij “Install”. Aplikacja zacznie się instalować.

Okienko z paskiem postępu i napisem Installing. Przycisk Show Details, pozostałe przyciski nieatywne

Czekamy…

Teraz będzie trzeba trochę poczekać. Zielony pasek może kilka razy cofać się do zera. Bądź cierpliwy. Prędzej czy później skończy i zobaczysz ekran taki jak poniżej:

Okienko z paskiem postępu i napisem Completed. Przycisk Show Details i Next, pozostałe przyciski nieatywne

Kliknij “Next”.

Okienko Completing Android Studio Setup. W środku zaznaczony checkbox Start Android Studio. Przycisk Finish, pozostałe nieaktywne

Jeśli z obejrzeniem aplikacji wolisz poczekać do kolejnej lekcji – możesz odznaczyć “Start Android Studio”, wtedy kliknięcie “Finish” spowoduje po prostu zamknięcie instalatora. Ale… chyba jesteś trochę ciekaw swojej nowej piaskownicy, prawda? 🙂 Więc zostaw “Start Android Studio” zaznaczone i kliknij “Finish”.

Co dalej? Zajrzyj do kolejnej lekcji.

Przygotowujemy piaskownicę – czyli jak pobrać środowisko Android Studio

Jeśli chcesz robić babki z piasku, potrzebujesz plaży, albo przynajmniej piaskownicy, prawda? A żeby tworzyć aplikacje, potrzebujesz środowiska. W języku informatycznym funkcjonuje nawet słowo “sandbox” (ang. piaskownica) dla określenia wydzielonej przestrzeni, w której można uruchamiać aplikacje (zob. wikipedia). A my zrobimy sobie taką mini-piaskownicę do tworzenia naszych aplikacji.

Przepraszam Cię, jeśli uznasz, że opisuję wszystko zbyt szczegółowo. Celowo robię to w taki sposób, żeby instrukcję zrozumiał nawet najbardziej początkujący użytkownik komputera.

Pierwsze, co musimy zrobić, to zainstalować aplikację Android Studio, w której będziemy pisać kod. Kliknij teraz w link poniżej, żeby ją ściągnąć.

Pobierz Android Studio

Otworzy Ci się strona, na której zobaczysz duży, zielony przycisk, o taki:

Okienko o tytule Android Studio, the Official IDE for Android i dużym zielonym przyciskiem z napisem Download Android Studio

Kliknij na niego. Pojawi Ci się okienko, takie jak poniżej. Powinieneś przeczytać uważnie tekst licencji – ale oboje wiemy, że Ci się nie chce 😉 Na szczęście nikt nie będzie wiedział, czy to zrobiłeś, czy nie. Gwarantuję Ci, że ta aplikacja jest bezpieczna, ale w przypadku nieznanych aplikacji lepiej nie pomijaj tego kroku, bo może się nagle okazać, że trzeba będzie płacić za coś, czego wcale nie chciałeś.

Okienko o tytule Download Android Studio. Terms And Conditions. Na dole niezaznaczony checkbox I have read and agree with the above terms and condition. Poniżej nieaktywny przycisk Download Android Studio For Windows

Zaznacz teraz kwadracik, który jest na dole strony, obok napisu “I have read and agree with the above terms and conditions”. Szary przycisk zrobi się niebieski i będzie można go kliknąć. Zrób to.

Zaznaczony checkbox I have read and agree with the above terms and condition. Poniżej aktywny przycisk Download Android Studio For Windows

Teraz zapisz plik w miejscu, gdzie będziesz umiał go znaleźć – na przykład na pulpicie. Zapamiętaj dokładnie miejsce, gdzie go zapisałeś. U mnie okienko zapisu wygląda jak poniżej, ale u Ciebie może to wyglądać trochę inaczej, w zależności od tego jakiej przeglądarki internetowej używasz i jaki masz system na komputerze. W każdym razie albo pojawi się takie okienko, albo plik po prostu się zapisze w domyślnej lokalizacji.

Standardowe okienko zapisu pliku z Windows

Jeśli nie wiesz, jak pobrać plik, skorzystaj z jednej z poniższych instrukcji. Jeśli nie wiesz, z jakiej przeglądarki korzystasz, spójrz na ikonkę obok linka i wybierz tę, która jest najbardziej podobna do Twojej.
Pobieranie pliku – Microsoft Edge lub Internet Explorer
  – Pobieranie pliku – Chrome
  – Pobieranie pliku – Mozilla Firefox
  – Pobieranie pliku – Opera

Teraz możesz iść zrobić sobie herbatę, pobawić się z psem, pogłaskać kota albo – jak przystało na humanistę – poczytać książkę. Pobieranie pliku trochę potrwa – nie wiem, ile, to zależy od tego, jak szybki masz internet i jak obciążone jest łącze (to znaczy – ilu ludzi siedzi w tej chwili w internecie). U mnie są to 4 godziny.

Jak zainstalować ściągniętą aplikację, opowiem Wam w kolejnym wpisie 🙂