Mobile app development with LiveView Native and Elixir. Part - 3

#liveviewnative #elixir #mobile #phoenix

Hey there,

Let's explore advanced concepts in LiveView Native.

Check out my previous blogs here:

Mastering Phoenix Framework - Introduction

Mastering Phoenix Framework - Part 1

Mobile app development with LiveView Native and Elixir

Mobile app development with LiveView Native and Elixir. Part - 2

So with this, Let's start with our today's topic.

Forms in LiveView Native

Assuming Elixir and Phoenix framework are installed, and the LiveView Native application is up and running on your system. If not, please follow the provided links.

Remember in Mobile app development with LiveView Native and Elixir blog, we have added the following as a dependency?

{:live_view_native_live_form, github: "liveview-native/liveview-native-live-form"}

Also, do you remember, in Mastering Phoenix Framework - Part 1 blog, we have seen the multiple mix tasks and their usage?

It's time to apply that knowledge and create a powerful form that we can use in our SwiftUI application.

1st Step

We'll use the Mix task phx.gen.auth. To run it, open the terminal, navigate to the project's root directory, and execute the command.

$ mix phx.gen.auth Accounts User users

Let's see what this means.

mix phx.gen.auth : mix task
Accounts : Module name of the context
User : Module name of the schema
users : The plural version of the schema name used for database tables and route paths

Once you enter this command in the terminal, the terminal prompt will be displayed as shown below.

An authentication system can be created in two different ways:
- Using Phoenix.LiveView (default)
- Using Phoenix.Controller only
Do you want to create a LiveView-based authentication system? [Yn] Y

When using LiveView, select the default option by entering Y in the terminal. This will add the necessary authentication code to our project and generate multiple files. After completion, you'll see another prompt in the terminal window.

Please re-fetch your dependencies with the following command:

    $ mix deps.get

Remember to update your repository by running migrations:

    $ mix ecto.migrate

Once you are ready, visit "/users/register"
to create your account and then access "/dev/mailbox" to
see the account confirmation email.

Make sure to run mix deps.get, mix ecto.migrate, and then start the application with mix phx.server or iex -S mix phx.server. Once the server is running, visit localhost to register a user. After registering, go to mailbox to activate the user.

Now, we'll focus on the SwiftUI part, specifically the registration page. Go to the lib/{PROJECT_NAME}_web/live folder and create a new file named user_registration_live.swiftui.ex. Paste the following content into it.

defmodule NativeDemoWeb.UserRegistrationLive.SwiftUI do
  use NativeDemoNative, [:render_component, format: :swiftui]

  def render(assigns, _) do
    ~LVN"""
    <.header>
      Register
      <:actions>
        <.link navigate={~p"/users/log_in"} class="fontWeight(.semibold) fg-tint">
          Sign in
        </.link>
      </:actions>
    </.header>

    <.simple_form
      for={@form}
      id="registration_form"
      phx-submit="save"
      phx-change="validate"
      phx-trigger-action={@trigger_submit}
      action={~p"/users/log_in?_action=registered"}
      method="post"
    >
      <.error :if={@check_errors}>
        Oops, something went wrong! Please check the errors below.
      </.error>

      <.input field={@form[:email]} type="TextField" label="Email" class="keyboardType(.emailAddress)" autocomplete="off" />
      <.input field={@form[:password]} type="SecureField" label="Password" />

      <:actions>
        <.button type="submit">
          <Label>
            <Text template="title">Create an account</Text>
            <.image url={~p"/images/logo.png"}>
              <:empty></:empty>
              <:success class="rendering-mode-template resizable scaledToFit fg-white" />
              <:failure></:failure>
            </.image>
          </Label>
        </.button>
      </:actions>
    </.simple_form>
    """
  end
end

In the code snippet provided, we are utilizing the header component to display the title "Register" and a "Sign in" button, which is a link that will direct the user to the /users/log_in path.

Following that, we are implementing the simple_form, which includes the error, input, and button components. These components are used for displaying errors, entering credentials, and submitting the form, respectively.

Run the application using iex -S mix phx.server and open native/swiftui/NativeDemo.xcodeproj in Xcode. Make sure that native/swiftui/{PROJECT_NAME}/ContentView.swift contains the specified content, especially on line 14.

If everything is configured correctly, you should be able to see the following output.

Heartiest congratulations!!!

You've successfully built the form in SwiftUI using LiveView Native. As a challenge, try creating login, reset_password, and forgot_password pages using this concept.

For your reference, I have put the example in my GitHub repo.

If you encounter any issues, delete the _build directory and compile the code again using mix compile. Feel free to reach out if you need help.

LinkedIn: https://www.linkedin.com/in/rushikesh-pandit-646834100/
GitHub: https://github.com/rushikeshpandit
Portfolio: https://www.rushikeshpandit.in

In my next blog, I will try to explore more concepts from LiveView Native.

Stay tuned!!!

#myelixirstatus , #liveviewnative , #dockyard , #elixir , #phoenixframework