جلسه سی و یکم آموزش iOS : چند زبانه کردن اپلیکیشن با مثال

در این جلسه اجازه دهید در مورد محلی سازی (localization) صبحت کنیم. به طور خلاصه ، محلی سازی ، فرآیندی است که یک محصول را با زبان خاصی تطبیق می دهد. همه کاربران iPhone ، قادر به خواندن و نوشتن زبان انگلیسی نیستند. اگر شما اپ خود را فقط به زبان انگلیسی انتشار دهید ،  ممکن است اپ شما ، توسط سایر کاربران از قسمت های مختلف دنیا ، نادیده گرفته شود. در این آموزش ، ما به سراغ فرآیند محلی سازی می رویم و به شما نشان خواهیم داد که چگونه به راحتی می توانید یک اپ را با استفاده از توابع داخلی Xcode و iOS API محلی سازی نموده و آن را به چندین زبان در اختیار عموم قرار دهید.

وارد آموزش محلی سازی اپ iOS می شویم.

دستگاه های iOS از جمله iPhone و iPad به صورت جهانی در اختیار عموم قرار دارند. بدیهی است که کاربران iOS از کشورهای مختلفی هستند و به زبان های متفاوتی صحبت می کنند. برای ایجاد یک تجربه کاربری موفق ، شما باید بتوانید اپ خود را در چندین زبان در اختیار کاربران خود قرار دهید. فرآیند تطبیق یک اپ جهت پشتیبانی از یک زبان خاص ، معمولاً تحت عنوان محلی سازی (localization) شناخته می شود.

Xcode پشتیبانی داخلی از فرآیند محلی سازی را دارا می باشد. بنابراین ، توسعه دهندگان می توانند برای بین المللی کردن یک اپ ، از طریق قابلیت localization و فراخوانی برخی از API ها اقدام نمایند.

برخی از افراد فکر می کنند که محلی سازی شبیه به فرآیند ترجمه می باشد. این فکر ، تا حدودی درست است. ترجمه متن استاتیک و قابل مشاهده ، بخشی از فرآیند محلی سازی می باشد. محلی سازی شامل عناصر دیگری همانند تصاویر ، گرافیک ها و صداها نیز می باشد. علاوه بر این ، شما نیاز دارید که فرمت نمایش های مختلف مقادیر عددی  و هم چنین زمان و تاریخ را نیز هندل نمایید.

در این آموزش ما به شما ، قدم به قدم نشان خواهیم داد که چگونه فایل storyboard ، رشته ها ، تصاویر و نام اپ خود را محلی سازی نمایید. طبق روال ، ما فرآیند انجام کار را از طریق ساخت یک اپ ساده نشان داده و آن را با زبان فرانسوی تطبیق خواهیم داد.

مرور کلی بر محلی سازی

قصد داریم که یک اپ کوچک به نام “Book Store” را ایجاد کنیم ، که جزئیات همراه با تصویر ، عنوان ، نویسنده و توضیحات را برای یک کتاب نشان می دهد.  اپ اصلی به زبان انگلیسی می باشد. عملیات محلی سازی اپ برای زبان فرانسوی را با هم انجام خواهیم داد. از این رو ، در پایان این آموزش ، شما یک اپ خواهید داشت که به صورت محلی سازی شده از دو زبان انگلیسی و فرانسوی ، پشتیبانی می نماید.

برای ایجاد اپ به زبان فرانسوی ، ما چگونگی انجام محلی سازی را در موارد ذیل نشان خواهیم داد:

• متن های موجود در Storyboard ها
• تصویر کاور (cover image)
• پیام های پویا که توسط کدها نمایش داده می شوند
• نام اپ که در صفحه  home نمایش داده می شود

برای آنهایی که نمی دانند چگونه یک اپ محلی را انتخاب نمایند ، به بخش تنظیمات زبان iOS (General > International > Language) بروید. یک اپ ، از این اولویت ها (preference) ، به عنوان کلید برای دسترسی به منابع محلی شده برای زبان مورد درخواست ، استفاده می کند.

