Skip to content

Latest commit

 

History

History
278 lines (164 loc) · 27.1 KB

File metadata and controls

278 lines (164 loc) · 27.1 KB

Tweet

Discord

Wprowadzenie

To tutorial, który pomoże początkującym kontrybutorom uczestniczyć w prostym i łatwym projekcie.

Ten tutorial jest również dostępny w innych językach (tłumaczenia mile widziane).

Cele

  • Wgraj swoją pierwszą kontrybucję w projekt open source.
  • Poczuj się bardziej komfortowo korzystając z GitHub.

Dla kogo to jest?

  • Dla początkujących. Jeśli wiesz jak napisać i edytować element kotwicy <a href="" target=""></a>, powinieneś być w stanie to zrobić.
  • Dla tych, którzy mają trochę więcej doświadczenia, ale chcą wgrać swoją pierwszą zmianę w projekt open source lub wgrać więcej zmian, aby uzyskać więcej doświadczenia i pewności siebie.

Po co mi to?

Każdy programista, początkujący czy doświadczony, musi korzystać z systemu kontroli wersji Git, a GitHub jest najpopularniejszą usługą hostingową Gita używaną przez wszystkich. To także serce społeczności Open Source. Korzystanie z GitHuba to niezbędna umiejętność. Wgrywanie zmian do projektu zwiększa Twoją pewność siebie i daje Ci coś do pokazania na Twoim profilu na GitHub.
Jeśli jesteś początkującym programistą i zastanawiasz się, czy powinieneś nauczyć się Gita i GitHuba, oto odpowiedź: You Should've Learned Git Yesterday.

Jaką zmianę wgram?

Contributor Card

Wgrasz kartę, jak ta, do strony internetowej projektu. Karta będzie zawierała Twoje imię, nazwę użytkownika na Twiterze, krótki opis i 3 linki do użytecznych zasobów dla programistów, które polecasz.

Stworzysz kopię szablonu karty w pliku HTML i uzupełnisz ją informacjami o sobie.

Indeks Szybkiego Dostpępu

Wgraj swoją zmianę:

Ustawienia

Najpierw przygotujmy się do pracy

  1. Zaloguj się na GitHub. Jeśli nie masz konta, dołącz do GitHub. Przed kontynuowaniem zalecam zapoznanie się z GitHub Hello World tutorial.
  2. Pobierz GitHub Desktop app.
    • Ewentualnie, jeśli czujesz się komfortowo używając Gita w wierszu poleceń, możesz to zrobić (tutaj jest first-contributions, podobny projekt, który może służyć jako przewodnik po potrzebnych poleceniach). LUB
    • Jeśli używasz VS Code ma ono wbudowaną obsługę Git i pozwala robić to, co potrzebujemy, bezpośrednio z edytora.
    • Jednak najprostszym i najłatwiejszym sposobem wykonania tego tutorialu jest GitHub Desktop.

Teraz, gdy wszystko gotowe, przejdźmy do wgrywania zmiany do projektu.



Wgraj swoją zmianę

Zostań kontrybutorem open source w 10 prostych krokach.

Przewidywany czas: Mniej niż 30 minut.

Krok 1: Utwórz fork repozytorium

  • Celem jest wykonanie kopii tego projektu i umieszczenie jej na swoim koncie.
  • Projekt na GitHub jest nazywany repozytorium (repo), a fork jest jego kopią.
  • Upewnij się, że jesteś na głównej stronie tego repozytorium.
  • Kliknij przycisk Fork
Fork
  • Masz teraz pełną kopię projektu na swoim koncie.

Krok 2: Sklonuj repozytorium

  • Teraz chcemy stworzyć lokalną kopię projektu. To jest kopia zapisana na Twoim komputerze.
  • Otwórz aplikację GitHub Desktop. W aplikacji:
  • Kliknij File, a następnie Clone repository
Clone
  • Zobaczysz listę swoich projektów i forków na GitHubie.
  • Wybierz <twoja-nazwa-użytkownika>/Contribute-To-This-Project.
  • Kliknij Clone
Clone project
  • Sforkowany projekt będzie miał symbol fork po lewej stronie.
  • Twój fork będzie miał nazwę Twojej nazwy użytkownika na GitHub.
