How to create a GIS map (web application) using OpenLayers 3 or 4? [closed]

Question

I want to create a GIS map using TileCache, Mapnik, PostgreSQL-PostGIS in a Python-Django web application.

var layer2 = new ol.layer.Tile({
        source: new ol.source.OSM() 
    })
map = new ol.Map({
        target: 'map',
        layers: [ layer, layer2 ],
        view: new ol.View({
        center: ol.proj.fromLonLat([37.41, 8.82]),
        zoom: 13
        })
    });

I have a map of OSM, but I want to display my own map from PostGIS data and cache map tiles on the server side.

I have an sample.xml :

    <?xml version="1.0"?> 
    <Map background-color="transparent" srs="+proj=utm +zone=43 +datum=WGS84 +units=m +no_defs" buffer-size="128" minimum-version="0.7.2"> 
    <Style name="style_line">
        <Rule>
            <MaxScaleDenominator>115000</MaxScaleDenominator>
                    <LineSymbolizer stroke="rgb(0,0,0)" stroke-width="0.98" stroke-linejoin="round" stroke-dasharray="7,3"/>
        </Rule>
    </Style>
    <Style name="style_text">
        <Rule>
            <MaxScaleDenominator>115000</MaxScaleDenominator>
           <TextSymbolizer face-name="DejaVu Sans Bold" size="9" fill="rgb(139,137,137)" minimum-distance="5" allow-overlap="true" placement="interior">[name}</TextSymbolizer>
        </Rule>
    </Style>
     <Layer name="TestLayer" srs="+proj=utm +zone=43 +datum=WGS84 +units=m +no_defs" status="on">
             <StyleName>style_line</StyleName>
             <StyleName>style_text</StyleName>
            <Datasource>
                <Parameter name="dbname">testdb</Parameter>
                <Parameter name="estimate_extent">0</Parameter>
                <Parameter name="extent">291627,904686,958569,1426831</Parameter>
                <Parameter name="geometry_field">geom</Parameter>
                <Parameter name="host">localhost</Parameter>
                <Parameter name="password">password</Parameter>
                <Parameter name="port">5432</Parameter>
                <Parameter name="srid">32643</Parameter>
                <Parameter name="table">select name,geom from details</Parameter>
                <Parameter name="type">postgis</Parameter>
                <Parameter name="user">testuser</Parameter>
            </Datasource>
     </Layer> 
   </Map>

and tilecache.cfg contains

[cache]
type=Disk 
base=/dump/cachedata

[testlayer]
type=Mapnik
mapfile=/var/www/Mapfiles/sample.xml
bbox=291627,904686,958569,1426831
srs=EPSG:32643
debug=no

[basic]
type=WMS
url=http://labs.metacarta.com/wms/vmap0
extension=png

I used OpenLayers 2

map = new OpenLayers.Map('map', 
    {controls: [
        new OpenLayers.Control.PanZoomBar({title:"Navigation",zoomWorldIcon:true}),
        new OpenLayers.Control.Navigation({zoomWheelEnabled:true}),
        new OpenLayers.Control.ScaleLine(),
        new OpenLayers.Control.Scale('scalebarDiv'),
        new OpenLayers.Control.LayerSwitcher(),
        new OpenLayers.Control.MousePosition(),
    ],          
    numZoomLevels:13,
    maxExtent: new OpenLayers.Bounds(291627,904686,958569,1426831),
    restrictedExtent:new OpenLayers.Bounds(291627,904686,958569,1426831),
    units:"m",
    projection:new OpenLayers.Projection("EPSG:32643"),
    maxResolution:2605.2421875          
    }); 

controls={ 
        zoomIn:new OpenLayers.Control.ZoomBox(),
    zoomOut:new OpenLayers.Control.ZoomBox({out:true}),    
}; 
for(var key in controls) {
        map.addControl(controls[key]);
} 

var layer1 = new OpenLayers.Layer.TMS("Layer1", "http://192.168.1.1/tilecache/tilecache.cgi/",{layername:"Layer1",type:"png",isBaseLayer:true,transitionEffect:"resize"});
var layer2 = new OpenLayers.Layer.TMS("Layer2", "http://192.168.1.1/tilecache/tilecache.cgi/",{layername:"Layer2",type:"png",isBaseLayer:false,transitionEffect:"resize"});

map.addLayers([layer1,layer2]); 

but now I want to upgrade to ol3 or ol4. For that I couldn't find any TileCache configuration like this. I saw ol-tilecache, but don't know how to give the URL