2023-12-27 22:29:25 +00:00
<!DOCTYPE html>
< html class = "writer-html5" lang = "en" >
< head >
< meta charset = "utf-8" / > < meta name = "generator" content = "Docutils 0.18.1: http://docutils.sourceforge.net/" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< title > React App — Usse 1 documentation< / title >
< link rel = "stylesheet" href = "_static/pygments.css" type = "text/css" / >
< link rel = "stylesheet" href = "_static/css/theme.css" type = "text/css" / >
<!-- [if lt IE 9]>
< script src = "_static/js/html5shiv.min.js" > < / script >
<![endif]-->
< script data-url_root = "./" id = "documentation_options" src = "_static/documentation_options.js" > < / script >
< script src = "_static/doctools.js" > < / script >
< script src = "_static/sphinx_highlight.js" > < / script >
< script src = "_static/js/theme.js" > < / script >
< link rel = "index" title = "Index" href = "genindex.html" / >
< link rel = "search" title = "Search" href = "search.html" / >
< link rel = "next" title = "Hypotheek" href = "hypotheek.html" / >
< link rel = "prev" title = "Open Street Maps" href = "osm.html" / >
< / head >
< body class = "wy-body-for-nav" >
< div class = "wy-grid-for-nav" >
< nav data-toggle = "wy-nav-shift" class = "wy-nav-side" >
< div class = "wy-side-scroll" >
< div class = "wy-side-nav-search" >
< a href = "index.html" class = "icon icon-home" > Usse
< / a >
< div role = "search" >
< form id = "rtd-search-form" class = "wy-form" action = "search.html" method = "get" >
< input type = "text" name = "q" placeholder = "Search docs" / >
< input type = "hidden" name = "check_keywords" value = "yes" / >
< input type = "hidden" name = "area" value = "default" / >
< / form >
< / div >
< / div > < div class = "wy-menu wy-menu-vertical" data-spy = "affix" role = "navigation" aria-label = "Navigation menu" >
< p class = "caption" role = "heading" > < span class = "caption-text" > Scraping:< / span > < / p >
< ul >
< li class = "toctree-l1" > < a class = "reference internal" href = "funda.html" > Scraping Funda< / a > < / li >
< li class = "toctree-l1" > < a class = "reference internal" href = "googlemaps.html" > Google Maps API< / a > < / li >
< li class = "toctree-l1" > < a class = "reference internal" href = "osm.html" > Open Street Maps< / a > < / li >
< / ul >
< p class = "caption" role = "heading" > < span class = "caption-text" > App:< / span > < / p >
< ul class = "current" >
< li class = "toctree-l1 current" > < a class = "current reference internal" href = "#" > React App< / a > < ul >
< li class = "toctree-l2" > < a class = "reference internal" href = "#usage" > Usage< / a > < / li >
2024-04-01 14:50:30 +00:00
< li class = "toctree-l2" > < a class = "reference internal" href = "#docker" > Docker< / a > < ul >
< li class = "toctree-l3" > < a class = "reference internal" href = "#redeploy" > Redeploy< / a > < / li >
< li class = "toctree-l3" > < a class = "reference internal" href = "#filters" > filters< / a > < / li >
< / ul >
< / li >
2023-12-27 22:29:25 +00:00
< / ul >
< / li >
< / ul >
< p class = "caption" role = "heading" > < span class = "caption-text" > Hypotheek:< / span > < / p >
< ul >
< li class = "toctree-l1" > < a class = "reference internal" href = "hypotheek.html" > Hypotheek< / a > < / li >
< / ul >
< / div >
< / div >
< / nav >
< section data-toggle = "wy-nav-shift" class = "wy-nav-content-wrap" > < nav class = "wy-nav-top" aria-label = "Mobile navigation menu" >
< i data-toggle = "wy-nav-top" class = "fa fa-bars" > < / i >
< a href = "index.html" > Usse< / a >
< / nav >
< div class = "wy-nav-content" >
< div class = "rst-content" >
< div role = "navigation" aria-label = "Page navigation" >
< ul class = "wy-breadcrumbs" >
< li > < a href = "index.html" class = "icon icon-home" > < / a > < / li >
< li class = "breadcrumb-item active" > React App< / li >
< li class = "wy-breadcrumbs-aside" >
< a href = "_sources/app.rst.txt" rel = "nofollow" > View page source< / a >
< / li >
< / ul >
< hr / >
< / div >
< div role = "main" class = "document" itemscope = "itemscope" itemtype = "http://schema.org/Article" >
< div itemprop = "articleBody" >
< section id = "react-app" >
< h1 > React App< a class = "headerlink" href = "#react-app" title = "Permalink to this heading" > < / a > < / h1 >
< p > In order to use the scraped data a < em > react app< / em > was developed.
The main thing this app does is show a map, with icons for each house, while also showing the distance and travel time:< / p >
< figure class = "align-default" >
< img alt = "_images/react_app_example.png" src = "_images/react_app_example.png" / >
< / figure >
2024-04-01 14:50:30 +00:00
< p > The app works using the generated out.json file from the scrape project. This file is compiled in the app. This makes the loading of the App quite slow.
Also a lot of markers has some impact on the performance of the app.< / p >
2023-12-27 22:29:25 +00:00
< section id = "usage" >
< h2 > Usage< a class = "headerlink" href = "#usage" title = "Permalink to this heading" > < / a > < / h2 >
< p > Copy the generated < em > out.json< / em > file that was generated in the < em > usse scrape< / em > project to < code class = "docutils literal notranslate" > < span class = "pre" > src/locations.json< / span > < / code > , next you can run the app:< / p >
< div class = "highlight-bash notranslate" > < div class = "highlight" > < pre > < span > < / span > npm run start
< / pre > < / div >
< / div >
< p > This should start a server running the app.< / p >
< / section >
< section id = "docker" >
< h2 > Docker< a class = "headerlink" href = "#docker" title = "Permalink to this heading" > < / a > < / h2 >
< p > A dockerfile was created in order to serve the application on < code class = "docutils literal notranslate" > < span class = "pre" > Wintergreen< / span > < / code > .
To use the dockerfile you can simply use the bash script: < code class = "docutils literal notranslate" > < span class = "pre" > use_docker.sh< / span > < / code > and run it to run the docker container:< / p >
< div class = "highlight-bash notranslate" > < div class = "highlight" > < pre > < span > < / span > ./use_docker.sh
< / pre > < / div >
< / div >
2024-04-01 14:50:30 +00:00
< p > Several commands are supported:< / p >
< div class = "highlight-bash notranslate" > < div class = "highlight" > < pre > < span > < / span > ./use_docker.sh remove
./use_docker.sh rebuild
< / pre > < / div >
< / div >
< section id = "redeploy" >
< h3 > Redeploy< a class = "headerlink" href = "#redeploy" title = "Permalink to this heading" > < / a > < / h3 >
< p > To recreate the app you can run:< / p >
< div class = "highlight-bash notranslate" > < div class = "highlight" > < pre > < span > < / span > ./use_docker.sh recreate
< / pre > < / div >
< / div >
< / section >
< section id = "filters" >
< h3 > filters< a class = "headerlink" href = "#filters" title = "Permalink to this heading" > < / a > < / h3 >
< p > The app also has filters for price and distance to various locations:< / p >
< figure class = "align-default" >
< img alt = "_images/react_filter.png" src = "_images/react_filter.png" / >
< / figure >
< / section >
2023-12-27 22:29:25 +00:00
< / section >
< / section >
< / div >
< / div >
< footer > < div class = "rst-footer-buttons" role = "navigation" aria-label = "Footer" >
< a href = "osm.html" class = "btn btn-neutral float-left" title = "Open Street Maps" accesskey = "p" rel = "prev" > < span class = "fa fa-arrow-circle-left" aria-hidden = "true" > < / span > Previous< / a >
< a href = "hypotheek.html" class = "btn btn-neutral float-right" title = "Hypotheek" accesskey = "n" rel = "next" > Next < span class = "fa fa-arrow-circle-right" aria-hidden = "true" > < / span > < / a >
< / div >
< hr / >
< div role = "contentinfo" >
< p > © Copyright 2023, Eljakim.< / p >
< / div >
Built with < a href = "https://www.sphinx-doc.org/" > Sphinx< / a > using a
< a href = "https://github.com/readthedocs/sphinx_rtd_theme" > theme< / a >
provided by < a href = "https://readthedocs.org" > Read the Docs< / a > .
< / footer >
< / div >
< / div >
< / section >
< / div >
< script >
jQuery(function () {
SphinxRtdTheme.Navigation.enable(true);
});
< / script >
< / body >
< / html >
