12/27/2020 Flask App To Mac App
by Salvador Villalon
FLASKAPP=file.py: If you have your application in a Python file, you can simply set the name of the file, and Flask will import it and find the application using the same rules as in the previous option. If FLASKAPP is not defined, Flask will attempt to run import app and import wsgi. If either of these succeeds, it will then try to find the. Flask LLP was founded in 2013. We make apps for iPhone, iPad and Apple Watch We are a small team of two working in Tokyo, Japan. From flask import Flask app = Flask(name) @app.route('/') def helloworld: return 'Hello World’ if name 'main': app.run Importing flask module in the project is mandatory. An object of Flask class is our WSGI application. Flask constructor takes the name of current module (name) as argument. The route function of the.
Introduction
In each section, I will show pieces of code for you to follow along. All the code used in the tutorial is available in this GitHub Repository.
What is HTTP and What Does it Have to do with Flask?
HTTP is the protocol for websites. The internet uses it to interact and communicate with computers and servers. Let me give you an example of how you use it everyday.
When you type the name of a website in the address bar of your browser and you hit enter. What happens is that an HTTP request has been sent to a server.
For example, when I go to my address bar and type google.com, then hit enter, an HTTP request is sent to a Google Server. The Google Server receives the request and needs to figure how to interpret that request. The Google Server sends back an HTTP response that contains the information that my web browser receives. Then it displays what you asked for on a page in the browser.
How is Flask involved?
We will write code that will take care of the server side processing. Our code will receive requests. It will figure out what those requests are dealing with and what they are asking. It will also figure out what response to send to the user.
To do all this we will use Flask.
What is Flask?
It makes the process of designing a web application simpler. Flask lets us focuson what the users are requesting and what sort of response to give back.
Learn more about micro frameworks.
How Does a Flask App Work?
The code lets us run a basic web application that we can serve, as if it were a website.
This piece of code is stored in our main.py.
Line 1: Here we are importing the Flask module and creating a Flask web server from the Flask module.
Line 3: __name__ means this current file. In this case, it will be main.py. This current file will represent my web application.
We are creating an instance of the Flask class and calling it app. Here we are creating a new web application.
Line 5: It represents the default page. For example, if I go to a website such as “google.com/” with nothing after the slash. Then this will be the default page of Google.
Line 6–7: When the user goes to my website and they go to the default page (nothing after the slash), then the function below will get activated.
Line 9: When you run your Python script, Python assigns the name “__main__” to the script when executed.
If we import another script, the if statement will prevent other scripts from running. When we run main.py, it will change its name to __main__ and only then will that if statement activate.
Line 10: This will run the application. Having
debug=True allows possible Python errors to appear on the web page. This will help us trace the errors.
Let’s Try Running main.py
In your Terminal or Command Prompt go to the folder that contains your main.py.Then do
py main.py or python main.py . In your terminal or command prompt you should see this output.
The important part is where it says
Running on http://127.0.0.1:5000/ .
127.0.0.1 means this local computer. If you do not know the meaning of this (like I didn’t when I started — this article is really helpful), the main idea is that 127.0.0.1 and localhost refer to this local computer.
Go to that address and you should see the following:
More Fun with Flask
Earlier you saw what happened when we ran main.py with one route which was app.route(“/”).
Let’s add more routes so you can see the difference.
In lines 9–11. we added a new route, this time to /salvador.
Now run the main.py again and go tohttp://localhost:5000/salvador.
So far we have been returning text. Let’s make our website look nicer by adding HTML and CSS.
HTML, CSS, and Virtual EnvironmentsHTML and Templates in Flask
First create a new HTML file. I called mine home.html.
Here is some code to get you started.
Important Point To Remember
The Flask Framework looks for HTML files in a folder called templates. You need to create a templates folder and put all your HTML files in there.
Now we need to change our main.py so that we can view the HTML file we created.
Line 1: We imported
render_template() method from the flask framework. render_template() looks for a template (HTML file) in the templates folder. Then it will render the template for which you ask. Learn more about render_templates() function.
Line 7: We change the return so that now it returns
render_template(“home.html”) . This will let us view our HTML file.
Now visit your localhost and see the changes: http://localhost:5000/.
Let’s add more pages
Let’s create an about.html inside the templates folder.
Let’s make a change similar to what we did before to our main.py.
We made three new changes:
Line 9: Change the route to
'/about' .
Line 10: Change the function so it is now
def about():
Line 11: Change the return so that now it returns
render_template('about.html') .
Now see the changes: http://localhost:5000/about.
Let’s Connect Both Pages with a Navigation
To connect both pages we can have a navigation menu on the top. We can use Flask to make the process of creating a navigation menu easier.
First, let’s create a template.html. This template.html will serve as a parent template. Our two child templates will inherit code from it.
Line 13–14: We use the function called
url_for() . It accepts the name of the function as an argument. Right now we gave it the name of the function. More information on url_for() function.
The two lines with the curly brackets will be replaced by the content of home.html and about.html. This willdepend on the URL in which the user is browsing.
These changes allow the child pages (home.html and about.html) to connect to the parent (template.html). This allows us to not have to copy the code for the navigation menu in the about.html and home.html.
Content of about.html:
Content of home.html:
Let’s try adding some CSS.
Adding CSS to Our WebsiteAn important note to remember
In the same way as we created a folder called templates to store all our HTML templates, we need a folder called static.
In static, we will store our CSS, JavaScript, images, and other necessary files. That is why it is important that you should create a CSSfolder to store your stylesheets. After you do this, your project folder should look like this:
Linking our CSS with our HTML file
Our template.html is the one that links all pages. We can insert the code here and it will be applicable to all child pages.
Line 7: Here we are giving the path to where the template.css is located.
Now see the changes: http://localhost:5000/about.
Moving Forward with Flask and virtualenv
Now that you are familiar with using Flask, you may start using it in your future projects. One thing to always do is use virtualenv.
Why use virtualenv?
You may use Python for others projects besides web-development.
Your projects might have different versions of Python installed, different dependencies and packages.
We use virtualenv to create an isolated environment for your Python project. This means that each project can have its own dependencies regardless of what dependencies every other project has.
Getting started with virtualenv
First, run this command on your command prompt or terminal:
Second, do the following:
Here you can give a name to the environment. I usually give it a name of virtual. It will look like this:
virtualenv virtual .
After setting up virtual environment, check your project folder. It should look like this. The virtual environment needs to be created in the same directory where your app files are located.
Activating the virtual environment
Now go to your terminal or command prompt. Go to the directory that contains the file called activate. The file called activate is found inside a folder called Scripts for Windows and bin for OS X and Linux.
For OS X and Linux Environment:
For Windows Environment:
Since I am using a Windows machine, when I activate the environment it will look like this:
The next step is to install flask on your virtual environment so that we can run the application inside our environment. Run the command: App to control audio output device mac osx.
Run your application and go to http://localhost:5000/
We finally made our web application. Now we want to show the whole world our project.
(More information on virtualenv can be found in the following guides on virtualenv and Flask Official Documentation)
Let’s send it to the Cloud
To show others the project we made, we will need to learn how to use Cloud Services.
Deploy Your Web Application to the Cloud
To deploy our web application to the cloud, we will use Google App Engine (Standard Environment). This is an example of a Platform as a Service (PaaS).
PaaS refers to the delivery of operating systems and associated services over the internet without downloads or installation. The approach lets customers create and deploy applications without having to invest in the underlying infrastructure (More info on PaaS check out TechTarget).
Google App Engine is a platform as a service offering that allows developers and businesses to build and run applications using Google’s advanced infrastructure — TechOpedia. Before you Start:
You will need a Google Account. Once you create an account, go to the Google Cloud Platform Console and create a new project. Also, you need to install the Google Cloud SDK.
At the end of this tutorial your project structure will look like this.
We will need to create three new files: app.yaml, appengine_config.py, and requirements.txt.
Content of app.yaml:
If you were to check Google’s Tutorial in the part where they talk about content of the app.yaml, it does not include the section where I wrote about libraries.
When I first attempted to deploy my simple web app, my deployment never worked. After many attempts, I learned that we needed to include the SSL library.
The SSL Library allows us to create secure connections between the client and server. Every time the user goes to our website they will need to connect to a server run by Google App Engine. We need to create a secure connection for this. (I recently learned this, so if you have a suggestions for this let me know!)
Content of appengine_config.py: Apps that use voice control on mac.
Content of requirements.txt:
Now inside our virtual environment (make sure your virtualenv is activated),we are going to install the new dependencies we have in requirements.txt. Run this command:
-t lib: This flag copies the libraries into a lib folder, which uploads to App Engine during deployment.
-r requirements.txt: Tells pip to install everything from requirements.txt. https://yellowtera.weebly.com/blog/best-free-cd-ripping-software-for-mac-2017.
Deploying the Application
To deploy the application to Google App Engine, use this command.
I usually include — project [ID of Project]
This specifies what project you are deploying. The command will look like this:
The Application
Now check the URL of your application. The application will be store in the following way:
My application is here: http://sal-flask-tutorial.appspot.com
Conclusion
From this tutorial, you all learned how to:
What I learned
I learned three important things from this small project.
First, I learned about the difference between a static website and a web application
Static Websites: Connect my mac app instructions.
Web Applications:
Server Side and Client Side:
Second, I learned about Cloud Services
Most of my previous projects were static websites, and to deploy them I used GitHub Pages. GitHub Pages is a free static site hosting service designed to host projects from a GitHub Repository.
When working with web applications, I could not use GitHub Pages to host them. GitHub Pages is only meant for static websites not for something dynamic like a web application that requires a server and a database. I had to use Cloud Services such as Amazon Web Services or Heroku
Third, I learned how to use Python as a Server Side Language
To create the server side of the web application we had to use a server side language. I learned that I could use the framework called Flask to use Python as the Server Side Language.
Flask On MacNext Steps:
You can build all sorts of things with Flask. I realized that Flask helps make the code behind the website easier to read. I have made the following applications during this summer of 2018 and I hope to make more.
Personal Projects
During my internship
Here is the list of resources that helped me create this tutorial:
If you have any suggestions or questions, feel free to leave a comment.
The App Store and Mac App Store showcase your amazing apps and help customers find new favorites. They’re also where our editors share stories about inspiring developers and their incredible work. Find out how customers can discover your apps, and learn how our editors select apps and developers to feature.
Categories
Categories on the App Store and Mac App Store sort apps based on their main function or subject matter. Customers can browse categories, such as Entertainment, Shopping, or Social Networking, to find related apps. You can assign a primary and a secondary category to your app. The primary category is particularly important for discoverability, as it helps users find your app when browsing or filtering search results, and it determines in which tab your app appears on the App Store.
To learn more, see Choosing a Category.
Today Tab
The Today tab on the App Store is a daily destination with original stories from our editors around the world, featuring exclusive premieres, new releases, a fresh look at our all-time favorites, an App of the Day, a Game of the Day, and more. It offers tips and how-to guides to help customers use apps in innovative ways, and showcases interviews with inspiring developers. Stories share Apple’s unique perspective on apps and games and how they impact our lives, using artwork, videos, and developer quotes to bring your apps to life.
Games and Apps Tabs
The App Store is also the world’s best game store, with dedicated experiences for games and apps that inform and engage customers through recommendations on new releases and updates, videos, top charts, and handpicked collections and categories. Both tabs also feature app preview videos that autoplay with muted audio as customers scroll through the tabs, and selected in-app purchases — which customers can start buying directly on the App Store.
Promoted In-App Purchases
Customers can browse in-app purchases directly on the App Store and start a purchase even before downloading your app, helping your app’s content gain exposure. You can promote up to 20 in-app purchases, including subscriptions, on your app’s product page. They can also appear in search results and may be featured by our editorial team.
For details, see Promoting Your In-App Purchases.
Discover
Discover is where customers find the best new releases and updates on the Mac App Store. Each week, our editors shine a light on incredible apps and games with in-depth stories, behind-the-scenes interviews, and curated collections to help customers do more of what they love with their Mac.
Create
Create is where customers find powerful apps that make creating on a Mac intuitive, efficient, and fun, with helpful tips and tours that even experts will find useful.
Work
Work is where we showcase new favorites that support focus and organization. With curated collections and how-tos from our editors, finding the right business, productivity, and utility apps is easy.
PlayFlask Web Apps
Play is where we highlight great games and entertainment apps, with recommendations of new releases, all-time favorites, and handpicked collections.
Develop
Develop is where our editors curate the best developer tools and utilities to help bring your creativity and imagination to customers around the world.
Getting Featured
App Store editors write stories that showcase apps in interesting and informative ways. Our editors base their decisions on a variety of factors, all of which amount to a great product that customers will love. There is no paid placement or checklist of requirements for apps we write about or feature.
Stories.App Store editors talk about apps that have a unique story for example, a behind-the-scenes look at how a developer launched an app that disrupted an industry or how an app helped a customer solve a unique problem.
Apps and Games. When considering apps to feature, our editors look for high-quality apps across all categories, with a particular focus on new apps and apps with significant updates. Factors that our editors consider include:
For games, editors also consider:
Flask App To Mac App FreeTell us your story.Flask App Example
If your app has a unique story that our editorial team should know, tell us about it. For new apps or a significant update, let us know six to eight weeks in advance of your launch.
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |