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
Top comments (1)
keep it up, man!