, opbygning af en mobil webapplikationen med google læser api -,,,,, 2,,,,,,,,, 12,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, denne forelæsning vil lære dig at bygge en mobil nyheder læser webapplikationen bruger google læser api - grænseflade.denne anmodning vil blive meget "træk fokuseret", men instituttet i lærer her burde være nok til at uddybe i deres eget system.fra det tidspunkt, hvor dette skrift, der ikke er en officiel google læser api, så denne forelæsning vil gøre brug af den uofficielle api - grænseflade, der sædvanligvis anvendes ved bygning af google læser ansøgninger.,,, trin 1: begreber og endpoints, begreber, google bruger lidt forskellige udtryk for nogle af de backend dele af google læser api - grænseflade.noget af det er bundet til deres platform og nogle synes at skyldes forskydning, som ansøgningen modnet på forenden.et sådant begreb, der kaldes en "bækken".et vandløb udgør et indhold, der parterede eller filterd på forskellige måder.alle artikler fra et bestemt foderstof er en del af en strøm, og så er alle de artikler i en mappe. følgende er en kort oversigt viser, at forskelle i fælles client-side sprog og den tilsvarende google læser api - backend terminologi:,, klient side api, folder /- tag /etiket abonnement abonnement folk følger du ven gik med fælles udsendelse, endpoints, hvis de er logget ind i dine google læseren til prøve i følgende parametre i din browser:,, forbrugeroplysning:,, https://www.google.com/reader/api/0/user-info?produktion = json, liste over abonnement:,, https://www.google.com/reader/api/0/subscription/list?produktion = json, liste af foldere /mærker:,, https://www.google.com/reader/api/0/tag/list?produktion = json, over folk, du følger:,, https://www.google.com/reader/api/0/friend/list?produktion = json, liste over google læser præferencer:,, https://www.google.com/reader/api/0/preference/stream/list?produktion = json, over endpoints er rom, og vil blive anvendt i hele denne forelæsning.,, trin 2: bygning af grænsefladen, adgang til google læser vi bygger en skik på klasse.nedenfor er der en liste over de opgaver, denne klasse skal (går jeg ind på hver enkelt mere indgående senere): klasse funktioner,,,,,,,, - får google login) kode og læser edit tegn.,,, get_subscriptions, - - vender en liste over tegnede foder. get_tags,,,,, - returnerer en liste over foldere /hundetegn.,,, get_friends, - - vender en liste over folk, du følger efter.,,, get_stream_items, - - vender tilbage til en artikel fra et vandløb,.,,, set_article_read, - indeholder en artikel som læser.,,, set_article_starred, - stjerner en artikel,.,,, set_article_broadcast, - - giver en artikel til deres fælles liste.,,,, - set_article_review, gælder mærket "revision" en artikel,.,,, get_url, - - få anmodning med google http get_anon_url autentificering.,,,,, - http få anmodning uden google autentificering.,post_url,,,, - efter anmodning med google http post_anon_url autentificering.,,,,, - efter anmodning, uden at google http autentificering.,, egenskaber, vores php klasse vil anvende en række forskellige egenskaber, som de kan gætte, følgende egenskaber vil blive fastsat til dine google læser e - mail konto id og kodeord: offentlige $gremail = "; offentlige $grpasswd ="; følgende egenskaber anvendes i klasse stritte funktioner (se kildekoden til disse): offentlige $useragent = tuts + rss + bot '; offentlige $reference = 0, offentlige $proxyurl = ", jeg har medtaget proxy støtte, fordi min vært for isp (godaddy) kræver udgående trafik gennem en fuldmagt.hvis du ikke har brug for proxy støtte have $stedfortræder sat til 0 i gr ud. folkesundhedsprogrammet. næste, vi har mange i begyndelsen endpoints for api er til rådighed: beskyttet $_urlbase = https: //www.google. kom, beskyttede $_urlapi = https: ///////////////www.google. kom - /api /0 "beskyttede $_urlauth = https: //////////////////////regnskaber www.google. kom clientlogin" beskyttede $_urltoken = https: //////////////////////www.google. kom - api /0 /tegn "beskyttede $_urluserinfo = https: //////////////////////www.google. kom - api /0 /bruger - info" beskyttede $_urltag = https: //////////////////////www.google. kom - api /0 /mærke "beskyttede $_urlsubscription = https: //////////////////////www.google. kom - api /0 /abonnement, beskyttede $_urlstream = https://www.google. kom /læser /api /0 /stream "beskyttede $_urlfriend = https: //////////////////////www.google. kom - api /0 /ven", de næste tre egenskaber oplysninger indsamlet under autentificeringsprocessen: offentlige $userinfo = "beskyttede $) ="; beskyttet $p.m. = "; i anvendelsen afsnit vi sætter disse til folkesundhedsprogrammet møder, så vi ikke er nødt til at logge ind igen med hver anmodning,.,, trin 3: udformning af klasse funktioner, følgende funktioner vil gøre det hårde arbejde for vores ansøgning., login funktion, er vi nødt til at slå google autentificering api - at starte: $data = & e - mail - =". $- > gremail. & passwd = ". $- > grpasswd. & service = reader & kilde =". $- > useragent. "& fortsætte = http://www.google.com. $resultat = $- > post_anon_url ($- > _urlauth $data), efter anmodning autentificering api, den første ting at indsamle, er de $) snor.snoren forsyninger google er autentificering lag med vores papirer.bliver det $), er nyttig for næsten alle google tjeneste., preg_match (/) = ((r *) /'$resultat, $match); $- >) = $match [1], det næste er $tegn, og vi bliver nødt til at slå en anden effektparameter for det.tegn er specifikke for google - læser og er nødvendige for anmodninger om, at skrive eller ændre stat. $- > p.m. = $- > get_url ($- > _urltoken), den tredje er en brugeroplysninger genstand, vi skal bruge brugeridentifikation del.nogle af de api muligheder kræver deres google brugeridentifikation, hvilket er et stort antal, der svarer til deres konto og ikke den e - mail - id for logins.de bruger - info indeholder også det store antal, der anvendes til at få adgang til deres fælles foder. $- > userinfo = json_decode ($- > get_url ($- > _urluserinfo), en liste over opgaver, de er simple opgaver, at få en liste over din lever på forskellige måder., get_subscriptions, returnerer en liste over alle foderstoffer, du har tegnet:, funktion get_subscriptions() {$resultat = $- > get_url ($- > _urlsubscription. /liste?produktion = json) tilbage json_decode ($resultat)), get_tags, returnerer en liste over alle de mapper og mærker:, funktion get_tags() {$resultat = $- > get_url ($- > _urltag. /liste?produktion = json) tilbage json_decode ($resultat)), get_friends, returnerer en liste over folk, du følger:, funktion get_friends() {$resultat = $- > get_url ($- > _urlfriend. /liste?produktion = json) tilbage json_decode ($resultat)}, post funktion, det er kød af klasse - og alt andet fører frem til.med denne funktion, vender vi det enkelte artikler, der er baseret på de kriterier, der er specificeret.de $stream, er trukket fra resultaterne af listen funktioner, og det kunne være et signal fra en ven, en hel mappe, eller et foderstof.- n er antallet af artikler til at vende tilbage på et tidspunkt.for det program, jeg har begrænset det til 20, men hvis deres genanvendelse af for noget andet, så du kan slå den tidstro skærm op til 1000.efter 1000 - brug fortsat mulighed, som er uden for anvendelsesområdet for denne artikel,.,, get_stream_items, accepterer en række parametre, og med de misligholdelser, du er virkelig nødt til at give det en strøm:, funktion get_stream_items ($å = "$xt_a = system ('user /- /tilstand /kom. google /læse"), $daysago = 3 $n = 20 $magi = sand) {, $af, anvendes til at fortælle google, læser du ikke ønsker at vende tilbage til en artikel ældre dem denne gang.google læser går epoke, - - men jeg gerne bruger $daysago, fordi det er nemmere at gå efter dage i stedet for sekunder.ud fra det, vi kan beregne, $af, fra nuværende tidspunkt.$ck, er vigtig, men jeg har aldrig fået en god forklaring på det, og uden en officiel google læser api kan det forbliver et mysterium.jeg har sat den til time() * 1000, og det virker bare, mens time() * 100 ikke. $ot = time() - ($daysago * 86400); $ck = time() * 1000;, $magi er en boolean - at returnere artikel med google læser "magi" rangordning, eller hvis falske, af de nyeste først.du kan også form af ældste først ved at fastsætte $r = "o", hvis du vil. hvis ($magi = = sand) ($r = »a«) andet ($r = "n"}, $xt_a, anvendes til at udelukke varer af foder på basis af metadata i forbindelse med artikel er stat.ved misligholdelse kun fungere, returnerer ulæste stillinger, fordi det er undtagen varer mærket som læser. $xt = "; for hvert ($xt_a som $nøgle = > $værdi) ($xt. = & xt =". $værdi;}, vi vedtager den endelige url google - og vende tilbage med resultaterne efter parametre er: $url = $- > _urlstream. /contents /". $å."?ot = ". $af. & r =". $r. $xt. & n = "n". $& ck = ". $ck. & klient =". $- > useragent. $resultat = $- > get_url ($url) tilbage json_decode ($resultat)), der fungerer, og tre af disse funktioner er vant til at skrive tilbage til google - læser og mark artikler med en bestemt stat.den sidste, der anvendes til at fastsætte et navneskilt.du kunne let at sammenfatte alle fire, til en enkelt funktion og give "en =" som en funktion parameter.det der er bare min præference, jeg foretrækker det på denne måde, så den kode med klasse er renere og lettere at læse.hvis du har planer om at skabe deres egen funktion, kan du indgive flere "= =" på et tidspunkt.også du kan bestå multiple "jeg =" og "s =" muligheder, du har bare at give et tilsvarende beløb og i den rigtige rækkefølge.jeg generelt gå 10 på et tidspunkt, hvor mærkning mange produkter, som læser. artikel til "læse":, funktion set_article_read ($id $stream) {$url = $- > _urlapi. "/edit?pos = 0 & klient = ".$- > useragent. $data = = bruger - /- /tilstand /com. google /læse & async = sandt & s = ". $å. & i =". $. "& t =". $- > tegn; tilbage $- > post_url ($url - data)}, star den artikel, funktion set_article_starred ($id $stream) {$url = $- > _urlapi. "/edit?pos = 0 & klient = ".$- > useragent. $data = = bruger - /- /tilstand /com. google /med & async = sandt & s = ". $å. & i =". $. "& t =". $- > tegn; tilbage $- > post_url ($url - data)}, deler den artikel, de, der følger dig:, funktion set_article_broadcast ($id $stream) {$url = $- > _urlapi. "/edit?pos = 0 & klient = ".$- > useragent. $data = = bruger - /- /tilstand /com. google /radio & async = sandt & s = ". $å. & i =". $. "& t =". $- > tegn; tilbage $- > post_url ($url - data)}, dette sidste gælder en revision - tag:, funktion set_article_review ($id $stream) {$url = $- > _urlapi. "/edit?pos = 0 & klient = ".$- > useragent. $data = = bruger - /". $- > userinfo - > brugeridentifikation. /etiketten /review & async = sandt & s =". $å. & i =. "$" &id. amp; t = ". $- > tegn; tilbage $- > post_url ($url - data)), ovenfor, bør anvendes i app 'en, så du kan mærke noget til revision, når den næste ved hjælp af en regelmæssig browser.,, trin 4: den anvendelse, denne grænseflade er opbygget på grundlag af den fremragende html5 boilerplate på http: ///////////////html5boilerplate. kom.jeg tog index.php fra boilerplate og opdeles i hovedet og fod omfatter filer.den vigtigste side er index.php og accepterer en & liste, querystring værdi, som angiver, hvilken liste til at vise.det misligholdelser til mappe liste.et punkt på listen, vil gå til articles.php med, & strøm, og & liste, blev vedtaget.klassen er placeret i en fil gr.php med gr-config.php faktisk den fil, som indeholder det til de andre.det er måske indlysende, men i gr-config.php vil vi også sætte den ud af mulighederne for klasse.den sidste php fil er set_article.php.det vil blive kaldt en ajax anmodning fra articles.php og er ansvarlig for at fastsætte funktioner. jeg har medtaget de to mærker under i header.php omfatter akter, men de sagde:, < forbindelse rel = "æble røre nystartede billede" href = "splashimage. men heller ikke dér er menneskene sikre" > < meta - navn = "æble mobile web - app, der kan" indhold = ja /> gør de det web - app funktion mere som en almindelig app, når du tilføjer det område på den programmerbare homescreen.apple røre nystartede image, giver et billede til at udvise den største side er ladt.apple mobile net app i stand, gør stedet kører på sin egen safari instans snarere end i den almindelige safari instans.den eneste problematiske ting er, at med æble - mobile net app i stand, der skal jo, at et link til et andet område åbner sammenhængen i de vigtigste safari instans, således at tvinge dig til at multitaske tilbage til læseren app.,, løntrin 5: bygning af den vigtigste side, for denne ansøgning, vi skal bygge et vigtigste side, som vil vise en liste over, foldere (forvalgt værdi), venner eller, abonnementer, skærmbillede, den fælde, her er planen i begyndelsen af index.php, articles.php, og set_article.php sider:, session_set_cookie_params (300); session_start(); include_once ('gr-config. php '); include_once ('header. folkesundhedsprogrammet aspektet "); den menu, menuen er en simpel html liste, som kan anvendes til at finde forskellige lister over abonnenter:, < div id =" menu ">< ul > < li klasse = "mærker" onclick = "vindue. beliggenhed = index.php?liste = hundetegn "> < /li > < li klasse =" straks "onclick =" vindue. beliggenhed = index.php?liste = ubåde "> < /li > < li klasse =" venner "onclick =" vindue. beliggenhed = index.php?liste = venner "> < /li > < /ul > < /div >, menuen bruger en sprite til knapper på grundlag af nice - ikon, der glyphish. koden for den første anvendelse af klasse.vi vil undersøge, om & listen er fastsat, og hvis ikke, misligholdelse tags synspunkt.så er det bare et skifte erklæring ved, hvad liste til at bygge og en funktion til brug. det første misligholdelse, $liste til mærker, hvis der ikke er vedtaget og derefter give $liste, til et skift.når $liste, tændstikker ubåde, vi bare produktion en ret ærlig liste over alle de abonnementer tilbage.dette kan være meget tunge brugere og derfor mærker tilstand er standard, hvis (isset ($_get [»liste '])) ($liste = $_get [»liste']} andre {$liste = "mærker"} skift ($liste) (sag ubåde: $ubåde = $gr - > get_subscriptions(); for hvert ($ubåde - > abonnement som $under) (echo '< li onclick = "window.location = \\' articles.php?liste = $liste, & å = $sub - > id 'er ">   , $sub - > titlen < div klasse =" arrow "> < /div > og lt; /li >"} bryde; de oplysninger, der kommer tilbage med fuld etiket snor i stedet for bare at mappen navn.oprettelse af $fjerne vil lade os slippe af med den unødvendige dele af mærket snor og vise den mappe navn.desværre er der ingen måde at udelukke gennemgang af de returnerede etiketter, så jeg var nødt til at klare det med folkesundhedsprogrammet.jeg også tjekke, at vi kun har mærket:, "mærker": $tags = $gr - > get_tags(). $fjerne = brugeren /". $gr - > userinfo - > brugeridentifikation. /etiketten /; for hvert ($mærker - > plader som $mærke) (hvis (strpos ($- - > id, /etiketten /') > 0 & & strpos ($- - > id, /undersøgelse') = = 0) ($afsnit = str_replace ($fjerne", - tag - > id), echo "< li onclick =" window.location = \\ 'articles.php?liste = $liste, & å = $- - > id 'er ">   , $titel" < div klasse = "arrow" > < /div > < /li > «) pauser, venner, url, men har mange yderligere oplysninger fra brugerens profil.en god ting, vi kan bruge, er billedet og medtage den som en 32 pixel billede:, "venner": $venner = $gr - > get_friends(); for hvert ($venner - > venner som $ven) (hvis ($ven - > contactid!= - 1) (echo '< li onclick = "window.location = \\' articles.php?liste = $liste, & å = $ven - > stream "." "> < img klasse =" friends_icon "src =" http: //s2. googleusercontent. kom. $ven - > photourl. "?sz = 32 ">, $ven - > displayname, < div klasse =" arrow "> < /div > < /li > «) pause.}, trin 6: opbygning af artikel s, denne side er, hvor du vil se artikel, mark dem læse dem, der tages op til fornyet overvejelse senere mærke dem som favorit eller dele dem med dine venner, skærmbillede, fælde, den samme som den vigtigste side. den menu, en simpel html liste.jeg er ikke fan af window.history for en knap, så de tilbage, jeg sender dem tilbage til den liste, de så på. < div id = "menu" > < ul > < li klasse = "tilbage" onclick = "window.location = /index.php?liste = <?php echo $_get [»liste ']?> "> < /li > < li >   < /li > < li klasse =" læse "onclick =" set_article ('read) "> < /li > < li klasse =" med "onclick =" set_article ('starred) "> < /li > < li klasse =" sendt "onclick =" set_article ('broadcast) "> < /li > < li klasse =" revision ". onclick =" set_article (i det følgende benævnt »fornyet) "> < /li > < /ul > < /div > koden, get_stream_items, funktion fra vores gruppe er den primære drivkraft til side, og de fleste af misligholdelse er god til det her.uden at det udelukker punkter, der er markeret som læse, men jeg har forlænget de $xt_a, system til også at udelukke varer mærket med "revision" etiket /navneskilt.på denne måde punkter vi mærke for revision, aldrig at dukke op på denne liste, selv om vi ikke har læst dem endnu.We are going to load up the articles in hidden ,div, tags and only show the ,:first-child,, then manipulate the others via JavaScript., $stream = $_GET['stream']; $articles = $gr->get_stream_items($stream,array('user/-/state/com.google/read','user/'.$gr->userInfo->userId.'/label/Review')); if (count($articles->items) > 0) { foreach ($articles->items as $article) {,Instead of trying to hold state in a session or an array in JavaScript, I'm just using the relavant pieces of data as attributes on each article's wrapper div., echo '<div class="article" id="',$article->id,'" stream=',$article->origin->streamId,'>'; echo '<div class="article-title"><a target="_blank" href="'- artikel - > alternativt [0] - > href, "> - artikel - > titlen < /a > < /div > '; indholdet kan komme tilbage i summarisk form eller ikke afhængig af foderet.siden vi er mobile vil prøve i resumé, men tilbage til fulde indhold, hvis det ikke er til rådighed.også vi vil gøre forbindelserne i artikel pop i et nyt vindue. hvis (isset ($artikel - > resumé - > indhold) ($indhold = str_replace ('href = ",'target =" _blank "href = $artikel - > resumé - > - indholdet)} andre {$indhold = str_replace ('href =",'target = "_blank" href = $artikel - > indhold - > indholdet)} endelig vise, hvad vi har: echo 's < div klasse = "artikel resumé" > "$indhold, < /div > « echo' < /div > «), trin 7: javascript for artikel aktioner, javascript er stærkt afhængig af jquery.den article.php menu opkald, set_article(), når du klikker på en aktion, og opfordrer til, at set_article.php proces., set_article(), vil først tage id og strøm fra den artikel, vi ser er, div. tag.det vil så tage den samlede til at affyre et ekstra, hvis vi rammer den ende af de foreliggende artikler.den set_article.php manuskript vil vende tilbage med en 1, hvis de foranstaltninger, der skal gå til den næste artikel.ellers kontrol foranstaltninger udført og enten lys - eller andel ikon.det er ved hjælp af $. eq(), og den variable, skære, at opregne gennem tilbage artikler., fastsættelse af samlede variable dynamisk i stedet for bare at bruge "20":, var i alt = $(') artikel). size(); funktion set_article (aktion) (tilføjelse af tillægger artikel slikpapir. okay, tag:, id = $(') artikel). - ækvivalent (skive). attr ('id) å = $(') artikel). - ækvivalent (skive). attr ('stream), her går vi id og strøm til set_article.php side og kommer tilbage. 0.1: den handling kræver fjernelse af den artikel, og således at de 0, betyder, at det kun er en stat. $. kom ('/set_article.php?action='+action+'&id='+id+'&stream='+stream,function(data){ if (data=="1") { $('.article').eq(slice).hide(); slice += 1; $('.article').eq(slice).show(); $('.starred').css({backgroundPosition: '-62px -31px'}); $('.broadcast').css({backgroundPosition: '-93px -31px'}); } else {,If it returns a 0, then we need to see what action was taken so the proper icon state is also switched:, if (action == 'starred') { $('.starred').css({backgroundPosition: '-62px 0px'}); } else { $('.broadcast').css({backgroundPosition: '-93px 0px'}); } } if (slice >= total) { window.location.reload(true)))), trin 8: anvendelse af foranstaltninger til artikler, dette er den sidste del af folkesundhedsprogrammet, som vil give os mulighed for at manipulere den artikel. den fælde, den samme som den vigtigste side. den kode, hårdt arbejde i klassen, så denne side er egentlig bare skifte at løbe den klasse funktion, der matcher op med handling.du kan spørge sig selv, hvorfor google kræver $strøm, variabel.fra hvad jeg kan se, at det har noget at gøre med, hvordan google opbevarer alle læseren oplysninger og skærer den transaktion, når behandlingen af disse edit funktioner. hvis (isset ($_get [»tiltaget«)) ($action = $_get [»tiltaget«); $id = $_get ['id '); $å = $_get ['stream'] skift ($) {"læse": $r = $gr - > set_article_read ($id $stream); echo '1', bryde; sag "med": $r = $gr - > set_article_starred ($id - stream), echo "0". bryd; sag udsendelse ": $r = $gr - > set_article_broadcast ($id $stream), echo" 0 ". pause, sag" revision ": $r = $gr - > set_article_review ($id $stream) echo - 1);pauser), trin 9: afrunding det med css, de fleste af css er ikke noget særligt.jeg har to centrale styles medtaget nedenfor:,. artikel resumé img,. artikel oversigt omfatter (maks. højde: 50%; max bredde: 50%). artikel: for det første barn (display: blok.}, max højde: 50%, og max bredde: 50%, erklæringer, er meget nyttige, når genbrug html, der kan have billeder og journalister med.det holder de billeder og youtube omfatter overbelastes flytbar skærm,.,, trin 10: lære mere, indtil der er en officiel api, disse steder er godt for at få yderligere oplysninger om bygning ned med google læseren:,, venner af den uofficielle google læser api: en diskussionsgruppe med masser af god information, og folk. niall kennedy: en af de første til at rode med api, stak overløb: spørgsmål, mærket med google læser api - jeg er begyndt at besvare nogle af dem). pyrfeed: wiki for denne pyton klasse har meget info. martin oversøiske departementer: godt arbejde nedbryde af ip - adresser, der anvendes i api - grænseflade.