Good-news-apps mit Re­act JS

PAGE - - Inhalt -

Mit dem Ja­va­script-frame­work kann man na­ti­ve Apps für IOS und An­dro­id aus ei­ner Qu­el­le ent­wi­ckeln

Ei­ne na­ti­ve App für An­dro­id und IOS, aus ei­ner Qu­el­le ent­wi­ckelt und zen­tral ge­war­tet: Die­sen Wunsch er­füll­te die App-agen­tur Hy­brid He­roes dem Start-up Good News – dank des Open-sour­ce-ja­va­script-Frame­works Re­act Na­ti­ve auch noch un­ge­wöhn­lich preis­güns­tig

● Min­des­tens zehn gu­te Nach­rich­ten pro Tag ver­brei­ten – das ist die Mis­si­on von Good News. Das 2017 ge­grün­de­te Ber­li­ner Start-up ge­hört zur Good Impact Fa­mi­ly der Noah Foundation in Ber­lin, ei­ner pri­va­ten, un­ab­hän­gi­gen Stif­tung, die nach­hal­ti­gen Jour­na­lis­mus un­ter­stützt. Zur Fa­mi­lie zäh­len noch ei­ni­ge an­de­re Start-ups wie Good Jobs, Good Events und Good Tra­vel, die nicht ge­winn­ori­en­tiert ar­bei­ten, son­dern sich selbst tra­gen und Ge­win­ne re­inves­tie­ren sol­len.

Die Good-news-re­dak­ti­on sucht und ver­öf­fent­licht ge­zielt Be­rich­te über Ge­schich­ten des Ge­lin­gens in Ta­ges­zei­tun­gen und Ma­ga­zi­nen, um der all­ge­mei­nen Ne­ga­tiv­be­richt­er­stat­tung Mut und Hoff­nung ent­ge­gen­zu­set­zen. »Unser Ziel ist es, mit die­ser Form von Jour­na­lis­mus die Zu­kunft po­si­tiv zu gestal­ten«, er­klärt Jo­na­than Wid­der, Jour­na­list und Re­dak­ti­ons­lei­ter bei Good Impact. Da­für be­nö­tig­te Good News ei­ne App für IOS und für An­dro­id, denn die Ziel­grup­pe ist mo­bil, das zeig­ten Be­fra­gun­gen po­ten­zi­el­ler User.

Wie lässt sich ei­ne Cross-plat­for­mApp güns­tig ent­wi­ckeln?

Nut­zer­be­fra­gung, Per­so­na-ent­wick­lung so­wie Cor­po­ra­te- und Web­de­sign er­le­dig­te die Good-newsRe­dak­ti­on in­hou­se. Auch das ge­wünsch­te Look-an­dfeel der künf­ti­gen App hat­te De­si­gner Ke­vin Fuchs in Pho­to­shop-mock­ups be­reits fest­ge­hal­ten – dann war die Zeit reif für die Über­ga­be an ei­ne ge­eig­ne­te App-schmie­de. Ke­vin Fuchs’ ehe­ma­li­ger Auf­trag­ge­ber, die auf die Ent­wick­lung von Cross-plat­for­mApps spe­zia­li­sier­te Agen­tur Hy­brid He­roes in Ber­lin-kreuz­berg, konn­te dem Start-up ei­ne kos­ten­güns­ti­ge Ent­wick­lung an­bie­ten.

»Unser Bud­get war nicht so prall, was man sich bei ei­nem So­ci­al-start-up viel­leicht vor­stel­len kann«, so Jo­na­than Wid­der. Man be­weg­te sich im un­te­ren fünf­stel­li­gen Be­reich und hät­te sich ei­ne auf­wen­di­ge Ent­wick­lung mit zwei na­ti­ven Apps schlicht nicht leis­ten kön­nen. Zu­mal Jan Ger­win, Part­ner der Hy­brid He­roes, die Good-news- Grün­der auf­klär­te, dass die Kos­ten mit der na­ti­ven App-ent­wick­lung für

