Archiwum

Archive for the ‘Windows 8’ Category

Hackaton w Gdańsku–relacja na żywo

Styczeń 19, 2013 Dodaj komentarz

Informowałem wczoraj na blogu, że firma PlaceChallenge wraz z polskim oddziałem Microsoftu i Inkubatorem Starter organizuje hackaton Windows 8 w Gdańsku. Postaram się na żywo tutaj prezentować postępy prac, zespoły i ich projekty oraz przebieg całego wydarzenia.

Plan jest taki, że co kilka godzin będę uaktualniał ten wpis, aż do zakończenia wydarzenia.

Przygotowania

Udało nam się przybyć kilka godzin wcześniej, zaczynamy się zastanawiać nad aplikacją jaką zaprezentujemy uczestnikom dzisiaj podczas warsztatów jako model współpracy grafik-programista logiki-programista chmury.

IMG_0141  IMG_0128

Czekamy na uczestników… a tymczasem znaleźliśmy piłkarzyki, które wypełnią Nasz czas aż do momentu załapania weny.

Rozpoczęcie

Rozpoczęliśmy z lekkim poślizgiem za to z wypełnioną salą pełną ludzi zapalonych do pracy i entuzjazmem na twarzach:

IMG_0175

Wszyscy doskonale wiedzą, że to początek prawie 30 godzinnej przygody.

Szkolenie

Plan był prosty. Michał, Kuba i Marcin budują aplikację na oczach uczestników wykorzystując narzędzia dostępne w ramach subskrypcji BizSpark, którą Microsoft rozdał wszystkim uczestnikom.

Nastąpiło przedstawienie prelegentów

image

i ambitnego planu

Zaczęło od krótkiego wstępu gdzie zaprezentowałem model Naszej pracy, co się będzie działo w najbliższych godzinach oraz narzędzia, z których będziemy korzystać.

