Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

„dobreprogramy info” na Windows Phone 8.0/8.1 i Windows 8.1, czyli jak „wyklikać” własną aplikację w AppStudio

Tworzenie aplikacji nie jest wiedzą tajemną, ale nie jest łatwo bez przygotowania stworzyć coś, co nie będzie wstyd pokazać nie tylko naszym znajomym. Jeśli chcecie dowiedzieć się jak tworzyć proste aplikacje na Windows Phone i Windows Modern, bez dotykania do kodowania, to zapraszam do wpisu.

Tekst, który czytacie kierowany jest zarówno do osób nie mających nic wspólnego z programowaniem oraz do tych, którzy już mają pewną praktykę w tworzeniu aplikacji. Ci pierwsi będą mogli stworzyć proste programy na smartfony czy tablet bez dotykania do kodowania, drudzy zaś mogą chociażby podejrzeć kod wynikowy tak stworzonych aplikacji w celu nauki.

Poniższy tekst bazuje na prezentacji przygotowanej na tegoroczny HotZlot.

Stworzona w opisywany sposób aplikacja została opublikowana w markecie Windows i Windows Phone.

Zaczynamy!

AppStudio - podstawy

Nasze aplikacje tworzyć będziemy w AppStudio, narzędziu dostarczonym przez Microsoft. Co ważne, nie musimy nic instalować, ani pobierać z sieci. Narzędzie te obsługuje się z poziomu przeglądarki internetowej. Do stworzenia tego poradnika użyłem aktualnej wersji Chrome, ale spokojnie można wykorzystać Firefoxa czy nowsze wersje Internet Explorera.

AppStudio jest narzędziem do tworzenia aplikacji kafelkowych na Windows Phone 8 i 8.1 oraz na Windows 8.1. Raz wyklinany program, będzie działał jednocześnie na obu tych systemach. Wystarczy zatem wejść na stronę AppStudio i zalogować się kontem live. Nie ma żadnych ukrytych kosztów czy rozbudowanych formularzy rejestracyjnych. Wejście w świat AppStudio jest naprawdę proste i przyjemne.

Aplikacje tworzone w AppStudio są proste i można traktować je jako wizytówki, oprogramowanie do prezentacji produktów czy jako agenda do różnych wydarzeń. Do budowy naszej apki wykorzystać możemy kilka przygotowanych scenariuszy. Mowa tutaj o pobieraniu danych z RSS, YouTuba, Facebooka, Binga, Instagrama czy Flickra. W takim wypadku wystarczy podać link do źródła, a aplikacja sama zadba o dynamiczne ładowanie danych, stronę ze szczegółami itp. Można również dodawać statyczne informacje, tutaj źródłem danych będą wpisane przez nas informacje lub plik csv, który przyspieszy ten proces.

Tworzenie programu sprawdza się do klikania i przenoszenie elementów w poszczególne miejsca w oknie przeglądarki. Poniższy punkt przedstawi tworzenie przykładowej aplikacji krok po kroku z omówieniem poszczególnych elementów w AppStudio.

dobreprogramy info - aplikacja z AppStudio na Windows Phone 8/8.1 i Windows 8.1

W tym samouczku stworzymy przykładową aplikację w AppStudio. Jednakże, aby nie marnować czasu, nasza aplikacja wynikowa będzie źródłem informacji o portalu dobreprogramy, czyli coś czego nie ma jeszcze na Windows Phone (portal wydał jedynie wersję pod Windows). Będzie ona zawierała dynamicznie ładowane dane z RSS oraz Facebooka i YouTuba. Do dzieła!

Start

Tuż po zarejestrowaniu się, ujrzymy ekran z projektami. Z racji tego, że jest to nasz pierwszy kontakt z tym portalem, okno będzie jeszcze puste:

Po kliknięciu na Start new project zostaniemy przeniesieni do wyboru szablonu naszej przyszłej aplikacji:

Możemy w tym miejscu zdecydować się czy zechcemy stworzyć nową aplikację na bazie istniejącego już szablonu lub samemu zaprojektować ją od nowa. Wybierzemy w tym przypadku pustą aplikację, aby móc samemu zaprojektować wynikowe oprogramowanie.

