Gemakkelijke locatiegebaseerde iOS-apps met de appy-sjabloon

Wat je gaat creëren

Invoering

Is het beter om $ 5.000 te verdienen door tien uur per dag te werken, of $ 3.000 te verdienen door er maar één te werken? Tijd is geld en het is het belangrijkste bezit dat we hebben.

Het gebruik van een app-sjabloon heeft twee voordelen: 

  • Het bespaart u tijd.
  • Je leert iets nieuws, snel.

Om een ​​app te bouwen met behulp van een sjabloon, voert u uw gegevens in, verandert u het logo, past u lettertypen aan, kleuren ... en dat is het dan.

Stel dat u een gids wilt maken met nuttige punten (kerken, musea, monumenten of zelfs parkeerplaatsen, winkels, enz.) In uw stad. U kunt uw app helemaal zelf maken en veel tijd besteden aan het ontwerpen van de interface, het schrijven van de code en het implementeren van frameworks. Of u kunt een sjabloon gebruiken en alles binnen enkele uren gereed hebben - soms minuten!

En misschien nog wel belangrijker, u bespaart tijd, niet alleen in de realisatie van de app zelf, maar ook in het leren van nieuwe concepten: u krijgt in de praktijk te zien hoe nieuwe dingen werken, zodat u veel sneller nieuwe ideeën kunt leren en assimileren.

Maar we wilden een gids maken voor onze stad, toch? Laten we kijken hoe het in tien minuten met appyMap.

Overzicht

Met appyMap kunt u uw eigen app maken om gebruikers te helpen interessante punten te vinden die zijn gegroepeerd op categorieën, zoals een referentie-app voor winkels of restaurants, een stadsgids of elk ander gebruik waarvoor plaatsen op een kaart moeten worden gelokaliseerd. U kunt de AppyMap iOS-app-sjabloon op locatie vinden om te downloaden op CodeCanyon.

De appyMap-structuur is heel eenvoudig en bestaat uit vier schermen: Home, Section, Detail en Directions (die worden geleverd door Apple Maps).

Het startscherm toont onze hoofdsecties, waarin zich de aandachtspunten bevinden.

Door een interessante plaats te selecteren, opent u het detailscherm met foto's, beschrijvingen en een extra veld (dat kan worden gebruikt voor adres, openingstijden, etc.) en een knop om routebeschrijvingen op te vragen. Als er een telefoonnummer aanwezig is, kunt u vanuit de app ook naar de nuttige plaats bellen.

Laten we nu kijken hoe we onze gegevens in de app kunnen invoegen.

App-gegevens invoeren

Er zijn twee manieren om uw gegevens in te voeren: via lokale Plist-bestanden of gebruiken CloudKit, Het cloudplatform van Apple. Elk heeft zijn eigen voor- en nadelen.

Optie 1: lokale plist-bestanden

Plist-bestanden zijn bestanden die u in uw app opneemt. Ze zijn een gestructureerd gegevensdocument, niet zoals een spreadsheetbestand.

U kunt Plist-bestanden bewerken met Xcode. Dit is de gemakkelijkste manier en is handig wanneer u alleen kleine hoeveelheden gegevens moet wijzigen of toevoegen. Een andere manier om gegevens aan een Plist-bestand toe te voegen, is door een spreadsheet te converteren en deze in Xcode te importeren. Dit is echt handig wanneer u een grote hoeveelheid gegevens moet beheren. 

Het gebruik van Plist-bestanden om de gegevens van uw app te verzenden, biedt u twee voordelen:

  1. Uw app heeft geen internetverbinding nodig om goed te kunnen werken.
  2. Minder vertraging: de Plist-gegevens van uw app worden onmiddellijk tijdens het opstarten geladen, terwijl de gegevens die in de cloud zijn opgeslagen altijd enige vertraging zullen hebben.

Het nadeel van het gebruik van lokale gegevens is dat je, als je points of interest wilt toevoegen of bewerken, een nieuwe versie van de app moet vrijgeven.

Het hoofdmenu configureren

In het Xcode-project dat met appyMap wordt meegeleverd, opent u de Main.plist bestand - dit bestand definieert het hoofdmenu. In dit bestand zien we een lijst met items die de categorieën ("secties") van interessante plaatsen definiëren. Elk item heeft drie velden:

  • ID kaart: de unieke id van de sectie, ook gebruikt voor het bestellen van artikelen
  • naam: de naam van de sectie
  • is gratis: Indien ingesteld op "Ja" het gedeelte is gratis, anders is het vergrendeld en kan het worden ontgrendeld met in-app-aankopen.

Elke sectie kan een pictogram hebben, dat dezelfde bestandsnaam zou moeten hebben als de naam van de sectie (zie de afbeelding hieronder).


U kunt zoveel secties toevoegen als u wilt: de nieuwe secties worden aan het einde van de lijst toegevoegd en de verzamelweergave van het hoofdmenu schuift indien nodig.

Points of Interest

Nadat u de hoofdsecties hebt geconfigureerd, kunt u beginnen met het toevoegen van nuttige punten. Voor elke sectie zoekt appyMap naar een Plist-bestand met dezelfde bestandsnaam als de naam die u voor de sectie kiest. Dus als u bijvoorbeeld een sectie "Huizen" heeft, zoekt appyMap naar een bestand met de naam Houses.plist, en het zal de interessante plaatsen voor de huizensectie uit dat bestand lezen.

