My Flask server App.py is not functional on Android Drive

Question

I have a problem with my localhost Flask server app.py, where i have my data and logs functions. My full project goes on PC and on Android, only my server localhost does not work on Android. When I run the project app on Chrome on windows, the Project runs, but when I run the project on Android Drive, then it does not read my server. My ionic app runs on ionic serve (path:8100).

My localhost, where my data is, runs on localhost:5000 serve.

My Flask server Python App.py

from flask import Flask, jsonify,request
from flask_cors import CORS, cross_origin
from posts import posts
from waitress import serve


app=Flask(__name__)
cors = CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'

@app.route('/')
@cross_origin()
def index():
    lang = request.headers.get("Accept-Language", 'sk')[:2]

    p = list(map (lambda post: translate(post, lang), posts))
    
    return jsonify(p)


def translate(post, lang):
    translation = next (t for t in post['translations'] if t['locale'] == lang)

    return {
        "id": post ['id'],
        "title": translation ['title'],
        "description": translation ['description'],
        "image": post['image'],
}
if __name__ == "__main__":
  from waitress import serve
  serve(app, host="localhost", port=5000
  )

My ionic project page "Novinky"

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';


@Component({
  selector: 'app-posts2',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.scss'],
})
export class PostsComponent implements OnInit {
  
  posts:any = [];
  constructor(private http: HttpClient) { }

  ngOnInit() {
    const lang = localStorage.getItem('lang') || 'sk';
    
    const headers = new HttpHeaders({
      'Accept-Language': lang
    })   
  
  
    this.http.get('http://localhost:5000', {
      headers: headers
    }).subscribe(data=>{
      console.log();
      this.posts = data;
       });
  }

}

When I run my project on PC i see this

enter image description here

This is my project screen. enter image description here

When I run my project on Android Studio not work i see black screen, not reed the localhost server!

enter image description here

Please help mee, thanks.

Answer 1

Assuming your flask and android app is on same LAN,

in flask, just update your host to your local ipv4 address

serve(app, host="192.168.X.X", port=5000)

And in ionic app you can access it using same ipv4 address i.e 192.168.X.X something like,

this.http.get('http://192.168.X.X:5000', {
      headers: headers
    }).subscribe(data=>{
      console.log();
      this.posts = data;
       });
  }

And when you are going live you have to replace the ipv4 with your hosted flask app's url accordingly.

Answer 2

on my terminal when i have refresh my script data not refres.

exp.when i add new data on script i not see news on Android Drive and on PC.

 {
          "id": 5,
          "quantity_left": 5,
          "image": "", 
          "translations": [
            {
                "locale": "sk",
                "title":"Park nový",   
                "description":"Park je nový",
                 
            },

Answer 3

I make cloud serve, and work at chrome oder not work on app.

This script is my app.py

from flask import Flask, jsonify,request
from posts import posts


app=Flask(__name__)

@app.route('/')
def index():
    lang = request.headers.get("Accept-Language", 'sk')[:2]

    p = list(map (lambda post: translate(post, lang), posts))

    return jsonify(p)


def translate(post, lang):
    translation = next (t for t in post['translations'] if t['locale'] == lang)

    return {
        "id": post ['id'],
        "title": translation ['title'],
        "description": translation ['description'],
        "image": post['image'],
}

This work on Chrome, not works on app,when I replace my cloud url.

Thanks