IOS und An­dro­id nicht ab­ge­schlos­sen sei­en, son­dern dass je­de wei­te­re Aus­ge­stal­tung im­mer dop­pelt zu Bu­che schla­gen wür­de. Denn man wür­de je­de App mit ei­nem Ob­jec­tive- C-/swift- be­zie­hungs­wei­se ei­nem Ja­va-de­ve­l­oper er­neut an­fas­sen müs­sen. Das hät­te den fi­nan­zi­el­len Rah­men von Good News kom­plett ge­sprengt.

Bei den Hy­brid He­roes war das Ber­li­ner Start-up den­noch an der rich­ti­gen Adres­se, denn die Ap­pA­gen­tur nutzt für die Ent­wick­lung von Web-, Pro­gres­si­ve-web- und na­ti­ve Apps in ers­ter Li­nie die Ent­wick­lungs­um­ge­bun­gen Io­nic und Re­act Na­ti­ve. Io­nic, ein Open-sour­ce-web-frame­work auf Grund­la­ge von HTML5, CSS3, Sass und Ja­va­script, wä­re in Fra­ge ge­kom­men, wenn Hy­brid He­roes sich für ei­ne Hy­brid- oder Pro­gres­si­ve-web-app ent­schie­den hät­te. Da aber na­ti­ve Apps ent­ste­hen soll­ten, ar­bei­te­ten die De­ve­l­oper mit Re­act Na­ti­ve, ei­nem OpenSour­ce-web-frame­work, das ur­sprüng­lich von Face­book ent­wi­ckelt wurde. Mit ihm las­sen sich na­ti­ve Apps für An­dro­id und IOS platt­form­über­grei­fend und par­al­lel in Ja­va­script ent­wi­ckeln.

»Na­tür­lich ha­ben wir über­legt, ob wir Good News ein­fach als Web-app pro­gram­mie­ren, das wä­re am güns­tigs­ten ge­we­sen«, sagt Chris­ti­an Jus­tus, Part­ner und tech­ni­scher Lei­ter bei Hy­brid He­roes. Doch wünsch­te sich die Good-news-re­dak­ti­on Push No­ti­fi­ca­ti­ons, um die Nut­zer mit ein, zwei Ar­ti­keln in die App zu lo­cken. »Das wä­re mit Web-apps oder Pro­gres­si­ve-web-apps vor al­lem für IOS nur schwer bis gar nicht dar­stell­bar ge­we­sen«, ur­teilt Chris­ti­an Jus­tus und iden­ti­fi­zier­te Re­act Na­ti­ve ziem­lich schnell als das pas­sen­de Ent­wick­lungs­tool.

Re­act Na­ti­ve über­setzt Ja­va­script in na­ti­ve Spra­chen

Bei Re­act Na­ti­ve leis­te­ten die Face­book-ent­wick­ler und jetzt die De­ve­l­oper aus der äu­ßerst ak­ti­ven Com­mu­ni­ty gan­ze Ar­beit. Der un­ge­heu­re Vor­teil von Re­act Na­ti­ve ist, dass man die App si­mul­tan für IOS und An­dro­id er­stel­len kann. »Man ent­wi­ckelt nur ein­mal«, er­klärt Chris­ti­an Jus­tus. Das Re­act-na­ti­ve­Team bei Face­book de­fi­nier­te gän­gi­ge User-in­ter­face-pat­terns in Ja­va­script wie auch die pas­sen­den Äqui­va­len­te in IOS und An­dro­id. Die Ent­wick­ler ar­bei­ten al­so mit ei­nem Co­de-edi­tor – in die­sem Fall Mi­cro­softs Vi­su­al Stu­dio Co­de – in Ja­va­script. Re­act Na­ti­ve wirft dann zwei iden­ti­sche Ui-pat­terns in Ob­jec­tive- C für die na­ti­ve ios-app und in Ja­va für die na­ti­ve An­dro­id-app aus.

