Omdat Android-ontwikkelaars niet veel regels, standaarden en vereisten hoeven te volgen bij het ontwikkelen van apps, maken ze zich niet veel zorgen over het maken van nette websites voor hun webapps. Veel gevestigde Android-apps hebben niet eens een website, maar wel Twitter-, Facebook-pagina's, enz. Dit is de reden waarom we in dit artikel niet veel voorbeelden konden vinden om te laten zien. Daarom staan hieronder enkele websites speciaal voor zowel Android als iPhone.
Android-app-websites
FxCamera
Met FxCamera kunt u creatieve foto's maken met meer dan 40 filters om uit te kiezen.
Timer is een mooi en strak ontworpen applicatie voor je Android.
Vind interessante webpagina's waar u ook bent en lees ze thuis of onderweg, zelfs zonder internetverbinding.
Een app die je motiveert om naar de sportschool te gaan. Verdien geld door naar de sportschool te gaan, ten koste van vrienden die niet met je meegingen.
Maluuba is een Siri-alternatief dat uw stemassistent op Android kan zijn.
Voedselster
Foodster helpt je bij het vinden en bereiden van de beste recepten op internet. Met meer dan 10.000 recepten uit de beste bronnen op internet en elke dag nieuwe toevoegingen, kun je er zeker van zijn dat je iets lekkers en gemakkelijks kunt bereiden.
Patroon achtergronden
Pattrn is een unieke screensaver-app voor telefoons en tablets die je toegang geeft tot een enorme verzameling foto's.
dubbelTwist
DoubleTwist Alarm Clock is de mooiste applicatie in zijn categorie in de Google Play Store.
UurwerkMod
Ontgrendel het potentieel van uw telefoon, app voor app.
Android- en iPhone-app-websites
Avocado™ is de beste manier om in contact te blijven met de mensen die er het meest toe doen via chats, kalenders, schetsen, foto's en meer!
Met Strava kunnen atleten van over de hele wereld sociale fitness ervaren, waarbij ze met elkaar delen, vergelijken en met elkaar concurreren op basis van persoonlijke fitnessgegevens, met behulp van mobiele en webapplicaties.
Het blijkt dat om normaal voor Android te kunnen coderen, kennis van HTML5, CSS3 en JavaScript voldoende is. Uiteraard niet zomaar, maar in combinatie met de dienstverlening, waarvan wij een review voor u hebben opgesteld. Welnu, als u uit de eerste hand bekend bent met PHP (Ruby, ASP.NET), dan kunt u na het lezen van dit artikel veilig uw diensten aanbieden voor geavanceerde mobiele ontwikkeling :). INFO Voor eigenaren van blogs, online winkels en verschillende websites die een kant-en-klare mobiele versie hebben, zal dit materiaal u helpen snel een applicatie te maken (met vrijwel geen geld- en tijdkosten) om uw imago te verbeteren en nieuwe bezoekers naar uw bron te trekken . Onze tests In dit artikel vergelijken we vier platforms voor het maken van applicaties. Elke recensie is een beschrijving van algemene indrukken, gevonden problemen en interessante onderscheidende kenmerken tijdens het proces van het omzetten van HTML-code in een apk-bestand met behulp van de huidige tool. Voor de puurheid van het experiment zullen we dezelfde applicatie maken met behulp van verschillende services. De essentie van onze elementaire toepassing is als volgt. Laten we zeggen dat er een bedrijf is genaamd Beaver Fat Transcorporation. En de CEO wilde dat iedereen in het bedrijf een applicatie zou laten installeren: een minilijst met nummers waarmee ze andere werknemers kunnen bellen. Hier is de code: /*Stijlen zijn geleend van Fries, een raamwerk voor het maken van interfaces voor mobiele applicaties op HTML5*/ body ( /* Speciale lettertypen worden vaak gebruikt voor Android-ontwerp: Roboto, Droid Sans en dergelijke */ font-family : Roboto, "Helvetica Neue", Helvetica, Arial, schreefloos; lettergrootte: 16px; lijnhoogte: 1.67em; kleur: wit; voor mobiele toepassingen in engine-gebaseerde browsers WebKit (bijvoorbeeld Safari) */ -webkit-box-sizing: box-sizing: border-box; -bottom: 4px effen #33B5E5; #FFFFFF; .itemnaam (weergave:blok; lettertype-gewicht:700; regelhoogte: 38px; opvulling-links:5px; ) .itemphone (kleur: #CCCCCC; lettergrootte: 15px; regelhoogte: 12px; tekst -overflow: ellips; opvulling links: 8px;Bobromordov Evsey Sevyanovich (algemeen directeur)
7(495) 728-89-80Bobromordova Karina Evseevna (financieel directeur)
7(495) 728-89-80Bobromordov Karen Evseevich (koerier)
7(495) 728-89-80 Is alles duidelijk met de code? Geweldig, laten we het nu op verschillende services testen. AppsGeyser AppsGeyser We gaan naar de site. Laten we ons registreren. Klik op de knop App maken. Klik op het pictogram in de vorm van een HTML-tag. We komen op de pagina voor het maken van applicaties. We voegen onze code in, bedenken een naam met een beschrijving, uploaden het bestand met het pictogram en klikken opnieuw op App maken. Dat is alles, nu bent u een Android-ontwikkelaar! Pluspunten- U kunt zoveel aanvragen indienen als u wilt en geheel gratis.
- Het materiaal voor het maken van een project kan uit veel verschillende bronnen bestaan (webpagina, YouTube-kanaal, PDF-document, RSS-feed, fotogalerij, audiobestand, enz.).
- Als u kant-en-klaar materiaal heeft (een document, een link naar een nieuwsfeed, broncode, enzovoort), wordt de tijd die is besteed aan het maken van een applicatie gemeten in tientallen seconden.
- Wanneer u het maken van de applicatie voltooit, verschijnt naast de link naar het apk-bestand een QR-code op het scherm (ik heb deze gemaakt en onmiddellijk op mijn telefoon geïnstalleerd) en een knop voor publicatie op Google Play.
- Het meest opvallende voordeel van AppsGeyser is de preview van de applicatie (hoe deze eruit zal zien en zal werken op het apparaat). Deze functie wordt hier veel gemakkelijker geïmplementeerd dan zijn concurrenten. Alleen de Android SDK is cooler: je kunt de camera, bewegingssensor en prestaties van een specifiek telefoonmodel niet testen op AppsGeyser.
- Een ander interessant kenmerk van de dienst is de testconstructor (Quiz).
- Voorbeeld negeert AJAX. Ondanks het feit dat deze technologie in een voltooide montage uitstekend werkt.
- Er is een uitstekende visuele editor voor het maken van een applicatie met een verbazingwekkende verscheidenheid aan werkbalken. Door simpelweg de muisaanwijzer te bewegen, kunt u een ongelooflijk breed scala aan elementen aan uw applicatie toevoegen: van een eenvoudige TextBox tot een gebruikerslocatiesensor!
Nadelen - Het maken van een applicatie op basis van onze code is arbeidsintensiever. Eerst moet u de broncode opslaan met de html-extensie en deze naar de server uploaden. Sleep vervolgens in de werkruimte het Web Viewer-element naar het applicatieveld, waarvan de instellingen het adres van de pagina met onze applicatie specificeren. Met behulp van het menu Bouwen kunt u nu een voltooide montage krijgen.
- Het grootste nadeel van App Inventor is dat de gecompileerde applicatie een internetverbinding nodig heeft om te werken (in tegenstelling tot degene die in AppsGeyser is gemaakt).
- Het is mogelijk om meerdere werkruimtes te creëren, verbindingen daartussen tot stand te brengen, ruimte toe te wijzen voor advertentie-eenheden - in totaal zijn er ongeveer honderd verschillende instellingen. De functionaliteit is op het oog ongeveer 80% van wat AppsGeyser heeft, en 90% van App Inventor. En nog een heleboel andere persoonlijke trucs. En de hele onderneming werkt snel, mooi en goed.
Conclusie De algemene indruk is positief. In eerste instantie wilde ik hem zelfs de eerste plaats in deze recensie toekennen, maar het pijnlijke wachten op een brief en de poging om geld uit te persen om een tweede aanvraag te maken, maakten me van streek. appsbar appsbar Deze dienst wordt in het artikel genoemd ten behoeve van die kameraden die in hun kindertijd door hun informaticaleraar met een toetsenbord op hun hoofd werden geslagen (terwijl ze een kwadratische vergelijking in Pascal aan het oplossen waren), wat hen ervan weerhield om zelfs maar kijken naar de programmacode. Maar hun verborgen wrok drijft hen nog steeds richting een totale overname van de Melkweg. Met behulp van appsbar kun je je wildste fantasieën verwezenlijken, met als resultaat een platformonafhankelijke (!) applicatie. Pluspunten - Preview doet niet onder voor AppsGeyser qua snelheid en kwaliteit van het werk.
- Een rijke verzameling ontwerpsjablonen, gecombineerd met de mogelijkheid om ze onherkenbaar opnieuw te maken.
- De interface is volledig doordrongen van creativiteit. Op de eerste pagina van de sectie voor het maken van programma's moet u bijvoorbeeld het applicatietype selecteren uit 38 opties (dit gebeurt puur voor de lol, als u op verschillende pictogrammen klikt, komt u op dezelfde plaats terecht).
Appsbar: het is verrassend dat er geen pictogram voor een openbaar toilet is :) Nadelen - Je kunt de code nergens plakken. Wij moeten met onze handen werken.
- Er is een functie voor het publiceren van applicaties, maar appsbar is er nog niet van op de hoogte dat Android Market al langer bekend staat onder de naam Goggle Play.
- De interface is op sommige plaatsen traag en heeft een overvloed aan “originele” oplossingen. Je denkt bijna voortdurend aan de mysterieuze ziel en het buitengewone denken van zijn scheppers.
- Het is onmogelijk om met deze service een bedrijfstelefoongids te maken op basis van onze voorbeeldcode, maar iets soortgelijks kan worden gedaan met behulp van ingebouwde tools. Appbar is zeer geschikt voor het maken van een visitekaartjesapplicatie.
Soms is het nodig om een websiteapplicatie, een blog, een sociale netwerkclient voor Android of een eenvoudige betalingsapplicatie te maken. Eén manier is om een minisite te maken in onze Android-applicatie.
Stap 0. Kennismaken met de technologie
In deze zelfstudie gebruiken we JQueryMobile als engine om onze applicatie te maken. Dit geeft ons de mogelijkheid om het uiterlijk en een bepaalde functionaliteit van onze applicatie te creëren met behulp van HTML5, CSS3 en JavaScript. Zo'n applicatie kan in twee modi beschikbaar zijn: offline - wanneer alle bestanden (pagina's) zich in de applicatie bevinden of online - wanneer we pagina's of gegevens op afstand ontvangen. Over de technologie en extra functies leest u op off. website: http://jquerymobile.com/.
Stap 1. Verklaring van het probleemMijn favoriete stijl is het stellen van een taak en het nastreven van het doel. En laten we zeggen dat we een applicatie moeten maken die kcal berekent. voor mensen, afhankelijk van het doel dat iemand zichzelf heeft gesteld, zijn lengte, gewicht, leeftijd. Dit zal een reguliere offline applicatie zijn.
Stap 2. Ontwerp en verzameling van informatieVoor berekeningen gebruiken we de Harris-Benedict-formule. Ze ziet er zo uit:
Calorie-inname = BMR x activiteitsniveau, waar
Heren:
BMR = 88,36 + (13,4 x gewicht, kg) + (4,8 x lengte, cm) – (5,7 x leeftijd, jaren)
Vrouwen:
BMR = 447,6 + (9,2 x gewicht, kg) + (3,1 x lengte, cm) – (4,3 x leeftijd, jaren)
en activiteitenniveau gedurende de week:
Minimumniveau, calorienorm = 1,2
Laag, calorie-inname = 1,375
Gemiddelde, calorie-inname = 1,55
Hoog, calorie-inname = 1.725
Zeer hoog, calorie-inname = 1,9
En ook nog 2 voorwaarden:
1. Als iemand wil aankomen, heeft hij “+ 20%” nodig
2.Als u wilt afvallen, dan “- 20%”
3. Snel afvallen, daarna “- 40%”
Stap 3. Teken het ontwerpNa nadenken en de muis opzij bewegen, slaagde ik erin een applicatiesjabloon te maken.
Gedurende de hele les zullen we dit sjabloon volgen en proberen het te implementeren. En dus, laten we direct beginnen met programmeren :-)
Stap 4: Maak een app-ontwerpBij deze stap maken we het ontwerp van onze applicatie. Deze stap zal vrij eenvoudig en spannend zijn, omdat de constructie van het applicatieontwerp en de verificatie van de juistheid rechtstreeks in de browser plaatsvindt.
Dit is wat ik heb:
En laten we natuurlijk de code beschrijven die ons dit ontwerp opleverde:
Calorieberekening Calorieberekening
| Voer uw gewicht in: | |
| Vul leeftijd in: | |
| Vul hoogte in (cm): | |
| Activiteit: | Geen 1-3 per week 3-5 per week 6-7 per week Meerdere keren per dag |
| Doel: | Op gewicht blijven Gewichtstoename Afvallen Snel afvallen |
| Vloer: | Man Vrouw |
Dit is een miniprogramma om de dagelijkse calorie-inname van een persoon te berekenen
Beschrijving van het activiteitsitem
Er zijn vijf soorten fysieke activiteit: minimaal (geen fysieke activiteit), laag (fysieke activiteit 1-3 keer per week), gemiddeld (3-5 dagen per week), hoog (6-7 keer per week), zeer hoog ( vaker sporten).
Laten we eens kijken naar wat hier is en waarom.
– we geven aan dat we HTML5 zullen gebruiken.
Dit maakt het mogelijk om meer functies van het raamwerk te gebruiken.
– we geven aan hoe we onze pagina kunnen weergeven en inzoomen. We hebben de codering ook zo ingesteld dat Russische tekst wordt ondersteund.
... ...
Eén document kan meerdere "pagina's" hebben - kant-en-klare weergaven. We zullen er 2 hebben. Basis en "Over het programma".
– hoed
– body, het hoofdgedeelte waar alle inhoud zal staan
– voettekst. Dit is waar we onze bedieningsknoppen plaatsen. Navigatiepaneel.
Ik geef geen uitleg voor het hoofdblok, omdat het reguliere HTML-code bevat. Waar we de elementen beschrijven die we willen zien. Voor ons is dit een bord met vormelementen erin. Elk element bevat een unieke identificatie. Nodig om gegevens te ontvangen. Laten we verder gaan met de voettekst.
– elk lijstelement is één paneelelement. Waarin.
href=’#info’ – id “pagina” in het document, als we “#” gebruiken. Wanneer we klikken, zien we een ‘pagina’-blok met deze id. Of we kunnen naar een heel ander bestand of een andere bron (URL) verwijzen.
data-icon=’info’ – stel het pictogram in.
Rug En ten slotte, in dit bestand, het tweede paginablok
– een knop in de koptekst om terug te keren naar de hoofdpagina.
En ook onze paginastijlen.
Result-block( tekst uitlijnen: gecentreerd; lettergrootte: 20px; lettergrootte: vet; kleur: groen; )Stap 5. Bedrijfslogica creëren
Var MAN_COEFFICIENTS=( hoofd: 88,36, gewicht: 13,4, lengte: 4,8, leeftijd: 5,7 ); var WOMAN_COEFFICIENTS=( hoofd: 447,6, gewicht: 9,2, lengte: 3,1, leeftijd: 4,3 ); var VERHOGING = 1,2; var VERLAGING = 0,8; var QUICK_DECREASE = 0,4; var ACTIVITY_COEFF = functie forMan(gewicht, lengte, leeftijd, actief)( return (MAN_COEFFICIENTS.main + (MAN_COEFFICIENTS.weight *weight) + (MAN_COEFFICENTS.height * height) + (MAN_COEFFICIENTS.age * age)) * ACTIVITY_COEFF; ) function forWoman(gewicht, lengte, leeftijd, actief)( return (WOMAN_COEFFICIENTS.main + (WOMAN_COEFFICIENTS.weight * gewicht) + (WOMAN_COEFFICENTS.height * height) + (WOMAN_COEFFICIENTS.age * age)) * ACTIVITY_COEFF; ) function getData()) ( var data=( gewicht: parseFloat(document.getElementById("gewicht).value), leeftijd: parseInt(document.getElementById("leeftijd").value), hoogte: parseInt(document.getElementById("hoogte"). value ), actief: parseInt(document.getElementById("active").value), doel: parseInt(document.getElementById("target").value), geslacht: parseInt(document.getElementById("sex").value) ) ; retourneer gegevens; ) functie berekenenData())( var resultaat; var data = getData(); switch (data.sex)( geval 1: resultaat = forMan(data.weight, data.height, data.age, data. actief); console.log(resultaat);
pauze; geval 2: resultaat = forWoman(data.weight, data.height, data.age, data.active);
) switch (data.target)( case 1: retourneert resultaat; case 2: retourneert resultaat * VERHOGEN; case 3: retourneert resultaat * DECREASE; case 4: retourneert resultaat * QUICK_DECREASE; ) ) function showData())( document.getElementById( " resultaat").innerHTML = berekenData();
En we voegen een functieaanroep toe wanneer we op de knop "Berekenen" klikken.
BerekenenWanneer u hierna op de knop drukt, worden de gegevens berekend en wordt informatie weergegeven.
Nu geven we aan onze component het pad door naar het bestand dat standaard wordt geladen wanneer de applicatie wordt geopend. Dit gebeurt allemaal in de klasse die door de standaardomgeving wordt gemaakt. Daarin veranderen we het gedrag van de methode die weergave genereert:
@Override beschermde void onCreate(Bundle SavedInstanceState) ( super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); WebView webView = (WebView) findViewById(R.id.webView); webView.getSettings().setJavaScriptEnabled(true ); webView.loadUrl("bestand:///android_asset/www/index.html");
findViewById(R.id.webView) – we krijgen onze container voor het weergeven van pagina’s
webView.getSettings().setJavaScriptEnabled(true) – schakel JavaScript-ondersteuning in
webView.loadUrl(“file:///android_asset/www/index.html”) – laad de pagina die zich in onze activamap bevindt.
Omdat onze pagina nu verbindingsbibliotheken vanaf de site (op afstand) bevat, moeten we internettoegangsrechten aan onze applicatie toevoegen. Dit gebeurt in het manifestbestand AndroidManifest.xml op één regel aan het begin:
Daarna hoeft u alleen nog maar de applicatie naar het apparaat te sturen. En klaar ben je :-)
Als u een offline toepassing wilt maken zodat u geen toegang tot internet nodig heeft, download dan de bibliotheken van de site, plaats ze in een map en wijzig het pad op de pagina. Ook is het dan niet nodig om internettoegangsrechten op te geven.
Stap 7. De applicatie offline makenWe moeten dus de benodigde bibliotheken downloaden. De eerste, belangrijkste jQuery-bibliotheek bevindt zich op: http://jquery.com/download/ daar, selecteer de versie en download deze. We gebruiken deze versie: Download de gecomprimeerde productie-jQuery 2.1.0. Nu downloaden we jQueryMobile. Ga naar de officiële website: http://jquerymobile.com/ en download het archief met de bestanden:
Er zijn veel bestanden in het archief. We hebben er maar een paar nodig: jquery.mobile-1.4.0.min.css, jquery.mobile-1.4.0.min.js en pictogrammen uit de map images/. Ik plaats deze bestanden in de hoofdmap van de map /www. Daarna is het de moeite waard om de paginalinks te wijzigen naar de bestanden die we zojuist hebben gedownload:
En vergeet ook niet om de toestemming voor internettoegang uit het manifest te verwijderen, we hebben deze nu niet nodig. Over het algemeen is dat alles.
Nu heb je een kleine werkende applicatie voor Android. De snelheid is echter inferieur aan de oorspronkelijke creatieversie, maar dit kan worden gecorrigeerd. Met een kleine applicatie voor jou :-) Ik hoop dat alles toegankelijk en interessant was)
Ondanks dat mobiele applicaties, zoals mobiele websites, op smartphones en tablets werken, verschillen ze van elkaar. Progressive Web Apps (PWA) is een open-sourceinitiatief van Google dat gebruik maakt van moderne webmogelijkheden om gebruikers een betere ervaring te bieden dan native apps of mobiele sites. Omdat het een relatief nieuw raamwerk is, wordt het nog niet door alle browsers ondersteund en ondersteunt het nog niet een aantal features die native apps zo aantrekkelijk maken voor consumenten: cameragebruik, GPS en een vingerafdrukscanner. Dit zal zeker veranderen als PWA’s breder geaccepteerd worden.
Tegenwoordig vertegenwoordigt de opkomst van PWA dezelfde doorbraak op het mobiele internet als de opkomst van responsief webdesign vijf jaar geleden. Het is een opkomende technologie die in de loop der jaren onvermijdelijk zal evolueren en veranderen naarmate ontwikkelaars versies ervan voortdurend verbeteren en merken zich steeds meer tot PWA's wenden als onderdeel van hun mobiele strategieën.
Meer over PWAPWA heeft verschillende voordelen voor gebruikers, waaronder sneller browsen. Ze worden onmiddellijk ontdekt in de browser zonder dat u een app hoeft te downloaden en kunnen overal werken, ook in gebieden met een lage internetsignaalsterkte. Ze kunnen worden "opgeslagen" op het startscherm, tenminste op Android-apparaten, voor gemakkelijke toegang en een gepersonaliseerd interactiekanaal. Ze bieden ook snelle hertoegang zonder dat u een browser hoeft te openen en een webadres hoeft in te voeren.
Goed ontworpen PWA's zijn tot vier keer sneller dan andere mobiele sites en helpen het aankoopproces te versnellen, aangezien de aankoop van een product slechts een paar klikken verwijderd is, waardoor klanten betrokken blijven.
Er zijn ook andere voordelen voor marketeers. Er wordt verwacht dat PWA's een grote impact zullen hebben op de conversiepercentages van mobiele apparaten, en dat ze de hoge investeringskosten die gepaard gaan met de ontwikkeling van native apps zullen verminderen.
PWA's zien er hetzelfde uit als native apps, en uiteindelijk zullen klanten de voorkeur geven aan PWA's omdat ze een hogere snelheid hebben, dezelfde ervaring bieden als native apps en offline gebruik van elke mobiele site mogelijk maken.
PWA's ondersteunen ook browserpushmeldingen, waardoor marketeers in realtime contextuele en gepersonaliseerde berichten kunnen verzenden met een enkele klik rechtstreeks vanuit de PWA.
Omdat PWA's in essentie websites zijn, zijn ze gemakkelijker te updaten en hoeven gebruikers geen bijgewerkte versie van de app te downloaden en te installeren. Tegelijkertijd zijn ze gemakkelijk te vinden in zoekmachines, wat betekent dat het potentiële publieksbereik miljoenen klanten bedraagt.
PWA-takenNaast de voordelen hebben PWA's echter ook enkele nadelen, en voor sommigen kunnen deze een doorslaggevende factor zijn bij hun beslissing.
Het belangrijkste probleem is dat niet alle browsers momenteel PWA ondersteunen. Hoewel nieuwere versies van Chrome, Opera en Android-browser PWA ondersteunen, doen IE, Edge, Safari en veel aangepaste browsers dat niet. Momenteel ondersteunen PWA's niet alle hardwarecomponenten die worden ondersteund door traditionele native apps, waaronder camera's, GPS en vingerafdrukscanners op mobiele telefoons.
Een andere uitdaging is dat appstores van oudsher centrale opslagplaatsen voor apps zijn, waardoor gebruikers kunnen vinden wat ze nodig hebben en een bepaald niveau van legitimiteit behouden blijven. Voor PWA's zijn dergelijke winkels echter niet nodig, dus marketeers kunnen moeite hebben met het promoten van hun PWA's en hun legitimiteit.
Ten slotte zullen veel apps van derden die inloggen vereisen, zoals Facebook en Google, om een login en wachtwoord blijven vragen omdat PWA's deze gegevens niet zelf kunnen verzamelen.
De toekomst van PWADe populariteit en functionaliteit van PWA's wint alleen maar aan kracht; de komende jaren zullen ze populairder worden en technologisch verbeterd. Volgens deskundigen wordt verwacht dat PWA’s aanzienlijk zullen groeien, omdat bedrijven als Pinterest, Tinder, Uber en Starbucks al PWA’s met uitstekende resultaten hebben gelanceerd. Het aantal functies dat door PWA's wordt ondersteund, zal ook jaar na jaar toenemen. Voor marketeers zal een aanzienlijk voordeel het gemak zijn van het verzamelen van analytische gegevens, omdat PWA’s perfect integreren met standaard analysetools van Google en Adobe.
Als u een typefout vindt, markeer deze dan en druk op Ctrl + Enter! Om contact met ons op te nemen kunt u gebruik maken van .
