Stwórz aplikację IOS z Swift: 6 kroków

Stwórz aplikację IOS z Swift: 6 kroków

Spisu treści:

Anonim

Pomyśl o tym. Po ukończeniu tego samouczka możesz powiedzieć swoim znajomym, że zbudowałeś aplikację. Tylko mówię.

W tym samouczku poprowadzę Cię przez proces budowania aplikacji na iOS. Po drodze upewnię się, że nauczę Cię teorii i metod stojących za niektórymi koncepcjami związanymi z tworzeniem aplikacji, które wykonujemy, zamiast po prostu mówić ci, żebyś coś zrobił i miał nadzieję, że zrozumiesz. Zacznijmy od tła:

Swift to najnowszy i najlepszy język programowania Apple. W 1985 roku, kiedy Steve Jobs założył komputer NeXT po tym, jak został wyrzucony z Apple (niektórzy mówią), zaczął tworzyć pewne ramy dla swoich komputerów w języku o nazwie Objective-C. Objective-C został stworzony na początku lat osiemdziesiątych przez Brada Coxa i Toma Love, ale później na licencji NeXT. Te struktury ostatecznie przekształciły się w podzbiór Objective-C o nazwie Cocoa. Cocoa było używane przez długi czas w tworzeniu aplikacji dla komputerów Macintosh, ale kiedy Apple otworzyło aplikacje iOS na aplikacje niezależne od Internetu z systemem iOS 2.0, mieli oni programistów używających Objective-C i Cocoa Touch, zorientowanej na dotyk wersji Cocoa do budowania natywnego aplikacje iOS.

Objective-C był w użyciu aż do iOS 8. Wraz z wydaniem iOS 8, Apple wypuścił również nowy Swift, jak zapewne wiesz. Jednak Objective-C może być nadal używany do tworzenia aplikacji iOS na razie. W rzeczywistości nadal używam głównie Objective-C, ponieważ wiele bibliotek jest w nim zapisanych, a Objective-C jest kompatybilny ze starszymi urządzeniami. Swift wprowadza kilka bardzo fajnych nowych funkcji i funkcjonalności, ale na potrzeby tego samouczka zajmiemy się bardzo płytkie nurkowanie w nim. Zacznijmy.

Kieszonkowe dzieci:

Krok 1: Pobierz Xcode

Xcode to nazwa zintegrowanego środowiska programistycznego Apple (IDE). Xcode może być używany do tworzenia aplikacji na iOS i Macintosh. Apple udostępnia to oprogramowanie za darmo, ale programista musi zapłacić 100 USD rocznie, aby zarówno przetestować swoje aplikacje na urządzeniach fizycznych, a nie symulatorów, i publikować aplikacje w App Store. Ponadto Apple obniża o 30% sprzedaż wszystkich płatnych aplikacji. Zalecam przeczytanie trochę o Xcode przed pobraniem: Xcode Link

Najlepszym sposobem uzyskania Xcode'a jest pobranie go ze sklepu z aplikacjami na Maca. Oto link. Niestety Xcode to dość duży program, więc najlepiej przygotuj się na trochę czekania! Możesz przeczytać samouczek, aby upewnić się, że wszystko jest zrozumiałe podczas pobierania.

Krok 2: Zacznijmy!

Kliknij ikonę Xcode. Zostanie wyświetlone okno, jak pokazano na pierwszym zdjęciu. Wybierz „Utwórz nowy projekt Xcode”

Upewnij się, że aplikacja Single View jest wybrana w systemie iOS i kliknij przycisk Dalej. (Zdjęcie 2)

W polu Nazwa produktu wpisz „Swift iPhone App” (zdjęcie 3)

W polu Nazwa organizacji wpisz swoje imię. Nie martw się o identyfikator pakietu. To za przesłanie lub dystrybucję aplikacji, o którą się nie martwimy. (Zdjęcie 3)

Z rozwijanego menu wybierz „Swift”. Jak widać, Objective-C jest nadal opcją. (Zdjęcie 3)

W menu rozwijanym Urządzenia wybierz iPhone'a. (Zdjęcie 4)

Kliknij Dalej i wybierz lokalizację, w której chcesz zapisać folder projektu. (Zdjęcie 5)

Po zrobieniu tego wszystkiego powinien zostać wyświetlony ekran pokazany na obrazku 6.

