Navigate to this URL "[bubble.io/template](http://bubble.io/template) [[enter]] and select "Templates | Bubble"\
في محرك البحث قم بالوصول للموقع التالي

Click the "Search" field. Type "intro to api [[enter]]"\
في حقل البحث اطبع العبارة التالية\
intro to api

Give a name to your App and Click "Get started".\
اختر اسماً لتطبيقك واضغط الزر للبدء

Select the top container &gt; Right-Click &gt; Click "Delete"\
اختر الجزء العلوي &gt; يمين الماوس &gt; مسح

Click the "Plugins" icon.\
اضغط على زر البلج انس

Click "Add plugins"\
لإضافة بلج إن اضغط إضافة

Search for "API Connector" then Click on "Install"\
قم بالبحث عن بلج ان ال API Connector \
ثم اضغط زر التثبيت

Next to the Get field, copy and paste the following: <https://academy-demo-api.bubbleapps.io/api/1.1/obj/movie/>

collapse
Name
Use as
Data
Data type
JSON
GET
(use [] for params)
Attempt to make the call from the browser
Headers
Add header
Parameters
Add parameter
Include errors in response and allow workflow actions to continue
Capture response headers
 You need to initialize this call before it will work.
Initialize call
Manually enter API response

Change the types of "Created Date" and "Modified Date" to Date &gt; Save\
قم بتحويل نوع حقلي تاريخ التوليد وتاريخ التحديث إلى نوع "تاريخ" ثم اضغط حفظ

Click on Design to go back to the Designer.\
اضغط على زر الديزاين للعودة إلى واجهة التصميم.

In the Elements Tree, navigate the elements till you reach "RG ListOfMovies". Make sure the "Only show hideable" is not checked.\
RG is for Repeating Group, and it represents the listing that reads dynamic data.\
من خلال شجرة العناصر جرب الوصول للعنصر التالي وهو يمثل القائمة التي تقرأ مجموعة بيانات (داتا) متغيرة 

In the element's properties, we need to change the type of content to "Get All Movies response..". Note that it can recognize the data coming through the API.\
في نافذة خصائص العنصر نحتاج لتغيير نوع المحتوى كالتالي. لاحظ أنه استطاع أن يميز محتوى الداتا القادم من خلال واجهة التطبيق الذي قمنا بالتشبيك به.

In the Data Source, delete the current source.\
في الحقل الثاني (مصدر البيانات) قم بمسح الإعداد الموجود مسبقاً

Select "Get data from an external API" as the new Data Source\
اختر مصدر البيانات التالي لتفعيل قراءة البيانات الواردة من واجهة تطبيق الأفلام

In the Data source field after "Get All Movies", click "More..." to specify what exactly to read as a data source.

Back to the Elements Tree, do the following two steps for both sub-groups: "Movie Card" and "GroupCoreContent"\
بالعودة إلى شجرة العناصر قم بتطبيق الخطوتين التاليتين على كل من المجموعتين الجزئيتين 

Type of content: Get All Movies responses

Data source: Parent group's Get All Movies responses

Parent group's Get All Movies response result

It should look like this. Repeat the same 2 steps for the other sub group (GroupCoreContent). This allows each of these group to refer to the same data source and content.\
يجب أن تكون الإعدادات بالشكل التالي\
طبق نفس الخطوتين السابقتين على المجموعة الجزئية الثانية\
هذا يتيح لكلا المجموعتين أن تقرآ نفس مصدر ومحتوى البيانات.

Data source
Parent group's Get All Movies response result
(Clear selection)
DATA FIELDS
's title
's Created By
's Created Date
's Modified Date
's running time
's streaming
's tagline
's Default?
's _id
's raw body text
Change the parent's thing type...

Click "Group Title/Tag"\
اختر عنصر مجموعة العنوان

Configure its Type of content and Data source as follows.\
قم بضبط مصدر ومحتوى البيانات كما بالشكل

Data source
Parent group's Get All Movies response result

Select the Title element and click on where it says "Click"\
اختر عنصر العنوان ثم اضغط على المكان المكتوب به "انقر"

Click Parent group's Get All Movies response...\
اختر الخيار الأول

Choose "'s title" from the drop-down that will automatically appear to you.\
اختر حقل "العنوان" من القائمة المنسدلة التي ستظهر لك.

Click "Tagline Here". Let's apply the same thing to the Tagline element.\
اختر عنصر التاغ لاين ولنطبق نفس الخطوات عليه