نکته: تا حد امکان ، برای ساده نگه داشتن مطالب آموزشی ،  اپ هیچ عملکرد خاصی ندارد و فقط داده های استاتیک مربوط به کتاب را نمایش می دهد. هم چنین ، لطفاً توجه کنید که شما باید از Xcode ورژن 4.6 یا بالاتر ، استفاده نمایید.

شروع کار

اکنون ، زمان برپا کردن پروژه با ایجاد یک پروژه جدید بر اساس تمپلت اپ iOS Single View Application  می باشد. در گزینه های پروژه ، نیاز داریم که Storyboard و Automatic Reference Counting را انتخاب نماییم. این اپ فقط View های آیفون را ارائه خواهد داد ، از این رو ، iPhone را به عنوان device family انتخاب کرده و پروژه را ذخیره می نماییم. Storyboard را باز کرده و رابط کاربری را مطابق شکل زیر ، طراحی می کنیم:

تمرکز این آموزش بر روی عملیات محلی سازی می باشد. بنابراین ، برای صرفه جویی در زمان مربوط به انجام تنظیمات پروژه ، شما می توانید تمپلت پروژه را از اینجا download this project template برای شروع کار ، دانلود نمایید. در این تمپلت ، قبلاً رابط کاربری ساخته شده است.

توجه: اگر شما هیچ درکی در مورد کار با Storyboard ندارد ، می توانید آموزش ما در این مورد را دنبال نمایید.

محلی سازی Storyboard

اکنون ، بیایید کار محلی سازی پروژه را شروع نماییم. در Xcode در project navigator روی بخش Book Store کلیک نموده و info tab مربوط به پروژه را انتخاب می کنیم. به بخش localization در info tab نگاه کنید. ظاهراً ، یک گزینه محلی سازی را نشان می دهد: English. چک باکس “Use Base Internalization”  را انتخاب می کنیم.

سپس ، از ما خواسته خواهد شد که Storyboard را برای استفاده base internationalization، انتخاب نماییم.

مطمئن می شویم که قسمت MainStoryboard.storyboard انتخاب شده باشد و زبان مرجع آن نیز انگلیسی باشد.

کاری که ما انجام دادیم ، فقط ایجاد base storyboard بود. مفهوم base internationalization اولین بار در Xcode 4-5 معرفی شد. یک اپ ، فقط یک مجموعه از storyboard ها را دارد که برای زبان پیش فرض ، محلی سازی شده است. این storyboard ها تحت عنوان base internationalization شناخته می شوند. بعد از این که ما یک محلی سازی دیگر را ایجاد کردیم ، اپ به طور خودکار فایل های رشته ای حاوی تمام متن های موجود در base storyboard را تولید می کند.

چرا base internationalization؟

قبل از Xcode 4.5 ، چنین مفهومی از base internationalization وجود نداشت. Xcode مجموعه storyboard ها را برای هر محلی سازی ، تکرار می کرد. یعنی ، در نظر بگیرید اپی که به 5 زبان محلی سازی شده باشد. Xcode 5 مجموعه از storyboard ها را با اهداف محلی سازی ، تولید می نماید. یک اشکال عمده برای فرآیند محلی سازی وجود دارد. هنگامی که نیاز به افزودن یک عنصر UI جدید در Storyboard ها داریم ، نیاز خواهیم داشت یک المان مشابه را برای هر محلی سازی ، اضافه کنیم. این یک فرآیند خسته کننده است. به همین دلیل است که اپل ، قابلیت base internationalization را در Xcode 4.5 معرفی نموده است.

با base storyboard پیکربندی شده ، اکنون آمادگی داریم که عملیات محلی سازی به زبان فرانسوی را انجام دهیم. ابتدا ، view controller را در storyboard انتخاب می کنیم . سپس ، به project info باز می گردیم. روی کلید + از بخش Localization کلیک کرده و از لیست popup زبان French را انتخاب می کنیم.