Na górnym pasku narzędzi po lewej stronie powinny pojawić się słowa „Swift iPhone App”. Obok niego powinien znajdować się tekst, który mówi po prostu „Urządzenie iOS” lub rzeczywiste urządzenie, takie jak iPhone 6, iPhone 5 itd. Kliknij tę listę rozwijaną i wybierz iPhone 6. Wybór „Urządzenie iOS” nie będzie działać dla Ciebie (w ten sposób przesyłasz swoją aplikację na prawdziwe urządzenie do testowania), ale symulatory będą.

Kliknij przycisk odtwarzania w lewym górnym rogu. Jeśli wszystko pójdzie dobrze, symulator iOS powinien wyświetlić się i wyświetlić ………….. pusty ekran. Z paskiem stanu. Rodzaj anty-klimatyczny. (Zdjęcie 7) Ale nie martw się, dotrzemy tam. Gratulacje! Stworzyłeś swoją pierwszą aplikację na iOS!

Krok 3: Praca nad interfejsem użytkownika.

W lewym okienku powinna pojawić się lista plików. Wybierz ten, który mówi Main.Storyboard. (Zdjęcie 1)

Dawno temu tworzenie interfejsu użytkownika (User Interface) z kodem było normą, ale teraz Apple bardzo ułatwiło projektowanie obu i zaprogramuj swoją aplikację bezpośrednio z Xcode. Pliki scenorysów zawierają interfejs użytkownika Twojej aplikacji. Dodaj elementy interfejsu użytkownika do rzeczy zwanych UIViews, które zarządzają tymi elementami interfejsu użytkownika. Następnie możesz podłączyć elementy interfejsu użytkownika do rzeczywistego kodu Swift, aby uczynić je interaktywnymi. Podczas gdy większość programistów aplikacji martwi się o funkcje aplikacji przed zaprojektowaniem funkcjonującego interfejsu użytkownika, dla celów nauki zrobimy to w odwrotnej kolejności. Najpierw skonfigurujemy interfejs użytkownika.

W prawym dolnym rogu ekranu powinieneś zobaczyć pole tekstowe. Powyżej będzie kilka elementów interfejsu użytkownika zwanych obiektami. Wprowadź zapytanie „etykieta” i naciśnij Enter. Powinieneś zobaczyć wyskakujący obiekt UILabel. UILabele służą do wyświetlania tekstu. (Zdjęcie 2)

Przeciągnij etykietę z pola wyszukiwania do lewego górnego rogu białego pola widocznego na ekranie. (Zdjęcie 3)

Pociągnij prawą granicę etykiety za pomocą małych białych kropek otaczających etykietę po prawej stronie ekranu. (Zdjęcie 4)

Teraz wyszukaj „Przycisk” w taki sam sposób, jak zrobiłeś to. Przeciągnij pierwszy wynik, który mówi „Przycisk”, tuż pod etykietą. Nie ma potrzeby rozciągania granic przycisku. (Obrazy 5 + 6)

Na koniec dla tego kroku spójrz na obrazek 7. Zobacz, gdzie jest notatka i kliknij ją. Jeśli go nie widzisz, przeczytaj to: na górnym pasku narzędzi, w pobliżu prawego rogu, powinieneś zobaczyć coś, co wygląda jak wybrane linie tekstu. Obok znajduje się przycisk z dwoma nakładającymi się okręgami. Kliknij nakładające się okręgi.

Po wykonaniu tej czynności pojawi się kolejne okno obok serii ujęć. Klikając ten przycisk, wywołałeś asystenta edytora. Pomocniczy edytor jest używany do otwierania dwóch plików na raz, a chłopiec przydaje się, zwłaszcza przy podłączaniu elementów interfejsu użytkownika do kodu. Twój asystent redaktor będzie miał białe tło, ale zmieniłem mój na chłodniejszy schemat kolorów tylko dla cholery.

Plik otwarty w edytorze pomocniczym nazywa się kontrolerem widoku. Kontrolery widoku to pliki, które kontrolują widoki w aplikacji. Każdy widok to osobne okno w aplikacji. Na przykład w aplikacji Wiadomości początkowy ekran ze wszystkimi czatami jest jednym widokiem, a następnie po kliknięciu na nazwę przechodzi do innego widoku, w którym są wyświetlane wszystkie wiadomości z tą osobą.