Choose Parent group's Get All Movies response ..

By now your Movie Card group should be able to display the movie's title and tagline as follows.

At this point try to Preview your app by clicking on the Preview button in the top right corner.\
You will be able to see a list of movies, their titles, and taglines displayed in a Card format.\
You can notice that nothing happens when you click on any movie card!\
So what we will do next is to add a workflow action to allow us to to go to another page (the "movie" page which comes ready for you as part of this template), and we should be able to display the information on a particular movie.\
\
في هذه النقطة قد أتممت مرحلة استرجاع البيانات من خلال واجهة التطبيق وقمت بضبط إعدادات بطاقات الأفلام بحيث تظهر كل منها عنوان وتاغ الفيلم.\
تستطيع الآن الضغط على زر العرض Preview \
لاحظ أنك ستسطيع مشاهدة بيانات مجموعة من الأفلام إنما لن يحدث شيء إذا جربت أن تضغط على أي من البطاقات.\
وهذا ما سنقوم بتطبيقه في باقي الخطوات.\
أولاً سنقوم بإضافة إجراء عمل بحيث يوجه الزائر إلى صفحة أخرى خاصة بتفاصيل الفيلم عند الضغط على بطاقة الفيلم (هذه الصفحة موجودة ومجهزة من ضمن نفس التمبليت الذي تقوم بالعمل عليه)، ثم سنقوم بإضافة خطوات أخرى لتمكننا من استرجاع وعرض بيانات فيلم محدد بذاته (الفيلم الذي قمنا بالضغط عليه).

Go back to Plugins and Click "Add another call"

In the Get field copy and paste this link (same as in the previous API call)<https://academy-demo-api.bubbleapps.io/api/1.1/obj/movie/id>

Add to it this parameter after the last /: \[id\]

collapse
move up
Name
Use as
Data
Data type
JSON
GET
(use [] for params)
Attempt to make the call from the browser
Headers
Add header
Parameters
Add parameter
Include errors in response and allow workflow actions to continue
Capture response headers
 You need to initialize this call before it will work.
Initialize call
Manually enter API response

When you click Enter, it will add a parameter with a Key and Value for you. 

Uncheck "Private". In the value field you can just provide any sample id value (if you click on the file itself you can see the data of a list of movies). We just copied and pasted one such value. You can copy and paste this: "1631298206869x170479266931107260"

Click "Manually enter API response" and enter the same parameter "1631298206869x170479266931107260"

Click "SAVE" and initialize the call. You can change the Created Date and Modified Date to type "Date" as in the previous call.

Click "Movie Card" element from the Elements Tree.

Click "Send more parameters to the page".

In the Key type a parameter name: "movie_id"

And in the value field choose Current cell's Get All Movies response result

Current cell's Get All Movies response result

Click on the Page drop-down in the top and select "movie" page.

Select the element "MovieBanner" from the element itself or from the Elements Tree.

Select the API call we just created "Get Movie by ID"

For the Data source choose "Get data from an external API"

For the API provider select "Demo Movie API - Get Movie by ID"

For the id select "Insert dynamic data" (note: if you don't see the "path" field, make sure that the "Private" checkbox in your plugin setting is unchecked).

Set the parameter name and type as follows. Make sure you use the same parameter name you created before in the Go to Page action ("movie_id").

We need to repeat the previous 2 steps for all the sub-groups inside MovieBanner. Do the same for "BannerTextGroup": \
Type of Content: Get Movie by ID, Data Source: Parent group's Get Movie by ID

Do the same for "UpperHalfText": \
Type of Content: Get Movie by ID, Data Source: Parent group's Get Movie by ID

You can follow the same logic for the "LowerHalfText" group. Set the Type of content to get from API and the Data Source to read from the parent group.

Now you are ready to preview your work.\
Note that other advanced steps (not included in this tutorial) may include adding more API calls to allow you to add (post) a movie, edit a movie, or delete a movie.\
أصبحت الآن جاهزاً لمعاينة عملك.\
لاحظ أن بعض الخطوات المتقدمة تشمل إضافة استدعاء نداءات جديدة لواجهة التطبيق بحيث تتيح لك إمكانية إضافة فيلم (داتا) أو تعديل أو مسح فيلم. \
اكتفينا بهذا القدر في هذا الملف التعليمي لإبقاء التمرين في إطار المستوى المتوسط.

How to connect external data to bubble.io using the API connector