در ادامه ، از ما خواسته می شود که فایل های منبع و زبان مرجع را برای ایجاد محلی سازی French انتخاب نماییم. گزینه ها را مطابق تصویر زیر انتخاب می کنیم. تمام فایل ها را انتخاب کرده و کلید Finish را کلیک می کنیم.

بعد از انجام کار ، باید توجه شود که در navigator پروژه ، یک نشانه مستطیلی شکل ، بعد از MainStoryboard.storyboard ، وجود دارد. آن را بسط می دهیم و خواهیم دید که دو base storyboard  و یک فایل strings از storyboard فرانسوی در آن وجود دارد.

فایل فرانسوی strings (یعنی MainStoryboard.strings (French)) را انتخاب می کنیم. باید یک لیست از رشته هایی با دو جفت key/value را باید ببینیم:

/* Class = "IBUILabel"; text = "Stephane Mallat"; ObjectID = "0N3-up-Ts6"; */
"0N3-up-Ts6.text" = "Stephane Mallat";
 
/* Class = "IBUINavigationItem"; title = "Book Store"; ObjectID = "9EY-vY-nyh"; */
"9EY-vY-nyh.title" = "Book Store";
 
/* Class = "IBUILabel"; text = "This book is intended to serve as an invaluable reference for anyone concerned with the application of wavelets to signal processing. It has evolved from material used to teach \"wavelet signal processing\" courses in electrical engineering departments at Massachusetts Institute of Technology and Tel Aviv University, as well as applied mathematics departments at the Courant Institute of New York University and École Polytechnique in Paris. "; ObjectID = "gkh-KY-W1e"; */
"gkh-KY-W1e.text" = "This book is intended to serve as an invaluable reference for anyone concerned with the application of wavelets to signal processing. It has evolved from material used to teach \"wavelet signal processing\" courses in electrical engineering departments at Massachusetts Institute of Technology and Tel Aviv University, as well as applied mathematics departments at the Courant Institute of New York University and École Polytechnique in Paris. ";
 
/* Class = "IBUIButton"; normalTitle = "Buy"; ObjectID = "jul-3l-6x7"; */
"jul-3l-6x7.normalTitle" = "Buy";
 
/* Class = "IBUILabel"; text = "A Wavelet Tour of Signal Processing"; ObjectID = "xi7-zh-v4N"; */
"xi7-zh-v4N.text" = "A Wavelet Tour of Signal Processing";

هنگامی که یک محلی سازی جدید را اضافه می کنیم ، Xcode داخل base storyboard را اسکن می کند ، آیتم های متنی آنها را برای انجام محلی سازی ، استخراج می نماید و آن ها را در داخل فایل strings قرار می دهد. همان طور که در کدهای فوق می بینید ، رشته های قابل مشاهده از storyboard ها همانند برچسب ، عنوان navigation bar و برچسب کلید در داخل فایل strings گذاشته شده اند. تمام موجودیت ها ، دارای جفت مقادیر key/value هستند. بخش اول از key مربوط به ID شیء از آیتم UI می باشد. می توانیم object ID از شیء UI را در زیر بخش Identity Inspector پیدا کنیم. برای نمونه ، object ID از کلید Buy مطابق شکل زیر است:

با داشتن فایل strings تولید شده ، کار ما ترجمه تمام مقادیر داخل این فایل به زبان فرانسوی می باشد. محتواها از فایل MainStoryboard.strings برای انجام محلی سازی به زبان فرانسوی مطابق محتوای زیر می باشد:

/* Class = "IBUILabel"; text = "Stephane Mallat"; ObjectID = "0N3-up-Ts6"; */
"0N3-up-Ts6.text" = "Stephane Mallat";
 
/* Class = "IBUINavigationItem"; title = "Book Store"; ObjectID = "9EY-vY-nyh"; */
"9EY-vY-nyh.title" = "Librairie";
 
