保存、预览和构建

Sencha Architect 可通过 Architect 工具栏上的按钮轻松保存、预览、模拟和构建应用程序。

预览、模拟和构建

预览

预览在浏览器中显示项目。

模拟

模拟让你可以在本地开发环境中测试应用程序，而无需将应用程序部署到实际移动设备。有关已启用或已禁用的设备功能的列表，请参阅 iOS 或 Android 文档。

注意：模拟要求模拟器/仿真器正在运行，以便 Architec 显示项目。有关如何启动 Android SDK 模拟器或 iOS Xcode 模拟器的信息，请参阅 Android 或 iOS 文档。

构建

构建应用程序意味着将其打包以进行分发，以便其他人可以使用它。这对于在公司内部或通过互联网分发应用程序是必需的。对于某些应用程序，通常需要将其发布到 Google Play 或 Apple Store。

注意：在预览、构建或模拟项目之前保存项目。在保存项目之前，预览和构建按钮将显示为灰色。

重要事项

Architect 构建和模拟目标功能会覆盖 packager.json 文件。使用 Architect 时不要更改此文件。如果您要从使用该文件作为构建参数的 Architect 较早版本升级，请备份该文件。如果先前项目的 packager.json 文件被覆盖，您可以从首次将 Architect 升级到新版本时创建的 .xda 文件中恢复该文件。.xda 文件是一个压缩文件，您可以解压缩该文件并找到文件。

简介

Sencha Architect 工具栏提供可用于保存、预览、构建、发布和模拟应用程序的按钮

项目

• 保存项目
• 预览项目
• 构建 Web 应用程序
• 应用程序刷新
• 发布项目

保存项目

工具栏中的“保存”下拉菜单提供了有关如何保存和授权项目的不同选项。

您还可以使用 Mac 中的 Cmd+S 快捷键或 Windows 和 Linux 中的 CTRL+S 快捷键保存项目。

• 保存 - 保存项目。指定保存路径、应用程序名称和项目名称。

• 将项目另存为 - 保存前重命名项目。

• 保存整个项目 - （首次保存后变为灰色）强制重新保存和覆盖项目中的所有文件，无论是否已打开。

注意：保存项目时假定您正在创建商业应用程序，该应用程序可以免费或出售。要更改 GPL（开源）许可证或购买 Sencha Complete，请参阅安装和设置指南中的“应用程序许可证”部分。首次保存项目时，Architect 会显示保存项目菜单。

保存项目

1. 保存路径 - 单击浏览按钮以选择要保存项目文件到的路径。

2. 应用程序名称 - 指定应用程序的名称。此名称会显示在应用程序的代码中，位于定义初始视图的第一条语句中。

3. 项目名称 - 指定项目的文件夹名称和文件名。

软件要求

您需要以下软件来预览和构建项目

• Ruby - Sencha Cmd 使用 Ruby 进行 CSS/SCSS 编译（已弃用）。

• Java - Sencha Cmd 使用 Java。

• Apache Ant - Android 项目使用 Ant 创建 Android 包文件 .apk，该文件用于分发应用程序。

安装此软件：

Windows 和 Linux

Edit > Architect Settings > Dependencies

Mac

Sencha Architect > Preferences > Dependencies

窗口显示为

单击链接以安装和验证每个软件包。完成后，窗口显示为

单击保存。

更新其他 JavaScript 文件的路径

如果您有其他 JavaScript 文件随附项目，请更新 Architect app.classpath 变量以指定代码目录的相对路径。

更新 app.classpath

1. 导航到 Architect 项目所在的目录。如果您不确定这是哪里，请单击“保存 > 将项目另存为”以获取保存路径。

2. 将目录更改为“{SavePathDir}/.sencha/app”

3. 为您的代码创建一个新目录，例如 app/thirdparty 目录。将 JavaScript 文件复制到新目录。

4. 编辑 sencha.cfg 文件，并向 app.classpath 变量添加一个相对路径到您的新目录名称，例如

   app.classpath=${app.dir}/app,${app.dir}/app.js,${app.dir}/thirdparty
   

