Tutorial: Creating Your First Mobile App
This tutorial walks you through creating your first native mobile application with ACENji. You'll learn the fundamentals of mobile app development using the no-code platform.
What You'll Build
By the end of this tutorial, you'll have:
- A working mobile application
- Multiple screens with navigation
- Interactive elements (forms, buttons)
- A basic understanding of the mobile builder
Prerequisites
Before starting:
- You have an ACENji account
- You've downloaded the ACENji mobile preview app
- You're familiar with the Dashboard
Step 1: Create a New Mobile Project
1.1 Access the Dashboard
- Log in to your ACENji account
- Go to the Dashboard
- Click "+ New Project"
1.2 Select Mobile App
- Choose "Native Mobile App" as the project type
- Enter a project name (e.g., "My First App")
- Click Create
1.3 Open the Mobile Builder
- Click on your new project
- The Mobile Builder interface opens
- You'll see the canvas and tool panels
Step 2: Understand the Interface
2.1 Mobile Builder Layout
┌─────────────────────────────────────────────────────────────┐
│ MOBILE BUILDER │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌────────────────────┐ ┌──────────────────┐│
│ │ │ │ │ │ ││
│ │ Pages │ │ Mobile Canvas │ │ Properties ││
│ │ & Cards │ │ │ │ Panel ││
│ │ │ │ ┌──────────┐ │ │ ││
│ │ │ │ │ Phone │ │ │ ││
│ │ │ │ │ Preview │ │ │ ││
│ │ │ │ │ │ │ │ ││
│ │ │ │ └──────────┘ │ │ ││
│ │ │ │ │ │ ││
│ └──────────┘ └────────────────────┘ └──────────────────┘│
│ │
└─────────────────────────────────────────────────────────────┘2.2 Key Areas
| Area | Purpose |
|---|---|
| Left Panel | Pages and Cards navigation |
| Canvas | Visual design area with phone preview |
| Right Panel | Properties and settings |
| Toolbar | Save, preview, and publish options |
Step 3: Create Your First Page
3.1 Default Page
Your project starts with a default page. Let's customize it:
- Click on the page in the left panel
- Rename it to "Home"
3.2 Add a Welcome Card
- In the left panel, find the Cards section
- Click "+ Add Card"
- Choose a basic card template
- The card appears on your page
3.3 Customize the Card
- Click on the card to select it
- In the properties panel:
- Change the title to "Welcome!"
- Add a subtitle: "My First Mobile App"
Step 4: Add Elements
4.1 Add a Text Element
- With the card selected, find the Elements palette
- Drag an Info element onto the card
- Click to edit the text:
- "Welcome to my first mobile app built with ACENji!"
4.2 Add a Button
- Drag a Button element below the text
- Change the button label to "Get Started"
- We'll configure the action later
4.3 Add an Image
- Drag an Image element above the text
- Upload an image or use a placeholder
- Adjust the size as needed
Step 5: Create a Second Page
5.1 Add New Page
- In the Pages section, click "+ Add Page"
- Name it "About"
- Click Create
5.2 Add Content to About Page
- Select the About page
- Add a new card
- Add elements:
- Title: "About This App"
- Text with information about your app
- A button to go back
Step 6: Set Up Navigation
6.1 Configure Home → About Navigation
- Go back to the Home page
- Select the "Get Started" button
- Open the Events or Actions settings
- Configure:
- Event: On Tap/Click
- Action: Navigate to Page
- Target: About page
6.2 Configure About → Home Navigation
- On the About page, select the back button
- Configure:
- Event: On Tap/Click
- Action: Navigate to Page
- Target: Home page
Step 7: Add a Form
Let's add interactivity with a simple form.
7.1 Create a Contact Page
- Add a new page called "Contact"
- Add a form card
7.2 Add Form Elements
Add a Text Input for Name
- Label: "Your Name"
- Placeholder: "Enter your name"
Add a Text Input for Email
- Label: "Email Address"
- Placeholder: "Enter your email"
Add a Text Area for Message
- Label: "Message"
- Placeholder: "How can we help?"
Add a Button
- Label: "Send Message"
Step 8: Preview Your App
8.1 In-Browser Preview
- Click the Preview button in the toolbar
- Your app opens in a simulated phone view
- Test:
- Navigation between pages
- Form interactions
- Button taps
8.2 On-Device Preview
- Open the ACENji preview app on your phone
- Scan the QR code from the builder
- Your app loads on the actual device
- Test with real touch interactions
Step 9: Style Your App
9.1 Apply Colors
- Select elements
- Open the Color properties
- Set:
- Background colors
- Text colors
- Button colors
9.2 Adjust Typography
- Select text elements
- Open Text properties
- Configure:
- Font size
- Font weight
- Text alignment
9.3 Set Spacing
- Select elements
- Open Dimension properties
- Adjust:
- Padding
- Margins
- Element sizes
Step 10: Save Your Work
- Click Save in the toolbar
- Or use Ctrl/Cmd + S
- Your app is saved
What You've Learned
In this tutorial, you learned how to:
- Create a new mobile app project
- Navigate the Mobile Builder interface
- Create pages and add cards
- Add and configure elements
- Set up navigation between pages
- Create a simple form
- Preview your app on browser and device
- Apply basic styling
- Save your work
Next Steps
Continue learning with these tutorials:
- Pages and Navigation - Deep dive into page management
- Workflow and Variables - Add dynamic functionality
- Cards - Master card design
Troubleshooting
Preview Not Loading
- Verify you saved your changes
- Check your internet connection
- Try refreshing the builder
Elements Not Appearing
- Ensure elements are inside a card
- Check element visibility settings
- Verify the element isn't hidden by conditions
Navigation Not Working
- Confirm the action is configured correctly
- Check the target page exists
- Test in preview mode
Questions?
If you have any questions, please don't hesitate to contact us. Alternatively, you can submit an issue on this platform.
Useful Links:
Mobile Tutorials - https://help.acenji.com/#/./create-native-mobile-app/tutorials/index Cards - https://help.acenji.com/#/./create-native-mobile-app/tutorials/cards/index Forms - https://help.acenji.com/#/./create-native-mobile-app/tutorials/forms/index