your fork
  • Może to chwilę potrwać, ponieważ porjekt zostanie skopiowany na na Twój dysk twardy. Zalecam zachowanie domyślnej ścieżki, jaką jest zwykle ..\Dokumenty\GitHub.
  • Teraz masz lokalną kopię projektu.

Krok 3: Stwórz nową gałąź

  • Po sklonowaniu repozytorium i otwarciu go w GitHub Desktop nadszedł czas, aby utworzyć nową gałąź.
  • Gałąź to sposób na oddzielenie zmian od głównej części projektu nazwanej Master. Na przykład, jeśli coś pójdzie nie tak i nie jesteś zadowolony ze zmian, możesz po prostu usunąć gałąź, a główny projekt nie zostanie zmieniony.
  • Kliknij Current branch
  • Następnie kliknij New
Create branch
  • Nazwij swoją gałąź
  • Kliknij Create branch
Name branch
  • Możesz nazwać ją jak chcesz, ale dlatego, że jest to gałąź, aby dodać kartę z Twoim imieniem do projektu, nazwanie tego twoje-imię-card jest dobrą praktyką, ponieważ jasno określa cel tej gałęzi.
  • Opublikuj swoją nową gałąź na GitHubie
Name branch
  • Właśnie utworzyłeś nową gałąź niezależną od mastera.
  • Przy następnych krokach upewnij się, że pracujesz na tej gałęzi. Nazwę gałęzi, w której się znajdujesz, zobaczysz w górnej środkowej części GitHub Desktop, gdzie jest napisane Current branch.

NIE pracuj na gałęzi master


Krok 4: Otwórz plik index.html

  • Teraz musimy otworzyć plik, który będziemy edytować za pomocą Twojego ulubionego edytora kodu.
  • Znajdź folder projektu na swoim komputerze. Jeśli zachowałeś wartość domyślną, powinno to być coś w stylu twój-komputer > Dokumenty > GitHub > Contribute-To-This-Project
  • Plik index.html znajduje się bezpośrednio w folderze Contribute-To-This-Project.
  • Otwórz edytor kodu (Sublime, VS Code, Atom..etc) i użyj polecenia Open file i znajdź plik index.html w głównym folderze projektu
  • Ewentualnie możesz znaleźć plik na dysku twardym, kliknąć go prawym przyciskiem myszy i otworzyć go w edytorze
Open index file
  • Teraz masz plik, który będziesz edytować, w swoim edytorze i możesz rozpocząć wprowadzanie w nim zmian.

Krok 5: Skopiuj szablon karty

  • Stwórzmy kopię szablonu karty, aby rozpocząć nad nim pracę.
  • W górnej części pliku html, pod sekcjami <head> i <header> znajduje się sekcja oznaczona == TEMPLATE ==
  • Skopiuj wszystko, co znajduje się w czerwonym kwadracie na obrazie, od komentarza Contributor card START do komentarza Contributor card END
Copy card template
  • Wklej całość bezpośrednio pod wskazanym komentarzem
  • Upewnij się, że przed komentarzem, gdzie zaczyna się Twoja karta i po komentarzu, gdzie się kończy, jest jedna linia odstępu. Dobrą praktyką jest, aby nasz kod był jak najbardziej przejrzysty
  • Nigdy nie używaj linterów ani formatorów stylu. Projekt ma konfigurację Prettier
Paste card template
  • To jest teraz Twoja karta, którą możesz dostosowywać i edytować.

Krok 6: Wprowadź zmiany

  • Zaczniemy teraz edytować kod html, zmieniając konfigurowalne pola na naszej karcie.
  • Zastąp 'Name' swoim imieniem
  • Uwaga: Nie zmieniaj class="name"
Change name
  • Wprowadź adres URL swojego konta na Twitterze href="Insert URL here"
  • Wpisz swój nick w polu tekstowym
Change contact
  • Jeśli wolisz użyć kontaktu innego niż Twitter, musisz zmienić ikonę Twittera, <i class="fa fa-twitter"></i>, przechodząc do Font Awesome Icons, wyszukując odpowiedniej ikony i zastępując tylko część fa-twitter nową ikoną, jak na przykład fa-facebook. Następnie wykonaj te same kroki co powyżej.
  • Powiedz nam coś o sobie
  • Pisz krótko i miło. Pomyśl o tym bardziej jak o tweecie niż poście na bloga
