U hoeft geen platformspecifieke technologieën te gebruiken om krachtige en boeiende apps te ontwikkelen. In deze serie leer je hoe je een hybride app kunt maken - met name een audiospeler - met behulp van webtechnologieën en frameworks zoals jQuery Mobile en Cordova (ook bekend als PhoneGap). Het eerste raamwerk zal worden gebruikt om de interface te maken, terwijl verschillende van de API's van de tweede, zoals Media en het dossier, zal worden gebruikt om de bedrijfslogica te ontwikkelen.

Series Overzicht

• Applicatie-instellingen
• Application Logic
• Toepassing afstemmen

De projectfuncties

De app die we over enkele ogenblikken zullen ontwikkelen, zal een eenvoudige audiospeler worden genoemd Audero Audiospeler. Het zal minimale gebruiksvereisten hebben. Deze app zoekt in het bestandssysteem en verzamelt eventuele audiobestanden waarnaar de gebruiker kan luisteren. De app verzamelt bestanden met een van de volgende extensies: .mp3, .wav, .m4a. Houd er rekening mee dat de ondersteunde indelingen sterk afhankelijk zijn van het platform waarop u de toepassing uitvoert, dus kies indelingen die op veel platforms werken.

Audero Audiospeler stelt de gebruiker ook in staat de lijst op elk gewenst moment bij te werken en andere bestanden op te nemen die ze mogelijk hebben gedownload nadat de bewerking voor de eerste keer is uitgevoerd. De gebruiker kan ook ongewenste audio uit de lijst verwijderen door op het pictogram aan de rechterkant van de naam van de audio te klikken. De lijst is alfabetisch gerangschikt met briefverdelers om items te organiseren en te groeperen. De lijst heeft een zoekvak om ook de bestanden te filteren.

U kunt de beschreven pagina bekijken door naar de onderstaande schermafbeelding te kijken:

Zodra de gebruiker een bestand kiest, wordt de controller van de speler getoond. De controller toont de bestandsnaam, het locatiepad, de speelduur en de duur. Het bevat knoppen voor afspelen / pauze, stop en een schuifregelaar om de audio heen en weer te bewegen.

Je kunt het uiterlijk en het gevoel van de speler in de onderstaande foto zien:

Betrokken technologieën

De volgende lijst geeft u een gedetailleerd inzicht in wat we zullen gebruiken:

• HTML: Het wordt gebruikt om de opmaak van de pagina's te maken. Indien van toepassing, zal ik een aantal van de nieuwe HTML5-tags gebruiken.
• CSS: De meeste CSS-verbeteringen zullen door jQuery Mobile worden gedaan, dus ik zal slechts een paar regels aangepaste CSS-code gebruiken. Het wordt voornamelijk gebruikt voor de speler zelf.
• JavaScript: Dit is de taal die ik zal gebruiken om de bedrijfslogica te ontwikkelen.
• jQuery: Ik zal jQuery voornamelijk gebruiken om elementen te selecteren en event handlers toe te voegen.
• jQuery Mobile: Het wordt gebruikt om de applicatie-interface te verbeteren en te optimaliseren voor mobiele apparaten. Sommige van de gebruikte widgets zijn onder meer Listview, Dialog en Slider. Ik zal ook een aantal knoppen in de kop- en voettekst van de pagina's plaatsen om een ​​eenvoudige werkbalk te maken. De gebruikte versie is 1.3.0.
• Cordova (PhoneGap): Cordova wordt gebruikt om de bestanden in te pakken, zodat u ze kunt compileren alsof u een native app hebt gebouwd. Bouwen Audero Audiospeler we maken gebruik van verschillende API's die door het framework worden aangeboden, zoals Storage, InAppBrowser, Notification, File en Media. De gebruikte versie is 2.3.0.

Naast de bovenstaande lijst, gebruik ik ook deze Cordova API's:

• File API: An API voor het lezen, schrijven en navigeren van bestandssysteemhiërarchieën biedt een reeks objecten om met bestanden en mappen te werken. We gebruiken bijvoorbeeld de  DirectoryReader object om door het bestandssysteem te navigeren, gebruikmakend van zijn methode readEntries (), en doorzoek de geluiden. We zullen ook de LocalFileSystem object om de rootbestandssystemen van het apparaat te verkrijgen met behulp van zijn requestFileSystem () methode. U kunt meer informatie vinden in het officiële Document van de File API.
• InAppBrowser API: Het is een webbrowser die in uw app wordt weergegeven wanneer u de window.open telefoontje. Het is niet veel meer dan dat, maar zoals u verderop in dit artikel zult ontdekken, is het van vitaal belang om externe links goed te beheren met deze API. Als u meer wilt weten over de methoden die deze API biedt, kunt u het officiële document van InAppBrowser bekijken.
• Opslag API: Deze API biedt toegang tot de opslagopties van het apparaat. We zullen specifiek gebruik maken van de Cordova-implementatie van de Web Storage API en de methoden om de lijst met audiobestanden op te slaan en te laden. Als u een diepgaande uitleg nodig heeft, raadpleegt u het lokale opslag-API-document.
• Media API: Het Media-object biedt de mogelijkheid om audiobestanden op een apparaat op te nemen en af ​​te spelen. Dit is een belangrijke API voor onze speler en we zullen bijna alle methoden gebruiken. We gebruiken bijvoorbeeld de spelen() methode om de geluiden te spelen, de hou op() methode om het afspelen van de audio te stoppen, en de getDuration () methode om de duur van het huidige verwerkte bestand op te halen. Meer over dit onderwerp is te vinden in de Media API-documenten.
• Meldings-API: Hiermee kunt u de gebruiker op de hoogte stellen met visuele en hoorbare meldingen. We zullen het gebruiken alert () methode om de gebruiker op de hoogte te stellen in geval van fouten. Voor een meer diepgaand overzicht van deze API, lees de documentatie-API's.

Voordat we onze tutorial voortzetten, wil ik benadrukken dat Cordova voor elk besturingssysteem een ​​ander JavaScript-bestand gebruikt. Daarom, als u de toepassing alleen wilt compileren, moet u een specifieke IDE-SDK-bundel gebruiken. Als u bijvoorbeeld de Android-versie van onze speler wilt maken (en dus de relatieve .apk wilt maken), moet u Eclipse en de Android SDK gebruiken. Het gebruik van verschillende bundels voor elk platform kan problematisch zijn, dus Audero Audiospeler zal worden ontwikkeld met de aanname dat de compilatie zal worden gedaan met behulp van de Adobe-cloudservice, genaamd Adobe PhoneGap Build. Deze service bevat de juiste Cordova-bibliotheek voor elk platform op compilatietijd.

De structuur van het project

De structuur van het project zal vrij eenvoudig zijn. Om te beginnen met het bouwen van de speler, maakt u een map en geeft u deze een nieuwe naam "Audero-audio-player". Maak nu drie mappen in deze map met de volgende namen: css, afbeeldingen, en js. Zodra je dit hebt gedaan, download je de jQuery (ik gebruik versie 1.8.3) en jQuery Mobile (versie 1.3.0) -bibliotheken. Verplaats het jQuery en het JavaScript-bestand van jQuery Mobile naar de "js"map en plaats het jQuery Mobile CSS-bestand in de"css"map. Plaats de gebundelde jQuery Mobile-afbeeldingen ten slotte in de"afbeeldingenOmdat we de native structuur van jQuery Mobile enigszins hebben gewijzigd, moeten we de paden aanpassen die verwijzen naar de afbeeldingen in het CSS-bestand.afbeeldingen/ "deel met deze reeks" ... /afbeeldingen/ ". Als u een geautomatiseerde functie van de door u gekozen editor gebruikt, controleer dan of deze de reeks vijf keer heeft vervangen.

Nu u het framework hebt ingesteld, kunt u doorgaan naar de volgende stap. In de hoofdmap van de projectmap maken we de HTML-bestanden en plaatsen we het pictogram van de standaardtoepassing, het configuratiebestand van Adobe PhoneGap Build en het standaard startscherm. In deze zelfstudie maken we ook de volgende bestanden:

• index.html: Dit is het beginpunt van de applicatie en waar we de links naar de gebruikte bibliotheken plaatsen, binnen de sectie.
• files-list.html: Dit is de pagina waar je een lijst hebt met de geluiden die op je apparaat zijn opgeslagen, gegroepeerd zoals ik heb uitgelegd in de inleiding van dit artikel. Zoals je later zult zien, heb je ook een kleine werkbalk waarmee je terug kunt gaan naar de startpagina (de knop in de linkerbovenhoek) en de lijst met geluiden kunt vernieuwen (de knop in de rechterbovenhoek)..
• player.html: Dit bevat eenvoudig de opmaak van de audiospeler.
• aurelio.html: Dit is de pagina met app-credits; het bevat informatie over de auteur van de app.
• style.css: Dit bestand bevat de paar aangepaste CSS-regels die door de app worden gebruikt en die voornamelijk worden gebruikt om de afspeelknoppen te stylen.
• jquery.mobile.config.js: Dit bevat onze aangepaste configuratie voor het jQuery Mobile-framework.
• appFile.js: Dit bestand bevat de klasse genaamd AppFile die we zullen gebruiken om de geluiden te beheren. Het fungeert als een interface voor de bestandentabel van onze database. Deze klasse stelt ons ook in staat om audio-informatie op te halen en te bewerken en om ons in staat te stellen om bestanden toe te voegen en te verwijderen van de opgeslagen lijst.
• player.js: Het bestand inclusief de klasse, genaamd Speler, die de speler beheert en de spelerinterface opnieuw instelt.
• utility.js: Dit zijn slechts een paar hulpprogramma's die door ons project worden gebruikt, en ik zal dit verder toelichten in het volgende artikel van de serie.
• application.js: Dit is als een lijm die alle stukjes van ons project samenvoegt. Deze klasse is verantwoordelijk voor het initialiseren van het gedrag van de beschreven pagina's voordat gebeurtenissen worden gekoppeld met behulp van de tot nu toe besproken klassen.
• config.xml: Dit XML-bestand bevat de metagegevens van de toepassing en wordt door de Adobe-cloudservice gebruikt om instellingen op te slaan, zoals het versienummer van de app en de beschrijving.

Dit is een heleboel dingen om te maken, maar ik beloof dat je een goede tijd zult hebben met dit project. Als laatste opmerking, naast de vermelde bestanden, Audero Audiospeler bevat enkele extra afbeeldingen - zoals de afspeel- / pauze- en stopknoppen - die in de "afbeeldingen"map.

De startpagina

jQuery Mobile laadt alle pagina's met AJAX, dus tenzij je expliciete aangepaste configuraties bouwt, zijn alle bestanden die nodig zijn door Audero Audiospeler, zoals de CSS- en JavaScript-bestanden, moeten door het toegangspunt worden geladen, index.html. Deze pagina bevat, behalve de titel en beschrijving van de toepassing, een knop voor toegang tot de lijst met geluiden. Het bevat ook een voettekst met een knop voor toegang tot auteursinformatie.

De volledige bron van de startpagina wordt hieronder weergegeven:

                    
 
 
Audero Audiospeler
  
 
 Audero Audio Player is een standaard audiospeler die het bestandssysteem van een apparaat doorzoekt, de gevonden audiobestanden verzamelt en de gebruiker vervolgens laat luisteren. Met deze app kan de gebruiker de lijst op elk gewenst moment bijwerken om bestanden op te nemen die mogelijk zijn gedownload nadat de bewerking voor de eerste keer is uitgevoerd. U kunt ook ongewenste audio verwijderen - bijvoorbeeld geluiden die worden gebruikt als meldingen in andere toepassingen - door op een pictogram aan de rechterkant van de naam van het nummer te klikken. De geluidlijst is alfabetisch gerangschikt met letterverdelingen om lijstitems te organiseren en te groeperen, en heeft een zoekvak om bestanden te filteren. U kunt de beschreven pagina bekijken door naar de onderstaande schermafbeelding te kijken. 
 Bestandslijst 
  
  

Zoals je in het volgende gedeelte zult zien, zijn de knoppen in de en de