Krok 4: Hook It Up!

Kliknij lewym przyciskiem myszy i przeciągnij lub kontroluj kliknięcie i przeciągnij etykietę do miejsca pokazanego na obrazku 1. Upewnij się, że niebieska linia jest we właściwym miejscu, zanim puścisz. To jest? Jeśli tak, puść.

Powinieneś teraz wyświetlić okno dialogowe. Wpisz „etykieta” w miejscu, w którym jest napisane nazwa, i kliknij Połącz. (Zdjęcie 2)

To, co tu zrobiłeś, to utworzenie IBOutletu. To mówi kompilatorowi, że chcesz mieć dostęp do tego elementu interfejsu użytkownika, a będziesz odwoływać się do niego jako „etykieta”. Następnie używasz terminu „etykieta”, aby odwołać się do niego później podczas pisania programu.

Wykonaj tę samą procedurę klikania i przeciągania za pomocą przycisku, z tą różnicą, że tym razem zanotuj inną pozycję, aby przeciągnąć ją, jak pokazano na rysunku 3. Pozycja nie naprawdę to bardzo ważne, ale wygląda lepiej, jeśli robisz to w ten sposób. Puść, a pojawi się kolejne okno dialogowe.

Przed dodaniem nazwy w menu rozwijanym Połączenie wybierz akcję. Podczas gdy gniazda umożliwiają dostęp do elementu interfejsu użytkownika (zmiana jego koloru tekstu, tekstu, tła itp.), Akcje są sposobem, w jaki łączymy się z interaktywnymi elementami, takimi jak przyciski w kodzie. Zasadniczo zapewniają one interaktywny most od interfejsu użytkownika do programu. Wewnątrz akcji możesz powiedzieć kompilatorowi, że chcesz coś zrobić. Na przykład po dotknięciu przycisku możesz powiedzieć kompilatorowi, aby zmienił kolor tła na niebieski, ale po dotknięciu innego przycisku zmień go na czerwony. Aby wprowadzić nazwę, naciśnij przycisk Naciśnij, a następnie kliknij Połącz. (Obrazy 4 + 5)

Zwróć uwagę na to, jak wielką literę napisałem wielką literą na przyciskuPress, a drugie słowo jest pisane wielką literą. To się nazywa przypadek wielbłąda.Wykorzystywany jest przypadek wielbłąda, ponieważ białe znaki (znak spacji) nie są dozwolone w wielu aspektach programowania. Przypadek wielbłąda to sposób na łatwe rozróżnienie wielu słów, gdy nie można użyć spacji. Pierwsza litera nie jest zawsze pisana wielkimi literami, a kolejne słowa są pisane wielkimi literami. Na przykład thisIsCamelCase. Nie myl tego z klasami. Klasy zawsze pierwszą literę i kolejne litery należy wpisać wielką literą. Na przykład ViewController jest nazwą klasy, podobnie jak UILabel i IBOutlet.

Dobrze. Idąc naprzód. Kliknięcie Connect powinno wstawić następujący kod do twojego programu:

@IBAction func buttonPress (nadawca: AnyObject) {

}

Krok 5: Rozpocznij kodowanie!

Wewnątrz tych nawiasów klamrowych umieszczasz swój kod. Po każdym kliknięciu przycisku wykonywany jest kod wewnątrz nawiasów klamrowych.

Naciśnij klawisz powrotu kilka razy po pierwszym nawiasie klamrowym w IBAction, aby dać sobie trochę miejsca. Następnie wpisz lub skopiuj i wklej następujący kod:

self.label.text = "Swift jest niesamowity!"

Jeśli go wpisałeś, zauważyłeś, że pod tekstem pojawiło się okno z kilkoma sugestiami. Nazywa się to autouzupełnianiem i oszczędza mnóstwo czasu podczas programowania. Naciśnij kwadrat w lewym górnym rogu obok przycisku odtwarzania, aby zatrzymać bieżącą wersję aplikacji (pustej), którą uruchomiliśmy. Następnie kliknij play, aby odbudować i uruchomić nową aplikację. Gdy pojawi się symulator iOS i załaduje, spróbuj dotknąć przycisku. Tekst powinien zmienić się z nudnego starego „label” na „Swift is Awesome!”. Masz to! Przejdźmy teraz przez to, co robi kod.

