W następnym artykule przyjrzymy się Ionic Framework i jak można go zainstalować na Ubuntu 20.04. Ten framework pozwoli użytkownikom realizować projekty z innymi frameworkami, takimi jak Angular. Ionic to w pełni open source SDK do tworzenia hybrydowych aplikacji mobilnych, stworzony przez Maxa Lyncha, Bena Sperry'ego i Adama Bradleya z Drifty Co. w 2013 roku. Oryginalna wersja została wydana w 2013 roku i zbudowana na bazie AngularJS i Apache Cordova. Jednak najnowsza wersja została przebudowana jako zestaw komponentów webowych, które: pozwala użytkownikowi wybrać projekty Angular, React lub Vue.js. Pozwala również na użycie komponentów Ionic bez żadnej struktury interfejsu użytkownika.
Ionic dostarcza narzędzia i usługi do tworzenia hybrydowych aplikacji desktopowych, mobilnych i progresywnych aplikacji internetowych w oparciu o nowoczesne praktyki i technologie tworzenia stron internetowych. W tym celu można wykorzystać technologie internetowe, takie jak CSS, HTML5 i Sass. Dzięki temu frameworkowi możemy tworzyć aplikacje z technologiami webowymi kompatybilnymi z iOS, Androidem lub samą siecią. Oferuje również potężne narzędzie CLI, za pomocą którego będziemy mogli zarządzać i tworzyć projekty.
Ogólna charakterystyka Ionic
- Ten framework jest darmowy i open source. Oferuje bibliotekę zoptymalizowanych pod kątem urządzeń mobilnych narzędzi i komponentów interfejsu użytkownika, za pomocą których można tworzyć szybkie i wysoce interaktywne aplikacje.
- Ionic wykorzystuje Cordova, i nowsze wtyczki umożliwiające dostęp do funkcji systemu operacyjnego hosta, takich jak GPS, kamera, latarka itp.
- Użytkownicy mogą tworzyć swoje aplikacje, a następnie dostosowywać je do systemów Android, iOS, Windows, komputerów stacjonarnych (z Electron) lub nowoczesnych przeglądarek.
- Ionic zawiera ruchome części, typografię lub rozszerzalny motyw podstawowy.
- Podczas używania Komponenty sieciowe, Ionic zapewnia niestandardowe komponenty i metody interakcji z nimi. Jeden z tych komponentów, wirtualne przewijanie, umożliwia użytkownikom przewijanie listy tysięcy elementów bez wpływu na wydajność. Kolejny składnik, Tabs, tworzy interfejs z kartami, który obsługuje nawigację w stylu natywnym i zarządzanie statusem historii.
- Oprócz SDK Ionic zapewnia również: programiści usług mogą używać do włączania funkcji, takich jak implementacje kodu lub automatyczne kompilacje.
- również zapewnia własne IDE znane jako Ionic Studio.
- Oferuje również interfejs Wiersz poleceń (CLI) do tworzenia projektów. CLI umożliwia również programistom dodawanie dodatkowych wtyczek i pakietów Cordova, włączanie powiadomień push, generowanie ikon aplikacji, ekranów powitalnych i tworzenie natywnych plików binarnych.
Zainstaluj Ionic na Ubuntu 20.04
Instalacja tego frameworka jest dość prosta. Aby rozpocząć, wystarczy otworzyć terminal (Ctrl + Alt + T) i zaktualizuj nasze pakiety systemowe:
sudo apt update; sudo apt upgrade
Następnie będziemy zainstaluj kilka niezbędnych pakietów. W tym samym terminalu będziemy musieli użyć polecenia:
sudo apt install curl gnupg2 wget git
Następny krok będzie zainstaluj NodeJS. Ten przykład przetestowałem z wersją 14.x. Aby zainstalować tę wersję, zaczniemy od dodania niezbędnego repozytorium:
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
Więc możemy zainstalować NodeJS uruchamianie tego innego polecenia:
sudo apt install nodejs
Ionic wymaga Apache Cordova. Należy doprecyzować, że jest to zestaw interfejsów API urządzenia, które umożliwiają twórcom aplikacji mobilnych, za pomocą JavaScript, dostęp do natywnych funkcji urządzenia, takich jak kamera czy akcelerometr.
Po zainstalowaniu NodeJS możemy zainstaluj kordową bieganie:
sudo npm install -g cordova
W tym momencie możemy przejść do zainstaluj Ionic za pomocą npm:
sudo npm i -g @ionic/cli
Po instalacji możemy sprawdź zainstalowaną wersję za pomocą polecenia:
ionic -v
Przykładowa aplikacja
Aby wiedzieć, czy instalacja przebiegła prawidłowo, możemy zacząć od stworzenia małej przykładowej aplikacji. Aby to zrobić, będziemy musieli tylko uruchom następujące polecenie utwórz przykład:
ionic start
Podczas uruchamiania tego polecenia będziesz musiał określić, jaki rodzaj projektu chcesz stworzyć. Do tego przykładu wybrałem Angular. Dodatkowo będziesz musiał nadać swojemu projektowi nazwę i wybrać szablon. Wszystko to będziesz musiał wybrać z ekranu podobnego do poniższego:
Po konfiguracji zostanie wygenerowany folder o nazwie, którą nadaliśmy projektowi. Przejdź do tego folderu, aby zobaczyć strukturę projektu.
Do zobacz projekt, w tym samym terminalu wykonamy to inne polecenie:
ionic serve --host 0.0.0.0 --port 8000
Za pomocą tego polecenia pozwolimy każdemu hostowi na dostęp do portu 8000.
Gdy wszystko, czego potrzebujesz, jest załadowane, otwórz przeglądarkę internetową i przejdź do http://localhost:8000 o http://IP-de-tu-servidor:8000 a zobaczysz przykładową stronę, która właśnie została utworzona.
Ionic to nowoczesny framework, który pozwala w prosty i elegancki sposób tworzyć aplikacje wieloplatformowe. Można go uzyskać więcej informacji i dokumentacji na temat jego instalacji i eksploatacji w witryna projektu.