Skip to content

Commit

Permalink
docs: overview.md updates (#673)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sfshaza2
sfshaza2 authored Jan 10, 2023
1 parent 313f436 commit a37f976
Showing 1 changed file with 20 additions and 18 deletions.
38 changes: 20 additions & 18 deletions docs/docs/overview.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ sidebar_position: 1

# Overview

The Google Flutter team and Google News Initiative have co-sponsored the development of a news application template. Our goal is to help news publishers to build apps and monetize more easily than ever in order to make reliable information accessible to all.
The Google Flutter team and the [Google News Initiative](https://newsinitiative.withgoogle.com/) have co-sponsored the development of a news application template. Our goal is to help news publishers build apps and monetize them more easily in order to make reliable information accessible to all.

This template aims to **reduce the time to develop a typical news app by 80%**.

Expand All @@ -17,6 +17,8 @@ The Flutter News Toolkit:

## Quick Start

Here's what you need to get started.

### Prerequisites

**Dart**
Expand All @@ -36,9 +38,9 @@ dart pub global activate mason_cli
```

:::info
[Mason][mason_link] is a command-line tool which allows you to generate a customized codebase based on your specifications.
[Mason][mason_link] is a command-line tool that allows you to generate a customized codebase based on your specifications.

We'll use mason to generate your customized news application from the Flutter News Template.
You'll use mason to generate your customized news application from the Flutter News Template.
:::

**Dart Frog**
Expand All @@ -52,7 +54,7 @@ dart pub global activate dart_frog_cli
:::info
[Dart Frog][dart_frog_link] is fast, minimalistic backend framework for Dart.

We'll use Dart Frog as a backend for frontends (BFF) which will allow you to connect your backend with the Flutter News Template frontend.
You'll use Dart Frog as a backend for frontends (BFF) which allows you to connect your backend with the Flutter News Template frontend.
:::

### Generate your project
Expand All @@ -68,18 +70,18 @@ Projects generated from the Flutter News Template will use the latest stable ver
Use the `mason add` command to install the Flutter News Template globally on your machine:

:::info
You only need to install the `flutter_news_template` the first time. You can generate multiple projects from the template after it is installed.
You only need to install the `flutter_news_template` once. You can generate multiple projects from the template after it's installed.

You can verify whether or not you have the `flutter_news_template` installed by using the `mason list --global` command.
You can verify whether you have the `flutter_news_template` installed by using the `mason list --global` command.
:::

**via https:**
**using https:**

```bash
mason add -g flutter_news_template --git-url https://github.com/flutter/news_toolkit --git-ref templates --git-path flutter_news_template
```

**via ssh**
**using ssh**

```bash
mason add -g flutter_news_template --git-url [email protected]:flutter/news_toolkit.git --git-ref templates --git-path flutter_news_template
Expand All @@ -93,9 +95,9 @@ Use the `mason make` command to generate your new app from the Flutter News Temp
mason make flutter_news_template
```

#### Template Configuration
#### Template configuration

You'll be prompted with the following questions. Be prepared to provide the following information in order to generate your project:
You'll be prompted with several questions. Be prepared to provide the following information in order to generate your project:

```bash
# The name of your application as displayed on the device for end users.
Expand All @@ -108,7 +110,7 @@ You'll be prompted with the following questions. Be prepared to provide the foll
# See https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners
? Who are the code owners? (separated by spaces) (@githubUser)

# Select all flavors which you want the generated application to include.
# Select all flavors that you want the generated application to include.
# We recommend having at least development and production flavors.
# For more information see https://docs.flutter.dev/deployment/flavors
? What flavors do you want your application to include?
Expand All @@ -118,17 +120,17 @@ You'll be prompted with the following questions. Be prepared to provide the foll
◉ production
```

After answering the above questions, your custom news application will be generated. You are now ready to run the application locally!
After answering the above questions, your custom news application is generated. You are now ready to run the application locally!

#### Configure Firebase

:::caution

Before you can run your generated app, you will need to configure Firebase.
Before you can run your generated app, you must configure Firebase.

Go to the [Firebase Console](https://console.firebase.google.com), sign in with your Google account, and create a separate Firebase project for each flavor that your project supports (e.g. development and production).
Go to the [Firebase Console](https://console.firebase.google.com), sign in with your Google account, and create a separate Firebase project for each flavor that your project supports (for example, one for development and another for production).

In each Firebase project, create an Android and iOS app with the corresponding application ids. Make sure that the application id includes the correct suffix (e.g. "dev" for the development flavor).
In each Firebase project, create an Android and iOS app with the corresponding application IDs. Make sure that the application ID includes the correct suffix (such as "dev" for the development flavor).

Download the Google Services file for each app from the project settings page in the Firebase Console. Then, go to the source code of your generated app and look for the following `TODOs` for each flavor:

Expand All @@ -146,7 +148,7 @@ Download the Google Services file for each app from the project settings page in

Replace this message (for every flavor of the app) with the contents of the `google-services.json` and `GoogleServiceInfo.plist` files that you just downloaded from the Firebase Console.

Lastly, for iOS only you will need to open `ios/Runner.xcodeproj/project.pbxproj` and replace the following placeholder with the corresponding reversed_client_id from the `GoogleServiceInfo.plist` file:
Lastly, for iOS only you must open `ios/Runner.xcodeproj/project.pbxproj` and replace the following placeholder with the corresponding reversed_client_id from the `GoogleServiceInfo.plist` file:

```
REVERSED_CLIENT_ID = "<PASTE-REVERSED-CLIENT-ID-HERE>";
Expand Down Expand Up @@ -179,15 +181,15 @@ LZ6NBM46MCM8MFQRT6CLI6IU /* Debug-development */ = {

:::

#### Configure or Remove Ads
#### Configure or remove ads

:::info
Your project includes sample configurations for ads so that you can run your generated app with minimal setup. You will need to follow additional steps to [configure or remove ads](/project_configuration/ads).
:::

### Run the API Server

Before running the Flutter application, we need to run the API server locally. Change directories into the `api` directory of the newly-generated project and start the development server:
Before running the Flutter application, run the API server locally. Change directories into the `api` directory of the newly-generated project and start the development server:

```bash
dart_frog dev
Expand Down

0 comments on commit a37f976

Please sign in to comment.