AppStudio przypomni nam jeszcze, że stworzona tak aplikacja działać będzie zarówno pod Windows Phone, jak na urządzeniach z Windows 8.1:

Podstawy

Klikamy na Create, a wówczas zostaniemy przeniesieni do głównego okna AppStudio:

Tutaj zauważymy, że aplikacje stworzone w tym narzędziu opierają się o tzw. panoramę. Jest to rodzaj kontrolki, który pozwala na przewijanie ekranów z danymi (takich ekranów możemy dodać maksymalnie 6). Każdy z ekranów może posiadać element, który będzie jednego typu. Może być to Facebook, RSS, lub inne dane ładowane dynamiczne, ewentualnie można wstawić własny kod HTML. Dodatkowo z sekcji advanced można wybrać zaawansowane elementy jak listy i kolekcje danych idealne do prezentacji informacji. My skorzystamy tylko z zaznaczonych pozycji, które będziemy dodawać w puste pola.

Na górze zaznaczyłem miejsce, gdzie można dodać nazwę aplikacji i ikonę (tekst i grafika przewijać się będą wraz z przewijaniem ekranów). Wpiszmy zatem nazwę aplikacji dobreprogramy info oraz wybierzmy ikonę z naszego dysku (warto by miała ona przezroczyste tło):

Teraz będziemy dodawać poszczególne elementy do głównego okna. Pamiętajmy, aby po każdej zmianie w poszczególnym oknie zapisywać postęp prac przyciskiem Save.

RSS, YouTube, Facebook, HTML - konfiguracja

Mamy już przygotowane okno, teraz umieśćmy na nim poszczególne elementy.

Zaczniemy od RSSów. Klikamy na odpowiednią ikonę, a wówczas ukaże się nam konfiguracja tej sekcji. Dodajmy teraz nagłówek i źródło danych, w postaci linka do RSSów.

Zróbmy podobnie z YouTubem. Tutaj źródłem danych jest nazwa profilu na portalu.

Konfiguracja Facebooka wygląda identycznie, jak w przypadku YouTube.

Mamy już okno z trzema sekcjami. Jeśli kolejność nas nie satysfakcjonuje, możemy ją zmienić przenosząc ikony.

Dodajmy jeszcze element HTML i tam wpiszemy krótką notkę o autorze aplikacji.

Stworzyliśmy zatem podstawowe elementy naszej aplikacji. Możemy na podglądzie przewijać już okno, a nawet zobaczyć jak będzie to wyglądało na Windows 8.1 (tablet), poprzez kliknięcie w zielony przycisk Windows Preview.

RSS, YouTube, Facebook - doprecyzowanie szczegółów

Nasza aplikacja posiada już całkiem znośny wygląd, czas teraz na dopieszczenie szczegółów. Klikając na przycisk Edit możemy skonfigurować poszczególne sekcje.

Na początek zajmiemy się RSSami. Zmienimy layout na bardziej przejrzysty. Wystarczy kliknąć na wybrany typ, a podgląd odświeży się automatycznie i przedstawi nam wybrany schemat.

Teraz wejdźmy na szczegóły RSSów (ikona na prawo). Okno te będzie pojawiać się, po kliknięciu na element na liście.

Zmienimy tutaj sposób prezentacji okna. Możemy w tym miejscu ustalić jakie dane mają pojawiać się w poszczególnych miejscach szczegółów z RSS.

Zapiszmy zmiany i przejdźmy do kolejnych szczegółów w głównych elementach aplikacji. W oknie YouTuba zmienię wygląd, aby był on bardziej podobny do tego co zostało ustawione w RSSach.

W przypadku Facebooka zmienimy więcej w prezentacji danych. W tym miejscu zdjęcia nie zawsze są wrzucane do profilu, stąd też zarówno główne okno, jak i szczegóły, będą opierały się tylko na danych tekstowych.

Po zapisie nasza aplikacja wygląda w następująco:

Style

Przejdźmy na zakładkę Themes, aby zmienić styl naszej aplikacji.

