Tworzenie aplikacji mobilnej w serwisie Appser.pl

8 grudnia, 2013 w kategoriach: Pozostałe

t24_thumb_template
3,098 0
Dane:
  • Czas pracy: 30 min.
  • Poziom: Podstawowy
Opis:

W tej części tutorialu pokażemy Państwu proces tworzenia aplikacji dla firmy sprzedającej akcesoria fotograficzne prowadzącej sprzedaż w serwisie Allegro. Aplikacja będzie zsynchronizowana z portalem tak, aby można było zakupić przedmioty danego użytkownika bezpośrednio z poziomu aplikacji.

Pliki do pobrania

Pokaż/Ukryj wszystko


Wydawnictwo Strefa Kursów

Następnym krokiem jaki musimy wykonać jest zmiana wyglądu poszczególnych elementów naszej aplikacji. W tym celu należy przejść do zakładki “Wygląd”

Po załadowaniu się panelu odpowiedzialnego za wygląd naszej aplikacji, pierwszym krokiem jaki uczynimy będzie zmiana ikony aplikacji oraz obrazu ekranu powitalnego(ekran wyświetlany podczas ładowania się aplikacji). Aby to uczynić wystarczy kliknąć przycisk “Zmień” znajdujący się w sekcji “Ikona Aplikacji” oraz “Ekran Powitalny” i wybrać swoje obrazy.

Kiedy już ikona oraz obraz ekranu powitalnego został zmieniony kolejnym krokiem jest zmiana przycisków “systemowych” naszej aplikacji. Aby je zmienić należy przejść do zakładki “Przyciski” i analogicznie jak w poprzednim punkcie kliknąć przycisk “Zmień” i wybrać własne obrazy.

Teraz przyszła kolej na zmianę wyglądu naszego menu, paska tytułowego, nagłówka oraz tła naszej aplikacji. Aby zmienić wygląd menu, należy przejść do podstrony “Strona Startowa” klikając odpowiedni przycisk z lewego menu, a następnie wybrać zakładkę “Wygląd”. Menu w naszej aplikacji będzie siatką składającą się z trzech kolumn, dlatego też z menu wybieramy “Siatka x3”.

Następnie przechodzimy do zakładki “Opcje”. W tej sekcji możemy ustawić opcje związane z rozmieszczeniem naszego menu na ekranie smartfona. W naszym przypadku chcemy, aby pionowe wyrównanie było ustawione na “góra” a pioziome wyrównanie było do lewej. Resztę opcji pozostawiamy bez zmian.

Kolejnym krokiem jest zmiana paska tytułowego wyświetlanego w górnej części naszej aplikacji, tła naszej aplikacji oraz nagłówka. Aby je zmienić należy przejść do zakładek “Pasek Tytułowy”, “Tło” oraz “Nagłówek” i analogicznie jak w poprzednich przykładach kliknąć na przycisk zmień i wybrać własne obrazy.

Ostatnią czynnością przy zmianie wyglądu aplikacji jaką musimy zrobić jest zmiana paska tytułowego oraz tła dla podstron naszej aplikacji. W celu zmiany tych elementów przechodzimy do “Inne Strony” i analogicznie jak w poprzednich krokach zmieniamy obrazy dla tych elementów.

W tym rozdziale jak sama jego nazwa wskazuje zajmiemy się konfiguracją naszych modułów.

W pierwszym kroku zajmiemy się zmianą ikon oraz tytułów naszych modułów. Aby to zrobić dla każdego modułu z osobna należy kliknąć przycisk “Opcje”(ikona zębatki) a następnie z menu znajdującego się po lewej stronie wybrać “Tytuł”, zmienić jego nazwę oraz zatwierdzić przyciskiem “Zapisz zmiany”. Natomiast żeby zmienić ikonę naszego modułu wybieramy z menu po lewej stronie opcję “Ikona” i tak jak przy każdej wcześniejszej zmianie obrazu klikamy przycisk “Zmień”, wybieramy obraz, określamy rozmiar naszego obrazu(w naszym przypadku będzie to 60px na 60px) i zatwierdzamy zmiany.

Teraz przyszedł czas, aby dodać treść do naszych modułów. Aby dodać treść do każdego modułu należy kliknąć “Dodaj treść” a następnie w zależności od modułu wykonać poniższe czynności:

Moduł “Produkty”(pierwszy moduł od góry)

Dzieki temu modułowi użytkownicy naszej aplikacji będą mieli możliwość przeglądania naszej oferty z serwisu allegro posergregowanej według kategorii naszego asortymentu. W tym celu do modułu musimy dodać dodatkowe moduły(moduł strona WWW), zmienić ich nazwę, ikonę oraz w sekcji treść umieścić odnośnik do naszego konta allegro według wzorca:

