Developing geospatial webapps with Python and Django - Tutorial

hello my friends of their labs my name is ol montoya please welcome to welcome to this tutorial to the for the development of your special web apps with python and django so what are we going to do today is a way back that it would be like this one like let me show you yeah it will be this web app that is a simple web app where you have two chip files that are imploded on volume and that actually is a wrap up is uh implements leaflet yes okay and this is done in a web um in as a python web app so we are going to cover the procedure and try to bring you an introductory to this library and how it works is really i mean we for water resources and other topics we see on gis we see that django has a lot of potential but we we have to give you [Music] some basic introduction and then then from that we can develop more more interesting more interesting tutorials topics or developments okay so you're going to let's have a let's close this and then here on documents i will turn off the engine and close this and then just here and then i will close as well there because i have to close the atom okay so let's start okay what you need to do first is to you need to open anaconda prompt okay and here you have to see the documents documents here so actually you are hearing documents and then you need to install pip dot install jungle and then i have young already installed and then keep install volume okay i have volume already installed and then here we are going to use some of the jungle tools and jungle jungle admin in star project star project you okay great so this is we create so if we type there we see that geo is already a folder and i will use atom as my text editor and here on atom if i open it okay so so this is my star screen of atoms file add project folder and then i go to documents and geo and the okay well i had it already open so that's why i have to choose this one i can close this and then once i do that it creates a geo folder that has also the geo one geo folder inside the geo folder and it has this basic configuration of any other jungle app okay and it has also the manage pi okay great so what what is next is that we have to go to cd geo okay so we are inside the geo and then say python manage pi star up geo up okay so with that we open up we create a new app and what has done is that has created this one that has that has [Music] that also creates all these folders and it has also the creation the migration that is something that you will see later on on the on the well with coming tutorials we will talk about the migrations and the static and so on okay then okay we have created our jio app okay so the geo app will be actually what it will launch the chip files okay and okay so let's check to atom you can use any other text editor or edit that you like okay um okay so here in the geo app we have we have to create a new folder it's called urls so new file you will learn let's stop by okay and here on urls.pi from the geo app we need to type from jungle urls import pad from the jungle on trip country dot out import views as out views from import views so in jungle the view is what you see so then we will talk about this before and say url patterns is equal to is equal to and it's a dictionary where no no it's actually a list sorry it's a list where path of of the roots it will be we'll call views.home and the name will be home [Music] okay great so far it's doing okay and then we have to call this so we are going ctrl s we are going to save it yeah and then we need to we need to the let's see we need to the project we need to tell the project that it should look for these urls of the of our app so how we do that so we go to urls but from jio and here on your errors from geo we are going to say from the young url's import path and include yeah and here we are going to add another part that is but and say include you update urls okay great and comma otherwise it cannot understand that this is a list sometimes okay so just add include and this will be path and this and add this okay great so right now we have already set up the urls okay and what we need is we need to create a folder for the templates and which folder will be so let's go here on geoapp let's create a new folder it's called templates and then inside the templates let's call a new folder that is called geo app okay and that's it and this is the convention of jungle okay so yango actually needs this uh this convention that when where you are going to paste your html needs to be inside templates i mean inside a folder that has the the app name that is inside template that is inside the app okay that's that's something how jungle works okay and this is on the documentation okay great so what is what net what is next what is next is uh we are going to work with the settings pi of the geo geo settings pi and then we have to work to type in or os okay and then we need to define some static file there's a media root at the end media to url is equal to medium and then say static five years is equal to postpartum this is directing five years and this is the media route is equal to okay ctrl s save and then we have to add two folders to our app not to the root sorry to the root okay to follow us to the root so new folder static and the other folder will be a media okay there are some people that are watching this on the stream and i'm really thank you for for watching this uh if you want to to say hi or if you want to type from which country you are connected just say so if you have any questions as well just give it to me yep so okay so we have the static and the media and then okay you are going to receive a description when this will be posted on the on the website we you will receive this folder that is called to send this control folder that has the on the static it has these two it has the bootstrap and the jquery the library so we have to see we have to do ctrl c and then paste it in our static okay okay because those are the static those are the libraries that actually has the libraries of hostrap and jquery okay what else [Music] they know then we have to go to settings.pi and then we need to add our app to the list of apps from jungle so let's say okay let's let's add our app otherwise jungle won't recognize that our app is inside the project okay so geo up and then in templates let's set where the templates are going to be located so templates can be located along you up templates okay so this means that it it will recognize the templates that we have that we will create here okay as the templates of the project okay or i mean it will read those templates okay then what is next okay so let's work with the views.pi so let's save this and let's go from our app let's go to view those api and then say render ready okay let's say dev home request it will be com text is equal to is an empty dictionary and they say red term render of request geo up slash [Music] okay so this will be this is um this actually looks for this html and brings back the context that is actually empty dictionary okay and then let's create our own geo app let's create a new file that will be home dot html okay and here you will find on the on the two cent on the folder that will be attached to this to the description of the video you will find something that is called guide gear in spanish and here what you are going to see is the what you're going to see is a html that actually has the head the body but our this is mostly just uh the frame of your app the frame of your app so we are going to paste it ctrl s okay and this is the frame of our app yeah that is just a frame [Music] there is a question on the chat that say that they hope that this this put this up they won't be in the jet hub they will be on the on the block so but all files will be available for a later review okay so yeah we have the home html okay so we can continue and then we can run our app how we can run our app so here on the contact just type python dot manage pi run server and then e okay i have a problem here what is the problem okay we we have a problem in your app.uls views home let me check this please okay let me check ah okay okay i need a comma here okay very tricky i need a comma here and let me check what okay click clear cls run server okay you have here another one exception you have you do not have okay let me check let me check this this is perf you are patterns part of use views views home [Music] name home you earn a bad terms of once again yep it's working and then if it is working if we type localhost if you if we open localhost this is our localhost that has nothing why it has nothing because it is um it's only the frame now what we are going to do is we are going to fill that with some geospatial data okay so what we are going to do now is we are going here from the files that are located on the on the file are located on the on the compressed folder attached to the video we have uh data and here we have a check file file so we are going to copy this control c and we are going to paste it where we are going to paste it we are going to paste it in documents on geo and on media and then okay this here would be our uh hero media will be our um geo in media immediate this is where we where our chip files that in fact are reasons okay okay so okay once we have this we go to views and here's a form your jungle shortcut simple render redirect and then import os in portfolium okay and then the from requests shape here is equal to als dot dot join get current work directory medium okay this is where an shp this is where hhp is the folder that we have based under vdm okay and then say m is equal to volume up volume mark and then we have to place a reference location location is equal to minus 16. minus 71.59 [Music] and then we can type some style basing is equal to fill color hashtag to [Music] 8b22 column and this is for the basin because there are two and this is for the rear and then we can add this to the to the view so say volume dot here json also join the shape the wii basing pure json [Music] function is where x is equal to style basing and then we add to the map at two map this adds the basin and then we are going to to add the river okay so this is the river river okay reverse actually streamers okay then we can export our m is equal to m dot [Music] reproduce html okay and then context is equal to my map my map if this is equal to m m that is our map and then here context has a value okay so yes let's press ctrl s and here on our home html after p class so we can close home html and open again just to compile the html and here we will put our placeholder that is something that is called like this in in jungle that it will be my map s and then if we remember that we have it already running our engine so that's why if we if i update this okay so i say river basin not defined in views river basin not defining views let's see what happens in views river basin rear basin which in which line same thing 17 river base i know style river reverses style reader okay let's update this and it says and then say that context needs to be wait wait wait wait wait wait do um let me check it again must be a dick rather than set let me check if everything is okay check dear volume rooms location okay here it is [Music] context is equal to my map ah okay okay this is two points point okay and then here something that is missing is a control volume dot layer control so if i update this voila here you have your first i hope that you for you will be your first awesome apps on an app that plots two check files on jungle okay and this is um [Music] um this is an app that is a first is a base for future apps that will import chip files that will work on the that will work on on the database that later on we can do styling and so on um okay so i think that this is um very that will be very helpful for you um well i'm happy that we can and tomorrow i will post it on our website all the required all the input data um and maybe um and maybe the steps and thank you for following this tutorial just to remember that we are a website of knowledge sharing water resources we have courses and we have webinars that you can there is a common course so grab water modeling with mold flow python flu pi we have a webinar on last landsat a landsat 8 processing analysis with a stereo and a very interesting course or python for hydrology okay um as well you know those are giving in our learning platforms and as well we have other past webinars that you can also uh take if you whether this is of your special interest okay uh thank you for following till now thank you for sharing thank you for for your interest we hope that you can share our um stuff through the internet and hope to see you in common tutorials

Channel: Hatari Labs

Views: 12,278

Keywords:

Id: sdhiVtDw-GA

Length: 33min 20sec (2000 seconds)

Published: Mon Sep 21 2020