W tym miejscu możemy zabawić się kolorami, aczkolwiek warto pamiętać o umiarze. Stworzona aplikacja musi być czytelna zarówno w jasnym, jak i ciemnym stylu. Ja zostawiłem tutaj wartości domyślne, a dodałem jedynie tło, które będzie przesuwać się, wraz z przewijaniem ekranu.

Warto w tym miejscu jeszcze sprawdzić, jak będzie prezentować się aplikacja na Windows 8.1, poprzez kliknięcie na zielony przycisk Windows Preview

Kafelki oraz ekran startowy i blokady

Przejdźmy do trzeciej zakładki Tiles. To w niej zdecydujemy jak mają wyglądać i zachowywać się kafelki przypięte do ekranu startowego oraz ikona aplikacji.
Można tutaj wybrać jeden z trzech sposobów prezentacji kafli. Pierwszym z nich jest dwustronny kafelek. Po jednej stronie mamy grafikę, po drugiej tekst. Drugi sposób to kafelki, na których przewijane są (w sposób cykliczny) grafiki. Trzecim typem jest statyczny kafelek, którego dane zmieniają się w zależności od wybranego rozmiaru.

Wybrałem ostatni schemat i umieściłem w nim odpowiedni tekst i grafikę.

Niestety, w obecnej wersji AppStudio, najszerszy kafelek w tym szablonie nie wyświetla się poprawnie na maszynie docelowej (grafika jest niepotrzebnie rozciągana na całą szerokość kafla).

Dodatkowo po przejściu do Splash&Lock skonfigurujemy ekran startowy na Windows Phone i Windows oraz ekran blokady na Windows Phone.

Warto pamiętać, że podgląd nie zawsze pokazuje wynikowy efekt, jaki będzie dostępny na urządzeniu. Otóż w aplikacji grafika jest rozciągana na cały ekran, co nie jest pokazane na podglądzie. Stąd też ekran startowy i blokady na Windows Phone warto przygotować w rozdzielczości 720p, wówczas będziemy mieli pewność, że obraz się nie rozjedzie i będzie wyglądał poprawnie na każdej rozdzielczości urządzenia.

Na tym etapie naszą aplikację można uznać za skończoną, czas teraz na ostatni element, czyli publikację.

Przygotowanie do publikacji

Ostatnia zakładka przedstawia nam końcowy efekt naszej pracy. To tutaj przygotowujemy opis i poszczególne elementy niezbędny przy publikacji jej do marketu.

Dodajemy tutaj opis i nazwę naszej apki, a także, jeśli tego sobie życzymy, umieszczamy reklamy. Jeśli posiadamy konto deweloperskie, w opcji Associate App with the Store, łączymy wynik pracy z kontem w sklepie, co pozwoli później na dodanie tak stworzonego programu do marketu Windows Phone i Windows.

Po ustawieniu opcji wg naszych upodobań, możemy kliknąć na przycisk Finish. W tym momencie podgląd naszej aplikacji zostanie jeszcze raz pokazana na Windows Phone i Windows. Klikamy na Generate, aby wygenerować pliki wynikowe.

W otwartym oknie możemy wybrać typ docelowego pliku. Może być to aplikacja Universal App, którą zainstalujemy zarówno na Windows Phone 8.1 oraz Windows 8.1 (tylko te dwie wersje wspierają Universal Apps) lub program przeznaczony tylko na Windows Phone 8.0. Oczywiście jeśli chcemy stworzyć aplikację na te trzy systemy, musimy generowanie uruchomić dwa razy.

W tym miejscu zdecydujemy również o tym, czy AppStudio ma stworzyć gotowy plik przygotowany do wrzucenia do sklepu (AppStudio samo zrobi screeny ekranów, aby wrzucić je do marketu!) oraz do instalacji bezpośrednio na urządzenie.

Wygenerowane dane będą zawierały wybrane opcje oraz stworzone w ten sposób źródła aplikacji do pobrania w formie pełnej solucji pod Visual Studio 2013.

