Share
Nu je de basisbegrippen van Fuse hebt geleerd, is het tijd om dingen in de praktijk te brengen en een app te bouwen. In deze zelfstudie leert u hoe u een app kunt ontwikkelen met behulp van het Fuse-framework. Concreet zul je het volgende leren:
Als je een opfrisser nodig hebt voor Fuse, bekijk dan mijn vorige bericht in deze serie: Fuse introduceren voor app-ontwikkeling over meerdere platformen.
Ga om met Fuse te werken naar de downloadpagina en meld je aan voor een account. U kunt ook inloggen op een bestaand account als u er een heeft.
Fuse is beschikbaar voor zowel Windows als macOS. Download en installeer het juiste installatieprogramma voor uw platform. Op de downloadpagina wijzen ze ook op de Fuse-plug-ins die beschikbaar zijn voor verschillende teksteditors. Installeer die voor uw teksteditor. De Fuse-plug-ins bevatten code-aanvulling, goto-definitie en bekijken van logboeken die zijn gegenereerd met de app, wat het ontwikkelen van apps handiger maakt.
We bespreken ook hoe u een voorbeeld van de app kunt bekijken met aangepaste voorbeeldweergave. Hiervoor moet Android Studio of Xcode op uw computer zijn geïnstalleerd.
Een basiskennis van webtechnologieën zoals HTML, CSS en JavaScript is nuttig, maar is niet vereist.
U maakt een stopwatch-app die ook de afgelegde afstand meet. De afstand wordt gemeten met behulp van geolocatie. De gebruiker kan ook ronden maken en de individuele afstand en tijd voor elke ronde worden op het scherm weergegeven.
Dit is hoe de app eruit zal zien:
Je kunt de volledige broncode bekijken in de tutorial GitHub repo.
Zodra u Fuse Studio hebt geïnstalleerd, zou u nu in staat moeten zijn om een nieuw Fuse-project aan te maken. Open Fuse Studio en klik op de Nieuw Fuse Project knop. Voer de naam van het project in en klik op creëren:
Hiermee wordt een nieuwe map in de geselecteerde map gemaakt. Open die map en open de MainView.ux het dossier. Standaard heeft het alleen de
Hallo Wereld!
Het voorbeeld moet nu worden bijgewerkt met de tekst die u hebt opgegeven:
Dat is de belangrijkste ontwikkelingsworkflow in Fuse. Sla de wijzigingen op in een van de bestanden in de projectdirectory en deze worden automatisch weergegeven in de voorbeeldweergave op de desktop.
U kunt ook de logboeken in het onderste paneel bekijken. Je kunt je eigen trigger activeren door te gebruiken console.log (), zoals in de browser. Het enige verschil is dat het moet JSON.stringify () objecten om hun waarde te zien, aangezien de console.log () implementatie in Fuse kan alleen strings uitvoeren.
Nu zijn we klaar om de app te bouwen. Open de Hoofdaanzicht.ux bestand en verwijder de
Net als in een HTML-document is de standaard om de items (zoals lettertypen, stylesheets en scripts) op te nemen vóór de daadwerkelijke opmaak van de pagina. Dus voeg het volgende toe binnen de
Hiermee importeert u het lettertype dat is opgegeven in de het dossier attribuut en geeft het de naam Dun. Merk op dat dit niet het standaard lettertype voor de hele pagina is. Als u dit lettertype wilt gebruiken, moet u de naam ervan gebruiken (Dun) over de specifieke tekst waarop u het wilt toepassen.
Je kunt het lettertype downloaden van de tutorial GitHub repo. Maak daarna een assets / fonts / robot map in de hoofdprojectmap en plaats de .ttf bestand erin.
Als u een ander lettertype wilt gebruiken, kunt u het downloaden van dafont.com. Dat is waar ik het lettertype voor deze app heb gedownload.
Vervolgens willen we pictogrammen gebruiken in de app. Fuse heeft niet echt ingebouwde elementen en pictogrammensets waarmee je dat kunt doen. Wat het biedt, is een manier om bestaande pictogramlettertypen in uw app op te nemen. Omdat pictogramlettertypen in feite lettertypen zijn, kunnen we dezelfde methode gebruiken voor het opnemen van lettertypen:
Je kunt het pictogramlettertype downloaden van de GitHub-repo of het rechtstreeks downloaden van fontawesome.com. Merk op dat niet alle pictogrammen op fontawesome gratis zijn, dus het is het beste om de feitelijke pictogrampagina te controleren voordat u deze gebruikt. Als u een 'pro'-label naast het pictogram ziet, kunt u het niet eenvoudig in uw project gebruiken zonder te betalen.
Vervolgens moeten we het JavaScript-bestand voor deze pagina toevoegen. We kunnen dat doen met behulp van de
Vergeet niet om het te maken scripts /MainView.js bestand in de hoofdmap van de projectdirectory.
Om het hergebruik van code te maximaliseren, stelt Fuse ons in staat om aangepaste componenten van bestaande te maken. In de onderstaande code gebruiken we een div die fungeert als een container voor andere elementen. In dit geval gebruiken we het als een herbruikbaar onderdeel voor het maken van een knop.
Fuse wordt geleverd met veel elementen. Er zijn elementen voor het leggen van inhoud zoals de
Als u een herbruikbaar onderdeel wilt maken, voegt u een toe ux: Class eigenschappen van een presentatie-element dat u als basis wilt gebruiken. In dit geval gebruiken we een Marge voegt ruimte buiten de container toe. Hier hebben we slechts één waarde opgegeven, dus deze marge wordt toegepast op alle zijden van het paneel. Kleur voegt een achtergrondkleur toe aan het element:
Binnen in de
Binnen in de ux: Property. U kunt vervolgens de waarde die aan de eigenschap wordt geleverd, weergeven met ReadProperty PropertyName, waar Eigendomsnaam is de waarde die u heeft opgegeven ux: Property. Hiermee kunt u een Tekst eigendom wanneer u het gebruikt
Vervolgens willen we de gebruiker een soort feedback bieden terwijl de knop wordt ingedrukt. We kunnen dat doen via triggers en animators. Triggers zijn in feite de gebeurtenislisteners - in dit geval, 10% groter dan de oorspronkelijke grootte en de kleur veranderen. Looptijd en DurationBack kunt u aangeven hoe lang het duurt voordat de animatie zijn hoogtepunt bereikt en het einde bereikt.
Vervolgens maken we de
De eerste is de ux: Naam eigendom. Dit stelt ons in staat om een specifiek element een naam te geven, zodat we er later naar kunnen verwijzen. In dit geval gebruiken we het om het te wijzigen Kleur eigenschap terwijl de knop wordt ingedrukt.
We hebben ook een voorwaardelijk element gebruikt dat is genoemd is aan het rennen is een valse. We zullen de waarde voor deze variabele leveren zodra we het JavaScript-gedeelte hebben bereikt. Voor nu, weet dat deze variabele aangeeft of de timer momenteel actief is of niet.
ReadProperty-tekst
We kunnen nu doorgaan met de hoofdinhoud. Ten eerste verpakken we alles in een
In de bovenstaande code hebben we vier waarden gebruikt voor de Marge. In tegenstelling tot CSS is de waardeverdeling links, boven, rechts en onder. Als slechts twee waarden zijn opgegeven, is het links-rechts, boven-onder. U kunt de selectiegereedschap in Fuse Studio gebruiken om de toegepaste marges te visualiseren.
Vervolgens voegen we een achtergrondafbeelding voor de pagina toe. Hiermee accepteert u het bestandspad naar de achtergrondafbeelding die u wilt gebruiken. EEN StretchMode van Vullen maakt de achtergrond zelf uitgerekt om het hele scherm te vullen:
Je kunt de achtergrondafbeelding downloaden die ik heb gebruikt in de tutorial GitHub repo. Of je kunt vergelijkbare patronen vinden op de Toptal-website.
Laat vervolgens de naam van de app zien. Hieronder staat het tijdverstreken tekstveld. Deze tekst moet regelmatig worden bijgewerkt, dus we moeten deze omzetten in een variabele die kan worden bijgewerkt via JavaScript. Als u tekst wilt uitvoeren die is geïnitialiseerd in het JavaScript-bestand van deze pagina, moet u de naam van de variabele tussen accolades plaatsen. Later zult u zien hoe de waarde voor deze variabele wordt geleverd door het JavaScript-bestand:
verstreken tijd
Vervolgens gebruiken we de &#X als een voorvoegsel. Wanneer deze knop wordt ingedrukt (genaamd geklikt), de addLap () functie gedeclareerd in het JavaScript-bestand wordt uitgevoerd:
In Font Awesome vindt u de unicode van het pictogramlettertype op zijn eigen pagina.
Rechts onder de knop voor het toevoegen van een nieuwe ronde is een tekst die aangeeft dat de bovenstaande knop is voor het toevoegen van nieuwe ronden:
Laat vervolgens de knop zien voor het starten en stoppen van de timer. Dit voert ook een functie uit die we later zullen declareren:
Vervolgens moeten we de ronden uitvoeren die door de gebruiker zijn toegevoegd. Dit omvat het aantal rondjes, de afgelegde afstand en de bestede tijd. De
In de bovenstaande code gebruiken we de opstelling eigendom.
Nu zijn we klaar om de JavaScript-code toe te voegen. In Fuse wordt JavaScript voornamelijk gebruikt voor de bedrijfslogica en het werken met de eigen functionaliteit van het apparaat. Effecten, overgangen en animaties voor interactie met de gebruikersinterface worden al afgehandeld door de UX-markup.
Begin met het importeren van alle API's die we nodig hebben. Dit bevat waarneembaar, die voornamelijk wordt gebruikt voor het toewijzen van variabelen in de gebruikersinterface. Deze variabelen kunnen vervolgens worden bijgewerkt met behulp van JavaScript. timer is het equivalent van de setTimeout en setInterval functies in de webversie van JavaScript. geolocatie staat ons toe om de huidige locatie van de gebruiker te verkrijgen:
Accentsconagua
var Observable = require ("FuseJS / Observable"); var Timer = require ("FuseJS / Timer"); var GeoLocation = require ("FuseJS / GeoLocation");Vervolgens initialiseren we alle waarneembare waarden die we zullen gebruiken. Dit zijn de variabelen die u eerder in de UX-markup hebt gezien. De waarden voor deze variabelen worden gedurende de hele levensduur van de app bijgewerkt, zodat we ze een waarneembare variabele maken. Hierdoor kunnen we de inhoud van de gebruikersinterface effectief bijwerken wanneer een van deze waarden verandert:
var time_elapsed = Waarneembaar (); // de timer-tekst var toggle_btn_text = Waarneembaar (); // de tekst voor de knop voor het starten en stoppen van de timer var is_running = Observable (); // of de timer momenteel wordt uitgevoerd of niet var laps = Observable (); // de ronden toegevoegd door de gebruiker
Daarna kunnen we nu de beginwaarden voor de schakelknop en de timer-tekst instellen:
toggle_btn_text.value = 'Start'; // standaardst.knoptekst time_elapsed.value = "00:00:00"; // timer standaardtekst
Zo verander je de waarde van een waarneembare variabele. Aangezien deze zich niet in een functie bevinden, moet dit de gebruikersinterface onmiddellijk bijwerken wanneer de app wordt gestart.
Stel de beginwaarden in voor de timer, rondetijd en locatie voor elke ronde:
var time = 0; // timer var lap_time = 0; // tijd voor elke ronde var locaties = []; // locatie van de gebruiker voor elke ronde
De knevel () functie wordt gebruikt voor het starten en stoppen van de timer. Wanneer de timer momenteel is gestopt en de gebruiker op de schakelknop tikt, is dat de enige keer dat we de waarden voor de timer en ronden opnieuw instellen. Dit komt omdat we willen dat de gebruiker deze waarden ziet, zelfs nadat ze de timer hebben gestopt.
Daarna verkrijg je de huidige locatie van de gebruiker en druk je hem op de locaties matrix. Hierdoor kunnen we het later vergelijken met de volgende locatie, zodra de gebruiker een ronde toevoegt. Maak vervolgens een timer die elke 10 milliseconden wordt uitgevoerd. We verhogen zowel het totaal tijd en de rondetijd voor elke uitvoering. Update vervolgens de gebruikersinterface met de geformatteerde waarde met behulp van de formatTimer () functie:
function toggle () if (toggle_btn_text.value == 'Start') // de timer is momenteel gestopt (alternatief, gebruik is_running) ronden.helder (); // waarneembare waarden heeft een duidelijke () methode om de waarde time_elapsed.value = formatTimer (time) te resetten; is_running.value = true; locations.push (GeoLocation.location); // beginpositie ophalen timer_id = Timer.create (functie () time + = 1; // opgehoogd om de 10 milliseconden lap_time + = 1; // huidige rondetijd time_elapsed.value = formatTimer (tijd); // update de UI met de opgemaakte tijd verstreken reeks, 10, waar); else // volgende: code toevoegen voor wanneer de gebruiker de timer stopt toggle_btn_text.value = (toggle_btn_text.value == 'Start')? 'Stop': 'Start';
Wanneer de gebruiker de timer stopt, verwijderen we deze met behulp van de wissen () methode in de timer. Dit vereist de timer_id dat was terug toen de timer werd gemaakt:
Timer.delete (timer_id); // delete the running timer // reset de rest van de waarden time = 0; lap_time = 0; is_running.value = false;
De volgende is de functie voor het formatteren van de timer. Dit werkt door de milliseconden in seconden en in minuten om te zetten. We weten al dat deze functie elke 10 milliseconden wordt uitgevoerd. En de tijd wordt verhoogd met 1 elke keer dat het wordt uitgevoerd. Dus om de milliseconden te krijgen, vermenigvuldigen we eenvoudig de tijd door 10. Van daaruit berekenen we alleen de seconden en minuten op basis van de equivalente waarde voor elke meeteenheid:
functie formatTimer (tijd) functie pad (d) ga terug (d < 10) ? '0' + d.toString() : d.toString(); var millis = time * 10; var seconds = millis / 1000; mins = Math.floor(seconds / 60); secs = Math.floor(seconds) % 60, hundredths = Math.floor((millis % 1000) / 10); return pad(mins) + ":" + pad(secs) + ":" + pad(hundredths);
Telkens wanneer de gebruiker op de knop Vernieuwen tikt, wordt de addLap () functie wordt uitgevoerd. Dit voegt een nieuw item toe bovenaan de ronden waarneembaar:
function addLap () if (time> 0) // wordt alleen uitgevoerd als de timer loopt lap_time_value = formatTimer (lap_time); // noteer de huidige rondetijd lap_time = 0; // reset de rondetijd var start_loc = locaties [laps.length]; // haal de vorige locatie var end_loc = GeoLocation.location; // haal de huidige locaties location.push (end_loc); // voeg de huidige locatie toe var distance = getDistanceFromLatLonInMeters (start_loc.latitude, start_loc.longitude, end_loc.latitude, end_loc.longitude); // plaats het nieuwe item bovenaan laps.insertAt (0, title: ("Lap" + (laps.length + 1)), time: lap_time_value, distance: distance.toString () + "m."); Dit is de functie om de afstand in meters te overbruggen. Dit maakt gebruik van de Haversine-formule:
functie getDistanceFromLatLonInMeters (lat1, lon1, lat2, lon2) function deg2rad (deg) return deg * (Math.PI / 180) var R = 6371; // straal van de aarde in km var dLat = deg2rad (lat2 - lat1); var dLon = deg2rad (lon2 - lon1); var a = Math.sin (dLat / 2) * Math.sin (dLat / 2) + Math.cos (deg2rad (lat1)) * Math.cos (deg2rad (lat2)) * Math.sin (dLon / 2) * Math.sin (dLon / 2); var c = 2 * Math.atan2 (Math.sqrt (a), Math.sqrt (1 - a)); var d = (R * c) * 1000; // Afstand in m retour d;
Vergeet niet om alle waarneembare waarden te exporteren:
module.exports = toggle: toggle, toggle_btn_text: toggle_btn_text, is_running: is_running, time_elapsed: time_elapsed, ronden: ronden, addLap: addLap
Om dingen lichtgewicht te houden, bevat Fuse niet echt alle pakketten die het standaard ondersteunt. Voor zaken als geolocatie en lokale meldingen moet je Fuse vertellen om ze bij het bouwen van de app toe te voegen. Open StopWatch.unoproj in de hoofdmap van uw projectdirectory en opnemen Fuse.GeoLocation onder de Pakketjes array:
"Pakketten": ["Fuse", "FuseJS", "Fuse.GeoLocation" // dit toevoegen],
Dit moet Fuse instrueren om het Geolocation-pakket op te nemen wanneer de app wordt gebouwd voor aangepast voorbeeld of voor het genereren van een installatieprogramma.
Voordat u de app op uw iOS-apparaat kunt uitvoeren, moet u eerst een bundel-ID aan de app toevoegen. Open de Stopwatch.unoproj bestand en voeg het volgende toe iOS. Dit is de unieke identificatie voor de app wanneer deze wordt ingediend bij de app store:
"Packages": [// ...], "iOS": "BundleIdentifier": "com.yourname.stopwatch", "PreviewBundleIdentifier": "com.yourname.stopwatch.preview"
Vervolgens logt u op Xcode in met uw Apple-ontwikkelaarsaccount. Als u er nog geen heeft, kunt u naar de website van Apple-ontwikkelaar gaan en er een maken. Het is eigenlijk gratis om apps te ontwikkelen en testen op uw iOS-apparaat. Er zijn echter enkele beperkingen als u geen deel uitmaakt van het ontwikkelaarsprogramma.
Zodra uw account is aangemaakt, gaat u naar Xcode-voorkeuren en voegt u uw Apple-account toe. Klik vervolgens op Beheer certificaten en voeg een nieuw certificaat toe voor iOS-ontwikkeling. Dit certificaat wordt gebruikt om ervoor te zorgen dat de app afkomstig is van een bekende bron.
Zodra dat is gebeurd, zou u de app nu op uw apparaat moeten kunnen uitvoeren. Klik op Voorbeeld > Voorbeeld op iOS in Fuse Studio en wacht tot het Xcode start. Zodra Xcode is geopend, selecteert u uw apparaat en klikt u op de knop Afspelen. Hiermee bouwt u de app en installeert u deze op uw apparaat. Als er een build-fout is, is de kans groot dat de voorbeeldbundel-ID niet uniek is:
De. Wijzigen Bundelidentificatie iets unieks zou het probleem moeten oplossen. Zodra de fout onder het ondertekeningsgedeelte verdwijnt, klikt u opnieuw op de afspeelknop om de app opnieuw te bouwen. Dit zou de app op je apparaat moeten installeren.
U kunt de app echter pas openen als u hem goedkeurt. U kunt dat doen op uw iOS-apparaat door naar instellingen > Algemeen > Apparaatbeheer en het selecteren van het e-mailadres dat is gekoppeld aan uw Apple Developer-account. Goedkeuren, en dat zou de app moeten ontgrendelen.
Voor Android zou je de app moeten kunnen bekijken zonder aanvullende stappen.
Dat is het! In deze zelfstudie hebt u de basis van het maken van een app geleerd met behulp van het Fuse-framework. Concreet heeft u een stopwatch-app gemaakt. Door deze app te maken, heb je geleerd hoe je moet werken met Fuse's UX Markup en enkele JavaScript-API's van Fuse. Je hebt ook geleerd hoe je Fuse Studio kunt gebruiken om een voorbeeld van de app op je computer en je telefoon te bekijken terwijl je deze ontwikkelt.