Braucht man bei­spiels­wei­se ei­ne Scroll View, al­so ei­ne An­sicht, in der man nach oben und un­ten scrol­len kann, sucht man ein pas­sen­des Ja­va­scrip­tPat­tern, das man in Re­act Na­ti­ve der Mar­ke ent­spre­chend ge­stal­tet, oder greift auf ein ex­ter­nes UI-FRAme­work (sie­he »Ui-frame­works für Re­act Na­ti­ve«, Sei­te 85) zu­rück. Die­ses mit Ja­va­script de­fi­nier­te Pat­tern sucht sich in Re­act Na­ti­ve dann selbst das pas­sen­de Pen­dant wie Uis­croll­view in Ob­jec­tive- C und Scroll­view in Ja­va. »Ei­gent­lich wä­ren teu­re und ra­re De­ve­l­oper, die Ob­jec­tive- C und Swift oder Ja­va be­herr­schen da­mit nicht mehr not­wen­dig. Aber an der Schnitt­stel­le, wo Ja­va­script- Co­de in die na­ti­ven Spra­chen über­setzt wird, könn­te man je­der­zeit na­ti­ve Fea­tu­res an­do­cken«, er­klärt Chris­ti­an Jus­tus.

Die­se Vor­ge­hens­wei­se hät­te al­ler­dings die Wart­bar­keit un­ter­gra­ben. Denn Re­act Na­ti­ve ver­ein­facht nicht nur die Ent­wick­lung, auch beim Up­daten oder Er­wei­tern der App, müs­sen die Ja­va­script-de­ve­l­oper den Co­de nur ein­mal be­ar­bei­ten – die Än­de­run­gen flie­ßen dann au­to­ma­tisch in bei­de Apps ein. »Die Apps sind kom­plett na­tiv und ha­ben bei der oft schwie­ri­gen Zu­las­sung in App­les App Sto­re kei­ne Pro­ble­me kre­iert«, so Jus­tus.

Push No­ti­fi­ca­ti­ons und Mehr­spra­chig­keit

Doch na­tür­lich lief auch in die­sem Pro­jekt nicht gleich al­les glatt. Ei­ne Her­aus­for­de­rung wa­ren die Push No­ti­fi­ca­ti­ons, mit de­nen Hy­brid He­roes im Zu­sam­men­hang mit Re­act Na­ti­ve zum ers­ten Mal ar­bei­te­te. »Wir brauch­ten ein we­nig, bis wir den

Bo­gen her­aus­hat­ten«, er­in­nert sich Jus­tus, dem die Mehr­spra­chig­keit der App Kopf­zer­bre­chen be­rei­te­te. Schließ­lich soll­ten die deut­schen User ih­re Push No­ti­fi­ca­ti­ons in deut­scher Spra­che be­kom­men und die eng­li­schen in Eng­lisch. »Ge­löst ha­ben wir das Pro­blem, in­dem wir den Goog­le-ser­vice Fi­re­ba­se Cloud Mes­sa­ging nutz­ten und für die Push No­ti­fi­ca­ti­ons zwei Sprach­chan­nels ein­rich­te­ten.«

Da das Re­act-na­ti­ve-frame­work ei­ne recht jun­ge Tech­no­lo­gie ist, feh­len noch vie­le User-in­ter­faceKom­po­nen­ten, die dann müh­se­lig from scratch ent­wi­ckelt wer­den müs­sen. »Dann ist es manch­mal ner­vig, so weit ent­fernt vom Be­triebs­sys­tem zu sein«, fin­det Jus­tus. Er ent­wi­ckelt ei­gent­lich lieber di­rekt in der je­wei­li­gen Pro­gram­mier­spra­che.

Für Apps, die Sensor­da­ten vom Be­triebs­sys­tem ho­len, wie Echt­zeit-sound­vi­sua­li­sie­run­gen oder Fit­ness­tra­cker, hält Chris­ti­an Jus­tus Re­act-na­ti­ve-ent­wick­lun­gen für un­ge­eig­net. »Sol­len Schall­wel­len in Echt­zeit auf dem Ge­rät sicht­bar aus­schla­gen, muss man Da­ten di­rekt vom Mi­kro­fon ab­grei­fen. Der Um­weg über Re­act Na­ti­ve geht dann zu Las­ten der Per­for­mance«, weiß Chris­ti­an Jus­tus und rät, da­für zur­zeit lieber noch na­tiv zu ent­wi­ckeln.

