Good morning from Greece to all the developer wizzards

Recently I followed the module - 
Develop an Account Geolocation App with Aura Components 

and managed to complete it without an issue albight having ZERO coding experience. My relationship to SF is from the admin perspective but I find coding realy facinating since the solutions one can create are "limitless" so I tried to make adjustments to the component and make it work for the contacts as well, BUT having no experience I runned into issues.

First I created the ContactLocator.cmp (tried to make all the necessary changes to fit my requirement)

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    <lightning:layout horizontalAlign="space" multipleRows="true">
        <lightning:layoutItem size="12"
                              mediumDeviceSize="12"
                              padding="around-small">
            <c:ContactSearch/>
        </lightning:layoutItem>
        <lightning:layoutItem size="12"
                              mediumDeviceSize="6"
                              padding="around-small">
            <c:ContactList/>
        </lightning:layoutItem>
        <lightning:layoutItem size="12"
                              mediumDeviceSize="6"
                              padding="around-small">
            <div class="slds-box slds-theme_default">
                ContactMap goes here
            </div>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

then I created the ContactLocator tab

then I created the ContatctSearchController.apxc

public with sharing class ContatctSearchController {
    @AuraEnabled
    public static List<Contact> searchContacts( String searchTerm ) {
        List<Contact> Contacts = new List<Contact>();
        if ( String.isNotBlank( searchTerm ) ) {
            List<List<SObject>> searchResults = [
                FIND :searchTerm
                RETURNING Contact(
                    Id, Name, Phone,
                    MailingStreet, MailingCity,
                    MailingState, MailingPostalCode
                    ORDER BY Name
                    LIMIT 20
                )
            ];
            contacts = searchResults[0];
        }
        return contacts;
    }
}

then I created the ContactsLoaded.evt

<aura:event type="APPLICATION">
    <aura:attribute name="contacts" type="Contact[]"/>
</aura:event>

then I created the ContactSearch.cmp

<aura:component controller="ContatctSearchController">
    <aura:registerEvent name="contactsLoaded" type="c:ContactsLoaded"/>
    <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
    <aura:attribute name="searchTerm" type="String" default="Enter Contact Detail"/>
    <lightning:card title="Contact Search" iconName="standard:search">
        <div class="slds-form slds-p-around_x-small">
            <lightning:input
                label="Search"
                variant="label-hidden"
                value="{!v.searchTerm}"
                placeholder="Search by name, phone, website, or address"
                onchange="{!c.onSearchTermChange}"/>
        </div>
    </lightning:card>
</aura:component>

then I created the ContactSearchController.js

({
    onInit: function( component, event, helper ) {
        // proactively search on component initialization
        var searchTerm = component.get( "v.searchTerm" );
        helper.handleSearch( component, searchTerm );
    },
    onSearchTermChange: function( component, event, helper ) {
        // search anytime the term changes
        var searchTerm = component.get( "v.searchTerm" );
        // to improve performance, particularly for fast typers,
        // we wait a small delay to check when user is done typing
        var delayMillis = 500;
        // get timeout id of pending search action
        var timeoutId = component.get( "v.searchTimeoutId" );
        // cancel pending search action and reset timer
        clearTimeout( timeoutId );
        // delay doing search until user stops typing
        // this improves client-side and server-side performance
        timeoutId = setTimeout( $A.getCallback( function() {
            helper.handleSearch( component, searchTerm );
        }), delayMillis );
        component.set( "v.searchTimeoutId", timeoutId );
    }
})

then I created the ContactSearchHelper.js

({
    // code in the helper is reusable by both
    // the controller.js and helper.js files
    handleSearch: function( component, searchTerm ) {
        var action = component.get( "c.searchContacts" );
        action.setParams({
            searchTerm: searchTerm
        });
        action.setCallback( this, function( response ) {
            var event = $A.get( "e.c:ContactsLoaded" );
            event.setParams({
                "contacts": response.getReturnValue()
            });
            event.fire();
        });
        $A.enqueueAction( action );
    }
})

then I created the ContactList.cmp​​​​​​​

<aura:component>
    <aura:handler event="c:ContactsLoaded" action="{!c.onContactsLoaded}"/>
    <lightning:navigation aura:id="navigation"/>
    <aura:attribute name="rows" type="Map[]"/>
    <aura:attribute name="cols" type="Map[]"/>
    <lightning:card title="Contact List" iconName="standard:contact">
        <lightning:datatable
            data="{!v.rows}"
            columns="{!v.cols}"
            keyField="Id"
            hideCheckboxColumn="true"
            showRowNumberColumn="true"
            onrowaction="{!c.onRowAction}"/>
    </lightning:card>
    </aura:component>

then I created the ContactLstController.js​​​​​​​

({
    onAccountsLoaded: function( component, event, helper ) {
        var cols = [
            {
                'label': 'Name',
                'fieldName': 'Name',
                'type': 'text'
            },
            {
                'label': 'Phone',
                'fieldName': 'Phone',
                'type': 'phone'
            },
            {
                'label': 'Website',
                'fieldName': 'Website',
                'type': 'url'
            },
            {
                'label': 'Action',
                'type': 'button',
                'typeAttributes': {
                    'label': 'View details',
                    'name': 'view_details'
                }
            }
        ];
        component.set( 'v.cols', cols );
        component.set( 'v.rows', event.getParam( 'contacts' ) );
    },
    onRowAction: function( component, event, helper ) {
        var action = event.getParam( 'action' );
        var row = event.getParam( 'row' );
        if ( action.name == 'view_details' ) {
            var navigation = component.find( 'navigation' );
            navigation.navigate({
                'type': 'standard__recordPage',
                'attributes': {
                    'objectApiName': 'Contact',
                    'recordId': row.Id,
                    'actionName': 'view'
                }
            });
        }
    }
})

After this step, I stoped to check if everything was working and beingHoping that I have done everything correct I checked the component in the sales application BUT i received the following error


Your help with this issue will be greatly appreciated.

If it is possible, please be so kind to also suggest me any matterial that will fastrack my understanding of coding and lightning components.

With regards
​​​​​​​Dimitrios