To w zasadzie tyle. Teraz możemy przejrzeć kod w celu nauki, umieścić aplikacje w markecie (jeśli mammy konto deweloperskie) lub zainstalować apkę na urządzeniu (opis jak to zrobić).

Pobierajcie i testujcie

Wynikowe aplikacje umieściłem w markecie Windows Phone 8.0/8.1 oraz Windows 8.1. Możecie przetestować i sprawdzić jak działa oprogramowanie stworzone całkowicie za pomocą AppStudio:

dobreprogramy info - Windows Phone 8.0/8.1, do pobrania także z bazy aplikacji portalu dobreprogramy

dobreprogramy info - Windows 8.1

Uwagi i porady

Mam nadzieję, że opis okaże się pomocny. Szybko można stworzyć własną, prostą aplikację, bez znajomości programowania. Na koniec dodaję kilka uwag odnośnie samego AppStudio, jak i kilka ogólnych porad:

  • szczegółowy, bardzo dobry opis AppStudio znajdziemy na oficjalnej stronie
  • wynikowa aplikacja obecnie jest tworzona tylko w języku angielskim
  • przejście do strony www z RSS/FB/YT wymaga w Windows Phone kliknięcia na [...] i wybrania opcji go to source, w Windows 8.1 należy kliknąć prawym klawiszem, aby ukazało się menu - jest to mało intuicyjne, lepiej aby przejście do źródłowych stron odbywało się poprzez kliknięcie w nagłówek lub tekst
  • AppStudio ma problem z generowaniem szerokich kafli, przypinanych do strony startowej
  • AppStudio nie generuje przezroczystych ikon aplikacji, mimo załadowania grafik png z przezroczystością
  • wynikowe screeny z aplikacji pod Windows 8.1 są o 2 piksele za duże! :P aby wrzucić te grafiki do marketu (oczywiście można zrobić to ręcznie, ale jest to ewidentne niedopatrzenie)
  • Microsoft udostępnia przykładowe aplikacje na Windows Phone 8.1 i Windows 8.1, które prezentują możliwości AppStudio
  • brakuje możliwości wygenerowania wyników pod Androida czy iOS, dodanie tej opcji nie wydaje się być problematyczne, a uatrakcyjniłoby AppStudio
  • brak wsparcia Twittera
  • brak wsparcia dla bardziej zaawansowanych źródeł danych jak np. WebService
  • brak konfiguracji paska menu
  • wynikowe aplikacje mogą być użyte do celów komercyjnych
  • dodanie aplikacji do marketu wymaga posiadania płatnego konta deweloperskiego
  • nie liczmy na miliony z reklam w tego typu apkach :)

 

oprogramowanie programowanie urządzenia mobilne

Komentarze

0 nowych
gowain   18 #1 13.07.2014 15:12

Fajny wpis i fajna była prezentacja, ale już to mówiłem na HZ, takie "generatory" prowadzą do tego, że niedługo w markecie będzie pełno, mało wartego i nic nie wnoszącego syfu.

djfoxer   17 #2 13.07.2014 15:15

@gowain: Masz poniekąd rację, ale nadal aby tak "wyklikaną" apkę wrzucić do marketu należy mieć płatne konto deweloperskie (uff, na szczęście!)

waderr73   8 #3 13.07.2014 15:29

Brawa za wpis. Trochę powiewu świeżości.

biomen   8 #4 13.07.2014 15:37

@djfoxer
Jeżeli dobrze się domyślam, to po ukończeniu aplikacji, plik wygenerowany dla WP8.1 będzie miał rozszerzenie .xap, tak? I czy istnieje jakaś opcja aby tworzoną aplikację wyeksportować jako projekt dla Visual Studio?

xomo_pl   20 #5 13.07.2014 15:47

@djfoxer: w Dreamspark daja za friko minimum na rok a podejrzewam, że MS ma jeszcze inne akcje promocyjne na konto deweloperskie...

osobiście uważam, że lepiej by było, gdyby MS i użytkownicy weryfikowali jakość appek a nie opłata za konto deweloperskie bo nie powstrzymuje ona przed wrzucaniem kiepskich appek tych którzy opłacą sobie konto..

  #6 13.07.2014 15:54

