This commit is contained in:
Judith de la Fuente 2021-04-26 14:38:21 +02:00
Родитель 1549413d8a
Коммит 3c3ab4f63a
15 изменённых файлов: 51 добавлений и 16 удалений

Просмотреть файл

@ -37,6 +37,8 @@ To verify the integrity of the package, download the `vsix` from the Marketplace
- Press `Ctrl + Shift ⇧ + P` in Windows/Linux or `Command ⌘ + Shift ⇧ + P` in Mac to open VSCode's extension launcher
- Type/Select `Web Template Studio: Create Web App` for a full-stack web application or `Web Template Studio: Create React Native App` for a React Native one, and press `Enter` to launch the extension
**Note**: React Native is still in Preview and we appreciate any feedback on [GitHub](https://github.com/microsoft/WebTemplateStudio/issues).
### Deploy the generated project
- Open **VSCode**
@ -57,10 +59,6 @@ I want to create a react native app that works for Android, iOS and Windows. I w
<img alt="App with Azure Services" src="./docs/resources/webts-dark-theme-react-native.png" width="95%" />
Android App | Windows App
:-------------------------:|:-------------------------:
<img alt="Basic React Native app for Android" src="./docs/resources/react-native-sample-android-app.png" width="550" /> | <img alt="Basic React Native app for Windows" src="./docs/resources/react-native-sample-windows-app.png" />
## Features
*Web Template Studio* approaches full-stack web app creation using the following three attribute sets:
@ -75,7 +73,7 @@ Once you make the selections you want and click generate, you can quickly extend
## Known Issues
### React Native Applications
#### 1. Generated App has some lint errors.
As a workaround you just need to run `yarn lint --fix`. There´s already an issue to fix [this](https://github.com/microsoft/WebTemplateStudio/issues/1769).
As a workaround you just need to run `yarn lint --fix`. There´s already an issue to fix [this](https://github.com/microsoft/WebTemplateStudio/issues/1769).
#### 2. React Native Windows.
- Update to 0.64: Bottom tab navigation doesn´t change text colour when selected. There´s [an issue](https://github.com/microsoft/react-native-windows/issues/7560) in React Native Windows to fix this in version 0.65.
- Bundle targets fail when path contains spaces. There´s [an issue](https://github.com/microsoft/react-native-windows/issues/7597) in React Native Windows to fix this in version 0.65.
@ -87,7 +85,7 @@ Please use [GitHub issues](https://github.com/Microsoft/WebTemplateStudio/issues
If you have specific feature requests or would like to vote on what others are recommending, please go to the [GitHub issues](https://github.com/Microsoft/WebTemplateStudio/issues) section as well. We would love to see what you are thinking.
We are still extremely early in development and are looking for feedback for roadmap. Currently we are in the process of stabilizing our React, Angular and Vue.js with Node and Flask.
We are still early in development and are looking for [feedback](https://github.com/Microsoft/WebTemplateStudio/issues) for the roadmap. We're still working on polishing our Web Templates and in our latest version we've also added an initial version of React Native templates.
## Contributing

Просмотреть файл

@ -6,7 +6,9 @@ This section outlines the main concepts and definitions used in *Web Template St
*Web Template Studio* is divided in the following main elements:
- **Extension**: Refers to the Visual Studio Code Extension project, which, once installed, allows users to have an improved experience when creating a new Web Application from the `Web Template Studio: Create Web App` command. The extension is written in typescript.
- **Extension**: Refers to the Visual Studio Code Extension project, which, once installed, allows users to have an improved experience when creating a new Web Application from the `Web Template Studio: [command name]` command. The extension is written in typescript.
Can check available commands [here](./contributing/application-architecture.md).
- **Wizard**: Refers to the WebTS client project, where all user interaction occurs after launching *Web Template Studio*. The Wizard guides the user through some steps to create the desired project. It allows the user to select from the available frameworks, pages and Azure Cloud Services. The wizard is created with React Typescript and is displayed through the React Panel.
- **Core Template Studio and Core Template Studio CLI**: Refers to the .NET Core executable that handles all of the template synchronization and code generation (composition, generation + postaction execution). The CLI is the entry point for executing commands on Core Template Studio executable. CoreTS CLI is a self-contained .NET Core 3.1 application.
- **Template**: A template contains code with metadata. The metadata will contain the following template information: name, description, licensing, remarks, programming language, type, etc. The template definition is based on [dotnet Template Engine](https://github.com/dotnet/templating). [More details on templates](./contributing/templates.md)

Просмотреть файл

@ -26,7 +26,9 @@ It contains several commands that can be called from Visual Studio Code:
## Client
The wizard client is the visual component of the extension. It is a [React](https://reactjs.org/) app that is compiled into JavaScript that gets injected into html, which then gets served using [VSCode's Webview API](https://code.visualstudio.com/api/extension-guides/webview). It is shown in a Visual Studio Code tab when the user executes the `Web Template Studio: Create Web App` extension command.
The wizard client is the visual component of the extension. It is a [React](https://reactjs.org/) app that is compiled into JavaScript that gets injected into html, which then gets served using [VSCode's Webview API](https://code.visualstudio.com/api/extension-guides/webview). It is shown in a Visual Studio Code tab when the user executes the `Web Template Studio: [command name]` extension command.
You can check available commands [here](./contributing/application-architecture.md).
It is responsible for the interaction with the user and is responsible for collecting the name and route of the project, the selected frameworks, pages and services and sending them to the extension for processing with Core Template Studio.

Просмотреть файл

@ -104,9 +104,14 @@ Changes on Core Template Studio should be done on the Core Template Studio repos
2. Open the `src/extension` folder using `VSCode`.
3. Start the debugger by pressing `F5`. This should open the Extension Development Host in a new Visual Studio Code window.
4. In the Extension Development Host, press `Ctrl + Shift ⇧ + P` in Windows/Linux or `Command ⌘ + Shift ⇧ + P` in Mac to open the Command Palette.
5. In the Command Palette, type `Web Template Studio (local): Create Web App` and press `Enter` to launch the extension. We recently added concurrent installation support.
- `Web Template Studio: Create Web App`: this would launch the marketplace version.
- `Web Template Studio (nightly): Create Web App`: this would launch an installed instance of the extension.
5. In the Command Palette, type `Web Template Studio (local): [create command name]` and press `Enter` to launch the extension.
**Note:** There´s concurrent installation support, so you can run multiple versions of the extension on the same vscode instance.
- `Web Template Studio: [create command name]`: this would launch the marketplace version.
- `Web Template Studio (local): [create command name]`: this would launch the local version of the extension while developing.
- `Web Template Studio (nightly): [create command name]`: this would launch an installed instance of the extension.
Can check available commands [here](./contributing/application-architecture.md).
## How to develop the client
As the client is injected as a static web app in the webview of the extension, debugging inside the extension can be challenging. Running the client in a browser is useful for quickly testing HTML or CSS changes and for debugging since you can use **Chrome extensions** such as `React and Redux developer tools`.
@ -130,7 +135,7 @@ After starting the client using `yarn start` in VSCode Debug View (`Ctrl + Shift
- [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
- [Debugging in Visual Studio Code](https://code.visualstudio.com/docs/editor/debugging)
## How to built a local vsix
## How to build a local vsix
Run `./createLocalVsix.sh` from the `_build` folder.
The script will compile the client, CoreTS (in release mode) and the extension and package the extension into the root directory `/dist` folder. The vsix package can be distributed and installed by anyone who has VSCode using the command in the extension directory:
@ -143,7 +148,9 @@ code --install-extension [extensionName].vsix
Alternatively, the extension can be installed from the context menu of the extension section in Visual Studio code using the "**install from VSIX...**" command. The installed vsix package can be found in the extensions folder. For *Windows*, it is `%USERPROFILE%\.vscode\extensions`. For *Mac/Linux*, it is `~/.vscode/extensions` (By Default).
After installation, use `Ctrl + Shift ⇧ + P` (Windows/Linux) or `Command ⌘ + Shift ⇧ + P` (Mac) in Visual Studio Code to open the Extension Launcher and select `Web Template Studio: Create Web App` to run the extension.
After installation, use `Ctrl + Shift ⇧ + P` (Windows/Linux) or `Command ⌘ + Shift ⇧ + P` (Mac) in Visual Studio Code to open the Extension Launcher and select `Web Template Studio: [command name]` to run the extension.
You can check available commands [here](./contributing/application-architecture.md).
## Tests

Просмотреть файл

@ -1,3 +1,16 @@
The master-detail page has a master pane and a details pane for content. When an item in the master list is selected, the details pane is updated. This pattern is frequently used for email and address books.
Currently, we set max width of 700dpi to have the list and the detail side by side on the page. When the screen is bigger, no matter the type of device, if the auto-rotate is ON the list would appear first and it would navigate to the item on click.
## Windows App
<img alt="Master Detail Page in React Native app for Windows" src="../../../resources/rnw-windows-app-masterDetail.png" width="700" />
In smaller devices or if resized the application would look like this:
<img alt="Master Detail Page in React Native app for Windows" src="../../../resources/rnw-windows-app-masterDetail-small.png" width="700" />
## Android App
<img alt="Master Detail Page in React Native app for Android" src="../../../resources/rnw-android-app-masterDetail.png" width="500" />
## iOS App
TODO: Pending to add screenshot here.

Просмотреть файл

@ -1,3 +1,12 @@
The settings page is the page where we recommend putting the configuration settings for your application such as setting a dark / light theme. This could also include any licenses, version number, and your privacy terms and conditions.
Currently this page provides the [Theme support](../features/theme-selection.md)
## Windows App
<img alt="Basic React Native app for Windows" src="../../../resources/rnw-windows-app-settings.png" width="700" />
## Android App
<img alt="Basic React Native app for Android" src="../../../resources/rnw-android-app-settings.png" width="250" />
## iOS App
TODO: Pending to add screenshot here.

Просмотреть файл

@ -35,4 +35,6 @@ Head over to [Visual Studio Marketplaces Web Template Studio page](https://ma
- Open **VSCode**
- Press `Ctrl + Shift ⇧ + P` (Windows/Linux) or `Command ⌘ + Shift ⇧ + P` (Mac) to open VSCode's extension launcher
- Type/Select `Web Template Studio: Create Web App` and press `Enter` to launch the extension
- Type/Select `Web Template Studio: [command name]` and press `Enter` to launch the extension.
Can check available commands [here](./contributing/application-architecture.md).

Двоичный файл не отображается.

До

Ширина:  |  Высота:  |  Размер: 37 KiB

Двоичный файл не отображается.

До

Ширина:  |  Высота:  |  Размер: 94 KiB

Двоичные данные
docs/resources/rnw-android-app-masterDetail.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 189 KiB

Двоичные данные
docs/resources/rnw-android-app-settings.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 100 KiB

Двоичные данные
docs/resources/rnw-windows-app-masterDetail-small.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 54 KiB

Двоичные данные
docs/resources/rnw-windows-app-masterDetail.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 43 KiB

Двоичные данные
docs/resources/rnw-windows-app-settings.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 17 KiB

Просмотреть файл

@ -13,7 +13,9 @@ Docs to provide useful insights.
- Open **VSCode**
- Press `Ctrl + Shift ⇧ + P` in Windows/Linux or `Command ⌘ + Shift ⇧ + P` in Mac to open VSCode's extension launcher
- Type/Select `Web Template Studio: Create Web App` and press `Enter` to launch the extension
- Type/Select `Web Template Studio: [command name]` and press `Enter` to launch the extension
Can check available commands [here](./contributing/application-architecture.md)
### Deploy the generated project
@ -38,7 +40,7 @@ Please use [GitHub issues](https://github.com/Microsoft/WebTemplateStudio/issues
If you have specific feature requests or would like to vote on what others are recommending, please go to the [GitHub issues](https://github.com/Microsoft/WebTemplateStudio/issues) section as well. We would love to hear your thoughts.
We are still extremely early in development and are looking for feedback for roadmap. Currently we are in the process of stabilizing our React, Angular and Vue.js with Node and Flask.
We are still early in development and are looking for [feedback](https://github.com/Microsoft/WebTemplateStudio/issues) for the roadmap. We're still working on polishing our Web Templates and in our latest version we've also added an initial version of React Native templates.
## Contributing