Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Forge app development. Part 1. App creation

So, some time ago Atlassian presented new developer platform for their cloud solutions. Meet Forge. The main idea behind this platform is that developer can concentrate on app logic instead of tinkering with infrastructure. In this tutorial we will create simple issue notes app for Jira. Prepare a cup of coffee and...let's go!

First of all, visit this page and follow all instructions. As a result you'll obtain Forge installation, developer site and successful login in Forge.

Navigate to the directory where you want to create the app and run: forge create

Enter a name for your app. Let it be notes. Select jira-issue-activity template. Ok, you've got new directory called notes. Switch to this directory and run: forge deploy

This will deploy your app on your development environment (read more here). Next run: forge install

Select Jira as a product and provide URL to your development environment which you've already created. You'll be prompted to follow URL which lead to consent screen. Choose your developement environment and approve!

Next, go to your Jira development environment, open any issue...and gotcha:

1.png

Click this tab and world will say you "hello":

2.pngv

Planning and implementing our app

Now we've prepared everything for development,  let's think about components our app will consist off. Forge looks similar to React, so we will split app into components too:

  • Note - a single element for NotesList
  • NotesList - container for our notes
  • NewNoteForm - a form for creating new note
  • DeleteNoteForm - a form for deleting note

Go to src directory in your app folder and create new directory called components, switch to it.

Note

Create new file called Note.js and place this code in it:

import ForgeUI, {Fragment, Text, Avatar} from '@forge/ui'

const Note = ({text, accountId}) => (
<Fragment>
<Avatar accountId={accountId}/>
<Text>{text}</Text>
</Fragment>
)

export default Note

 What's going on here? We use Forge UI components to build our Note. We must use Fragment in order to display two adjacent components (it is totally like React fragment).

NotesList

Create new file called NotesList.js and place this code in it:

import ForgeUI, { Fragment } from '@forge/ui'
import Note from './Note'

const NotesList = ({notes}) => (
<Fragment> {notes.map(note => <Note text={note.text} accountId= {note.accountId}/>)}
</Fragment>
)

export default NotesList

 

It is rather simple. We just iterating through notes array.

Let's see what we did in action, and for this we will prepare test data.

Go to src folder of your app and create file data.js. and place this code:

export const data = [
{accountId: '557058:a26fbc8e-dafe-4afa-a406-2876f8569f92', text: 'First note!'},
{accountId: '557058:a26fbc8e-dafe-4afa-a406-2876f8569f92', text: 'Second note!'},
{accountId: '557058:a26fbc8e-dafe-4afa-a406-2876f8569f92', text: 'Third note!'},
{accountId: '557058:a26fbc8e-dafe-4afa-a406-2876f8569f92', text: 'Fourth note!'},
{accountId: '557058:a26fbc8e-dafe-4afa-a406-2876f8569f92', text: 'Fifth note!'},
]

 What you see in accountId is my own accountId value. Later we will get it in our app automatically, but now you can read how to obtain it here.

index.jsx 

It's time to get everything together. Place this code in your index.jsx file:

import ForgeUI, {render, IssueActivity } from '@forge/ui' 
import NotesList from './components/NotesList'
import {data} from './data'

export const run = render(
<IssueActivity>
<NotesList notes={data}/>
</IssueActivity>
);

run function is the main function of our app, it is mentioned in manifest.yml file.

Running our app

Run: forge deploy

Or instead (if you are on development environment) run: forge tunnel.

Read more about tunneling here.

Next, go to your development instance, choose issue and...

3.png

We can see our notes!

Next

In next part of this tutorial we will learn how to store data against issue, i.e. how to add and delete notes. Let's be kinda immutable without editing them (smile)

 

Do you develop any app for Forge?

2 comments

Nice! Great Job! 👍 

Comment

Log in or Sign up to comment
TAGS

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you