Ab in die Tes­ting-farm

Trotz der Ex­pe­ri­men­te mit Push No­ti­fi­ca­ti­ons und Ui-pat­tern-ei­gen­ent­wick­lun­gen man­gels brauch­ba­rer Frame­works (sie­he »Ui-ent­wick­lung mit Re­act Na­ti­ve« rechts) be­nö­tig­te Hy­brid He­roes für das De­ve­lop­ment nur we­nig mehr als ei­nen Mo­nat. En­de Ok­to­ber gin­gen die Apps be­reits ins Tes­ting.

Die Ber­li­ner Agen­tur ver­fügt selbst über die gän­gigs­ten Test­ge­rä­te, dar­un­ter auch ein paar al­te »Gur­ken« wie ein ipho­ne 5s. Aber erst bei Good News tes­te­te die Agen­tur noch ein­mal rich­tig in die Brei­te – al­le im Un­ter­neh­men lu­den die App her­un­ter und pro­bier­ten sie aus. Wie üb­lich gab es da­nach noch ein bis zwei Ite­ra­tio­nen. Kei­ne gro­ße Sa­che – En­de No­vem­ber wa­ren bei­de Ver­sio­nen fer­tig.

»Ver­gli­chen mit der her­kömm­li­chen Ent­wick­lung von na­ti­ven Apps be­trägt die Zeit- und In­vest­ment­Er­spar­nis je nach Pro­jekt bis zu 50 Pro­zent«, re­sü­miert Hy­brid-he­roes- Chef Jan Ger­win. Auch Good News ist rund 50 Pro­zent güns­ti­ger weg­ge­kom­men. Und der Preis­vor­teil setzt sich in der War­tung der App fort. Will Good News in der Zu­kunft ein neu­es Fea­tu­re aus­rol­len, ist die­ses um­ge­hend auf bei­den Platt­for­men ver­füg­bar. ae [6629]

PRO­JEKT Ent­wick­lung na­ti­ver IOS- und An­dro­idApps für das Start-up Good News mit dem Ja­va­scrip­tFrame­work Re­act Na­ti­ve KUN­DE Noah Foundation ↗ http://noahs­fund.org und Impact Part­ner ↗ https://goo­dim­pact.org, bei­de Ber­lin AGEN­TUR Hy­brid He­roes, Ber­lin ↗ www.hy­bridhe­roes.de TEAM Chris­ti­an Jus­tus (Le­ad De­ve­lop­ment), Duc Anh Phi (De­ve­lop­ment), Re­mi Gal­le­go (De­ve­lop­ment), Jan Ger­win (Pro­jekt­ma­nage­ment), Da­lia Schült­ke (De­sign), Ke­vin Fuchs (De­si­gner Good News), Jo­na­than Wid­der (Pro­jekt­lei­tung Good News) TECH­NIK Re­act Na­ti­ve, Ja­va­script, Fi­re­ba­se ZEI­T­RAUM Ok­to­ber 2017 bis heu­te

Die bei­den na­ti­ven Apps für IOS (obe­re Rei­he) und An­dro­id (un­te­re Rei­he) sind ver­hält­nis­mä­ßig schlank, des­we­gen bot sich die Ent­wick­lung mit Re­act Na­ti­ve an. Es gibt kei­nen Start­screen, statt­des­sen springt der User so­fort auf die ers­te gu­te Nach­richt des Ta­ges. Die Punk­te am un­te­ren Screen­rand si­gna­li­sie­ren die An­zahl der News. Auch das Funk­ti­ons­spek­trum ist schlank: Der User kann al­le Aus­ga­ben an­schau­en, Fa­vo­ri­ten spei­chern, die App emp­feh­len (tei­len), sie mit Spen­den un­ter­stüt­zen oder ei­nen News­let­ter be­stel­len. Die App sieht auf bei­den Platt­for­men gleich aus und nimmt auf Ge­rä­te­spe­zi­fi­ka wie den An­dro­id-back-but­ton kei­ne Rück­sicht. Nur die Push No­ti­fi­ca­ti­ons wer­den auf den Platt­for­men un­ter­schied­lich dar­ge­stellt

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.