Change about
  • Udostępnij społeczności 3 linki do zasobów przydatnych przy tworzeniu stron internetowych
  • Może to być wszystko, wideo, wykład, podcast, artykuł, odniesienie lub narzędzie
  • Jeśli jesteś początkującym, nie krępuj się, podziel się tym, co wiesz, nawet jeśli uważasz, że jest to proste. Zdziwisz się, ile osób na tym skorzysta
Change resources
  • Link: Wstaw link href="tutaj" zastępując #
  • Tytuł: Napisz krótki opis title="tutaj"
  • Nazwa: Wpisz nazwę zasobu w polu tekstowym >here</a>
  • Upewnij się, że zapisałeś wszystkie zmiany.
  • Przetestuj swoje zmiany. TO JEST WAŻNE! Otwórz plik html w swojej przeglądarce (na przykład kilkając na niego dwukrotnie) i zobacz, jak Twoja karta będzie wyglądała na stronie. Sprawdź, czy cała strona nadal wygląda tak samo i nic nie jest zepsute. Kliknij swoje linki i upewnij się, że działają. Otwórz konsolę (Ctrl + Shift + J (Windows / Linux) lub Cmd + Opt + J (Mac)) i sprawdź, czy nie ma komunikatów o błędach.
  • Świetnie, skończyłeś edytować swój kod!! Następne kroki spowodują wysłanie zmin do GitHub, a póżniej wysłanie ich do połączenia z głównym projektem.

Krok 7: Wgraj zmiany

  • Wróć do aplikacji GitHub Desktop.
  • Twoje zmiany zostaną automatycznie dodane do obszaru startowego aplikacji.
  • Oznacza to, że Git zarejestrował wszystkie zapisane zmiany.
  • Widać to w aplikacji. Wszystko, co dodałeś do pliku, będzie zaznaczone na zielono, a usunięte elementy na czerwono.
  • Następny krok nosi nazwę Commit
  • To z grubsza oznacza "potwiedź zmiany"
Commit changes
  • Tak powinien wyglądać nagłowek Github Desktop
  • Zwróć uwagę na symbol fork obok nazwy projektu w Current repository
  • Twoje Current branch będzie miało nazwę, jaką nadałeś mu w kroku 3
Commit changes
  • Aby kliknąć Commit musisz wypełnić pole Summary
  • To wiadomość, wyjaśniająca, co zmieniłeś
  • W tym przypadku rozsądną wiadomością byłoby "Dodanie informacji o mojej karcie"
  • Opcjonalnie możesz dodać bardziej szczegółowy opis Description
  • Kliknij przycisk Commit. Na przycisku pojawi się coś w rodzaju Commit to "nazwa-twojej-gałęzi"
Write commit message and commit

Krok 8: Wyślij zmiany na GitHub

  • Twoje zmiany są teraz zapisane lub wgrane. Ale są one zapisane tylko lokalnie, czyli na Twoim komputerze.
  • Synchronizacja lokalnych zmian z repozytorium na GitHubnazywa się Push. "Wypychasz" zmiany z lokalnego repozytorium do zdalnego repozytorium na GitHub.
  • Kliknij przycisk Push
Push to GitHub
  • Po kilku sekundach operacja jest zakończona i teraz masz dokładnie taką samą kopię tej gałęzi na swoim komputerze jak i na GitHubie.

Krok 9: Wyślij swoje zmiany do zatwierdzenia

  • To jest moment, na który czekałeś; wysłanie Pull Request (PR).
  • Do tej pory cała praca, którą wykonałeś, znajdowała się w forku projektu, który jak pamiętasz, znajduje się na Twoim koncie GitHub.
  • Teraz nadszedł czas, aby wysłać zmiany do głównego projektu, aby zostały z nim połączone.
  • To się nazywa Pull Request, ponieważ prosisz oryginalnego opiekuna projektu, aby "wciągnął" Twoje zmiany do swojego projektu.
  • Przejdź do strony głównej swojego forka na GitHubie (będzie miał ikonę fork i Twoją nazwę użytkownika na górze).
  • W górnej części repozytorium zobaczysz podświetloną wiadomość z zielonym przyciskiem.
  • Kliknij na Compare and pull request
