Tyler Lastovich在Unsplash上

photo

Turbo Android-第1部分获得设置

在以前的博客文章中，我介绍了使用Turbo iOS并实施本地功能的设置。

但是，Android是移动市场的巨大组成部分，与Turbo Android一起启动和运行的资源太少。

这篇文章旨在纠正。

您需要本教程的Android Studio。

基础

首先，我们将假定您有一个启用涡轮增压的应用程序。我将使用this app进行talk我给予。

该应用称为CRM ME。这是一个简单的CRM应用程序。您可以添加，删除和更新联系人的所有基本功能。

您可以使用以下Rails命令来创建自己的自己。

rails new crm_me -j esbuild

请注意，我们使用Esbuild。这是因为在Android浏览器上不支持导入地图。

安装了Rails应用程序，您可以运行rails g scaffold Contacts name:string，然后运行rails db:migrate，您可以使用。

让您在以下端口上运行您的应用程序。

bin/dev -p 3000

设置Turbo Android并安装库

打开Android Studio，单击新项目，然后单击“无活动”。

在下一个屏幕上，您可以将应用程序命名，然后单击完成。

要启动涡轮增压器，我们首先需要Hotwire库。

打开build.gradle(Module:app)

在此文件的底部，您会看到以下内容：

dependencies {

    implementation 'androidx.core:core-ktx:1.8.0'
    implementation 'androidx.appcompat:appcompat:1.6.1'
    implementation 'com.google.android.material:material:1.8.0'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
}

添加涡轮Android库。

dependencies {

    implementation 'androidx.core:core-ktx:1.8.0'
    implementation 'androidx.appcompat:appcompat:1.6.1'
    implementation 'com.google.android.material:material:1.8.0'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'

    implementation "dev.hotwire:turbo:7.0.0-rc18" 
}

您将被要求同步您的gradle文件。确保您这样做是为了安装所有依赖项。

现在，我们需要启动并运行我们的样板。

创造主动脉和mainsessionnavhost

Android由活动组成。活动是具有用户界面的单个屏幕。然后，我们将将此活动添加到Android清单文件中。

让我们深入了解：

首先，在java/com.example.yourappname

下创建一个名为MainActivity的kotlin文件

输入以下代码：

package com.example.yourappname
 
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import dev.hotwire.turbo.activities.TurboActivity
import dev.hotwire.turbo.delegates.TurboActivityDelegate

class MainActivity : AppCompatActivity(), TurboActivity {
    override lateinit var delegate: TurboActivityDelegate

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        delegate = TurboActivityDelegate(this, R.id.main_nav_host)
    }
}

您会注意到activity_main和main_nav_host当前是红色的。我们很快就会纠正。

我们必须首先创建我们的MainSessionNavHost，这是处理应用程序流程的主要类。

在java/com.example.yourappname

下创建一个名为MainSessionNavHost的kotlin文件

输入以下内容：

import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import dev.hotwire.turbo.config.TurboPathConfiguration
import dev.hotwire.turbo.session.TurboSessionNavHostFragment
import kotlin.reflect.KClass

class MainSessionNavHost : TurboSessionNavHostFragment() {
    override var sessionName = "main"
    override var startLocation = "http://10.0.2.2:3000"

    override val registeredFragments: List<KClass<out Fragment>>
    get() = listOf()

    override val registeredActivities: List<KClass<out AppCompatActivity>>
    get() = listOf()

    override val pathConfigurationLocation: TurboPathConfiguration.Location
    get() = TurboPathConfiguration.Location( assetFilePath = "json/configuration.json")

}

现在我们还有三个文件要创建；对我们的Android清单文件的一个很小的更改，我们应该启动并运行。我们需要制作三个资源文件，一个json/configuration.json Asset文件，一个main_activity布局和一个WebFragment。

让我们从我们的JSON文件开始。

右键单击应用程序，然后转到新>文件夹>资产文件夹。

接下来，右键单击资产目录，新>目录并创建JSON Directory。

最后，在JSON目录上右键单击并添加一个名为configuration.json的文件。

将以下内容添加到文件中。

{
  "settings": {
    "screenshots_enabled": true
  },
  "rules": [
    {
      "patterns": [
        ".*"
      ],
      "properties": {
        "context": "default",
        "uri": "turbo://fragment/web",
        "pull_to_refresh_enabled": true
      }
    }
  ]
}

这是最重要的文件，因为它确定了启用涡轮增压应用程序的导航。我们将在以后的文章中介绍路径配置，但我强烈建议您阅读this documentation。

接下来，我们将创建一个WebFragment文件。

将其与您的MainActivity

放在同一目录中

它将具有以下内容：

import dev.hotwire.turbo.fragments.TurboWebFragment
import dev.hotwire.turbo.nav.TurboNavDestination
import dev.hotwire.turbo.nav.TurboNavGraphDestination

@TurboNavGraphDestination(uri = "turbo://fragment/web")
open class WebFragment : TurboWebFragment(), TurboNavDestination {}

我们将其添加到MainSessionNavHost中的注册片段列表

override val registeredFragments: List<KClass<out Fragment>>
    get() = listOf(
        WebFragment::class
    )

我们非常接近启动和运行。只有三件事要做。

首先，我们创建我们的layout_main文件。

单击资源管理器>布局> +图标>布局资源文件

我的看起来像这样：

 <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/main_nav_host"
        android:name="com.example.thirdturbo.MainSessionNavHost"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="false" />

</androidx.constraintlayout.widget.ConstraintLayout>

最后，我们必须编辑我们的Android清单（在顶级目录中找到）文件，以确保我们可以访问Internet和Localhost。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:usesCleartextTraffic="true"
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.ThirdTurbo"
        tools:targetApi="31">
    <activity
        android:name=".MainActivity"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

</manifest>

现在您应该可以单击“运行”按钮并观看构建您的应用程序。

恭喜，您现在拥有一个启用涡轮增压的Android应用。

在下一部分中，我们将通过添加更多启用涡轮的片段（例如模态和本机屏幕）来进一步采用该应用程序。