Deze interessante bestanden hebben de volgende velden:

  1. ID kaart
  2. naam
  3. Omschrijving
  4. breedtegraad
  5. Lengtegraad
  6. tel (Optioneel)
  7. tijd(Optioneel)

Voor de thumbnail-afbeelding met plaats van belangstelling zoekt de app naar een JPEG-afbeelding met een bestandsnaam die bestaat uit de naam van de sectie gevolgd door de ID van de interessante plaats. Dus als je drie plaatsen in het museumgedeelte hebt, heb je drie foto's met de naam nodig Museum1.jpg, Museum2.jpg, en Museum3.jpg.

Optie 2: CloudKit

In plaats van uw app-informatie op te slaan in lokale Plist-bestanden, kunt u deze vanuit de CloudKit van Apple bedienen. 

Als u besluit CloudKit te gebruiken, is uw informatie niet langer lokaal, maar wordt deze vanuit de cloud gelezen. Hiermee kunt u de database van interessante plaatsen wijzigen zonder dat u nieuwe versies van de app hoeft vrij te geven. De app heeft echter een internetverbinding nodig om interessepunten te tonen.

CloudKit gebruiken

Met uw Apple-ontwikkelaarsaccount kunt u de CloudKit back-end om uw gegevens te beheren. Als u een Apple Developer-account hebt, kunt u CloudKit beheren met het CloudKit-dashboard.

Om uw App met CloudKit te verbinden, moet u naar uw Ontwikkelaarspagina, en schakel iCloud in:

Ga vervolgens terug naar Xcode, selecteer uw doel en schakel iCloud in voor je app:

Nu moet u twee recordtypen toevoegen om de app-gegevens te bewaren. Beginnend met het hoofdtype, om de sectiemenu-gegevens vast te houden: ga naar uw CloudKit-dashboard, selecteer Recordtypes, klik op de plusknop en noem het record "HoofdNu moeten we in essentie dezelfde structuur opnieuw maken als in het bestand Plist. Klik op Voeg veld toe…  en maak vier velden:

  1. naam (type: String)
  2. pic (type: Asset)
  3. bestellen (type: Int (64))
  4. is gratis (type: Int (64))

Dit is een beetje anders dan het Plist-formaat, omdat we een extra veld hebben gemaakt met de naam "pic", die het pictogram voor elke sectie zal bevatten.

Aan het einde zou je een tafel als deze moeten hebben:

Vervolgens moet u een recordtype maken voor elke sectie die uw app zal weergeven. Als u bijvoorbeeld twee secties (laten we zeggen 'Huizen' en 'Monumenten') heeft voor uw app, maakt u twee overeenkomende records met de naam 'huizen"en"monumenten"(zoals in de screenshot hierboven).

Om een ​​ander recordtype aan te maken, klikt u eerst op de + knop. Geef het record de naam van uw sectie (in dit geval "huizen"):

Klik nu op Voeg veld toe…  en maak velden zoals je eerder deed. Deze keer zijn de velden die u moet maken het volgende:

  1. naam (type: String)
  2. Omschrijving (type: String)
  3. pic (type: Asset)
  4. coördinaten (type: Locatie)
  5. tel (type: String)
  6. tijd (type: String)
  7. bestellen (type: Int64)

Merk op dat de tel (telefoon) en tijd velden zijn optioneel. Als ze aanwezig zijn, verschijnen ze in het detailscherm, anders zijn ze verborgen.

Hint: een snelle manier om kaartcoördinaten te krijgen

Het invoeren van locaties voor appyMap omvat het opzoeken van veel breedtegraden en lengtegraden. Om de breedte- en lengtegraad van een bepaalde locatie snel te vinden, zoek het op in Google Maps, klik met de rechtermuisknop op de interessante plaats en selecteer Wat is hier? Hiermee worden alle locatiegegevens en de breedtegraad en lengtegraad ervan geretourneerd. U kunt deze waarden gewoon kopiëren en plakken naar de LAT en lon velden in CloudKit of uw Plist-bestand.

Conclusie

In deze zelfstudie hebt u geleerd hoe u aan de slag kunt gaan met een nieuwe locatiegebaseerde app met behulp van de appyMap-sjabloon van CodeCanyon. U hebt geleerd hoe de sjabloon werkt en hoe u uw eigen locatiegegevens aan de sjabloon kunt toevoegen. 

Als u de sjabloon downloadt, krijgt u veel meer informatie over het instellen en aanpassen van uw app. appyMap wordt geleverd met een gedetailleerde instructiegids die u door alle stappen van het configureren en aanpassen van de sjabloon voert.

Maar het is gemakkelijk. Om een ​​app te bouwen met behulp van een sjabloon, voert u gewoon uw gegevens in, past u de kleur, lettertypen en logo aan ... en compileert u! Uw app kan binnen enkele uren klaar zijn.

Er zijn honderden andere iOS-app-sjablonen op CodeCanyon. Ga ze bekijken! Je kunt jezelf misschien urenlang werk besparen. 

Veel succes met je volgende app! En bekijk in de tussentijd een aantal van onze andere iOS-app-zelfstudies hier op Envato Tuts+.