获取 Web 服务器

使用 Sencha Architect 无需本地 Web 服务器，但如果您想在本地计算机上预览项目，则需要。如果您还没有本地 Web 服务器，可以使用诸如XAMPP之类的服务器，或 Sencha Cmd Web 服务器，该服务器包含在Sencha Cmd 3.1.1 及更高版本中。

注释:

1. PHP 不适用于 Sencha Cmd Web 服务器。由于 Architect 在某些示例中使用 PHP，并且由于 Sencha Cmd Web 服务器无法在计算机外部提供服务，我们建议您使用诸如XAMPP或Apache Web 服务器之类的 Web 服务器。

2. 如果您安装 Sencha Cmd 以获取其 Web 服务器，请将目录更改为要为应用程序提供服务的目录，并使用 sencha web start 命令从命令行启动 Sencha Cmd Web 服务器。Sencha Cmd Web 服务器从 http://localhost:1841/ URL 提供服务。您还可以使用 -p _portnumber 选项指定备用端口。Web 服务器仅在命令行窗口中独占运行，并持续运行，直到您按“CTRL+C”。您还可以打开一个新的命令窗口并键入 sencha web stop 命令。

创建证书

使用 iOS 或 Android 的项目需要证书

iOS

登录 Apple 的 iOS 配置门户，获取开发和分发证书，注册您的应用程序并获取应用程序 ID，以及创建配置描述文件。访问需要购买开发者许可证。您还可以下载开发者工具和 Xcode 仿真器。

在配置门户请求证书之前，使用 Mac OS X 中提供的 openssl 工具生成证书签名请求 (CSR)，例如

    > openssl req -new -key myprivatekey.key -out mycert.csr 
    Loading 'screen' into random state - done
    You are about to be asked to enter information that will be incorporated into your certificate request.
    What you are about to enter is called a Distinguished Name or a DN.
    There are quite a few fields, but you can leave some blank.
    For some fields there will be a default value,
    If you enter '.', the field will be left blank.<br>-----
    Country Name &lt;2 letter code&gt; [AU]: US
    State or Province Name &lt;full name&gt; [Some-State]: My State
    Locality Name &lt;eg, city&gt; []: My City
    Organizational Name &lt;eg, company [Internet Widgits Pty Ltd]: MyCompany, Inc
    Organizational Unit Name &lt;eg, section&gt; []:
    Common Name &lt;eg server FQDN or Your name&gt; []: com.mydomain
    Email Address [] [email protected]<br>
    Please enter the following 'extra' attributes
    to be sent with your certificate request
    A challenge password []:
    An optional company name []:

创建 CSR 文件后，导航至 Apple 开发门户的证书部分。要创建证书，请单击添加按钮并选择 iOS 应用程序开发的证书类型。系统会要求您上传 CSR 文件。上传完成后，您可以生成并下载 iOS 证书。

openssl 工具也可用于 Windows。

Android

使用 Android SDK 中的 keytool 命令为您的应用程序创建证书

$ keytool -genkey -v -keystore C:\keys\mykeystore -alias myappkey -keyalg RSA -keysize 2048 -validity 10000
Enter keystore password: <password>
What is your first and last name?
  [Unknown]:  Polly Hedra
What is the name of your organizational unit?
  [Unknown]:  App Development
What is the name of your organization?
  [Unknown]:  MyCompany
What is the name of your City or Locality?
  [Unknown]:  Silicon City
What is the name of your State or Province?
  [Unknown]:  California
What is the two-letter country code for this unit?
  [Unknown]:  US
Is CN=MyPassword, OU=App Development, O=MyCompany, L=Silicon City, ST=California, C=US correct?
  [no]:  yes<br><br>
Generating 2,048 bit RSA key pair and self-signed certificate (SHA1withRSA) with a validity of 10,000 days
    for: CN=MyPassword, OU=App Development, O=MyCompany, L=Silicon City, ST=California, C=US
Enter key password for &lt;myappkey&gt;
    (RETURN if same as keystore password):  