Przyłączam się do pytania. Czy da się wyeksportować projekt dla VS?

viesiek1   1 #7 13.07.2014 16:20

Znalazłem literówkę: "Tworzenie aplikacji nie jest widzą...". Domyślam się, że ma być: "wiedzą". A poza tym zaraz sobie wypróbuję ten poradnik :-)

Autor edytował komentarz.
PokerFace   9 #8 13.07.2014 16:23

Niedługo będzie jak w markecie BB: 1000 nowych aplikacji z czego 999 to czytniki RSS do jednej strony :D

Jaro070   15 #9 13.07.2014 17:08

Ile kosztuje konto deweloperskie?

djfoxer   17 #10 13.07.2014 17:17

@biomen: Tak jak pisałem, na koniec (widać to na screenie) dostępne są źródła do pobrania (pełna solucja pod VS2013). Pliki pod WP8.0 mają rozszerzenie xap, zaś UniversalApp pod WP8.1/W8.1 appx.

@xomo_pl: Zgadza się, ale nie obawiałbym się zalewu śmieci. W AppStudio nie stworzy się jeszcze pierdzących apek, jeszcze :) Co więcej apki są weryfikowane, np. dostałem warninga po publikacji w markecie za to, że nie dorzuciłem licencji, mimo, że AppStudio tego wymaga.

@viesiek1 Thx za czujne oko.

@PokerFace W BB było zupełnie inaczej. BB dawało kasę od każdej napisanej apki, bez względu na to co to było. Tutaj nikt nie nagradza takich "twórców".

@Jaro070 Obecnie jest to 59 zł na rok. Otrzymujesz wówczas dostęp do marketu na Windows Phone i Windows. Czasem są promocje na przedłużenie tego okresu lub obniżka ceny abonamentu.

Autor edytował komentarz.
Scorpions.B WSPÓŁPRACOWNIK  20 #11 13.07.2014 17:29

Tekst równie świetny jak prezentacja. Narzędzie bardzo ciekawe, w wolnej chwili z chęcią się nim pobawię :)

xomo_pl   20 #12 13.07.2014 17:45

@djfoxer: co do weryfikacji appek w WS to duży plus za to dla MS....

co do konta deweloperskiego to warto nadmienić, że w przypadku nie przedłużenia 'abonamentu' nasze aplikacje znikają z WS...

klonek_wp   6 #13 13.07.2014 18:00

@djfoxer: cyt"Obecnie jest to 59 zł na rok. Otrzymujesz wówczas dostęp do marketu na Windows Phone i Windows"

dostęp do windows store jest chyba dopiero w tym koncie za 300zł, a tym za 60zł tylko do windowsphone store

lynx44   10 #14 13.07.2014 18:32

@xomo_pl: Nawet te darmowe i bez reklam? To się nie dziwie że apek tak mało

enedil   9 #15 13.07.2014 19:12

@lynx44: z tym, że Google Play to 25€, a AppStore to 100€.

xomo_pl   20 #16 13.07.2014 19:22

@lynx44: wszystkie- cytat ze strony MS:
"Even though the app is still available to customers who have previously acquired it, your app listing will be removed from the Store. No new customers will be able to acquire your app. Your app's name will also be released for potential use by another developer."

@klonek_wp no chyba nie-
http://geekclub.pl/aktualnosci/microsoft-scala-rejestracje-kont-developerow-dla-...

19$->~59PLN

klonek_wp   6 #18 13.07.2014 19:33

@xomo_pl: czyli się zmieniło ale ja i tak nadal 99$

dobaczenko   8 #19 13.07.2014 21:33

A co DobreRSS? Już nie wspierana czy jak?

Inventer89   5 #20 13.07.2014 22:03

Na WP 8.0 w sekcji Facebook tytuły postów mają krzaczki zamiast polskich znaków - tylko tytuły, treści wpisów są ok.

djfoxer   17 #21 13.07.2014 22:09

@xomo_pl: @lynx44 Znikają dla nowych klientów, ale Ci co już zakupili mogą ją używać i instalować. Myślę, że to dobry krok ku temu, aby nie tworzyć śmietnikowych apek przez kogoś kto dostanie za free konto na rok i później zniknie. http://msdn.microsoft.com/en-us/library/windows/apps/dn263173.aspx

djfoxer   17 #22 13.07.2014 22:17

@klonek_wp: Płacisz tylko 59 zł jako osoba prywatna. Firmy płacą 280 zł. W obu przypadkach dostęp jest do marketu Windows i Windows Phone. http://msdn.microsoft.com/en-us/library/windows/apps/jj863494.aspx

@mordzio: A tak, faktycznie. MS zawsze był w niektórych sprawach na końcu. Aczkolwiek tu masz portal całkowicie za free, z wynikowym, pełnym kodem źródłowym, bez ograniczeń licencyjnych. Co więcej, cały czas zgłaszane są kolejne elementy, które będą zapewne dodawane w przyszłości: http://wpdev.uservoice.com/forums/216486 Dużym plusem jest też samo Universal Apps.

@Inventer89 Dzięki za info, spojrzę w wolnym czasie w kod źródłowy wersja na WP8.0.

xomo_pl   20 #23 13.07.2014 22:24

@djfoxer: odnośnie zasad to zacytowałem dokładnie to samo powyżej ;)
Ta zasada ma drugą stronę- Store może stracić jakąś appkę wartościową jeśli deweloperowi odwidzi się posiadanie konta. Appki powinny moim zdaniem być nadal dostępne jeśli dev jej sam nie usunie z tym, że powinna być informacja, że developer porzucił platformę Windows Store i tyle.

klonek_wp   6 #24 13.07.2014 22:57

@djfoxer: cyt"Płacisz tylko 59 zł jako osoba prywatna. Firmy płacą 280 zł. W obu przypadkach dostęp jest do marketu Windows i Windows Phone."

ja od początku płaciłem te 300zł i na pewno do niedawna windows store był dostępny tylko w droższej opcji. trzeba też pamiętać że nie można później zmienić typu konta.

Shaki81 MODERATOR BLOGA  37 #25 13.07.2014 23:31

Niestety nikt z was nie sprawdził działania tej apki na Windows 8.1 a tam niestety lipa. Nie działa i tyle, ciemny pulpit i kilka napisów.

djfoxer   17 #26 13.07.2014 23:38

@Shaki81: U mnie działa idealnie, może masz coś z ustawieniami sieci pod modern.

Autor edytował komentarz.
klonek_wp   6 #27 13.07.2014 23:40

@Shaki81: działa bez problemu

djfoxer   17 #28 13.07.2014 23:46

@klonek_wp: Rok temu płaciłem 59 zł, ale faktycznie wcześniej było $99.

Shaki81 MODERATOR BLOGA  37 #29 14.07.2014 00:32

@djfoxer: jak tak to muszę sprawdzić co u mnie się pokaszaniło

saturno   9 #30 14.07.2014 02:26

Też mi łatwizna?
W XP-u łatwiej i szybciej można skróty utworzyć.

oprych   12 #31 14.07.2014 08:03

Pomysł fajny, ale mam dwie uwagi:

1. średni i duży kafelek nie działają pod WP 8,1 - jest tylko białe logo i szkoda, że na kafelku nie wyświetla najnowszych wpisów
2. przydałoby się też dodanie nowych wpisów z bloga :)

WODZU   16 #32 14.07.2014 08:34

Szkoda że prelekcja nie była rejestrowana, bo byłaby świetnym uzupełnieniem wpisu :)

arlid   14 #33 16.07.2014 20:11

Dlaczego zmieniłeś avatar? :P I tak byleś rozpoznawalny xD Ciekawy wpis - tak samo jak Twoja sesja :)

DjLeo MODERATOR BLOGA  17 #34 23.07.2014 21:30

@arlid: Może psiakieś wytyczne redakcji, że każdy ma mieć swoją facjatę :)

A @djfoxer sesja ciekawa, trzeba przyznać ;)

Autor edytował komentarz.
arlid   14 #35 28.07.2014 18:26

@DjLeo kto wie, kto wie xD ;)