/* Class = "IBUILabel"; text = "This book is intended to serve as an invaluable reference for anyone concerned with the application of wavelets to signal processing. It has evolved from material used to teach \"wavelet signal processing\" courses in electrical engineering departments at Massachusetts Institute of Technology and Tel Aviv University, as well as applied mathematics departments at the Courant Institute of New York University and École Polytechnique in Paris. "; ObjectID = "gkh-KY-W1e"; */
"gkh-KY-W1e.text" = "Comprimer, restaurer et analyser un signal met en jeu des outils mathématiques sophistiqués, allant bien au-delà de la transformée de Fourier. Cet ouvrage mène le lecteur des bases du traitement du signal jusqu'aux résultats les plus récents, en jouant sur l'interaction entre les applications, le calcul numérique et les mathématiques. Il est conçu pour des élèves de maîtrise, de DEA ou de doctorat ainsi que pour des ingénieurs ou scientifiques qui analysent des données numériques.";
 
/* Class = "IBUIButton"; normalTitle = "Buy"; ObjectID = "jul-3l-6x7"; */
"jul-3l-6x7.normalTitle" = "Acheter";
 
/* Class = "IBUILabel"; text = "A Wavelet Tour of Signal Processing"; ObjectID = "xi7-zh-v4N"; */
"xi7-zh-v4N.text" = "Une exploration des signaux en ondelettes";

محلی سازی تصویر

محلی سازی تصاویر با استفاده از Xcode کار بسیار ساده ای است. همان طور که در Demo اپ دیدید ، می خواهیم تصویر cover را محلی سازی نماییم. تصویر “cover.jpeg” را از navigator پروژه انتخاب می کنیم. سپس ، file inspector را بیرون کشیده و به بخش localization می رویم ، در آنجا یک کلید به نام “Localize…” را خواهیم دید. روی کلید ، کلیک می کنیم. از ما تأیید انتخاب زبان الگلیسی را می خواهد ، روی کلید “Localize” برای انجام تأیید ، کلیک می کنیم.

بعد از آن ، یک گزینه French را در بخش localization خواهیم دید. محلی سازی “French” را انتخاب می کنیم. ما دو ورژن از تصویر cover,jpeg را مشاهده خواهیم کرد.

به finder بر می گردیم و وارد دیکشنری پروژه می شود. دو پوشه را خواهیم دید: en.lproj و fr.lproj. هر دو پوشه به طور خودکار توسط Xcode برای انجام عملیات محلی سازی ، تولید شده اند. پوشه en.lproj فایل های منبع برای محلی سازی انگلیسی هستند ، در حالی که پوشه fr.lproj مربوط به فایل های منبع محلی سازی فرانسوی می باشند. اگر نگاهی به هر دو پوشه بیاندازیم ، هر کدام حاوی فایل cover.jpeg می باشند. ورژن فرانسوی از تصویر کاور را می توانید از here دانلود کنید (یا از تصویری که ما در پوشه قرار داده ایم ، استفاده کنید).تصویر کاور دانلود شده را کپی کرده و آن را با تصویر موجود در پوشه fr.lproj جایگزین کنید.

اکنون ، زمان تست اپ می باشد. اگر همه چیز به درستی انجام شده باشد ، چیزی که ما در اپ مشاهده خواهیم کرد، محتواها به زبان انگلیسی و فرانسوی خواهند بود.

نکته: برای تغییر زبان در شبیه سازiPhone ، روی کلید home کلیک می کنیم. قسمت Setting >  General > Language رفته و گزینه French را انتخاب می کنیم.

محلی سازی رشته های داینامیک

تا کنون ، ما فقط محلی سازی اقلام استاتیک را نشان داده ایم. اما در بسیاری از جاهای اپلیکیشن ، ما نمونه های NSString به صورت پویا ایجاد می کنیم یا رشته های حرفی به کاربر نشان می دهیم. این رشته ها نیز ، نیاز به انجام محلی سازی در اپلیکیشن محلی شده دارند.

برای نشان دادن نحوه محلی سازی متن نمایش داده شده توسط کد ، چند خط کد برای عملیات “Buy” اضافه می کنیم:

- (IBAction)buy:(id)sender
{
    [[[UIAlertView alloc] initWithTitle:@"Confirmation"
                                message:NSLocalizedString(@"BOOK_PURCHASE", @"Message")
                               delegate:nil
                      cancelButtonTitle:@"OK"
                      otherButtonTitles:nil] show];
}