[Storing C:\keys\mykeystore]
$

创建配置描述文件（仅限 iOS 项目）

将应用程序 ID 与授权运行应用程序的 iOS 证书和设备关联起来。

预览您的项目

预览意味着在 Web 浏览器中查看您的项目，例如 Chrome 或 Safari。预览要求您在单击预览按钮时运行 Web 服务器。要预览

1. 创建一个项目目录，您的 Web 服务器可以在其中访问您的项目。如果您使用 Sencha Cmd Web 服务器，该目录可以位于您计算机上的任何位置。如果您使用其他 Web 服务器，请找到您的 Web 服务器可以访问的项目目录。

2. 保存您的项目。

3. 启动您的 Web 服务器。

4. 单击 Architect 工具栏中的预览按钮

   

   当您单击应用程序的预览按钮时，将出现以下窗口 - 在您单击 预览 后，浏览器窗口将打开并显示您的应用程序。如果您已打开浏览器，预览将向浏览器添加一个选项卡。

   

5. URL 前缀 - 键入 Web 服务器在您的计算机上提供文件的 URL。如果您使用 Sencha Cmd Web 服务器，并使用默认端口在您提供文件的目录中启动 Web 服务器，请将 URL 指定为

    http://localhost:1841/<ArchitectProjectName>
   

   如果您使用其他 Web 服务器，请参阅其文档以了解要提供的 URL - 在大多数情况下，它是 http://localhost/ 和您提供 Web 应用程序的目录。

6. 预览时清除缓存 - 指示是否使用来自 Web 服务器的缓存信息。默认情况下，当选中此选项时，不会缓存信息，并且每次页面请求时都会发送新信息。

显示使用 Sencha Cmd Web 服务器提供 Web 内容的默认端口号 1841 的 Ext JS 输出示例

构建 Web 应用程序

构建 Web 应用程序可让您创建文件，以便在浏览器上测试或分发您的项目以进行显示。您可以在从“构建 Web 应用程序 > 构建设置”菜单构建后更改选项。

构建 Web 应用程序

• 优化您的代码，以消除您的应用程序不使用的 Sencha 类库部分。

• 使用 Compass 和 Sass 将您的 CSS 和主题样式编译到 .scss 文件中。文件名使用您在保存项目时指定的应用程序名称。

构建 Web 应用程序选项

• 环境 - 选择 测试 以使您的构建文件可读，这有助于您调试您的项目，或选择 生产，这将优化和压缩您的构建项目以删除您的应用程序不使用的 JavaScript 类。（这两个选项都不会影响您项目的源代码。）

• 清理 - 生成一个优化的构建，其中会删除中间文件和输出文件。

• 发布路径 - 指定您希望您的已发布项目驻留的路径。单击 浏览 以选择路径。

• 操作菜单

  • 启用调试 - 生成一个调试构建，并在 Architect 输出日志中插入 [DBG] 语句，其中列出了有关每个构建步骤的其他信息。

构建 Web 应用程序会生成这些文件

• app.json
• bootstrap.css
• bootstrap.js
• bootstrap.json
• build.settings
• sass/example/
• sass/example/bootstrap.js
• sass/example/example.css
• theme/ext-theme-classic-<IDvalue>.css

输出和日志窗口提供有关构建的信息。

什么是隧道？

隧道选项允许您针对内部服务（例如数据服务器）测试您的应用程序。位于公司防火墙内的服务可能无法访问 Appurify 测试站点。当您选择隧道选项时，Appurify 会在您的本地计算机上安装一个脚本，该脚本将打开一个 SSL 隧道，允许 Appurify 设备访问您的内部服务。此隧道经过严格加密，非常安全。

当您首次选择隧道选项时，您会看到一个屏幕，用于安装此脚本以及在您的操作系统上运行该脚本所需的任何软件。安装完所有软件后，是和否按钮将启用。

单击“是”，隧道脚本将在后台启动。

注意：每当隧道脚本正在运行时，您都会看到一个按钮来停止它。在完成测试后，您应始终关闭此脚本，以避免可能的安全漏洞。