Na samym początku adresu umieszczamy adres do mobilnego serwisu allegro: http://m.allegro.pl/
Następnie po adresie bez żadnych przerw wpisujemy frazę “szukaj.html”
Kolejnym krokiem jest dodanie identyfikatora naszego użytkownika poprzedzając go znakiem zapytania np: “?userId=13453886”
Ostatnim krokiem jest wstawienie szukanej frazy poprzedzonej anpersandem (znakiem &) wesług wzoru “&searchString=SzukanaFraza” np: “&searchString=bateria”

Tak więc jeżeli chcemy umieścić w module “produkty” dodatkowy moduł z bateriami wystarczy w pole “URL” modułu “strona WWW” wpisać:
“http://m.allegro.pl/szukaj.html?userId=13453886&searchString=bateria”

Dodanie jednego przykładowego produktu zostało pokazane na poniższym filmie.

Moduł “Sklep”

Moduł ten służy do zaprezentowania całego asortymentu sprzedawcy. Analogicznie tak jak w poprzednim module wystarczy wpisać np:

“http://m.allegro.pl/uzytkownik,przedmioty,NazwaKonta,Identyfikator,1.html”, gdzie “NazwaKonta” jest nazwą użytkownika allegro np: “krzymarkzdw” oraz “Identyfikator” jest identyfikatorem Twojego konta np: “13453886”

Moduł “O nas”

Ten moduł służy do wyświetlania informacji o firmie. Aby dodać treść do tego modułu należy kliknąć “Dodaj treść” a następnie wkleić poniższy kod HTML:

<p style=”text-align: center; margin-top: 10px;”><img src=”http://appser.pl/images/logo.png” alt=”logo” width=”290″ height=”51″ /></p>
<p style=”text-align: center; margin-top: 10px;”>Intersel jest sklepem zajmującym się sprzedażą akcesoriów fotograficznych takich jak statywy, torby, futerały, akumulatory, filtry, adaptery, wyzwalacze, lampy błyskowe i wiele więcej.</p>
<p style=”text-align: center; margin-top: 10px;”>Zawsze staramy się wychodzić naprzeciw naszym klientom oferując profesjonalną obsługę oraz najwyższej jakości produkty po przystępnych cenach.</p>
<p style=”text-align: center; margin-top: 10px;”>W naszym sklepie oferujemy produkty producentów takich jak:</p>
<p style=”text-align: center; margin-top: 10px;”><img src=”http://appser.pl/images/producenci.png” alt=”producenci” width=”290″ height=”235″ /></p>
<p style=”text-align: center; margin-top: 10px;”>…i wiele więcej</p>
<p style=”text-align: center; margin-top: 10px; margin-bottom: 30px;”>Dzieki tej aplikacji mają Państwo możliwość na bieżąco sprawdzać nowe produkty w naszej ofercie, zakupić nasze produkty z każdego miejsca bez potrzeby posiadania komputera oraz kontaktować się z nami w razie pytań dotyczących zamówienia lub w celu porady którą zawsze z chęcią udzielamy.</p>

Moduł “Mapa”

Kolejnym modułem jest moduł służący do wyświetlania lokalizacji siedziby naszej firmy. Aby dodać lokalizację wystarczy w module “Mapy” wybrać opcję “Z adresu” i wprowadzić swój adres siedziby.

Moduły “Zadzwoń” oraz “Napisz”

Obydwa moduły służą do komunikacji z klientami. Aby skonfigurować moduły wystarczy w opcjach podać numer telefonu oraz adres e-mail.

Moduł “Facebook”

Moduł ten służy do synchronizacji konta Facebook z aplikacją. Aby go skonfigurować wystarczy w treści modułu podać URL konta Facebook.

Moduł “Kupon Rabatowy”

Ostatnim modułem jest “Kupon Rabatowy”. Służy on do wyświetlania aktualnych rabatów. Jest to idealne rozwiązanie do przekonania klientów, aby skorzystali z naszej oferty. Aby skonfigurować moduł wystarczy w edytorze tekstu w module kliknąć ikonę: a następnie wkleić poniższy kod:

<p><img style=”display: block; margin-left: auto; margin-right: auto;” src=”http://appser.pl/images/logo.png” alt=”” width=”293″ height=”52″ /></p>
<hr />
<p style=”text-align: center;”>Kupując na naszych aukcjach allegro, bezpośrednio z aplikacji lub komputera po wpisaniu w kometarzu do transakcji słowo z kuponu, automatycznie zostanie doliczone <strong>10%</strong> rabatu na wszystkie artykuły.</p>
<p style=”text-align: center;”><img src=”http://appser.pl/images/kupon.png” alt=”” width=”300″ height=”127″ /></p>

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dodaj komentarz