Submit a Pull Request
  • Tak wygląda strona Open a pull request.
  • PAMIĘTAJ, że próbujesz połączyć swoją gałąź z oryginalnym projektem, a nie gałęzią Master.
  • Poniższy obraz pokazuje, jak powinien wyglądać nagłówek Twojej prośby o scalenie.
  • Po lewej stronie znajduje się oryginalny projekt, a po nim gałąź główna. Po prawej jest Twój fork i utworzona przez Ciebie gałąź.
Open a Pull Request
  • Stwórz prośbę o scalenie:
  • Napisz tytuł
  • Dodaj opcjonalne informacje w opisie
  • Kliknij Create pull request
Submit a Pull Request
  • Nie przejmuj się wszystkimi opcjami. Na razie musisz wykonać tylko te trzy kroki.
  • Pozostaw opcję Allow edits from maintainers zaznaczoną.
  • Teraz Pull Request zostanie wysłany do opiekuna projektu. Jak tylko zostanie sprawdzony i zaakceptowany, Twoje zmiany pojawią się na stronie internetowej projektu.

Krok 10: Świętuj!

To wszystko. Zrobiłeś to! Wgrałeś swoją pierwszą kontrybucję w projekt open source na GitHub!

Dodałeś kod do strony internetowej: https://syknapse.github.io/Contribute-To-This-Project.

Twoje zmiany nie będą widoczne od razu; najpierw muszą zostać przejrzane, zaakcetpowane i połączone z projektem przez opiekuna. Po ich połączeniu Twoja karta powinna być widoczna na stronie.

To normalne, że recenzent prosi o zmiany w postaci Pull Request (PR). Potraktuj to jako dobrą praktykę, jeśli Ci się to przytrafi. Miej oko na komentarze i wymagane zmiany. Po wprowadzeniu wymaganych zmian (w swojej gałęzi) wszystko, co musisz zrobić, to wgranie i wysłanie swoich zmian. PR zostanie automatycznie zaktualizowany o nowe zmiany.

Obiecuję, że postaram się jak najszybciej przejrzeć je i scalić z głównym projektem, jendak robię to w wolnym czasię, więc kilkudniowe opóźnienie jest nieuniknione.



Następne kroki

  • Wróć za jakiś, aby sprawdzić, czy Twój PR został złączony z projektem.
  • Powinieneś otrzymać wiadomość e-mail od GitHub, gdy Twoje zmiany zostaną zatwierdzone lub jeśli będą wymagane dodatkowe zmiany. A kiedy PR zostanie ostatecznie połączony z masterem, Twoja karta zostanie dodana.
  • Jeśli uważasz, że ten projekt jest przydatny daj ⭐ gwiazdkę ⭐ u góry strony i Tweet o tym, aby pomóc w rozprzestrzenianiu informacji Tweet.
  • Możesz obserwować mnie i kontaktować się ze mną na Twitterze lub korzystając z tych opcji.
  • Jest to projekt open source, więc oprócz wgrania swojej karty, możesz pomóc w naprawianiu błędów, wprowadzaniu popraw i nowych możliwości. Otwórz problem lub wyślij nowy pull request.
  • Dziękuję za wgrywanie kontrybucji do tego projektu. Teraz możesz śmiało spróbować wgrywać zmiany do innych projektów; szukaj etykiety Good First Issue dla możliwości wgrywania zmian przyjaznych dla początkujących.
  • Szukam również współpracowników, którzy pomogliby mi w recenzowaniu i łączeniu PR. Jeśli chcesz uzyskać bardziej zaawansowaną praktykę Git, wyślij mi wiadomość na Twitterze i przeczytaj przewodnik współpracownika.

Podziękowania

Na ten projekt duży wpływ ma świetny projekt first-contributions Roshana Josseya z jego znakomitym tutorialem.

Jest on również szczególnie zainspirowany przez świetną społeczność #GoogleUdacityScholars The Google Challenge Scholarship: Front-End Web Dev, class of 2017 Europe.

Licencja

Licencja MIT

Powrót na górę ↑