این کد ساده می باشد. فقط یک پیام هشدار را با محتوای “Thanks for Your Purchase!”  (از خرید شما متشکریم!) را نشان می دهد. اما به جای استفاده از پیام با کدهای پیچیده ، ما از ماکرو NSLocalizedString برای دریافت رشته استفاده می کنیم. ماکرو NSLocalizedString یک رشته محلی شده را از فایل Localizable.strings به بخش localization جاری ، واکشی می کند. این ماکرو ، دو آرگومان دارد: یک key و یک comment. در زمان اجرا (runtime) ، ماکرو مقدار key در بخش localization را بر می گرداند که با زبان موردنظر کاربر مطابقت دارد.

اگر اپ را اجرا کنیم و روی کلید Buy ضربه بزنیم ، ما فقط alert view را با پیام “BOOK_PURCHASE” خواهیم دید ؛ زیرا فایل Localizable.strings را ایجاد نکرده ایم. این فایل ، فایل پیش فرض برای ذخیره کردن رشته های محلی سازی شده ، می باشد که توسط کدها مورد استفاده قرار می گیرد.

اکنون ، بیایید یک فایل Localizable.strings را ایجاد کنیم. در navigator پروژه ، یک فایل جدید زیر پوشه Supporting Files می سازیم. تمپلت Strings file را انتخاب کرده و کلید Next را کلیک می کنیم.

فایل را به عنوان Localizable.strings ذخیره می کنیم. در ادامه ، روند مشابهی را برای محلی سازی فایل استفاده خواهیم کرد. Localizable.strings را انتخاب کرده و روی کلید “”Localize… در File Inspector کلیک می کنیم.

هنگامی که پنجره درخواست تأیید ، نمایان می شود ، باید مطمئن شویم که English انتخاب شده باشد و سپس روی کلید Localize کلیک می کنیم. در ادامه ، چک باکس French را برای افزودن فایل Localizable.strings به بخش French localization انتخاب می کنیم. اگر همه چیز به درستی انجام شود ، ما باید دو ورژن از فایل Localizable.strings را داشته باشیم.

پیام زیر را در ورژن English از فایل  Localizable.strings قرار می دهیم:

"BOOK_PURCHASE" = "Thanks for the Purchase!";

پیام را ترجمه کرده و آن را در ورژن French از فایل Localizable.strings قرار می دهیم:

"BOOK_PURCHASE" = "merci pour l'achat!";

اپ را دوباره کامپایل و اجرا می کنیم. بسته به تنظیمات زبان ، پیام هشدار متفاوتی در هنگام ضربه زدن بر روی کلید Buy دریافت می کنیم.

محلی سازی نام اپ

در برخی موارد ، ممکن است لازم باشد که نام اپ را محلی سازی نماییم. زمانی که محلی سازی فرانسوی را ایجاد می کنیم ، Xcode ورژن French از فایل InfoPlist.strings را تولید می کند. می توانیم جفت key/value را در فایل InfoPlist.string قرار دهیم ، تا مقادیر ذخیره شده در فایل Info.plist نادیده گرفته شود.

پس برای نشان دادن نام اپ متفاوت در ورژن French ، به سادگی می توانیم رشته ای را در فایل InfoPlist.string (French) اضافه کنیم:

"CFBundleDisplayName" = "Librairie";

این کد ، نام اپ را همان طور که در springboard نمایان شده ، تغییر می دهد. برای انجام تست مجدد ، اپ را دوباره کامپایل و اجرا می کنیم.

نکته: اگر نام اپ تغییر نکرده باشد ، سعی کنید بخش build شبیه ساز iPhone را پاک کرده و آن را reset نمایید.

خلاصه

در این آموزش ، ما فرآیند محلی ساری در برنامه نویسی iOS را تحت پوشش قرار دادیم. اکنون ، شما باید با مفاهیم اصلی محلی سازی در اپ iPhone به خوبی آشنا شده باشید.