Rzeczy zwane obiektami są podstawą większości języków programowania komputerowego. Dlatego te języki są nazwane językami programowania obiektowego. C #, C ++. Swift, Objective-C i Python to wszystkie języki zorientowane obiektowo wraz z setkami innych. Obiekty mają rzeczy zwane właściwościami. Właściwość jest zasadniczo zmienną, która przechowuje trochę informacji. Na przykład właściwość text twojej etykiety przechowuje jakiś tekst. Obiekt etykiety ma wiele innych właściwości, takich jak backgroundColor i frame. Możesz zobaczyć niektóre z nich, wpisując self.label. a następnie za pomocą klawiszy strzałek przewiń listę autouzupełniania. Dostęp do właściwości uzyskuje się za pomocą notacji kropkowej. Obiekt self zawiera etykietę właściwości, która zawiera wiele innych pod-właściwości, które z kolei mają pewne pod-pod-właściwości i tak dalej. Na przykład właściwość frame obiektu etykiety kontroluje rozmiar etykiety. Możesz uzyskać lub ustawić wysokość etykiety, wpisując self.label.frame.size.height. Oczywiście tak jest więc tak więc znacznie bardziej skomplikowane niż to, ale to podstawowe podsumowanie.

Kiedy wpiszesz: self.label.text = „Swift jest niesamowity!” aktualizujesz właściwość tekstu na łańcuch. Sekwencja „” jest skrótem do utworzenia obiektu łańcuchowego, który następnie ustawia się jako właściwość tekstową etykiety. Możesz umieścić dowolny tekst w cudzysłowie.

Inną ważną rzeczą w pliku kontrolera widoku jest:

override func viewDidLoad () {

super.viewDidLoad ()

// Wykonaj dodatkowe ustawienia po załadowaniu widoku, zazwyczaj z końcówki.

}

Wewnątrz tych nawiasów klamrowych możesz dodać kod, który wykonuje się natychmiast po załadowaniu widoku, a więc viewDidLoad. Cóż, myślę, że na razie wystarczy.

Krok 6: Zrobiłeś to!

Masz to. Twoja pierwsza aplikacja na iOS. Teraz idź i chwal się tym!

Od tej pory gorąco zachęcam do zabawy w Xcode i wyczucia tego miejsca. Spróbuj zaktualizować tekst etykiety wewnątrz viewDidLoad i zobacz, co się stanie. Sprawdź, czy możesz dowiedzieć się, jak programowo zmienić kolor tekstu.

Dziękuje za przeczytanie! Naprawdę mam nadzieję, że podobało ci się to i nauczyłeś się czegoś w tym procesie. Proszę, proszę i skomentuj, aby pokazać swoje wsparcie. Jeśli masz jakiekolwiek pytania, zamieść je w komentarzach, a ja postaram się odpowiedzieć na nie. Aby sprawdzić niektóre projekty, nad którymi pracowałem, możesz odwiedzić moją stronę. A tak przy okazji, mam tylko 15 lat. Jaka jest twoja wymówka?

Chociaż ten samouczek był w Swift, zdecydowanie sugeruję, abyś nauczył się Objective-C najpierw, jeśli chcesz dostać się do programowania. W rzeczywistości musisz znać Objective-C, jeśli będziesz tworzyć program iOS. Swift jest wciąż nowym językiem, więc większość ładnych repozytoriów w GitHub i innych miejscach nie jest napisana w Swift. Swift celuje tylko w iOS 8, co wyklucza znaczną część urządzeń iOS z pobierania lub uruchamiania aplikacji. Chociaż faktycznie zaprogramowaliśmy kilka rzeczy, nawet nie zarysowaliśmy powierzchni tworzenia aplikacji na iOS. Chociaż niekoniecznie tak jest skomplikowane jest tak dużo rzeczy. Wiele i wiele rzeczy.

Aby dowiedzieć się więcej, Youtube ma kilku niesamowicie utalentowanych programistów, którzy publikują świetne tutoriale za darmo, więc może warto poświęcić trochę czasu, aby sprawdzić niektóre z nich. Kolejnym wspaniałym zasobem jest www.raywenderlich.com, który ma również niesamowite tutoriale dostępne zarówno dla początkujących, jak i zaawansowanych programistów.