Kluczem do sukcesu tego szkolenia było pokazanie pracy grupowej przy użyciu darmowego narzędzia do wspomagania pracy zespołów TFS w chmurze (http://tfspreview.com). Stworzyłem pusty projekt i w kreatorze dodałem Kubę oraz Michała jako swoich pracowników zlecając im odpowiednie prace.

Pierwszy na scenie pojawił się Michał, który omówi Modern UI stawiając często dość odważne tezy

IMG_0149

Esencją wykładu jednak było wprowadzenie do narzędzia Blend, które służy grafikom do opracowywania wyglądu aplikacji

IMG_0152

oraz animacji.

Efekt pracy grafika trafił do programisty, którego reprezentował  Kuba. Zaczął jak Michał od omówienia części teoretycznej jak działa Windows 8 z punktu widzenia programisty

IMG_0156

i użytkownika

IMG_0160

kontynuując budowanie gry

IMG_0165

niejednokrotnie ocierając się o granice percepcji umysłu

IMG_0166

skończył swoje zadanie przekazując mi pałeczkę by na koniec wytłmaczyć widowni jak szybko stworzyć logikę opartą o chmurę Windows Azure, w szczególności dodać:

  • bazę danych
  • zapisywanie i odczytywanie danych
  • logowanie Facebook, Live ID lub Twitter

a wszystko to wykorzystując coraz popularniejszą technologię

Prezentacja projektów

Kolejny punkt programu to prezentacja swoich pomysłów i formowanie zespołów. Każda osoba, która miała ochotę mogła na środku zaprezentować swój pomysł

IMG_0171

niektórzy przybyli do Nas z dużymi plecakami…

IMG_0169

To był moment niezwykle ważny dla wielu pomysłów, bo to często była pierwsza weryfikacja ich pomysłu i zderzenie z szersza publikę.

Wyłoniło się 6 zespołów.

Kodowanie

To moment, w którym ludzie wyposażeni w nowe znajomości i Visual Studio rozpoczęli często swój pierwszy maraton programistyczny w życiu.

IMG_0176

Planowane zakończenie to godzina 15:00 dnia następnego!

Relaks

Do Naszej dyspozycji jest pokój relaksu, który pomaga Nam rozluźnić mięsnie po długich godzinach siedzenia przy komputerze

WP_000488

Poranek

Stan aktualny to 4 osoby, które od wczoraj aż do teraz nie przespały ani chwili…

IMG_0183 IMG_0184

ja się ledwo trzymam…

IMG_0186

Praca Praca Praca

Ku Naszemu zaskoczeniu ludzie pracują, piją kawę, zajadają się ciasteczkami i praca idzie do przodu.

IMG_0189 IMG_0188

Prócz pracy są wciąż momenty pełne relaksu

Crazy Room
Finał

Do prezentacji finalnych dotarło kilka projektów, które ostatkiem sił zaprezentowały się na scenie – z góry zaznaczam, nie wszystkim zrobiłem zdjęcia, po prostu czasem pytania były ważniejsze niż bieganie z aparatem

IMG_0191

Za każdym razem twórcy aplikacji oczekiwali na feedback z publiczności, który był nie raz jak kubeł zimnej wody dla człowieka po dwóch dniach kodowania – efekt: często bardzo pozytywny, zawsze warto porozmawiać z przyszłymi użytkownikami, zebrać od nich opinie i spróbować wcielić zmiany do projektu

IMG_0194

Miło nam też było usłyszeć o projektach z globalnymi aspiracjami, które już są realizowane na inne platformy, a które chociażby z ciekawości patrzą na ekosystem Microsoftu. Konstruktywne dyskusje zawsze dają więcej niż wszelakie dywagacje na temat wyższości jednej słuchawki nad drugą

IMG_0198

Podsumowanie

Bardzo dziękujemy wszystkim, którzy przyszli i spędzili ten czas z Nami i technologią. Mamy nadzieje, że wiedza, która została nabyta się przyda w przyszłości.

Nikt Nam nie zabierze doświadczenia zdobytego podczas szkolenia, efektów dyskusji w nocnych pogadankach, czy finalnych projektów, które prezentowane były z uśmiechem na twarzach.

Po raz kolejny zobaczyliśmy jak duży sens mają takie wydarzenia i jak często z pozoru prosta dla Nas wiedza jest tak cenna dla innych.

Sprawcy zamieszania

Całe wydarzenie zapoczątkowała firma PlaceChallenge Labs, której profil edukacyjny (patrz tutaj: http://placechallengelabs.com/Education) idealnie wpisuje się w idee dzielenia się wiedzą i pomocy innym w zdobywaniu umiejętności związanych z technologią. Nic nie mogło by się odbyć bez pomocy sponsora w postaci firmy Microsoft oraz wsparcia Inkubatora Starter, który w Gdańsku słynie z przedsięwzięć innowacyjnych skierowanych do młodych ludzi i firm.

MS.jpg logo_PC.jpg starter_logo2.jpg

Zawiało HTML5 i JavaScriptem w Windows 8–kontrolki i interfejs

Grudzień 30, 2012 Dodaj komentarz

Kontrolki

Razem z frameworkiem WinJS otrzymujemy zestaw kontrolek, który jest podobny do tego, jaki otrzymują programiści XAML/C#.

image

Kontrolki definiujemy w kodzie w następujący sposób:

image

Mając możliwość dodatkowo zdefiniować opcji startowych:

<div data-win-control="WinJS.UI.DatePicker"

data-win-options="{maxYear: 2025}"></div>

Powyższa kontrolka prezentuje się następująco:

image

Kontrolka WinJS to jeden lub więcej elementów HTML, które są opakowane logiką w JavaScript oraz ostylowane za nas.

Taką kontrolkę możemy wyszukać w drzewie obiektów, m.in. wykorzystując getElementById.

Interfejs

Aplikacje, które budujemy muszą wspierać trzy różne widoki:

· Pełnoekranowy

· Zwinięty (szerokość 320px)

· Wypełniony (pozostałość miejsca na ekranie po widoku zwiniętym).

Widokiem niewymaganym jest widok portretowy. Rozkład widoków prezentuję poniżej:

image

Wchodząc do pliku default.css widzimy Media Query, które pozwalają na przełączanie się styli między poszczególnymi trybami. Możemy dla przykładu zdefiniować tę samą klasę, a o odmiennych wartościach dla poszczególnych trybów:

@media screen and (-ms-view-state: fullscreen-landscape) {

.klasa {

background-color: green;

}

}

@media screen and (-ms-view-state: filled) {

.klasa {

background-color: red;

}

}

@media screen and (-ms-view-state: snapped) {

.klasa {

background-color: yellow;

}

}

Dodatkowo budując interfejs musimy pamiętać o obsłudze wielu rozdzielczości ekranu. Uruchamiając symulator mamy do wyboru parametry od 1024px do 2560px. Budując interfejs zgodny z tak wielkim rozrzutem rozdzielczości musimy budować interfejs w oparciu o grafiki wektorowe, które w HTML są opisywane w jezyku SVG, albo wykorzystać grafiki zwykłe (jpg, png) w sposób specjalnie zaprojektowany dla Windows.

System Windows 8, klasyfikuje grafiki zwykłe w 3-ch grupach.

image

I przełącza się między nimi automatycznie w zależności od rozdzielczości ekranu użytkownika. Budując aplikację powinniśmy dostarczyć grafiki w trzech różnych formatach (rozdzielczościach) tak by dopasowały się do ekranu użytkownika w jak najlepszy sposób.

Sposób doboru właściwej grafiki jest bardzo prosty. W swoim kodzie wpisujemy, że chcielibyśmy zaprezentować użytkownikowi grafikę w następującej postaci:

<img src="/Obrazki/obrazek.jpg"/>

System jednak poszuka w katalogu obrazka o nazwie:

· obrazek.scale-100.jpg lub

· obrazek.scale-140.jpg lub

· obrazek.scale-180.jpg.

W zależności od rozdzielczości ekranu i gęstości pikseli jaką ma użytkownik na swoim urządzeniu.

Podsumowując ten mini przegląd HTML dla Windows 8

Podsumowując HTML5 i JavaScript otrzymały całkiem nowe życie wraz Windows 8. To już nie jest prosty język skryptowy, to potężna wtyczka do świata systemu operacyjnego, która pozwala budować aplikacje funkcjonalne na równi z tym, co mogą zrobić programiści C# czy Visual Basic.

Jednak powinniśmy być ostrożni w Naszych osądach i podchodzić to tej technologii z rezerwą pamiętaj o tym, że to dopiero wersja 1.0. Jak wiele języków ten też się zmieni, pod ugięciem użytkowników, którzy używają technologii, na co dzień.
Najważniejsze w tym jest to, że zyskują tutaj programiści świata internetowych aplikacji, którzy mogą teraz tworzyć aplikacje dla systemu Windows 8.

Zawiało HTML5 i JavaScriptem w Windows 8–urządzenia i uprawnienia

Grudzień 27, 2012 Dodaj komentarz

Dostęp do urządzeń zaprezentuję na przykładzie kamerki internetowej, wbudowanej często w tablety i komputery PC. W systemie Windows 8 aplikacja nie ma bezpośredniego dostępu do sprzętu, dlatego jeżeli chcemy uzyskać film lub zdjęcie musimy zwrócić się do sytemu z prośba o przekazanie takich danych. Wtedy system wyświetla z góry zdefiniowane okno, w którym prosi użytkownika o odpowiednie dane, które później przekazuje Nam, aplikacji.

Najpierw musimy poinformować system Windows o tym, że w Naszej aplikacji będziemy korzystać z kamerki internetowej, robimy to klikając na plik package.appxmanifest w Solution Explorer. Otworzy nam się okno, w którym powinniśmy przejść na zakładkę Capabilities i zaznaczyć Webcam jako element, do którego będziemy chcieli uzyskać dostęp.

Następnie przechodzimy do pliku default.html i dodajemy w body znacznik, w którym wyświetlimy zdjęcie oraz przycisk, który aktywuje mechanizm

<img alt="photo" id="photo"/>

<input id="takePhoto" type="button" value="Take a photo" />

Następnie przejdźmy do pliku default.js, w którym dopiszmy zdarzenie dla przycisku:

document.getElementById("takePhoto")

.addEventListener("click", function() {

var camera = new Windows.Media.Capture.CameraCaptureUI();

camera.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo)

.done(function(photo) {

document.getElementById("photo").src = URL.createObjectURL(photo);

});

});

Kod ten realizuje następujące rzeczy:

· Szukamy w drzewie obiektów takePhoto i przypisujemy do obsługę zdarzenia kliknięcia.

· Zdarzenie kliknięcia inicjalizuje klasę Windows Runtime Windows.Media.Capture.CameraCaptureUI. Proszę zwrócić uwagę, że nie ma znaczenia, że jesteśmy w JavaScript, otrzymujemy dostęp do klasy Windows RT, której instancje tworzymy na potrzeby naszego kodu.

· Obiekt kamery camera, posiada metodę captureFileAsync, która w asynchroniczny sposób wywoła specjalne okno systemu Windows i zapyta użytkownika o zdjęcie. Na końcu asynchronicznej metody dodaliśmy tak zwany promise done, który mówi o tym, że jak zakończymy wykonywanie metody captureFileAsync przejdziemy do wywołania kolejnej funkcji zdefiniowanej w środku done.

· Funkcja zdefiniowana w done, przypisuje zdjęcie do obrazka wyszukanego w drzewie obiektów.

Użytkownik klikając przycisk i aktywując naszą logike otrzyma zapytanie od systemu operacyjnego czy zezwala naszej aplikacji na dostęp do kamery:

image

po czym otrzyma okno, w którym może stworzyć zdjęcie i je udostępnić aplikacji.

Jeżeli użytkownik wyrazi na coś zgodę, w każdej chwili może odznaczyć to pozwolenie w specjalnym pasku wysuwanym z prawem strony ekranu klikając na Settings

image

I wybierając Permissions

image

Jeżeli chcielibyśmy otrzymać dostęp do pozycji użytkownika możemy użyć mechanizmu, który jest w stanie namierzyć komputer przy użyciu urządzenia GPS, wspierając się sieciami komórkowymi i sieciami WiFI w okolicy.

Tutaj scenariusz jest bardzo podobny, należy udać się do pliku manifestu i na zakładce Capabilities zaznaczyć uprawnienie Location by móc uzyskać dostęp do pozycji użytkownika.

Następnie należy napisać kod, który uruchomi cały mechanizm:

var location = new Windows.Devices.Geolocation.Geolocator();

location.getGeopositionAsync().done(function(position) {

var lat = position.coordinate.latitude;

var long = position.coordinate.longitude;

});

Powyżej stworzyliśmy zmienną location, do które przypisana została klasa lokalizatora z Windows Runtime, następnie dodana została implementacja mechanizmu pobierającego lokalizacje przy użyciu asynchronicznej metody getGeopositionAsync i promise done, który poczeka na pobranie lokalizacji, po czym uruchomi zdefiniowaną w sobie funkcję przypisującą do zmiennych wysokość i szerokość geograficzną.
W bardzo podobny sposób możemy zbudować dostęp do akcelerometru, jeżeli mamy takowe urządzenie w komputerze lub tablecie. Wystarczy stworzyć obiekt urządzenia:

var accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault();

accelerometer.addEventListener("readingchanged", function (e) {

var accelX = e.reading.accelerationX;

var accelY = e.reading.accelerationY;

var accelZ = e.reading.accelerationZ;

});

W następnym odcinku powiem trochę o dzieleniu się informacjami z innymi aplikacjami. Zapraszam.

Zawiało HTML5 i JavaScriptem w Windows 8

Grudzień 26, 2012 Dodaj komentarz

Możemy być zwolennikiem albo przeciwnikiem firmy Microsoft i tego, co robi, ale nie możemy zaprzeczać temu, że Windows 8 to rewolucja. Rewolucja, która widoczna jest w postawie firmy, po raz pierwszy od kilku lat odmiennej i niebojącej się diametralnych często ryzykownych zmian oraz rewolucja dla konsumentów, którzy do ręki dosłownie dostają system funkcjonalnie zbliżony do tego, co znali z przeszłości, ale nacechowany nowoczesnym design’em i nastawiony bardzo silnie na świat mobilny.

Jeszcze kilka lat temu nikt by się nie spodziewał, że technologia internetowa HTML będzie podstawą do budowania aplikacji. Dzisiaj, kiedy wojna przeglądarek to świat codzienny, na stół karty wykłada firma Microsoft inwestując setki tysięcy dolarów w technologię, która dotychczas rewolucjonizowała Internet.

Lata stagnacji na rynkach mobilnych i przespania momentu zwrotu użytkowników w kierunku tabletów spowodowały, że firma zrobiła kilka ryzykownych posunięć na planszy zwanej ekosystemem dla programistów, bulwersując, łamiąc konwencje i przyzwyczajenia jednocześnie stawiając na odświeżoną paletę technologii i API dla programistów bez brzemienia dawnych czasów, poprzednich wersji systemów z pod znaku okienek.

Oto dzisiaj mamy system, który jest dobry dla każdego, użytkownikom zapewniając rozrywkę na komputerze i tablecie, a programistom dając narzędzia i sklep, jako formę dystrybucji aplikacji, które możemy pisać w technologiach, z których korzystamy, na co dzień w pracy – od języków zarządzanych takich jak C# i Visual Basic po HTML i JavaScript, które dotychczas rządziły w Internecie.

To początek wojny o programistów, którzy mają się przyczynić do budowania wspólnego ekosystemu wokół technologii, która jest dziś na topie. Kilka następnych storn będzie opisywało propozycję firmy Microsoft dla programistów HTML, JavaScript i CSS, którzy zamknięci w świecie przeglądarek mogą rozprostować nogi i wbiec do środka systemu operacyjnego i wchodzić z nim w interakcje dając użytkownikom nowe aplikacje użytkowe oraz gry.

Windows 8 wprowadza model dystrybucji aplikacji w ramach Sklepu Microsoft Store, który pozwala instalować aplikacje zgodne z architekturą Intel 32/64bit oraz ARM. Ze względu na potrzebę obsługi różnych architektur procesorów został wprowadzony kompletnie nowy framework do pisania aplikacji, który nazywa się Windows Runtime (RT). Framework dba o projekcję swoich możliwości do języków zarządzanych i internetowych, przez co piszą w każdym z nich mamy wrażenie, że używamy tych samych elementów.

Podstawy środowiska

Umiejąc programować w HTML5, JavaScript i i CSS3 możemy używać składni już nam znanej, a przy okazji budować aplikacje oparte o mechanizmy znane tylko z systemu Windows. Czyni to naszą naukę łatwiejszą, bo musimy się douczyć tylko nowych elementów Windows 8 i ich projekcji dla JavaScript, który będzie służył nam do pisania logiki.

Budowanie aplikacji możemy oprzeć o płatną lub bezpłatną wersję Visual Studio. Na potrzeby tego artykułu można używać wersji bezpłatnej do użytku komercyjnego, która jest dostępna pod następującym adresem http://www.microsoft.com/visualstudio/eng/downloads

Pierwszy program tworzymy uruchamiając Visual Studio i wybierając z menu File->New project

image

Oraz wybierając JavaScript i Windows Store. Na potrzeby artykułu będziemy wybierać szablon Blank App, który nie zawiera żadnych gotowych okien, mechanizmów i styli, przez co jest idealny do prezentacji przykładów – nie ma nadmiarowych elementów, które przeszkadzałyby w zrozumieniu istoty platformy.

Po stworzeniu projektu widzimy w Solution Explorer wstępną zawartość projektu, która jest złożona z:

image

· .css – pliki zawierające style definiujące wygląd. Dozwolona wersja CSS to 3.

· .png – obrazki wykorzystywane w aplikacji. Możemy również dołączać pliki jpg i bmp.

· .js – pliki definiujące logikę aplikacji.

· .pfx – tymczasowy certyfikat, służący do podpisania aplikacji.

· .html – pliki definiujące szkielet widoków.

· .appxmanifest – plik definiujący funkcjonalność oraz uprawnienia Naszej aplikacji.

Projekt uruchamiamy wciskając klawisz F5 lub używając menu kontekstu uruchomienia dostępnego w oknie Visual Studio. Warto nadmienić, że aplikacja może być uruchomiona na lokalnym komputerze, zdalnym komputerze oraz w symulatorze systemu Windows 8.

image

· Local machine – instalacja aplikacji i uruchomienie na komputerze lokalnym.

· Remote machine – instalacja aplikacji i uruchomienie na komputerze zdalnym. To jedyna możliwość na podpięcie do Visual Studio tabletu z procesorem ARM i debugowanie aplikacji.

· Simulator – instalacja aplikacji na komputerze lokalnym, uruchomienie aplikacji w symulatorze. Symulator loguje się do lokalnego systemu na sesję zerową protokołem RDP, przez co posiada dostęp do wszystkich dotychczas zainstalowanych aplikacji

image

Symulator pozwala między innymi na testowanie aplikacji w różnych rozdzielczościach ekranu przy różnej gęstości pikseli (DPI), dzięki czemu możemy profilować i niwelować błędy w Naszej aplikacji nie posiadając stosownego sprzętu.

Podstawowy plik HTML, jaki otrzymujemy ma następującą zawartość

image

Wyjaśnijmy, co oznaczają poszczególne składowe:

· DOCTYPE definiuje dokument, jako HTML5.

· Biblioteki WinJS, który jest zestawem narzędzi, kontrolek i styli linkujemy przez specjalny prefiks // oznaczający ścieżkę wspólną dla wszystkich aplikacji Windows 8. Pliki te nie znajdują się bezpośrednio w projekcie.

· Dokument pozwala podłączyć własne style i pliki javascript

· Aplikacje Windows 8 pozwalają na używanie dotychczas znanych frameworków web-owych takich jak jQuery, jQueryUI czy…

· Szkielet projektu jest budowany przy użyciu zwykłych elementów dostępnych w ramach HTML5 i obsługiwanych przez Internet Explorer 10.

Do kompletu warto przyjrzeć się zawartości pliku JavaScript, który jest podłączony do szkieletu strony:

image

Kod JavaScript definiuje następujące aspekty:

· Zdarzenie onactivated, które reaguje w momencie uruchomienia aplikacji. Zdarzenie otrzymuje informacje od systemu operacyjnego, w jakim kontekście jest uruchomiona aplikacja (tu: launch) oraz jaki był poprzedni stan aplikacji (tu: terminated). Komplet danych pozwala nawigować użytkownika w odpowiednie miejsce już przy starcie aplikacji.

· Zdarzenie oncheckpoint, które pozwala odpowiednio reagować na uśpienie aplikacji, na przykład poprzez zapis informacji o tym, na jakim aktualnie jest użytkownik ekranie, danych, które wpisywał lub które przeglądał.

Aplikacja w momencie włożenia wykonuje wiele różnego rodzaju operacji, w tym:

image

· Uruchamia nowy proces oraz wątek główny aplikacji.

· Parsuje kod HTML, JS, CSS. To bardzo ważny punkt z punktu widzenia programisty, ponieważ zostajemy obdarci ze złudzeń, że kod pisany z językach Internetu dalej pozostaje interpretowany mimo tego, że wykorzystuje dość spory zasób elementów zarządzanych. Warto tutaj nadmienić, że parsowanie pozwala na dopuszczenie kodu do uruchomienia, który nie jest poprawny.

image

Model współistnienia aplikacji w ramach Windows RT mówi jasno o tym, że urządzenie powinno konsumować jak najmniej zasobów, by być efektywne energetycznie. Dlatego po raz pierwszy ze świata mobilnego do komputerów i tabletów przyszedł mechanizm pilnowania stanu aplikacji i przełączania go między Uruchomiona, Uśpiona, Wyłączona. System Windows pamięta stan Naszej aplikacji i wtłacza go do zmiennej za każdym uruchomieniem, przez co możemy odpowiednio zareagować.

image

Warto dodatkowo nadmienić, że kiedy uruchamiamy aplikację i chcielibyśmy przetestować jak działają Nasze zdarzenia do usypiania czy wskrzeszania aplikacji nie uda nam się obsłużyć tych zdarzeń w normlanym trybie. Dzieje się tak, dlatego, że Visual Studio prosi system operacyjny przy każdym włączeniu aplikacji by ta właśnie instancja nie podlegała prawom usypiania i wskrzeszania.

Możemy te tryby wymusić, przy włączonej aplikacji przełączmy się do Visual Studio i poszukajmy przycisku z listą prezentującą opcje, które chcemy przetestować w ramach cyklu życia aplikacji.

image

Zostało wspomniane już, że aplikacje są uruchamiane przez Internet Explorer 10. Jako programiści aplikacji internetowych przyzwyczailiśmy się do tego, że możemy podglądać kod podczas jego wykonania, śledzić jego działanie i ewentualnie podmieniać fragmenty kodu bez potrzebny ponownego uruchamiania serwisu. Uruchamiając aplikację Windows 8 napisaną w HTML nie działa skrót F12, który w przeglądarce uruchamiał narzędzia programistyczne.

Narzędzia te zostały wbudowane w Visual Studio 2012 i możemy je zobaczyć w akcji, uruchamiając program i ustawiając przerywnik w kodzie (breakpoint). Przykład poniżej:

image

Zmodyfikowałem funkcję onactivated, do której dopisałem kilka metod logujących istotne dla programisty rzeczy. Teraz, kiedy aplikacja w swoim wykonywaniu dojdzie do miejsca, gdzie jest ustawiony breakpoint przerwie wykonanie kodu i zaprezentuje nam konsolę JavaScript:

image

Oraz okno pokazujące hierarchię uruchomionego dotychczas kodu:

image

Na dziś wystarczy, powodzenia w swoich próbach uruchamiania HTML5 w Windows 8.

Windows Store–certyfikujemy aplikacje cz.1

Grudzień 13, 2012 Dodaj komentarz

Rozpoczynam cykl artykułów, na temat potencjalnych problemów z certyfikacją aplikacji w Windows 8 Store i tym jak te problemy rozwiązywać.

Dzisiaj na moją skrzynkę zawitał niemiły email, który mówił o tym, że certyfikacja aplikacji się nie udała. Oto powód:

image

czyli mam zaznaczone w uprawnieniach aplikacji, że będę korzystał z Internetu, a nie napisałem w regulaminie po co… w ogóle nie zamieściłem regulaminu. Dobra nauczka, teraz wiem, że regulamin łączy się z używaniem Internetu i potrzebą napisania im po co go chce używać.

Wystarczy w projekcie odznaczyć

image

i możemy aplikacje wysyłać ponownie.

Kategorie:Windows 8 Tagi: ,

Publikacja aplikacji w Windows Store

Listopad 23, 2012 Dodaj komentarz

Tworząc artykuł poczyniłem dwa założenia:

  • mamy aktywne konto w Windows Store
  • mamy gotową aplikację, którą chcemy włożyć do sklepu

 

Tworzymy paczki

Odpalamy Visual Studio z Naszym projektem i klikamy prawym przyciskiem myszy na projekcie wybierając
Store->Create App Packages

sotre1

Logujemy się do sklepu WIndows Store (bardzo ważne, musimy się zalogować kontem, które ma uprawnienia do sklepu Window Store, w tym do modyfikacji aplikacji)

sotre2

Visual Studio prezentuje nam listę aplikacji dodanych poprzez stronę internetową usługi. Jeżeli nie ma Naszej aplikacji możemy ją dodać klikając Reserve Name.

store4

Bardzo ważne okno, w którym wybieramy platformy jakie będziemy chcieli obsługiwać oraz wersję aplikacji widoczną dla osób przeglądających sklep

store5

Po chwili paczki są już gotowe do wysłania do sklepu

store6

Wystarczy pójśc do odpowiedniego folderu i je skopiować przez stronę do weryfikacji.

store7

Weryfikujemy program

Visual Studio ma w sobie zaszyte proste testy aplikacji, które potrafią znaleźć podstawowe błędy. Polecam sprawdzić swój program przed wysyłką.

Testy uruchamiają się po wybraniu w oknie z podsumowaniem tworzenia paczek przycisku Launch Windows App Certification Kit

store9

Po około 10 minutach wiemy, czy jest sens wysyłać aplikacje do sklepu

store10

Dodajemy do sklepu

Wchodzimy na portal dla programistów Windows 8 i dodajemy wszystkie informacje o naszej aplikacji oraz paczki wygenerowane przez Visual Studio.

store3

Pozostaje już tylko czekać. Powodzenia!

Idziesz na szkolenie z Windows 8 & Azure?–checklista dla Ciebie

Listopad 13, 2012 4 komentarze

Ostatnio jest gorący okres jak chodzi o sprawy związane z Windows 8. Firma Microsoft oraz ośrodki szkoleniowe organizują bardzo dużo wydarzeń, w tym też szkoleń, na których każdy z Nas może nauczyć się programowania.

Jako jeden z trenerów takich szkoleń postanowiłem stworzyć checklistę dla osób, które wybierają się na szkolenie gdzie trzeba mieć własnego laptopa.

Zakres szkolenia

Szkolenia obecnie są zbudowane z dwóch bloków tematycznych:

  • Windows 8 – od podstaw interfejsu do programowania
  • Windows Azure – w kontekście połączenia aplikacji w chmurze i aplikacji Windows 8
Instalujemy niezbędne narzędzia

Podstawowym narzędziem w jakim będziemy programować to Visual Studio 2012. Jeżeli mamy firmę lub zamierzamy ją mieć polecam zarejestrować się za darmo w programie BizSpark gdzie owo oprogramowanie w wersji najwyższej będzie dostępne za darmo:

  • Rejestracja w BizSpark – tutaj
  • Aktywacja oprogramowania dla siebie – tutaj
  • Aktywacja oprogramowania dla pracowników – tutaj

Jeżeli nie zamierzamy rejestrować się w BizSpark jest darmowa wersja Express do ściągnięcia tutaj.

Kolejnym krokiem jest instalacja SQL 2012 Express Edition, które znajdziemy tutaj .

Kolejnym krokiem jest instalacja Web Platform Installera, który znajdziemy tutaj.
Po uruchomieniu tego narzędzia musimy doinstalować elementy związane z Windows Azure:

clip_image002

w naszym przypadku należy zainstalować:

  • Windows Azure SDK 1.8
  • Windows Azure Libraries for .NET 1.8
  • Windows Azure SDK
Testujemy czy działa

Uruchamiamy Visual Studio 2012 i tworzymy nowy projekt Windows Store:

image

i wciskamy F5 – otrzymamy komunikat

image

Potwierdzamy i logujemy się podając dane do konta LiveId. Od teraz możemy pisać aplikacje na Windows 8.

Tworzymy kolejny projekt, tym razem związany z platformą chmury Windows Azure:

image

W kolejnym oknie dodajemy dwie role (nie jest to wymóg)

image

i po zaakceptowaniu wybieramy F5 – powinniśmy otrzymać komunikat, że tworzy się emulator storage:

image

po wybraniu OK uruchomi się projekt testowy.
Gdyby się okazało, że otrzymujemy komunikat podobny do tego

image

oznacza to że musimy ponownie zainstalować/naprawić SQL Server 2012 Express.

Na koniec

Jeżeli mamy konto BizSpark to mam jeszcze na koniec kilka propozycji…oczywiście jak mamy siłę, możemy:

  • otworzyć sobie dostęp do konta w sklepie Windows Store – tutaj opis.
  • otworzyć sobie dostęp do konta Windows Azure – tutaj opis.

UWAGA!!!

Firmy szkoleniowe rozdają karty prepaid, które umożliwiają zarejestrowanie się w Azure, ale nie pozwalają na rejestrację w Windows Store – uważajcie na to i jak chcecie mieć dostęp podawajcie numery waszych kart – w tej kwestii nie ma wyjścia.

Powodzenia na szkoleniu!